@uiw/react-md-editor 3.18.2 → 3.18.3

package/esm/commands/comment.js

@@ -1,4 +1,6 @@
 import { selectWord } from '../utils/markdownUtils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export var comment = {
   name: 'comment',
   keyCommand: 'comment',
@@ -22,6 +24,19 @@ export var comment = {
       start: state2.selection.end - 4 - state1.selectedText.length,
       end: state2.selection.end - 4
     });
-  }
+  },
+  icon: /*#__PURE__*/_jsxs("svg", {
+    role: "img",
+    viewBox: "0 0 512 512",
+    width: "12",
+    height: "12",
+    children: [/*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      d: "M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z"
+    }), /*#__PURE__*/_jsx("path", {
+      fill: "currentColor",
+      d: "M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z"
+    })]
+  })
 };
 //# sourceMappingURL=comment.js.map

package/esm/commands/comment.js.map

@@ -22,13 +22,14 @@
     "selectedText",
     "start",
     "end",
-    "length"
+    "length",
+    "icon"
   ],
   "sources": [
     "../../src/commands/comment.tsx"
   ],
   "sourcesContent": [
-    "import { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const comment: ICommand = {\n  name: 'comment',\n  keyCommand: 'comment',\n  shortcuts: 'ctrlcmd+/',\n  value: '<!-- -->',\n  buttonProps: { 'aria-label': 'Insert comment (ctrl + /)', title: 'Insert comment (ctrl + /)' },\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 - 4 - state1.selectedText.length,\n      end: state2.selection.end - 4,\n    });\n  },\n};\n"
+    "import { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const comment: ICommand = {\n  name: 'comment',\n  keyCommand: 'comment',\n  shortcuts: 'ctrlcmd+/',\n  value: '<!-- -->',\n  buttonProps: { 'aria-label': 'Insert comment (ctrl + /)', title: 'Insert comment (ctrl + /)' },\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 - 4 - state1.selectedText.length,\n      end: state2.selection.end - 4,\n    });\n  },\n  icon: (\n    <svg role=\"img\" viewBox=\"0 0 512 512\" width=\"12\" height=\"12\">\n      <path fill=\"currentColor\" d=\"M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z\" />\n      <path fill=\"currentColor\" d=\"M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z\" />\n    </svg>\n  )\n};\n"
   ],
-  "mappings": "AACA,SAASA,UAAT,QAA2B,wBAA3B;AAEA,OAAO,IAAMC,OAAiB,GAAG;EAC/BC,IAAI,EAAE,SADyB;EAE/BC,UAAU,EAAE,SAFmB;EAG/BC,SAAS,EAAE,WAHoB;EAI/BC,KAAK,EAAE,UAJwB;EAK/BC,WAAW,EAAE;IAAE,cAAc,2BAAhB;IAA6CC,KAAK,EAAE;EAApD,CALkB;EAM/BC,OAAO,EAAE,CAACC,KAAD,EAAmBC,GAAnB,KAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAGX,UAAU,CAAC;MAAEY,IAAI,EAAEH,KAAK,CAACG,IAAd;MAAoBC,SAAS,EAAEJ,KAAK,CAACI;IAArC,CAAD,CAApC;IACA,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAJ,WAA6BH,MAAM,CAACI,YAApC,UAAf,CALmD,CAMnD;;IACAR,GAAG,CAACK,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID;AAjB8B,CAA1B"
+  "mappings": "AACA,SAASA,UAAT,QAA2B,wBAA3B;;;AAEA,OAAO,IAAMC,OAAiB,GAAG;EAC/BC,IAAI,EAAE,SADyB;EAE/BC,UAAU,EAAE,SAFmB;EAG/BC,SAAS,EAAE,WAHoB;EAI/BC,KAAK,EAAE,UAJwB;EAK/BC,WAAW,EAAE;IAAE,cAAc,2BAAhB;IAA6CC,KAAK,EAAE;EAApD,CALkB;EAM/BC,OAAO,EAAE,CAACC,KAAD,EAAmBC,GAAnB,KAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAGX,UAAU,CAAC;MAAEY,IAAI,EAAEH,KAAK,CAACG,IAAd;MAAoBC,SAAS,EAAEJ,KAAK,CAACI;IAArC,CAAD,CAApC;IACA,IAAMC,MAAM,GAAGJ,GAAG,CAACK,iBAAJ,CAAsBJ,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMK,MAAM,GAAGN,GAAG,CAACO,gBAAJ,WAA6BH,MAAM,CAACI,YAApC,UAAf,CALmD,CAMnD;;IACAR,GAAG,CAACK,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID,CAjB8B;EAkB/BE,IAAI,eACF;IAAK,IAAI,EAAC,KAAV;IAAgB,OAAO,EAAC,aAAxB;IAAsC,KAAK,EAAC,IAA5C;IAAiD,MAAM,EAAC,IAAxD;IAAA,wBACE;MAAM,IAAI,EAAC,cAAX;MAA0B,CAAC,EAAC;IAA5B,EADF,eAEE;MAAM,IAAI,EAAC,cAAX;MAA0B,CAAC,EAAC;IAA5B,EAFF;EAAA;AAnB6B,CAA1B"
 }

