Add extension-text-align

package.json

@@ -33,6 +33,7 @@
     "@stripe/stripe-js": "^1.21.2",
     "@tailwindcss/line-clamp": "^0.3.0",
     "@tiptap/core": "^2.0.0-beta.85",
+    "@tiptap/extension-text-align": "^2.0.0-beta.29",
     "@tiptap/starter-kit": "^2.0.0-beta.81",
     "@tiptap/vue-3": "^2.0.0-beta.38",
     "@vuelidate/components": "^1.1.12",

resources/scripts/components/base/base-editor/BaseEditor.vue

@@ -504,6 +504,72 @@
           >
             <redo-icon class="h-3 cursor-pointer fill-current" />
           </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'left' }) }"
+            @click="editor.chain().focus().setTextAlign('left').run()"
+          >
+            <menu-alt2-icon class="h-5 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'right' }) }"
+            @click="editor.chain().focus().setTextAlign('right').run()"
+          >
+            <menu-alt3-icon class="h-5 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{
+              'bg-gray-200': editor.isActive({ textAlign: 'justify' }),
+            }"
+            @click="editor.chain().focus().setTextAlign('justify').run()"
+          >
+            <menu-icon class="h-5 cursor-pointer fill-current" />
+          </span>
+          <span
+            class="
+              flex
+              items-center
+              justify-center
+              w-6
+              h-6
+              rounded-sm
+              cursor-pointer
+              hover:bg-gray-100
+            "
+            :class="{ 'bg-gray-200': editor.isActive({ textAlign: 'center' }) }"
+            @click="editor.chain().focus().setTextAlign('center').run()"
+          >
+            <menu-center-icon class="h-5 cursor-pointer fill-current" />
+          </span>
         </div>
       </div>
       <editor-content
@@ -526,7 +592,13 @@
 import { onUnmounted, watch } from 'vue'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
-import { DotsVerticalIcon } from '@heroicons/vue/outline'
+import {
+  DotsVerticalIcon,
+  MenuAlt2Icon,
+  MenuAlt3Icon,
+  MenuIcon,
+} from '@heroicons/vue/outline'
+import TextAlign from '@tiptap/extension-text-align'
 
 import {
   BoldIcon,
@@ -540,6 +612,7 @@ import {
   UndoIcon,
   RedoIcon,
   CodeBlockIcon,
+  MenuCenterIcon,
 } from './icons/index.js'
 
 export default {
@@ -557,6 +630,10 @@ export default {
     RedoIcon,
     CodeBlockIcon,
     DotsVerticalIcon,
+    MenuCenterIcon,
+    MenuAlt2Icon,
+    MenuAlt3Icon,
+    MenuIcon,
   },
 
   props: {
@@ -573,7 +650,13 @@ export default {
   setup(props, { emit }) {
     const editor = useEditor({
       content: props.modelValue,
-      extensions: [StarterKit],
+      extensions: [
+        StarterKit,
+        TextAlign.configure({
+          types: ['heading', 'paragraph'],
+          alignments: ['left', 'right', 'center', 'justify'],
+        }),
+      ],
 
       onUpdate: () => {
         emit('update:modelValue', editor.value.getHTML())

resources/scripts/components/base/base-editor/icons/MenuCenterIcon.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M3.75 5.25h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 0 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5zm-4 4h16.5a.75.75 0 1 1 0 1.5H3.75a.75.75 0 1 1 0-1.5zm4 4h8.5a.75.75 0 1 1 0 1.5h-8.5a.75.75 0 1 1 0-1.5z"
+    ></path>
+  </svg>
+</template>
+
+

resources/scripts/components/base/base-editor/icons/index.js

@@ -10,6 +10,7 @@ import StrikethroughIcon from './StrikethroughIcon.vue'
 import UndoIcon from './UndoIcon.vue'
 import RedoIcon from './RedoIcon.vue'
 import CodeBlockIcon from './CodeBlockIcon.vue'
+import MenuCenterIcon from './MenuCenterIcon.vue'
 
 export {
   UnderlineIcon,
@@ -23,5 +24,6 @@ export {
   StrikethroughIcon,
   UndoIcon,
   RedoIcon,
-  CodeBlockIcon
+  CodeBlockIcon,
+  MenuCenterIcon
 }