@mdxeditor/editor 0.21.1 → 0.22.1

package/dist/plugins/core/MdastBreakVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastBreakVisitor: MdastImportVisitor<Mdast.Paragraph>;

package/dist/plugins/core/MdastBreakVisitor.js

@@ -0,0 +1,10 @@
+import { $createLineBreakNode } from "lexical";
+const MdastBreakVisitor = {
+  testNode: "break",
+  visitNode: function({ lexicalParent }) {
+    lexicalParent.append($createLineBreakNode());
+  }
+};
+export {
+  MdastBreakVisitor
+};

package/dist/plugins/core/index.js

@@ -17,6 +17,7 @@ import { MdastTextVisitor } from "./MdastTextVisitor.js";
 import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { noop } from "../../utils/fp.js";
 import { controlOrMeta } from "../../utils/detectMac.js";
+import { MdastBreakVisitor } from "./MdastBreakVisitor.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
 const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
@@ -384,6 +385,7 @@ const [
     realm.pubKey("addImportVisitor", MdastTextVisitor);
     realm.pubKey("addImportVisitor", MdastFormattingVisitor);
     realm.pubKey("addImportVisitor", MdastInlineCodeVisitor);
+    realm.pubKey("addImportVisitor", MdastBreakVisitor);
     realm.pubKey("addLexicalNode", ParagraphNode);
     realm.pubKey("addLexicalNode", TextNode);
     realm.pubKey("addExportVisitor", LexicalRootVisitor);

package/dist/plugins/image/ImageEditor.d.ts

@@ -6,4 +6,4 @@ export interface ImageEditorProps {
     width: number | 'inherit';
     height: number | 'inherit';
 }
-export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element;
+export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element | null;

package/dist/plugins/image/ImageEditor.js

@@ -41,6 +41,8 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
   const activeEditorRef = React__default.useRef(null);
   const [isResizing, setIsResizing] = React__default.useState(false);
   const [disableImageResize] = imagePluginHooks.useEmitterValues("disableImageResize");
+  const [imagePreviewHandler] = imagePluginHooks.useEmitterValues("imagePreviewHandler");
+  const [imageSource, setImageSource] = React__default.useState(null);
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -87,6 +89,17 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
     },
     [editor, setSelected]
   );