package/esm/commands/index.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../Context';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
@@ -13,13 +20,6 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { ContextStore, ExecuteCommandState } from '../Context';
 export interface CommandOrchestrator {
     executeCommand(command: ICommand): void;
 }

package/esm/commands/index.js

@@ -1,10 +1,18 @@
+import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
@@ -12,16 +20,15 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { comment } from './comment';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 
-var getCommands = () => [comment, bold, italic, strikethrough, hr, title, divider, link, quote, code, codeBlock, image, divider, unorderedListCommand, orderedListCommand, checkedListCommand];
+var getCommands = () => [comment, bold, italic, strikethrough, hr, group([title1, title2, title3, title4, title5, title6], {
+  name: "title",
+  groupName: "title",
+  buttonProps: {
+    "aria-label": "Insert title",
+    title: "Insert title"
+  }
+}), divider, link, quote, code, codeBlock, image, divider, unorderedListCommand, orderedListCommand, checkedListCommand];
 
 var getExtraCommands = () => [codeEdit, codeLive, codePreview, divider, fullscreen];
 
@@ -86,7 +93,6 @@ class TextAreaCommandOrchestrator {
 
 }
 
-export { // Toolbars.
-title, title1, title2, title3, title4, title5, title6, bold, codeBlock, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, // Tool method.
+export { title, title1, title2, title3, title4, title5, title6, bold, codeBlock, italic, strikethrough, hr, group, divider, link, quote, code, image, unorderedListCommand, orderedListCommand, checkedListCommand, codeEdit, codeLive, codePreview, fullscreen, // Tool method.
 getCommands, getExtraCommands, getStateFromTextArea, TextAreaCommandOrchestrator, TextAreaTextApi };
 //# sourceMappingURL=index.js.map

package/esm/commands/index.js.map

@@ -1,16 +1,26 @@
 {
   "version": 3,
   "names": [
+    "insertTextAtPosition",
     "bold",
     "code",
     "codeBlock",
+    "comment",
+    "divider",
+    "fullscreen",
+    "group",
+    "hr",
+    "image",
     "italic",
     "link",
-    "unorderedListCommand",
-    "orderedListCommand",
     "checkedListCommand",
+    "orderedListCommand",
+    "unorderedListCommand",
+    "codeEdit",
+    "codeLive",
+    "codePreview",
     "quote",
-    "hr",
+    "strikethrough",
     "title",
     "title1",
     "title2",
@@ -18,17 +28,10 @@
     "title4",
     "title5",
     "title6",
-    "comment",
-    "group",
-    "divider",
-    "codePreview",
-    "codeEdit",
-    "codeLive",
-    "fullscreen",
-    "image",
-    "strikethrough",
-    "insertTextAtPosition",
     "getCommands",
+    "name",
+    "groupName",
+    "buttonProps",
     "getExtraCommands",
     "getStateFromTextArea",
     "textArea",
@@ -59,7 +62,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\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';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\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  ) => 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  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  title,\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\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  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n  }\n}\n\nexport {\n  // Toolbars.\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  ) => 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  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n\t\t\tname: \"title\",\n\t\t\tgroupName: \"title\",\n\t\t\tbuttonProps: { \"aria-label\": \"Insert title\", title: \"Insert title\" },\n\t\t}),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\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  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\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\n"
   ],
-  "mappings": "AACA,SAASA,IAAT,QAAqB,QAArB;AACA,SAASC,IAAT,EAAeC,SAAf,QAAgC,QAAhC;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,oBAAT,EAA+BC,kBAA/B,EAAmDC,kBAAnD,QAA6E,QAA7E;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,EAAT,QAAmB,MAAnB;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,OAAT,QAAwB,WAAxB;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,OAAT,QAAwB,WAAxB;AACA,SAASC,WAAT,EAAsBC,QAAtB,EAAgCC,QAAhC,QAAgD,WAAhD;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,oBAAT,QAAqC,+BAArC;;AA0DA,IAAMC,WAA6B,GAAG,MAAM,CAC1CV,OAD0C,EAE1CjB,IAF0C,EAG1CG,MAH0C,EAI1CsB,aAJ0C,EAK1ChB,EAL0C,EAM1CC,KAN0C,EAO1CS,OAP0C,EAQ1Cf,IAR0C,EAS1CI,KAT0C,EAU1CP,IAV0C,EAW1CC,SAX0C,EAY1CsB,KAZ0C,EAa1CL,OAb0C,EAc1Cd,oBAd0C,EAe1CC,kBAf0C,EAgB1CC,kBAhB0C,CAA5C;;AAmBA,IAAMqB,gBAAkC,GAAG,MAAM,CAACP,QAAD,EAAWC,QAAX,EAAqBF,WAArB,EAAkCD,OAAlC,EAA2CI,UAA3C,CAAjD;;AAEA,SAASM,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;AAED,MAAMK,eAAN,CAAsB;EAGpBC,WAAW,CAACX,QAAD,EAAgC;IAAA,KAF3CA,QAE2C;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;EACEY,gBAAgB,CAACN,IAAD,EAA0B;IACxCV,oBAAoB,CAAC,KAAKI,QAAN,EAAgBM,IAAhB,CAApB;IACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;EAED;AACF;AACA;AACA;;;EACEa,iBAAiB,CAACZ,SAAD,EAAkC;IACjD,KAAKD,QAAL,CAAcc,KAAd;IACA,KAAKd,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;IACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;IACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;;AA1BmB;;AA6BtB,MAAMe,2BAAN,CAAiE;EAI/DJ,WAAW,CAACX,QAAD,EAAgC;IAAA,KAH3CA,QAG2C;IAAA,KAF3CgB,OAE2C;IACzC,KAAKhB,QAAL,GAAgBA,QAAhB;IACA,KAAKgB,OAAL,GAAe,IAAIN,eAAJ,CAAoBV,QAApB,CAAf;EACD;;EAEDiB,QAAQ,GAAG;IACT,IAAI,CAAC,KAAKjB,QAAV,EAAoB,OAAO,KAAP;IACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;;EAEDkB,cAAc,CACZC,OADY,EAEZC,QAFY,EAGZC,KAHY,EAIN;IACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBvB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKgB,OAA1D,EAAmEI,QAAnE,EAA6EC,KAA7E,CAAnB;EACD;;AApB8D;;AAuBjE,SACE;AACAzC,KAFF,EAGEC,MAHF,EAIEC,MAJF,EAKEC,MALF,EAMEC,MANF,EAOEC,MAPF,EAQEC,MARF,EASEhB,IATF,EAUEE,SAVF,EAWEC,MAXF,EAYEsB,aAZF,EAaEhB,EAbF,EAcES,KAdF,EAeEC,OAfF,EAgBEf,IAhBF,EAiBEI,KAjBF,EAkBEP,IAlBF,EAmBEuB,KAnBF,EAoBEnB,oBApBF,EAqBEC,kBArBF,EAsBEC,kBAtBF,EAuBEc,QAvBF,EAwBEC,QAxBF,EAyBEF,WAzBF,EA0BEG,UA1BF,EA2BE;AACAI,WA5BF,EA6BEC,gBA7BF,EA8BEC,oBA9BF,EA+BEgB,2BA/BF,EAgCEL,eAhCF"
+  "mappings": "AAEA,SAASA,oBAAT,QAAqC,+BAArC;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,IAAT,EAAeC,SAAf,QAAgC,QAAhC;AACA,SAASC,OAAT,QAAwB,WAAxB;AACA,SAASC,OAAT,QAAwB,WAAxB;AACA,SAASC,UAAT,QAA2B,cAA3B;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,EAAT,QAAmB,MAAnB;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,IAAT,QAAqB,QAArB;AACA,SAASC,kBAAT,EAA6BC,kBAA7B,EAAiDC,oBAAjD,QAA6E,QAA7E;AACA,SAASC,QAAT,EAAmBC,QAAnB,EAA6BC,WAA7B,QAAgD,WAAhD;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,aAAT,QAA8B,iBAA9B;AACA,SAASC,KAAT,QAAsB,SAAtB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;AACA,SAASC,MAAT,QAAuB,UAAvB;;AAyDA,IAAMC,WAA6B,GAAG,MAAM,CAC1CvB,OAD0C,EAE1CH,IAF0C,EAG1CS,MAH0C,EAI1CS,aAJ0C,EAK1CX,EAL0C,EAM1CD,KAAK,CAAC,CAACc,MAAD,EAASC,MAAT,EAAiBC,MAAjB,EAAyBC,MAAzB,EAAiCC,MAAjC,EAAyCC,MAAzC,CAAD,EAAmD;EACvDE,IAAI,EAAE,OADiD;EAEvDC,SAAS,EAAE,OAF4C;EAGvDC,WAAW,EAAE;IAAE,cAAc,cAAhB;IAAgCV,KAAK,EAAE;EAAvC;AAH0C,CAAnD,CANqC,EAW1Cf,OAX0C,EAY1CM,IAZ0C,EAa1CO,KAb0C,EAc1ChB,IAd0C,EAe1CC,SAf0C,EAgB1CM,KAhB0C,EAiB1CJ,OAjB0C,EAkB1CS,oBAlB0C,EAmB1CD,kBAnB0C,EAoB1CD,kBApB0C,CAA5C;;AAuBA,IAAMmB,gBAAkC,GAAG,MAAM,CAAChB,QAAD,EAAWC,QAAX,EAAqBC,WAArB,EAAkCZ,OAAlC,EAA2CC,UAA3C,CAAjD;;AAEA,SAAS0B,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;AAED,MAAMK,eAAN,CAAsB;EAGpBC,WAAW,CAACX,QAAD,EAAgC;IAAA,KAF3CA,QAE2C;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;EACEY,gBAAgB,CAACN,IAAD,EAA0B;IACxCvC,oBAAoB,CAAC,KAAKiC,QAAN,EAAgBM,IAAhB,CAApB;IACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;EAED;AACF;AACA;AACA;;;EACEa,iBAAiB,CAACZ,SAAD,EAAkC;IACjD,KAAKD,QAAL,CAAcc,KAAd;IACA,KAAKd,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;IACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;IACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;;AA1BmB;;AA6BtB,MAAMe,2BAAN,CAAiE;EAI/DJ,WAAW,CAACX,QAAD,EAAgC;IAAA,KAH3CA,QAG2C;IAAA,KAF3CgB,OAE2C;IACzC,KAAKhB,QAAL,GAAgBA,QAAhB;IACA,KAAKgB,OAAL,GAAe,IAAIN,eAAJ,CAAoBV,QAApB,CAAf;EACD;;EAEDiB,QAAQ,GAAG;IACT,IAAI,CAAC,KAAKjB,QAAV,EAAoB,OAAO,KAAP;IACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;EACD;;EAEDkB,cAAc,CACZC,OADY,EAEZC,QAFY,EAGZC,KAHY,EAIN;IACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBvB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKgB,OAA1D,EAAmEI,QAAnE,EAA6EC,KAA7E,CAAnB;EACD;;AApB8D;;AAuBjE,SACElC,KADF,EAEEC,MAFF,EAGEC,MAHF,EAIEC,MAJF,EAKEC,MALF,EAMEC,MANF,EAOEC,MAPF,EAQEzB,IARF,EASEE,SATF,EAUEO,MAVF,EAWES,aAXF,EAYEX,EAZF,EAaED,KAbF,EAcEF,OAdF,EAeEM,IAfF,EAgBEO,KAhBF,EAiBEhB,IAjBF,EAkBEO,KAlBF,EAmBEK,oBAnBF,EAoBED,kBApBF,EAqBED,kBArBF,EAsBEG,QAtBF,EAuBEC,QAvBF,EAwBEC,WAxBF,EAyBEX,UAzBF,EA0BE;AACAqB,WA3BF,EA4BEI,gBA5BF,EA6BEC,oBA7BF,EA8BEgB,2BA9BF,EA+BEL,eA/BF"
 }

package/lib/commands/comment.js

@@ -7,6 +7,8 @@ exports.comment = void 0;
 
 var _markdownUtils = require("../utils/markdownUtils");
 
+var _jsxRuntime = require("react/jsx-runtime");
+
 var comment = {
   name: 'comment',
   keyCommand: 'comment',
@@ -30,7 +32,20 @@ var comment = {
       start: state2.selection.end - 4 - state1.selectedText.length,
       end: state2.selection.end - 4
     });
-  }
+  },
+  icon: /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", {
+    role: "img",
+    viewBox: "0 0 512 512",
+    width: "12",
+    height: "12",
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      d: "M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      fill: "currentColor",
+      d: "M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z"
+    })]
+  })
 };
 exports.comment = comment;
 //# sourceMappingURL=comment.js.map

