@mdxeditor/editor 3.29.2 → 3.30.0

package/dist/index.d.ts

@@ -1,3 +1,5 @@
+/// <reference types="react" />
+
 import { Config } from 'mdast-util-from-markdown/lib';
 import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { DecoratorNode } from 'lexical';
@@ -1068,6 +1070,20 @@ export declare const disableImageResize$: NodeRef<boolean>;
 
 export declare const disableImageSettingsButton$: NodeRef<boolean>;
 
+/**
+ * Holds the custom EditImageToolbar component.
+ * @group Image
+ */
+export declare const editImageToolbarComponent$: NodeRef<FC<EditImageToolbarProps>>;
+
+declare interface EditImageToolbarProps {
+    nodeKey: string;
+    imageSource: string;
+    initialImagePath: string | null;
+    title: string;
+    alt: string;
+}
+
 /**
  * The state of the image dialog when it is in editing an existing node.
  * @group Image
@@ -1324,7 +1340,7 @@ export declare const imageAutocompleteSuggestions$: NodeRef<string[]>;
  * Holds the current state of the image dialog.
  * @group Image
  */
-export declare const imageDialogState$: NodeRef<InactiveImageDialogState | NewImageDialogState | EditingImageDialogState>;
+export declare const imageDialogState$: NodeRef<EditingImageDialogState | InactiveImageDialogState | NewImageDialogState>;
 
 /**
  * A lexical node that represents an image. Use {@link "$createImageNode"} to construct one.
@@ -1378,6 +1394,7 @@ export declare const imagePlugin: (params?: {
     disableImageSettingsButton?: boolean | undefined;
     imagePreviewHandler?: ImagePreviewHandler | undefined;
     ImageDialog?: FC<{}> | (() => JSX.Element) | undefined;
+    EditImageToolbar?: FC<{}> | (() => JSX.Element) | undefined;
 } | undefined) => RealmPlugin;
 
 /**
@@ -2522,6 +2539,12 @@ export declare interface SandpackConfig {
     presets: SandpackPreset[];
 }
 
+export declare const SandpackEditor: ({ nodeKey, code, focusEmitter, preset }: SandpackEditorProps) => default_2.JSX.Element;
+
+export declare interface SandpackEditorProps extends CodeBlockEditorProps {
+    preset: SandpackPreset;
+}
+
 /**
  * A plugin that adds support for sandpack code blocks in the editor.
  * @group Sandpack

package/dist/index.js

@@ -10,13 +10,14 @@ 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$, imageAutocompleteSuggestions$, imageDialogState$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, saveImage$ } from "./plugins/image/index.js";
+import { INSERT_IMAGE_COMMAND, closeImageDialog$, disableImageResize$, disableImageSettingsButton$, editImageToolbarComponent$, imageAutocompleteSuggestions$, imageDialogState$, imagePlugin, imagePreviewHandler$, imageUploadHandler$, insertImage$, openEditImageDialog$, openNewImageDialog$, 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";
 import { insertJsx$, isMdastJsxNode, jsxPlugin } from "./plugins/jsx/index.js";
 import { GenericJsxEditor } from "./jsx-editors/GenericJsxEditor.js";
 import { insertSandpack$, sandpackConfig$, sandpackPlugin } from "./plugins/sandpack/index.js";
+import { SandpackEditor } from "./plugins/sandpack/SandpackEditor.js";
 import { codeBlockLanguages$, codeMirrorAutoLoadLanguageSupport$, codeMirrorExtensions$, codeMirrorPlugin, insertCodeMirror$ } from "./plugins/codemirror/index.js";
 import { COMMON_STATE_CONFIG_EXTENSIONS, CodeMirrorEditor } from "./plugins/codemirror/CodeMirrorEditor.js";
 import { appendCodeBlockEditorDescriptor$, codeBlockPlugin, defaultCodeBlockLanguage$, insertCodeBlock$ } from "./plugins/codeblock/index.js";
@@ -138,6 +139,7 @@ export {
   PropertyPopover,
   RealmWithPlugins,
   Root,
+  SandpackEditor,
   Select,
   SelectButtonTrigger,
   SelectContent,
@@ -214,6 +216,7 @@ export {
   disableAutoLink$,
   disableImageResize$,
   disableImageSettingsButton$,
+  editImageToolbarComponent$,
   editorInFocus$,
   editorRootElementRef$,
   editorWrappers$,

package/dist/plugins/image/EditImageToolbar.js

@@ -0,0 +1,53 @@
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+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 styles from "../../styles/ui.module.css.js";
+import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
+function EditImageToolbar({ nodeKey, imageSource, initialImagePath, title, alt }) {
+  const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$);
+  const [editor] = useLexicalComposerContext();
+  const openEditImageDialog = usePublisher(openEditImageDialog$);
+  const t = useTranslation();
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.editImageToolbar }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.iconButton,
+      type: "button",
+      title: t("imageEditor.deleteImage", "Delete image"),
+      disabled: readOnly,
+      onClick: (e) => {
+        e.preventDefault();
+        editor.update(() => {
+          var _a;
+          (_a = $getNodeByKey(nodeKey)) == null ? void 0 : _a.remove();
+        });
+      }
+    },
+    iconComponentFor("delete_small")
+  ), !disableImageSettingsButton && /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      className: classNames(styles.iconButton, styles.editImageButton),
+      title: t("imageEditor.editImage", "Edit image"),
+      disabled: readOnly,
+      onClick: () => {
+        openEditImageDialog({
+          nodeKey,
+          initialValues: {
+            src: !initialImagePath ? imageSource : initialImagePath,
+            title,
+            altText: alt
+          }
+        });
+      }
+    },
+    iconComponentFor("settings")
+  ));
+}
+export {
+  EditImageToolbar
+};

package/dist/plugins/image/ImageEditor.js

@@ -2,14 +2,14 @@ import React__default from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 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 { disableImageResize$, disableImageSettingsButton$, imagePreviewHandler$, openEditImageDialog$ } from "./index.js";
+import { disableImageResize$, imagePreviewHandler$, editImageToolbarComponent$ } from "./index.js";
 import styles from "../../styles/ui.module.css.js";
-import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
+import { readOnly$ } from "../core/index.js";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
-import { useCellValues, usePublisher } from "@mdxeditor/gurx";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -48,14 +48,12 @@ function LazyImage({
   );
 }
 function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
-  const [disableImageResize, disableImageSettingsButton, imagePreviewHandler, iconComponentFor, readOnly] = useCellValues(
+  const [disableImageResize, imagePreviewHandler, readOnly, EditImageToolbar] = useCellValues(
     disableImageResize$,
-    disableImageSettingsButton$,
     imagePreviewHandler$,
-    iconComponentFor$,
-    readOnly$
+    readOnly$,
+    editImageToolbarComponent$
   );
-  const openEditImageDialog = usePublisher(openEditImageDialog$);
   const imageRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
@@ -65,7 +63,6 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
   const [isResizing, setIsResizing] = React__default.useState(false);
   const [imageSource, setImageSource] = React__default.useState(null);
   const [initialImagePath, setInitialImagePath] = React__default.useState(null);
-  const t = useTranslation();
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -226,42 +223,16 @@ function ImageEditor({ src, title, alt, nodeKey, width, height, rest }) {
       alt: alt ?? "",
       imageRef
     }
-  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }), readOnly || /* @__PURE__ */ React__default.createElement("div", { className: styles.editImageToolbar }, /* @__PURE__ */ React__default.createElement(
-    "button",
+  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }), readOnly || /* @__PURE__ */ React__default.createElement(
+    EditImageToolbar,
     {
-      className: styles.iconButton,
-      type: "button",
-      title: t("imageEditor.deleteImage", "Delete image"),
-      disabled: readOnly,
-      onClick: (e) => {
-        e.preventDefault();
-        editor.update(() => {
-          var _a;
-          (_a = $getNodeByKey(nodeKey)) == null ? void 0 : _a.remove();
-        });
-      }
-    },
-    iconComponentFor("delete_small")
-  ), !disableImageSettingsButton && /* @__PURE__ */ React__default.createElement(
-    "button",
-    {
-      type: "button",
-      className: classNames(styles.iconButton, styles.editImageButton),
-      title: t("imageEditor.editImage", "Edit image"),
-      disabled: readOnly,
-      onClick: () => {
-        openEditImageDialog({
-          nodeKey,
-          initialValues: {
-            src: !initialImagePath ? imageSource : initialImagePath,
-            title: title ?? "",
-            altText: alt ?? ""
-          }
-        });
-      }
-    },
-    iconComponentFor("settings")
-  )))) : null;
+      nodeKey,
+      imageSource,
+      initialImagePath,
+      title: title ?? "",
+      alt: alt ?? ""
+    }
+  ))) : null;
 }
 export {
   ImageEditor

package/dist/plugins/image/index.js

@@ -4,6 +4,7 @@ import { $insertNodes, $isRootOrShadowRoot, $createParagraphNode, $getNodeByKey,
 import { realmPlugin } from "../../RealmWithPlugins.js";
 import { CAN_USE_DOM } from "../../utils/detectMac.js";
 import { activeEditor$, createActiveEditorSubscription$, addImportVisitor$, addLexicalNode$, addExportVisitor$, addComposerChild$ } from "../core/index.js";
+import { EditImageToolbar } from "./EditImageToolbar.js";
 import { ImageDialog } from "./ImageDialog.js";
 import { $createImageNode, ImageNode, $isImageNode } from "./ImageNode.js";
 import { LexicalImageVisitor } from "./LexicalImageVisitor.js";
@@ -156,6 +157,7 @@ const closeImageDialog$ = Action((r) => {
 });
 const disableImageSettingsButton$ = Cell(false);
 const saveImage$ = Signal();
+const editImageToolbarComponent$ = Cell(EditImageToolbar);
 const imagePlugin = realmPlugin({
   init(realm, params) {
     realm.pubIn({
@@ -167,7 +169,8 @@ 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),
-      [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null
+      [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
+      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar
     });
   },
   update(realm, params) {
@@ -175,7 +178,8 @@ const imagePlugin = realmPlugin({
       [imageUploadHandler$]: (params == null ? void 0 : params.imageUploadHandler) ?? null,
       [imageAutocompleteSuggestions$]: (params == null ? void 0 : params.imageAutocompleteSuggestions) ?? [],
       [disableImageResize$]: Boolean(params == null ? void 0 : params.disableImageResize),
-      [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null
+      [imagePreviewHandler$]: (params == null ? void 0 : params.imagePreviewHandler) ?? null,
+      [editImageToolbarComponent$]: (params == null ? void 0 : params.EditImageToolbar) ?? EditImageToolbar
     });
   }
 });
@@ -317,6 +321,7 @@ export {
   closeImageDialog$,
   disableImageResize$,
   disableImageSettingsButton$,
+  editImageToolbarComponent$,
   imageAutocompleteSuggestions$,
   imageDialogState$,
   imagePlugin,

package/package.json

@@ -11,7 +11,7 @@
     "*.css"
   ],
   "type": "module",
-  "version": "3.29.2",
+  "version": "3.30.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",