@mdxeditor/editor 0.0.0-development

package/dist/plugins/headings/index.js

@@ -0,0 +1,69 @@
+import { coreSystem } from "../core/index.js";
+import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
+import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { KEY_DOWN_COMMAND, $createParagraphNode, COMMAND_PRIORITY_LOW } from "lexical";
+import { controlOrMeta } from "../../utils/detectMac.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const FORMATTING_KEYS = [48, 49, 50, 51, 52, 53, 54];
+const ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+const CODE_TO_HEADING_LEVEL_MAP = {
+  49: 1,
+  50: 2,
+  51: 3,
+  52: 4,
+  53: 5,
+  54: 6
+};
+const headingsSystem = system(
+  (r, [{ createRootEditorSubscription, convertSelectionToNode }]) => {
+    const allowedHeadingLevels = r.node(ALL_HEADING_LEVELS);
+    r.pub(createRootEditorSubscription, (theRootEditor) => {
+      return theRootEditor.registerCommand(
+        KEY_DOWN_COMMAND,
+        (event) => {
+          const { keyCode, ctrlKey, metaKey, altKey } = event;
+          if (FORMATTING_KEYS.includes(keyCode) && controlOrMeta(metaKey, ctrlKey) && altKey) {
+            event.preventDefault();
+            theRootEditor.update(() => {
+              if (keyCode === 48) {
+                r.pub(convertSelectionToNode, () => $createParagraphNode());
+              } else {
+                const allowedHeadingLevelsValues = r.getValue(allowedHeadingLevels);
+                const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[keyCode];
+                if (!allowedHeadingLevelsValues.includes(requestedHeadingLevel)) {
+                  r.pub(convertSelectionToNode, () => $createHeadingNode(`h${requestedHeadingLevel}`));
+                }
+              }
+            });
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      );
+    });
+    return {
+      allowedHeadingLevels
+    };
+  },
+  [coreSystem]
+);
+const [headingsPlugin, headingsPluginHooks] = realmPlugin({
+  id: "headings",
+  systemSpec: headingsSystem,
+  applyParamsToSystem(realm, params) {
+    realm.pubKey("allowedHeadingLevels", (params == null ? void 0 : params.allowedHeadingLevels) ?? ALL_HEADING_LEVELS);
+  },
+  init: (realm) => {
+    realm.pubKey("addImportVisitor", MdastHeadingVisitor);
+    realm.pubKey("addLexicalNode", HeadingNode);
+    realm.pubKey("addExportVisitor", LexicalHeadingVisitor);
+  }
+});
+export {
+  headingsPlugin,
+  headingsPluginHooks,
+  headingsSystem
+};

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ImageDialog: React.FC;

package/dist/plugins/image/ImageDialog.js

@@ -0,0 +1,70 @@
+import * as Dialog from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import React__default from "react";
+import { useForm } from "react-hook-form";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { imagePluginHooks } from "./index.js";
+import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+const ImageDialog = () => {
+  const [imageAutocompleteSuggestions, state] = imagePluginHooks.useEmitterValues("imageAutocompleteSuggestions", "imageDialogState");
+  const saveImage = imagePluginHooks.usePublisher("saveImage");
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const closeImageDialog = imagePluginHooks.usePublisher("closeImageDialog");
+  const { register, handleSubmit, control, setValue, reset } = useForm({
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    values: state.type === "editing" ? state.initialValues : {}
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    Dialog.Root,
+    {
+      open: state.type !== "inactive",
+      onOpenChange: (open) => {
+        if (!open) {
+          closeImageDialog(true);
+          reset({ src: "", title: "", altText: "" });
+        }
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(Dialog.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Dialog.Overlay, { className: styles.dialogOverlay }), /* @__PURE__ */ React__default.createElement(
+      Dialog.Content,
+      {
+        className: styles.dialogContent,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        }
+      },
+      /* @__PURE__ */ React__default.createElement(
+        "form",
+        {
+          onSubmit: (e) => {
+            void handleSubmit(saveImage)(e);
+            reset({ src: "", title: "", altText: "" });
+            e.preventDefault();
+            e.stopPropagation();
+          },
+          className: styles.multiFieldForm
+        },
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "file" }, "Upload an image from your device:"), /* @__PURE__ */ React__default.createElement("input", { type: "file", ...register("file") })),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "src" }, "Or add an image from an URL:"), /* @__PURE__ */ React__default.createElement(
+          DownshiftAutoComplete,
+          {
+            register,
+            initialInputValue: state.type === "editing" ? state.initialValues.src || "" : "",
+            inputName: "src",
+            suggestions: imageAutocompleteSuggestions,
+            setValue,
+            control,
+            placeholder: "Select or paste an image src"
+          }
+        )),
+        /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "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" }, "Title:"), /* @__PURE__ */ React__default.createElement("input", { type: "text", ...register("title"), className: styles.textInput })),
+        /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Save", "aria-label": "Save", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement(Dialog.Close, { asChild: true }, /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel", "aria-label": "Cancel", className: classNames(styles.secondaryButton) }, "Cancel")))
+      )
+    ))
+  );
+};
+export {
+  ImageDialog
+};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface ImageEditorProps {
+    nodeKey: string;
+    src: string;
+    alt?: string;
+    title?: string;
+    width: number | 'inherit';
+    height: number | 'inherit';
+}
+export declare function ImageEditor({ src, title, alt, nodeKey, width, height }: ImageEditorProps): JSX.Element | null;

