@nkzw/mdx-editor 0.1.0

package/dist/mdastUtilHtmlComment.js

@@ -0,0 +1,125 @@
+import { factorySpace } from "micromark-factory-space";
+import { markdownLineEnding } from "micromark-util-character";
+import { codes, types } from "micromark-util-symbol";
+function commentFromMarkdown(_options) {
+  return {
+    canContainEols: ["comment"],
+    enter: {
+      comment(_) {
+        this.buffer();
+      }
+    },
+    exit: {
+      comment(token) {
+        this.resume();
+      }
+    }
+  };
+}
+const tokenize = (effects, ok, nok) => {
+  return start;
+  function start(code) {
+    effects.enter("comment");
+    effects.consume(code);
+    return open;
+  }
+  function open(code) {
+    if (code === codes.exclamationMark) {
+      effects.consume(code);
+      return declarationOpen;
+    }
+    return nok(code);
+  }
+  function declarationOpen(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentOpen;
+    }
+    return nok(code);
+  }
+  function commentOpen(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentStart;
+    }
+    return nok(code);
+  }
+  function commentStart(code) {
+    if (code === codes.greaterThan) {
+      return nok(code);
+    }
+    if (markdownLineEnding(code)) {
+      return atLineEnding(code);
+    }
+    effects.enter(types.data);
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentStartDash;
+    }
+    return comment2(code);
+  }
+  function commentStartDash(code) {
+    if (code === codes.greaterThan) {
+      return nok(code);
+    }
+    return comment2(code);
+  }
+  function comment2(code) {
+    if (code === codes.eof) {
+      return nok(code);
+    }
+    if (code === codes.dash) {
+      effects.consume(code);
+      return commentClose;
+    }
+    if (markdownLineEnding(code)) {
+      effects.exit(types.data);
+      return atLineEnding(code);
+    }
+    effects.consume(code);
+    return comment2;
+  }
+  function atLineEnding(code) {
+    effects.enter(types.lineEnding);
+    effects.consume(code);
+    effects.exit(types.lineEnding);
+    return factorySpace(effects, afterPrefix, types.linePrefix);
+  }
+  function afterPrefix(code) {
+    if (markdownLineEnding(code)) {
+      return atLineEnding(code);
+    }
+    effects.enter(types.data);
+    return comment2(code);
+  }
+  function commentClose(code) {
+    if (code === codes.dash) {
+      effects.consume(code);
+      return end;
+    }
+    return comment2(code);
+  }
+  function end(code) {
+    if (code === codes.greaterThan) {
+      effects.exit(types.data);
+      effects.enter("commentEnd");
+      effects.consume(code);
+      effects.exit("commentEnd");
+      effects.exit("comment");
+      return ok(code);
+    }
+    if (code === codes.dash) {
+      effects.consume(code);
+      return end;
+    }
+    return comment2(code);
+  }
+};
+const comment = {
+  flow: { [60]: { tokenize, concrete: true } },
+  text: { [60]: { tokenize } }
+};
+export {
+  comment,
+  commentFromMarkdown
+};

package/dist/persistence.d.ts

