@mdxeditor/editor 1.7.0 → 1.8.0

package/dist/icons/format_list_checked.svg.js

@@ -0,0 +1,8 @@
+import * as React from "react";
+const SvgFormatListChecked = (props) => /* @__PURE__ */ React.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props }, /* @__PURE__ */ React.createElement("mask", { id: "mask0_592_44", style: {
+  maskType: "alpha"
+}, maskUnits: "userSpaceOnUse", x: 0, y: 0, width: 24, height: 24 }, /* @__PURE__ */ React.createElement("rect", { width: 24, height: 24, fill: "#D9D9D9" })), /* @__PURE__ */ React.createElement("g", { mask: "url(#mask0_592_44)" }, /* @__PURE__ */ React.createElement("path", { d: "M5.55 15L2 11.45L3.4 10.05L5.525 12.175L9.775 7.925L11.175 9.35L5.55 15ZM5.55 9L2 5.45L3.4 4.05L5.525 6.175L9.775 1.925L11.175 3.35L5.55 9ZM13 13V11H22V13H13ZM13 7V5H22V7H13Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M13 19V17H22V19H13Z", fill: "currentColor" }), /* @__PURE__ */ React.createElement("path", { d: "M5.55 21L2 17.45L3.4 16.05L5.525 18.175L9.775 13.925L11.175 15.35L5.55 21Z", fill: "currentColor" })));
+const CheckedListIcon = SvgFormatListChecked;
+export {
+  CheckedListIcon as default
+};

package/dist/plugins/lists/LexicalListItemVisitor.js

