@mdxeditor/editor 0.10.0 → 0.11.0

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

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

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

@@ -0,0 +1,68 @@
+import type { LexicalVisitor } from '../../exportMarkdownFromLexical';
+import type { Options } from 'mdast-util-to-markdown';
+import type { Config } from 'mdast-util-from-markdown/lib';
+import type { Extension } from 'micromark-util-types';
+import type { Content } from 'mdast';
+import type { MdastImportVisitor } from '../../importMarkdownToLexical';
+import type { EditorSubscription, EditorInFocus, BlockType } from '../core';
+import type { InitialEditorStateType } from '@lexical/react/LexicalComposer';
+import type { JsxComponentDescriptor } from '../jsx';
+import type { HistoryState } from '@lexical/history';
+import type { LexicalEditor, RangeSelection, Klass, LexicalNode, TextFormatType, ElementNode, DecoratorNode } from 'lexical';
+import type { PluginConstructor, SystemSpec, Realm, RealmNode } from '../../gurx';
+import React from 'react';
+import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin';
+/**
+ * @internal
+ */
+export declare const linkPlugin: PluginConstructor<SystemSpec<[SystemSpec<[], (r: Realm) => {
+    activeEditor: RealmNode<LexicalEditor | null>;
+    inFocus: RealmNode<boolean>;
+    historyState: RealmNode<HistoryState>;
+    currentSelection: RealmNode<RangeSelection | null>;
+    jsxIsAvailable: RealmNode<boolean>;
+    jsxComponentDescriptors: RealmNode<JsxComponentDescriptor[]>;
+    initialRootEditorState: RealmNode<InitialEditorStateType>;
+    rootEditor: RealmNode<LexicalEditor | null>;
+    createRootEditorSubscription: RealmNode<EditorSubscription>;
+    createActiveEditorSubscription: RealmNode<EditorSubscription>;
+    importVisitors: RealmNode<MdastImportVisitor<Content>[]>;
+    syntaxExtensions: RealmNode<Extension[]>;
+    mdastExtensions: RealmNode<(Partial<Config> | Partial<Config>[])[] | null | undefined>;
+    usedLexicalNodes: RealmNode<Klass<LexicalNode>[]>;
+    addImportVisitor: RealmNode<MdastImportVisitor<Content>>;
+    addLexicalNode: RealmNode<Klass<LexicalNode>>;
+    addSyntaxExtension: RealmNode<Extension>;
+    addMdastExtension: RealmNode<Partial<Config> | Partial<Config>[]>;
+    toMarkdownExtensions: RealmNode<Options[]>;
+    toMarkdownOptions: RealmNode<Options>;
+    addToMarkdownExtension: RealmNode<Options>;
+    addExportVisitor: RealmNode<LexicalVisitor>;
+    exportVisitors: RealmNode<LexicalVisitor[]>;
+    initialMarkdown: RealmNode<string>;
+    setMarkdown: RealmNode<string>;
+    markdown: RealmNode<string>;
+    editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    composerChildren: RealmNode<React.ComponentType<{}>[]>;
+    addComposerChild: RealmNode<React.ComponentType<{}>>;
+    topAreaChildren: RealmNode<React.ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<React.ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<React.ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<React.ComponentType<{}>>;
+    editorWrappers: RealmNode<React.ComponentType<{
+        children: React.ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<React.ComponentType<{
+        children: React.ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}>], (_: Realm) => {}>, {
+    validateUrl: React.ComponentProps<typeof LexicalLinkPlugin>['validateUrl'];
+}>;

package/dist/plugins/link/index.js

@@ -0,0 +1,22 @@
+import React__default from "react";
+import { coreSystem } from "../core/index.js";
+import { MdastLinkVisitor } from "./MdastLinkVisitor.js";
+import { LexicalLinkVisitor } from "./LexicalLinkVisitor.js";
+import { LinkNode } from "@lexical/link";
+import { LinkPlugin } from "@lexical/react/LexicalLinkPlugin";
+import { realmPlugin } from "../../gurx/react.js";
+import { system } from "../../gurx/realmFactory.js";
+const [linkPlugin] = realmPlugin({
+  id: "link",
+  systemSpec: system((_) => ({}), [coreSystem]),
+  init: (realm, params) => {
+    realm.pubKey("addImportVisitor", MdastLinkVisitor);
+    realm.pubKey("addLexicalNode", LinkNode);
+    realm.pubKey("addExportVisitor", LexicalLinkVisitor);
+    const linkPluginProps = (params == null ? void 0 : params.validateUrl) ? { validateUrl: params.validateUrl } : {};
+    realm.pubKey("addComposerChild", () => /* @__PURE__ */ React__default.createElement(LinkPlugin, { ...linkPluginProps }));
+  }
+});
+export {
+  linkPlugin
+};

package/dist/plugins/link-dialog/LinkDialog.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LexicalCommand } from 'lexical';
+export declare const OPEN_LINK_DIALOG: LexicalCommand<undefined>;
+interface LinkEditFormProps {
+    initialUrl: string;
+    onSubmit: (url: string) => void;
+    onCancel: () => void;
+    linkAutocompleteSuggestions: string[];
+}
+export declare function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggestions }: LinkEditFormProps): React.JSX.Element;
+export declare const LinkDialog: React.FC;
+export {};

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