@@ -0,0 +1,128 @@
+import { FocusEvent as FocusEvent_2 } from 'react';
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { Options } from 'mdast-util-to-markdown';
+import { ReactNode } from 'react';
+import { Realm } from '@mdxeditor/gurx';
+
+export declare type MarkdownDocument = {
+    content: string;
+    id: string;
+    version: string;
+};
+
+declare type MarkdownEditorColorScheme = 'dark' | 'inherit' | 'light' | 'system';
+
+declare type MarkdownEditorDensity = 'compact' | 'document';
+
+declare type MarkdownEditorHandle = {
+    focus: (options?: {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    }) => void;
+    getMarkdown: () => string;
+    getSelectionMarkdown: () => string;
+    insertMarkdown: (markdown: string) => void;
+    setMarkdown: (markdown: string) => void;
+};
+
+declare type MarkdownEditorProps = {
+    additionalPlugins?: RealmPlugin[];
+    ariaLabel?: string;
+    autoFocus?: boolean | {
+        defaultSelection?: 'rootStart' | 'rootEnd';
+        preventScroll?: boolean;
+    };
+    className?: string;
+    colorScheme?: MarkdownEditorColorScheme;
+    contentClassName?: string;
+    defaultValue?: string;
+    density?: MarkdownEditorDensity;
+    minHeight?: number | string;
+    onBlur?: (event: FocusEvent) => void;
+    onChange?: (markdown: string) => void;
+    onError?: (error: Error) => void;
+    onFocus?: (event: FocusEvent_2<HTMLDivElement>) => void;
+    onHeightChange?: (height: number) => void;
+    onKeyDown?: (event: KeyboardEvent_2<HTMLDivElement>) => void;
+    onNavigate?: (target: string) => void;
+    onOpenExternalLink?: (href: string) => void;
+    overlayContainer?: HTMLElement | null;
+    placeholder?: ReactNode;
+    readOnly?: boolean;
+    resolveLink?: (href: string) => string | null;
+    spellCheck?: boolean;
+    toMarkdownOptions?: ToMarkdownOptions;
+    value?: string;
+    variant?: MarkdownEditorVariant;
+};
+
+declare type MarkdownEditorVariant = 'card' | 'embedded' | 'plain';
+
+export declare type MarkdownPersistenceAdapter<Document extends MarkdownDocument> = {
+    save: (input: {
+        content: string;
+        document: Document;
+        keepalive: boolean;
+    }) => Promise<MarkdownSaveResult<Document>>;
+};
+
+export declare type MarkdownSaveResult<Document extends MarkdownDocument> = {
+    document: Document;
+    status: 'conflict';
+} | {
+    document: Document;
+    status: 'saved';
+};
+
+export declare type MarkdownSaveStatus = 'conflict' | 'error' | 'saved' | 'saving' | 'unsaved';
+
+export declare const PersistentMarkdownEditor: <Document extends MarkdownDocument>(props: PersistentMarkdownEditorProps<Document> & {
+    ref?: React.ForwardedRef<PersistentMarkdownEditorHandle<Document>>;
+}) => React.ReactElement;
+
+export declare type PersistentMarkdownEditorHandle<Document extends MarkdownDocument> = MarkdownEditorHandle & {
+    applyExternalChange: (document: Document) => void;
+    flush: (options?: {
+        keepalive?: boolean;
+    }) => Promise<boolean>;
+    hasUnsavedChanges: () => boolean;
+};
+
+export declare type PersistentMarkdownEditorProps<Document extends MarkdownDocument> = Omit<MarkdownEditorProps, 'defaultValue' | 'onBlur' | 'onChange' | 'onError' | 'value'> & {
+    adapter: MarkdownPersistenceAdapter<Document>;
+    debounceMs?: number;
+    document: Document;
+    fromStorageContent?: (content: string) => string;
+    lifecycleFlush?: boolean;
+    maxWaitMs?: number;
+    onBlur?: MarkdownEditorProps['onBlur'];
+    onDocumentChange?: (document: Document) => void;
+    onError?: (error: Error) => void;
+    onLocalChange?: (content: string) => void;
+    onStatusChange?: (status: MarkdownSaveStatus) => void;
+    toStorageContent?: (content: string) => string;
+};
+
+/**
+ * A plugin for the editor.
+ * @group Core
+ */
+declare interface RealmPlugin {
+    init?: (realm: Realm) => void;
+    update?: (realm: Realm) => void;
+    postInit?: (realm: Realm) => void;
+}
+
+declare interface ToMarkdownOptions extends Options {
+}
+
+export { }
+
+
+declare module 'micromark-util-types' {
+    interface TokenTypeMap {
+        comment: 'comment';
+        commentEnd: 'commentEnd';
+        data: 'data';
+    }
+}

package/dist/persistence.js

@@ -0,0 +1,4 @@
+import { PersistentMarkdownEditor } from "./PersistentMarkdownEditor.js";
+export {
+  PersistentMarkdownEditor
+};

package/dist/plugins/codeblock/CodeBlockNode.js

