@nkzw/mdx-editor 0.1.0

package/dist/plugins/jsx/LexicalMdxExpressionNode.js

@@ -0,0 +1,130 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { DecoratorNode, $applyNodeReplacement } from "lexical";
+import lexicalThemeStyles from "../../styles/lexical-theme.module.css.js";
+import styles from "../../styles/ui.module.css.js";
+class LexicalMdxExpressionNode extends DecoratorNode {
+  /** @internal */
+  __value;
+  /** @internal */
+  __mdastType;
+  /** @internal */
+  static getType() {
+    return "mdx-expression";
+  }
+  /** @internal */
+  static clone(node) {
+    return new LexicalMdxExpressionNode(node.__value, node.__mdastType, node.__key);
+  }
+  /**
+   * Constructs a new {@link GenericHTMLNode} with the specified MDAST HTML node as the object to edit.
+   */
+  constructor(value, mdastType, key) {
+    super(key);
+    this.__value = value;
+    this.__mdastType = mdastType;
+  }
+  getValue() {
+    return this.__value;
+  }
+  getMdastType() {
+    return this.__mdastType;
+  }
+  // View
+  createDOM() {
+    const element = document.createElement("span");
+    element.classList.add(lexicalThemeStyles.mdxExpression);
+    return element;
+  }
+  updateDOM() {
+    return false;
+  }
+  static importDOM() {
+    return {};
+  }
+  exportDOM(editor) {
+    const { element } = super.exportDOM(editor);
+    return {
+      element
+    };
+  }
+  static importJSON(serializedNode) {
+    return $createLexicalMdxExpressionNode(serializedNode.value, serializedNode.mdastType);
+  }
+  exportJSON() {
+    return {
+      ...super.exportJSON(),
+      value: this.getValue(),
+      mdastType: this.getMdastType(),
+      type: "mdx-expression",
+      version: 1
+    };
+  }
+  /*
+    // Mutation
+    insertNewAfter(selection?: RangeSelection, restoreSelection = true): ParagraphNode | GenericHTMLNode {
+      const anchorOffset = selection ? selection.anchor.offset : 0
+      const newElement =
+        anchorOffset > 0 && anchorOffset < this.getTextContentSize() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const direction = this.getDirection()
+      newElement.setDirection(direction)
+      this.insertAfter(newElement, restoreSelection)
+      return newElement
+    }
+  
+    collapseAtStart(): true {
+      const newElement = !this.isEmpty() ? $createHeadingNode(this.getTag()) : $createParagraphNode()
+      const children = this.getChildren()
+      children.forEach((child) => newElement.append(child))
+      this.replace(newElement)
+      return true
+    }*/
+  extractWithChild() {
+    return true;
+  }
+  isInline() {
+    return this.__mdastType === "mdxTextExpression";
+  }
+  decorate(editor) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      "{",
+      /* @__PURE__ */ jsx("span", { className: styles.inputSizer, "data-value": this.getValue(), children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          size: 1,
+          onKeyDown: (e) => {
+            const value = e.target.value;
+            if (value === "" && e.key === "Backspace" || e.key === "Delete") {
+              e.stopPropagation();
+              e.nativeEvent.stopImmediatePropagation();
+              e.preventDefault();
+              editor.update(() => {
+                this.selectPrevious();
+                this.remove();
+              });
+            }
+          },
+          onChange: (e) => {
+            e.target.parentElement.dataset.value = e.target.value;
+            editor.update(() => {
+              this.getWritable().__value = e.target.value;
+            });
+          },
+          type: "text",
+          value: this.getValue()
+        }
+      ) }),
+      "}"
+    ] });
+  }
+}
+function $createLexicalMdxExpressionNode(value, type) {
+  return $applyNodeReplacement(new LexicalMdxExpressionNode(value, type));
+}
+function $isLexicalMdxExpressionNode(node) {
+  return node instanceof LexicalMdxExpressionNode;
+}
+export {
+  $createLexicalMdxExpressionNode,
+  $isLexicalMdxExpressionNode,
+  LexicalMdxExpressionNode
+};

