@nkzw/mdx-editor 0.1.0

package/dist/plugins/core/ui/DownshiftAutoComplete.js

@@ -0,0 +1,89 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCombobox } from "downshift";
+import React from "react";
+import { Controller } from "react-hook-form";
+import { EditorIcon } from "../../../EditorIcon.js";
+import styles from "../../../styles/ui.module.css.js";
+const MAX_SUGGESTIONS = 20;
+const DownshiftAutoComplete = (props) => {
+  if (props.suggestions.length > 0) {
+    return /* @__PURE__ */ jsx(DownshiftAutoCompleteWithSuggestions, { ...props });
+  } else {
+    return /* @__PURE__ */ jsx("input", { className: styles.textInput, size: 40, autoFocus: true, ...props.register(props.inputName) });
+  }
+};
+const DownshiftAutoCompleteWithSuggestions = ({
+  autofocus,
+  suggestions,
+  control,
+  inputName,
+  placeholder,
+  initialInputValue,
+  setValue
+}) => {
+  const [items, setItems] = React.useState(suggestions.slice(0, MAX_SUGGESTIONS));
+  const enableAutoComplete = suggestions.length > 0;
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue,
+    onInputValueChange({ inputValue = "" }) {
+      setValue(inputName, inputValue);
+      inputValue = inputValue.toLowerCase() || "";
+      const matchingItems = [];
+      for (const suggestion of suggestions) {
+        if (suggestion.toLowerCase().includes(inputValue)) {
+          matchingItems.push(suggestion);
+          if (matchingItems.length >= MAX_SUGGESTIONS) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ jsxs("div", { className: styles.downshiftAutocompleteContainer, children: [
+    /* @__PURE__ */ jsxs("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.downshiftInputWrapper, children: [
+      /* @__PURE__ */ jsx(
+        Controller,
+        {
+          name: inputName,
+          control,
+          render: ({ field }) => {
+            const downshiftSrcProps = getInputProps();
+            return /* @__PURE__ */ jsx(
+              "input",
+              {
+                ...downshiftSrcProps,
+                name: field.name,
+                placeholder,
+                className: styles.downshiftInput,
+                size: 30,
+                "data-editor-dialog": true,
+                autoFocus: autofocus
+              }
+            );
+          }
+        }
+      ),
+      enableAutoComplete && /* @__PURE__ */ jsx("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps(), children: /* @__PURE__ */ jsx(EditorIcon, { name: "chevron-down" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: styles.downshiftAutocompleteContainer, children: /* @__PURE__ */ jsx("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible, children: items.map((item, index) => /* @__PURE__ */ jsx(
+      "li",
+      {
+        "data-selected": selectedItem === item,
+        "data-highlighted": highlightedIndex === index,
+        ...getItemProps({ item, index }),
+        children: item
+      },
+      `${item}${index}`
+    )) }) })
+  ] });
+};
+export {
+  DownshiftAutoComplete,
+  DownshiftAutoCompleteWithSuggestions
+};

package/dist/plugins/core/ui/PopoverUtils.js

@@ -0,0 +1,22 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import * as RadixPopover from "@radix-ui/react-popover";
+import { editorRootElementRef$ } from "../index.js";
+import styles from "../../../styles/ui.module.css.js";
+import { useCellValue } from "@mdxeditor/gurx";
+const PopoverPortal = (props) => {
+  const editorRootElementRef = useCellValue(editorRootElementRef$);
+  return /* @__PURE__ */ jsx(RadixPopover.Portal, { ...props, container: editorRootElementRef?.current });
+};
+const PopoverContent = React.forwardRef(
+  (props, ref) => {
+    return /* @__PURE__ */ jsxs(RadixPopover.Content, { ...props, className: styles.popoverContent, sideOffset: 5, side: "top", ref, children: [
+      /* @__PURE__ */ jsx("span", { className: styles.popoverArrow, children: /* @__PURE__ */ jsx(RadixPopover.Arrow, {}) }),
+      props.children
+    ] });
+  }
+);
+export {
+  PopoverContent,
+  PopoverPortal
+};

package/dist/plugins/diff-source/DiffSourceWrapper.js

@@ -0,0 +1,24 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { DiffViewer } from "./DiffViewer.js";
+import { SourceEditor } from "./SourceEditor.js";
+import { markdownProcessingError$, viewMode$ } from "../core/index.js";
+import styles from "../../styles/ui.module.css.js";
+import { useCellValues } from "@mdxeditor/gurx";
+const DiffSourceWrapper = ({ children }) => {
+  const [error, viewMode] = useCellValues(markdownProcessingError$, viewMode$);
+  return /* @__PURE__ */ jsxs("div", { className: "mdxeditor-diff-source-wrapper", children: [
+    error ? /* @__PURE__ */ jsxs("div", { className: styles.markdownParseError, children: [
+      /* @__PURE__ */ jsxs("p", { children: [
+        error.error,
+        "."
+      ] }),
+      /* @__PURE__ */ jsx("p", { children: "You can fix the errors in source mode and switch to rich text mode when you are ready." })
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mdxeditor-rich-text-editor", style: { display: viewMode === "rich-text" && error == null ? "block" : "none" }, children }),
+    viewMode === "diff" ? /* @__PURE__ */ jsx(DiffViewer, {}) : null,
+    viewMode === "source" ? /* @__PURE__ */ jsx(SourceEditor, {}) : null
+  ] });
+};
+export {
+  DiffSourceWrapper
+};

package/dist/plugins/diff-source/DiffViewer.js

@@ -0,0 +1,84 @@
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+import { diffMarkdown$, readOnlyDiff$, cmExtensions$ } from "./index.js";
+import { markdown$, readOnly$, markdownSourceEditorValue$, onBlur$ } from "../core/index.js";
+import { MergeView } from "@codemirror/merge";
+import { EditorState } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { COMMON_STATE_CONFIG_EXTENSIONS } from "./SourceEditor.js";
+import { useRealm, useCellValues, usePublisher, useCellValue } from "@mdxeditor/gurx";
+function setContent(view, content) {
+  if (view !== void 0) {
+    view.dispatch({ changes: { from: 0, to: view.state.doc.length, insert: content } });
+  }
+}
+const DiffViewer = () => {
+  const realm = useRealm();
+  const [newMarkdown, oldMarkdown, readOnly, readOnlyDiff] = useCellValues(markdown$, diffMarkdown$, readOnly$, readOnlyDiff$);
+  const onUpdate = usePublisher(markdownSourceEditorValue$);
+  const elRef = React.useRef(null);
+  const cmMergeViewRef = React.useRef(null);
+  const cmExtensions = useCellValue(cmExtensions$);
+  const triggerOnBlur = usePublisher(onBlur$);
+  React.useEffect(() => {
+    return realm.sub(diffMarkdown$, (newDiffMarkdown) => {
+      setContent(cmMergeViewRef.current?.a, newDiffMarkdown);
+    });
+  }, [realm]);
+  React.useEffect(() => {
+    return realm.sub(markdown$, (newMarkdown2) => {
+      setContent(cmMergeViewRef.current?.b, newMarkdown2);
+    });
+  }, [realm]);
+  React.useEffect(() => {
+    const isReadOnly = readOnly || readOnlyDiff;
+    const revertParams = isReadOnly ? {
+      renderRevertControl: void 0,
+      revertControls: void 0
+    } : {
+      renderRevertControl: () => {
+        const el = document.createElement("button");
+        el.classList.add("cm-merge-revert");
+        el.appendChild(document.createTextNode("⮕"));
+        return el;
+      },
+      revertControls: "a-to-b"
+    };
+    cmMergeViewRef.current = new MergeView({
+      ...revertParams,
+      parent: elRef.current,
+      orientation: "a-b",
+      gutter: true,
+      a: {
+        doc: oldMarkdown,
+        extensions: [...cmExtensions, ...COMMON_STATE_CONFIG_EXTENSIONS, EditorState.readOnly.of(true)]
+      },
+      b: {
+        doc: newMarkdown,
+        extensions: [
+          ...cmExtensions,
+          ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorState.readOnly.of(isReadOnly),
+          EditorView.updateListener.of(({ state }) => {
+            const md = state.doc.toString();
+            onUpdate(md);
+          }),
+          EditorView.focusChangeEffect.of((_, focused) => {
+            if (!focused) {
+              triggerOnBlur(new FocusEvent("blur"));
+            }
+            return null;
+          })
+        ]
+      }
+    });
+    return () => {
+      cmMergeViewRef.current?.destroy();
+      cmMergeViewRef.current = null;
+    };
+  }, [onUpdate, cmExtensions]);
+  return /* @__PURE__ */ jsx("div", { ref: elRef, className: "mdxeditor-diff-editor" });
+};
+export {
+  DiffViewer
+};

package/dist/plugins/diff-source/SourceEditor.js

@@ -0,0 +1,60 @@
+import { jsx } from "react/jsx-runtime";
+import { markdown } from "@codemirror/lang-markdown";
+import { EditorState } from "@codemirror/state";
+import { EditorView, lineNumbers } from "@codemirror/view";
+import { basicLight } from "cm6-theme-basic-light";
+import { basicSetup } from "codemirror";
+import React from "react";
+import { cmExtensions$ } from "./index.js";
+import { markdown$, readOnly$, markdownSourceEditorValue$, onBlur$ } from "../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const COMMON_STATE_CONFIG_EXTENSIONS = [
+  basicSetup,
+  basicLight,
+  markdown(),
+  lineNumbers(),
+  EditorView.lineWrapping
+];
+const SourceEditor = () => {
+  const [markdown2, readOnly, cmExtensions] = useCellValues(markdown$, readOnly$, cmExtensions$);
+  const updateMarkdown = usePublisher(markdownSourceEditorValue$);
+  const triggerOnBlur = usePublisher(onBlur$);
+  const editorViewRef = React.useRef(null);
+  const ref = React.useCallback(
+    (el) => {
+      if (el !== null) {
+        const extensions = [
+          // custom extensions should come first so that you can override the default extensions
+          ...cmExtensions,
+          ...COMMON_STATE_CONFIG_EXTENSIONS,
+          EditorView.updateListener.of(({ state }) => {
+            updateMarkdown(state.doc.toString());
+          }),
+          EditorView.focusChangeEffect.of((_, focused) => {
+            if (!focused) {
+              triggerOnBlur(new FocusEvent("blur"));
+            }
+            return null;
+          })
+        ];
+        if (readOnly) {
+          extensions.push(EditorState.readOnly.of(true));
+        }
+        el.innerHTML = "";
+        editorViewRef.current = new EditorView({
+          parent: el,
+          state: EditorState.create({ doc: markdown2, extensions })
+        });
+      } else {
+        editorViewRef.current?.destroy();
+        editorViewRef.current = null;
+      }
+    },
+    [markdown2, readOnly, updateMarkdown, cmExtensions, triggerOnBlur]
+  );
+  return /* @__PURE__ */ jsx("div", { ref, className: "cm-sourceView mdxeditor-source-editor" });
+};
+export {
+  COMMON_STATE_CONFIG_EXTENSIONS,
+  SourceEditor
+};

package/dist/plugins/diff-source/index.js

@@ -0,0 +1,27 @@
+import { viewMode$, addEditorWrapper$ } from "../core/index.js";
+import { DiffSourceWrapper } from "./DiffSourceWrapper.js";
+import { Cell } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+const diffMarkdown$ = Cell("");
+const cmExtensions$ = Cell([]);
+const readOnlyDiff$ = Cell(false);
+const diffSourcePlugin = realmPlugin({
+  update: (r, params) => {
+    r.pub(diffMarkdown$, params?.diffMarkdown ?? "");
+  },
+  init(r, params) {
+    r.pubIn({
+      [diffMarkdown$]: params?.diffMarkdown ?? "",
+      [cmExtensions$]: params?.codeMirrorExtensions ?? [],
+      [addEditorWrapper$]: DiffSourceWrapper,
+      [readOnlyDiff$]: params?.readOnlyDiff ?? false,
+      [viewMode$]: params?.viewMode ?? "rich-text"
+    });
+  }
+});
+export {
+  cmExtensions$,
+  diffMarkdown$,
+  diffSourcePlugin,
+  readOnlyDiff$
+};

package/dist/plugins/directives/DirectiveNode.js

@@ -0,0 +1,107 @@
+import { jsx } from "react/jsx-runtime";
+import { DecoratorNode } from "lexical";
+import { NestedEditorsContext } from "../core/NestedLexicalEditor.js";
+import { voidEmitter } from "../../utils/voidEmitter.js";
+import { useCellValues } from "@mdxeditor/gurx";
+import { directiveDescriptors$ } from "../core/index.js";
+class DirectiveNode extends DecoratorNode {
+  /** @internal */
+  __mdastNode;
+  /** @internal */
+  __focusEmitter = voidEmitter();
+  /** @internal */
+  static getType() {
+    return "directive";
+  }
+  /** @internal */
+  static clone(node) {
+    return new DirectiveNode(structuredClone(node.__mdastNode), node.__key);
+  }
+  /** @internal */
+  static importJSON(serializedNode) {
+    return $createDirectiveNode(serializedNode.mdastNode);
+  }
+  /**
+   * Constructs a new {@link DirectiveNode} with the specified MDAST directive node as the object to edit.
+   */
+  constructor(mdastNode, key) {
+    super(key);
+    this.__mdastNode = mdastNode;
+  }
+  /**
+   * Returns the MDAST node that is being edited.
+   */
+  getMdastNode() {
+    return this.__mdastNode;
+  }
+  /** @internal */
+  exportJSON() {
+    return {
+      mdastNode: structuredClone(this.__mdastNode),
+      type: "directive",
+      version: 1
+    };
+  }
+  /** @internal */
+  createDOM() {
+    return document.createElement(this.__mdastNode.type === "textDirective" ? "span" : "div");
+  }
+  /** @internal */
+  updateDOM() {
+    return false;
+  }
+  /**
+   * Sets a new MDAST node to edit.
+   */
+  setMdastNode(mdastNode) {
+    this.getWritable().__mdastNode = mdastNode;
+  }
+  /**
+   * Focuses the direcitive editor.
+   */
+  select = () => {
+    this.__focusEmitter.publish();
+  };
+  /** @internal */
+  decorate(parentEditor, config) {
+    return /* @__PURE__ */ jsx(
+      DirectiveEditorContainer,
+      {
+        lexicalNode: this,
+        mdastNode: this.getMdastNode(),
+        parentEditor,
+        config,
+        focusEmitter: this.__focusEmitter
+      }
+    );
+  }
+  /** @internal */
+  isInline() {
+    return this.__mdastNode.type === "textDirective";
+  }
+  /** @internal */
+  isKeyboardSelectable() {
+    return true;
+  }
+}
+const DirectiveEditorContainer = (props) => {
+  const { mdastNode } = props;
+  const [directiveDescriptors] = useCellValues(directiveDescriptors$);
+  const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(mdastNode));
+  if (!descriptor) {
+    throw new Error(`No descriptor found for directive ${mdastNode.name}`);
+  }
+  const Editor = descriptor.Editor;
+  return /* @__PURE__ */ jsx(NestedEditorsContext.Provider, { value: props, children: /* @__PURE__ */ jsx(Editor, { descriptor, mdastNode, lexicalNode: props.lexicalNode, parentEditor: props.parentEditor }) });
+};
+function $createDirectiveNode(mdastNode, key) {
+  return new DirectiveNode(mdastNode, key);
+}
+function $isDirectiveNode(node) {
+  return node instanceof DirectiveNode;
+}
+export {
+  $createDirectiveNode,
+  $isDirectiveNode,
+  DirectiveNode
+};

package/dist/plugins/directives/DirectiveVisitor.js

@@ -0,0 +1,10 @@
+import { $isDirectiveNode } from "./DirectiveNode.js";
+const DirectiveVisitor = {
+  testLexicalNode: $isDirectiveNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    actions.appendToParent(mdastParent, lexicalNode.getMdastNode());
+  }
+};
+export {
+  DirectiveVisitor
+};

package/dist/plugins/directives/MdastDirectiveVisitor.js

@@ -0,0 +1,30 @@
+import { $createTextNode } from "lexical";
+import { $createDirectiveNode } from "./DirectiveNode.js";
+const DIRECTIVE_TYPES = ["leafDirective", "containerDirective", "textDirective"];
+function isMdastDirectivesNode(node) {
+  return DIRECTIVE_TYPES.includes(node.type);
+}
+const MdastDirectiveVisitor = (escapeUnknownTextDirectives) => ({
+  testNode: (node, { directiveDescriptors }) => {
+    if (isMdastDirectivesNode(node)) {
+      const descriptor = directiveDescriptors.find((descriptor2) => descriptor2.testNode(node));
+      if (escapeUnknownTextDirectives && !descriptor && node.type === "textDirective") {
+        return true;
+      }
+      return descriptor !== void 0;
+    }
+    return false;
+  },
+  visitNode({ lexicalParent, mdastNode, descriptors }) {
+    const isKnown = !escapeUnknownTextDirectives || descriptors.directiveDescriptors.some((d) => d.testNode(mdastNode));
+    if (isKnown) {
+      lexicalParent.append($createDirectiveNode(mdastNode));
+    } else {
+      lexicalParent.append($createTextNode(`:${mdastNode.name}`));
+    }
+  }
+});
+export {
+  MdastDirectiveVisitor,
+  isMdastDirectivesNode
+};

package/dist/plugins/directives/index.js

@@ -0,0 +1,45 @@
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { insertDecoratorNode$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, directiveDescriptors$ } from "../core/index.js";
+import { Signal, map } from "@mdxeditor/gurx";
+import { directiveToMarkdown, directiveFromMarkdown } from "mdast-util-directive";
+import { directive } from "micromark-extension-directive";
+import { $createDirectiveNode, DirectiveNode } from "./DirectiveNode.js";
+import { $isDirectiveNode } from "./DirectiveNode.js";
+import { DirectiveVisitor } from "./DirectiveVisitor.js";
+import { MdastDirectiveVisitor } from "./MdastDirectiveVisitor.js";
+const insertDirective$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertDirective$,
+      map((payload) => {
+        return () => $createDirectiveNode({ children: [], ...payload });
+      })
+    ),
+    insertDecoratorNode$
+  );
+});
+const directivesPlugin = realmPlugin({
+  update: (realm, params) => {
+    realm.pub(directiveDescriptors$, params?.directiveDescriptors ?? []);
+  },
+  init: (realm, params) => {
+    realm.pubIn({
+      [directiveDescriptors$]: params?.directiveDescriptors ?? [],
+      // import
+      [addMdastExtension$]: directiveFromMarkdown(),
+      [addSyntaxExtension$]: directive(),
+      [addImportVisitor$]: MdastDirectiveVisitor(params?.escapeUnknownTextDirectives),
+      // export
+      [addLexicalNode$]: DirectiveNode,
+      [addExportVisitor$]: DirectiveVisitor,
+      [addToMarkdownExtension$]: directiveToMarkdown()
+    });
+  }
+});
+export {
+  $createDirectiveNode,
+  $isDirectiveNode,
+  DirectiveNode,
+  directivesPlugin,
+  insertDirective$
+};

