@mdxeditor/editor 0.10.0-alpha.1 → 0.10.0-alpha.3

package/dist/MDXEditor.d.ts

@@ -1,12 +1,38 @@
 import React from 'react';
 import { RealmPluginInitializer } from './gurx';
 import { ToMarkdownOptions } from './exportMarkdownFromLexical';
+/**
+ * The properties of the {@link MDXEditor} React component.
+ */
 export interface MDXEditorProps {
+    /**
+     * the CSS class to apply to the content editable element of the editor.
+     * Use this to style the various content elements like lists and blockquotes.
+     */
     contentEditableClassName?: string;
+    /**
+     * The markdown to edit. Notice that this is read only when the component is mounted.
+     * To change the component content dynamically, use the `MDXEditorMethods.setMarkdown` method.
+     */
     markdown: string;
+    /**
+     * Triggered when the editor value changes. The callback is not throttled, you can use any throttling mechanism
+     * if you intend to do auto-saving.
+     */
     onChange?: (markdown: string) => void;
+    /**
+     * The markdown options used to generate the resulting markdown.
+     * See {@link https://github.com/syntax-tree/mdast-util-to-markdown#options | the mdast-util-to-markdown docs} for the full list of options.
+     */
     toMarkdownOptions?: ToMarkdownOptions;
+    /**
+     * The plugins to use in the editor.
+     */
     plugins?: React.ComponentProps<typeof RealmPluginInitializer>['plugins'];
+    /**
+     * The class name to apply to the root component element. Use this if you want to change the editor dimensions, maximum height, etc.
+     * For a content-specific styling, Use `contentEditableClassName` property.
+     */
     className?: string;
 }
 /**
@@ -28,4 +54,7 @@ export interface MDXEditorMethods {
      */
     setMarkdown: (value: string) => void;
 }
+/**
+ * The MDXEditor React component. See {@link MDXEditorProps} for the list of properties supported and the {@link MDXEditorMethods} for the methods accessible through the ref.
+ */
 export declare const MDXEditor: React.ForwardRefExoticComponent<MDXEditorProps & React.RefAttributes<MDXEditorMethods>>;

package/dist/MDXEditor.js