package/dist/plugins/jsx/LexicalMdxExpressionVisitor.js

@@ -0,0 +1,14 @@
+import { $isLexicalMdxExpressionNode } from "./LexicalMdxExpressionNode.js";
+const LexicalMdxExpressionVisitor = {
+  testLexicalNode: $isLexicalMdxExpressionNode,
+  visitLexicalNode({ actions, mdastParent, lexicalNode }) {
+    const mdastNode = {
+      type: lexicalNode.getMdastType(),
+      value: lexicalNode.getValue()
+    };
+    actions.appendToParent(mdastParent, mdastNode);
+  }
+};
+export {
+  LexicalMdxExpressionVisitor
+};

package/dist/plugins/jsx/MdastMdxExpressionVisitor.js

@@ -0,0 +1,11 @@
+import { $createLexicalMdxExpressionNode } from "./LexicalMdxExpressionNode.js";
+const MdastMdxExpressionVisitor = {
+  testNode: (node) => node.type === "mdxTextExpression" || node.type === "mdxFlowExpression",
+  visitNode({ lexicalParent, mdastNode }) {
+    lexicalParent.append($createLexicalMdxExpressionNode(mdastNode.value, mdastNode.type));
+  },
+  priority: -200
+};
+export {
+  MdastMdxExpressionVisitor
+};

package/dist/plugins/jsx/MdastMdxJsEsmVisitor.js

@@ -0,0 +1,8 @@
+const MdastMdxJsEsmVisitor = {
+  testNode: "mdxjsEsm",
+  visitNode() {
+  }
+};
+export {
+  MdastMdxJsEsmVisitor
+};

package/dist/plugins/jsx/MdastMdxJsxElementVisitor.js

@@ -0,0 +1,28 @@
+import { $createParagraphNode } from "lexical";
+import { $createLexicalJsxNode } from "./LexicalJsxNode.js";
+const MdastMdxJsxElementVisitor = {
+  testNode: (node, { jsxComponentDescriptors }) => {
+    if (node.type === "mdxJsxTextElement" || node.type === "mdxJsxFlowElement") {
+      const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === node.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+      return descriptor !== void 0;
+    }
+    return false;
+  },
+  visitNode({ lexicalParent, mdastNode, descriptors: { jsxComponentDescriptors }, metaData }) {
+    const descriptor = jsxComponentDescriptors.find((descriptor2) => descriptor2.name === mdastNode.name) ?? jsxComponentDescriptors.find((descriptor2) => descriptor2.name === "*");
+    if (descriptor?.kind === "text" && mdastNode.type === "mdxJsxFlowElement") {
+      const patchedNode = { ...mdastNode, type: "mdxJsxTextElement" };
+      const paragraph = $createParagraphNode();
+      paragraph.append($createLexicalJsxNode(patchedNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0));
+      lexicalParent.append(paragraph);
+    } else {
+      lexicalParent.append(
+        $createLexicalJsxNode(mdastNode, mdastNode.name ? metaData.importDeclarations[mdastNode.name] : void 0)
+      );
+    }
+  },
+  priority: -200
+};
+export {
+  MdastMdxJsxElementVisitor
+};

package/dist/plugins/jsx/index.js