package/dist/plugins/frontmatter/FrontmatterEditor.js

@@ -0,0 +1,137 @@
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
+import * as Dialog from "@radix-ui/react-dialog";
+import classNames from "classnames";
+import YamlParser from "js-yaml";
+import React from "react";
+import { useForm, useFieldArray } from "react-hook-form";
+import { frontmatterDialogOpen$, removeFrontmatter$ } from "./index.js";
+import styles from "../../styles/ui.module.css.js";
+import { readOnly$, editorRootElementRef$, iconComponentFor$, useTranslation } from "../core/index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+const FrontmatterEditor = ({ yaml, onChange }) => {
+  const [readOnly, editorRootElementRef, iconComponentFor, frontmatterDialogOpen] = useCellValues(
+    readOnly$,
+    editorRootElementRef$,
+    iconComponentFor$,
+    frontmatterDialogOpen$
+  );
+  const t = useTranslation();
+  const setFrontmatterDialogOpen = usePublisher(frontmatterDialogOpen$);
+  const removeFrontmatter = usePublisher(removeFrontmatter$);
+  const yamlConfig = React.useMemo(() => {
+    if (!yaml) {
+      return [];
+    }
+    return Object.entries(YamlParser.load(yaml)).map(([key, value]) => ({ key, value }));
+  }, [yaml]);
+  const { register, control, handleSubmit } = useForm({
+    defaultValues: {
+      yamlConfig
+    }
+  });
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "yamlConfig"
+  });
+  const onSubmit = React.useCallback(
+    ({ yamlConfig: yamlConfig2 }) => {
+      if (yamlConfig2.length === 0) {
+        removeFrontmatter();
+        setFrontmatterDialogOpen(false);
+        return;
+      }
+      const yaml2 = yamlConfig2.reduce((acc, { key, value }) => {
+        if (key && value) {
+          acc[key] = value;
+        }
+        return acc;
+      }, {});
+      onChange(YamlParser.dump(yaml2).trim());
+      setFrontmatterDialogOpen(false);
+    },
+    [onChange, setFrontmatterDialogOpen, removeFrontmatter]
+  );
+  return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+    Dialog.Root,
+    {
+      open: frontmatterDialogOpen,
+      onOpenChange: (open) => {
+        setFrontmatterDialogOpen(open);
+      },
+      children: /* @__PURE__ */ jsxs(Dialog.Portal, { container: editorRootElementRef?.current, children: [
+        /* @__PURE__ */ jsx(Dialog.Overlay, { className: styles.dialogOverlay }),
+        /* @__PURE__ */ jsxs(Dialog.Content, { className: styles.largeDialogContent, "data-editor-type": "frontmatter", children: [
+          /* @__PURE__ */ jsx(Dialog.Title, { className: styles.dialogTitle, children: t("frontmatterEditor.title", "Edit document frontmatter") }),
+          /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: (e) => {
+                void handleSubmit(onSubmit)(e);
+                e.stopPropagation();
+              },
+              onReset: (e) => {
+                e.stopPropagation();
+                setFrontmatterDialogOpen(false);
+              },
+              children: [
+                /* @__PURE__ */ jsxs("table", { className: styles.propertyEditorTable, children: [
+                  /* @__PURE__ */ jsxs("colgroup", { children: [
+                    /* @__PURE__ */ jsx("col", {}),
+                    /* @__PURE__ */ jsx("col", {}),
+                    /* @__PURE__ */ jsx("col", {})
+                  ] }),
+                  /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                    /* @__PURE__ */ jsx("th", { children: t("frontmatterEditor.key", "Key") }),
+                    /* @__PURE__ */ jsx("th", { children: t("frontmatterEditor.value", "Value") }),
+                    /* @__PURE__ */ jsx("th", {})
+                  ] }) }),
+                  /* @__PURE__ */ jsx("tbody", { children: fields.map((item, index) => {
+                    return /* @__PURE__ */ jsxs("tr", { children: [
+                      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TableInput, { ...register(`yamlConfig.${index}.key`, { required: true }), autofocusIfEmpty: true, readOnly }) }),
+                      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(TableInput, { ...register(`yamlConfig.${index}.value`, { required: true }), readOnly }) }),
+                      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: () => {
+                            remove(index);
+                          },
+                          className: styles.iconButton,
+                          disabled: readOnly,
+                          children: iconComponentFor("delete_big")
+                        }
+                      ) })
+                    ] }, item.id);
+                  }) }),
+                  /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(
+                    "button",
+                    {
+                      disabled: readOnly,
+                      className: classNames(styles.primaryButton, styles.smallButton),
+                      type: "button",
+                      onClick: () => {
+                        append({ key: "", value: "" });
+                      },
+                      children: t("frontmatterEditor.addEntry", "Add entry")
+                    }
+                  ) }) }) })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" }, children: [
+                  /* @__PURE__ */ jsx("button", { type: "submit", className: styles.primaryButton, children: t("dialogControls.save", "Save") }),
+                  /* @__PURE__ */ jsx("button", { type: "reset", className: styles.secondaryButton, children: t("dialogControls.cancel", "Cancel") })
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(Dialog.Close, { asChild: true, children: /* @__PURE__ */ jsx("button", { className: styles.dialogCloseButton, "aria-label": t("dialogControls.cancel", "Cancel"), children: iconComponentFor("close") }) })
+        ] })
+      ] })
+    }
+  ) });
+};
+const TableInput = React.forwardRef(({ className, autofocusIfEmpty: _, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("input", { className: classNames(styles.propertyEditorInput, className), ...props, ref });
+});
+export {
+  FrontmatterEditor
+};