package/lib/commands/comment.js.map

@@ -22,13 +22,14 @@
     "selectedText",
     "start",
     "end",
-    "length"
+    "length",
+    "icon"
   ],
   "sources": [
     "../../src/commands/comment.tsx"
   ],
   "sourcesContent": [
-    "import { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const comment: ICommand = {\n  name: 'comment',\n  keyCommand: 'comment',\n  shortcuts: 'ctrlcmd+/',\n  value: '<!-- -->',\n  buttonProps: { 'aria-label': 'Insert comment (ctrl + /)', title: 'Insert comment (ctrl + /)' },\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 - 4 - state1.selectedText.length,\n      end: state2.selection.end - 4,\n    });\n  },\n};\n"
+    "import { ICommand, TextState, TextAreaTextApi } from './';\nimport { selectWord } from '../utils/markdownUtils';\n\nexport const comment: ICommand = {\n  name: 'comment',\n  keyCommand: 'comment',\n  shortcuts: 'ctrlcmd+/',\n  value: '<!-- -->',\n  buttonProps: { 'aria-label': 'Insert comment (ctrl + /)', title: 'Insert comment (ctrl + /)' },\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 - 4 - state1.selectedText.length,\n      end: state2.selection.end - 4,\n    });\n  },\n  icon: (\n    <svg role=\"img\" viewBox=\"0 0 512 512\" width=\"12\" height=\"12\">\n      <path fill=\"currentColor\" d=\"M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z\" />\n      <path fill=\"currentColor\" d=\"M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z\" />\n    </svg>\n  )\n};\n"
   ],
