Merge pull request #433 from thematters/develop

Release: v0.2.1-alpha.0
thematters · Jun 29, 2023 · 7dfde1f · 7dfde1f
2 parents aa6949d + 8bdf6ea
commit 7dfde1f
Show file tree

Hide file tree

Showing 5 changed files with 88 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha.0",
   "description": "Editor for matters.news",
   "author": "https://github.com/thematters",
   "homepage": "https://github.com/thematters/matters-editor",

diff --git a/src/editors/extensions/figureAudio.ts b/src/editors/extensions/figureAudio.ts
@@ -44,9 +44,13 @@ declare module '@tiptap/core' {
   }
 }
 
+type FigureAudioOptions = {
+  maxCaptionLength?: number
+}
+
 const pluginName = 'figureAudio'
 
-export const FigureAudio = Node.create({
+export const FigureAudio = Node.create<FigureAudioOptions>({
   name: pluginName,
   group: 'block',
   content: 'text*',
@@ -56,6 +60,12 @@ export const FigureAudio = Node.create({
   // disallows all marks for figcaption
   marks: '',
 
+  addOptions() {
+    return {
+      maxCaptionLength: undefined,
+    }
+  },
+
   addAttributes() {
     return {
       src: {
@@ -213,6 +223,24 @@ export const FigureAudio = Node.create({
             return html
           },
         },
+        filterTransaction: (transaction, state) => {
+          // Nothing has changed, ignore it.
+          if (!transaction.docChanged || !this.options.maxCaptionLength) {
+            return true
+          }
+
+          try {
+            const anchorParent = transaction.selection.$anchor.parent
+            const figcaptionText = anchorParent.content.child(0).text || ''
+            if (figcaptionText.length > this.options.maxCaptionLength) {
+              return false
+            }
+          } catch (e) {
+            console.error(e)
+          }
+
+          return true
+        },
       }),
     ]
   },

diff --git a/src/editors/extensions/figureEmbed.ts b/src/editors/extensions/figureEmbed.ts
@@ -34,6 +34,10 @@ declare module '@tiptap/core' {
   }
 }
 
+type FigureEmbedOptions = {
+  maxCaptionLength?: number
+}
+
 type NormalizeEmbedURLReturn = {
   url: string
   provider?:
@@ -249,7 +253,7 @@ const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
 
 const pluginName = 'figureEmbed'
 
-export const FigureEmbed = Node.create({
+export const FigureEmbed = Node.create<FigureEmbedOptions>({
   name: pluginName,
   group: 'block',
   content: 'text*',
@@ -259,6 +263,12 @@ export const FigureEmbed = Node.create({
   // disallows all marks for figcaption
   marks: '',
 
+  addOptions() {
+    return {
+      maxCaptionLength: undefined,
+    }
+  },
+
   addAttributes() {
     return {
       class: {
@@ -304,8 +314,6 @@ export const FigureEmbed = Node.create({
       ...(isCode ? [`embed-code`] : []),
     ].join(' ')
 
-    console.log({ url })
-
     return [
       'figure',
       { class: className, ...(provider ? { 'data-provider': provider } : {}) },
@@ -419,6 +427,24 @@ export const FigureEmbed = Node.create({
             return html
           },
         },
+        filterTransaction: (transaction, state) => {
+          // Nothing has changed, ignore it.
+          if (!transaction.docChanged || !this.options.maxCaptionLength) {
+            return true
+          }
+
+          try {
+            const anchorParent = transaction.selection.$anchor.parent
+            const figcaptionText = anchorParent.content.child(0).text || ''
+            if (figcaptionText.length > this.options.maxCaptionLength) {
+              return false
+            }
+          } catch (e) {
+            console.error(e)
+          }
+
+          return true
+        },
       }),
     ]
   },

diff --git a/src/editors/extensions/figureImage.ts b/src/editors/extensions/figureImage.ts
@@ -26,9 +26,13 @@ declare module '@tiptap/core' {
   }
 }
 
+type FigureImageOptions = {
+  maxCaptionLength?: number
+}
+
 const pluginName = 'figureImage'
 
-export const FigureImage = Node.create({
+export const FigureImage = Node.create<FigureImageOptions>({
   name: pluginName,
   group: 'block',
   content: 'text*',
@@ -38,6 +42,12 @@ export const FigureImage = Node.create({
   // disallows all marks for figcaption
   marks: '',
 
+  addOptions() {
+    return {
+      maxCaptionLength: undefined,
+    }
+  },
+
   addAttributes() {
     return {
       class: {
@@ -165,6 +175,24 @@ export const FigureImage = Node.create({
             return html
           },
         },
+        filterTransaction: (transaction, state) => {
+          // Nothing has changed, ignore it.
+          if (!transaction.docChanged || !this.options.maxCaptionLength) {
+            return true
+          }
+
+          try {
+            const anchorParent = transaction.selection.$anchor.parent
+            const figcaptionText = anchorParent.content.child(0).text || ''
+            if (figcaptionText.length > this.options.maxCaptionLength) {
+              return false
+            }
+          } catch (e) {
+            console.error(e)
+          }
+
+          return true
+        },
       }),
     ]
   },

diff --git a/src/editors/extensions/readOnlyFigureEmbed.ts b/src/editors/extensions/readOnlyFigureEmbed.ts
@@ -278,7 +278,6 @@ export const ReadOnlyFigureEmbed = Node.create({
       ...(isCode ? [`embed-code`] : []),
     ].join(' ')
 
-    console.log({ url })
 
     return [
       'figure',