Add dir="auto" to most user generated content

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Editor/Autodir.ts

@@ -0,0 +1,30 @@
+import { Extension } from "@tiptap/core";
+
+/**
+ * Allows to set dir="auto" on top nodes
+ * Taken from https://github.com/ueberdosis/tiptap/issues/1621#issuecomment-918990408
+ */
+export const AutoDir = Extension.create({
+  name: "AutoDir",
+  addGlobalAttributes() {
+    return [
+      {
+        types: [
+          "heading",
+          "paragraph",
+          "bulletList",
+          "orderedList",
+          "blockquote",
+        ],
+        attributes: {
+          autoDir: {
+            renderHTML: () => ({
+              dir: "auto",
+            }),
+            parseHTML: (element) => element.dir || "auto",
+          },
+        },
+      },
+    ];
+  },
+});

js/src/components/Editor/Mention.ts

@@ -27,6 +27,7 @@ const debouncedFetchItems = pDebounce(fetchItems, 200);
 const mentionOptions: Partial<any> = {
   HTMLAttributes: {
     class: "mention",
+    dir: "ltr",
   },
   suggestion: {
     items: async (query: string): Promise<IPerson[]> => {