-  "mappings": ";;;;;;;AACA;;AAEO,IAAMA,OAAiB,GAAG;EAC/BC,IAAI,EAAE,SADyB;EAE/BC,UAAU,EAAE,SAFmB;EAG/BC,SAAS,EAAE,WAHoB;EAI/BC,KAAK,EAAE,UAJwB;EAK/BC,WAAW,EAAE;IAAE,cAAc,2BAAhB;IAA6CC,KAAK,EAAE;EAApD,CALkB;EAM/BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAA,EAAW;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAd;MAAoBC,SAAS,EAAEL,KAAK,CAACK;IAArC,CAAX,CAA1B;IACA,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAJ,CAAsBL,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMM,MAAM,GAAGP,GAAG,CAACQ,gBAAJ,gBAA6BH,MAAM,CAACI,YAApC,UAAf,CALmD,CAMnD;;IACAT,GAAG,CAACM,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID;AAjB8B,CAA1B"
+  "mappings": ";;;;;;;AACA;;;;AAEO,IAAMA,OAAiB,GAAG;EAC/BC,IAAI,EAAE,SADyB;EAE/BC,UAAU,EAAE,SAFmB;EAG/BC,SAAS,EAAE,WAHoB;EAI/BC,KAAK,EAAE,UAJwB;EAK/BC,WAAW,EAAE;IAAE,cAAc,2BAAhB;IAA6CC,KAAK,EAAE;EAApD,CALkB;EAM/BC,OAAO,EAAE,iBAACC,KAAD,EAAmBC,GAAnB,EAA4C;IACnD;IACA,IAAMC,iBAAiB,GAAG,IAAAC,yBAAA,EAAW;MAAEC,IAAI,EAAEJ,KAAK,CAACI,IAAd;MAAoBC,SAAS,EAAEL,KAAK,CAACK;IAArC,CAAX,CAA1B;IACA,IAAMC,MAAM,GAAGL,GAAG,CAACM,iBAAJ,CAAsBL,iBAAtB,CAAf,CAHmD,CAInD;;IACA,IAAMM,MAAM,GAAGP,GAAG,CAACQ,gBAAJ,gBAA6BH,MAAM,CAACI,YAApC,UAAf,CALmD,CAMnD;;IACAT,GAAG,CAACM,iBAAJ,CAAsB;MACpBI,KAAK,EAAEH,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB,CAAvB,GAA2BN,MAAM,CAACI,YAAP,CAAoBG,MADlC;MAEpBD,GAAG,EAAEJ,MAAM,CAACH,SAAP,CAAiBO,GAAjB,GAAuB;IAFR,CAAtB;EAID,CAjB8B;EAkB/BE,IAAI,eACF;IAAK,IAAI,EAAC,KAAV;IAAgB,OAAO,EAAC,aAAxB;IAAsC,KAAK,EAAC,IAA5C;IAAiD,MAAM,EAAC,IAAxD;IAAA,wBACE;MAAM,IAAI,EAAC,cAAX;MAA0B,CAAC,EAAC;IAA5B,EADF,eAEE;MAAM,IAAI,EAAC,cAAX;MAA0B,CAAC,EAAC;IAA5B,EAFF;EAAA;AAnB6B,CAA1B"
 }