package/dist/plugins/image/ImageEditor.js

@@ -0,0 +1,227 @@
+import React__default from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext.js";
+import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection.js";
+import { mergeRegister } from "@lexical/utils";
+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 { imagePluginHooks } from "./index.js";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
+const imageCache = /* @__PURE__ */ new Set();
+function useSuspenseImage(src) {
+  if (!imageCache.has(src)) {
+    throw new Promise((resolve) => {
+      const img = new Image();
+      img.src = src;
+      img.onerror = img.onload = () => {
+        imageCache.add(src);
+        resolve(null);
+      };
+    });
+  }
+}
+function LazyImage({
+  title,
+  alt,
+  className,
+  imageRef,
+  src,
+  width,
+  height
+}) {
+  useSuspenseImage(src);
+  return /* @__PURE__ */ React__default.createElement(
+    "img",
+    {
+      className: className || void 0,
+      alt,
+      src,
+      title,
+      ref: imageRef,
+      draggable: "false",
+      width,
+      height
+    }
+  );
+}
+function ImageEditor({ src, title, alt, nodeKey, width, height }) {
+  const imageRef = React__default.useRef(null);
+  const buttonRef = React__default.useRef(null);
+  const [isSelected, setSelected, clearSelection] = useLexicalNodeSelection(nodeKey);
+  const [editor] = useLexicalComposerContext();
+  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 [imagePreviewHandler] = imagePluginHooks.useEmitterValues("imagePreviewHandler");
+  const [imageSource, setImageSource] = React__default.useState(null);
+  const openEditImageDialog = imagePluginHooks.usePublisher("openEditImageDialog");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const onDelete = React__default.useCallback(
+    (payload) => {
+      if (isSelected && $isNodeSelection($getSelection())) {
+        const event = payload;
+        event.preventDefault();
+        const node = $getNodeByKey(nodeKey);
+        if ($isImageNode(node)) {
+          node.remove();
+        }
+      }
+      return false;
+    },
+    [isSelected, nodeKey]
+  );
+  const onEnter = React__default.useCallback(
+    (event) => {
+      const latestSelection = $getSelection();
+      const buttonElem = buttonRef.current;
+      if (isSelected && $isNodeSelection(latestSelection) && latestSelection.getNodes().length === 1) {
+        if (buttonElem !== null && buttonElem !== document.activeElement) {
+          event.preventDefault();
+          buttonElem.focus();
+          return true;
+        }
+      }
+      return false;
+    },
+    [isSelected]
+  );
+  const onEscape = React__default.useCallback(
+    (event) => {
+      if (buttonRef.current === event.target) {
+        $setSelection(null);
+        editor.update(() => {
+          setSelected(true);
+          const parentRootElement = editor.getRootElement();
+          if (parentRootElement !== null) {
+            parentRootElement.focus();
+          }
+        });
+        return true;
+      }
+      return false;
+    },
+    [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(
+      editor.registerUpdateListener(({ editorState }) => {
+        if (isMounted) {
+          setSelection(editorState.read(() => $getSelection()));
+        }
+      }),
+      editor.registerCommand(
+        SELECTION_CHANGE_COMMAND,
+        (_, activeEditor) => {
+          activeEditorRef.current = activeEditor;
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        CLICK_COMMAND,
+        (payload) => {
+          const event = payload;
+          if (isResizing) {
+            return true;
+          }
+          if (event.target === imageRef.current) {
+            if (event.shiftKey) {
+              setSelected(!isSelected);
+            } else {
+              clearSelection();
+              setSelected(true);
+            }
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(
+        DRAGSTART_COMMAND,
+        (event) => {
+          if (event.target === imageRef.current) {
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      ),
+      editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW),
+      editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW)
+    );
+    return () => {
+      isMounted = false;
+      unregister();
+    };
+  }, [clearSelection, editor, isResizing, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  const onResizeEnd = (nextWidth, nextHeight) => {
+    setTimeout(() => {
+      setIsResizing(false);
+    }, 200);
+    editor.update(() => {
+      const node = $getNodeByKey(nodeKey);
+      if ($isImageNode(node)) {
+        node.setWidthAndHeight(nextWidth, nextHeight);
+      }
+    });
+  };
+  const onResizeStart = () => {
+    setIsResizing(true);
+  };
+  const draggable = $isNodeSelection(selection);
+  const isFocused = isSelected;
+  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,
+      height,
+      className: classNames({
+        [styles.focusedImage]: isFocused
+      }),
+      src: imageSource,
+      title: title || "",
+      alt: alt || "",
+      imageRef
+    }
+  )), draggable && isFocused && !disableImageResize && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd }), /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      type: "button",
+      className: classNames(styles.iconButton, styles.editImageButton),
+      title: "Edit image",
+      onClick: () => {
+        openEditImageDialog({
+          nodeKey,
+          initialValues: {
+            src: imageSource,
+            title: title || "",
+            altText: alt || ""
+          }
+        });
+      }
+    },
+    iconComponentFor("settings")
+  ))) : null;
+}
+export {
+  ImageEditor
+};

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

