@uiw/react-md-editor 3.19.5 → 3.19.6

package/esm/commands/preview.js

@@ -23,6 +23,7 @@ export var codePreview = {
     })]
   }),
   execute: (state, api, dispatch, executeCommandState, shortcuts) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'preview'
@@ -52,6 +53,7 @@ export var codeEdit = {
     })]
   }),
   execute: (state, api, dispatch, executeCommandState, shortcuts) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'edit'
@@ -81,6 +83,7 @@ export var codeLive = {
     })]
   }),
   execute: (state, api, dispatch, executeCommandState, shortcuts) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'live'

package/esm/commands/preview.js.map

@@ -15,6 +15,8 @@
     "api",
     "dispatch",
     "executeCommandState",
+    "textArea",
+    "focus",
     "preview",
     "codeEdit",
     "codeLive"
@@ -23,7 +25,7 @@
     "../../src/commands/preview.tsx"
   ],
   "sourcesContent": [
-    "import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport const codePreview: ICommand = {\n  name: 'preview',\n  keyCommand: 'preview',\n  value: 'preview',\n  shortcuts: 'ctrlcmd+9',\n  buttonProps: { 'aria-label': 'Preview code (ctrl + 9)', title: 'Preview code (ctrl + 9)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon\n        fill=\"currentColor\"\n        points=\"0 71.293 0 122 38.023 123 38.023 398 0 397 0 449.707 91.023 450.413 91.023 72.293\"\n      />\n      <polygon\n        fill=\"currentColor\"\n        points=\"148.023 72.293 520 71.293 520 122 200.023 124 200.023 397 520 396 520 449.707 148.023 450.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'preview' });\n    }\n  },\n};\n\nexport const codeEdit: ICommand = {\n  name: 'edit',\n  keyCommand: 'preview',\n  value: 'edit',\n  shortcuts: 'ctrlcmd+7',\n  buttonProps: { 'aria-label': 'Edit code (ctrl + 7)', title: 'Edit code (ctrl + 7)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"429 71.293 520 71.293 520 122 481 123 481 396 520 396 520 449.707 429 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'edit' });\n    }\n  },\n};\n\nexport const codeLive: ICommand = {\n  name: 'live',\n  keyCommand: 'preview',\n  value: 'live',\n  shortcuts: 'ctrlcmd+8',\n  buttonProps: { 'aria-label': 'Live code (ctrl + 8)', title: 'Live code (ctrl + 8)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"289 71.293 520 71.293 520 122 341 123 341 396 520 396 520 449.707 289 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'live' });\n    }\n  },\n};\n"
+    "import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport const codePreview: ICommand = {\n  name: 'preview',\n  keyCommand: 'preview',\n  value: 'preview',\n  shortcuts: 'ctrlcmd+9',\n  buttonProps: { 'aria-label': 'Preview code (ctrl + 9)', title: 'Preview code (ctrl + 9)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon\n        fill=\"currentColor\"\n        points=\"0 71.293 0 122 38.023 123 38.023 398 0 397 0 449.707 91.023 450.413 91.023 72.293\"\n      />\n      <polygon\n        fill=\"currentColor\"\n        points=\"148.023 72.293 520 71.293 520 122 200.023 124 200.023 397 520 396 520 449.707 148.023 450.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'preview' });\n    }\n  },\n};\n\nexport const codeEdit: ICommand = {\n  name: 'edit',\n  keyCommand: 'preview',\n  value: 'edit',\n  shortcuts: 'ctrlcmd+7',\n  buttonProps: { 'aria-label': 'Edit code (ctrl + 7)', title: 'Edit code (ctrl + 7)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"429 71.293 520 71.293 520 122 481 123 481 396 520 396 520 449.707 429 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'edit' });\n    }\n  },\n};\n\nexport const codeLive: ICommand = {\n  name: 'live',\n  keyCommand: 'preview',\n  value: 'live',\n  shortcuts: 'ctrlcmd+8',\n  buttonProps: { 'aria-label': 'Live code (ctrl + 8)', title: 'Live code (ctrl + 8)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"289 71.293 520 71.293 520 122 341 123 341 396 520 396 520 449.707 289 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'live' });\n    }\n  },\n};\n"
   ],
-  "mappings": "AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAAC;AAAA;AAI/B,OAAO,IAAMC,WAAqB,GAAG;EACnCC,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,yBAAyB;IAAEC,KAAK,EAAE;EAA0B,CAAC;EAC1FC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAAmF,EAC1F,eACF;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+F,EACtG;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAU,CAAC,CAAC;IAClC;EACF;AACF,CAAC;AAED,OAAO,IAAMC,QAAkB,GAAG;EAChCb,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAED,OAAO,IAAME,QAAkB,GAAG;EAChCd,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC"
+  "mappings": "AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAAC;AAAA;AAI/B,OAAO,IAAMC,WAAqB,GAAG;EACnCC,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,yBAAyB;IAAEC,KAAK,EAAE;EAA0B,CAAC;EAC1FC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAAmF,EAC1F,eACF;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+F,EACtG;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAU,CAAC,CAAC;IAClC;EACF;AACF,CAAC;AAED,OAAO,IAAMC,QAAkB,GAAG;EAChCf,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAED,OAAO,IAAME,QAAkB,GAAG;EAChChB,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,CACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,KACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC"
 }

