@uiw/react-md-editor 3.19.5 → 3.19.7

package/esm/commands/bold.js

@@ -21,6 +21,7 @@ export var bold = {
     })
   }),
   execute: (state, api) => {
+    var _state1$selectedText;
     // Adjust the selection to encompass the whole word if the caret is inside one
     var newSelectionRange = selectWord({
       text: state.text,
@@ -31,7 +32,7 @@ export var bold = {
     var state2 = api.replaceSelection("**" + state1.selectedText + "**");
     // Adjust the selection to not contain the **
     api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
+      start: state2.selection.end - 2 - ((_state1$selectedText = state1.selectedText) == null ? void 0 : _state1$selectedText.length),
       end: state2.selection.end - 2
     });
   }

package/esm/commands/bold.js.map

@@ -30,7 +30,7 @@
     "../../src/commands/bold.tsx"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  value: '**',\n  buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
+    "import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  value: '**',\n  buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText?.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
   ],
-  "mappings": "AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,wBAAwB;AAAC;AAEpD,OAAO,IAAMC,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE;IAAE,YAAY,EAAE,0BAA0B;IAAEC,KAAK,EAAE;EAA2B,CAAC;EAC5FC,IAAI,eACF;IAAK,IAAI,EAAC,KAAK;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC1D;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAwqB;EAC1qB,EAEL;EACDC,OAAO,EAAE,CAACC,KAAgB,EAAEC,GAAoB,KAAK;IACnD;IACA,IAAMC,iBAAiB,GAAGZ,UAAU,CAAC;MAAEa,IAAI,EAAEH,KAAK,CAACG,IAAI;MAAEC,SAAS,EAAEJ,KAAK,CAACI;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAiB,CAACJ,iBAAiB,CAAC;IACvD;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAgB,QAAMH,MAAM,CAACI,YAAY,QAAK;IACjE;IACAR,GAAG,CAACK,iBAAiB,CAAC;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG,CAAC,GAAGN,MAAM,CAACI,YAAY,CAACG,MAAM;MAC5DD,GAAG,EAAEJ,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG;IAC9B,CAAC,CAAC;EACJ;AACF,CAAC"
+  "mappings": "AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,UAAU,QAAQ,wBAAwB;AAAC;AAEpD,OAAO,IAAMC,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE;IAAE,YAAY,EAAE,0BAA0B;IAAEC,KAAK,EAAE;EAA2B,CAAC;EAC5FC,IAAI,eACF;IAAK,IAAI,EAAC,KAAK;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC1D;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAwqB;EAC1qB,EAEL;EACDC,OAAO,EAAE,CAACC,KAAgB,EAAEC,GAAoB,KAAK;IAAA;IACnD;IACA,IAAMC,iBAAiB,GAAGZ,UAAU,CAAC;MAAEa,IAAI,EAAEH,KAAK,CAACG,IAAI;MAAEC,SAAS,EAAEJ,KAAK,CAACI;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAiB,CAACJ,iBAAiB,CAAC;IACvD;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAgB,QAAMH,MAAM,CAACI,YAAY,QAAK;IACjE;IACAR,GAAG,CAACK,iBAAiB,CAAC;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG,CAAC,4BAAGN,MAAM,CAACI,YAAY,qBAAnB,qBAAqBG,MAAM;MAC7DD,GAAG,EAAEJ,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG;IAC9B,CAAC,CAAC;EACJ;AACF,CAAC"
 }

package/esm/commands/index.js

@@ -30,13 +30,14 @@ var getCommands = () => [bold, italic, strikethrough, hr, group([title1, title2,
 }), divider, link, quote, code, codeBlock, comment, image, divider, unorderedListCommand, orderedListCommand, checkedListCommand];
 var getExtraCommands = () => [codeEdit, codeLive, codePreview, divider, fullscreen];
 function getStateFromTextArea(textArea) {
+  var _textArea$value;
   return {
     selection: {
       start: textArea.selectionStart,
       end: textArea.selectionEnd
     },
     text: textArea.value,
-    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd)
+    selectedText: (_textArea$value = textArea.value) == null ? void 0 : _textArea$value.slice(textArea.selectionStart, textArea.selectionEnd)
   };
 }
 class TextAreaTextApi {

package/esm/commands/index.js.map

@@ -63,7 +63,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
+    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

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,27 @@ 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>";
+  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,8 @@
     "current",
     "textareaPre",
     "mdStr",
+    "String",
+    "raw",
     "data",
     "fragment",
     "use",
@@ -40,7 +41,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  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;EAElB,IAAIC,eAAe,EAAE;IACnB,IAAI;MACFM,KAAK,GAAGlB,MAAM,EAAE,CACbqB,IAAI,CAAC,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAK,CAAC,CAAC,CACpCC,GAAG,CAACtB,WAAW,EAAE;QAAEuB,aAAa,EAAE;MAAK,CAAC,CAAC,CACzCC,WAAW,CAACP,KAAK,CAAC,CAClBQ,QAAQ,EAAE;IACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;EACnB;EAEA,oBAAO9B,KAAK,CAAC+B,aAAa,CAAC,KAAK,EAAE;IAChCC,SAAS,EAAE,qBAAqB;IAChCC,uBAAuB,EAAE;MAAEC,MAAM,EAAEb,KAAK,IAAI;IAAG;EACjD,CAAC,CAAC;AACJ"
 }