@@ -0,0 +1,65 @@
+/// <reference types="react" />
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { DecoratorNode } from 'lexical';
+/**
+ * A serialized representation of an {@link ImageNode}.
+ */
+export type SerializedImageNode = Spread<{
+    altText: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    src: string;
+    type: 'image';
+    version: 1;
+}, SerializedLexicalNode>;
+/**
+ * A lexical node that represents an image. Use {@link "$createImageNode"} to construct one.
+ */
+export declare class ImageNode extends DecoratorNode<JSX.Element> {
+    __src: string;
+    __altText: string;
+    __title: string | undefined;
+    __width: 'inherit' | number;
+    __height: 'inherit' | number;
+    static getType(): string;
+    static clone(node: ImageNode): ImageNode;
+    static importJSON(serializedNode: SerializedImageNode): ImageNode;
+    exportDOM(): DOMExportOutput;
+    static importDOM(): DOMConversionMap | null;
+    constructor(src: string, altText: string, title: string | undefined, width?: 'inherit' | number, height?: 'inherit' | number, key?: NodeKey);
+    exportJSON(): SerializedImageNode;
+    setWidthAndHeight(width: 'inherit' | number, height: 'inherit' | number): void;
+    createDOM(config: EditorConfig): HTMLElement;
+    updateDOM(): false;
+    getSrc(): string;
+    getAltText(): string;
+    getTitle(): string | undefined;
+    getHeight(): 'inherit' | number;
+    getWidth(): 'inherit' | number;
+    hasExplicitDimensions(): boolean;
+    setTitle(title: string | undefined): void;
+    setSrc(src: string): void;
+    setAltText(altText: string | undefined): void;
+    decorate(_parentEditor: LexicalEditor): JSX.Element;
+}
+/**
+ * The payload to create an {@link ImageNode}.
+ */
+export interface CreateImageNodeOptions {
+    altText: string;
+    width?: number;
+    height?: number;
+    title?: string;
+    key?: NodeKey;
+    src: string;
+}
+/**
+ * Creates an {@link ImageNode}.
+ * @param options - The payload to create an image. The keys map to the img tag attributes.
+ */
+export declare function $createImageNode(options: CreateImageNodeOptions): ImageNode;
+/**
+ * Retruns true if the node is an {@link ImageNode}.
+ */
+export declare function $isImageNode(node: LexicalNode | null | undefined): node is ImageNode;

