Merge branch 'develop' into releases/1.8.0

CHANGELOG.md

@@ -77,6 +77,7 @@ These are the section headers that we use:
 
 - `argilla.training` bugfixes and unification ([#2665](https://github.com/argilla-io/argilla/issues/2665))
 - Resolved several small bugs in the `ArgillaTrainer`.
+- Avoid rendering html for invalid html strings in Text2text ([#2911]https://github.com/argilla-io/argilla/issues/2911)
 
 ### Deprecated
 
@@ -104,6 +105,7 @@ These are the section headers that we use:
 - Added `Argilla.training` module with support for `spacy`, `setfit`, and `transformers`. Closes [#2504](https://github.com/argilla-io/argilla/issues/2496)
 
 ### Fixes
+
 - Now the `prepare_for_training` method is working when `multi_label=True`. Closes [#2606](https://github.com/argilla-io/argilla/issues/2606)
 
 ### Changed
@@ -127,8 +129,6 @@ These are the section headers that we use:
 
 [#2564]: https://github.com/argilla-io/argilla/issues/2564
 
-
-
 ## [1.5.1](https://github.com/argilla-io/argilla/compare/v1.5.0...v1.5.1) - 2023-03-30
 
 ### Fixes

docs/_source/getting_started/installation/installation.md

@@ -67,7 +67,24 @@ docker-compose -f docker-compose.elasticsearch.yaml up
 
 
 (launch-the-web-app)=
-## 3. Launch Argilla Server
+
+## 3. Prepare database
+
+First of all, you need to make sure that database tables and models are up-to-date. This task must be launched when a new version of Argilla is installed. This will prepare some default ables for storing the data and user info.
+
+```bash
+python -m argilla database migrate
+```
+
+```
+INFO  [alembic.runtime.migration] Context impl SQLiteImpl.
+INFO  [alembic.runtime.migration] Will assume non-transactional DDL.
+INFO  [alembic.runtime.migration] Running upgrade  -> 74694870197c, create users table
+INFO  [alembic.runtime.migration] Running upgrade 74694870197c -> 82a5a88a3fa5, create workspaces table
+INFO  [alembic.runtime.migration] Running upgrade 82a5a88a3fa5 -> 1769ee58fbb4, create workspaces_users table
+```
+
+## 4. Launch Argilla Server
 
 
 You can start the Argilla Server and UI by running:
@@ -86,7 +103,7 @@ You can also launch the Argilla Server and UI using [docker](launching-the-web-a
 For the latter you do not need a running ES instance.
 :::
 
-## 3. Start logging data
+## 5. Start logging data
 
 The following code will log one record into a data set called `example-dataset`:
 

frontend/components/text2text/results/Text2TextContentEditable.vue

@@ -3,14 +3,15 @@
     <div class="content__edition-area">
       <transition appear name="fade">
         <p
+          :key="editableText"
           ref="text"
           id="contentId"
           class="content__text"
           :class="textIsEdited ? '--edited-text' : null"
           :contenteditable="annotationEnabled"
           :placeholder="placeholder"
           @input="onInputText"
-          v-html="editableText"
+          v-html="customEditableText"
           @focus="setFocus(true)"
           @blur="setFocus(false)"
           @keydown.shift.backspace.exact="looseFocus"
@@ -26,6 +27,7 @@
   </span>
 </template>
 <script>
+import { escapeHtmlChars } from "@/utils/escapeHtmlChars";
 export default {
   props: {
     annotationEnabled: {
@@ -64,6 +66,11 @@ export default {
         this.defaultText === this.annotations[0]?.text
       );
     },
+    customEditableText() {
+      return this.$checkValidHtml(this.editableText)
+        ? this.editableText
+        : escapeHtmlChars(this.editableText);
+    },
   },
   mounted() {
     window.addEventListener("keydown", this.keyDown);

frontend/nuxt.config.js

@@ -65,6 +65,7 @@ export default {
     { src: "~/plugins/toast.js" },
     { src: "~/plugins/highlight-search.js" },
     { src: "~/plugins/copy-to-clipboard.js" },
+    { src: "~/plugins/check-valid-html.js" },
     { src: "~/plugins/filters.js" },
     { src: "~/plugins/variables.js" },
     { src: "~/plugins/custom-directives/badge.directive.js" },

frontend/plugins/check-valid-html.js

@@ -0,0 +1,27 @@
+/*
+ * coding=utf-8
+ * Copyright 2021-present, the Recognai S.L. team.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default (context, inject) => {
+  const checkValidHtml = function (text) {
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(text, "application/xml");
+    let errorNode = doc.querySelector("parsererror");
+    return !errorNode;
+  };
+
+  inject("checkValidHtml", checkValidHtml);
+};

frontend/utils/escapeHtmlChars.js

@@ -0,0 +1,15 @@
+const escapeHtmlChars = function (value) {
+  return value?.replace(
+    /[&<>'"]/g,
+    (tag) =>
+      ({
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        "'": "&#39;",
+        '"': "&quot;",
+      }[tag])
+  );
+};
+
+export { escapeHtmlChars };