@@ -0,0 +1,97 @@
+import { mdxToMarkdown, mdxFromMarkdown } from "mdast-util-mdx";
+import { mdxjs } from "micromark-extension-mdxjs";
+import { insertDecoratorNode$, jsxComponentDescriptors$, addToMarkdownExtension$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addSyntaxExtension$, addMdastExtension$, jsxIsAvailable$ } from "../core/index.js";
+import { $createLexicalJsxNode, LexicalJsxNode } from "./LexicalJsxNode.js";
+import { LexicalJsxVisitor } from "./LexicalJsxVisitor.js";
+import { MdastMdxJsEsmVisitor } from "./MdastMdxJsEsmVisitor.js";
+import { MdastMdxJsxElementVisitor } from "./MdastMdxJsxElementVisitor.js";
+import { Signal, map } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { MdastMdxExpressionVisitor } from "./MdastMdxExpressionVisitor.js";
+import { LexicalMdxExpressionNode } from "./LexicalMdxExpressionNode.js";
+import { LexicalMdxExpressionVisitor } from "./LexicalMdxExpressionVisitor.js";
+import { GenericJsxEditor } from "../../jsx-editors/GenericJsxEditor.js";
+function isMdastJsxNode(node) {
+  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+}
+const isExpressionValue = (value) => {
+  if (value !== null && typeof value === "object" && "type" in value && "value" in value && typeof value.value === "string") {
+    return true;
+  }
+  return false;
+};
+const toMdastJsxAttributes = (attributes) => Object.entries(attributes).map(
+  ([name, value]) => ({
+    type: "mdxJsxAttribute",
+    name,
+    value: isExpressionValue(value) ? { type: "mdxJsxAttributeValueExpression", value: value.value } : value
+  })
+);
+const insertJsx$ = Signal((r) => {
+  r.link(
+    r.pipe(
+      insertJsx$,
+      map(({ kind, name, children, props }) => {
+        return () => {
+          const attributes = toMdastJsxAttributes(props);
+          if (kind === "flow") {
+            return $createLexicalJsxNode({
+              type: "mdxJsxFlowElement",
+              name,
+              children: children ?? [],
+              attributes
+            });
+          } else {
+            return $createLexicalJsxNode({
+              type: "mdxJsxTextElement",
+              name,
+              children: children ?? [],
+              attributes
+            });
+          }
+        };
+      })
+    ),
+    insertDecoratorNode$
+  );
+});
+const fragmentDescriptor = {
+  name: null,
+  kind: "flow",
+  props: [],
+  hasChildren: true,
+  Editor: GenericJsxEditor
+};
+const getDescriptors = (params) => {
+  if (params) {
+    if (params.allowFragment ?? true) {
+      return [fragmentDescriptor, ...params.jsxComponentDescriptors];
+    }
+    return params.jsxComponentDescriptors;
+  }
+  return [fragmentDescriptor];
+};
+const jsxPlugin = realmPlugin({
+  init: (realm, params) => {
+    realm.pubIn({
+      // import
+      [jsxIsAvailable$]: true,
+      [addMdastExtension$]: mdxFromMarkdown(),
+      [addSyntaxExtension$]: mdxjs(),
+      [addImportVisitor$]: [MdastMdxJsxElementVisitor, MdastMdxJsEsmVisitor, MdastMdxExpressionVisitor],
+      // export
+      [addLexicalNode$]: [LexicalJsxNode, LexicalMdxExpressionNode],
+      [addExportVisitor$]: [LexicalJsxVisitor, LexicalMdxExpressionVisitor],
+      [addToMarkdownExtension$]: mdxToMarkdown(),
+      [jsxComponentDescriptors$]: getDescriptors(params)
+    });
+  },
+  update(realm, params) {
+    realm.pub(jsxComponentDescriptors$, getDescriptors(params));
+  }
+});
+export {
+  insertJsx$,
+  isMdastJsxNode,
+  jsxPlugin
+};

package/dist/plugins/jsx/jsxTagName.js

@@ -0,0 +1,7 @@
+import { htmlTags } from "../core/MdastHTMLNode.js";
+function isHtmlTagName(name) {
+  return htmlTags.includes(name);
+}
+export {
+  isHtmlTagName
+};

package/dist/plugins/link/AutoLinkPlugin.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { AutoLinkPlugin, createLinkMatcherWithRegExp } from "@lexical/react/LexicalAutoLinkPlugin";
+const URL_REGEX = /((https?:\/\/(www\.)?)|(www\.))[-a-zA-Z0-9@:%._+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_+.~#?&//=]*)/;
+const EMAIL_REGEX = /(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))/;
+const MATCHERS = [
+  createLinkMatcherWithRegExp(URL_REGEX, (text) => {
+    return text.startsWith("http") ? text : `https://${text}`;
+  }),
+  createLinkMatcherWithRegExp(EMAIL_REGEX, (text) => {
+    return `mailto:${text}`;
+  })
+];
+const LexicalAutoLinkPlugin = () => {
+  return /* @__PURE__ */ jsx(AutoLinkPlugin, { matchers: MATCHERS });
+};
+export {
+  LexicalAutoLinkPlugin
+};