package/lib/commands/index.d.ts

@@ -1,11 +1,18 @@
 import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../Context';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
@@ -13,13 +20,6 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { ContextStore, ExecuteCommandState } from '../Context';
 export interface CommandOrchestrator {
     executeCommand(command: ICommand): void;
 }

package/lib/commands/index.js

@@ -165,19 +165,35 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _InsertTextAtPosition = require("../utils/InsertTextAtPosition");
+
 var _bold = require("./bold");
 
 var _code = require("./code");
 
+var _comment = require("./comment");
+
+var _divider = require("./divider");
+
+var _fullscreen = require("./fullscreen");
+
+var _group = require("./group");
+
+var _hr = require("./hr");
+
+var _image = require("./image");
+
 var _italic = require("./italic");
 
 var _link = require("./link");
 
 var _list = require("./list");
 
+var _preview = require("./preview");
+
 var _quote = require("./quote");
 
-var _hr = require("./hr");
+var _strikeThrough = require("./strikeThrough");
 
 var _title = require("./title");
 
@@ -193,24 +209,15 @@ var _title6 = require("./title5");
 
 var _title7 = require("./title6");
 
-var _comment = require("./comment");
-
-var _group = require("./group");
-
-var _divider = require("./divider");
-
-var _preview = require("./preview");
-
-var _fullscreen = require("./fullscreen");
-
-var _image = require("./image");
-
-var _strikeThrough = require("./strikeThrough");
-
-var _InsertTextAtPosition = require("../utils/InsertTextAtPosition");
-
 var getCommands = function getCommands() {
-  return [_comment.comment, _bold.bold, _italic.italic, _strikeThrough.strikethrough, _hr.hr, _title.title, _divider.divider, _link.link, _quote.quote, _code.code, _code.codeBlock, _image.image, _divider.divider, _list.unorderedListCommand, _list.orderedListCommand, _list.checkedListCommand];
+  return [_comment.comment, _bold.bold, _italic.italic, _strikeThrough.strikethrough, _hr.hr, (0, _group.group)([_title2.title1, _title3.title2, _title4.title3, _title5.title4, _title6.title5, _title7.title6], {
+    name: "title",
+    groupName: "title",
+    buttonProps: {
+      "aria-label": "Insert title",
+      title: "Insert title"
+    }
+  }), _divider.divider, _link.link, _quote.quote, _code.code, _code.codeBlock, _image.image, _divider.divider, _list.unorderedListCommand, _list.orderedListCommand, _list.checkedListCommand];
 };
 
 exports.getCommands = getCommands;

