@mdxeditor/editor 0.0.1 → 0.0.5-development

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

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

@@ -0,0 +1,56 @@
+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 GenericJsxEditor = ({ mdastNode, descriptor }) => {
+  const updateMdastNode = useMdastNodeUpdater();
+  const properties = React__default.useMemo(() => {
+    return descriptor.props.reduce((acc, descriptor2) => {
+      const attribute = mdastNode.attributes.find((attr) => attr.name === descriptor2.name);
+      if (attribute) {
+        acc[descriptor2.name] = attribute.value;
+      } else {
+        acc[descriptor2.name] = "";
+      }
+      return acc;
+    }, {});
+  }, [mdastNode, descriptor]);
+  const onChange = React__default.useCallback(
+    (values) => {
+      const newAttributes = mdastNode.attributes.slice();
+      Object.entries(values).forEach(([key, value]) => {
+        const attributeToUpdate = newAttributes.find((attr) => attr.name === key);
+        if (value === "") {
+          if (attributeToUpdate) {
+            newAttributes.splice(newAttributes.indexOf(attributeToUpdate), 1);
+          }
+        } else {
+          if (attributeToUpdate) {
+            attributeToUpdate.value = value;
+          } else {
+            newAttributes.push({
+              type: "mdxJsxAttribute",
+              name: key,
+              value
+            });
+          }
+        }
+      });
+      updateMdastNode({ attributes: newAttributes });
+    },
+    [mdastNode, updateMdastNode]
+  );
+  return /* @__PURE__ */ React__default.createElement("div", { className: descriptor.kind === "text" ? styles.inlineEditor : styles.blockEditor }, descriptor.props.length == 0 && descriptor.hasChildren && descriptor.kind === "flow" ? /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name) : null, descriptor.props.length > 0 ? /* @__PURE__ */ React__default.createElement(PropertyPopover, { properties, title: mdastNode.name || "", onChange }) : null, descriptor.hasChildren ? /* @__PURE__ */ React__default.createElement(
+    NestedLexicalEditor,
+    {
+      block: descriptor.kind === "flow",
+      getContent: (node) => node.children,
+      getUpdatedMdastNode: (mdastNode2, children) => {
+        return { ...mdastNode2, children };
+      }
+    }
+  ) : /* @__PURE__ */ React__default.createElement("span", { className: styles.genericComponentName }, mdastNode.name));
+};
+export {
+  GenericJsxEditor
+};

package/dist/plugins/codeblock/CodeBlockNode.d.ts

