From bfbfc56e4abc8f24d1186095325e19360e8d25b3 Mon Sep 17 00:00:00 2001
From: Cody Saylor <csaylor@edf.org>
Date: Wed, 27 Mar 2024 22:04:01 -0400
Subject: [PATCH 1/3] Add text alignment

---
 package-lock.json                            | 13 +++++++
 package.json                                 |  1 +
 shared/extensions.ts                         |  4 +++
 src/interface/components/ToolButtonTable.vue | 36 ++++++++++++++++++++
 src/interface/tools/index.ts                 |  2 ++
 src/interface/tools/textAlign.ts             | 18 ++++++++++
 6 files changed, 74 insertions(+)
 create mode 100644 src/interface/tools/textAlign.ts

diff --git a/package-lock.json b/package-lock.json
index 8203950..2d599d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -34,6 +34,7 @@
                 "@tiptap/extension-table-header": "^2.2.2",
                 "@tiptap/extension-table-row": "^2.2.2",
                 "@tiptap/extension-text": "^2.2.2",
+                "@tiptap/extension-text-align": "^2.2.4",
                 "tiptap-render-view": "^1.0.2"
             },
             "devDependencies": {
@@ -1382,6 +1383,18 @@
                 "@tiptap/core": "^2.0.0"
             }
         },
+        "node_modules/@tiptap/extension-text-align": {
+            "version": "2.2.4",
+            "resolved": "https://registry.npmjs.org/@tiptap/extension-text-align/-/extension-text-align-2.2.4.tgz",
+            "integrity": "sha512-iojhpsv3n/r4g/4wMFl1d85RloWrAV3TRUJluurPQZJdrJ7ynJ2fiPqmigAXyaYAJ3+a1ryu9JPlktT9RdYO/A==",
+            "funding": {
+                "type": "github",
+                "url": "https://github.com/sponsors/ueberdosis"
+            },
+            "peerDependencies": {
+                "@tiptap/core": "^2.0.0"
+            }
+        },
         "node_modules/@tiptap/pm": {
             "version": "2.2.4",
             "resolved": "https://registry.npmjs.org/@tiptap/pm/-/pm-2.2.4.tgz",
diff --git a/package.json b/package.json
index 5182b72..c0c7b32 100644
--- a/package.json
+++ b/package.json
@@ -105,6 +105,7 @@
         "@tiptap/extension-table-header": "^2.2.2",
         "@tiptap/extension-table-row": "^2.2.2",
         "@tiptap/extension-text": "^2.2.2",
+        "@tiptap/extension-text-align": "^2.2.4",
         "tiptap-render-view": "^1.0.2"
     }
 }
diff --git a/shared/extensions.ts b/shared/extensions.ts
index 88f5afa..c2fdbac 100644
--- a/shared/extensions.ts
+++ b/shared/extensions.ts
@@ -21,6 +21,7 @@ import { Table } from "@tiptap/extension-table";
 import { TableHeader } from "@tiptap/extension-table-header";
 import { TableRow } from "@tiptap/extension-table-row";
 import { TableCell } from "@tiptap/extension-table-cell";
