@mdxeditor/editor 0.10.0 → 0.11.0

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

@@ -0,0 +1,118 @@
+import type { RefObject, ComponentType, ReactNode } from 'react';
+import type { LexicalVisitor } from '../../exportMarkdownFromLexical';
+import type { Options } from 'mdast-util-to-markdown';
+import type { Config } from 'mdast-util-from-markdown/lib';
+import type { Extension } from 'micromark-util-types';
+import type { Content } from 'mdast';
+import type { MdastImportVisitor } from '../../importMarkdownToLexical';
+import type { EditorSubscription, EditorInFocus, BlockType } from '../core';
+import type { InitialEditorStateType } from '@lexical/react/LexicalComposer';
+import type { JsxComponentDescriptor } from '../jsx';
+import type { HistoryState } from '@lexical/history';
+import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
+import type { SystemSpec, Realm, RealmNode, PluginConstructor } from '../../gurx';
+/// <reference types="react" />
+/**
+ * @internal
+ */
+export declare const headingsSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}>], (_: Realm) => {}>;
+/**
+ * @internal
+ */
+export declare const headingsPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}>], (_: Realm) => {}>, object>;

package/dist/plugins/headings/index.js

@@ -0,0 +1,20 @@
+import { coreSystem } from "../core/index.js";
+import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
+import { HeadingNode } from "@lexical/rich-text";
+import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const headingsSystem = system((_) => ({}), [coreSystem]);
+const [headingsPlugin] = realmPlugin({
+  id: "headings",
+  systemSpec: headingsSystem,
+  init: (realm) => {
+    realm.pubKey("addImportVisitor", MdastHeadingVisitor);
+    realm.pubKey("addLexicalNode", HeadingNode);
+    realm.pubKey("addExportVisitor", LexicalHeadingVisitor);
+  }
+});
+export {
+  headingsPlugin,
+  headingsSystem
+};

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

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

package/dist/{ImageEditor-3725ebef.js → plugins/image/ImageEditor.js}

@@ -1,46 +1,12 @@
-import React__default, { useRef, useState, useCallback, useEffect, Suspense } from "react";
+import React__default from "react";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
 import { mergeRegister } from "@lexical/utils";
 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 { $ as $isImageNode, s as styles } from "./index-d34aa66b.js";
+import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
-import "@lexical/react/LexicalComposer";
-import "@lexical/react/LexicalContentEditable";
-import "@lexical/react/LexicalErrorBoundary";
-import "@lexical/react/LexicalHorizontalRulePlugin";
-import "@lexical/react/LexicalLinkPlugin";
-import "@lexical/react/LexicalListPlugin";
-import "@lexical/react/LexicalRichTextPlugin";
-import "@lexical/react/LexicalTabIndentationPlugin";
-import "@lexical/code";
-import "@lexical/link";
-import "@lexical/list";
-import "@lexical/react/LexicalHorizontalRuleNode";
-import "@lexical/rich-text";
-import "mdast-util-directive";
-import "mdast-util-from-markdown";
-import "mdast-util-frontmatter";
-import "mdast-util-gfm-table";
-import "mdast-util-mdx";
-import "micromark-extension-directive";
-import "micromark-extension-frontmatter";
-import "micromark-extension-gfm-table";
-import "micromark-extension-mdxjs";
-import "@lexical/selection";
-import "@lexical/react/LexicalHistoryPlugin";
-import "mdast-util-to-markdown";
-import "@radix-ui/react-popover";
-import "@radix-ui/react-tooltip";
-import "downshift";
-import "@lexical/markdown";
-import "@lexical/react/LexicalMarkdownShortcutPlugin";
-import "react-diff-view";
-import "unidiff";
-import "@radix-ui/react-toolbar";
-import "@radix-ui/react-select";
-import "@radix-ui/react-dialog";
-import "@lexical/react/LexicalNestedComposer";
+import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -58,19 +24,22 @@ function LazyImage({
   title,
   className,
   imageRef,
-  src
+  src,
+  width,
+  height
 }) {
   useSuspenseImage(src);
-  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false" });
+  return /* @__PURE__ */ React__default.createElement("img", { className: className || void 0, src, title, ref: imageRef, draggable: "false", width, height });
 }
-function ImageEditor({ src, title, nodeKey }) {
-  const imageRef = useRef(null);
-  const buttonRef = useRef(null);
+function ImageEditor({ src, title, 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] = useState(null);
-  const activeEditorRef = useRef(null);
-  const onDelete = useCallback(
+  const [selection, setSelection] = React__default.useState(null);
+  const activeEditorRef = React__default.useRef(null);
+  const [isResizing, setIsResizing] = React__default.useState(false);
+  const onDelete = React__default.useCallback(
     (payload) => {
       if (isSelected && $isNodeSelection($getSelection())) {
         const event = payload;
@@ -84,7 +53,7 @@ function ImageEditor({ src, title, nodeKey }) {
     },
     [isSelected, nodeKey]
   );
-  const onEnter = useCallback(
+  const onEnter = React__default.useCallback(
     (event) => {
       const latestSelection = $getSelection();
       const buttonElem = buttonRef.current;
@@ -99,7 +68,7 @@ function ImageEditor({ src, title, nodeKey }) {
     },
     [isSelected]
   );
-  const onEscape = useCallback(
+  const onEscape = React__default.useCallback(
     (event) => {
       if (buttonRef.current === event.target) {
         $setSelection(null);
@@ -116,7 +85,7 @@ function ImageEditor({ src, title, nodeKey }) {
     },
     [editor, setSelected]
   );
-  useEffect(() => {
+  React__default.useEffect(() => {
     let isMounted = true;
     const unregister = mergeRegister(
       editor.registerUpdateListener(({ editorState }) => {
@@ -136,6 +105,9 @@ function ImageEditor({ src, title, nodeKey }) {
         CLICK_COMMAND,
         (payload) => {
           const event = payload;
+          if (isResizing) {
+            return true;
+          }
           if (event.target === imageRef.current) {
             if (event.shiftKey) {
               setSelected(!isSelected);
@@ -169,12 +141,28 @@ function ImageEditor({ src, title, nodeKey }) {
       isMounted = false;
       unregister();
     };
-  }, [clearSelection, editor, isSelected, nodeKey, onDelete, onEnter, onEscape, setSelected]);
+  }, [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 /* @__PURE__ */ React__default.createElement(Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { draggable, className: styles.imageWrapper, "data-editor-block-type": "image" }, /* @__PURE__ */ React__default.createElement(
+  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(
     LazyImage,
     {
+      width,
+      height,
       className: classNames({
         [styles.focusedImage]: isFocused
       }),
@@ -182,7 +170,7 @@ function ImageEditor({ src, title, nodeKey }) {
       title: title || "",
       imageRef
     }
-  ))));
+  )), draggable && isFocused && /* @__PURE__ */ React__default.createElement(ImageResizer, { editor, imageRef, onResizeStart, onResizeEnd })));
 }
 export {
   ImageEditor

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

@@ -0,0 +1,63 @@
+/// <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;
+    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,136 @@
+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;
+  }
+  decorate(_parentEditor) {
+    return /* @__PURE__ */ React__default.createElement(ImageEditor, { src: this.getSrc(), title: this.getTitle(), nodeKey: this.getKey(), width: this.__width, height: this.__height });
+  }
+}
+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;