feat: add figure and figcaption extensions

aieditor-team · Jun 7, 2024 · 7939053 · 7939053
1 parent 83fbb1b
commit 7939053
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 4 deletions.
diff --git a/src/core/getExtensions.ts b/src/core/getExtensions.ts
@@ -36,6 +36,8 @@ import {Markdown} from "tiptap-markdown";
 import {ContainerExt} from "../extensions/ContainerExt.ts";
 import {HeadingExt} from "../extensions/HeadingExt.ts";
 import {SaveExt} from "../extensions/SaveExt.ts";
+import {FigureExt} from "../extensions/FigureExt.ts";
+import {FigcaptionExt} from "../extensions/FigcaptionExt.ts";
 
 export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Extensions => {
     // the Collaboration extension comes with its own history handling
@@ -55,7 +57,7 @@ export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Exten
             AttachmentExt.configure({
                 uploadUrl: options.attachment?.uploadUrl,
                 uploadHeaders: options.attachment?.uploadHeaders,
-                uploadFormName:options.attachment?.uploadFormName,
+                uploadFormName: options.attachment?.uploadFormName,
                 uploader: options.attachment?.uploader || options.uploader,
                 uploaderEvent: options.attachment?.uploaderEvent,
             }),
@@ -74,7 +76,7 @@ export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Exten
                 defaultSize: options.image?.defaultSize || 350,
                 uploadUrl: options.image?.uploadUrl,
                 uploadHeaders: options.image?.uploadHeaders,
-                uploadFormName:options.image?.uploadFormName,
+                uploadFormName: options.image?.uploadFormName,
                 uploader: options.image?.uploader || options.uploader,
                 uploaderEvent: options.image?.uploaderEvent,
             }),
@@ -101,7 +103,6 @@ export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Exten
             TaskItem.configure({
                 nested: true,
             }),
-
             CodeBlockExt.configure({
                 lowlight: createLowlight(common),
                 defaultLanguage: 'auto',
@@ -118,11 +119,13 @@ export const getExtensions = (editor: AiEditor, options: AiEditorOptions): Exten
             VideoExt.configure({
                 uploadUrl: options.video?.uploadUrl,
                 uploadHeaders: options.video?.uploadHeaders,
-                uploadFormName:options.video?.uploadFormName,
+                uploadFormName: options.video?.uploadFormName,
                 uploader: options.video?.uploader || options.uploader,
                 uploaderEvent: options.video?.uploaderEvent,
             }),
             IFrameExt,
+            FigureExt,
+            FigcaptionExt,
             SaveExt.configure({
                 onSave: options.onSave,
             }),

diff --git a/src/extensions/FigcaptionExt.ts b/src/extensions/FigcaptionExt.ts
@@ -0,0 +1,24 @@
+import {Node, mergeAttributes} from '@tiptap/core';
+
+export const FigcaptionExt = Node.create({
+    name: 'figcaption',
+    content: 'inline*',
+    group: 'block',
+    defining: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                dir: 'auto',
+            },
+        };
+    },
+
+    parseHTML() {
+        return [{tag: 'figcaption'}];
+    },
+
+    renderHTML({HTMLAttributes}) {
+        return ['figcaption', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+});
diff --git a/src/extensions/FigureExt.ts b/src/extensions/FigureExt.ts
@@ -0,0 +1,26 @@
+import {Node, mergeAttributes} from '@tiptap/core';
+
+export const FigureExt = Node.create({
+    name: 'figure',
+    content: 'block+',
+    group: 'block',
+    defining: true,
+    draggable: true,
+    selectable: true,
+
+    addOptions() {
+        return {
+            HTMLAttributes: {
+                dir: 'auto',
+            },
+        };
+    },
+
+    parseHTML() {
+        return [{tag: 'figure'}];
+    },
+
+    renderHTML({HTMLAttributes}) {
+        return ['figure', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0];
+    },
+});