@mdxeditor/editor 0.13.0 → 0.14.0

package/dist/gurx/react.d.ts

@@ -113,8 +113,11 @@ export interface RealmPluginParams<Spec extends AnySystemSpec, Params extends ob
     applyParamsToSystem?: (realm: TypedRealm<SystemAndDependencies<Spec>>, props: Params) => void;
     /**
      * Executed when the component mounts. Use this to register import/export visitors, add lexical nodes to the editor, etc.
+     * @param realm - the realm instance
+     * @param params - the parameters passed to the plugin in the component declaration
+     * @param pluginIds - the ids of all the plugins that are present in the component declaration
      */
-    init?: (realm: TypedRealm<SystemAndDependencies<Spec>>, props: Params) => void;
+    init?: (realm: TypedRealm<SystemAndDependencies<Spec>>, params: Params, pluginIds: string[]) => void;
 }
 /** @internal */
 export interface PluginConstructor<Spec extends AnySystemSpec, Params extends object> {

package/dist/gurx/react.js

@@ -160,10 +160,11 @@ const RealmPluginInitializer = function({
   }, []);
   const realm = React__default.useMemo(() => {
     const specs = validPlugins.map((plugin) => plugin.systemSpec);
+    const pluginIds = validPlugins.map((plugin) => plugin.id);
     const realm2 = realmFactory(...specs);
     validPlugins.forEach((plugin) => {
       var _a, _b;
-      (_a = plugin.init) == null ? void 0 : _a.call(plugin, realm2, plugin.pluginParams);
+      (_a = plugin.init) == null ? void 0 : _a.call(plugin, realm2, plugin.pluginParams, pluginIds);
       (_b = plugin.applyParamsToSystem) == null ? void 0 : _b.call(plugin, realm2, plugin.pluginParams);
     });
     return realm2;

package/dist/plugins/image/ImageEditor.js

@@ -7,6 +7,7 @@ import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { $isImageNode } from "./ImageNode.js";
 import ImageResizer from "./ImageResizer.js";
+import { imagePluginHooks } from "./index.js";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -39,6 +40,7 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
   const [selection, setSelection] = React__default.useState(null);
   const activeEditorRef = React__default.useRef(null);
   const [isResizing, setIsResizing] = React__default.useState(false);
+  const [disableImageResize] = imagePluginHooks.useEmitterValues("disableImageResize");
   const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
@@ -170,7 +172,7 @@ function ImageEditor({ src, title, nodeKey, width, height }) {
       title: title || "",
       imageRef
     }
-  )), draggable && isFocused && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
+  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
 }
 export {
   ImageEditor

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

@@ -13,6 +13,7 @@ import type { SystemSpec, Realm, RealmNode, PluginConstructor, TypedRealm, Value
 import type { RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode, LexicalCommand,  LexicalEditor } from 'lexical';
 import { CreateImageNodeOptions } from './ImageNode';
 export * from './ImageNode';
+export type ImageUploadHandler = ((image: File) => Promise<string>) | null;
 /** @internal */
 export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     activeEditor: RealmNode<LexicalEditor | null>;
@@ -115,13 +116,15 @@ export declare const imageSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
 }]) => {
-    imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+    imageUploadHandler: RealmNode<ImageUploadHandler>;
     imageAutocompleteSuggestions: RealmNode<string[]>;
+    disableImageResize: RealmNode<boolean>;
     insertImage: RealmNode<string>;
 }>;
 interface ImagePluginParams {
-    imageUploadHandler: (image: File) => Promise<string>;
+    imageUploadHandler?: ImageUploadHandler;
     imageAutocompleteSuggestions?: string[];
+    disableImageResize?: boolean;
 }
 export declare const 
 /** @internal */
@@ -226,15 +229,17 @@ imagePlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
 }]) => {
-    imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+    imageUploadHandler: RealmNode<ImageUploadHandler>;
     imageAutocompleteSuggestions: RealmNode<string[]>;
+    disableImageResize: RealmNode<boolean>;
     insertImage: RealmNode<string>;
 }>, ImagePluginParams>, 
 /** @internal */
 imagePluginHooks: {
     useRealmContext: () => TypedRealm<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -287,9 +292,10 @@ imagePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     }>;
