@mdxeditor/editor 0.9.0 → 0.10.0-alpha.1

package/dist/plugins/link/index.d.ts

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

package/dist/plugins/link/index.js

@@ -0,0 +1,24 @@
+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 { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+const linkSystem = system((_) => ({}), [coreSystem]);
+const [linkPlugin] = realmPlugin({
+  id: "link",
+  systemSpec: linkSystem,
+  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,
+  linkSystem
+};

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