@nkzw/mdx-editor 0.1.0

package/dist/plugins/frontmatter/FrontmatterNode.js

@@ -0,0 +1,70 @@
+import { jsx } from "react/jsx-runtime";
+import { DecoratorNode } from "lexical";
+import { FrontmatterEditor } from "./FrontmatterEditor.js";
+class FrontmatterNode extends DecoratorNode {
+  __yaml;
+  static getType() {
+    return "frontmatter";
+  }
+  static clone(node) {
+    return new FrontmatterNode(node.__yaml, node.__key);
+  }
+  static importJSON(serializedNode) {
+    const { yaml } = serializedNode;
+    const node = $createFrontmatterNode(yaml);
+    return node;
+  }
+  constructor(code, key) {
+    super(key);
+    this.__yaml = code;
+  }
+  exportJSON() {
+    return {
+      yaml: this.getYaml(),
+      type: "frontmatter",
+      version: 1
+    };
+  }
+  // View
+  createDOM(_config) {
+    return document.createElement("div");
+  }
+  updateDOM() {
+    return false;
+  }
+  getYaml() {
+    return this.getLatest().__yaml;
+  }
+  setYaml(yaml) {
+    if (yaml !== this.__yaml) {
+      this.getWritable().__yaml = yaml;
+    }
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ jsx(
+      FrontmatterEditor,
+      {
+        yaml: this.getYaml(),
+        onChange: (yaml) => {
+          editor.update(() => {
+            this.setYaml(yaml);
+          });
+        }
+      }
+    );
+  }
+  isKeyboardSelectable() {
+    return false;
+  }
+}
+function $createFrontmatterNode(yaml) {
+  return new FrontmatterNode(yaml);
+}
+function $isFrontmatterNode(node) {
+  return node instanceof FrontmatterNode;
+}
+export {
+  $createFrontmatterNode,
+  $isFrontmatterNode,
+  FrontmatterNode
+};

package/dist/plugins/frontmatter/LexicalFrontmatterVisitor.js

@@ -0,0 +1,10 @@
+import { $isFrontmatterNode } from "./FrontmatterNode.js";
+const LexicalFrontmatterVisitor = {
+  testLexicalNode: $isFrontmatterNode,
+  visitLexicalNode: ({ actions, lexicalNode }) => {
+    actions.addAndStepInto("yaml", { value: lexicalNode.getYaml() });
+  }
+};
+export {
+  LexicalFrontmatterVisitor
+};

package/dist/plugins/frontmatter/MdastFrontmatterVisitor.js

@@ -0,0 +1,10 @@
+import { $createFrontmatterNode } from "./FrontmatterNode.js";
+const MdastFrontmatterVisitor = {
+  testNode: "yaml",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto($createFrontmatterNode(mdastNode.value));
+  }
+};
+export {
+  MdastFrontmatterVisitor
+};

package/dist/plugins/frontmatter/index.js