package/esm/components/TextArea/Markdown.js

@@ -1,10 +1,12 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
+var _templateObject;
+import React, { useContext, useEffect } from 'react';
 import { rehype } from 'rehype';
 import rehypePrism from 'rehype-prism-plus';
 import { EditorContext } from '../../Context';
 import { jsx as _jsx } from "react/jsx-runtime";
 function html2Escape(sHtml) {
-  return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, str => {
+  return sHtml.replace(/```(\w+)?([\s\S]*?)(\s.+)?```/g, str => {
     return str.replace(/[<&"]/g, c => ({
       '<': '&lt;',
       '>': '&gt;',
@@ -36,29 +38,28 @@ export default function Markdown(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return useMemo(() => {
-    if (!markdown) {
-      return /*#__PURE__*/_jsx("pre", {
-        ref: preRef,
-        className: prefixCls + "-text-pre wmde-markdown-color"
-      });
-    }
-    var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(markdown) + "\n</code></pre>";
-    if (highlightEnable) {
-      try {
-        mdStr = rehype().data('settings', {
-          fragment: true
-        }).use(rehypePrism, {
-          ignoreMissing: true
-        }).processSync(mdStr).toString();
-      } catch (error) {}
-    }
-    return /*#__PURE__*/React.createElement('div', {
-      className: 'wmde-markdown-color',
-      dangerouslySetInnerHTML: {
-        __html: mdStr || ''
-      }
+  if (!markdown) {
+    return /*#__PURE__*/_jsx("pre", {
+      ref: preRef,
+      className: prefixCls + "-text-pre wmde-markdown-color"
     });
-  }, [markdown, preRef, prefixCls]);
+  }
+  var mdStr = "<pre class=\"language-markdown " + prefixCls + "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">" + html2Escape(String.raw(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["", ""])), markdown)) + "\n</code></pre>";
+  console.log('markdown::', markdown);
+  if (highlightEnable) {
+    try {
+      mdStr = rehype().data('settings', {
+        fragment: true
+      }).use(rehypePrism, {
+        ignoreMissing: true
+      }).processSync(mdStr).toString();
+    } catch (error) {}
+  }
+  return /*#__PURE__*/React.createElement('div', {
+    className: 'wmde-markdown-color',
+    dangerouslySetInnerHTML: {
+      __html: mdStr || ''
+    }
+  });
 }
 //# sourceMappingURL=Markdown.js.map

package/esm/components/TextArea/Markdown.js.map

@@ -4,7 +4,6 @@
     "React",
     "useContext",
     "useEffect",
-    "useMemo",
     "rehype",
     "rehypePrism",
     "EditorContext",
@@ -24,6 +23,10 @@
     "current",
     "textareaPre",
     "mdStr",
+    "String",
+    "raw",
+    "console",
+    "log",
     "data",
     "fragment",
     "use",
@@ -40,7 +43,7 @@
     "../../../src/components/TextArea/Markdown.tsx"
   ],
   "sourcesContent": [
-    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n  return sHtml\n    .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n      return str.replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n    })\n    .replace(\n      /[<&\"]/g,\n      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n    );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => {\n    if (!markdown) {\n      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n    }\n    let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n      markdown,\n    )}\\n</code></pre>`;\n\n    if (highlightEnable) {\n      try {\n        mdStr = rehype()\n          .data('settings', { fragment: true })\n          .use(rehypePrism, { ignoreMissing: true })\n          .processSync(mdStr)\n          .toString();\n      } catch (error) {}\n    }\n\n    return React.createElement('div', {\n      className: 'wmde-markdown-color',\n      dangerouslySetInnerHTML: { __html: mdStr || '' },\n    });\n  }, [markdown, preRef, prefixCls]);\n}\n"
+    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n  return sHtml\n    .replace(/```(\\w+)?([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n      return str.replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n    })\n    .replace(\n      /[<&\"]/g,\n      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n    );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  if (!markdown) {\n    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n  }\n  let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n    String.raw`${markdown}`,\n  )}\\n</code></pre>`;\n\n  console.log('markdown::', markdown);\n\n  if (highlightEnable) {\n    try {\n      mdStr = rehype()\n        .data('settings', { fragment: true })\n        .use(rehypePrism, { ignoreMissing: true })\n        .processSync(mdStr)\n        .toString();\n    } catch (error) {}\n  }\n\n  return React.createElement('div', {\n    className: 'wmde-markdown-color',\n    dangerouslySetInnerHTML: { __html: mdStr || '' },\n  });\n}\n"
   ],
-  "mappings": "AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,EAAEC,OAAO,QAAQ,OAAO;AAC7D,SAASC,MAAM,QAAQ,QAAQ;AAC/B,OAAOC,WAAW,MAAM,mBAAmB;AAE3C,SAASC,aAAa,QAAQ,eAAe;AAAC;AAE9C,SAASC,WAAW,CAACC,KAAa,EAAE;EAClC,OAAOA,KAAK,CACTC,OAAO,CAAC,qDAAqD,EAAGC,GAAW,IAAK;IAC/E,OAAOA,GAAG,CAACD,OAAO,CAChB,QAAQ,EACPE,CAAS,IAAM,CAAC;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,OAAO;MAAE,GAAG,EAAE;IAAS,CAAC,EAA4BA,CAAC,CAAE,CAC1G;EACH,CAAC,CAAC,CACDF,OAAO,CACN,QAAQ,EACPE,CAAS,IAAM,CAAC;IAAE,GAAG,EAAE,MAAM;IAAE,GAAG,EAAE,MAAM;IAAE,GAAG,EAAE,OAAO;IAAE,GAAG,EAAE;EAAS,CAAC,EAA4BA,CAAC,CAAE,CAC1G;AACL;AAIA,eAAe,SAASC,QAAQ,CAACC,KAAoB,EAAE;EACrD,IAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAC3B,IAAM;IAAEE,QAAQ,GAAG,EAAE;IAAEC,eAAe;IAAEC;EAAS,CAAC,GAAGhB,UAAU,CAACK,aAAa,CAAC;EAC9E,IAAMY,MAAM,gBAAGlB,KAAK,CAACmB,SAAS,EAAkB;EAChDjB,SAAS,CAAC,MAAM;IACd,IAAIgB,MAAM,CAACE,OAAO,IAAIH,QAAQ,EAAE;MAC9BA,QAAQ,CAAC;QAAEI,WAAW,EAAEH,MAAM,CAACE;MAAQ,CAAC,CAAC;IAC3C;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOjB,OAAO,CAAC,MAAM;IACnB,IAAI,CAACY,QAAQ,EAAE;MACb,oBAAO;QAAK,GAAG,EAAEG,MAAO;QAAC,SAAS,EAAKJ,SAAS;MAAgC,EAAG;IACrF;IACA,IAAIQ,KAAK,uCAAoCR,SAAS,0EAAkEP,WAAW,CACjIQ,QAAQ,CACT,oBAAiB;IAElB,IAAIC,eAAe,EAAE;MACnB,IAAI;QACFM,KAAK,GAAGlB,MAAM,EAAE,CACbmB,IAAI,CAAC,UAAU,EAAE;UAAEC,QAAQ,EAAE;QAAK,CAAC,CAAC,CACpCC,GAAG,CAACpB,WAAW,EAAE;UAAEqB,aAAa,EAAE;QAAK,CAAC,CAAC,CACzCC,WAAW,CAACL,KAAK,CAAC,CAClBM,QAAQ,EAAE;MACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;IACnB;IAEA,oBAAO7B,KAAK,CAAC8B,aAAa,CAAC,KAAK,EAAE;MAChCC,SAAS,EAAE,qBAAqB;MAChCC,uBAAuB,EAAE;QAAEC,MAAM,EAAEX,KAAK,IAAI;MAAG;IACjD,CAAC,CAAC;EACJ,CAAC,EAAE,CAACP,QAAQ,EAAEG,MAAM,EAAEJ,SAAS,CAAC,CAAC;AACnC"
+  "mappings": ";;AAAA,OAAOA,KAAK,IAAIC,UAAU,EAAEC,SAAS,QAAiB,OAAO;AAC7D,SAASC,MAAM,QAAQ,QAAQ;AAC/B,OAAOC,WAAW,MAAM,mBAAmB;AAE3C,SAASC,aAAa,QAAQ,eAAe;AAAC;AAE9C,SAASC,WAAW,CAACC,KAAa,EAAE;EAClC,OAAOA,KAAK,CACTC,OAAO,CAAC,gCAAgC,EAAGC,GAAW,IAAK;IAC1D,OAAOA,GAAG,CAACD,OAAO,CAChB,QAAQ,EACPE,CAAS,IAAM,CAAC;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,OAAO;MAAE,GAAG,EAAE;IAAS,CAAC,EAA4BA,CAAC,CAAE,CAC1G;EACH,CAAC,CAAC,CACDF,OAAO,CACN,QAAQ,EACPE,CAAS,IAAM,CAAC;IAAE,GAAG,EAAE,MAAM;IAAE,GAAG,EAAE,MAAM;IAAE,GAAG,EAAE,OAAO;IAAE,GAAG,EAAE;EAAS,CAAC,EAA4BA,CAAC,CAAE,CAC1G;AACL;AAIA,eAAe,SAASC,QAAQ,CAACC,KAAoB,EAAE;EACrD,IAAM;IAAEC;EAAU,CAAC,GAAGD,KAAK;EAC3B,IAAM;IAAEE,QAAQ,GAAG,EAAE;IAAEC,eAAe;IAAEC;EAAS,CAAC,GAAGf,UAAU,CAACI,aAAa,CAAC;EAC9E,IAAMY,MAAM,gBAAGjB,KAAK,CAACkB,SAAS,EAAkB;EAChDhB,SAAS,CAAC,MAAM;IACd,IAAIe,MAAM,CAACE,OAAO,IAAIH,QAAQ,EAAE;MAC9BA,QAAQ,CAAC;QAAEI,WAAW,EAAEH,MAAM,CAACE;MAAQ,CAAC,CAAC;IAC3C;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EACN,IAAI,CAACL,QAAQ,EAAE;IACb,oBAAO;MAAK,GAAG,EAAEG,MAAO;MAAC,SAAS,EAAKJ,SAAS;IAAgC,EAAG;EACrF;EACA,IAAIQ,KAAK,uCAAoCR,SAAS,0EAAkEP,WAAW,CACjIgB,MAAM,CAACC,GAAG,+EAAGT,QAAQ,EACtB,oBAAiB;EAElBU,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEX,QAAQ,CAAC;EAEnC,IAAIC,eAAe,EAAE;IACnB,IAAI;MACFM,KAAK,GAAGlB,MAAM,EAAE,CACbuB,IAAI,CAAC,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAK,CAAC,CAAC,CACpCC,GAAG,CAACxB,WAAW,EAAE;QAAEyB,aAAa,EAAE;MAAK,CAAC,CAAC,CACzCC,WAAW,CAACT,KAAK,CAAC,CAClBU,QAAQ,EAAE;IACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;EACnB;EAEA,oBAAOhC,KAAK,CAACiC,aAAa,CAAC,KAAK,EAAE;IAChCC,SAAS,EAAE,qBAAqB;IAChCC,uBAAuB,EAAE;MAAEC,MAAM,EAAEf,KAAK,IAAI;IAAG;EACjD,CAAC,CAAC;AACJ"
 }

package/lib/commands/preview.js

@@ -29,6 +29,7 @@ var codePreview = {
     })]
   }),
   execute: function execute(state, api, dispatch, executeCommandState, shortcuts) {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'preview'
@@ -59,6 +60,7 @@ var codeEdit = {
     })]
   }),
   execute: function execute(state, api, dispatch, executeCommandState, shortcuts) {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'edit'
@@ -89,6 +91,7 @@ var codeLive = {
     })]
   }),
   execute: function execute(state, api, dispatch, executeCommandState, shortcuts) {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({
         preview: 'live'

package/lib/commands/preview.js.map

@@ -14,6 +14,8 @@
     "api",
     "dispatch",
     "executeCommandState",
+    "textArea",
+    "focus",
     "preview",
     "codeEdit",
     "codeLive"
@@ -22,7 +24,7 @@
     "../../src/commands/preview.tsx"
   ],
   "sourcesContent": [
-    "import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport const codePreview: ICommand = {\n  name: 'preview',\n  keyCommand: 'preview',\n  value: 'preview',\n  shortcuts: 'ctrlcmd+9',\n  buttonProps: { 'aria-label': 'Preview code (ctrl + 9)', title: 'Preview code (ctrl + 9)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon\n        fill=\"currentColor\"\n        points=\"0 71.293 0 122 38.023 123 38.023 398 0 397 0 449.707 91.023 450.413 91.023 72.293\"\n      />\n      <polygon\n        fill=\"currentColor\"\n        points=\"148.023 72.293 520 71.293 520 122 200.023 124 200.023 397 520 396 520 449.707 148.023 450.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'preview' });\n    }\n  },\n};\n\nexport const codeEdit: ICommand = {\n  name: 'edit',\n  keyCommand: 'preview',\n  value: 'edit',\n  shortcuts: 'ctrlcmd+7',\n  buttonProps: { 'aria-label': 'Edit code (ctrl + 7)', title: 'Edit code (ctrl + 7)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"429 71.293 520 71.293 520 122 481 123 481 396 520 396 520 449.707 429 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'edit' });\n    }\n  },\n};\n\nexport const codeLive: ICommand = {\n  name: 'live',\n  keyCommand: 'preview',\n  value: 'live',\n  shortcuts: 'ctrlcmd+8',\n  buttonProps: { 'aria-label': 'Live code (ctrl + 8)', title: 'Live code (ctrl + 8)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"289 71.293 520 71.293 520 122 341 123 341 396 520 396 520 449.707 289 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'live' });\n    }\n  },\n};\n"
+    "import * as React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { ContextStore, ExecuteCommandState } from '../Context';\n\nexport const codePreview: ICommand = {\n  name: 'preview',\n  keyCommand: 'preview',\n  value: 'preview',\n  shortcuts: 'ctrlcmd+9',\n  buttonProps: { 'aria-label': 'Preview code (ctrl + 9)', title: 'Preview code (ctrl + 9)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon\n        fill=\"currentColor\"\n        points=\"0 71.293 0 122 38.023 123 38.023 398 0 397 0 449.707 91.023 450.413 91.023 72.293\"\n      />\n      <polygon\n        fill=\"currentColor\"\n        points=\"148.023 72.293 520 71.293 520 122 200.023 124 200.023 397 520 396 520 449.707 148.023 450.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'preview' });\n    }\n  },\n};\n\nexport const codeEdit: ICommand = {\n  name: 'edit',\n  keyCommand: 'preview',\n  value: 'edit',\n  shortcuts: 'ctrlcmd+7',\n  buttonProps: { 'aria-label': 'Edit code (ctrl + 7)', title: 'Edit code (ctrl + 7)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 319 122 319 397 0 397 0 449.707 372 449.413 372 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"429 71.293 520 71.293 520 122 481 123 481 396 520 396 520 449.707 429 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'edit' });\n    }\n  },\n};\n\nexport const codeLive: ICommand = {\n  name: 'live',\n  keyCommand: 'preview',\n  value: 'live',\n  shortcuts: 'ctrlcmd+8',\n  buttonProps: { 'aria-label': 'Live code (ctrl + 8)', title: 'Live code (ctrl + 8)' },\n  icon: (\n    <svg width=\"12\" height=\"12\" viewBox=\"0 0 520 520\">\n      <polygon fill=\"currentColor\" points=\"0 71.293 0 122 179 122 179 397 0 397 0 449.707 232 449.413 232 71.293\" />\n      <polygon\n        fill=\"currentColor\"\n        points=\"289 71.293 520 71.293 520 122 341 123 341 396 520 396 520 449.707 289 449.413\"\n      />\n    </svg>\n  ),\n  execute: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => {\n    api.textArea.focus();\n    if (shortcuts && dispatch && executeCommandState) {\n      dispatch({ preview: 'live' });\n    }\n  },\n};\n"
   ],
-  "mappings": ";;;;;;;AAAA;AAA+B;AAIxB,IAAMA,WAAqB,GAAG;EACnCC,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,yBAAyB;IAAEC,KAAK,EAAE;EAA0B,CAAC;EAC1FC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAAmF,EAC1F,eACF;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+F,EACtG;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAU,CAAC,CAAC;IAClC;EACF;AACF,CAAC;AAAC;AAEK,IAAMC,QAAkB,GAAG;EAChCb,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAAC;AAEK,IAAME,QAAkB,GAAG;EAChCd,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACH,IAAIA,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEE,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAAC"
+  "mappings": ";;;;;;;AAAA;AAA+B;AAIxB,IAAMA,WAAqB,GAAG;EACnCC,IAAI,EAAE,SAAS;EACfC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,SAAS;EAChBC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,yBAAyB;IAAEC,KAAK,EAAE;EAA0B,CAAC;EAC1FC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAAmF,EAC1F,eACF;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+F,EACtG;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAU,CAAC,CAAC;IAClC;EACF;AACF,CAAC;AAAC;AAEK,IAAMC,QAAkB,GAAG;EAChCf,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAAC;AAEK,IAAME,QAAkB,GAAG;EAChChB,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,SAAS;EACrBC,KAAK,EAAE,MAAM;EACbC,SAAS,EAAE,WAAW;EACtBC,WAAW,EAAE;IAAE,YAAY,EAAE,sBAAsB;IAAEC,KAAK,EAAE;EAAuB,CAAC;EACpFC,IAAI,eACF;IAAK,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,wBAC/C;MAAS,IAAI,EAAC,cAAc;MAAC,MAAM,EAAC;IAAuE,EAAG,eAC9G;MACE,IAAI,EAAC,cAAc;MACnB,MAAM,EAAC;IAA+E,EACtF;EAAA,EAEL;EACDC,OAAO,EAAE,iBACPC,KAAgB,EAChBC,GAAoB,EACpBC,QAAuC,EACvCC,mBAAyC,EACzCR,SAAoB,EACjB;IACHM,GAAG,CAACG,QAAQ,CAACC,KAAK,EAAE;IACpB,IAAIV,SAAS,IAAIO,QAAQ,IAAIC,mBAAmB,EAAE;MAChDD,QAAQ,CAAC;QAAEI,OAAO,EAAE;MAAO,CAAC,CAAC;IAC/B;EACF;AACF,CAAC;AAAC"
 }