@@ -62,7 +62,7 @@ const EditorRootElement = ({ children, className }) => {
   React__default.useEffect(() => {
     setEditorRootElementRef(editorRootElementRef);
   }, [editorRootElementRef, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className), ref: editorRootElementRef }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor"), ref: editorRootElementRef }, children);
 };
 const Methods = ({ mdxRef }) => {
   const realm = corePluginHooks.useRealmContext();

package/dist/directive-editors/AdmonitionDirectiveDescriptor.d.ts

@@ -1,4 +1,17 @@
 import { DirectiveDescriptor } from '../plugins/directives';
+/** @internal */
 export declare const ADMONITION_TYPES: readonly ["note", "tip", "danger", "info", "caution"];
+/** @internal */
 export type AdmonitionKind = (typeof ADMONITION_TYPES)[number];
+/**
+ * Pass this descriptor to the `directivesPlugin` `directiveDescriptors` parameter to enable {@link https://docusaurus.io/docs/markdown-features/admonitions | markdown admonitions}.
+ *
+ * @example
+ * ```tsx
+ * <MDXEditor
+ *  plugins={[
+ *   directivesPlugin({ directiveDescriptors: [ AdmonitionDirectiveDescriptor] }),
+ *  ]} />
+ * ```
+ */
 export declare const AdmonitionDirectiveDescriptor: DirectiveDescriptor;

package/dist/directive-editors/GenericDirectiveEditor.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { DirectiveEditorProps } from '../plugins/directives';
+/**
+ * A generic editor that can be used as an universal UI for any directive.
+ * Allows editing of the directive content and properties.
+ * Use this editor for the {@link DirectiveDescriptor} Editor option.
+ */
 export declare const GenericDirectiveEditor: React.FC<DirectiveEditorProps>;

package/dist/importMarkdownToLexical.js

@@ -28,7 +28,7 @@ function importMdastTreeToLexical({ root, mdastRoot, visitors }) {
       return visitor2.testNode(mdastNode);
     });
     if (!visitor) {
-      throw new Error(`no MdastImportVisitor found for ${mdastNode.type}`, {
+      throw new Error(`no MdastImportVisitor found for ${mdastNode.type} ${JSON.stringify(mdastNode)}`, {
         cause: mdastNode
       });
     }

package/dist/index.d.ts

@@ -47,3 +47,5 @@ export * from './plugins/toolbar/primitives/toolbar';
 export * from './plugins/toolbar/primitives/DialogButton';
 export * from './plugins/toolbar/primitives/TooltipWrap';
 export * from './plugins/toolbar/primitives/select';
+export * from './plugins/core/NestedLexicalEditor';
+export * from './plugins/core/PropertyPopover';

package/dist/index.js

@@ -42,6 +42,8 @@ import { Button, ButtonOrDropdownButton, ButtonWithTooltip, ConditionalContents,
 import { DialogButton } from "./plugins/toolbar/primitives/DialogButton.js";
 import { TooltipWrap } from "./plugins/toolbar/primitives/TooltipWrap.js";
 import { Select, SelectButtonTrigger, SelectContent, SelectItem, SelectTrigger } from "./plugins/toolbar/primitives/select.js";
+import { NestedEditorsContext, NestedLexicalEditor, useLexicalNodeRemove, useMdastNodeUpdater, useNestedEditorContext } from "./plugins/core/NestedLexicalEditor.js";
+import { PropertyPopover } from "./plugins/core/PropertyPopover.js";
 import { useCodeBlockEditorContext } from "./plugins/codeblock/CodeBlockNode.js";
 export {
   ADMONITION_TYPES,
@@ -72,6 +74,9 @@ export {
   ListsToggle,
   MDXEditor,
   MultipleChoiceToggleGroup,
+  NestedEditorsContext,
+  NestedLexicalEditor,
+  PropertyPopover,
   Root,
   Select,
   SelectButtonTrigger,
@@ -131,5 +136,8 @@ export {
   toolbarPlugin,
   toolbarPluginHooks,
   toolbarSystem,
-  useCodeBlockEditorContext
+  useCodeBlockEditorContext,
+  useLexicalNodeRemove,
+  useMdastNodeUpdater,
+  useNestedEditorContext
 };

package/dist/jsx-editors/GenericJsxEditor.d.ts

@@ -1,3 +1,8 @@
 import React from 'react';
 import { JsxEditorProps } from '../plugins/jsx';
+/**
+ * A generic editor that can be used as an universal UI for any JSX element.
+ * Allows editing of the element content and properties.
+ * Use this editor for the {@link JsxComponentDescriptor} Editor option.
+ */
 export declare const GenericJsxEditor: React.FC<JsxEditorProps>;

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

@@ -13,7 +13,14 @@ interface NestedEditorsContextValue<T extends Node> {
     };
     focusEmitter: VoidEmitter;
 }
+/**
+ * Use this context to provide the necessary values to the {@link NestedLexicalEditor} React component.
+ * Place it as a wrapper in your custom lexical node decorators.
+ */
 export declare const NestedEditorsContext: React.Context<NestedEditorsContextValue<Node<import("unist").Data>> | undefined>;
+/**
+ * A hook to get the current {@link NestedEditorsContext} value. Use this in your custom editor components.
+ */
 export declare const useNestedEditorContext: <T extends Mdast.Content>() => NestedEditorsContextValue<T>;
 /**
  * A hook that returns a function that can be used to update the mdast node. Use this in your custom editor components.
@@ -24,7 +31,7 @@ export declare function useMdastNodeUpdater<T extends Mdast.Content>(): (node: P
  */
 export declare function useLexicalNodeRemove(): () => void;
 /**
- * The properties of the {@link NestedEditor} React Component.
+ * The properties of the {@link NestedLexicalEditor} React component.
  * @typeParam T - The type of the mdast node of the editor.
  */
 export interface NestedEditorProps<T extends Mdast.Content> {
@@ -62,7 +69,7 @@ export interface NestedEditorProps<T extends Mdast.Content> {
  *   children: Mdast.PhrasingContent[]
  * }
  *
- * return <NestedEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
+ * return <NestedLexicalEditor<CalloutDirectiveNode> getContent={node => node.children} getUpdatedMdastNode={(node, children) => ({ ...node, children })} />
  * ```
  */
 export declare const NestedLexicalEditor: <T extends Mdast.Content>(props: NestedEditorProps<T>) => React.JSX.Element;

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

@@ -1,8 +1,23 @@
 import React from 'react';
-interface PropertyPopoverProps {
+/**
+ * The properties of the {@link PropertyPopover} React component.
+ */
+export interface PropertyPopoverProps {
+    /**
+     * The properties to edit. The key is the name of the property, and the value is the initial value.
+     */
     properties: Record<string, string>;
+    /**
+     * Triggered when the user edits the property values.
+     */
     onChange: (values: Record<string, string>) => void;
+    /**
+     * The title to display in the popover.
+     */
     title: string;
 }
+/**
+ * A React component that can be used in custom editors to edit the properties of the node.
+ * Displays a simple, static key/value editing UI in a popover.
+ */
 export declare const PropertyPopover: React.FC<PropertyPopoverProps>;
-export {};

package/dist/plugins/diff-source/SourceEditor.js

@@ -3,6 +3,7 @@ import { SandpackProvider, CodeEditor } from "@codesandbox/sandpack-react";
 import React__default from "react";
 import { diffSourcePluginHooks } from "./index.js";
 import { corePluginHooks } from "../core/index.js";
+import { EditorView } from "@codemirror/view";
 const SourceEditor = () => {
   const [markdown$1] = corePluginHooks.useEmitterValues("markdown");
   const updateMarkdown = diffSourcePluginHooks.usePublisher("markdownSourceEditorValue");
@@ -10,6 +11,7 @@ const SourceEditor = () => {
   return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: null }, /* @__PURE__ */ React__default.createElement(SandpackProvider, null, /* @__PURE__ */ React__default.createElement(
     CodeEditor,
     {
+      extensions: [EditorView.lineWrapping],
       showLineNumbers: true,
       additionalLanguages: [{ name: "markdown", extensions: ["md"], language: markdown() }],
       initMode: "lazy",

package/dist/plugins/diff-source/index.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+/** @internal */
 export type ViewMode = 'rich-text' | 'source' | 'diff';
 /** @internal */
 export declare const diffSourceSystem: import("../../gurx").SystemSpec<[import("../../gurx").SystemSpec<[], (r: import("../../gurx").Realm) => {

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

@@ -3,5 +3,7 @@ export interface ImageEditorProps {
     nodeKey: string;
     src: string;
     title?: string;
+    width: number | 'inherit';
+    height: number | 'inherit';
 }
-export declare function ImageEditor({ src, title, nodeKey }: ImageEditorProps): JSX.Element;
+export declare function ImageEditor({ src, title, nodeKey, width, height }: ImageEditorProps): JSX.Element;

package/dist/plugins/image/ImageEditor.js

@@ -6,6 +6,7 @@ import { $isNodeSelection, $getSelection, $getNodeByKey, $setSelection, SELECTIO
 import styles from "../../styles/ui.module.css.js";
 import classNames from "classnames";
 import { $isImageNode } from "./ImageNode.js";
+import ImageResizer from "./ImageResizer.js";
 const imageCache = /* @__PURE__ */ new Set();
 function useSuspenseImage(src) {
   if (!imageCache.has(src)) {
@@ -23,18 +24,21 @@ 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 }) {
+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] = 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())) {
@@ -101,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);
@@ -134,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(React__default.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
       }),
@@ -147,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

@@ -7,6 +7,8 @@ import { DecoratorNode } from 'lexical';
 export type SerializedImageNode = Spread<{
     altText: string;
     title?: string;
+    width?: number;
+    height?: number;
     src: string;
     type: 'image';
     version: 1;
@@ -18,18 +20,24 @@ 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, key?: NodeKey);
+    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;
 }
@@ -38,6 +46,8 @@ export declare class ImageNode extends DecoratorNode<JSX.Element> {
  */
 export interface CreateImageNodeOptions {
     altText: string;
+    width?: number;
+    height?: number;
     title?: string;
     key?: NodeKey;
     src: string;

package/dist/plugins/image/ImageNode.js

@@ -9,34 +9,40 @@ import { DecoratorNode } from "lexical";
 import { ImageEditor } from "./ImageEditor.js";
 function convertImageElement(domNode) {
   if (domNode instanceof HTMLImageElement) {
-    const { alt: altText, src, title } = domNode;
-    const node = $createImageNode({ altText, src, title });
+    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, key) {
+  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.__key);
+    return new ImageNode(node.__src, node.__altText, node.__title, node.__width, node.__height, node.__key);
   }
   static importJSON(serializedNode) {
-    const { altText, title, src } = serializedNode;
+    const { altText, title, src, width, height } = serializedNode;
     const node = $createImageNode({
       altText,
       title,
-      src
+      src,
+      height,
+      width
     });
     return node;
   }
@@ -47,6 +53,12 @@ class ImageNode extends DecoratorNode {
     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() {
@@ -61,11 +73,18 @@ class ImageNode extends DecoratorNode {
     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;
@@ -87,16 +106,25 @@ class ImageNode extends DecoratorNode {
   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() });
+    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 } = options;
-  return new ImageNode(src, altText, title, key);
+  const { altText, title, src, key, width, height } = options;
+  return new ImageNode(src, altText, title, width, height, key);
 }
 function $isImageNode(node) {
   return node instanceof 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;