package/lib/commands/bold.js

@@ -28,6 +28,7 @@ var bold = {
     })
   }),
   execute: function execute(state, api) {
+    var _state1$selectedText;
     // Adjust the selection to encompass the whole word if the caret is inside one
     var newSelectionRange = (0, _markdownUtils.selectWord)({
       text: state.text,
@@ -38,7 +39,7 @@ var bold = {
     var state2 = api.replaceSelection("**".concat(state1.selectedText, "**"));
     // Adjust the selection to not contain the **
     api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
+      start: state2.selection.end - 2 - ((_state1$selectedText = state1.selectedText) === null || _state1$selectedText === void 0 ? void 0 : _state1$selectedText.length),
       end: state2.selection.end - 2
     });
   }

package/lib/commands/bold.js.map

@@ -29,7 +29,7 @@
     "../../src/commands/bold.tsx"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  value: '**',\n  buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
+    "import React from 'react';\nimport { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const bold: ICommand = {\n  name: 'bold',\n  keyCommand: 'bold',\n  shortcuts: 'ctrlcmd+b',\n  value: '**',\n  buttonProps: { 'aria-label': 'Add bold text (ctrl + b)', title: 'Add bold text (ctrl + b)' },\n  icon: (\n    <svg role=\"img\" width=\"12\" height=\"12\" viewBox=\"0 0 384 512\">\n      <path\n        fill=\"currentColor\"\n        d=\"M304.793 243.891c33.639-18.537 53.657-54.16 53.657-95.693 0-48.236-26.25-87.626-68.626-104.179C265.138 34.01 240.849 32 209.661 32H24c-8.837 0-16 7.163-16 16v33.049c0 8.837 7.163 16 16 16h33.113v318.53H24c-8.837 0-16 7.163-16 16V464c0 8.837 7.163 16 16 16h195.69c24.203 0 44.834-1.289 66.866-7.584C337.52 457.193 376 410.647 376 350.014c0-52.168-26.573-91.684-71.207-106.123zM142.217 100.809h67.444c16.294 0 27.536 2.019 37.525 6.717 15.828 8.479 24.906 26.502 24.906 49.446 0 35.029-20.32 56.79-53.029 56.79h-76.846V100.809zm112.642 305.475c-10.14 4.056-22.677 4.907-31.409 4.907h-81.233V281.943h84.367c39.645 0 63.057 25.38 63.057 63.057.001 28.425-13.66 52.483-34.782 61.284z\"\n      />\n    </svg>\n  ),\n  execute: (state: TextState, api: TextAreaTextApi) => {\n    // Adjust the selection to encompass the whole word if the caret is inside one\n    const newSelectionRange = selectWord({ text: state.text, selection: state.selection });\n    const state1 = api.setSelectionRange(newSelectionRange);\n    // Replaces the current selection with the bold mark up\n    const state2 = api.replaceSelection(`**${state1.selectedText}**`);\n    // Adjust the selection to not contain the **\n    api.setSelectionRange({\n      start: state2.selection.end - 2 - state1.selectedText?.length,\n      end: state2.selection.end - 2,\n    });\n  },\n};\n"
   ],
