@mdxeditor/editor 0.0.0-development

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Petyo Ivanov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,28 @@
+# MDXEditor
+
+![npm](https://img.shields.io/npm/v/@mdxeditor/editor)
+![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@mdxeditor/editor)
+
+> Because markdown editing can be even more delightful.
+
+MDXEditor is an open-source React component that allows users to author markdown documents naturally. Just like in Google docs or Notion. [See the live demo](https://mdxeditor.dev/editor/demo) that has all features turned on. 
+The component supports the core markdown syntax and certain extensions, including tables, images, code blocks, etc. It also allows users to edit JSX components with a built-in JSX editor or a custom one.
+
+```jsx
+import {MDXEditor, headingsPlugin} from '@mdxeditor/editor';
+
+export default function App() {
+  return <MDXEditor markdown={'# Hello World'} plugins={[headingsPlugin()]} />;
+}
+```
+## Get Started
+
+The best place to get started using the component is the [documentation](https://mdxeditor.dev/editor/docs/getting-started).
+
+## Help and support
+
+Should you encounter any issues, please [create an issue](https://github.com/mdx-editor/editor/issues), but check if there's something similar already open first.
+
+## License
+
+MIT &copy; Petyo Ivanov.

package/dist/FormatConstants.d.ts

@@ -0,0 +1,9 @@
+export declare const DEFAULT_FORMAT: 0;
+export declare const IS_BOLD: 1;
+export declare const IS_ITALIC: 2;
+export declare const IS_STRIKETHROUGH: 4;
+export declare const IS_UNDERLINE: 8;
+export declare const IS_CODE: 16;
+export declare const IS_SUBSCRIPT: 32;
+export declare const IS_SUPERSCRIPT: 64;
+export declare const IS_HIGHLIGHT: 128;

package/dist/FormatConstants.js

@@ -0,0 +1,10 @@
+const IS_BOLD = 1;
+const IS_ITALIC = 2;
+const IS_UNDERLINE = 8;
+const IS_CODE = 16;
+export {
+  IS_BOLD,
+  IS_CODE,
+  IS_ITALIC,
+  IS_UNDERLINE
+};

package/dist/MDXEditor.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import { RealmPluginInitializer } from './gurx';
+import { ToMarkdownOptions } from './exportMarkdownFromLexical';
+import { IconKey } from './plugins/core/Icon';
+/**
+ * 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;
+    /**
+     * pass if you would like to have the editor automatically focused when mounted.
+     */
+    autoFocus?: boolean | {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    };
+    /**
+     * Triggered when focus leaves the editor
+     */
+    onBlur?: (e: FocusEvent) => void;
+    /**
+     * The placeholder contents, displayed when the editor is empty.
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * pass if you would like to have the editor in read-only mode.
+     * Note: Don't use this mode to render content for consumption - render the markdown using a library of your choice instead.
+     */
+    readOnly?: boolean;
+    /**
+     * Use this prop to customize the icons used across the editor. Pass a function that returns an icon (JSX) for a given icon key.
+     */
+    iconComponentFor?: (name: IconKey) => JSX.Element;
+}
+/**
+ * The interface for the {@link MDXEditor} object reference.
+ *
+ * @example
+ * ```tsx
+ *  const mdxEditorRef = React.useRef<MDXEditorMethods>(null)
+ *  <MDXEditor ref={mdxEditorRef} />
+ * ```
+ */
+export interface MDXEditorMethods {
+    /**
+     * Gets the current markdown value.
+     */
+    getMarkdown: () => string;
+    /**
+     * Updates the markdown value of the editor.
+     */
+    setMarkdown: (value: string) => void;
+    /**
+     * Sets focus on input
+     */
+    focus: (callbackFn?: (() => void) | undefined, opts?: {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    }) => 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

@@ -0,0 +1,142 @@
+import React__default from "react";
+import { corePlugin, corePluginHooks } from "./plugins/core/index.js";
+import { lexicalTheme } from "./styles/lexicalTheme.js";
+import { LexicalComposer } from "@lexical/react/LexicalComposer.js";
+import styles from "./styles/ui.module.css.js";
+import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin.js";
+import { ContentEditable } from "@lexical/react/LexicalContentEditable.js";
+import LexicalErrorBoundary from "@lexical/react/LexicalErrorBoundary.js";
+import classNames from "classnames";
+import { noop } from "./utils/fp.js";
+import { RealmPluginInitializer, useHasPlugin } from "./gurx/react.js";
+const LexicalProvider = ({ children }) => {
+  const [initialRootEditorState, nodes, readOnly] = corePluginHooks.useEmitterValues(
+    "initialRootEditorState",
+    "usedLexicalNodes",
+    "readOnly"
+  );
+  return /* @__PURE__ */ React__default.createElement(
+    LexicalComposer,
+    {
+      initialConfig: {
+        editable: !readOnly,
+        editorState: initialRootEditorState,
+        namespace: "MDXEditor",
+        theme: lexicalTheme,
+        nodes,
+        onError: (error) => {
+          throw error;
+        }
+      }
+    },
+    children
+  );
+};
+const RichTextEditor = () => {
+  const [contentEditableClassName, composerChildren, topAreaChildren, editorWrappers, placeholder] = corePluginHooks.useEmitterValues(
+    "contentEditableClassName",
+    "composerChildren",
+    "topAreaChildren",
+    "editorWrappers",
+    "placeholder"
+  );
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, topAreaChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })), /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: editorWrappers }, /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.rootContentEditableWrapper) }, /* @__PURE__ */ React__default.createElement(
+    RichTextPlugin,
+    {
+      contentEditable: /* @__PURE__ */ React__default.createElement(ContentEditable, { className: classNames(styles.contentEditable, contentEditableClassName) }),
+      placeholder: /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.contentEditable, styles.placeholder, contentEditableClassName) }, /* @__PURE__ */ React__default.createElement("p", null, placeholder)),
+      ErrorBoundary: LexicalErrorBoundary
+    }
+  ))), composerChildren.map((Child, index) => /* @__PURE__ */ React__default.createElement(Child, { key: index })));
+};
+const DEFAULT_MARKDOWN_OPTIONS = {
+  listItemIndent: "one"
+};
+const DefaultIcon = React__default.lazy(() => import("./plugins/core/Icon.js"));
+const defaultIconComponentFor = (name) => {
+  return /* @__PURE__ */ React__default.createElement(DefaultIcon, { name });
+};
+const RenderRecurisveWrappers = ({
+  wrappers,
+  children
+}) => {
+  if (wrappers.length === 0) {
+    return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, children);
+  }
+  const Wrapper = wrappers[0];
+  return /* @__PURE__ */ React__default.createElement(Wrapper, null, /* @__PURE__ */ React__default.createElement(RenderRecurisveWrappers, { wrappers: wrappers.slice(1) }, children));
+};
+const EditorRootElement = ({ children, className }) => {
+  const editorRootElementRef = React__default.useRef(null);
+  const setEditorRootElementRef = corePluginHooks.usePublisher("editorRootElementRef");
+  React__default.useEffect(() => {
+    const popupContainer = document.createElement("div");
+    popupContainer.classList.add(styles.editorRoot);
+    if (className) {
+      className.split(" ").forEach((c) => {
+        popupContainer.classList.add(c);
+      });
+    }
+    document.body.appendChild(popupContainer);
+    editorRootElementRef.current = popupContainer;
+    setEditorRootElementRef(editorRootElementRef);
+    return () => {
+      popupContainer.remove();
+    };
+  }, [className, editorRootElementRef, setEditorRootElementRef]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor") }, children);
+};
+const Methods = ({ mdxRef }) => {
+  const realm = corePluginHooks.useRealmContext();
+  const hasDiffSourcePlugin = useHasPlugin("diff-source");
+  React__default.useImperativeHandle(
+    mdxRef,
+    () => {
+      return {
+        getMarkdown: () => {
+          if (hasDiffSourcePlugin) {
+            if (realm.getKeyValue("viewMode") === "source") {
+              return realm.getKeyValue("markdownSourceEditorValue");
+            }
+          }
+          return realm.getKeyValue("markdown");
+        },
+        setMarkdown: (markdown) => {
+          realm.pubKey("setMarkdown", markdown);
+        },
+        focus: (callbackFn, opts) => {
+          var _a;
+          (_a = realm.getKeyValue("rootEditor")) == null ? void 0 : _a.focus(callbackFn, opts);
+        }
+      };
+    },
+    [realm, hasDiffSourcePlugin]
+  );
+  return null;
+};
+const MDXEditor = React__default.forwardRef((props, ref) => {
+  return /* @__PURE__ */ React__default.createElement(
+    RealmPluginInitializer,
+    {
+      plugins: [
+        corePlugin({
+          contentEditableClassName: props.contentEditableClassName ?? "",
+          initialMarkdown: props.markdown,
+          onChange: props.onChange ?? noop,
+          onBlur: props.onBlur ?? noop,
+          toMarkdownOptions: props.toMarkdownOptions ?? DEFAULT_MARKDOWN_OPTIONS,
+          autoFocus: props.autoFocus ?? false,
+          placeholder: props.placeholder ?? "",
+          readOnly: Boolean(props.readOnly),
+          iconComponentFor: props.iconComponentFor ?? defaultIconComponentFor
+        }),
+        ...props.plugins || []
+      ]
+    },
+    /* @__PURE__ */ React__default.createElement(EditorRootElement, { className: props.className }, /* @__PURE__ */ React__default.createElement(LexicalProvider, null, /* @__PURE__ */ React__default.createElement(RichTextEditor, null))),
+    /* @__PURE__ */ React__default.createElement(Methods, { mdxRef: ref })
+  );
+});
+export {
+  MDXEditor
+};

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

@@ -0,0 +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/AdmonitionDirectiveDescriptor.js

@@ -0,0 +1,28 @@
+import React__default from "react";
+import { useNestedEditorContext, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
+const ADMONITION_TYPES = ["note", "tip", "danger", "info", "caution"];
+const AdmonitionDirectiveDescriptor = {
+  name: "admonition",
+  attributes: [],
+  hasChildren: true,
+  testNode(node) {
+    return ADMONITION_TYPES.includes(node.name);
+  },
+  Editor({ mdastNode }) {
+    const {
+      config: { theme }
+    } = useNestedEditorContext();
+    return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
+      NestedLexicalEditor,
+      {
+        block: true,
+        getContent: (node) => node.children,
+        getUpdatedMdastNode: (mdastNode2, children) => ({ ...mdastNode2, children })
+      }
+    ));
+  }
+};
+export {
+  ADMONITION_TYPES,
+  AdmonitionDirectiveDescriptor
+};

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