-    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" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "insertImage">(key: K, callback: (value: ValueForKey<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+    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" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage">(key: K, callback: (value: ValueForKey<{
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -343,8 +349,9 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     }, K>) => void) => void;
     useEmitterValues: <K_1 extends SystemKeys<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -397,8 +404,9 @@ imagePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     }>>(...keys: K_1) => ValuesForKeys<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -452,8 +460,9 @@ imagePluginHooks: {
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     }, K_1>;
     usePubKeys: () => (values: SystemDict<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;
@@ -506,9 +515,10 @@ imagePluginHooks: {
         convertSelectionToNode: RealmNode<() => ElementNode>;
         insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
     }>) => 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" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "insertImage">(key: K_2) => (value: ValueForKey<{
-        imageUploadHandler: RealmNode<(image: File) => Promise<string>>;
+    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" | "composerChildren" | "addComposerChild" | "topAreaChildren" | "addTopAreaChild" | "nestedEditorChildren" | "addNestedEditorChild" | "editorWrappers" | "addEditorWrapper" | "currentFormat" | "editorInFocus" | "applyFormat" | "currentBlockType" | "applyBlockType" | "convertSelectionToNode" | "insertDecoratorNode" | "imageUploadHandler" | "imageAutocompleteSuggestions" | "disableImageResize" | "insertImage">(key: K_2) => (value: ValueForKey<{
+        imageUploadHandler: RealmNode<ImageUploadHandler>;
         imageAutocompleteSuggestions: RealmNode<string[]>;
+        disableImageResize: RealmNode<boolean>;
         insertImage: RealmNode<string>;
     } & {
         activeEditor: RealmNode<LexicalEditor | null>;

package/dist/plugins/image/index.js

@@ -11,9 +11,8 @@ const imageSystem = system(
   (r, [{ rootEditor }]) => {
     const insertImage = r.node();
     const imageAutocompleteSuggestions = r.node([]);
-    const imageUploadHandler = r.node((_) => {
-      throw new Error("Image upload handling is not implemented");
-    });
+    const disableImageResize = r.node(false);
+    const imageUploadHandler = 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: "" });
@@ -36,6 +35,7 @@ const imageSystem = system(
         },
         COMMAND_PRIORITY_EDITOR
       );