+  React__default.useEffect(() => {
+    if (imagePreviewHandler) {
+      const callPreviewHandler = async () => {
+        const updatedSrc = await imagePreviewHandler(src);
+        setImageSource(updatedSrc);
+      };
+      callPreviewHandler().catch(console.error);
+    } else {
+      setImageSource(src);
+    }
+  }, [src, imagePreviewHandler]);
   React__default.useEffect(() => {
     let isMounted = true;
     const unregister = mergeRegister(
@@ -160,7 +173,7 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
   };
   const draggable = $isNodeSelection(selection);
   const isFocused = isSelected;
-  return /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement("div", { className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement("div", { draggable }, /* @__PURE__ */ React__default.createElement(
+  return imageSource !== null ? /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement("div", { className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement("div", { draggable }, /* @__PURE__ */ React__default.createElement(
     LazyImage,
     {
       width,
@@ -168,11 +181,11 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
       className: classNames({
         [styles.focusedImage]: isFocused
       }),
-      src,
+      src: imageSource,
       title: title || "",
       imageRef
     }
-  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
+  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }))) : null;
 }
 export {
   ImageEditor

package/dist/plugins/image/LexicalImageVisitor.js

@@ -10,7 +10,6 @@ const LexicalImageVisitor = {
       if (lexicalNode.getWidth() !== "inherit") {
         img.width = lexicalNode.getWidth();
       }
-      img.src = lexicalNode.getSrc();
       if (lexicalNode.getAltText()) {
         img.alt = lexicalNode.getAltText();
       }
@@ -19,7 +18,7 @@ const LexicalImageVisitor = {
       }
       actions.appendToParent(mdastParent, {
         type: "html",
-        value: img.outerHTML.replace(/>$/, "/>")
+        value: img.outerHTML.replace(/>$/, ` src="${lexicalNode.getSrc()}" />`)
       });
     } else {
       actions.appendToParent(mdastParent, {

package/dist/plugins/image/index.d.ts

@@ -14,6 +14,7 @@ import type { RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, D
 import { CreateImageNodeOptions } from './ImageNode';
 export * from './ImageNode';
 export type ImageUploadHandler = ((image: File) => Promise<string>) | null;
+export type ImagePreviewHandler = ((imageSource: string) => Promise<string>) | null;
 /** @internal */
 export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
@@ -124,11 +125,13 @@ export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     imageAutocompleteSuggestions: RealmNode<string[]>;
     disableImageResize: RealmNode<boolean>;
     insertImage: RealmNode<string>;
+    imagePreviewHandler: RealmNode<ImagePreviewHandler>;
 }>;
 interface ImagePluginParams {
     imageUploadHandler?: ImageUploadHandler;
     imageAutocompleteSuggestions?: string[];
     disableImageResize?: boolean;
+    imagePreviewHandler?: ImagePreviewHandler;
 }
 export declare const 
 /** @internal */
@@ -241,6 +244,7 @@ imagePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     imageAutocompleteSuggestions: RealmNode<string[]>;
     disableImageResize: RealmNode<boolean>;
     insertImage: RealmNode<string>;
+    imagePreviewHandler: RealmNode<ImagePreviewHandler>;
 }>, ImagePluginParams>, 
 /** @internal */
 imagePluginHooks: {
@@ -249,6 +253,7 @@ imagePluginHooks: {
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -302,11 +307,12 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>;
-    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage">(key: K, callback: (value: ValueForKey<{
+    useEmitter: <K extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K, callback: (value: ValueForKey<{
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -365,6 +371,7 @@ imagePluginHooks: {
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -422,6 +429,7 @@ imagePluginHooks: {
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -480,6 +488,7 @@ imagePluginHooks: {
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;
@@ -533,11 +542,12 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
         onBlur: RealmNode<FocusEvent>;
     }>) => void;
-    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage">(key: K_2) => (value: ValueForKey<{
+    usePublisher: <K_2 extends "jsxComponentDescriptors" | "jsxIsAvailable" | "toMarkdownOptions" | "toMarkdownExtensions" | "mdastExtensions" | "syntaxExtensions" | "markdown" | "activeEditor" | "inFocus" | "historyState" | "currentSelection" | "initialRootEditorState" | "rootEditor" | "createRootEditorSubscription" | "createActiveEditorSubscription" | "importVisitors" | "usedLexicalNodes" | "addImportVisitor" | "addLexicalNode" | "addSyntaxExtension" | "addMdastExtension" | "addToMarkdownExtension" | "addExportVisitor" | "exportVisitors" | "initialMarkdown" | "setMarkdown" | "editorRootElementRef" | "contentEditableClassName" | "placeholder" | "autoFocus" | "readOnly" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "onBlur" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage" | "imagePreviewHandler">(key: K_2) => (value: ValueForKey<{
         imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
         disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
+        imagePreviewHandler: RealmNode<ImagePreviewHandler>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
         inFocus: RealmNode<boolean>;

package/dist/plugins/image/index.js

@@ -13,6 +13,7 @@ const imageSystem = system(
     const imageAutocompleteSuggestions = r.node([]);
     const disableImageResize = r.node(false);
     const imageUploadHandler = r.node(null);
+    const imagePreviewHandler = r.node(null);
     r.sub(r.pipe(insertImage, r.o.withLatestFrom(rootEditor)), ([src, theEditor]) => {
       theEditor == null ? void 0 : theEditor.update(() => {
         const imageNode = $createImageNode({ altText: "", src, title: "" });
@@ -86,7 +87,8 @@ const imageSystem = system(
       imageUploadHandler,
       imageAutocompleteSuggestions,
       disableImageResize,
-      insertImage
+      insertImage,
+      imagePreviewHandler
     };
   },
   [coreSystem]
@@ -103,6 +105,7 @@ const [
     realm.pubKey("imageUploadHandler", (params == null ? void 0 : params.imageUploadHandler) || null);
     realm.pubKey("imageAutocompleteSuggestions", (params == null ? void 0 : params.imageAutocompleteSuggestions) || []);
     realm.pubKey("disableImageResize", Boolean(params == null ? void 0 : params.disableImageResize));
+    realm.pubKey("imagePreviewHandler", (params == null ? void 0 : params.imagePreviewHandler) || null);
   },
   init: (realm) => {
     realm.pubKey("addImportVisitor", MdastImageVisitor);

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.21.1",
+  "version": "0.22.1",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",