@@ -0,0 +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/directive-editors/GenericDirectiveEditor.js

@@ -0,0 +1,32 @@
+import React__default from "react";
+import { useMdastNodeUpdater, NestedLexicalEditor } from "../plugins/core/NestedLexicalEditor.js";
+import { PropertyPopover } from "../plugins/core/PropertyPopover.js";
+import styles from "../styles/ui.module.css.js";
+const GenericDirectiveEditor = ({ mdastNode, descriptor }) => {
+  const updateMdastNode = useMdastNodeUpdater();
+  const properties = React__default.useMemo(() => {
+    return descriptor.attributes.reduce((acc, attributeName) => {
+      acc[attributeName] = (mdastNode.attributes || {})[attributeName] || "";
+      return acc;
+    }, {});
+  }, [mdastNode, descriptor]);
+  const onChange = React__default.useCallback(
+    (values) => {
+      updateMdastNode({ attributes: Object.fromEntries(Object.entries(values).filter(([, value]) => value !== "")) });
+    },
+    [updateMdastNode]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: mdastNode.type === "textDirective" ? styles.inlineEditor : styles.blockEditor }, descriptor.attributes.length == 0 && descriptor.hasChildren && mdastNode.type !== "textDirective" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.attributes.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
+    NestedLexicalEditor,
+    {
+      block: mdastNode.type === "containerDirective",
+      getContent: (node) => node.children,
+      getUpdatedMdastNode: (mdastNode2, children) => {
+        return { ...mdastNode2, children };
+      }
+    }
+  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name));
+};
+export {
+  GenericDirectiveEditor
+};