@@ -0,0 +1,100 @@
+import React from 'react';
+import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+import { CodeBlockEditorProps } from '.';
+/**
+ * The options necessary to construct a new code block node.
+ */
+export interface CreateCodeBlockNodeOptions {
+    /**
+     * The code contents of the block.
+     */
+    code: string;
+    /**
+     * The language of the code block (i.e. `js`, `jsx`, etc.). This is used for syntax highlighting.
+     */
+    language: string;
+    /**
+     * The additional meta data of the block.
+     */
+    meta: string;
+}
+/**
+ * A serialized representation of an {@link CodeBlockNode}.
+ */
+export type SerializedCodeBlockNode = Spread<CreateCodeBlockNodeOptions & {
+    type: 'codeblock';
+    version: 1;
+}, SerializedLexicalNode>;
+/**
+ * A lexical node that represents a fenced code block. Use {@link "$createCodeBlockNode"} to construct one.
+ */
+export declare class CodeBlockNode extends DecoratorNode<JSX.Element> {
+    __code: string;
+    __meta: string;
+    __language: string;
+    __focusEmitter: {
+        publish: () => void; /**
+         * The code contents of the block.
+         */
+        subscribe: (cb: () => void) => void;
+    };
+    static getType(): string;
+    static clone(node: CodeBlockNode): CodeBlockNode;
+    static importJSON(serializedNode: SerializedCodeBlockNode): CodeBlockNode;
+    constructor(code: string, language: string, meta: string, key?: NodeKey);
+    exportJSON(): SerializedCodeBlockNode;
+    createDOM(_config: EditorConfig): HTMLDivElement;
+    updateDOM(): false;
+    getCode(): string;
+    getMeta(): string;
+    getLanguage(): string;
+    setCode: (code: string) => void;
+    setMeta: (meta: string) => void;
+    setLanguage: (language: string) => void;
+    select: () => void;
+    decorate(editor: LexicalEditor): JSX.Element;
+    isInline(): boolean;
+}
+interface CodeBlockEditorContainerProps extends CodeBlockEditorProps {
+    /** The Lexical editor that contains the node */
+    parentEditor: LexicalEditor;
+    /** The Lexical node that is being edited */
+    codeBlockNode: CodeBlockNode;
+}
+/**
+ * A set of functions that modify the underlying code block node. Get this with the {@link useCodeBlockEditorContext} hook.
+ */
+export interface CodeBlockEditorContextValue {
+    /**
+     * Updates the code contents of the code block.
+     */
+    setCode: (code: string) => void;
+    /**
+     * Updates the language of the code block. See {@link https://www.markdownguide.org/extended-syntax/#syntax-highlighting} for language examples.
+     *
+     */
+    setLanguage: (language: string) => void;
+    /**
+     * Updates the meta of the code block. The meta is the additional string that comes after the code block language.
+     */
+    setMeta: (meta: string) => void;
+    /**
+     * The Lexical node that's being edited.
+     */
+    lexicalNode: CodeBlockNode;
+}
+/**
+ * Use this hook in your custom code block editors to modify the underlying node code, language, and meta.
+ */
+export declare function useCodeBlockEditorContext(): CodeBlockEditorContextValue;
+export declare function CodeBlockEditorContainer(props: CodeBlockEditorContainerProps): React.JSX.Element;
+/**
+ * Creates a {@link CodeBlockNode}.
+ * @param options - The code contents, the language  (i.e. js, jsx, etc.), and the additional meta data of the block.
+ */
+export declare function $createCodeBlockNode(options: Partial<CreateCodeBlockNodeOptions>): CodeBlockNode;
+/**
+ * Returns true if the given node is a {@link CodeBlockNode}.
+ */
+export declare function $isCodeBlockNode(node: LexicalNode | null | undefined): node is CodeBlockNode;
+export {};

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -0,0 +1,158 @@
+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 { codeBlockPluginHooks } from "./index.js";
+import { voidEmitter } from "../../utils/voidEmitter.js";
+import { NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
+class CodeBlockNode extends DecoratorNode {
+  constructor(code, language, meta, key) {
+    super(key);
+    __publicField(this, "__code");
+    __publicField(this, "__meta");
+    __publicField(this, "__language");
+    __publicField(this, "__focusEmitter", voidEmitter());
+    __publicField(this, "setCode", (code) => {
+      if (code !== this.__code) {
+        this.getWritable().__code = code;
+      }
+    });
+    __publicField(this, "setMeta", (meta) => {
+      if (meta !== this.__meta) {
+        this.getWritable().__meta = meta;
+      }
+    });
+    __publicField(this, "setLanguage", (language) => {
+      if (language !== this.__language) {
+        this.getWritable().__language = language;
+      }
+    });
+    __publicField(this, "select", () => {
+      this.__focusEmitter.publish();
+    });
+    this.__code = code;
+    this.__meta = meta;
+    this.__language = language;
+  }
+  static getType() {
+    return "codeblock";
+  }
+  static clone(node) {
+    return new CodeBlockNode(node.__code, node.__language, node.__meta, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const { code, meta, language } = serializedNode;
+    return $createCodeBlockNode({
+      code,
+      language,
+      meta
+    });
+  }
+  exportJSON() {
+    return {
+      code: this.getCode(),
+      language: this.getLanguage(),
+      meta: this.getMeta(),
+      type: "codeblock",
+      version: 1
+    };
+  }
+  // View
+  createDOM(_config) {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  getCode() {
+    return this.__code;
+  }
+  getMeta() {
+    return this.__meta;
+  }
+  getLanguage() {
+    return this.__language;
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ React__default.createElement(
+      CodeBlockEditorContainer,
+      {
+        parentEditor: editor,
+        code: this.getCode(),
+        meta: this.getMeta(),
+        language: this.getLanguage(),
+        codeBlockNode: this,
+        nodeKey: this.getKey(),
+        focusEmitter: this.__focusEmitter
+      }
+    );
+  }
+  isInline() {
+    return false;
+  }
+}
+const CodeBlockEditorContext = React__default.createContext(null);
+const CodeBlockEditorContextProvider = ({ parentEditor, lexicalNode, children }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    CodeBlockEditorContext.Provider,
+    {
+      value: {
+        lexicalNode,
+        setCode: (code) => {
+          parentEditor.update(() => {
+            lexicalNode.setCode(code);
+            setTimeout(() => {
+              parentEditor.dispatchCommand(NESTED_EDITOR_UPDATED_COMMAND, void 0);
+            }, 0);
+          });
+        },
+        setLanguage: (language) => {
+          parentEditor.update(() => {
+            lexicalNode.setLanguage(language);
+          });
+        },
+        setMeta: (meta) => {
+          parentEditor.update(() => {
+            lexicalNode.setMeta(meta);
+          });
+        }
+      }
+    },
+    children
+  );
+};
+function useCodeBlockEditorContext() {
+  const context = React__default.useContext(CodeBlockEditorContext);
+  if (!context) {
+    throw new Error("useCodeBlockEditor must be used within a CodeBlockEditor");
+  }
+  return context;
+}
+function CodeBlockEditorContainer(props) {
+  const [codeBlockEditorDescriptors] = codeBlockPluginHooks.useEmitterValues("codeBlockEditorDescriptors");
+  const descriptor = codeBlockEditorDescriptors.sort((a, b) => b.priority - a.priority).find((descriptor2) => descriptor2.match(props.language || "", props.meta || ""));
+  if (!descriptor) {
+    throw new Error(`No CodeBlockEditor registered for language=${props.language} meta=${props.meta}`);
+  }
+  const Editor = descriptor.Editor;
+  const { codeBlockNode: _, parentEditor: __, ...restProps } = props;
+  return /* @__PURE__ */ React__default.createElement(CodeBlockEditorContextProvider, { parentEditor: props.parentEditor, lexicalNode: props.codeBlockNode }, /* @__PURE__ */ React__default.createElement(Editor, { ...restProps }));
+}
+function $createCodeBlockNode(options) {
+  const { code = "", language = "", meta = "" } = options;
+  return new CodeBlockNode(code, language, meta);
+}
+function $isCodeBlockNode(node) {
+  return node instanceof CodeBlockNode;
+}
+export {
+  $createCodeBlockNode,
+  $isCodeBlockNode,
+  CodeBlockEditorContainer,
+  CodeBlockNode,
+  useCodeBlockEditorContext
+};

package/dist/plugins/codeblock/CodeBlockVisitor.d.ts

@@ -0,0 +1,4 @@
+import * as Mdast from 'mdast';
+import { CodeBlockNode } from './CodeBlockNode';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const CodeBlockVisitor: LexicalExportVisitor<CodeBlockNode, Mdast.Code>;

package/dist/plugins/codeblock/CodeBlockVisitor.js

@@ -0,0 +1,14 @@
+import { $isCodeBlockNode } from "./CodeBlockNode.js";
+const CodeBlockVisitor = {
+  testLexicalNode: $isCodeBlockNode,
+  visitLexicalNode: ({ lexicalNode, actions }) => {
+    actions.addAndStepInto("code", {
+      value: lexicalNode.getCode(),
+      lang: lexicalNode.getLanguage(),
+      meta: lexicalNode.getMeta()
+    });
+  }
+};
+export {
+  CodeBlockVisitor
+};

package/dist/plugins/codeblock/MdastCodeVisitor.d.ts

@@ -0,0 +1,3 @@
+import * as Mdast from 'mdast';
+import { MdastImportVisitor } from '../../importMarkdownToLexical';
+export declare const MdastCodeVisitor: MdastImportVisitor<Mdast.Code>;

package/dist/plugins/codeblock/MdastCodeVisitor.js

@@ -0,0 +1,16 @@
+import { $createCodeBlockNode } from "./CodeBlockNode.js";
+const MdastCodeVisitor = {
+  testNode: "code",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto(
+      $createCodeBlockNode({
+        code: mdastNode.value,
+        language: mdastNode.lang,
+        meta: mdastNode.meta
+      })
+    );
+  }
+};
+export {
+  MdastCodeVisitor
+};