feat: Mardown Shortcut plugin Create a markdown shortcuts plugin #80

demos/playground/src/RichTextComposer.svelte

@@ -38,6 +38,7 @@
     CaptionEditorCollaborationPlugin,
     CaptionEditorHistoryPlugin,
     CAN_USE_DOM,
+    MarkdownShortcutPlugin,
   } from 'svelte-lexical';
   import {prepopulatedRichText} from './prepopulatedRichText';
   import type {SettingsStore} from './settings/setttingsStore';
@@ -125,6 +126,7 @@
       <KeywordPlugin {keywordsRegex} />
       <HashtagPlugin />
       <AutoLinkPlugin />
+      <MarkdownShortcutPlugin />
 
       {#if $settings.isRichText}
         <RichTextPlugin />

packages/svelte-lexical/package.json

@@ -95,10 +95,11 @@
     "@lexical/table": "0.14.2",
     "@lexical/utils": "0.14.2",
     "@lexical/yjs": "0.14.2",
+    "@lexical/markdown": "0.14.2",
     "lexical": "0.14.2",
     "lodash-es": "^4.17.21",
     "prettier": "^3.2.5",
     "y-websocket": "1.5.0",
     "yjs": "13.6.2"
   }
-}
+}

packages/svelte-lexical/src/lib/core/plugins/MardownShortcut/MarkdownShortcutPlugin.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import {onMount} from 'svelte';
+  import {ImageNode, getEditor} from 'svelte-lexical';
+  import {
+    registerMarkdownShortcuts,
+    type ElementTransformer,
+  } from '@lexical/markdown';
+  import {
+    CHECK_LIST,
+    ELEMENT_TRANSFORMERS,
+    TEXT_FORMAT_TRANSFORMERS,
+    TEXT_MATCH_TRANSFORMERS,
+    type TextMatchTransformer,
+    type Transformer,
+  } from '@lexical/markdown';
+  import {
+    $createImageNode as createImageNode,
+    $isImageNode as isImageNode,
+  } from '../Image/ImageNode.js';
+  import {
+    $isHorizontalRuleNode as isHorizontalRuleNode,
+    HorizontalRuleNode,
+    $createHorizontalRuleNode as createHorizontalRuleNode,
+  } from '../HorizontalRuleNode.js';
+  import type {LexicalNode} from 'lexical';
+
+  const editor = getEditor();
+
+  const HR: ElementTransformer = {
+    dependencies: [HorizontalRuleNode],
+    export: (node: LexicalNode) => {
+      return isHorizontalRuleNode(node) ? '***' : null;
+    },
+    regExp: /^(---|\*\*\*|___)\s?$/,
+    replace: (parentNode, _1, _2, isImport) => {
+      const line = createHorizontalRuleNode();
+
+      // TODO: Get rid of isImport flag
+      if (isImport || parentNode.getNextSibling() != null) {
+        parentNode.replace(line);
+      } else {
+        parentNode.insertBefore(line);
+      }
+
+      line.selectNext();
+    },
+    type: 'element',
+  };
+
+  export const IMAGE: TextMatchTransformer = {
+    dependencies: [ImageNode],
+    export: (node) => {
+      if (!isImageNode(node)) {
+        return null;
+      }
+
+      return `![${node.getAltText()}](${node.getSrc()})`;
+    },
+    importRegExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))/,
+    regExp: /!(?:\[([^[]*)\])(?:\(([^(]+)\))$/,
+    replace: (textNode, match) => {
+      const [, altText, src] = match;
+      const imageNode = createImageNode({
+        altText,
+        maxWidth: 800,
+        src,
+      });
+      textNode.replace(imageNode);
+    },
+    trigger: ')',
+    type: 'text-match',
+  };
+
+  const TRANSFORMERS: Array<Transformer> = [
+    HR,
+    IMAGE,
+    CHECK_LIST,
+    ...ELEMENT_TRANSFORMERS,
+    ...TEXT_FORMAT_TRANSFORMERS,
+    ...TEXT_MATCH_TRANSFORMERS,
+  ];
+
+  onMount(() => {
+    registerMarkdownShortcuts(editor, TRANSFORMERS);
+  });
+</script>

packages/svelte-lexical/src/lib/index.ts

@@ -21,6 +21,7 @@ export {sanitizeUrl, validateUrl} from './core/plugins/link/url.js';
 export {default as FloatingLinkEditorPlugin} from './core/plugins/link/FloatingLinkEditorPlugin.svelte';
 export {default as CodeHighlightPlugin} from './core/plugins/CodeBlock/CodeHighlightPlugin.svelte';
 export {default as CodeActionMenuPlugin} from './core/plugins/CodeBlock/CodeActionMenuPlugin/CodeActionMenuPlugin.svelte';
+export {default as MarkdownShortcutPlugin} from './core/plugins/MardownShortcut/MarkdownShortcutPlugin.svelte';
 
 export {HeadingNode, QuoteNode} from '@lexical/rich-text';
 export {ListNode, ListItemNode} from '@lexical/list';
@@ -97,3 +98,5 @@ export {
   clearSelection,
   createNodeSelectionStore,
 } from './core/nodeSelectionStore.js';
+
+export {$getSelection} from 'lexical';