@mdxeditor/editor 0.9.0 → 0.10.0-alpha.1

package/dist/plugins/directives/index.js

@@ -0,0 +1,53 @@
+import { coreSystem } from "../core/index.js";
+import { directive } from "micromark-extension-directive";
+import { directiveFromMarkdown, directiveToMarkdown } from "mdast-util-directive";
+import { $createDirectiveNode, DirectiveNode } from "./DirectiveNode.js";
+import { DirectiveVisitor } from "./DirectiveVisitor.js";
+import { MdastDirectiveVisitor } from "./MdastDirectiveVisitor.js";
+import { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const directivesSystem = system(
+  (r, [{ insertDecoratorNode }]) => {
+    const directiveDescriptors = r.node([]);
+    const insertDirective = r.node();
+    r.link(
+      r.pipe(
+        insertDirective,
+        r.o.map((payload) => {
+          return () => $createDirectiveNode({ children: [], ...payload });
+        })
+      ),
+      insertDecoratorNode
+    );
+    return {
+      directiveDescriptors,
+      insertDirective
+    };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  directivesPlugin,
+  /** @internal */
+  directivesPluginHooks
+] = realmPlugin({
+  id: "directives",
+  systemSpec: directivesSystem,
+  applyParamsToSystem: (realm, params) => {
+    realm.pubKey("directiveDescriptors", (params == null ? void 0 : params.directiveDescriptors) || []);
+  },
+  init: (realm, _) => {
+    realm.pubKey("addMdastExtension", directiveFromMarkdown);
+    realm.pubKey("addSyntaxExtension", directive());
+    realm.pubKey("addImportVisitor", MdastDirectiveVisitor);
+    realm.pubKey("addLexicalNode", DirectiveNode);
+    realm.pubKey("addExportVisitor", DirectiveVisitor);
+    realm.pubKey("addToMarkdownExtension", directiveToMarkdown);
+  }
+});
+export {
+  directivesPlugin,
+  directivesPluginHooks,
+  directivesSystem
+};

package/dist/plugins/frontmatter/FrontmatterEditor.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface FrontmatterEditorProps {
+    yaml: string;
+    onChange: (yaml: string) => void;
+}
+export declare const FrontmatterEditor: ({ yaml, onChange }: FrontmatterEditorProps) => React.JSX.Element;

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -0,0 +1,69 @@
+import classNames from "classnames";
+import YamlParser from "js-yaml";
+import React__default from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import DropDownIcon from "../../icons/arrow_drop_down.svg.js";
+import ArrowRight from "../../icons/arrow_right.svg.js";
+import DeleteIcon from "../../icons/delete.svg.js";
+import styles from "../../styles/ui.module.css.js";
+const FrontmatterEditor = ({ yaml, onChange }) => {
+  const [expanded, setExpanded] = React__default.useState(true);
+  const yamlConfig = React__default.useMemo(() => {
+    if (!yaml) {
+      return [];
+    }
+    return Object.entries(YamlParser.load(yaml)).map(([key, value]) => ({ key, value }));
+  }, [yaml]);
+  const { register, control, watch } = useForm({
+    defaultValues: {
+      yamlConfig
+    }
+  });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "yamlConfig"
+  });
+  React__default.useEffect(() => {
+    const subscription = watch(({ yamlConfig: yamlConfig2 }) => {
+      const yaml2 = yamlConfig2.reduce((acc, { key, value }) => {
+        if (key && value) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+      onChange(YamlParser.dump(yaml2).trim());
+    });
+    return () => subscription.unsubscribe();
+  }, [watch, onChange]);
+  return /* @__PURE__ */ React__default.createElement("div", { className: styles.frontmatterWrapper, "data-expanded": expanded, "data-editor-type": "frontmatter" }, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.frontmatterToggleButton,
+      onClick: (e) => {
+        e.preventDefault();
+        setExpanded((v) => !v);
+      }
+    },
+    expanded ? /* @__PURE__ */ React__default.createElement(DropDownIcon, null) : /* @__PURE__ */ React__default.createElement(ArrowRight, null),
+    "Document frontmatter"
+  ), expanded && /* @__PURE__ */ React__default.createElement("form", null, /* @__PURE__ */ React__default.createElement("table", { className: styles.propertyEditorTable }, /* @__PURE__ */ React__default.createElement("colgroup", null, /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null), /* @__PURE__ */ React__default.createElement("col", null)), /* @__PURE__ */ React__default.createElement("thead", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("th", null, "Key"), /* @__PURE__ */ React__default.createElement("th", null, "Value"), /* @__PURE__ */ React__default.createElement("th", null))), /* @__PURE__ */ React__default.createElement("tbody", null, fields.map((item, index) => {
+    return /* @__PURE__ */ React__default.createElement("tr", { key: item.id }, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }) })), /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement("button", { type: "button", onClick: () => remove(index), className: styles.iconButton }, /* @__PURE__ */ React__default.createElement(DeleteIcon, null))));
+  })), /* @__PURE__ */ React__default.createElement("tfoot", null, /* @__PURE__ */ React__default.createElement("tr", null, /* @__PURE__ */ React__default.createElement("td", null, /* @__PURE__ */ React__default.createElement(
+    "button",
+    {
+      className: styles.primaryButton,
+      type: "button",
+      onClick: () => {
+        append({ key: "", value: "" });
+      }
+    },
+    "Add new key"
+  )))))));
+};
+const TableInput = React__default.forwardRef(({ className, autofocusIfEmpty, ...props }, ref) => {
+  props.autoFocus = Boolean(!props.value && autofocusIfEmpty);
+  return /* @__PURE__ */ React__default.createElement("input", { className: classNames(styles.propertyEditorInput, className), ...props, ref });
+});
+export {
+  FrontmatterEditor
+};