-  "mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE;IAAE,YAAY,EAAE,0BAA0B;IAAEC,KAAK,EAAE;EAA2B,CAAC;EAC5FC,IAAI,eACF;IAAK,IAAI,EAAC,KAAK;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC1D;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAwqB;EAC1qB,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAgB,EAAEC,GAAoB,EAAK;IACnD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD;IACA,IAAMM,MAAM,GAAGP,GAAG,CAACQ,gBAAgB,aAAMH,MAAM,CAACI,YAAY,QAAK;IACjE;IACAT,GAAG,CAACM,iBAAiB,CAAC;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG,CAAC,GAAGN,MAAM,CAACI,YAAY,CAACG,MAAM;MAC5DD,GAAG,EAAEJ,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG;IAC9B,CAAC,CAAC;EACJ;AACF,CAAC;AAAC"
+  "mappings": ";;;;;;;AAAA;AAEA;AAAoD;AAE7C,IAAMA,IAAc,GAAG;EAC5BC,IAAI,EAAE,MAAM;EACZC,UAAU,EAAE,MAAM;EAClBC,SAAS,EAAE,WAAW;EACtBC,KAAK,EAAE,IAAI;EACXC,WAAW,EAAE;IAAE,YAAY,EAAE,0BAA0B;IAAEC,KAAK,EAAE;EAA2B,CAAC;EAC5FC,IAAI,eACF;IAAK,IAAI,EAAC,KAAK;IAAC,KAAK,EAAC,IAAI;IAAC,MAAM,EAAC,IAAI;IAAC,OAAO,EAAC,aAAa;IAAA,uBAC1D;MACE,IAAI,EAAC,cAAc;MACnB,CAAC,EAAC;IAAwqB;EAC1qB,EAEL;EACDC,OAAO,EAAE,iBAACC,KAAgB,EAAEC,GAAoB,EAAK;IAAA;IACnD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAU,EAAC;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAI;MAAEC,SAAS,EAAEL,KAAK,CAACK;IAAU,CAAC,CAAC;IACtF,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAiB,CAACL,iBAAiB,CAAC;IACvD;IACA,IAAMM,MAAM,GAAGP,GAAG,CAACQ,gBAAgB,aAAMH,MAAM,CAACI,YAAY,QAAK;IACjE;IACAT,GAAG,CAACM,iBAAiB,CAAC;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG,CAAC,4BAAGN,MAAM,CAACI,YAAY,yDAAnB,qBAAqBG,MAAM;MAC7DD,GAAG,EAAEJ,MAAM,CAACH,SAAS,CAACO,GAAG,GAAG;IAC9B,CAAC,CAAC;EACJ;AACF,CAAC;AAAC"
 }

package/lib/commands/index.js

@@ -198,13 +198,14 @@ var getExtraCommands = function getExtraCommands() {
 };
 exports.getExtraCommands = getExtraCommands;
 function getStateFromTextArea(textArea) {
+  var _textArea$value;
   return {
     selection: {
       start: textArea.selectionStart,
       end: textArea.selectionEnd
     },
     text: textArea.value,
-    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd)
+    selectedText: (_textArea$value = textArea.value) === null || _textArea$value === void 0 ? void 0 : _textArea$value.slice(textArea.selectionStart, textArea.selectionEnd)
   };
 }
 var TextAreaTextApi = /*#__PURE__*/function () {

package/lib/commands/index.js.map

@@ -58,7 +58,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
+    "import React from 'react';\nimport { ContextStore, ExecuteCommandState } from '../Context';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { comment } from './comment';\nimport { divider } from './divider';\nimport { fullscreen } from './fullscreen';\nimport { group } from './group';\nimport { hr } from './hr';\nimport { image } from './image';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';\nimport { codeEdit, codeLive, codePreview } from './preview';\nimport { quote } from './quote';\nimport { strikethrough } from './strikeThrough';\nimport { title } from './title';\nimport { title1 } from './title1';\nimport { title2 } from './title2';\nimport { title3 } from './title3';\nimport { title4 } from './title4';\nimport { title5 } from './title5';\nimport { title6 } from './title6';\n\nexport interface CommandOrchestrator {\n  executeCommand(command: ICommand): void;\n}\n\nexport interface ICommandChildHandle<T = string> extends ICommandBase<T> {\n  children?: (handle: {\n    close: () => void;\n    execute: () => void;\n    getState?: TextAreaCommandOrchestrator['getState'];\n    textApi?: TextAreaTextApi;\n  }) => React.ReactElement;\n}\n\nexport interface ICommandChildCommands<T = string> extends ICommandBase<T> {\n  children?: Array<ICommand<T>>;\n}\n\nexport interface ICommandBase<T> {\n  parent?: ICommand<any>;\n  keyCommand?: string;\n  name?: string;\n  shortcuts?: string;\n  groupName?: string;\n  icon?: React.ReactElement;\n  value?: T;\n  position?: 'right';\n  liProps?: React.LiHTMLAttributes<HTMLLIElement>;\n  buttonProps?: React.ButtonHTMLAttributes<HTMLButtonElement> | null;\n  render?: (\n    command: ICommand<T>,\n    disabled: boolean,\n    executeCommand: (command: ICommand<T>, name?: string) => void,\n    index: number,\n  ) => void | undefined | null | React.ReactElement;\n  execute?: (\n    state: TextState,\n    api: TextAreaTextApi,\n    dispatch?: React.Dispatch<ContextStore>,\n    executeCommandState?: ExecuteCommandState,\n    shortcuts?: string[],\n  ) => void;\n}\n\nexport type ICommand<T = string> = ICommandChildCommands<T> | ICommandChildHandle<T>;\n\nexport interface TextRange {\n  start: number;\n  end: number;\n}\n\nexport interface TextState {\n  text: string;\n  selectedText: string;\n  selection: TextRange;\n}\n\nconst getCommands: () => ICommand[] = () => [\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n    name: 'title',\n    groupName: 'title',\n    buttonProps: { 'aria-label': 'Insert title', title: 'Insert title' },\n  }),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\n  comment,\n  image,\n  divider,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n];\n\nconst getExtraCommands: () => ICommand[] = () => [codeEdit, codeLive, codePreview, divider, fullscreen];\n\nfunction getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {\n  return {\n    selection: {\n      start: textArea.selectionStart,\n      end: textArea.selectionEnd,\n    },\n    text: textArea.value,\n    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),\n  };\n}\n\nclass TextAreaTextApi {\n  textArea: HTMLTextAreaElement;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n  }\n\n  /**\n   * Replaces the current selection with the new text. This will make the new selectedText to be empty, the\n   * selection start and selection end will be the same and will both point to the end\n   * @param text Text that should replace the current selection\n   */\n  replaceSelection(text: string): TextState {\n    insertTextAtPosition(this.textArea, text);\n    return getStateFromTextArea(this.textArea);\n  }\n\n  /**\n   * Selects the specified text range\n   * @param selection\n   */\n  setSelectionRange(selection: TextRange): TextState {\n    this.textArea.focus();\n    this.textArea.selectionStart = selection.start;\n    this.textArea.selectionEnd = selection.end;\n    return getStateFromTextArea(this.textArea);\n  }\n}\n\nclass TextAreaCommandOrchestrator implements CommandOrchestrator {\n  textArea: HTMLTextAreaElement;\n  textApi: TextAreaTextApi;\n\n  constructor(textArea: HTMLTextAreaElement) {\n    this.textArea = textArea;\n    this.textApi = new TextAreaTextApi(textArea);\n  }\n\n  getState() {\n    if (!this.textArea) return false;\n    return getStateFromTextArea(this.textArea);\n  }\n\n  executeCommand(\n    command: ICommand<string>,\n    dispatch?: React.Dispatch<ContextStore>,\n    state?: ExecuteCommandState,\n    shortcuts?: string[],\n  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state, shortcuts);\n  }\n}\n\nexport {\n  title,\n  title1,\n  title2,\n  title3,\n  title4,\n  title5,\n  title6,\n  bold,\n  codeBlock,\n  italic,\n  strikethrough,\n  hr,\n  group,\n  divider,\n  link,\n  quote,\n  code,\n  image,\n  unorderedListCommand,\n  orderedListCommand,\n  checkedListCommand,\n  codeEdit,\n  codeLive,\n  codePreview,\n  fullscreen,\n  // Tool method.\n  getCommands,\n  getExtraCommands,\n  getStateFromTextArea,\n  TextAreaCommandOrchestrator,\n  TextAreaTextApi,\n};\n"
   ],
