handle backspace in footnote

docs/dev/code/BLOCK_ADDITION_PROPERTY.md

@@ -6,6 +6,8 @@
 
   - languageInput
 
+  - footnoteInput
+
   - codeContent (used in code block)
 
   - cellContent (used in table cell, it's parent must be th or td block)
@@ -46,6 +48,8 @@ The container block of `table`, `html`, `block math`, `mermaid`,`flowchart`,`veg
 
   - table
 
+  - footnote
+
   - html
 
   - multiplemath

src/muya/lib/assets/styles/index.css

@@ -183,12 +183,12 @@ figure[data-role="HTML"].ag-active .ag-html-preview {
 figure[data-role="FOOTNOTE"] {
   position: relative;
   background: var(--footnoteBgColor);
-  padding: 1em 1em .05em 1em;
+  padding: 1em 2em .05em 1em;
   font-size: .8em;
   opacity: .8;
 }
 
-figure[data-role="FOOTNOTE"] .ag-paragraph-content:first-of-type:empty::after {
+figure[data-role="FOOTNOTE"] > p:first-of-type .ag-paragraph-content:empty::after {
   content: 'Input the footnote definition...';
   color: var(--editorColor30);
 }
@@ -1176,8 +1176,8 @@ i.ag-footnote-backlink {
   line-height: 20px;
   display: block;
   position: absolute;
-  right: 1em;
-  bottom: .15em;
+  right: .5em;
+  bottom: .5em;
   font-family: sans-serif;
   cursor: pointer;
   z-index: 100;

src/muya/lib/contentState/backspaceCtrl.js

@@ -345,6 +345,29 @@ const backspaceCtrl = ContentState => {
     }
 
     if (
+      block.type === 'span' &&
+      block.functionType === 'paragraphContent' &&
+      left === 0 &&
+      preBlock &&
+      preBlock.functionType === 'footnoteInput'
+    ) {
+      event.preventDefault()
+      event.stopPropagation()
+      if (!parent.nextSibling) {
+        const pBlock = this.createBlockP(block.text)
+        const figureBlock = this.closest(block, 'figure')
+        this.insertBefore(pBlock, figureBlock)
+        this.removeBlock(figureBlock)
+        const key = pBlock.children[0].key
+        const offset = 0
+        this.cursor = {
+          start: { key, offset },
+          end: { key, offset }
+        }
+
+        this.partialRender()
+      }
+    } else if (
       block.type === 'span' &&
       block.functionType === 'codeContent' &&
       left === 0 &&
@@ -492,7 +515,7 @@ const backspaceCtrl = ContentState => {
       // also need to remove the paragrah
       if (this.isOnlyChild(block) && block.type === 'span') {
         this.removeBlock(parent)
-      } else if (block.functionType !== 'languageInput') {
+      } else if (block.functionType !== 'languageInput' && block.functionType !== 'footnoteInput') {
         this.removeBlock(block)
       }