package/dist/plugins/frontmatter/FrontmatterNode.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { DecoratorNode, EditorConfig, LexicalEditor, LexicalNode, NodeKey, SerializedLexicalNode, Spread } from 'lexical';
+/**
+ * A serialized representation of an {@link FrontmatterNode}.
+ */
+export type SerializedFrontmatterNode = Spread<{
+    yaml: string;
+    version: 1;
+}, SerializedLexicalNode>;
+/**
+ * Represents {@link https://daily-dev-tips.com/posts/what-exactly-is-frontmatter/ | the frontmatter} of the markdown document.
+ * Use {@link "$createFrontmatterNode"} to construct one.
+ */
+export declare class FrontmatterNode extends DecoratorNode<JSX.Element> {
+    __yaml: string;
+    static getType(): string;
+    static clone(node: FrontmatterNode): FrontmatterNode;
+    static importJSON(serializedNode: SerializedFrontmatterNode): FrontmatterNode;
+    constructor(code: string, key?: NodeKey);
+    exportJSON(): SerializedFrontmatterNode;
+    createDOM(_config: EditorConfig): HTMLDivElement;
+    updateDOM(): false;
+    getYaml(): string;
+    setYaml(yaml: string): void;
+    decorate(editor: LexicalEditor): JSX.Element;
+}
+/**
+ * Creates a {@link FrontmatterNode}.
+ * @param yaml - The YAML string of the frontmatter.
+ */
+export declare function $createFrontmatterNode(yaml: string): FrontmatterNode;
+/**
+ * Returns `true` if the given node is a {@link FrontmatterNode}.
+ */
+export declare function $isFrontmatterNode(node: LexicalNode | null | undefined): node is FrontmatterNode;

package/dist/plugins/frontmatter/FrontmatterNode.js

@@ -0,0 +1,71 @@
+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 { DecoratorNode } from "lexical";
+import React__default from "react";
+import { FrontmatterEditor } from "./FrontmatterEditor.js";
+class FrontmatterNode extends DecoratorNode {
+  constructor(code, key) {
+    super(key);
+    __publicField(this, "__yaml");
+    this.__yaml = code;
+  }
+  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;
+  }
+  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__ */ React__default.createElement(
+      FrontmatterEditor,
+      {
+        yaml: this.getYaml(),
+        onChange: (yaml) => editor == null ? void 0 : editor.update(() => {
+          this.setYaml(yaml);
+        })
+      }
+    );
+  }
+}
+function $createFrontmatterNode(yaml) {
+  return new FrontmatterNode(yaml);
+}
+function $isFrontmatterNode(node) {
+  return node instanceof FrontmatterNode;
+}
+export {
+  $createFrontmatterNode,
+  $isFrontmatterNode,
+  FrontmatterNode
+};

package/dist/plugins/frontmatter/LexicalFrontmatterVisitor.d.ts

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

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.d.ts

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

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
+};