package/dist/plugins/link/LexicalLinkVisitor.js

@@ -0,0 +1,10 @@
+import { $isLinkNode } from "@lexical/link";
+const LexicalLinkVisitor = {
+  testLexicalNode: $isLinkNode,
+  visitLexicalNode: ({ lexicalNode, actions }) => {
+    actions.addAndStepInto("link", { url: lexicalNode.getURL(), title: lexicalNode.getTitle() });
+  }
+};
+export {
+  LexicalLinkVisitor
+};

package/dist/plugins/link/MdastLinkVisitor.js

@@ -0,0 +1,14 @@
+import { $createLinkNode } from "@lexical/link";
+const MdastLinkVisitor = {
+  testNode: "link",
+  visitNode({ mdastNode, actions }) {
+    actions.addAndStepInto(
+      $createLinkNode(mdastNode.url, {
+        title: mdastNode.title
+      })
+    );
+  }
+};
+export {
+  MdastLinkVisitor
+};

package/dist/plugins/link/index.js

@@ -0,0 +1,34 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { MdastLinkVisitor } from "./MdastLinkVisitor.js";
+import { LexicalLinkVisitor } from "./LexicalLinkVisitor.js";
+import { LinkNode, AutoLinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { LexicalAutoLinkPlugin } from "./AutoLinkPlugin.js";
+import { Cell } from "@mdxeditor/gurx";
+import { realmPlugin } from "../../RealmWithPlugins.js";
+import { addComposerChild$, addTableCellEditorChild$, addNestedEditorChild$, addExportVisitor$, addLexicalNode$, addImportVisitor$, addActivePlugin$ } from "../core/index.js";
+const disableAutoLink$ = Cell(false);
+const linkPlugin = realmPlugin({
+  init(realm, params) {
+    const disableAutoLink = Boolean(params?.disableAutoLink);
+    const linkPluginProps = params?.validateUrl ? { validateUrl: params.validateUrl } : {};
+    const EditorChild = () => /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(LinkPlugin, { ...linkPluginProps }),
+      disableAutoLink ? null : /* @__PURE__ */ jsx(LexicalAutoLinkPlugin, {})
+    ] });
+    realm.pubIn({
+      [addActivePlugin$]: "link",
+      [addImportVisitor$]: MdastLinkVisitor,
+      [addLexicalNode$]: [LinkNode, AutoLinkNode],
+      [addExportVisitor$]: LexicalLinkVisitor,
+      [disableAutoLink$]: disableAutoLink,
+      [addNestedEditorChild$]: EditorChild,
+      [addTableCellEditorChild$]: EditorChild,
+      [addComposerChild$]: EditorChild
+    });
+  }
+});
+export {
+  disableAutoLink$,
+  linkPlugin
+};

package/dist/plugins/link-dialog/LinkDialog.js