@@ -10,6 +10,7 @@ const LexicalListItemVisitor = {
     } else {
       const listItem = actions.appendToParent(mdastParent, {
         type: "listItem",
+        checked: lexicalNode.getChecked(),
         spread: false,
         children: [{ type: "paragraph", children: [] }]
       });

package/dist/plugins/lists/MdastListItemVisitor.js

@@ -1,8 +1,8 @@
 import { $createListItemNode } from "@lexical/list";
 const MdastListItemVisitor = {
   testNode: "listItem",
-  visitNode({ actions }) {
-    actions.addAndStepInto($createListItemNode());
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createListItemNode(mdastNode.checked ?? void 0));
   }
 };
 export {

package/dist/plugins/lists/MdastListVisitor.js

@@ -2,7 +2,9 @@ import { $createListNode, $isListItemNode, $createListItemNode } from "@lexical/
 const MdastListVisitor = {
   testNode: "list",
   visitNode: function({ mdastNode, lexicalParent, actions }) {
-    const lexicalNode = $createListNode(mdastNode.ordered ? "number" : "bullet");
+    var _a;
+    const listType = ((_a = mdastNode.children) == null ? void 0 : _a.some((e) => typeof e.checked === "boolean")) ? "check" : mdastNode.ordered ? "number" : "bullet";
+    const lexicalNode = $createListNode(listType);
     if ($isListItemNode(lexicalParent)) {
       const dedicatedParent = $createListItemNode();
       dedicatedParent.append(lexicalNode);

package/dist/plugins/lists/index.js

@@ -3,16 +3,20 @@ import { MdastListVisitor } from "./MdastListVisitor.js";
 import { MdastListItemVisitor } from "./MdastListItemVisitor.js";
 import { LexicalListVisitor } from "./LexicalListVisitor.js";
 import { LexicalListItemVisitor } from "./LexicalListItemVisitor.js";
-import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
+import { $isListNode, ListNode, INSERT_ORDERED_LIST_COMMAND, INSERT_UNORDERED_LIST_COMMAND, INSERT_CHECK_LIST_COMMAND, REMOVE_LIST_COMMAND, ListItemNode, $getListDepth, $isListItemNode } from "@lexical/list";
 import { $isRootOrShadowRoot, INDENT_CONTENT_COMMAND, COMMAND_PRIORITY_CRITICAL, $getSelection, $isRangeSelection, $isElementNode } from "lexical";
 import { TabIndentationPlugin } from "@lexical/react/LexicalTabIndentationPlugin.js";
+import { CheckListPlugin } from "@lexical/react/LexicalCheckListPlugin.js";
 import { ListPlugin } from "@lexical/react/LexicalListPlugin.js";
 import { $findMatchingParent, $getNearestNodeOfType } from "@lexical/utils";
+import { gfmTaskListItem } from "micromark-extension-gfm-task-list-item";
+import { gfmTaskListItemFromMarkdown, gfmTaskListItemToMarkdown } from "mdast-util-gfm-task-list-item";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
 const ListTypeCommandMap = /* @__PURE__ */ new Map([
   ["number", INSERT_ORDERED_LIST_COMMAND],
   ["bullet", INSERT_UNORDERED_LIST_COMMAND],
+  ["check", INSERT_CHECK_LIST_COMMAND],
   ["", REMOVE_LIST_COMMAND]
 ]);
 const listsSystem = system(
@@ -60,15 +64,19 @@ const [
   systemSpec: listsSystem,
   init: (realm) => {
     var _a;
+    realm.pubKey("addMdastExtension", gfmTaskListItemFromMarkdown);
+    realm.pubKey("addSyntaxExtension", gfmTaskListItem);
     realm.pubKey("addImportVisitor", MdastListVisitor);
     realm.pubKey("addImportVisitor", MdastListItemVisitor);
     realm.pubKey("addLexicalNode", ListItemNode);
     realm.pubKey("addLexicalNode", ListNode);
     realm.pubKey("addExportVisitor", LexicalListVisitor);
     realm.pubKey("addExportVisitor", LexicalListItemVisitor);
+    realm.pubKey("addToMarkdownExtension", gfmTaskListItemToMarkdown);
     (_a = realm.getKeyValue("rootEditor")) == null ? void 0 : _a.registerCommand(INDENT_CONTENT_COMMAND, () => !isIndentPermitted(7), COMMAND_PRIORITY_CRITICAL);
     realm.pubKey("addComposerChild", TabIndentationPlugin);
     realm.pubKey("addComposerChild", ListPlugin);
+    realm.pubKey("addComposerChild", CheckListPlugin);
   }
 });
 function getElementNodesInSelection(selection) {

package/dist/plugins/markdown-shortcut/index.js

@@ -1,4 +1,4 @@
-import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
+import { QUOTE, LINK, ORDERED_LIST, UNORDERED_LIST, CHECK_LIST, CODE, BOLD_ITALIC_STAR, BOLD_ITALIC_UNDERSCORE, BOLD_STAR, BOLD_UNDERSCORE, INLINE_CODE, ITALIC_STAR, ITALIC_UNDERSCORE } from "@lexical/markdown";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
 import React__default from "react";
 import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
@@ -69,7 +69,7 @@ function pickTransformersForActivePlugins(pluginIds, allowedHeadingLevels) {
     transformers.push(LINK);
   }
   if (pluginIds.includes("lists")) {
-    transformers.push(ORDERED_LIST, UNORDERED_LIST);
+    transformers.push(ORDERED_LIST, UNORDERED_LIST, CHECK_LIST);
   }
   if (pluginIds.includes("codeblock")) {
     const codeTransformerCopy = {

package/dist/plugins/toolbar/components/ListsToggle.js

@@ -1,6 +1,7 @@
 import React__default from "react";
 import BulletedListIcon from "../../../icons/format_list_bulleted.svg.js";
 import NumberedListIcon from "../../../icons/format_list_numbered.svg.js";
+import CheckedListIcon from "../../../icons/format_list_checked.svg.js";
 import { listsPluginHooks } from "../../lists/index.js";
 import { SingleChoiceToggleGroup } from "../primitives/toolbar.js";
 const ListsToggle = () => {
@@ -12,7 +13,8 @@ const ListsToggle = () => {
       value: currentListType || "",
       items: [
         { title: "Bulleted list", contents: /* @__PURE__ */ React__default.createElement(BulletedListIcon, null), value: "bullet" },
-        { title: "Numbered list", contents: /* @__PURE__ */ React__default.createElement(NumberedListIcon, null), value: "number" }
+        { title: "Numbered list", contents: /* @__PURE__ */ React__default.createElement(NumberedListIcon, null), value: "number" },
+        { title: "Check list", contents: /* @__PURE__ */ React__default.createElement(CheckedListIcon, null), value: "check" }
       ],
       onChange: applyListType
     }

package/dist/style.css

@@ -1445,7 +1445,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   }
 
 
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --blue1: hsl(206, 100%, 99.2%);
   --blue2: hsl(210, 100%, 98.0%);
   --blue3: hsl(209, 100%, 96.5%);
@@ -1459,7 +1459,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --blue11: hsl(211, 100%, 43.2%);
   --blue12: hsl(211, 100%, 15.0%);
 }
-._dark-theme_13nbk_1 {
+._dark-theme_arru1_1 {
   --blue1: hsl(212, 35.0%, 9.2%);
   --blue2: hsl(216, 50.0%, 11.8%);
   --blue3: hsl(214, 59.4%, 15.3%);
@@ -1473,7 +1473,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --blue11: hsl(210, 100%, 66.1%);
   --blue12: hsl(206, 98.0%, 95.8%);
 }
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --slate1: hsl(206, 30.0%, 98.8%);
   --slate2: hsl(210, 16.7%, 97.6%);
   --slate3: hsl(209, 13.3%, 95.3%);
@@ -1487,7 +1487,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --slate11: hsl(206, 6.0%, 43.5%);
   --slate12: hsl(206, 24.0%, 9.0%);
 }
-._dark-theme_13nbk_1 {
+._dark-theme_arru1_1 {
   --slate1: hsl(200, 7.0%, 8.8%);
   --slate2: hsl(195, 7.1%, 11.0%);
   --slate3: hsl(197, 6.8%, 13.6%);
@@ -1501,7 +1501,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --slate11: hsl(206, 6.0%, 63.0%);
   --slate12: hsl(210, 6.0%, 93.0%);
 }
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --grass1: hsl(116, 50.0%, 98.9%);
   --grass2: hsl(120, 60.0%, 97.1%);
   --grass3: hsl(120, 53.6%, 94.8%);
@@ -1515,7 +1515,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --grass11: hsl(133, 50.0%, 32.5%);
   --grass12: hsl(130, 30.0%, 14.9%);
 }
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --cyan1: hsl(185, 60.0%, 98.7%);
   --cyan2: hsl(185, 73.3%, 97.1%);
   --cyan3: hsl(186, 70.2%, 94.4%);
@@ -1529,7 +1529,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --cyan11: hsl(192, 85.0%, 31.0%);
   --cyan12: hsl(192, 88.0%, 12.5%);
 }
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --amber1: hsl(39, 70.0%, 99.0%);
   --amber2: hsl(40, 100%, 96.5%);
   --amber3: hsl(44, 100%, 91.7%);
@@ -1543,7 +1543,7 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --amber11: hsl(30, 100%, 34.0%);
   --amber12: hsl(20, 80.0%, 17.0%);
 }
-:root, ._light-theme_13nbk_1 {
+:root, ._light-theme_arru1_1 {
   --red1: hsl(359, 100%, 99.4%);
   --red2: hsl(359, 100%, 98.6%);
   --red3: hsl(360, 100%, 96.8%);
@@ -1557,71 +1557,131 @@ form._multiFieldForm_16b3d_1086 ._formField_16b3d_1092 {
   --red11: hsl(358, 65.0%, 48.7%);
   --red12: hsl(354, 50.0%, 14.6%);
 }
-._bold_13nbk_10 {
+._bold_arru1_10 {
   font-weight: bold;
 }
-._italic_13nbk_14 {
+._italic_arru1_14 {
   font-style: italic;
 }
-._underline_13nbk_18 {
+._underline_arru1_18 {
   text-decoration: underline;
 }
-._bold_13nbk_10 {
+._bold_arru1_10 {
     font-weight: 700
 }
-._italic_13nbk_14 {
+._italic_arru1_14 {
     font-style: italic
 }
-._underline_13nbk_18 {
+._underline_arru1_18 {
     text-decoration: underline
 }
-._strikethrough_13nbk_34 {
+._strikethrough_arru1_34 {
     text-decoration: line-through
 }
-._underlineStrikethrough_13nbk_38 {
+._underlineStrikethrough_arru1_38 {
     text-decoration: underline line-through
 }
-._subscript_13nbk_42 {
+._subscript_arru1_42 {
     font-size: .8em;
     vertical-align: sub!important
 }
-._superscript_13nbk_47 {
+._superscript_arru1_47 {
     font-size: .8em;
     vertical-align: super
 }
-._code_13nbk_52 {
+._code_arru1_52 {
     background-color: var(--baseBg);
     padding: 1px .25rem;
     font-family: var(--font-mono);
     font-size: 94%
 }
-._nestedListItem_13nbk_59 {
+._nestedListItem_arru1_59 {
   list-style:none;
 }
-._admonitionDanger_13nbk_63, ._admonitionInfo_13nbk_63, ._admonitionNote_13nbk_63, ._admonitionTip_13nbk_63, ._admonitionCaution_13nbk_63 {
+._listitem_arru1_63 {
+  margin: var(--spacing-2) 0;
+}
+._listItemChecked_arru1_67, ._listItemUnchecked_arru1_68 {
+  position: relative;
+  margin-left: 0;
+  margin-right: 0;
+  margin-inline-start: -1rem;
+  padding-left: var(--spacing-6);
+  padding-right: var(--spacing-6);
+  list-style-type: none;
+  outline: none;
+}
+._listItemChecked_arru1_67 {
+  text-decoration: line-through;
+}
+._listItemUnchecked_arru1_68:before, ._listItemChecked_arru1_67:before {
+  content: '';
+  width: var(--spacing-4);
+  height: var(--spacing-4);
+  top: 0;
+  left: 0;
+  cursor: pointer;
+  display: block;
+  background-size: cover;
+  position: absolute;
+}
+._listItemUnchecked_arru1_68[dir='rtl']:before, ._listItemChecked_arru1_67[dir='rtl']:before {
+  left: auto;
+  right: 0;
+}
+._listItemUnchecked_arru1_68:focus:before, ._listItemChecked_arru1_67:focus:before {
+  box-shadow: 0 0 0 2px var(--accentBgActive);
+  border-radius: var(--radius-small);
+}
+._listItemUnchecked_arru1_68:before {
+  border: 1px solid var(--baseBorder);
+  border-radius: var(--radius-small);
+}
+._listItemChecked_arru1_67:before {
+  border: 1px solid var(--accentBorder);
+  border-radius: var(--radius-small);
+  background-color: var(--accentSolid);
+  background-repeat: no-repeat;
+}
+._listItemChecked_arru1_67:after {
+  content: '';
+  cursor: pointer;
+  border-color: var(--baseBase);
+  border-style: solid;
+  position: absolute;
+  display: block;
+  top: var(--spacing-0_5);
+  width: var(--spacing-1);
+  left: var(--spacing-1_5);
+  right: var(--spacing-1_5);
+  height: var(--spacing-2);
+  transform: rotate(45deg);
+  border-width: 0 var(--spacing-0_5) var(--spacing-0_5) 0;
+}
+._admonitionDanger_arru1_136, ._admonitionInfo_arru1_136, ._admonitionNote_arru1_136, ._admonitionTip_arru1_136, ._admonitionCaution_arru1_136 {
   padding: var(--spacing-2);
   margin-top: var(--spacing-2);
   margin-bottom: var(--spacing-2);
   border-left: 3px solid var(--admonitionBorder);
   background-color: var(--admonitionBg);
 }
-._admonitionInfo_13nbk_63 {
+._admonitionInfo_arru1_136 {
   --admonitionBorder: var(--admonitionInfoBorder);
   --admonitionBg: var(--admonitionInfoBg);
 }
-._admonitionTip_13nbk_63 {
+._admonitionTip_arru1_136 {
   --admonitionBorder: var(--admonitionTipBorder);
   --admonitionBg: var(--admonitionTipBg);
 }
-._admonitionCaution_13nbk_63 {
+._admonitionCaution_arru1_136 {
   --admonitionBorder: var(--admonitionCautionBorder);
   --admonitionBg: var(--admonitionCautionBg);
 }
-._admonitionDanger_13nbk_63 {
+._admonitionDanger_arru1_136 {
   --admonitionBorder: var(--admonitionDangerBorder);
   --admonitionBg: var(--admonitionDangerBg);
 }
-._admonitionNote_13nbk_63 {
+._admonitionNote_arru1_136 {
   --admonitionBorder: var(--admonitionNoteBorder);
   --admonitionBg: var(--admonitionNoteBg);
 }

package/dist/styles/lexical-theme.module.css.js

@@ -1,19 +1,22 @@
-const lightTheme = "_light-theme_13nbk_1";
-const darkTheme = "_dark-theme_13nbk_1";
-const bold = "_bold_13nbk_10";
-const italic = "_italic_13nbk_14";
-const underline = "_underline_13nbk_18";
-const strikethrough = "_strikethrough_13nbk_34";
-const underlineStrikethrough = "_underlineStrikethrough_13nbk_38";
-const subscript = "_subscript_13nbk_42";
-const superscript = "_superscript_13nbk_47";
-const code = "_code_13nbk_52";
-const nestedListItem = "_nestedListItem_13nbk_59";
-const admonitionDanger = "_admonitionDanger_13nbk_63";
-const admonitionInfo = "_admonitionInfo_13nbk_63";
-const admonitionNote = "_admonitionNote_13nbk_63";
-const admonitionTip = "_admonitionTip_13nbk_63";
-const admonitionCaution = "_admonitionCaution_13nbk_63";
+const lightTheme = "_light-theme_arru1_1";
+const darkTheme = "_dark-theme_arru1_1";
+const bold = "_bold_arru1_10";
+const italic = "_italic_arru1_14";
+const underline = "_underline_arru1_18";
+const strikethrough = "_strikethrough_arru1_34";
+const underlineStrikethrough = "_underlineStrikethrough_arru1_38";
+const subscript = "_subscript_arru1_42";
+const superscript = "_superscript_arru1_47";
+const code = "_code_arru1_52";
+const nestedListItem = "_nestedListItem_arru1_59";
+const listitem = "_listitem_arru1_63";
+const listItemChecked = "_listItemChecked_arru1_67";
+const listItemUnchecked = "_listItemUnchecked_arru1_68";
+const admonitionDanger = "_admonitionDanger_arru1_136";
+const admonitionInfo = "_admonitionInfo_arru1_136";
+const admonitionNote = "_admonitionNote_arru1_136";
+const admonitionTip = "_admonitionTip_arru1_136";
+const admonitionCaution = "_admonitionCaution_arru1_136";
 const styles = {
   lightTheme,
   darkTheme,
@@ -26,6 +29,9 @@ const styles = {
   superscript,
   code,
   nestedListItem,
+  listitem,
+  listItemChecked,
+  listItemUnchecked,
   admonitionDanger,
   admonitionInfo,
   admonitionNote,
@@ -44,6 +50,9 @@ export {
   styles as default,
   italic,
   lightTheme,
+  listItemChecked,
+  listItemUnchecked,
+  listitem,
   nestedListItem,
   strikethrough,
   subscript,

package/dist/styles/lexicalTheme.js

@@ -11,6 +11,9 @@ const lexicalTheme = {
     underlineStrikethrough: styles.underlineStrikethrough
   },
   list: {
+    listitem: styles.listitem,
+    listitemChecked: styles.listItemChecked,
+    listitemUnchecked: styles.listItemUnchecked,
     nested: {
       listitem: styles.nestedListItem
     }

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -70,6 +70,7 @@
     "mdast-util-from-markdown": "^1.3.0",
     "mdast-util-frontmatter": "1.0.1",
     "mdast-util-gfm-table": "^1.0.7",
+    "mdast-util-gfm-task-list-item": "1.0.2",
     "mdast-util-mdx": "2.0.1",
     "mdast-util-mdx-jsx": "^2.1.4",
     "mdast-util-to-hast": "^12.3.0",
@@ -77,6 +78,7 @@
     "micromark-extension-directive": "2.2.0",
     "micromark-extension-frontmatter": "1.1.0",
     "micromark-extension-gfm-table": "^1.0.6",
+    "micromark-extension-gfm-task-list-item": "1.0.5",
     "micromark-extension-mdxjs": "1.0.1",
     "react-hook-form": "^7.44.2",
     "unidiff": "^1.0.2"