@@ -0,0 +1,113 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { createRootEditorSubscription$, rootEditor$, addToMarkdownExtension$, addExportVisitor$, addImportVisitor$, addLexicalNode$, addSyntaxExtension$, addMdastExtension$ } from "../core/index.js";
+import { Cell, Action, withLatestFrom } from "@mdxeditor/gurx";
+import { $getRoot, KEY_DOWN_COMMAND, $getSelection, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_CRITICAL } from "lexical";
+import { frontmatterToMarkdown, frontmatterFromMarkdown } from "mdast-util-frontmatter";
+import { frontmatter } from "micromark-extension-frontmatter";
+import { $isFrontmatterNode, $createFrontmatterNode, FrontmatterNode } from "./FrontmatterNode.js";
+import { LexicalFrontmatterVisitor } from "./LexicalFrontmatterVisitor.js";
+import { MdastFrontmatterVisitor } from "./MdastFrontmatterVisitor.js";
+const frontmatterDialogOpen$ = Cell(false);
+const insertFrontmatter$ = Action((r) => {
+  r.sub(r.pipe(insertFrontmatter$, withLatestFrom(rootEditor$)), ([, rootEditor]) => {
+    rootEditor?.update(() => {
+      const firstItem = $getRoot().getFirstChild();
+      if (!$isFrontmatterNode(firstItem)) {
+        const fmNode = $createFrontmatterNode('"": ""');
+        if (firstItem) {
+          firstItem.insertBefore(fmNode);
+        } else {
+          $getRoot().append(fmNode);
+        }
+      }
+    });
+    r.pub(frontmatterDialogOpen$, true);
+  });
+});
+const removeFrontmatter$ = Action((r) => {
+  r.sub(r.pipe(removeFrontmatter$, withLatestFrom(rootEditor$)), ([, rootEditor]) => {
+    rootEditor?.update(() => {
+      const firstItem = $getRoot().getFirstChild();
+      if ($isFrontmatterNode(firstItem)) {
+        firstItem.remove();
+      }
+    });
+    r.pub(frontmatterDialogOpen$, false);
+  });
+});
+const hasFrontmatter$ = Cell(false, (r) => {
+  r.pub(createRootEditorSubscription$, (rootEditor) => {
+    return rootEditor.registerUpdateListener(({ editorState }) => {
+      editorState.read(() => {
+        r.pub(hasFrontmatter$, $isFrontmatterNode($getRoot().getFirstChild()));
+      });
+    });
+  });
+});
+const frontmatterPlugin = realmPlugin({
+  init: (realm) => {
+    realm.pubIn({
+      [addMdastExtension$]: frontmatterFromMarkdown("yaml"),
+      [addSyntaxExtension$]: frontmatter(),
+      [addLexicalNode$]: FrontmatterNode,
+      [addImportVisitor$]: MdastFrontmatterVisitor,
+      [addExportVisitor$]: LexicalFrontmatterVisitor,
+      [addToMarkdownExtension$]: frontmatterToMarkdown("yaml"),
+      [createRootEditorSubscription$]: (editor) => {
+        return editor.registerCommand(
+          KEY_DOWN_COMMAND,
+          (event) => {
+            let shouldPrevent = false;
+            editor.read(() => {
+              const selection = $getSelection();
+              if ($isRangeSelection(selection)) {
+                if (selection.isCollapsed() && selection.anchor.offset === 0 && selection.focus.offset === 0 && event.key === "Backspace") {
+                  let node = selection.getNodes()[0];
+                  if ($isTextNode(node)) {
+                    node = node.getParent();
+                  }
+                  const prevSibling = node?.getPreviousSibling();
+                  if ($isFrontmatterNode(prevSibling)) {
+                    shouldPrevent = true;
+                    event.preventDefault();
+                  }
+                } else {
+                  const firstNode = selection.getNodes()[0];
+                  if ($isFrontmatterNode(firstNode)) {
+                    const yaml = firstNode.getYaml();
+                    setTimeout(() => {
+                      editor.update(
+                        () => {
+                          const firstItem = $getRoot().getFirstChild();
+                          if (!$isFrontmatterNode(firstItem)) {
+                            $getRoot().splice(0, 0, [$createFrontmatterNode(yaml)]);
+                          }
+                        },
+                        { discrete: true }
+                      );
+                    });
+                  }
+                }
+              }
+            });
+            if (shouldPrevent) {
+              return true;
+            }
+            return false;
+          },
+          COMMAND_PRIORITY_CRITICAL
+        );
+      }
+    });
+  }
+});
+export {
+  $createFrontmatterNode,
+  $isFrontmatterNode,
+  FrontmatterNode,
+  frontmatterDialogOpen$,
+  frontmatterPlugin,
+  hasFrontmatter$,
+  insertFrontmatter$,
+  removeFrontmatter$
+};

package/dist/plugins/headings/LexicalHeadingVisitor.js

@@ -0,0 +1,11 @@
+import { $isHeadingNode } from "@lexical/rich-text";
+const LexicalHeadingVisitor = {
+  testLexicalNode: $isHeadingNode,
+  visitLexicalNode: ({ lexicalNode, actions }) => {
+    const depth = parseInt(lexicalNode.getTag()[1], 10);
+    actions.addAndStepInto("heading", { depth });
+  }
+};
+export {
+  LexicalHeadingVisitor
+};

package/dist/plugins/headings/MdastHeadingVisitor.js

@@ -0,0 +1,10 @@
+import { $createHeadingNode } from "@lexical/rich-text";
+const MdastHeadingVisitor = {
+  testNode: "heading",
+  visitNode: function({ mdastNode, actions }) {
+    actions.addAndStepInto($createHeadingNode(`h${mdastNode.depth}`));
+  }
+};
+export {
+  MdastHeadingVisitor
+};

package/dist/plugins/headings/index.js

