@mdxeditor/editor 3.41.0 → 3.42.0

package/dist/defaultSvgIcons.js

@@ -35,6 +35,25 @@ const defaultSvgIcons = {
       fill: "currentColor"
     }
   )),
+  format_highlight: (
+    /* taken from from https://lucide.dev/icons/highlighter */
+    /* @__PURE__ */ React__default.createElement(
+      "svg",
+      {
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "24",
+        height: "24",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.75",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React__default.createElement("path", { d: "m9 11-6 6v3h9l3-3" }),
+      /* @__PURE__ */ React__default.createElement("path", { d: "m22 12-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4" })
+    )
+  ),
   code: /* @__PURE__ */ React__default.createElement("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React__default.createElement(
     "path",
     {

package/dist/index.d.ts

@@ -822,6 +822,7 @@ export declare const defaultSvgIcons: {
     format_bold: default_2.JSX.Element;
     format_italic: default_2.JSX.Element;
     format_underlined: default_2.JSX.Element;
+    format_highlight: default_2.JSX.Element;
     code: default_2.JSX.Element;
     strikeThrough: default_2.JSX.Element;
     superscript: default_2.JSX.Element;
@@ -1342,6 +1343,12 @@ export declare const headingsPlugin: (params?: {
     allowedHeadingLevels?: readonly HEADING_LEVEL[] | undefined;
 } | undefined) => RealmPlugin;
 
+/**
+ * A toolbar component that lets the user toggle highlight formatting.
+ * @group Toolbar Components
+ */
+export declare const HighlightToggle: default_2.FC;
+
 /* Excluded from this release type: historyState$ */
 
 /**
@@ -1356,7 +1363,7 @@ export declare const htmlTags: string[];
  */
 export declare const iconComponentFor$: NodeRef<(name: IconKey) => default_2.ReactNode>;
 
-export declare type IconKey = 'undo' | 'redo' | 'format_bold' | 'format_italic' | 'format_underlined' | 'code' | 'strikeThrough' | 'superscript' | 'subscript' | 'format_list_bulleted' | 'format_list_numbered' | 'format_list_checked' | 'link' | 'add_photo' | 'table' | 'horizontal_rule' | 'frontmatter' | 'frame_source' | 'arrow_drop_down' | 'admonition' | 'sandpack' | 'rich_text' | 'difference' | 'markdown' | 'open_in_new' | 'link_off' | 'edit' | 'content_copy' | 'more_horiz' | 'more_vert' | 'close' | 'settings' | 'delete_big' | 'delete_small' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'add_row' | 'add_column' | 'insert_col_left' | 'insert_row_above' | 'insert_row_below' | 'insert_col_right' | 'check';
+export declare type IconKey = 'undo' | 'redo' | 'format_bold' | 'format_italic' | 'format_underlined' | 'code' | 'strikeThrough' | 'superscript' | 'subscript' | 'format_list_bulleted' | 'format_list_numbered' | 'format_list_checked' | 'format_highlight' | 'link' | 'add_photo' | 'table' | 'horizontal_rule' | 'frontmatter' | 'frame_source' | 'arrow_drop_down' | 'admonition' | 'sandpack' | 'rich_text' | 'difference' | 'markdown' | 'open_in_new' | 'link_off' | 'edit' | 'content_copy' | 'more_horiz' | 'more_vert' | 'close' | 'settings' | 'delete_big' | 'delete_small' | 'format_align_center' | 'format_align_left' | 'format_align_right' | 'add_row' | 'add_column' | 'insert_col_left' | 'insert_row_above' | 'insert_row_below' | 'insert_col_right' | 'check';
 
 /**
  * Holds the autocomplete suggestions for image sources.

package/dist/index.js

@@ -34,6 +34,7 @@ import { BoldItalicUnderlineToggles, StrikeThroughSupSubToggles } from "./plugin
 import { ChangeAdmonitionType, admonitionLabelsMap } from "./plugins/toolbar/components/ChangeAdmonitionType.js";
 import { ChangeCodeMirrorLanguage } from "./plugins/toolbar/components/ChangeCodeMirrorLanguage.js";
 import { CodeToggle } from "./plugins/toolbar/components/CodeToggle.js";
+import { HighlightToggle } from "./plugins/toolbar/components/HighlightToggle.js";
 import { CreateLink } from "./plugins/toolbar/components/CreateLink.js";
 import { DiffSourceToggleWrapper } from "./plugins/toolbar/components/DiffSourceToggleWrapper.js";
 import { InsertAdmonition } from "./plugins/toolbar/components/InsertAdmonition.js";
@@ -114,6 +115,7 @@ export {
   GenericDirectiveEditor,
   GenericHTMLNode,
   GenericJsxEditor,
+  HighlightToggle,
   INSERT_IMAGE_COMMAND,
   IS_APPLE,
   IS_BOLD,

package/dist/plugins/core/LexicalTextVisitor.js

@@ -1,12 +1,12 @@
 import { $isTextNode } from "lexical";
-import { IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_ITALIC, IS_BOLD, IS_STRIKETHROUGH, IS_CODE } from "../../FormatConstants.js";
+import { IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT, IS_ITALIC, IS_BOLD, IS_STRIKETHROUGH, IS_HIGHLIGHT, IS_CODE } from "../../FormatConstants.js";
 function isMdastText(mdastNode) {
   return mdastNode.type === "text";
 }
 const JOINABLE_TAGS = ["u", "span", "sub", "sup"];
 const LexicalTextVisitor = {
   shouldJoin: (prevNode, currentNode) => {
-    if (["text", "emphasis", "strong"].includes(prevNode.type)) {
+    if (["text", "emphasis", "strong", "highlight"].includes(prevNode.type)) {
       return prevNode.type === currentNode.type;
     }
     if (prevNode.type === "mdxJsxTextElement" && // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -87,6 +87,12 @@ const LexicalTextVisitor = {
         children: []
       });
     }
+    if (prevFormat & format & IS_HIGHLIGHT) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "highlight",
+        children: []
+      });
+    }
     if (format & IS_UNDERLINE && !(prevFormat & IS_UNDERLINE)) {
       localParentNode = actions.appendToParent(localParentNode, {
         type: "mdxJsxTextElement",
@@ -129,6 +135,12 @@ const LexicalTextVisitor = {
         children: []
       });
     }
+    if (format & IS_HIGHLIGHT && !(prevFormat & IS_HIGHLIGHT)) {
+      localParentNode = actions.appendToParent(localParentNode, {
+        type: "highlight",
+        children: []
+      });
+    }
     if (format & IS_CODE) {
       actions.appendToParent(localParentNode, {
         type: "inlineCode",

package/dist/plugins/core/MdastFormattingVisitor.js

@@ -1,4 +1,4 @@
-import { IS_ITALIC, IS_BOLD, IS_CODE, IS_STRIKETHROUGH, IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../FormatConstants.js";
+import { IS_ITALIC, IS_BOLD, IS_CODE, IS_STRIKETHROUGH, IS_HIGHLIGHT, IS_UNDERLINE, IS_SUPERSCRIPT, IS_SUBSCRIPT } from "../../FormatConstants.js";
 import { $createTextNode } from "lexical";
 function buildFormattingVisitors(tag, format) {
   return [
@@ -30,6 +30,13 @@ const StrikeThroughVisitor = {
     actions.visitChildren(mdastNode, lexicalParent);
   }
 };
+const HighlightVisitor = {
+  testNode: "highlight",
+  visitNode({ mdastNode, actions, lexicalParent }) {
+    actions.addFormatting(IS_HIGHLIGHT);
+    actions.visitChildren(mdastNode, lexicalParent);
+  }
+};
 const MdCodeVisitor = {
   testNode: "inlineCode",
   visitNode({ mdastNode, actions }) {
@@ -62,6 +69,8 @@ const formattingVisitors = [
   MdCodeVisitor,
   // strikethrough
   StrikeThroughVisitor,
+  // highlight
+  HighlightVisitor,
   // superscript
   ...buildFormattingVisitors("sup", IS_SUPERSCRIPT),
   // subscript

package/dist/plugins/core/index.js

@@ -7,7 +7,9 @@ import { Cell, Signal, withLatestFrom, filter, useCellValue, scan, map } from "@
 import { createCommand, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getRoot, $setSelection, $getSelection, $insertNodes, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_CRITICAL, DecoratorNode, $createParagraphNode, FOCUS_COMMAND, BLUR_COMMAND, $isRangeSelection, createEditor, ParagraphNode, TextNode } from "lexical";
 import { gfmStrikethrough } from "micromark-extension-gfm-strikethrough";
 import { gfmStrikethroughToMarkdown, gfmStrikethroughFromMarkdown } from "mdast-util-gfm-strikethrough";
+import { highlightMarkToMarkdown, highlightMarkFromMarkdown } from "mdast-util-highlight-mark";
 import { mdxJsxToMarkdown, mdxJsxFromMarkdown } from "mdast-util-mdx-jsx";
+import { highlightMark } from "micromark-extension-highlight-mark";
 import { mdxJsx } from "micromark-extension-mdx-jsx";
 import { mdxMd } from "micromark-extension-mdx-md";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
@@ -516,9 +518,9 @@ const corePlugin = realmPlugin({
       [placeholder$]: params == null ? void 0 : params.placeholder,
       [readOnly$]: params == null ? void 0 : params.readOnly,
       [translation$]: params == null ? void 0 : params.translation,
-      [addMdastExtension$]: gfmStrikethroughFromMarkdown(),
-      [addSyntaxExtension$]: gfmStrikethrough(),
-      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown()],
+      [addMdastExtension$]: [gfmStrikethroughFromMarkdown(), highlightMarkFromMarkdown],
+      [addSyntaxExtension$]: [gfmStrikethrough(), highlightMark()],
+      [addToMarkdownExtension$]: [mdxJsxToMarkdown(), gfmStrikethroughToMarkdown(), highlightMarkToMarkdown],
       [lexicalTheme$]: (params == null ? void 0 : params.lexicalTheme) ?? lexicalTheme
     });
     r.singletonSub(markdownErrorSignal$, params == null ? void 0 : params.onError);

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

@@ -0,0 +1,28 @@
+import React__default from "react";
+import { IS_HIGHLIGHT } from "../../../FormatConstants.js";
+import { currentFormat$, iconComponentFor$, applyFormat$, useTranslation } from "../../core/index.js";
+import { MultipleChoiceToggleGroup } from "../primitives/toolbar.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const HighlightToggle = () => {
+  const [currentFormat, iconComponentFor] = useCellValues(currentFormat$, iconComponentFor$);
+  const applyFormat = usePublisher(applyFormat$);
+  const t = useTranslation();
+  const highlightIsOn = (currentFormat & IS_HIGHLIGHT) !== 0;
+  const title = highlightIsOn ? t("toolbar.removeHighlight", "Remove highlight") : t("toolbar.highlight", "Highlight");
+  return /* @__PURE__ */ React__default.createElement(
+    MultipleChoiceToggleGroup,
+    {
+      items: [
+        {
+          title,
+          contents: iconComponentFor("format_highlight"),
+          active: highlightIsOn,
+          onChange: applyFormat.bind(null, "highlight")
+        }
+      ]
+    }
+  );
+};
+export {
+  HighlightToggle
+};

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

@@ -17,6 +17,7 @@ import { ListsToggle } from "./ListsToggle.js";
 import { ShowSandpackInfo } from "./ShowSandpackInfo.js";
 import { UndoRedo } from "./UndoRedo.js";
 import { CreateLink } from "./CreateLink.js";
+import { HighlightToggle } from "./HighlightToggle.js";
 function whenInAdmonition(editorInFocus) {
   const node = editorInFocus == null ? void 0 : editorInFocus.rootNode;
   if (!node || node.getType() !== "directive") {
@@ -32,7 +33,7 @@ const KitchenSinkToolbar = () => {
         { when: (editor) => (editor == null ? void 0 : editor.editorType) === "codeblock", contents: () => /* @__PURE__ */ React__default.createElement(ChangeCodeMirrorLanguage, null) },
         { when: (editor) => (editor == null ? void 0 : editor.editorType) === "sandpack", contents: () => /* @__PURE__ */ React__default.createElement(ShowSandpackInfo, null) },
         {
-          fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(StrikeThroughSupSubToggles, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
+          fallback: () => /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(UndoRedo, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(BoldItalicUnderlineToggles, null), /* @__PURE__ */ React__default.createElement(CodeToggle, null), /* @__PURE__ */ React__default.createElement(HighlightToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(StrikeThroughSupSubToggles, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(ListsToggle, null), /* @__PURE__ */ React__default.createElement(Separator, null), /* @__PURE__ */ React__default.createElement(
             ConditionalContents,
             {
               options: [{ when: whenInAdmonition, contents: () => /* @__PURE__ */ React__default.createElement(ChangeAdmonitionType, null) }, { fallback: () => /* @__PURE__ */ React__default.createElement(BlockTypeSelect, null) }]

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.41.0",
+  "version": "3.42.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",
@@ -75,6 +75,7 @@
     "mdast-util-gfm-strikethrough": "^2.0.0",
     "mdast-util-gfm-table": "^2.0.0",
     "mdast-util-gfm-task-list-item": "^2.0.0",
+    "mdast-util-highlight-mark": "^1.2.2",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.0.0",
     "mdast-util-to-markdown": "^2.1.0",
@@ -83,6 +84,7 @@
     "micromark-extension-gfm-strikethrough": "^2.0.0",
     "micromark-extension-gfm-table": "^2.0.0",
     "micromark-extension-gfm-task-list-item": "^2.0.1",
+    "micromark-extension-highlight-mark": "^1.2.0",
     "micromark-extension-mdx-jsx": "^3.0.0",
     "micromark-extension-mdx-md": "^2.0.0",
     "micromark-extension-mdxjs": "^3.0.0",