+      const theUploadHandler = r.getValue(imageUploadHandler);
       editor == null ? void 0 : editor.registerCommand(
         DRAGSTART_COMMAND,
         (event) => {
@@ -57,6 +57,9 @@ const imageSystem = system(
         },
         COMMAND_PRIORITY_HIGH
       );
+      if (theUploadHandler === null) {
+        return;
+      }
       editor == null ? void 0 : editor.registerCommand(
         PASTE_COMMAND,
         (event) => {
@@ -82,16 +85,12 @@ const imageSystem = system(
     return {
       imageUploadHandler,
       imageAutocompleteSuggestions,
+      disableImageResize,
       insertImage
     };
   },
   [coreSystem]
 );
-const defaultParams = {
-  imageUploadHandler: () => {
-    throw new Error("Image upload handling is not implemented");
-  }
-};
 const [
   /** @internal */
   imagePlugin,
@@ -100,9 +99,10 @@ const [
 ] = realmPlugin({
   id: "image",
   systemSpec: imageSystem,
-  applyParamsToSystem: (realm, params = defaultParams) => {
-    realm.pubKey("imageUploadHandler", params.imageUploadHandler);
-    realm.pubKey("imageAutocompleteSuggestions", params.imageAutocompleteSuggestions || []);
+  applyParamsToSystem: (realm, params) => {
+    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));
   },
   init: (realm) => {
     realm.pubKey("addImportVisitor", MdastImageVisitor);
@@ -164,18 +164,20 @@ function onDrop(event, editor, imageUploadHandler) {
   let cbPayload = Array.from(((_a = event.dataTransfer) == null ? void 0 : _a.items) || []);
   cbPayload = cbPayload.filter((i) => /image/.test(i.type));
   if (cbPayload.length > 0) {
-    event.preventDefault();
-    Promise.all(cbPayload.map((image) => imageUploadHandler(image.getAsFile()))).then((urls) => {
-      urls.forEach((url) => {
-        editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
-          src: url,
-          altText: ""
+    if (imageUploadHandler !== null) {
+      event.preventDefault();
+      Promise.all(cbPayload.map((image) => imageUploadHandler(image.getAsFile()))).then((urls) => {
+        urls.forEach((url) => {
+          editor.dispatchCommand(INSERT_IMAGE_COMMAND, {
+            src: url,
+            altText: ""
+          });
         });
+      }).catch((e) => {
+        throw e;
       });
-    }).catch((e) => {
-      throw e;
-    });
-    return true;
+      return true;
+    }
   }
   const node = getImageNodeInSelection();
   if (!node) {

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

@@ -1,34 +1,58 @@
-import { CODE, TRANSFORMERS } from "@lexical/markdown";
+import { HEADING, 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 { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin.js";
 import React__default from "react";
 import { CodeBlockNode, $createCodeBlockNode } from "../codeblock/CodeBlockNode.js";
 import { coreSystem } from "../core/index.js";
 import { realmPlugin } from "../../gurx/react.js";
 import { system } from "../../gurx/realmFactory.js";
-function patchMarkdownTransformers(transformers) {
-  const transformersCopy = [...transformers];
-  const codeTransformer = transformersCopy.find((t) => t === CODE);
-  const codeTransformerCopy = {
-    ...codeTransformer,
-    dependencies: [CodeBlockNode],
-    replace: (parentNode, _children, match) => {
-      const codeBlockNode = $createCodeBlockNode({ code: "", language: match ? match[1] : "", meta: "" });
-      parentNode.replace(codeBlockNode);
-      setTimeout(() => codeBlockNode.select(), 80);
-    }
-  };
-  transformersCopy.splice(transformersCopy.indexOf(codeTransformer), 1, codeTransformerCopy);
-  return transformersCopy;
-}
 const [markdownShortcutPlugin] = realmPlugin({
   id: "markdown-shortcut",
-  dependencies: ["lists", "headings", "codeblock", "quote"],
+  dependencies: [],
   systemSpec: system((_) => ({}), [coreSystem]),
-  init: (realm) => {
-    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers: patchMarkdownTransformers(TRANSFORMERS) }));
-    realm.pubKey("addNestedEditorChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers: patchMarkdownTransformers(TRANSFORMERS) }));
+  init: (realm, _, pluginIds) => {
+    const transformers = pickTransformersForActivePlugins(pluginIds);
+    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
+    realm.pubKey("addNestedEditorChild", () => /* @__PURE__ */ React__default.createElement(MarkdownShortcutPlugin, { transformers }));
   }
 });
+function pickTransformersForActivePlugins(pluginIds) {
+  const transformers = [
+    BOLD_ITALIC_STAR,
+    BOLD_ITALIC_UNDERSCORE,
+    BOLD_STAR,
+    BOLD_UNDERSCORE,
+    INLINE_CODE,
+    ITALIC_STAR,
+    ITALIC_UNDERSCORE
+    // HIGHLIGHT,
+    // STRIKETHROUGH
+  ];
+  if (pluginIds.includes("headings")) {
+    transformers.push(HEADING);
+  }
+  if (pluginIds.includes("quote")) {
+    transformers.push(QUOTE);
+  }
+  if (pluginIds.includes("link")) {
+    transformers.push(LINK);
+  }
+  if (pluginIds.includes("lists")) {
+    transformers.push(ORDERED_LIST, UNORDERED_LIST);
+  }
+  if (pluginIds.includes("codeblock")) {
+    const codeTransformerCopy = {
+      ...CODE,
+      dependencies: [CodeBlockNode],
+      replace: (parentNode, _children, match) => {
+        const codeBlockNode = $createCodeBlockNode({ code: "", language: match ? match[1] : "", meta: "" });
+        parentNode.replace(codeBlockNode);
+        setTimeout(() => codeBlockNode.select(), 80);
+      }
+    };
+    transformers.push(codeTransformerCopy);
+  }
+  return transformers;
+}
 export {
   markdownShortcutPlugin
 };

package/package.json

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