@@ -0,0 +1,183 @@
+import { jsx } from "react/jsx-runtime";
+import { useCellValue } from "@mdxeditor/gurx";
+import { DecoratorNode } from "lexical";
+import React from "react";
+import "./index.js";
+import { voidEmitter } from "../../utils/voidEmitter.js";
+import { codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, NESTED_EDITOR_UPDATED_COMMAND } from "../core/index.js";
+import { findCodeBlockDescriptor } from "./findCodeBlockDescriptor.js";
+class CodeBlockNode extends DecoratorNode {
+  __code;
+  __meta;
+  __language;
+  __focusEmitter = voidEmitter();
+  static getType() {
+    return "codeblock";
+  }
+  static clone(node) {
+    return new CodeBlockNode(node.__code, node.__language, node.__meta, node.__key);
+  }
+  afterCloneFrom(prevNode) {
+    super.afterCloneFrom(prevNode);
+    this.__code = prevNode.__code;
+    this.__meta = prevNode.__meta;
+    this.__language = prevNode.__language;
+    this.__focusEmitter = voidEmitter();
+  }
+  static importJSON(serializedNode) {
+    const { code, meta, language } = serializedNode;
+    return $createCodeBlockNode({
+      code,
+      language,
+      meta
+    });
+  }
+  static importDOM() {
+    return {
+      pre: () => {
+        return {
+          conversion: $convertPreElement,
+          priority: 3
+        };
+      }
+    };
+  }
+  constructor(code, language, meta, key) {
+    super(key);
+    this.__code = code;
+    this.__meta = meta;
+    this.__language = language;
+  }
+  exportJSON() {
+    return {
+      code: this.getCode(),
+      language: this.getLanguage(),
+      meta: this.getMeta(),
+      type: "codeblock",
+      version: 1
+    };
+  }
+  // View
+  createDOM(_config, _editor) {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  getCode() {
+    return this.__code;
+  }
+  getMeta() {
+    return this.__meta;
+  }
+  getLanguage() {
+    return this.__language;
+  }
+  setCode = (code) => {
+    if (code !== this.__code) {
+      this.getWritable().__code = code;
+    }
+  };
+  setMeta = (meta) => {
+    if (meta !== this.__meta) {
+      this.getWritable().__meta = meta;
+    }
+  };
+  setLanguage = (language) => {
+    if (language !== this.__language) {
+      this.getWritable().__language = language;
+    }
+  };
+  select = () => {
+    this.__focusEmitter.publish();
+  };
+  decorate(editor) {
+    return /* @__PURE__ */ jsx(
+      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.createContext(null);
+const CodeBlockEditorContextProvider = ({ parentEditor, lexicalNode, children }) => {
+  const contextValue = React.useMemo(() => {
+    return {
+      lexicalNode,
+      parentEditor,
+      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);
+        });
+      }
+    };
+  }, [lexicalNode, parentEditor]);
+  return /* @__PURE__ */ jsx(CodeBlockEditorContext.Provider, { value: contextValue, children });
+};
+function useCodeBlockEditorContext() {
+  const context = React.useContext(CodeBlockEditorContext);
+  if (!context) {
+    throw new Error("useCodeBlockEditor must be used within a CodeBlockEditor");
+  }
+  return context;
+}
+const CodeBlockEditorContainer = (props) => {
+  const codeBlockEditorDescriptors = useCellValue(codeBlockEditorDescriptors$);
+  const defaultCodeBlockLanguage = useCellValue(defaultCodeBlockLanguage$);
+  const descriptor = findCodeBlockDescriptor(codeBlockEditorDescriptors, props.language, props.meta, defaultCodeBlockLanguage);
+  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__ */ jsx(CodeBlockEditorContextProvider, { parentEditor: props.parentEditor, lexicalNode: props.codeBlockNode, children: /* @__PURE__ */ jsx(Editor, { ...restProps }) });
+};
+function $createCodeBlockNode(options) {
+  const { code = "", language = "", meta = "" } = options;
+  return new CodeBlockNode(code, language, meta);
+}
+function $isCodeBlockNode(node) {
+  return node instanceof CodeBlockNode;
+}
+function $convertPreElement(element) {
+  const preElement = element;
+  const code = preElement.textContent;
+  const classAttribute = element.getAttribute("class") ?? "";
+  const dataLanguageAttribute = element.getAttribute("data-language") ?? "";
+  const languageMatch = /language-(\w+)/.exec(classAttribute);
+  const language = languageMatch ? languageMatch[1] : dataLanguageAttribute;
+  const meta = preElement.getAttribute("data-meta") ?? "";
+  return {
+    node: $createCodeBlockNode({ code, language, meta })
+  };
+}
+export {
+  $convertPreElement,
+  $createCodeBlockNode,
+  $isCodeBlockNode,
+  CodeBlockNode,
+  useCodeBlockEditorContext
+};

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.js

