📝 Html sandbox (#5353)

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

argilla-frontend/components/features/annotation/container/fields/text-field/Sandbox.vue

@@ -0,0 +1,29 @@
+<template>
+  <iframe :srcdoc="fieldText" ref="iframe" frameborder="0" scrolling="no" />
+</template>
+
+<script>
+export default {
+  props: {
+    fieldText: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    resize() {
+      this.$refs.iframe.style.height =
+        this.$refs.iframe.contentWindow.document.documentElement.scrollHeight +
+        450 +
+        "px";
+    },
+  },
+};
+</script>
+
+<style>
+iframe {
+  border: none;
+  width: 100%;
+}
+</style>

argilla-frontend/components/features/annotation/container/fields/text-field/TextField.vue

@@ -18,6 +18,7 @@
     </div>
     <div :id="`fields-content-${name}`" class="content-area --body1">
       <div :class="classes" v-if="!useMarkdown" v-html="fieldText" />
+      <Sandbox v-else-if="isHTML" :fieldText="fieldText" />
       <RenderMarkdownBaseComponent v-else :markdown="fieldText" />
       <template>
         <style :key="name" scoped>
@@ -60,6 +61,9 @@ export default {
     classes() {
       return this.$language.isRTL(this.fieldText) ? "--rtl" : "--ltr";
     },
+    isHTML() {
+      return /<([A-Za-z][A-Za-z0-9]*)\b[^>]*>(.*?)<\/\1>/.test(this.fieldText);
+    },
   },
   setup(props) {
     return useTextFieldViewModel(props);