@@ -0,0 +1,63 @@
+import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
+import { Cell } from "@mdxeditor/gurx";
+import { KEY_DOWN_COMMAND, $createParagraphNode, COMMAND_PRIORITY_LOW } from "lexical";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { controlOrMeta } from "../../utils/detectMac.js";
+import { createRootEditorSubscription$, convertSelectionToNode$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
+const FORMATTING_KEYS = ["Digit0", "Digit1", "Digit2", "Digit3", "Digit4", "Digit5", "Digit6"];
+const ALL_HEADING_LEVELS = [1, 2, 3, 4, 5, 6];
+const CODE_TO_HEADING_LEVEL_MAP = {
+  Digit1: 1,
+  Digit2: 2,
+  Digit3: 3,
+  Digit4: 4,
+  Digit5: 5,
+  Digit6: 6
+};
+const allowedHeadingLevels$ = Cell(ALL_HEADING_LEVELS, (r) => {
+  r.pub(createRootEditorSubscription$, (theRootEditor) => {
+    return theRootEditor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const { code, ctrlKey, metaKey, altKey } = event;
+        if (FORMATTING_KEYS.includes(code) && controlOrMeta(metaKey, ctrlKey) && altKey) {
+          event.preventDefault();
+          theRootEditor.update(() => {
+            if (code === "Digit0") {
+              r.pub(convertSelectionToNode$, () => $createParagraphNode());
+            } else {
+              const allowedHeadingLevels = r.getValue(allowedHeadingLevels$);
+              const requestedHeadingLevel = CODE_TO_HEADING_LEVEL_MAP[code];
+              if (allowedHeadingLevels.includes(requestedHeadingLevel)) {
+                r.pub(convertSelectionToNode$, () => $createHeadingNode(`h${requestedHeadingLevel}`));
+              }
+            }
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  });
+});
+const headingsPlugin = realmPlugin({
+  init(realm) {
+    realm.pubIn({
+      [addActivePlugin$]: "headings",
+      [addImportVisitor$]: MdastHeadingVisitor,
+      [addLexicalNode$]: HeadingNode,
+      [addExportVisitor$]: LexicalHeadingVisitor
+    });
+  },
+  update(realm, params) {
+    realm.pub(allowedHeadingLevels$, params?.allowedHeadingLevels ?? ALL_HEADING_LEVELS);
+  }
+});
+export {
+  ALL_HEADING_LEVELS,
+  allowedHeadingLevels$,
+  headingsPlugin
+};

package/dist/plugins/image/EditImageToolbar.js

@@ -0,0 +1,58 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+import classNames from "classnames";
+import { $getNodeByKey } from "lexical";
+import { disableImageSettingsButton$, openEditImageDialog$, parseImageDimension } from "./index.js";
+import styles from "../../styles/ui.module.css.js";
+import { iconComponentFor$, readOnly$, useTranslation } from "../core/index.js";
+function EditImageToolbar(props) {
+  const { nodeKey, imageSource, initialImagePath, title, alt, width, height } = props;
+  const [disableImageSettingsButton, iconComponentFor, readOnly] = useCellValues(disableImageSettingsButton$, iconComponentFor$, readOnly$);
+  const [editor] = useLexicalComposerContext();
+  const openEditImageDialog = usePublisher(openEditImageDialog$);
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs("div", { className: styles.editImageToolbar, children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: styles.iconButton,
+        type: "button",
+        title: t("imageEditor.deleteImage", "Delete image"),
+        disabled: readOnly,
+        onClick: (e) => {
+          e.preventDefault();
+          editor.update(() => {
+            $getNodeByKey(nodeKey)?.remove();
+          });
+        },
+        children: iconComponentFor("delete_small")
+      }
+    ),
+    !disableImageSettingsButton && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: classNames(styles.iconButton, styles.editImageButton),
+        title: t("imageEditor.editImage", "Edit image"),
+        disabled: readOnly,
+        onClick: () => {
+          openEditImageDialog({
+            nodeKey,
+            initialValues: {
+              src: initialImagePath ?? imageSource,
+              title,
+              altText: alt,
+              width: parseImageDimension(width),
+              height: parseImageDimension(height)
+            }
+          });
+        },
+        children: iconComponentFor("settings")
+      }
+    )
+  ] });
+}
+export {
+  EditImageToolbar
+};

package/dist/plugins/image/ImageDialog.js