package/lib/commands/index.js.map

@@ -7,6 +7,16 @@
     "italic",
     "strikethrough",
     "hr",
+    "group",
+    "title1",
+    "title2",
+    "title3",
+    "title4",
+    "title5",
+    "title6",
+    "name",
+    "groupName",
+    "buttonProps",
     "title",
     "divider",
     "link",
@@ -47,7 +57,7 @@
     "../../src/commands/index.ts"
   ],
   "sourcesContent": [
-    "import React from 'react';\nimport { bold } from './bold';\nimport { code, codeBlock } from './code';\nimport { italic } from './italic';\nimport { link } from './link';\nimport { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';\nimport { quote } from './quote';\nimport { hr } from './hr';\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';\nimport { comment } from './comment';\nimport { group } from './group';\nimport { divider } from './divider';\nimport { codePreview, codeEdit, codeLive } from './preview';\nimport { fullscreen } from './fullscreen';\nimport { image } from './image';\nimport { strikethrough } from './strikeThrough';\nimport { insertTextAtPosition } from '../utils/InsertTextAtPosition';\nimport { ContextStore, ExecuteCommandState } from '../Context';\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  ) => 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  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  title,\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\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  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\n  }\n}\n\nexport {\n  // Toolbars.\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  ) => 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  comment,\n  bold,\n  italic,\n  strikethrough,\n  hr,\n  group([title1, title2, title3, title4, title5, title6], {\n\t\t\tname: \"title\",\n\t\t\tgroupName: \"title\",\n\t\t\tbuttonProps: { \"aria-label\": \"Insert title\", title: \"Insert title\" },\n\t\t}),\n  divider,\n  link,\n  quote,\n  code,\n  codeBlock,\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  ): void {\n    command.execute && command.execute(getStateFromTextArea(this.textArea), this.textApi, dispatch, state);\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\n"
   ],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AA0DA,IAAMA,WAA6B,GAAG,SAAhCA,WAAgC;EAAA,OAAM,CAC1CC,gBAD0C,EAE1CC,UAF0C,EAG1CC,cAH0C,EAI1CC,4BAJ0C,EAK1CC,MAL0C,EAM1CC,YAN0C,EAO1CC,gBAP0C,EAQ1CC,UAR0C,EAS1CC,YAT0C,EAU1CC,UAV0C,EAW1CC,eAX0C,EAY1CC,YAZ0C,EAa1CL,gBAb0C,EAc1CM,0BAd0C,EAe1CC,wBAf0C,EAgB1CC,wBAhB0C,CAAN;AAAA,CAAtC;;;;AAmBA,IAAMC,gBAAkC,GAAG,SAArCA,gBAAqC;EAAA,OAAM,CAACC,iBAAD,EAAWC,iBAAX,EAAqBC,oBAArB,EAAkCZ,gBAAlC,EAA2Ca,sBAA3C,CAAN;AAAA,CAA3C;;;;AAEA,SAASC,oBAAT,CAA8BC,QAA9B,EAAwE;EACtE,OAAO;IACLC,SAAS,EAAE;MACTC,KAAK,EAAEF,QAAQ,CAACG,cADP;MAETC,GAAG,EAAEJ,QAAQ,CAACK;IAFL,CADN;IAKLC,IAAI,EAAEN,QAAQ,CAACO,KALV;IAMLC,YAAY,EAAER,QAAQ,CAACO,KAAT,CAAeE,KAAf,CAAqBT,QAAQ,CAACG,cAA9B,EAA8CH,QAAQ,CAACK,YAAvD;EANT,CAAP;AAQD;;IAEKK,e;EAGJ,yBAAYV,QAAZ,EAA2C;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;EACD;EAED;AACF;AACA;AACA;AACA;;;;;WACE,0BAAiBM,IAAjB,EAA0C;MACxC,IAAAK,0CAAA,EAAqB,KAAKX,QAA1B,EAAoCM,IAApC;MACA,OAAOP,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;IAED;AACF;AACA;AACA;;;;WACE,2BAAkBC,SAAlB,EAAmD;MACjD,KAAKD,QAAL,CAAcY,KAAd;MACA,KAAKZ,QAAL,CAAcG,cAAd,GAA+BF,SAAS,CAACC,KAAzC;MACA,KAAKF,QAAL,CAAcK,YAAd,GAA6BJ,SAAS,CAACG,GAAvC;MACA,OAAOL,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;;;;;IAGGa,2B;EAIJ,qCAAYb,QAAZ,EAA2C;IAAA;IAAA;IAAA;IACzC,KAAKA,QAAL,GAAgBA,QAAhB;IACA,KAAKc,OAAL,GAAe,IAAIJ,eAAJ,CAAoBV,QAApB,CAAf;EACD;;;;WAED,oBAAW;MACT,IAAI,CAAC,KAAKA,QAAV,EAAoB,OAAO,KAAP;MACpB,OAAOD,oBAAoB,CAAC,KAAKC,QAAN,CAA3B;IACD;;;WAED,wBACEe,OADF,EAEEC,QAFF,EAGEC,KAHF,EAIQ;MACNF,OAAO,CAACG,OAAR,IAAmBH,OAAO,CAACG,OAAR,CAAgBnB,oBAAoB,CAAC,KAAKC,QAAN,CAApC,EAAqD,KAAKc,OAA1D,EAAmEE,QAAnE,EAA6EC,KAA7E,CAAnB;IACD"
