@mdxeditor/editor 3.40.1 → 3.42.0

package/README.md

@@ -26,7 +26,7 @@ If you find a bug, check if something similar is not reported already in the [is
 
 If you're integrating the component in your commercial project and need dedicated assistance with your issues in exchange of sponsorship, [contact me over email](mailto:petyo@mdxeditor.dev).
 
-If you want to discuss ideas [join the Discord server](https://discord.gg/4q7U2Hc) or start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
+If you want to discuss ideas start a discussion in the [Discussions](https://github.com/mdx-editor/editor/discussions) section.
 
 ## License
 

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

@@ -268,6 +268,12 @@ export declare const ALL_HEADING_LEVELS: readonly [1, 2, 3, 4, 5, 6];
  */
 export declare const allowedHeadingLevels$: NodeRef<readonly HEADING_LEVEL[]>;
 
+/**
+ * Allow to set width and height of image through dialog window
+ * @group Image
+ */
+export declare const allowSetImageDimensions$: NodeRef<boolean>;
+
 /**
  * returns a function which when called always returns the passed value
  * @group Utils
@@ -311,6 +317,8 @@ export declare const applyListType$: NodeRef<"" | ListType>;
 declare interface BaseImageParameters {
     altText?: string;
     title?: string;
+    width?: number;
+    height?: number;
 }
 
 /**
@@ -814,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;
@@ -1086,6 +1095,8 @@ declare interface EditImageToolbarProps {
     initialImagePath: string | null;
     title: string;
     alt: string;
+    width?: number | 'inherit';
+    height?: number | 'inherit';
 }
 
 /**
@@ -1332,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$ */
 
 /**
@@ -1346,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.
@@ -1416,6 +1433,7 @@ export declare const imagePlugin: (params?: {
     imageAutocompleteSuggestions?: string[] | undefined;
     disableImageResize?: boolean | undefined;
     disableImageSettingsButton?: boolean | undefined;
+    allowSetImageDimensions?: boolean | undefined;
     imagePreviewHandler?: ImagePreviewHandler | undefined;
     ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
     EditImageToolbar?: FC<{}> | (() => JSX.Element) | undefined;
@@ -2441,6 +2459,8 @@ export declare const openLinkEditDialog$: NodeRef<void>;
  */
 export declare const openNewImageDialog$: NodeRef<void>;
 
+export declare const parseImageDimension: (value: string | number | undefined) => number | undefined;
+
 /* Excluded from this release type: placeholder$ */
 
 /**

package/dist/index.js

@@ -10,7 +10,7 @@ import { insertThematicBreak$, thematicBreakPlugin } from "./plugins/thematic-br
 import { applyListType$, currentListType$, listsPlugin } from "./plugins/lists/index.js";
 import { insertTable$, tablePlugin } from "./plugins/table/index.js";
 import { disableAutoLink$, linkPlugin } from "./plugins/link/index.js";
-import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlaceholder$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
+import { INSERT_IMAGE_COMMAND, allowSetImageDimensions$, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlaceholder$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, parseImageDimension, saveImage$ } from "./plugins/image/index.js";
 import { frontmatterDialogOpen$, frontmatterPlugin, hasFrontmatter$, insertFrontmatter$, removeFrontmatter$ } from "./plugins/frontmatter/index.js";
 import { quotePlugin } from "./plugins/quote/index.js";
 import { maxLengthPlugin } from "./plugins/maxlength/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,
@@ -180,6 +182,7 @@ export {
   addToMarkdownExtension$,
   addTopAreaChild$,
   admonitionLabelsMap,
+  allowSetImageDimensions$,
   allowedHeadingLevels$,
   always,
   appendCodeBlockEditorDescriptor$,
@@ -304,6 +307,7 @@ export {
   openEditImageDialog$,
   openLinkEditDialog$,
   openNewImageDialog$,
+  parseImageDimension,
   placeholder$,
   prop,
   quotePlugin,

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/image/EditImageToolbar.js

@@ -3,10 +3,11 @@ import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 import classNames from "classnames";
 import { $getNodeByKey } from "lexical";
 import React__default from "react";
-import { disableImageSettingsButton$, openEditImageDialog$ } from "./index.js";
+import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
 import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
-function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }) {
+function EditImageToolbar(props) {
+  const { nodeKey, imageSource, initialImagePath, title, alt, width, height } = props;
   const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$);
   const [editor] = useLexicalComposerContext();
   const openEditImageDialog = usePublisher(openEditImageDialog$);
@@ -40,7 +41,9 @@ function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }
           initialValues: {
             src: !initialImagePath ? imageSource : initialImagePath,
             title,
-            altText: alt
+            altText: alt,
+            width: parseImageDimension(width),
+            height: parseImageDimension(height)
           }
         });
       }

package/dist/plugins/image/ImageDialog.js

@@ -4,15 +4,16 @@ import React__default from "react";
 import { useForm } from "react-hook-form";
 import styles from "../../styles/ui.module.css.js";
 import { editorRootElementRef$, useTranslation } from "../core/index.js";
-import { imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, saveImage$, closeImageDialog$ } from "./index.js";
+import { imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, allowSetImageDimensions$, saveImage$, closeImageDialog$ } from "./index.js";
 import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
 import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const ImageDialog = () => {
-  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler] = useCellValues(
+  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler, allowSetImageDimensions] = useCellValues(
     imageAutocompleteSuggestions$,
     imageDialogState$,
     editorRootElementRef$,
-    imageUploadHandler$
+    imageUploadHandler$,
+    allowSetImageDimensions$
   );
   const saveImage = usePublisher(saveImage$);
   const closeImageDialog = usePublisher(closeImageDialog$);
@@ -21,6 +22,9 @@ const ImageDialog = () => {
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     values: state.type === "editing" ? state.initialValues : {}
   });
+  const resetFormState = () => {
+    reset({ src: "", title: "", altText: "", width: void 0, height: void 0 });
+  };
   if (state.type === "inactive")
     return null;
   return /* @__PURE__ */ React__default.createElement(
@@ -30,7 +34,7 @@ const ImageDialog = () => {
       onOpenChange: (open) => {
         if (!open) {
           closeImageDialog();
-          reset({ src: "", title: "", altText: "" });
+          resetFormState();
         }
       }
     },
@@ -50,7 +54,7 @@ const ImageDialog = () => {
             e.preventDefault();
             e.stopPropagation();
             await handleSubmit(saveImage)(e);
-            reset({ src: "", title: "", altText: "" });
+            resetFormState();
           },
           className: styles.multiFieldForm
         },
@@ -69,6 +73,7 @@ const ImageDialog = () => {
         )),
         /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "alt" }, t("uploadImage.alt", "Alt:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("altText"), className: styles.textInput })),
         /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "title" }, t("uploadImage.title", "Title:")), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