@@ -0,0 +1,262 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import * as RadixPopover from "@radix-ui/react-popover";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React from "react";
+import { EditorIcon } from "../../EditorIcon.js";
+import { editorRootElementRef$, activeEditor$, useTranslation } from "../core/index.js";
+import { DownshiftAutoComplete } from "../core/ui/DownshiftAutoComplete.js";
+import styles from "../../styles/ui.module.css.js";
+import classNames from "classnames";
+import { createCommand } from "lexical";
+import { useForm } from "react-hook-form";
+import { linkDialogState$, linkAutocompleteSuggestions$, onClickLinkCallback$, showLinkTitleField$, onWindowChange$, updateLink$, cancelLinkEdit$, switchFromPreviewToLinkEdit$, removeLink$ } from "./index.js";
+import { useCellValues, usePublisher } from "@mdxeditor/gurx";
+createCommand();
+function LinkEditForm({
+  url,
+  title,
+  text,
+  onSubmit,
+  onCancel,
+  linkAutocompleteSuggestions,
+  showLinkTitleField,
+  showAnchorTextField
+}) {
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset: _
+  } = useForm({
+    values: {
+      url,
+      title,
+      text
+    }
+  });
+  const t = useTranslation();
+  return /* @__PURE__ */ jsxs(
+    "form",
+    {
+      onSubmit: (e) => {
+        void handleSubmit(onSubmit)(e);
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onReset: (e) => {
+        e.stopPropagation();
+        onCancel();
+      },
+      onKeyDown: (e) => {
+        if (e.key === "Escape") {
+          e.stopPropagation();
+          onCancel();
+        }
+      },
+      className: classNames(styles.multiFieldForm, styles.linkDialogEditForm),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "link-url", children: t("createLink.url", "URL") }),
+          /* @__PURE__ */ jsx(
+            DownshiftAutoComplete,
+            {
+              register,
+              initialInputValue: url,
+              inputName: "url",
+              suggestions: linkAutocompleteSuggestions,
+              setValue,
+              control,
+              placeholder: t("createLink.urlPlaceholder", "Select or paste an URL"),
+              autofocus: true
+            }
+          )
+        ] }),
+        showAnchorTextField ? /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "link-text", title: t("createLink.textTooltip", "The text to be displayed for the link"), children: t("createLink.text", "Anchor text") }),
+          /* @__PURE__ */ jsx("input", { id: "link-text", className: styles.textInput, size: 40, ...register("text") })
+        ] }) : null,
+        showLinkTitleField ? /* @__PURE__ */ jsxs("div", { className: styles.formField, children: [
+          /* @__PURE__ */ jsx("label", { htmlFor: "link-title", title: t("createLink.titleTooltip", "The link's title attribute, shown on hover"), children: t("createLink.title", "Link title") }),
+          /* @__PURE__ */ jsx("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })
+        ] }) : null,
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" }, children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "submit",
+              title: t("createLink.saveTooltip", "Set URL"),
+              "aria-label": t("createLink.saveTooltip", "Set URL"),
+              className: classNames(styles.primaryButton),
+              children: t("dialogControls.save", "Save")
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "reset",
+              title: t("createLink.cancelTooltip", "Cancel change"),
+              "aria-label": t("createLink.cancelTooltip", "Cancel change"),
+              className: classNames(styles.secondaryButton),
+              children: t("dialogControls.cancel", "Cancel")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+const LinkDialog = () => {
+  const [
+    editorRootElementRef,
+    activeEditor,
+    linkDialogState,
+    linkAutocompleteSuggestions,
+    onClickLinkCallback,
+    showLinkTitleField
+  ] = useCellValues(
+    editorRootElementRef$,
+    activeEditor$,
+    linkDialogState$,
+    linkAutocompleteSuggestions$,
+    onClickLinkCallback$,
+    showLinkTitleField$
+  );
+  const publishWindowChange = usePublisher(onWindowChange$);
+  const updateLink = usePublisher(updateLink$);
+  const cancelLinkEdit = usePublisher(cancelLinkEdit$);
+  const switchFromPreviewToLinkEdit = usePublisher(switchFromPreviewToLinkEdit$);
+  const removeLink = usePublisher(removeLink$);
+  React.useEffect(() => {
+    const update = () => {
+      activeEditor?.getEditorState().read(() => {
+        publishWindowChange(true);
+      });
+    };
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update);
+    };
+  }, [activeEditor, publishWindowChange]);
+  const [copyUrlTooltipOpen, setCopyUrlTooltipOpen] = React.useState(false);
+  const t = useTranslation();
+  if (linkDialogState.type === "inactive") return null;
+  const theRect = linkDialogState.rectangle;
+  const urlIsExternal = linkDialogState.type === "preview" && linkDialogState.url.startsWith("http");
+  return /* @__PURE__ */ jsxs(RadixPopover.Root, { open: true, children: [
+    /* @__PURE__ */ jsx(
+      RadixPopover.Anchor,
+      {
+        "data-visible": linkDialogState.type === "edit",
+        className: styles.linkDialogAnchor,
+        style: {
+          top: `${theRect.top}px`,
+          left: `${theRect.left}px`,
+          width: `${theRect.width}px`,
+          height: `${theRect.height}px`
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsxs(
+      RadixPopover.Content,
+      {
+        className: classNames(styles.linkDialogPopoverContent),
+        sideOffset: 5,
+        onOpenAutoFocus: (e) => {
+          e.preventDefault();
+        },
+        children: [
+          linkDialogState.type === "edit" && /* @__PURE__ */ jsx(
+            LinkEditForm,
+            {
+              url: linkDialogState.url,
+              title: linkDialogState.title,
+              text: linkDialogState.text,
+              onSubmit: updateLink,
+              onCancel: cancelLinkEdit.bind(null),
+              linkAutocompleteSuggestions,
+              showLinkTitleField,
+              showAnchorTextField: linkDialogState.withAnchorText
+            }
+          ),
+          linkDialogState.type === "preview" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "a",
+              {
+                className: styles.linkDialogPreviewAnchor,
+                href: linkDialogState.url,
+                ...urlIsExternal ? { target: "_blank", rel: "noreferrer" } : {},
+                onClick: (e) => {
+                  if (onClickLinkCallback !== null) {
+                    e.preventDefault();
+                    onClickLinkCallback(linkDialogState.url);
+                  }
+                },
+                title: urlIsExternal ? t("linkPreview.open", `Open {{url}} in new window`, { url: linkDialogState.url }) : linkDialogState.url,
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: linkDialogState.url }),
+                  urlIsExternal && /* @__PURE__ */ jsx(EditorIcon, { name: "external" })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                onClick: () => {
+                  switchFromPreviewToLinkEdit();
+                },
+                title: t("linkPreview.edit", "Edit link URL"),
+                "aria-label": t("linkPreview.edit", "Edit link URL"),
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "edit" })
+              }
+            ),
+            /* @__PURE__ */ jsx(Tooltip.Provider, { children: /* @__PURE__ */ jsxs(Tooltip.Root, { open: copyUrlTooltipOpen, children: [
+              /* @__PURE__ */ jsx(Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ jsx(
+                ActionButton,
+                {
+                  title: t("linkPreview.copyToClipboard", "Copy to clipboard"),
+                  "aria-label": t("linkPreview.copyToClipboard", "Copy to clipboard"),
+                  onClick: () => {
+                    void window.navigator.clipboard.writeText(linkDialogState.url).then(() => {
+                      setCopyUrlTooltipOpen(true);
+                      setTimeout(() => {
+                        setCopyUrlTooltipOpen(false);
+                      }, 1e3);
+                    });
+                  },
+                  children: /* @__PURE__ */ jsx(EditorIcon, { name: copyUrlTooltipOpen ? "check" : "copy" })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tooltip.Portal, { container: editorRootElementRef?.current, children: /* @__PURE__ */ jsxs(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5, children: [
+                t("linkPreview.copied", "Copied!"),
+                /* @__PURE__ */ jsx(Tooltip.Arrow, {})
+              ] }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              ActionButton,
+              {
+                title: t("linkPreview.remove", "Remove link"),
+                "aria-label": t("linkPreview.remove", "Remove link"),
+                onClick: () => {
+                  removeLink();
+                },
+                children: /* @__PURE__ */ jsx(EditorIcon, { name: "unlink" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(RadixPopover.Arrow, { className: styles.popoverArrow })
+        ]
+      },
+      linkDialogState.linkNodeKey
+    ) })
+  ] });
+};
+const ActionButton = React.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("button", { className: classNames(styles.linkDialogActionButton, className), ref, ...props });
+});
+export {
+  LinkDialog,
+  LinkEditForm
+};