+  "mappings": "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"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uiw/react-md-editor",
-  "version": "3.18.2",
+  "version": "3.18.3",
   "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/comment.tsx

@@ -19,4 +19,10 @@ export const comment: ICommand = {
       end: state2.selection.end - 4,
     });
   },
+  icon: (
+    <svg role="img" viewBox="0 0 512 512" width="12" height="12">
+      <path fill="currentColor" d="M281 72H231oLuLFozwYpLrBi5VTa8sg7fDqKkeyD81V172H281V72Z" />
+      <path fill="currentColor" d="M287.817 501H213.333L298.667 334H438.857C438.857 334 438.857 333.021 438.857 308.308V187.875V74.6028C438.857 64.3818 438.857 67.2814 438.857 62.625C438.857 61.7594 439.31 62.625 426.667 62.625H256H73.1429C73.1429 65.4903 73.1429 77.3378 73.1429 79.8845V187.875V308.308C73.1429 311.005 73.1429 334 73.1429 334C73.1429 334 113.826 334 106.667 334H149.333H237.714V385.385H73.1429C53.7442 385.385 35.14 377.264 21.423 362.809C7.7061 348.355 0 328.75 0 308.308V77.0769C0 56.6349 7.7061 37.03 21.423 22.5753C35.14 8.12058 53.7442 0 73.1429 0H438.857C458.256 0 476.86 8.12058 490.577 22.5753C504.294 37.03 512 56.6349 512 77.0769V308.308C512 328.75 504.294 348.355 490.577 362.809C476.86 377.264 458.256 385.385 438.857 385.385H350.354L287.817 501Z" />
+    </svg>
+  )
 };