+import TextAlign from "@tiptap/extension-text-align";
 
 export default [
   Document,
@@ -43,4 +44,7 @@ export default [
   TableHeader,
   TableRow,
   TableCell,
+  TextAlign.configure({
+    types: ['heading', 'paragraph'],
+  }),
 ];
diff --git a/src/interface/components/ToolButtonTable.vue b/src/interface/components/ToolButtonTable.vue
index c22b07d..16346de 100644
--- a/src/interface/components/ToolButtonTable.vue
+++ b/src/interface/components/ToolButtonTable.vue
@@ -14,6 +14,42 @@
             />
         </template>
         <v-list>
+            <v-list-item
+                clickable
+                @click="editor.chain().focus().setTextAlign('left').run()"
+                :active="editor.isActive('textStyle', { textAlign: 'left' })"
+            >
+                <v-list-item-content>
+                    <v-text-overflow :text="t('tools.align-left')" />
+                </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+                clickable
+                @click="editor.chain().focus().setTextAlign('center').run()"
+                :active="editor.isActive('textStyle', { textAlign: 'center' })"
+            >
+                <v-list-item-content>
+                    <v-text-overflow :text="t('tools.align-center')" />
+                </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+                clickable
+                @click="editor.chain().focus().setTextAlign('right').run()"
+                :active="editor.isActive('textStyle', { textAlign: 'right' })"
+            >
+                <v-list-item-content>
+                    <v-text-overflow :text="t('tools.align-right')" />
+                </v-list-item-content>
+            </v-list-item>
+            <v-list-item
+                clickable
+                @click="editor.chain().focus().setTextAlign('justify').run()"
+                :active="editor.isActive('textStyle', { textAlign: 'justify' })"
+            >
+                <v-list-item-content>
+                    <v-text-overflow :text="t('tools.align-justify')" />
+                </v-list-item-content>
+            </v-list-item>
             <v-list-item
                 clickable
                 @click="action"
diff --git a/src/interface/tools/index.ts b/src/interface/tools/index.ts
index 409479b..e6740fe 100644
--- a/src/interface/tools/index.ts
+++ b/src/interface/tools/index.ts
@@ -1,5 +1,6 @@
 // NOTE: [guide] Add a `Tool` by creating a new file in this directory, importing it and adding it to the `tools: Tool[]` array below! If you import a tiptap extension that also renders content, make sure to add it to /shared/extensions.ts as well!
 
+import { textAlignTools } from "./textAlign";
 import heading from "./heading";
 import history from "./history";
 import relationBlock from "./relation-block";
@@ -20,6 +21,7 @@ import type { AnyExtension } from "@tiptap/core";
 import type { Tool, ToolSelection, InterfaceOption } from "../types";
 
 const tools: Tool[] = [
+  ...textAlignTools,
   relationBlock,
   paragraph,
   codeBlock,
diff --git a/src/interface/tools/textAlign.ts b/src/interface/tools/textAlign.ts
new file mode 100644
index 0000000..3405f01
--- /dev/null
+++ b/src/interface/tools/textAlign.ts
@@ -0,0 +1,18 @@
+// https://tiptap.dev/api/extensions/text-align
+import TextAlign from "@tiptap/extension-text-align";
+import customMessages from "../i18n/custom-messages";
+import type { Editor } from "@tiptap/core";
+import type { Tool } from "../types";
+
+const textAlignOptions = ['left', 'center', 'right', 'justify'];
+
+export const textAlignTools = textAlignOptions.map((alignment) => ({
+  key: `align-${alignment}`,
+  name: (customMessages.tools as any)[`align-${alignment}`],
+  icon: `format_align_${alignment}`,
+  extension: [TextAlign],
+  action: (editor: Editor) => editor.chain().focus().setTextAlign(alignment).run(),
+  disabled: (editor: Editor) => !editor.can().chain().focus().setTextAlign(alignment).run(),
+  active: (editor: Editor) => editor.isActive('textStyle', { textAlign: alignment }),
+})) as Tool[];
+

From 8abca3bcd1261c3b6256d27cca5c9141ecddde57 Mon Sep 17 00:00:00 2001
From: Cody Saylor <csaylor@edf.org>
Date: Thu, 28 Mar 2024 02:37:01 -0400
Subject: [PATCH 2/3] Add button labels, but it's still not applying property

---
 src/interface/components/ToolButtonTable.vue | 36 --------------------
 src/interface/i18n/custom-messages.ts        |  4 +++
 src/interface/interface.vue                  | 17 +++++++++
 src/interface/tools/textAlign.ts             |  4 +--
 4 files changed, 23 insertions(+), 38 deletions(-)

diff --git a/src/interface/components/ToolButtonTable.vue b/src/interface/components/ToolButtonTable.vue
index 16346de..c22b07d 100644
--- a/src/interface/components/ToolButtonTable.vue
+++ b/src/interface/components/ToolButtonTable.vue
@@ -14,42 +14,6 @@
             />
         </template>
         <v-list>
-            <v-list-item
-                clickable
-                @click="editor.chain().focus().setTextAlign('left').run()"
-                :active="editor.isActive('textStyle', { textAlign: 'left' })"
-            >
-                <v-list-item-content>
-                    <v-text-overflow :text="t('tools.align-left')" />
-                </v-list-item-content>
-            </v-list-item>
-            <v-list-item
-                clickable
-                @click="editor.chain().focus().setTextAlign('center').run()"
-                :active="editor.isActive('textStyle', { textAlign: 'center' })"
-            >
-                <v-list-item-content>
-                    <v-text-overflow :text="t('tools.align-center')" />
-                </v-list-item-content>
-            </v-list-item>
-            <v-list-item
-                clickable
-                @click="editor.chain().focus().setTextAlign('right').run()"
-                :active="editor.isActive('textStyle', { textAlign: 'right' })"
-            >
-                <v-list-item-content>
-                    <v-text-overflow :text="t('tools.align-right')" />
-                </v-list-item-content>
-            </v-list-item>
-            <v-list-item
-                clickable
-                @click="editor.chain().focus().setTextAlign('justify').run()"
-                :active="editor.isActive('textStyle', { textAlign: 'justify' })"
-            >
-                <v-list-item-content>
-                    <v-text-overflow :text="t('tools.align-justify')" />
-                </v-list-item-content>
-            </v-list-item>
             <v-list-item
                 clickable
                 @click="action"
diff --git a/src/interface/i18n/custom-messages.ts b/src/interface/i18n/custom-messages.ts
index c7b90bb..44c1f38 100644
--- a/src/interface/i18n/custom-messages.ts
+++ b/src/interface/i18n/custom-messages.ts
@@ -23,6 +23,10 @@ export default {
     },
     tools: {
         relation_block: "Blocks",
+        align_left: "Align Left",
+        align_center: "Align Center",
+        align_right: "Align Right",
+        align_justify: "Justify",
         paragraph: "Paragraph",
         code_block: "Code Block",
         h1: "$t:wysiwyg_options.h1",
diff --git a/src/interface/interface.vue b/src/interface/interface.vue
index 592335a..144043c 100644
--- a/src/interface/interface.vue
+++ b/src/interface/interface.vue
@@ -44,6 +44,7 @@
     import Placeholder from '@tiptap/extension-placeholder'
     import Dropcursor from '@tiptap/extension-dropcursor'
     import Gapcursor from '@tiptap/extension-gapcursor'
+    import TextAlign from '@tiptap/extension-text-align'
     import RelationBlock from "./nodes/relation-block";
     import { toolsExtensions, interfaceOptionsDefault, selectedTools } from './tools'
     import { useSyncRelationNodes } from "./composables/use-sync-relation-nodes"
@@ -111,6 +112,9 @@
             Placeholder.configure({ placeholder: props.placeholder }),
             Dropcursor,
             Gapcursor,
+            TextAlign.configure({
+                types: ['heading', 'paragraph'],
+            }),
             RelationBlock,
             ...toolsExtensions(props.tools)
         ],
@@ -427,6 +431,19 @@
     .flexible-editor :deep(.ProseMirror .ProseMirror-gapcursor:last-child:after) {
         bottom: 0;
     }
+
+    .flexible-editor .ProseMirror [textAlign="left"] {
+        text-align: left;
+    }
+    .flexible-editor .ProseMirror [textAlign="center"] {
+        text-align: center;
+    }
+    .flexible-editor .ProseMirror [textAlign="right"] {
+        text-align: right;
+    }
+    .flexible-editor .ProseMirror [textAlign="justify"] {
+        text-align: justify;
+    }
 </style>
 
 
diff --git a/src/interface/tools/textAlign.ts b/src/interface/tools/textAlign.ts
index 3405f01..071652c 100644
--- a/src/interface/tools/textAlign.ts
+++ b/src/interface/tools/textAlign.ts
@@ -7,8 +7,8 @@ import type { Tool } from "../types";
 const textAlignOptions = ['left', 'center', 'right', 'justify'];
 
 export const textAlignTools = textAlignOptions.map((alignment) => ({
-  key: `align-${alignment}`,
-  name: (customMessages.tools as any)[`align-${alignment}`],
+  key: `align_${alignment}`,
+  name: (customMessages.tools as any)[`align_${alignment}`],
   icon: `format_align_${alignment}`,
   extension: [TextAlign],
   action: (editor: Editor) => editor.chain().focus().setTextAlign(alignment).run(),

From 3c3354617b515b1eebcf65570ef20c6967c4db9a Mon Sep 17 00:00:00 2001
From: Cody Saylor <csaylor@edf.org>
Date: Thu, 28 Mar 2024 23:19:01 -0400
Subject: [PATCH 3/3] Update packages and TextAlign config

---
 package-lock.json           | 54 ++++++++++++++++++-------------------
 package.json                | 54 ++++++++++++++++++-------------------
 shared/extensions.ts        |  2 +-
 src/interface/interface.vue |  5 ++--
 4 files changed, 58 insertions(+), 57 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 2d599d3..2a6d4bc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,39 +9,39 @@
             "version": "1.2.5",
             "license": "GPL-3.0",
             "dependencies": {
-                "@tiptap/core": "^2.2.2",
-                "@tiptap/extension-blockquote": "^2.2.2",
-                "@tiptap/extension-bold": "^2.2.2",
-                "@tiptap/extension-bullet-list": "^2.2.2",
-                "@tiptap/extension-code": "^2.2.2",
-                "@tiptap/extension-code-block": "^2.2.2",
-                "@tiptap/extension-document": "^2.2.2",
-                "@tiptap/extension-dropcursor": "^2.2.2",
-                "@tiptap/extension-gapcursor": "^2.2.2",
-                "@tiptap/extension-hard-break": "^2.2.2",
-                "@tiptap/extension-heading": "^2.2.2",
-                "@tiptap/extension-history": "^2.2.2",
-                "@tiptap/extension-horizontal-rule": "^2.2.2",
-                "@tiptap/extension-italic": "^2.2.2",
-                "@tiptap/extension-link": "^2.2.2",
-                "@tiptap/extension-list-item": "^2.2.2",
-                "@tiptap/extension-ordered-list": "^2.2.2",
-                "@tiptap/extension-paragraph": "^2.2.2",
-                "@tiptap/extension-placeholder": "^2.2.2",
-                "@tiptap/extension-strike": "^2.2.2",
-                "@tiptap/extension-table": "^2.2.2",
-                "@tiptap/extension-table-cell": "^2.2.2",
-                "@tiptap/extension-table-header": "^2.2.2",
-                "@tiptap/extension-table-row": "^2.2.2",
-                "@tiptap/extension-text": "^2.2.2",
+                "@tiptap/core": "^2.2.4",
+                "@tiptap/extension-blockquote": "^2.2.4",
+                "@tiptap/extension-bold": "^2.2.4",
+                "@tiptap/extension-bullet-list": "^2.2.4",
+                "@tiptap/extension-code": "^2.2.4",
+                "@tiptap/extension-code-block": "^2.2.4",
+                "@tiptap/extension-document": "^2.2.4",
+                "@tiptap/extension-dropcursor": "^2.2.4",
+                "@tiptap/extension-gapcursor": "^2.2.4",
+                "@tiptap/extension-hard-break": "^2.2.4",
+                "@tiptap/extension-heading": "^2.2.4",
+                "@tiptap/extension-history": "^2.2.4",
+                "@tiptap/extension-horizontal-rule": "^2.2.4",
+                "@tiptap/extension-italic": "^2.2.4",
+                "@tiptap/extension-link": "^2.2.4",
+                "@tiptap/extension-list-item": "^2.2.4",
+                "@tiptap/extension-ordered-list": "^2.2.4",
+                "@tiptap/extension-paragraph": "^2.2.4",
+                "@tiptap/extension-placeholder": "^2.2.4",
+                "@tiptap/extension-strike": "^2.2.4",
+                "@tiptap/extension-table": "^2.2.4",
+                "@tiptap/extension-table-cell": "^2.2.4",
+                "@tiptap/extension-table-header": "^2.2.4",
+                "@tiptap/extension-table-row": "^2.2.4",
+                "@tiptap/extension-text": "^2.2.4",
                 "@tiptap/extension-text-align": "^2.2.4",
                 "tiptap-render-view": "^1.0.2"
             },
             "devDependencies": {
                 "@directus/extensions-sdk": "11.0.1",
                 "@directus/utils": "^11.0.4",
-                "@tiptap/pm": "^2.2.2",
-                "@tiptap/vue-3": "^2.2.2",
+                "@tiptap/pm": "^2.2.4",
+                "@tiptap/vue-3": "^2.2.4",
                 "@types/lodash": "^4.14.195",
                 "@types/node": "^20.11.17",
                 "@types/uuid": "^9.0.2",
diff --git a/package.json b/package.json
index c0c7b32..06b2aa8 100644
--- a/package.json
+++ b/package.json
@@ -67,8 +67,8 @@
     "devDependencies": {
         "@directus/extensions-sdk": "11.0.1",
         "@directus/utils": "^11.0.4",
-        "@tiptap/pm": "^2.2.2",
-        "@tiptap/vue-3": "^2.2.2",
+        "@tiptap/pm": "^2.2.4",
+        "@tiptap/vue-3": "^2.2.4",
         "@types/lodash": "^4.14.195",
         "@types/node": "^20.11.17",
         "@types/uuid": "^9.0.2",
@@ -80,31 +80,31 @@
         "vue-i18n": "^9.4.0"
     },
     "dependencies": {
-        "@tiptap/core": "^2.2.2",
-        "@tiptap/extension-blockquote": "^2.2.2",
-        "@tiptap/extension-bold": "^2.2.2",
-        "@tiptap/extension-bullet-list": "^2.2.2",
-        "@tiptap/extension-code": "^2.2.2",
-        "@tiptap/extension-code-block": "^2.2.2",
-        "@tiptap/extension-document": "^2.2.2",
-        "@tiptap/extension-dropcursor": "^2.2.2",
-        "@tiptap/extension-gapcursor": "^2.2.2",
-        "@tiptap/extension-hard-break": "^2.2.2",
-        "@tiptap/extension-heading": "^2.2.2",
-        "@tiptap/extension-history": "^2.2.2",
-        "@tiptap/extension-horizontal-rule": "^2.2.2",
-        "@tiptap/extension-italic": "^2.2.2",
-        "@tiptap/extension-link": "^2.2.2",
-        "@tiptap/extension-list-item": "^2.2.2",
-        "@tiptap/extension-ordered-list": "^2.2.2",
-        "@tiptap/extension-paragraph": "^2.2.2",
-        "@tiptap/extension-placeholder": "^2.2.2",
-        "@tiptap/extension-strike": "^2.2.2",
-        "@tiptap/extension-table": "^2.2.2",
-        "@tiptap/extension-table-cell": "^2.2.2",
-        "@tiptap/extension-table-header": "^2.2.2",
-        "@tiptap/extension-table-row": "^2.2.2",
-        "@tiptap/extension-text": "^2.2.2",
+        "@tiptap/core": "^2.2.4",
+        "@tiptap/extension-blockquote": "^2.2.4",
+        "@tiptap/extension-bold": "^2.2.4",
+        "@tiptap/extension-bullet-list": "^2.2.4",
+        "@tiptap/extension-code": "^2.2.4",
+        "@tiptap/extension-code-block": "^2.2.4",
+        "@tiptap/extension-document": "^2.2.4",
+        "@tiptap/extension-dropcursor": "^2.2.4",
+        "@tiptap/extension-gapcursor": "^2.2.4",
+        "@tiptap/extension-hard-break": "^2.2.4",
+        "@tiptap/extension-heading": "^2.2.4",
+        "@tiptap/extension-history": "^2.2.4",
+        "@tiptap/extension-horizontal-rule": "^2.2.4",
+        "@tiptap/extension-italic": "^2.2.4",
+        "@tiptap/extension-link": "^2.2.4",
+        "@tiptap/extension-list-item": "^2.2.4",
+        "@tiptap/extension-ordered-list": "^2.2.4",
+        "@tiptap/extension-paragraph": "^2.2.4",
+        "@tiptap/extension-placeholder": "^2.2.4",
+        "@tiptap/extension-strike": "^2.2.4",
+        "@tiptap/extension-table": "^2.2.4",
+        "@tiptap/extension-table-cell": "^2.2.4",
+        "@tiptap/extension-table-header": "^2.2.4",
+        "@tiptap/extension-table-row": "^2.2.4",
+        "@tiptap/extension-text": "^2.2.4",
         "@tiptap/extension-text-align": "^2.2.4",
         "tiptap-render-view": "^1.0.2"
     }
diff --git a/shared/extensions.ts b/shared/extensions.ts
index c2fdbac..d12b96a 100644
--- a/shared/extensions.ts
+++ b/shared/extensions.ts
@@ -45,6 +45,6 @@ export default [
   TableRow,
   TableCell,
   TextAlign.configure({
-    types: ['heading', 'paragraph'],
+    types: ['paragraph', 'heading'],
   }),
 ];
diff --git a/src/interface/interface.vue b/src/interface/interface.vue
index 144043c..1aa26ac 100644
--- a/src/interface/interface.vue
+++ b/src/interface/interface.vue
@@ -113,8 +113,8 @@
             Dropcursor,
             Gapcursor,
             TextAlign.configure({
-                types: ['heading', 'paragraph'],
-            }),
+            types: ['paragraph', 'heading'],
+        }),
             RelationBlock,
             ...toolsExtensions(props.tools)
         ],
@@ -444,6 +444,7 @@
     .flexible-editor .ProseMirror [textAlign="justify"] {
         text-align: justify;
     }
+    
 </style>