-  "mappings": "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"
+  "mappings": "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"
 }

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,28 @@ 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>");
+  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,9 @@
     "useEffect",
     "current",
     "textareaPre",
-    "useMemo",
     "mdStr",
+    "String",
+    "raw",
     "rehype",
     "data",
     "fragment",
@@ -40,7 +41,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  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;EAElB,IAAIC,eAAe,EAAE;IACnB,IAAI;MACFQ,KAAK,GAAG,IAAAG,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,CAACT,KAAK,CAAC,CAClBU,QAAQ,EAAE;IACf,CAAC,CAAC,OAAOC,KAAK,EAAE,CAAC;EACnB;EAEA,oBAAOhB,iBAAK,CAACiB,aAAa,CAAC,KAAK,EAAE;IAChCC,SAAS,EAAE,qBAAqB;IAChCC,uBAAuB,EAAE;MAAEC,MAAM,EAAEf,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.7",
   "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/bold.tsx

@@ -24,7 +24,7 @@ export const bold: ICommand = {
     const state2 = api.replaceSelection(`**${state1.selectedText}**`);
     // Adjust the selection to not contain the **
     api.setSelectionRange({
-      start: state2.selection.end - 2 - state1.selectedText.length,
+      start: state2.selection.end - 2 - state1.selectedText?.length,
       end: state2.selection.end - 2,
     });
   },

package/src/commands/index.ts

@@ -111,7 +111,7 @@ function getStateFromTextArea(textArea: HTMLTextAreaElement): TextState {
       end: textArea.selectionEnd,
     },
     text: textArea.value,
-    selectedText: textArea.value.slice(textArea.selectionStart, textArea.selectionEnd),
+    selectedText: textArea.value?.slice(textArea.selectionStart, textArea.selectionEnd),
   };
 }
 

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' });
     }