package/src/commands/index.ts

@@ -1,11 +1,20 @@
 import React from 'react';
+import { ContextStore, ExecuteCommandState } from '../Context';
+import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
 import { bold } from './bold';
 import { code, codeBlock } from './code';
+import { comment } from './comment';
+import { divider } from './divider';
+import { fullscreen } from './fullscreen';
+import { group } from './group';
+import { hr } from './hr';
+import { image } from './image';
 import { italic } from './italic';
 import { link } from './link';
-import { unorderedListCommand, orderedListCommand, checkedListCommand } from './list';
+import { checkedListCommand, orderedListCommand, unorderedListCommand } from './list';
+import { codeEdit, codeLive, codePreview } from './preview';
 import { quote } from './quote';
-import { hr } from './hr';
+import { strikethrough } from './strikeThrough';
 import { title } from './title';
 import { title1 } from './title1';
 import { title2 } from './title2';
@@ -13,15 +22,6 @@ import { title3 } from './title3';
 import { title4 } from './title4';
 import { title5 } from './title5';
 import { title6 } from './title6';
-import { comment } from './comment';
-import { group } from './group';
-import { divider } from './divider';
-import { codePreview, codeEdit, codeLive } from './preview';
-import { fullscreen } from './fullscreen';
-import { image } from './image';
-import { strikethrough } from './strikeThrough';
-import { insertTextAtPosition } from '../utils/InsertTextAtPosition';
-import { ContextStore, ExecuteCommandState } from '../Context';
 
 export interface CommandOrchestrator {
   executeCommand(command: ICommand): void;
@@ -84,7 +84,11 @@ const getCommands: () => ICommand[] = () => [
   italic,
   strikethrough,
   hr,
-  title,
+  group([title1, title2, title3, title4, title5, title6], {
+			name: "title",
+			groupName: "title",
+			buttonProps: { "aria-label": "Insert title", title: "Insert title" },
+		}),
   divider,
   link,
   quote,
@@ -163,7 +167,6 @@ class TextAreaCommandOrchestrator implements CommandOrchestrator {
 }
 
 export {
-  // Toolbars.
   title,
   title1,
   title2,
@@ -196,3 +199,4 @@ export {
   TextAreaCommandOrchestrator,
   TextAreaTextApi,
 };
+