package/dist/plugins/image/ImageNode.js

@@ -0,0 +1,152 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+import React__default from "react";
+import { DecoratorNode } from "lexical";
+import { ImageEditor } from "./ImageEditor.js";
+function convertImageElement(domNode) {
+  if (domNode instanceof HTMLImageElement) {
+    const { alt: altText, src, title, width, height } = domNode;
+    const node = $createImageNode({ altText, src, title, width, height });
+    return { node };
+  }
+  return null;
+}
+class ImageNode extends DecoratorNode {
+  constructor(src, altText, title, width, height, key) {
+    super(key);
+    __publicField(this, "__src");
+    __publicField(this, "__altText");
+    __publicField(this, "__title");
+    __publicField(this, "__width");
+    __publicField(this, "__height");
+    this.__src = src;
+    this.__title = title;
+    this.__altText = altText;
+    this.__width = width || "inherit";
+    this.__height = height || "inherit";
+  }
+  static getType() {
+    return "image";
+  }
+  static clone(node) {
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const { altText, title, src, width, height } = serializedNode;
+    const node = $createImageNode({
+      altText,
+      title,
+      src,
+      height,
+      width
+    });
+    return node;
+  }
+  exportDOM() {
+    const element = document.createElement("img");
+    element.setAttribute("src", this.__src);
+    element.setAttribute("alt", this.__altText);
+    if (this.__title) {
+      element.setAttribute("title", this.__title);
+    }
+    if (this.__width) {
+      element.setAttribute("width", this.__width.toString());
+    }
+    if (this.__height) {
+      element.setAttribute("height", this.__height.toString());
+    }
+    return { element };
+  }
+  static importDOM() {
+    return {
+      img: () => ({
+        conversion: convertImageElement,
+        priority: 0
+      })
+    };
+  }
+  exportJSON() {
+    return {
+      altText: this.getAltText(),
+      title: this.getTitle(),
+      height: this.__height === "inherit" ? 0 : this.__height,
+      width: this.__width === "inherit" ? 0 : this.__width,
+      src: this.getSrc(),
+      type: "image",
+      version: 1
+    };
+  }
+  setWidthAndHeight(width, height) {
+    const writable = this.getWritable();
+    writable.__width = width;
+    writable.__height = height;
+  }
+  createDOM(config) {
+    const span = document.createElement("span");
+    const theme = config.theme;
+    const className = theme.image;
+    if (className !== void 0) {
+      span.className = className;
+    }
+    return span;
+  }
+  updateDOM() {
+    return false;
+  }
+  getSrc() {
+    return this.__src;
+  }
+  getAltText() {
+    return this.__altText;
+  }
+  getTitle() {
+    return this.__title;
+  }
+  getHeight() {
+    return this.__height;
+  }
+  getWidth() {
+    return this.__width;
+  }
+  hasExplicitDimensions() {
+    return this.__width !== "inherit" || this.__height !== "inherit";
+  }
+  setTitle(title) {
+    this.getWritable().__title = title;
+  }
+  setSrc(src) {
+    this.getWritable().__src = src;
+  }
+  setAltText(altText) {
+    this.getWritable().__altText = altText ?? "";
+  }
+  decorate(_parentEditor) {
+    return /* @__PURE__ */ React__default.createElement(
+      ImageEditor,
+      {
+        src: this.getSrc(),
+        title: this.getTitle(),
+        nodeKey: this.getKey(),
+        width: this.__width,
+        height: this.__height,
+        alt: this.__altText
+      }
+    );
+  }
+}
+function $createImageNode(options) {
+  const { altText, title, src, key, width, height } = options;
+  return new ImageNode(src, altText, title, width, height, key);
+}
+function $isImageNode(node) {
+  return node instanceof ImageNode;
+}
+export {
+  $createImageNode,
+  $isImageNode,
+  ImageNode
+};

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

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/// <reference types="react" />
+import type { LexicalEditor } from 'lexical';
+export default function ImageResizer({ onResizeStart, onResizeEnd, imageRef, maxWidth, editor }: {
+    editor: LexicalEditor;
+    imageRef: {
+        current: null | HTMLElement;
+    };
+    maxWidth?: number;
+    onResizeEnd: (width: 'inherit' | number, height: 'inherit' | number) => void;
+    onResizeStart: () => void;
+}): JSX.Element;