@@ -0,0 +1,132 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import { useForm } from "react-hook-form";
+import styles from "../../styles/ui.module.css.js";
+import { editorRootElementRef$, useTranslation } from "../core/index.js";
+import { imageAutocompleteSuggestions$, imageDialogState$, imageUploadHandler$, allowSetImageDimensions$, saveImage$, closeImageDialog$ } from "./index.js";
+import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const ImageDialog = () => {
+  const [imageAutocompleteSuggestions, state, editorRootElementRef, imageUploadHandler, allowSetImageDimensions] = useCellValues(
+    imageAutocompleteSuggestions$,
+    imageDialogState$,
+    editorRootElementRef$,
+    imageUploadHandler$,
+    allowSetImageDimensions$
+  );
+  const saveImage = usePublisher(saveImage$);
+  const closeImageDialog = usePublisher(closeImageDialog$);
+  const t = useTranslation();
+  const { register, handleSubmit, control, setValue, reset } = useForm({
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    values: state.type === "editing" ? state.initialValues : {}
+  });
+  const resetFormState = () => {
+    reset({ src: "", title: "", altText: "", width: void 0, height: void 0 });
+  };
+  if (state.type === "inactive") return null;
+  return /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) {
+          closeImageDialog();
+          resetFormState();
+        }
+      },
+      children: /* @__PURE__ */ jsxs(Dialog.Portal, { container: editorRootElementRef?.current, children: [
+        /* @__PURE__ */ jsx(Dialog.Overlay, { className: styles.dialogOverlay }),
+        /* @__PURE__ */ jsxs(
+          Dialog.Content,
+          {
+            className: styles.dialogContent,
+            onOpenAutoFocus: (e) => {
+              e.preventDefault();
+            },
+            children: [
+              /* @__PURE__ */ jsx(Dialog.Title, { children: t("uploadImage.dialogTitle", "Upload an image") }),
+              /* @__PURE__ */ jsxs(
+                "form",
+                {
+                  onSubmit: async (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    await handleSubmit(saveImage)(e);
+                    resetFormState();
+                  },
+                  className: styles.multiFieldForm,
+                  children: [
+                    imageUploadHandler === null ? /* @__PURE__ */ jsx("input", { type: "hidden", accept: "image/*", ...register("file") }) : /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "file", children: t("uploadImage.uploadInstructions", "Upload an image from your device:") }),
+                      /* @__PURE__ */ jsx("input", { type: "file", accept: "image/*", ...register("file") })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "src", children: imageUploadHandler !== null ? t("uploadImage.addViaUrlInstructions", "Or add an image from an URL:") : t("uploadImage.addViaUrlInstructionsNoUpload", "Add an image from an URL:") }),
+                      /* @__PURE__ */ jsx(
+                        DownshiftAutoComplete,
+                        {
+                          register,
+                          initialInputValue: state.type === "editing" ? state.initialValues.src ?? "" : "",
+                          inputName: "src",
+                          suggestions: imageAutocompleteSuggestions,
+                          setValue,
+                          control,
+                          placeholder: t("uploadImage.autoCompletePlaceholder", "Select or paste an image src")
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "alt", children: t("uploadImage.alt", "Alt:") }),
+                      /* @__PURE__ */ jsx("input", { type: "text", ...register("altText"), className: styles.textInput })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                      /* @__PURE__ */ jsx("label", { htmlFor: "title", children: t("uploadImage.title", "Title:") }),
+                      /* @__PURE__ */ jsx("input", { type: "text", ...register("title"), className: styles.textInput })
+                    ] }),
+                    allowSetImageDimensions && /* @__PURE__ */ jsxs("div", { className: styles.imageDimensionsContainer, children: [
+                      /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                        /* @__PURE__ */ jsx("label", { htmlFor: "width", children: t("uploadImage.width", "Width:") }),
+                        /* @__PURE__ */ jsx("input", { type: "number", min: 0, ...register("width"), className: styles.textInput })
+                      ] }),
+                      /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+                        /* @__PURE__ */ jsx("label", { htmlFor: "height", children: t("uploadImage.height", "Height:") }),
+                        /* @__PURE__ */ jsx("input", { type: "number", min: 0, ...register("height"), className: styles.textInput })
+                      ] })
+                    ] }),
+                    /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" }, children: [
+                      /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "submit",
+                          title: t("dialogControls.save", "Save"),
+                          "aria-label": t("dialogControls.save", "Save"),
+                          className: classNames(styles.primaryButton),
+                          children: t("dialogControls.save", "Save")
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "reset",
+                          title: t("dialogControls.cancel", "Cancel"),
+                          "aria-label": t("dialogControls.cancel", "Cancel"),
+                          className: classNames(styles.secondaryButton),
+                          children: t("dialogControls.cancel", "Cancel")
+                        }
+                      ) })
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  ImageDialog
+};