@@ -0,0 +1,174 @@
+import * as RadixPopover from "@radix-ui/react-popover";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React__default from "react";
+import { createCommand } from "lexical";
+import CheckIcon from "../../icons/check.svg.js";
+import CloseIcon from "../../icons/close.svg.js";
+import CopyIcon from "../../icons/content_copy.svg.js";
+import EditIcon from "../../icons/edit.svg.js";
+import LinkOffIcon from "../../icons/link_off.svg.js";
+import OpenInNewIcon from "../../icons/open_in_new.svg.js";
+import DropDownIcon from "../../icons/arrow_drop_down.svg.js";
+import classNames from "classnames";
+import { useCombobox } from "downshift";
+import styles from "../../styles/ui.module.css.js";
+import { corePluginHooks } from "../core/index.js";
+import { linkDialogPluginHooks } from "./index.js";
+createCommand();
+const MAX_SUGGESTIONS = 20;
+function LinkEditForm({ initialUrl, onSubmit, onCancel, linkAutocompleteSuggestions }) {
+  const [items, setItems] = React__default.useState(linkAutocompleteSuggestions.slice(0, MAX_SUGGESTIONS));
+  const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, highlightedIndex, getItemProps, selectedItem } = useCombobox({
+    initialInputValue: initialUrl,
+    onInputValueChange({ inputValue }) {
+      inputValue = (inputValue == null ? void 0 : inputValue.toLowerCase()) || "";
+      const matchingItems = [];
+      for (const url of linkAutocompleteSuggestions) {
+        if (url.toLowerCase().includes(inputValue)) {
+          matchingItems.push(url);
+          if (matchingItems.length >= MAX_SUGGESTIONS) {
+            break;
+          }
+        }
+      }
+      setItems(matchingItems);
+    },
+    items,
+    itemToString(item) {
+      return item ?? "";
+    }
+  });
+  const onSubmitEH = (e) => {
+    e.preventDefault();
+    onSubmit(selectedItem || "");
+  };
+  const onKeyDownEH = React__default.useCallback(
+    (e) => {
+      var _a;
+      if (e.key === "Escape") {
+        (_a = e.target.form) == null ? void 0 : _a.reset();
+      } else if (e.key === "Enter" && (!isOpen || items.length === 0)) {
+        e.preventDefault();
+        onSubmit(e.target.value);
+      }
+    },
+    [isOpen, items, onSubmit]
+  );
+  const downshiftInputProps = getInputProps();
+  const inputProps = {
+    ...downshiftInputProps,
+    onKeyDown: (e) => {
+      onKeyDownEH(e);
+      downshiftInputProps.onKeyDown(e);
+    }
+  };
+  const dropdownIsVisible = isOpen && items.length > 0;
+  return /* @__PURE__ */ React__default.createElement("form", { onSubmit: onSubmitEH, onReset: onCancel, className: classNames(styles.linkDialogEditForm) }, /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogInputContainer }, /* @__PURE__ */ React__default.createElement("div", { "data-visible-dropdown": dropdownIsVisible, className: styles.linkDialogInputWrapper }, /* @__PURE__ */ React__default.createElement("input", { className: styles.linkDialogInput, ...inputProps, autoFocus: true, size: 30, "data-editor-dialog": true }), /* @__PURE__ */ React__default.createElement("button", { "aria-label": "toggle menu", type: "button", ...getToggleButtonProps() }, /* @__PURE__ */ React__default.createElement(DropDownIcon, null))), /* @__PURE__ */ React__default.createElement("div", { className: styles.linkDialogAutocompleteContainer }, /* @__PURE__ */ React__default.createElement("ul", { ...getMenuProps(), "data-visible": dropdownIsVisible }, items.map((item, index) => /* @__PURE__ */ React__default.createElement(
+    "li",
+    {
+      "data-selected": selectedItem === item,
+      "data-highlighted": highlightedIndex === index,
+      key: `${item}${index}`,
+      ...getItemProps({ item, index })
+    },
+    item
+  ))))), /* @__PURE__ */ React__default.createElement(ActionButton, { type: "submit", title: "Set URL", "aria-label": "Set URL" }, /* @__PURE__ */ React__default.createElement(CheckIcon, null)), /* @__PURE__ */ React__default.createElement(ActionButton, { type: "reset", title: "Cancel change", "aria-label": "Cancel change" }, /* @__PURE__ */ React__default.createElement(CloseIcon, null)));
+}
+const LinkDialog = () => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const publishWindowChange = linkDialogPluginHooks.usePublisher("onWindowChange");
+  const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const [linkDialogState, linkAutocompleteSuggestions] = linkDialogPluginHooks.useEmitterValues(
+    "linkDialogState",
+    "linkAutocompleteSuggestions"
+  );
+  const updateLinkUrl = linkDialogPluginHooks.usePublisher("updateLinkUrl");
+  const cancelLinkEdit = linkDialogPluginHooks.usePublisher("cancelLinkEdit");
+  const switchFromPreviewToLinkEdit = linkDialogPluginHooks.usePublisher("switchFromPreviewToLinkEdit");
+  const removeLink = linkDialogPluginHooks.usePublisher("removeLink");
+  const applyLinkChanges = linkDialogPluginHooks.usePublisher("applyLinkChanges");
+  React__default.useEffect(() => {
+    const update = () => {
+      activeEditor == null ? void 0 : 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__default.useState(false);
+  const theRect = linkDialogState == null ? void 0 : linkDialogState.rectangle;
+  const onSubmitEH = React__default.useCallback(
+    (url) => {
+      updateLinkUrl(url);
+      applyLinkChanges(true);
+    },
+    [applyLinkChanges, updateLinkUrl]
+  );
+  const urlIsExternal = linkDialogState.type === "preview" && linkDialogState.url.startsWith("http");
+  return /* @__PURE__ */ React__default.createElement(RadixPopover.Root, { open: linkDialogState.type !== "inactive" }, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.Anchor,
+    {
+      "data-visible": linkDialogState.type === "edit",
+      className: styles.linkDialogAnchor,
+      style: {
+        top: theRect == null ? void 0 : theRect.top,
+        left: theRect == null ? void 0 : theRect.left,
+        width: theRect == null ? void 0 : theRect.width,
+        height: theRect == null ? void 0 : theRect.height
+      }
+    }
+  ), /* @__PURE__ */ React__default.createElement(RadixPopover.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(
+    RadixPopover.Content,
+    {
+      className: classNames(styles.linkDialogPopoverContent),
+      sideOffset: 5,
+      onOpenAutoFocus: (e) => e.preventDefault(),
+      key: linkDialogState.linkNodeKey
+    },
+    linkDialogState.type === "edit" && /* @__PURE__ */ React__default.createElement(
+      LinkEditForm,
+      {
+        initialUrl: linkDialogState.url,
+        onSubmit: onSubmitEH,
+        onCancel: cancelLinkEdit.bind(null, true),
+        linkAutocompleteSuggestions
+      }
+    ),
+    linkDialogState.type === "preview" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+      "a",
+      {
+        className: styles.linkDialogPreviewAnchor,
+        href: linkDialogState.url,
+        ...urlIsExternal ? { target: "_blank", rel: "noreferrer" } : {},
+        title: urlIsExternal ? `Open ${linkDialogState.url} in new window` : linkDialogState.url
+      },
+      /* @__PURE__ */ React__default.createElement("span", null, linkDialogState.url),
+      urlIsExternal && /* @__PURE__ */ React__default.createElement(OpenInNewIcon, null)
+    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(true), title: "Edit link URL", "aria-label": "Edit link URL" }, /* @__PURE__ */ React__default.createElement(EditIcon, null)), /* @__PURE__ */ React__default.createElement(Tooltip.Provider, null, /* @__PURE__ */ React__default.createElement(Tooltip.Root, { open: copyUrlTooltipOpen }, /* @__PURE__ */ React__default.createElement(Tooltip.Trigger, { asChild: true }, /* @__PURE__ */ React__default.createElement(
+      ActionButton,
+      {
+        title: "Copy to clipboard",
+        "aria-label": "Copy link URL",
+        onClick: () => {
+          void window.navigator.clipboard.writeText(linkDialogState.url).then(() => {
+            setCopyUrlTooltipOpen(true);
+            setTimeout(() => setCopyUrlTooltipOpen(false), 1e3);
+          });
+        }
+      },
+      copyUrlTooltipOpen ? /* @__PURE__ */ React__default.createElement(CheckIcon, null) : /* @__PURE__ */ React__default.createElement(CopyIcon, null)
+    )), /* @__PURE__ */ React__default.createElement(Tooltip.Portal, { container: editorRootElementRef == null ? void 0 : editorRootElementRef.current }, /* @__PURE__ */ React__default.createElement(Tooltip.Content, { className: classNames(styles.tooltipContent), sideOffset: 5 }, "Copied!", /* @__PURE__ */ React__default.createElement(Tooltip.Arrow, null))))), /* @__PURE__ */ React__default.createElement(ActionButton, { title: "Remove link", "aria-label": "Remove link", onClick: () => removeLink(true) }, /* @__PURE__ */ React__default.createElement(LinkOffIcon, null)))
+  )));
+};
+const ActionButton = React__default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React__default.createElement("button", { className: classNames(styles.actionButton, className), ref, ...props });
+});
+export {
+  LinkDialog,
+  LinkEditForm
+};