Feature/articles: transform valid markdown to nodes

.eslintrc.json

@@ -1,3 +1,12 @@
 {
-  "extends": "next/core-web-vitals"
+  "plugins": [
+    "prettier"
+  ],
+  "extends": [
+    "prettier",
+    "next/core-web-vitals"
+  ],
+  "rules": {
+    "prettier/prettier": "error"
+  }
 }

.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": false
+}

package.json

@@ -6,7 +6,8 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
   },
   "dependencies": {
     "@apollo/client": "^3.4.16",
@@ -86,6 +87,10 @@
     "@types/react-router-dom": "^5.3.1",
     "eslint": "8.0.0",
     "eslint-config-next": "11.1.2",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.31.8",
+    "prettier": "2.6.2",
     "typescript": "4.4.3"
   }
 }

src/components/NFTArticle/SlateEditor/Plugins/AutoFormatPlugin/BlockTypeChange.ts

@@ -1,30 +1,50 @@
 import { Editor, Transforms } from 'slate';
 import { AutoFormatChangeType, ChangeData, AutoFormatChange } from './index';
 import { getRangeFromBlockStartToCursor, getTextFromBlockStartToCursor } from '../../utils';
+import { BlockDefinitions, EArticleBlocks } from '../../Blocks';
+import { escapeRegExp } from "../../../../../utils/regex";
 
 export class BlockTypeChange implements AutoFormatChange {
   shortcut: string | string[]
   type: AutoFormatChangeType
   data: ChangeData
+  trigger:string
   constructor(shortcut:string | string[], data: ChangeData) {
     this.shortcut = shortcut
     this.data = data
     this.type = 'BlockTypeChange'
+    this.trigger = ' ';
   }
 
-  apply = (editor: Editor): boolean => {
-    const textBeforeCursor = `${getTextFromBlockStartToCursor(editor)} `;
+  apply = (editor: Editor, text: string): boolean => {
+    const isTrigger = text === this.trigger;
+    const textBeforeCursor = isTrigger ? getTextFromBlockStartToCursor(editor) : text;
     const testValues = typeof this.shortcut === 'string' ? [this.shortcut] : this.shortcut;
-    const shortcutMatch = testValues.find((shortcut) => textBeforeCursor.startsWith(`${shortcut} `))
-    if (!shortcutMatch) return false;
-
-    Transforms.delete(editor, {
-      at: getRangeFromBlockStartToCursor(editor),
-    })
-    Transforms.setNodes(
-      editor,
-      { ...this.data },
-    )
-    return true;
+    const shortcutMatch = testValues.find((shortcut) => `${textBeforeCursor} `.startsWith(`${shortcut} `))
+    if (isTrigger && shortcutMatch) {
+      Transforms.delete(editor, {
+	at: getRangeFromBlockStartToCursor(editor),
+      })
+      Transforms.setNodes(
+	editor,
+	{ ...this.data },
+      )
+      return true;
+    } else {
+      const matchShortcutWithText = new RegExp(`^(${testValues.map(testValue => escapeRegExp(testValue)).join('|')})\\s(?<text>.*)`, 'gm');
+      const matches = matchShortcutWithText.exec(textBeforeCursor);
+      if (!matches) return false;
+      const { type } = this.data;
+      const matchedText = matches.groups?.text;
+      if (!matchedText) return false;
+      const blockDefinition = BlockDefinitions[type as EArticleBlocks];
+      const element = blockDefinition?.instanciateElement?.({...this.data, text: matchedText})
+      if(!element) return false; 
+      Transforms.insertNodes(
+	editor,
+	element, 
+      )
+      return true;
+    }
   }
 }

src/components/NFTArticle/SlateEditor/Plugins/AutoFormatPlugin/CustomDirectiveChange.ts

@@ -1,7 +1,7 @@
 import { Range, Point,  Node,  Editor, Transforms, Ancestor, NodeEntry } from 'slate';
 import { AutoFormatChangeType, ChangeData, AutoFormatChange } from './index';
-import { customNodes } from '../../../processor/plugins';
 import { getTextFromBlockStartToCursor } from '../../utils';
+import { getSlateEditorStateFromMarkdownSync } from '../../../processor/getSlateEditorStateFromMarkdown';
 
 function parseAttributes(attributes:string|undefined): {[key: string]: any} {
   const classNames = []
@@ -35,54 +35,56 @@ function parseAttributes(attributes:string|undefined): {[key: string]: any} {
   return parsed
 }
 
-
-
 export class CustomDirectiveChange implements AutoFormatChange {
   shortcut: string
   type: AutoFormatChangeType
   data?: ChangeData
+  trigger: string
 
   constructor(shortcut:string, data?: ChangeData) {
     this.shortcut = shortcut
     if (data) this.data = data
     this.type = 'CustomDirectiveChange'
+    this.trigger = ' '
   }
 
-  apply(editor: Editor): boolean {
+  getMarkdownFromCurrentCursorPosition(editor: Editor):string|null {
     const textBeforeCursor = getTextFromBlockStartToCursor(editor);
-    const matchDirective = new RegExp('(:*s*(?<type>[^\\s]*)\\s*\\[(?<text>.*)]\\s*{(?<attributes>.*)})', 'mg')
+    const matchDirective = new RegExp('(:+(?<type>.*)\\[(?<text>.*)]{(?<attributes>.*)})\\s*$', 'mg')
     const matches = matchDirective.exec(textBeforeCursor);
-    if (!matches) return false;
-    const type = matches.groups?.['type']
-    const text = matches.groups?.['text']
-    const attributes = matches.groups?.['attributes']
-    if (!type) return false;
-    const parsedAttributes = parseAttributes(attributes)
-    const nodeAttributes = {
-      value: text,
-      type,
-      ...parsedAttributes.attributes
-    }
-    const props = customNodes.leafDirective[type]?.transformMdhastToComponent?.(null as any, nodeAttributes) || nodeAttributes;
-    const [start] = Range.edges(editor.selection as Range);
-    const charBefore = Editor.before(editor, start, {
-      unit: 'character',
-      distance: matches[0].length,
-    }) as Point;
-    Transforms.delete(editor, {
-      at: {
-	anchor: charBefore,
-	focus: start
-      }
-    })
-    Transforms.insertNodes(
-      editor,
-      {
-	...props,
-	type:props.type,
-	children: [{text: props.value}],
+    if (!matches) return null; 
+    return matches[0];
+  }
+
+  apply(editor: Editor, text:string): boolean {
+    const isTrigger = text === this.trigger;
+    const markdownString = isTrigger ? this.getMarkdownFromCurrentCursorPosition(editor) : text;
+    if (!markdownString) return false;
+    try {
+      const parsed = getSlateEditorStateFromMarkdownSync(markdownString)
+      if(!parsed) return false;
+      const {editorState: [parsedNode]} = parsed;
+      if (parsedNode.type !== this.shortcut) return false;
+      const [start] = Range.edges(editor.selection as Range);
+      const charBefore = Editor.before(editor, start, {
+	unit: 'character',
+	distance: markdownString.length,
+      }) as Point;
+      if (isTrigger) {
+	Transforms.delete(editor, {
+	  at: {
+	    anchor: charBefore,
+	    focus: start
+	  }
+	})
       }
-    )
-    return true;
+      Transforms.insertNodes(
+	editor,
+	parsedNode
+      )
+      return true
+    } catch {
+      return false;
+    }
   }
 }