package/dist/exportMarkdownFromLexical.d.ts

@@ -0,0 +1,133 @@
+import { LexicalNode, RootNode as LexicalRootNode } from 'lexical';
+import * as Mdast from 'mdast';
+import { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
+import type { JsxComponentDescriptor } from './plugins/jsx';
+export type { Options as ToMarkdownOptions } from 'mdast-util-to-markdown';
+/**
+ * A set of covenience utilities to manipulate the mdast tree when processing lexical nodes.
+ */
+export interface LexicalVisitActions<T extends LexicalNode> {
+    /**
+     * Iterate over the immediate children of a lexical node with the given mdast node as a parent.
+     */
+    visitChildren(node: T, mdastParent: Mdast.Parent): void;
+    /**
+     * Create a new mdast node with the given type, and props.
+     * Iterate over the immediate children of the current lexical node with the new mdast node as a parent.
+     * @param hasChildren - true by default. Pass false to skip iterating over the lexical node children.
+     */
+    addAndStepInto(type: string, props?: Record<string, unknown>, hasChildren?: boolean): void;
+    /**
+     * Append a new mdast node to a parent node.
+     * @param parentNode - the mdast parent node to append the new node to.
+     * @param node - the mdast node to append.
+     */
+    appendToParent<T extends Mdast.Parent>(parentNode: T, node: T['children'][number]): T['children'][number] | Mdast.Root;
+    /**
+     * Used when processing JSX nodes so that later, the correct import statement can be added to the document.
+     * @param componentName - the name of the component that has to be imported.
+     * @see {@link JsxComponentDescriptor}
+     */
+    registerReferredComponent(componentName: string): void;
+}
+/**
+ * The params passed to the {@link LexicalExportVisitor.visitLexicalNode} method.
+ */
+export interface LexicalNodeVisitParams<T extends LexicalNode> {
+    /**
+     * The lexical node that is being visited.
+     */
+    lexicalNode: T;
+    /**
+     * The mdast parent node that the result of the lexical node conversion should be appended to.
+     */
+    mdastParent: Mdast.Parent;
+    /**
+     * A set of actions that can be used to manipulate the mdast tree.
+     * These are "convenience" utilities that avoid the repetitive boilerplate of creating mdast nodes.
+     */
+    actions: LexicalVisitActions<T>;
+}
+/**
+ * Implement this interface in order to process mdast node(s) into a lexical tree.
+ * This is part of the process that converts the editor contents to markdown.
+ */
+export interface LexicalExportVisitor<LN extends LexicalNode, UN extends Mdast.Content> {
+    /**
+     * Return true if the given node is of the type that this visitor can process.
+     * You can safely use the node type guard functions (as in $isParagraphNode, $isLinkNode, etc.) here.
+     */
+    testLexicalNode?(lexicalNode: LexicalNode): lexicalNode is LN;
+    /**
+     * Process the given node and manipulate the mdast tree accordingly.
+     * @see {@link LexicalNodeVisitParams} and {@link LexicalVisitActions} for more information.
+     */
+    visitLexicalNode?(params: LexicalNodeVisitParams<LN>): void;
+    /**
+     * Return true if the current node should be joined with the previous node.
+     * This is necessary due to some inconsistencies between the lexical tree and the mdast tree when it comes to formatting.
+     */
+    shouldJoin?(prevNode: Mdast.Content, currentNode: UN): boolean;
+    /**
+     * Join the current node with the previous node, returning the resulting new node
+     * For this to be called by the tree walk, shouldJoin must return true.
+     */
+    join?<T extends Mdast.Content>(prevNode: T, currentNode: T): T;
+}
+/**
+ * The "any" type for LexicalExportVisitor.
+ * @internal
+ */
+export type LexicalVisitor = LexicalExportVisitor<LexicalNode, Mdast.Content>;
+/**
+ * @internal
+ */
+export interface ExportLexicalTreeOptions {
+    root: LexicalRootNode;
+    visitors: LexicalVisitor[];
+    jsxComponentDescriptors: JsxComponentDescriptor[];
+    jsxIsAvailable: boolean;
+}
+/**
+ * @internal
+ */
+export declare function exportLexicalTreeToMdast({ root, visitors, jsxComponentDescriptors, jsxIsAvailable }: ExportLexicalTreeOptions): Mdast.Root;
+/**
+ * @internal
+ */
+export type ToMarkdownExtension = NonNullable<ToMarkdownOptions['extensions']>[number];
+/**
+ * @internal
+ */
+export interface ExportMarkdownFromLexicalOptions extends ExportLexicalTreeOptions {
+    visitors: LexicalVisitor[];
+    /**
+     * the markdown extensions to use
+     */
+    toMarkdownExtensions: ToMarkdownExtension[];
+    /**
+     * The options to pass to `toMarkdown`
+     */
+    toMarkdownOptions: ToMarkdownOptions;
+}
+/**
+ * Configures how the lexical tree is converted to a mdast tree and then to markdown.
+ */
+export interface LexicalConvertOptions {
+    /**
+     * The visitors to use when processing the lexical tree
+     */
+    visitors?: LexicalVisitor[];
+    /**
+     * the markdown extensions to use
+     */
+    toMarkdownExtensions?: ToMarkdownExtension[];
+    /**
+     * The options to pass to `toMarkdown`
+     */
+    toMarkdownOptions?: ToMarkdownOptions;
+}
+/**
+ * @internal
+ */
+export declare function exportMarkdownFromLexical({ root, toMarkdownOptions, toMarkdownExtensions, visitors, jsxComponentDescriptors, jsxIsAvailable }: ExportMarkdownFromLexicalOptions): string;