@@ -0,0 +1,23 @@
+import { $createCodeBlockNode } from "./CodeBlockNode.js";
+import { findCodeBlockDescriptor } from "./findCodeBlockDescriptor.js";
+const MdastCodeVisitor = {
+  testNode: (node, { codeBlockEditorDescriptors, defaultCodeBlockLanguage }) => {
+    if (node.type === "code") {
+      const descriptor = findCodeBlockDescriptor(codeBlockEditorDescriptors, node.lang, node.meta, defaultCodeBlockLanguage);
+      return descriptor !== void 0;
+    }
+    return false;
+  },
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto(
+      $createCodeBlockNode({
+        code: mdastNode.value,
+        language: mdastNode.lang ?? "",
+        meta: mdastNode.meta ?? ""
+      })
+    );
+  }
+};
+export {
+  MdastCodeVisitor
+};

package/dist/plugins/codeblock/findCodeBlockDescriptor.js

@@ -0,0 +1,8 @@
+function findCodeBlockDescriptor(descriptors, language, meta, defaultLanguage) {
+  const sortedDescriptors = [...descriptors].sort((a, b) => b.priority - a.priority);
+  const resolvedMeta = meta ?? "";
+  return sortedDescriptors.find((descriptor) => descriptor.match(language ?? "", resolvedMeta)) ?? sortedDescriptors.find((descriptor) => descriptor.match(defaultLanguage ?? "", resolvedMeta));
+}
+export {
+  findCodeBlockDescriptor
+};

package/dist/plugins/codeblock/index.js

@@ -0,0 +1,46 @@
+import { CodeBlockVisitor } from "./CodeBlockVisitor.js";
+import { MdastCodeVisitor } from "./MdastCodeVisitor.js";
+import { Appender, codeBlockEditorDescriptors$, defaultCodeBlockLanguage$, insertDecoratorNode$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+import { $createCodeBlockNode, CodeBlockNode } from "./CodeBlockNode.js";
+import { $convertPreElement, $isCodeBlockNode, useCodeBlockEditorContext } from "./CodeBlockNode.js";
+import { Signal, withLatestFrom, map } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+const insertCodeBlock$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertCodeBlock$,
+      withLatestFrom(defaultCodeBlockLanguage$),
+      map(
+        ([payload, defaultCodeBlockLanguage]) => () => $createCodeBlockNode({ language: defaultCodeBlockLanguage, ...payload })
+      )
+    ),
+    insertDecoratorNode$
+  );
+});
+const appendCodeBlockEditorDescriptor$ = Appender(codeBlockEditorDescriptors$);
+const codeBlockPlugin = realmPlugin({
+  update(realm, params) {
+    realm.pub(defaultCodeBlockLanguage$, params?.defaultCodeBlockLanguage ?? "");
+  },
+  init(realm, params) {
+    realm.pubIn({
+      [addActivePlugin$]: "codeblock",
+      [defaultCodeBlockLanguage$]: params?.defaultCodeBlockLanguage ?? "",
+      [codeBlockEditorDescriptors$]: params?.codeBlockEditorDescriptors ?? [],
+      [addImportVisitor$]: MdastCodeVisitor,
+      [addLexicalNode$]: CodeBlockNode,
+      [addExportVisitor$]: CodeBlockVisitor
+    });
+  }
+});
+export {
+  $convertPreElement,
+  $createCodeBlockNode,
+  $isCodeBlockNode,
+  CodeBlockNode,
+  appendCodeBlockEditorDescriptor$,
+  codeBlockPlugin,
+  defaultCodeBlockLanguage$,
+  insertCodeBlock$,
+  useCodeBlockEditorContext
+};

package/dist/plugins/codemirror/CodeMirrorEditor.js