package/lib/components/TextArea/Markdown.js

@@ -6,13 +6,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Markdown;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _rehype = require("rehype");
 var _rehypePrismPlus = _interopRequireDefault(require("rehype-prism-plus"));
 var _Context = require("../../Context");
 var _jsxRuntime = require("react/jsx-runtime");
+var _templateObject;
 function html2Escape(sHtml) {
-  return sHtml.replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, function (str) {
+  return sHtml.replace(/```(\w+)?([\s\S]*?)(\s.+)?```/g, function (str) {
     return str.replace(/[<&"]/g, function (c) {
       return {
         '<': '&lt;',
@@ -46,30 +48,29 @@ function Markdown(props) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-  return (0, _react.useMemo)(function () {
-    if (!markdown) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
-        ref: preRef,
-        className: "".concat(prefixCls, "-text-pre wmde-markdown-color")
-      });
-    }
-    var mdStr = "<pre class=\"language-markdown ".concat(prefixCls, "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">").concat(html2Escape(markdown), "\n</code></pre>");
-    if (highlightEnable) {
-      try {
-        mdStr = (0, _rehype.rehype)().data('settings', {
-          fragment: true
-        }).use(_rehypePrismPlus["default"], {
-          ignoreMissing: true
-        }).processSync(mdStr).toString();
-      } catch (error) {}
-    }
-    return /*#__PURE__*/_react["default"].createElement('div', {
-      className: 'wmde-markdown-color',
-      dangerouslySetInnerHTML: {
-        __html: mdStr || ''
-      }
+  if (!markdown) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("pre", {
+      ref: preRef,
+      className: "".concat(prefixCls, "-text-pre wmde-markdown-color")
     });
-  }, [markdown, preRef, prefixCls]);
+  }
+  var mdStr = "<pre class=\"language-markdown ".concat(prefixCls, "-text-pre wmde-markdown-color\"><code class=\"language-markdown\">").concat(html2Escape(String.raw(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["", ""])), markdown)), "\n</code></pre>");
+  console.log('markdown::', markdown);
+  if (highlightEnable) {
+    try {
+      mdStr = (0, _rehype.rehype)().data('settings', {
+        fragment: true
+      }).use(_rehypePrismPlus["default"], {
+        ignoreMissing: true
+      }).processSync(mdStr).toString();
+    } catch (error) {}
+  }
+  return /*#__PURE__*/_react["default"].createElement('div', {
+    className: 'wmde-markdown-color',
+    dangerouslySetInnerHTML: {
+      __html: mdStr || ''
+    }
+  });
 }
 module.exports = exports.default;
 //# sourceMappingURL=Markdown.js.map

package/lib/components/TextArea/Markdown.js.map

@@ -20,8 +20,11 @@
     "useEffect",
     "current",
     "textareaPre",
-    "useMemo",
     "mdStr",
+    "String",
+    "raw",
+    "console",
+    "log",
     "rehype",
     "data",
     "fragment",
@@ -40,7 +43,7 @@
     "../../../src/components/TextArea/Markdown.tsx"
   ],
   "sourcesContent": [
-    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n  return sHtml\n    .replace(/```(tsx?|jsx?|html|xml)(.*)\\s+([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n      return str.replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n    })\n    .replace(\n      /[<&\"]/g,\n      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n    );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return useMemo(() => {\n    if (!markdown) {\n      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n    }\n    let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n      markdown,\n    )}\\n</code></pre>`;\n\n    if (highlightEnable) {\n      try {\n        mdStr = rehype()\n          .data('settings', { fragment: true })\n          .use(rehypePrism, { ignoreMissing: true })\n          .processSync(mdStr)\n          .toString();\n      } catch (error) {}\n    }\n\n    return React.createElement('div', {\n      className: 'wmde-markdown-color',\n      dangerouslySetInnerHTML: { __html: mdStr || '' },\n    });\n  }, [markdown, preRef, prefixCls]);\n}\n"
+    "import React, { useContext, useEffect, useMemo } from 'react';\nimport { rehype } from 'rehype';\nimport rehypePrism from 'rehype-prism-plus';\nimport { IProps } from '../../Editor';\nimport { EditorContext } from '../../Context';\n\nfunction html2Escape(sHtml: string) {\n  return sHtml\n    .replace(/```(\\w+)?([\\s\\S]*?)(\\s.+)?```/g, (str: string) => {\n      return str.replace(\n        /[<&\"]/g,\n        (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n      );\n    })\n    .replace(\n      /[<&\"]/g,\n      (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '\"': '&quot;' } as Record<string, string>)[c]),\n    );\n}\n\nexport interface MarkdownProps extends IProps, React.HTMLAttributes<HTMLPreElement> {}\n\nexport default function Markdown(props: MarkdownProps) {\n  const { prefixCls } = props;\n  const { markdown = '', highlightEnable, dispatch } = useContext(EditorContext);\n  const preRef = React.createRef<HTMLPreElement>();\n  useEffect(() => {\n    if (preRef.current && dispatch) {\n      dispatch({ textareaPre: preRef.current });\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n  if (!markdown) {\n    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;\n  }\n  let mdStr = `<pre class=\"language-markdown ${prefixCls}-text-pre wmde-markdown-color\"><code class=\"language-markdown\">${html2Escape(\n    String.raw`${markdown}`,\n  )}\\n</code></pre>`;\n\n  console.log('markdown::', markdown);\n\n  if (highlightEnable) {\n    try {\n      mdStr = rehype()\n        .data('settings', { fragment: true })\n        .use(rehypePrism, { ignoreMissing: true })\n        .processSync(mdStr)\n        .toString();\n    } catch (error) {}\n  }\n\n  return React.createElement('div', {\n    className: 'wmde-markdown-color',\n    dangerouslySetInnerHTML: { __html: mdStr || '' },\n  });\n}\n"
   ],