+        allowSetImageDimensions && /* @__PURE__ */ React__default.createElement("div", { className: styles.imageDimensionsContainer }, /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "width" }, t("uploadImage.width", "Width:")), /* @__PURE__ */ React__default.createElement("input", { type: "number", min: 0, ...register("width"), className: styles.textInput })), /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "height" }, t("uploadImage.height", "Height:")), /* @__PURE__ */ React__default.createElement("input", { type: "number", min: 0, ...register("height"), className: styles.textInput }))),
         /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement(
           "button",
           {

package/dist/plugins/image/ImageEditor.js

@@ -5,7 +5,7 @@ import { mergeRegister } from "@lexical/utils";
 import { useCellValues } from "@mdxeditor/gurx";
 import classNames from "classnames";
 import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTION_CHANGE_COMMAND, COMMAND_PRIORITY_LOW, CLICK_COMMAND, DRAGSTART_COMMAND, KEY_DELETE_COMMAND, KEY_BACKSPACE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND } from "lexical";
-import { imagePlaceholder$, disableImageResize$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
+import { imagePlaceholder$, disableImageResize$, allowSetImageDimensions$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
 import { readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
@@ -66,9 +66,10 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
-  const [ImagePlaceholderComponent, disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
+  const [ImagePlaceholderComponent, disableImageResize, allowSetImageDimensions, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
     imagePlaceholder$,
     disableImageResize$,
+    allowSetImageDimensions$,
     imagePreviewHandler$,
     readOnly$,
     editImageToolbarComponent$
@@ -143,6 +144,13 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
       setImageSource(src);
     }
   }, [src, imagePreviewHandler, initialImagePath]);
+  React__default.useEffect(() => {
+    if (allowSetImageDimensions && imageRef.current) {
+      const { current: image } = imageRef;
+      syncDimensionWithImageResizer(image, "width", width);
+      syncDimensionWithImageResizer(image, "height", height);
+    }
+  }, [allowSetImageDimensions, width, height]);
   React__default.useEffect(() => {
     let isMounted = true;
     const unregister = mergeRegister(
@@ -249,10 +257,19 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
       imageSource,
       initialImagePath,
       title: title ?? "",
-      alt: alt ?? ""
+      alt: alt ?? "",
+      width,
+      height
     }
   ))) : null;
 }
+const syncDimensionWithImageResizer = (image, key, value) => {
+  if (typeof value === "number") {
+    image.style[key] = `${value}px`;
+  } else {
+    image.style.removeProperty(key);
+  }
+};
 export {
   ImageEditor
 };

package/dist/plugins/image/index.js

@@ -13,7 +13,13 @@ import { MdastImageVisitor, MdastHtmlImageVisitor, MdastJsxImageVisitor } from "
 const internalInsertImage$ = Signal((r) => {
   r.sub(r.pipe(internalInsertImage$, withLatestFrom(activeEditor$)), ([values, theEditor]) => {
     theEditor == null ? void 0 : theEditor.update(() => {
-      const imageNode = $createImageNode({ altText: values.altText ?? "", src: values.src, title: values.title ?? "" });
+      const imageNode = $createImageNode({
+        altText: values.altText ?? "",
+        src: values.src,
+        title: values.title ?? "",
+        width: parseImageDimension(values.width),
+        height: parseImageDimension(values.height)
+      });
       $insertNodes([imageNode]);
       if ($isRootOrShadowRoot(imageNode.getParentOrThrow())) {
         $wrapNodeInElement(imageNode, $createParagraphNode).selectEnd();
@@ -44,8 +50,8 @@ const imageDialogState$ = Cell(
   { type: "inactive" },
   (r) => {
     r.sub(
-      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$)),
-      ([values, theEditor, imageUploadHandler, dialogState]) => {
+      r.pipe(saveImage$, withLatestFrom(activeEditor$, imageUploadHandler$, imageDialogState$, allowSetImageDimensions$)),
+      ([values, theEditor, imageUploadHandler, dialogState, allowSetImageDimensions]) => {
         const handler = dialogState.type === "editing" ? (src) => {
           theEditor == null ? void 0 : theEditor.update(() => {
             const { nodeKey } = dialogState;
@@ -53,6 +59,11 @@ const imageDialogState$ = Cell(
             imageNode.setTitle(values.title);
             imageNode.setAltText(values.altText);
             imageNode.setSrc(src);
+            if (allowSetImageDimensions) {
+              const width = parseImageDimension(values.width);
+              const height = parseImageDimension(values.height);
+              imageNode.setWidthAndHeight(width ?? "inherit", height ?? "inherit");
+            }
           });
           r.pub(imageDialogState$, { type: "inactive" });
         } : (src) => {
@@ -158,8 +169,15 @@ const closeImageDialog$ = Action((r) => {
   r.link(r.pipe(closeImageDialog$, mapTo({ type: "inactive" })), imageDialogState$);
 });
 const disableImageSettingsButton$ = Cell(false);
+const allowSetImageDimensions$ = Cell(false);
 const saveImage$ = Signal();
 const editImageToolbarComponent$ = Cell(EditImageToolbar);
+const parseImageDimension = (value) => {
+  if (typeof value === "undefined")
+    return void 0;
+  const parsed = parseInt(String(value), 10);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+};
 const imagePlugin = realmPlugin({
   init(realm, params) {
     realm.pubIn({
@@ -171,6 +189,7 @@ const imagePlugin = realmPlugin({
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [disableImageSettingsButton$]: Boolean(params == null ? void 0 : params.disableImageSettingsButton),
+      [allowSetImageDimensions$]: Boolean(params == null ? void 0 : params.allowSetImageDimensions),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
       [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
       [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
@@ -182,6 +201,7 @@ const imagePlugin = realmPlugin({
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
       [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
+      [allowSetImageDimensions$]: Boolean(params == null ? void 0 : params.allowSetImageDimensions),
       [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar,
       [imagePlaceholder$]: (params == null ? void 0 : params.imagePlaceholder) ?? ImagePlaceholder
     });
@@ -331,6 +351,7 @@ export {
   $isImageNode,
   INSERT_IMAGE_COMMAND,
   ImageNode,
+  allowSetImageDimensions$,
   closeImageDialog$,
   disableImageResize$,
   disableImageSettingsButton$,
@@ -344,5 +365,6 @@ export {
   insertImage$,
   openEditImageDialog$,
   openNewImageDialog$,
+  parseImageDimension,
   saveImage$
 };

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) }]