@@ -0,0 +1,145 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useCellValues } from "@mdxeditor/gurx";
+import React from "react";
+import { EditorIcon } from "../../EditorIcon.js";
+import styles from "../../styles/ui.module.css.js";
+import { useCodeBlockEditorContext } from "../codeblock/CodeBlockNode.js";
+import { useTranslation, readOnly$ } from "../core/index.js";
+import { languages } from "@codemirror/language-data";
+import { EditorState } from "@codemirror/state";
+import { EditorView, lineNumbers, keymap } from "@codemirror/view";
+import { indentWithTab } from "@codemirror/commands";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "codemirror";
+import { $setSelection } from "lexical";
+import { codeMirrorExtensions$, codeMirrorAutoLoadLanguageSupport$, codeBlockLanguages$, getCodeBlockLanguageSelectData, EMPTY_VALUE } from "./index.js";
+import { useCodeMirrorRef } from "./useCodeMirrorRef.js";
+import { Select } from "../toolbar/primitives/select.js";
+const COMMON_STATE_CONFIG_EXTENSIONS = [];
+const CodeMirrorEditor = ({ language, nodeKey, code, focusEmitter }) => {
+  const t = useTranslation();
+  const { parentEditor, lexicalNode } = useCodeBlockEditorContext();
+  const [readOnly, codeMirrorExtensions, autoLoadLanguageSupport, codeBlockLanguages] = useCellValues(
+    readOnly$,
+    codeMirrorExtensions$,
+    codeMirrorAutoLoadLanguageSupport$,
+    codeBlockLanguages$
+  );
+  const codeMirrorRef = useCodeMirrorRef(nodeKey, language, focusEmitter);
+  const { setCode } = useCodeBlockEditorContext();
+  const editorViewRef = React.useRef(null);
+  const elRef = React.useRef(null);
+  const { value: selectValue, items: selectItems } = React.useMemo(
+    () => getCodeBlockLanguageSelectData(codeBlockLanguages, language),
+    [codeBlockLanguages, language]
+  );
+  const setCodeRef = React.useRef(setCode);
+  setCodeRef.current = setCode;
+  codeMirrorRef.current = {
+    getCodemirror: () => editorViewRef.current
+  };
+  React.useEffect(() => {
+    const el = elRef.current;
+    void (async () => {
+      const extensions = [
+        ...codeMirrorExtensions,
+        basicSetup,
+        basicLight,
+        lineNumbers(),
+        keymap.of([indentWithTab]),
+        EditorView.lineWrapping,
+        EditorView.updateListener.of(({ state }) => {
+          setCodeRef.current(state.doc.toString());
+        }),
+        EditorView.domEventHandlers({
+          focus: () => {
+            parentEditor.update(() => {
+              $setSelection(null);
+            });
+          }
+        })
+      ];
+      if (readOnly) {
+        extensions.push(EditorState.readOnly.of(true));
+      }
+      if (language !== "") {
+        const canonical = codeBlockLanguages.keyMap[language] ?? language;
+        const providedSupport = codeBlockLanguages.supportMap[canonical];
+        if (providedSupport) {
+          extensions.push(providedSupport.extension);
+        } else if (autoLoadLanguageSupport) {
+          const languageData = languages.find((l) => {
+            return l.name === language || l.alias.includes(language) || l.extensions.includes(language);
+          });
+          if (languageData) {
+            try {
+              const languageSupport = await languageData.load();
+              extensions.push(languageSupport.extension);
+            } catch (_e) {
+              console.warn("failed to load language support for", language);
+            }
+          }
+        }
+      }
+      el.innerHTML = "";
+      editorViewRef.current = new EditorView({
+        parent: el,
+        state: EditorState.create({ doc: code, extensions })
+      });
+      el.addEventListener("keydown", stopPropagationHandler);
+    })();
+    return () => {
+      editorViewRef.current?.destroy();
+      editorViewRef.current = null;
+      el.removeEventListener("keydown", stopPropagationHandler);
+    };
+  }, [readOnly, language, ...codeMirrorExtensions]);
+  return /* @__PURE__ */ jsxs("div", { className: styles.codeMirrorWrapper, children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.codeMirrorToolbar, children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          disabled: readOnly,
+          value: selectValue,
+          onChange: (language2) => {
+            parentEditor.update(() => {
+              lexicalNode.setLanguage(language2 === EMPTY_VALUE ? "" : language2);
+              setTimeout(() => {
+                parentEditor.update(() => {
+                  lexicalNode.getLatest().select();
+                });
+              });
+            });
+          },
+          triggerTitle: t("codeBlock.selectLanguage", "Select code block language"),
+          placeholder: t("codeBlock.inlineLanguage", "Language"),
+          items: selectItems
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: styles.iconButton,
+          type: "button",
+          disabled: readOnly,
+          title: t("codeblock.delete", "Delete code block"),
+          onClick: (e) => {
+            e.preventDefault();
+            parentEditor.update(() => {
+              lexicalNode.remove();
+            });
+          },
+          children: /* @__PURE__ */ jsx(EditorIcon, { name: "delete" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("div", { ref: elRef })
+  ] });
+};
+function stopPropagationHandler(ev) {
+  ev.stopPropagation();
+}
+export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
+  CodeMirrorEditor
+};