-  "mappings": ";;;;;;;;AAAA;AACA;AACA;AAEA;AAA8C;AAE9C,SAASA,WAAW,CAACC,KAAa,EAAE;EAClC,OAAOA,KAAK,CACTC,OAAO,CAAC,qDAAqD,EAAE,UAACC,GAAW,EAAK;IAC/E,OAAOA,GAAG,CAACD,OAAO,CAChB,QAAQ,EACR,UAACE,CAAS;MAAA,OAAO;QAAE,GAAG,EAAE,MAAM;QAAE,GAAG,EAAE,MAAM;QAAE,GAAG,EAAE,OAAO;QAAE,GAAG,EAAE;MAAS,CAAC,CAA4BA,CAAC,CAAC;IAAA,CAAC,CAC1G;EACH,CAAC,CAAC,CACDF,OAAO,CACN,QAAQ,EACR,UAACE,CAAS;IAAA,OAAO;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,OAAO;MAAE,GAAG,EAAE;IAAS,CAAC,CAA4BA,CAAC,CAAC;EAAA,CAAC,CAC1G;AACL;AAIe,SAASC,QAAQ,CAACC,KAAoB,EAAE;EACrD,IAAQC,SAAS,GAAKD,KAAK,CAAnBC,SAAS;EACjB,kBAAqD,IAAAC,iBAAU,EAACC,sBAAa,CAAC;IAAA,mCAAtEC,QAAQ;IAARA,QAAQ,qCAAG,EAAE;IAAEC,eAAe,eAAfA,eAAe;IAAEC,QAAQ,eAARA,QAAQ;EAChD,IAAMC,MAAM,gBAAGC,iBAAK,CAACC,SAAS,EAAkB;EAChD,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIH,MAAM,CAACI,OAAO,IAAIL,QAAQ,EAAE;MAC9BA,QAAQ,CAAC;QAAEM,WAAW,EAAEL,MAAM,CAACI;MAAQ,CAAC,CAAC;IAC3C;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,OAAO,IAAAE,cAAO,EAAC,YAAM;IACnB,IAAI,CAACT,QAAQ,EAAE;MACb,oBAAO;QAAK,GAAG,EAAEG,MAAO;QAAC,SAAS,YAAKN,SAAS;MAAgC,EAAG;IACrF;IACA,IAAIa,KAAK,4CAAoCb,SAAS,+EAAkEP,WAAW,CACjIU,QAAQ,CACT,oBAAiB;IAElB,IAAIC,eAAe,EAAE;MACnB,IAAI;QACFS,KAAK,GAAG,IAAAC,cAAM,GAAE,CACbC,IAAI,CAAC,UAAU,EAAE;UAAEC,QAAQ,EAAE;QAAK,CAAC,CAAC,CACpCC,GAAG,CAACC,2BAAW,EAAE;UAAEC,aAAa,EAAE;QAAK,CAAC,CAAC,CACzCC,WAAW,CAACP,KAAK,CAAC,CAClBQ,QAAQ,EAAE;MACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;IACnB;IAEA,oBAAOf,iBAAK,CAACgB,aAAa,CAAC,KAAK,EAAE;MAChCC,SAAS,EAAE,qBAAqB;MAChCC,uBAAuB,EAAE;QAAEC,MAAM,EAAEb,KAAK,IAAI;MAAG;IACjD,CAAC,CAAC;EACJ,CAAC,EAAE,CAACV,QAAQ,EAAEG,MAAM,EAAEN,SAAS,CAAC,CAAC;AACnC;AAAC"
+  "mappings": ";;;;;;;;;AAAA;AACA;AACA;AAEA;AAA8C;AAAA;AAE9C,SAASA,WAAW,CAACC,KAAa,EAAE;EAClC,OAAOA,KAAK,CACTC,OAAO,CAAC,gCAAgC,EAAE,UAACC,GAAW,EAAK;IAC1D,OAAOA,GAAG,CAACD,OAAO,CAChB,QAAQ,EACR,UAACE,CAAS;MAAA,OAAO;QAAE,GAAG,EAAE,MAAM;QAAE,GAAG,EAAE,MAAM;QAAE,GAAG,EAAE,OAAO;QAAE,GAAG,EAAE;MAAS,CAAC,CAA4BA,CAAC,CAAC;IAAA,CAAC,CAC1G;EACH,CAAC,CAAC,CACDF,OAAO,CACN,QAAQ,EACR,UAACE,CAAS;IAAA,OAAO;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,MAAM;MAAE,GAAG,EAAE,OAAO;MAAE,GAAG,EAAE;IAAS,CAAC,CAA4BA,CAAC,CAAC;EAAA,CAAC,CAC1G;AACL;AAIe,SAASC,QAAQ,CAACC,KAAoB,EAAE;EACrD,IAAQC,SAAS,GAAKD,KAAK,CAAnBC,SAAS;EACjB,kBAAqD,IAAAC,iBAAU,EAACC,sBAAa,CAAC;IAAA,mCAAtEC,QAAQ;IAARA,QAAQ,qCAAG,EAAE;IAAEC,eAAe,eAAfA,eAAe;IAAEC,QAAQ,eAARA,QAAQ;EAChD,IAAMC,MAAM,gBAAGC,iBAAK,CAACC,SAAS,EAAkB;EAChD,IAAAC,gBAAS,EAAC,YAAM;IACd,IAAIH,MAAM,CAACI,OAAO,IAAIL,QAAQ,EAAE;MAC9BA,QAAQ,CAAC;QAAEM,WAAW,EAAEL,MAAM,CAACI;MAAQ,CAAC,CAAC;IAC3C;IACA;EACF,CAAC,EAAE,EAAE,CAAC;EACN,IAAI,CAACP,QAAQ,EAAE;IACb,oBAAO;MAAK,GAAG,EAAEG,MAAO;MAAC,SAAS,YAAKN,SAAS;IAAgC,EAAG;EACrF;EACA,IAAIY,KAAK,4CAAoCZ,SAAS,+EAAkEP,WAAW,CACjIoB,MAAM,CAACC,GAAG,2FAAGX,QAAQ,EACtB,oBAAiB;EAElBY,OAAO,CAACC,GAAG,CAAC,YAAY,EAAEb,QAAQ,CAAC;EAEnC,IAAIC,eAAe,EAAE;IACnB,IAAI;MACFQ,KAAK,GAAG,IAAAK,cAAM,GAAE,CACbC,IAAI,CAAC,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAK,CAAC,CAAC,CACpCC,GAAG,CAACC,2BAAW,EAAE;QAAEC,aAAa,EAAE;MAAK,CAAC,CAAC,CACzCC,WAAW,CAACX,KAAK,CAAC,CAClBY,QAAQ,EAAE;IACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;EACnB;EAEA,oBAAOlB,iBAAK,CAACmB,aAAa,CAAC,KAAK,EAAE;IAChCC,SAAS,EAAE,qBAAqB;IAChCC,uBAAuB,EAAE;MAAEC,MAAM,EAAEjB,KAAK,IAAI;IAAG;EACjD,CAAC,CAAC;AACJ;AAAC"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.19.5",
+  "version": "3.19.6",
   "description": "A markdown editor with preview, implemented with React.js and TypeScript.",
   "homepage": "https://uiwjs.github.io/react-md-editor/",
   "author": "kenny wang <wowohoo@qq.com>",

