feat: text align extension #14

package.json

@@ -58,6 +58,7 @@
     "@tiptap/extension-placeholder": "^2.0.2",
     "@tiptap/extension-subscript": "^2.0.2",
     "@tiptap/extension-superscript": "^2.0.2",
+    "@tiptap/extension-text-align": "^2.0.2",
     "@tiptap/extension-typography": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",

src/extensions.ts

@@ -6,6 +6,7 @@ import { Subscript } from "@tiptap/extension-subscript";
 import { Superscript } from "@tiptap/extension-superscript";
 import { CharacterCount } from "@tiptap/extension-character-count";
 import { Typography } from "@tiptap/extension-typography";
+import { TextAlign } from "@tiptap/extension-text-align";
 
 export const extensions: Extensions = [
   StarterKit,
@@ -15,4 +16,7 @@ export const extensions: Extensions = [
   Superscript,
   CharacterCount,
   Typography,
+  TextAlign.configure({
+    types: ["heading", "paragraph"],
+  }),
 ];

src/icons/align-center.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path d="M3 4H21V6H3V4ZM5 19H19V21H5V19ZM3 14H21V16H3V14ZM5 9H19V11H5V9Z"></path>
+  </svg>
+</template>

src/icons/align-justify.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path d="M3 4H21V6H3V4ZM3 19H21V21H3V19ZM3 14H21V16H3V14ZM3 9H21V11H3V9Z"></path>
+  </svg>
+</template>

src/icons/align-left.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path d="M3 4H21V6H3V4ZM3 19H17V21H3V19ZM3 14H21V16H3V14ZM3 9H17V11H3V9Z"></path>
+  </svg>
+</template>

src/icons/align-right.vue

@@ -0,0 +1,5 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+    <path d="M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z"></path>
+  </svg>
+</template>

src/messages.json

@@ -6,7 +6,8 @@
       "clear_format": "Clear text formatting",
       "highlight": "Highlight",
       "count_chars": "no characters | 1 character | {count} characters",
-      "count_words": "no words | 1 word | {count} words"
+      "count_words": "no words | 1 word | {count} words",
+      "text_align": "Text align"
     }
   },
   "fr": {
@@ -16,7 +17,8 @@
       "clear_format": "Effacer la mise en forme",
       "highlight": "Surligner",
       "count_chars": "aucun caractère | 1 caractère | {count} caractères",
-      "count_words": "aucun mot | 1 mot | {count} mots"
+      "count_words": "aucun mot | 1 mot | {count} mots",
+      "text_align": "Alignement du texte"
     }
   }
 }

src/tiptap-editor.vue

@@ -225,6 +225,42 @@
 
       <div class="divider" />
 
+      <v-menu v-if="editorExtensions.includes('textAlign')" show-arrow placement="bottom-start">
+        <template #activator="{ toggle }">
+          <v-button v-tooltip="t('tiptap.text_align')" :disabled="props.disabled" small icon active @click="toggle">
+            <template v-for="opt in alignOptions" :key="opt.align">
+              <component v-if="editor.isActive({ textAlign: opt.align })" :is="opt.icon" />
+            </template>
+          </v-button>
+        </template>
+        <v-list>
+          <v-list-item
+            v-for="opt in alignOptions"
+            :key="opt.align"
+            clickable
+            :active="editor.isActive({ textAlign: opt.align })"
+            @click="
+              editor.isActive({ textAlign: opt.align })
+                ? editor.chain().focus().unsetTextAlign().run()
+                : editor.chain().focus().setTextAlign(opt.align).run()
+            "
+          >
+            <v-list-item-icon>
+              <component :is="opt.icon" />
+            </v-list-item-icon>
+            <v-list-item-content>
+              <v-text-overflow :text="opt.text" />
+            </v-list-item-content>
+            <v-list-item-hint>{{ opt.shortcut }}</v-list-item-hint>
+          </v-list-item>
+          <v-list-item clickable @click="editor.chain().focus().unsetTextAlign().run()">
+            <v-list-item-content>
+              <v-text-overflow :text="t('wysiwyg_options.alignnone')" />
+            </v-list-item-content>
+          </v-list-item>
+        </v-list>
+      </v-menu>
+
       <v-button
         v-if="editorExtensions.includes('horizontalRule')"
         v-tooltip="t('wysiwyg_options.hr')"
@@ -484,6 +520,10 @@ import IconMarkPenLine from "./icons/mark-pen-line.vue";
 import IconSubscript from "./icons/subscript.vue";
 import IconSuperscript from "./icons/superscript.vue";
 import IconCodeBoxLine from "./icons/code-box-line.vue";
+import IconAlignLeft from "./icons/align-left.vue";
+import IconAlignCenter from "./icons/align-center.vue";
+import IconAlignRight from "./icons/align-right.vue";
+import IconAlignJustify from "./icons/align-justify.vue";
 
 const { t } = useI18n({ messages });
 
@@ -507,6 +547,33 @@ const emit = defineEmits<{
   (e: "input", value: ValueType): void;
 }>();
 
+const alignOptions = [
+  {
+    align: "left",
+    icon: IconAlignLeft,
+    text: t("wysiwyg_options.alignleft"),
+    shortcut: translateShortcut(["meta", "shift", "l"]),
+  },
+  {
+    align: "center",
+    icon: IconAlignCenter,
+    text: t("wysiwyg_options.aligncenter"),
+    shortcut: translateShortcut(["meta", "shift", "e"]),
+  },
+  {
+    align: "right",
+    icon: IconAlignRight,
+    text: t("wysiwyg_options.alignright"),
+    shortcut: translateShortcut(["meta", "shift", "r"]),
+  },
+  {
+    align: "justify",
+    icon: IconAlignJustify,
+    text: t("wysiwyg_options.alignjustify"),
+    shortcut: translateShortcut(["meta", "shift", "j"]),
+  },
+];
+
 const placeholder = Placeholder.configure({
   placeholder: props.placeholder,
 });