feat: handle keydown on figcaption

thematters · May 4, 2023 · 99415f7 · 99415f7
1 parent 60922e4
commit 99415f7
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@matters/matters-editor",
-  "version": "0.2.0-alpha.33",
+  "version": "0.2.0-alpha.34",
   "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
@@ -43,8 +43,10 @@ declare module '@tiptap/core' {
   }
 }
 
+const pluginName = 'figureAudio'
+
 export const FigureAudio = Node.create({
-  name: 'figureAudio',
+  name: pluginName,
   group: 'block',
   content: 'text*',
   draggable: true,
@@ -128,10 +130,9 @@ export const FigureAudio = Node.create({
               },
               {
                 type: 'paragraph',
-                content: [],
               },
             ])
-
+            .focus()
             .run()
         },
     }
@@ -142,6 +143,31 @@ export const FigureAudio = Node.create({
       new Plugin({
         key: new PluginKey('removePastedFigureAudio'),
         props: {
+          handleKeyDown(view, event) {
+            const anchorParent = view.state.selection.$anchor.parent
+            const isFigure = anchorParent.type.name === pluginName
+            const isEmptyFigcaption = anchorParent.content.size <= 0
+
+            // @ts-ignore
+            const editor = view.dom.editor as Editor
+
+            // backSpace to remove if the figcaption is empty
+            if (event.key === 'BackSpace') {
+              if (isEmptyFigcaption && isFigure) {
+                editor.commands.deleteNode(pluginName)
+              }
+            }
+
+            // enter to insert a new paragraph
+            if (event.key === 'Enter') {
+              editor
+                .chain()
+                .selectTextblockEnd()
+                .insertContent({ type: 'paragraph' })
+                .run()
+            }
+          },
+
           transformPastedHTML(html) {
             // remove
             html = html.replace(

diff --git a/src/editors/extensions/figureEmbed.ts b/src/editors/extensions/figureEmbed.ts
@@ -237,8 +237,10 @@ export const normalizeEmbedURL = (url: string): NormalizeEmbedURLReturn => {
   return fallbackReturn
 }
 
+const pluginName = 'figureEmbed'
+
 export const FigureEmbed = Node.create({
-  name: 'figureEmbed',
+  name: pluginName,
   group: 'block',
   content: 'text*',
   draggable: true,
@@ -312,9 +314,9 @@ export const FigureEmbed = Node.create({
               },
               {
                 type: 'paragraph',
-                content: [],
               },
             ])
+            .focus()
             .run()
         },
     }
@@ -325,6 +327,31 @@ export const FigureEmbed = Node.create({
       new Plugin({
         key: new PluginKey('removePastedFigureEmbed'),
         props: {
+          handleKeyDown(view, event) {
+            const anchorParent = view.state.selection.$anchor.parent
+            const isFigure = anchorParent.type.name === pluginName
+            const isEmptyFigcaption = anchorParent.content.size <= 0
+
+            // @ts-ignore
+            const editor = view.dom.editor as Editor
+
+            // backSpace to remove if the figcaption is empty
+            if (event.key === 'BackSpace') {
+              if (isEmptyFigcaption && isFigure) {
+                editor.commands.deleteNode(pluginName)
+              }
+            }
+
+            // enter to insert a new paragraph
+            if (event.key === 'Enter') {
+              editor
+                .chain()
+                .selectTextblockEnd()
+                .insertContent({ type: 'paragraph' })
+                .run()
+            }
+          },
+
           transformPastedHTML(html) {
             // remove
             html = html.replace(

diff --git a/src/editors/extensions/figureImage.ts b/src/editors/extensions/figureImage.ts
@@ -22,6 +22,8 @@ declare module '@tiptap/core' {
   }
 }
 
+const pluginName = 'figureImage'
+
 export const FigureImage = Node.create({
   name: 'figureImage',
   group: 'block',
@@ -82,9 +84,9 @@ export const FigureImage = Node.create({
               },
               {
                 type: 'paragraph',
-                content: [],
               },
             ])
+            .focus()
             .run()
         },
     }
@@ -95,6 +97,31 @@ export const FigureImage = Node.create({
       new Plugin({
         key: new PluginKey('removePastedFigureImage'),
         props: {
+          handleKeyDown(view, event) {
+            const anchorParent = view.state.selection.$anchor.parent
+            const isFigure = anchorParent.type.name === pluginName
+            const isEmptyFigcaption = anchorParent.content.size <= 0
+
+            // @ts-ignore
+            const editor = view.dom.editor as Editor
+
+            // backSpace to remove if the figcaption is empty
+            if (event.key === 'BackSpace') {
+              if (isEmptyFigcaption && isFigure) {
+                editor.commands.deleteNode(pluginName)
+              }
+            }
+
+            // enter to insert a new paragraph
+            if (event.key === 'Enter') {
+              editor
+                .chain()
+                .selectTextblockEnd()
+                .insertContent({ type: 'paragraph' })
+                .run()
+            }
+          },
+
           transformPastedHTML(html) {
             // remove
             html = html.replace(