package/src/commands/preview.tsx

@@ -27,6 +27,7 @@ export const codePreview: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'preview' });
     }
@@ -55,6 +56,7 @@ export const codeEdit: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'edit' });
     }
@@ -83,6 +85,7 @@ export const codeLive: ICommand = {
     executeCommandState?: ExecuteCommandState,
     shortcuts?: string[],
   ) => {
+    api.textArea.focus();
     if (shortcuts && dispatch && executeCommandState) {
       dispatch({ preview: 'live' });
     }

package/src/components/TextArea/Markdown.tsx

@@ -6,7 +6,7 @@ import { EditorContext } from '../../Context';
 
 function html2Escape(sHtml: string) {
   return sHtml
-    .replace(/```(tsx?|jsx?|html|xml)(.*)\s+([\s\S]*?)(\s.+)?```/g, (str: string) => {
+    .replace(/```(\w+)?([\s\S]*?)(\s.+)?```/g, (str: string) => {
       return str.replace(
         /[<&"]/g,
         (c: string) => (({ '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;' } as Record<string, string>)[c]),
@@ -30,28 +30,27 @@ export default function Markdown(props: MarkdownProps) {
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
+  if (!markdown) {
+    return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
+  }
+  let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
+    String.raw`${markdown}`,
+  )}\n</code></pre>`;
 
-  return useMemo(() => {
-    if (!markdown) {
-      return <pre ref={preRef} className={`${prefixCls}-text-pre wmde-markdown-color`} />;
-    }
-    let mdStr = `<pre class="language-markdown ${prefixCls}-text-pre wmde-markdown-color"><code class="language-markdown">${html2Escape(
-      markdown,
-    )}\n</code></pre>`;
+  console.log('markdown::', markdown);
 
-    if (highlightEnable) {
-      try {
-        mdStr = rehype()
-          .data('settings', { fragment: true })
-          .use(rehypePrism, { ignoreMissing: true })
-          .processSync(mdStr)
-          .toString();
-      } catch (error) {}
-    }
+  if (highlightEnable) {
+    try {
+      mdStr = rehype()
+        .data('settings', { fragment: true })
+        .use(rehypePrism, { ignoreMissing: true })
+        .processSync(mdStr)
+        .toString();
+    } catch (error) {}
+  }
 
-    return React.createElement('div', {
-      className: 'wmde-markdown-color',
-      dangerouslySetInnerHTML: { __html: mdStr || '' },
-    });
-  }, [markdown, preRef, prefixCls]);
+  return React.createElement('div', {
+    className: 'wmde-markdown-color',
+    dangerouslySetInnerHTML: { __html: mdStr || '' },
+  });
 }