feat: add update to footnote

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

@@ -180,6 +180,56 @@ figure[data-role="HTML"].ag-active .ag-html-preview {
   display: none;
 }
 
+figure[data-role="FOOTNOTE"] {
+  position: relative;
+  background: var(--footnoteBgColor);
+  padding: .5em 1em;
+  font-size: .8em;
+  opacity: .8;
+  border-radius: 3px;
+}
+
+figure[data-role="FOOTNOTE"].ag-active::before {
+  content: attr(data-role);
+  text-transform: lowercase;
+  position: absolute;
+  top: 15px;
+  right: 10px;
+  color: var(--editorColor30);
+  font-size: 12px;
+}
+
+figure[data-role="FOOTNOTE"] pre {
+  font-size: .8em;
+}
+
+figure[data-role="FOOTNOTE"] .ag-footnote-input {
+  padding: 0 1em;
+  min-width: 80px;
+  position: absolute;
+  top: -23px;
+  left: 0;
+  font-size: 14px;
+  font-family: monospace;
+  font-weight: 600;
+  color: var(--editorColor);
+  background: transparent;
+  z-index: 1;
+  display: none;
+}
+
+figure[data-role="FOOTNOTE"].ag-active .ag-footnote-input {
+  display: inline-block;
+}
+
+figure[data-role="FOOTNOTE"] .ag-footnote-input::before {
+  content: '[^';
+}
+
+figure[data-role="FOOTNOTE"] .ag-footnote-input::after {
+  content: ']:';
+}
+
 .ag-highlight {
   animation-name: highlight;
   animation-duration: .25s;

src/muya/lib/contentState/footnoteCtrl.js

@@ -0,0 +1,43 @@
+/* eslint-disable no-useless-escape */
+const FOOTNOTE_REG = /^\[\^([^\^\[\]\s]+?)(?<!\\)\]: /
+/* eslint-enable no-useless-escape */
+const footnoteCtrl = ContentState => {
+  ContentState.prototype.updateFootnote = function (block, line) {
+    const { start, end } = this.cursor
+    const { text } = line
+    const match = FOOTNOTE_REG.exec(text)
+    const footnoteIdentifer = match[1]
+    const sectionWrapper = this.createBlock('figure', {
+      functionType: 'footnote'
+    })
+    const footnoteInput = this.createBlock('span', {
+      text: footnoteIdentifer,
+      functionType: 'footnoteInput'
+    })
+    const pBlock = this.createBlockP(text.substring(match[0].length))
+    this.appendChild(sectionWrapper, footnoteInput)
+    this.appendChild(sectionWrapper, pBlock)
+    this.insertBefore(sectionWrapper, block)
+    this.removeBlock(block)
+
+    const { key } = pBlock.children[0]
+    this.cursor = {
+      start: {
+        key,
+        offset: Math.max(0, start.offset - footnoteIdentifer.length)
+      },
+      end: {
+        key,
+        offset: Math.max(0, end.offset - footnoteIdentifer.length)
+      }
+    }
+
+    if (this.isCollapse()) {
+      this.checkInlineUpdate(pBlock.children[0])
+    }
+
+    return this.partialRender()
+  }
+}
+
+export default footnoteCtrl

src/muya/lib/contentState/index.js

@@ -28,6 +28,7 @@ import emojiCtrl from './emojiCtrl'
 import imageCtrl from './imageCtrl'
 import linkCtrl from './linkCtrl'
 import dragDropCtrl from './dragDropCtrl'
+import footnoteCtrl from './footnoteCtrl'
 import importMarkdown from '../utils/importMarkdown'
 import Cursor from '../selection/cursor'
 import escapeCharactersMap, { escapeCharacters } from '../parser/escapeCharacter'
@@ -58,6 +59,7 @@ const prototypes = [
   imageCtrl,
   linkCtrl,
   dragDropCtrl,
+  footnoteCtrl,
   importMarkdown
 ]
 

src/muya/lib/contentState/updateCtrl.js

@@ -10,6 +10,7 @@ const INLINE_UPDATE_FRAGMENTS = [
   '^(?:[\\s\\S]+?)\\n {0,3}(\\={3,}|\\-{3,})(?= {1,}|$)', // Setext headings **match from beginning**
   '(?:^|\n) {0,3}(>).+', // Block quote
   '^( {4,})', // Indent code **match from beginning**
+  '^(\\[\\^[^\\^\\[\\]\\s]+?(?<!\\\\)\\]: )', // Footnote **match from beginning**
   '(?:^|\n) {0,3}((?:\\* *\\* *\\*|- *- *-|_ *_ *_)[ \\*\\-\\_]*)$' // Thematic break
 ]
 
@@ -76,7 +77,7 @@ const updateCtrl = ContentState => {
     if (/figure/.test(block.type)) {
       return false
     }
-    if (/cellContent|codeContent|languageInput/.test(block.functionType)) {
+    if (/cellContent|codeContent|languageInput|footnoteInput/.test(block.functionType)) {
       return false
     }
 
@@ -89,8 +90,9 @@ const updateCtrl = ContentState => {
     const listItem = this.getParent(block)
     const [
       match, bullet, tasklist, order, atxHeader,
-      setextHeader, blockquote, indentCode, hr
+      setextHeader, blockquote, indentCode, footnote, hr
     ] = text.match(INLINE_UPDATE_REG) || []
+    const { footnote: isSupportFootnote } = this.muya.options
 
     switch (true) {
       case (!!hr && new Set(hr.split('').filter(i => /\S/.test(i))).size === 1):
@@ -118,6 +120,9 @@ const updateCtrl = ContentState => {
       case !!indentCode:
         return this.updateIndentCode(block, line)
 
+      case !!footnote && block.type === 'p' && !block.parent && isSupportFootnote:
+        return this.updateFootnote(block, line)
+
       case !match:
       default:
         return this.updateToParagraph(block, line)

src/muya/lib/parser/render/renderBlock/renderIcon.js

@@ -21,6 +21,7 @@ import flowchartIcon from '../../../assets/pngicon/flowchart/2.png'
 import sequenceIcon from '../../../assets/pngicon/sequence/2.png'
 import mermaidIcon from '../../../assets/pngicon/mermaid/2.png'
 import vegaIcon from '../../../assets/pngicon/chart/2.png'
+import footnoteIcon from '../../../assets/pngicon/footnote/2.png'
 
 const FUNCTION_TYPE_HASH = {
   mermaid: mermaidIcon,
@@ -32,7 +33,8 @@ const FUNCTION_TYPE_HASH = {
   multiplemath: mathblockIcon,
   fencecode: codeIcon,
   indentcode: codeIcon,
-  frontmatter: frontMatterIcon
+  frontmatter: frontMatterIcon,
+  footnote: footnoteIcon
 }
 
 export default function renderIcon (block) {

src/muya/lib/parser/rules.js

@@ -42,6 +42,6 @@ export const inlineExtensionRules = {
   // This is not the best regexp, because it not support `2^2\\^`.
   superscript: /^(\^)((?:[^\^\s]|(?<=\\)\1|(?<=\\) )+?)(?<!\\)\1(?!\1)/,
   subscript: /^(~)((?:[^~\s]|(?<=\\)\1|(?<=\\) )+?)(?<!\\)\1(?!\1)/,
-  footnote_identifier: /^(\[\^)([^\^\[\]\s])+?(?<!\\)\]/
+  footnote_identifier: /^(\[\^)([^\^\[\]\s]+?)(?<!\\)\]/
 }
 /* eslint-enable no-useless-escape */

src/renderer/assets/styles/index.css

@@ -32,6 +32,7 @@
   --iconColor: #6B737B;
   --codeBgColor: #d8d8d869;
   --codeBlockBgColor: rgba(0, 0, 0, 0.03);
+  --footnoteBgColor: rgba(0, 0, 0, .03);
   --inputBgColor: rgba(0, 0, 0, .06);
   --focusColor: var(--themeColor);
 

src/renderer/assets/themes/dark.theme.css

@@ -26,6 +26,7 @@
   --iconColor: rgba(255, 255, 255, .56);
   --codeBgColor: #424344;
   --codeBlockBgColor: #424344;
+  --footnoteBgColor: rgba(66, 67, 68, .3);
   --inputBgColor: #2f3336;
 
   --focusColor: var(--themeColor);

src/renderer/assets/themes/graphite.theme.css

@@ -25,6 +25,7 @@
   --iconColor: rgba(150, 150, 150, .8);
   --codeBgColor: #d8d8d869;
   --codeBlockBgColor: rgba(104, 134, 170, .05);
+  --footnoteBgColor: rgba(0, 0, 0, .03);
   --inputBgColor: rgba(0, 0, 0, .06);
   --focusColor: var(--themeColor);
 

src/renderer/assets/themes/material-dark.theme.css

@@ -26,6 +26,7 @@
   --iconColor: rgba(255, 255, 255, .56);
   --codeBgColor: #d8d8d869;
   --codeBlockBgColor: #3f454c;
+  --footnoteBgColor: rgba(66, 67, 68, .5);
   --inputBgColor: rgba(0, 0, 0, .1);
   --focusColor: var(--themeColor);
 

src/renderer/assets/themes/one-dark.theme.css

@@ -27,6 +27,7 @@
   --iconColor: rgba(255, 255, 255, .56);
   --codeBgColor: #3a3f4b;
   --codeBlockBgColor: #3a3f4b;
+  --footnoteBgColor: rgba(66, 67, 68, .5);
   --inputBgColor: rgba(0, 0, 0, .1);
   --focusColor: #568af2;
 

src/renderer/assets/themes/ulysses.theme.css

@@ -25,6 +25,7 @@
   --iconColor: rgba(101, 101, 101, .8);
   --codeBgColor: #d8d8d869;
   --codeBlockBgColor: rgba(12, 139, 186, .05);
+  --footnoteBgColor: rgba(0, 0, 0, .03);
   --inputBgColor: rgba(0, 0, 0, .06);
   --focusColor: var(--themeColor);