@mdxeditor/editor 0.0.1 → 0.0.5-development

package/dist/plugins/jsx/index.js

@@ -0,0 +1,82 @@
+import { mdxFromMarkdown, mdxToMarkdown } from "mdast-util-mdx";
+import { mdxjs } from "micromark-extension-mdxjs";
+import { coreSystem } 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 { system } from "../../gurx/realmFactory.js";
+import { realmPlugin } from "../../gurx/react.js";
+function isMdastJsxNode(node) {
+  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+}
+function toMdastJsxAttributes(attributes) {
+  return Object.entries(attributes).map(([name, value]) => ({
+    type: "mdxJsxAttribute",
+    name,
+    value
+  }));
+}
+const jsxSystem = system(
+  (r, [{ insertDecoratorNode }]) => {
+    const insertJsx = r.node();
+    r.link(
+      r.pipe(
+        insertJsx,
+        r.o.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
+    );
+    return {
+      insertJsx
+    };
+  },
+  [coreSystem]
+);
+const [
+  /** @internal */
+  jsxPlugin,
+  /** @internal */
+  jsxPluginHooks
+] = realmPlugin({
+  id: "jsx",
+  systemSpec: jsxSystem,
+  applyParamsToSystem: (realm, params) => {
+    realm.pubKey("jsxComponentDescriptors", (params == null ? void 0 : params.jsxComponentDescriptors) || []);
+  },
+  init: (realm, _) => {
+    realm.pubKey("jsxIsAvailable", true);
+    realm.pubKey("addMdastExtension", mdxFromMarkdown());
+    realm.pubKey("addSyntaxExtension", mdxjs());
+    realm.pubKey("addImportVisitor", MdastMdxJsxElementVisitor);
+    realm.pubKey("addImportVisitor", MdastMdxJsEsmVisitor);
+    realm.pubKey("addLexicalNode", LexicalJsxNode);
+    realm.pubKey("addExportVisitor", LexicalJsxVisitor);
+    realm.pubKey("addToMarkdownExtension", mdxToMarkdown());
+  }
+});
+export {
+  isMdastJsxNode,
+  jsxPlugin,
+  jsxPluginHooks,
+  jsxSystem
+};

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

@@ -0,0 +1,9 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+import { FC } from 'react';
+export declare const LexicalAutoLinkPlugin: FC;

package/dist/plugins/link/AutoLinkPlugin.js

@@ -0,0 +1,18 @@
+import { createLinkMatcherWithRegExp, AutoLinkPlugin } from "@lexical/react/LexicalAutoLinkPlugin.js";
+import React__default from "react";
+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__ */ React__default.createElement(AutoLinkPlugin, { matchers: MATCHERS });
+};
+export {
+  LexicalAutoLinkPlugin
+};

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

@@ -0,0 +1,4 @@
+import { LinkNode } from '@lexical/link';
+import * as Mdast from 'mdast';
+import { LexicalExportVisitor } from '../../exportMarkdownFromLexical';
+export declare const LexicalLinkVisitor: LexicalExportVisitor<LinkNode, Mdast.Link>;

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,101 @@
+import type { IconKey } from '../core/Icon';
+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, LexicalVisitor } from '../..';
+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.js';
+/**
+ * The parameters used to configure the link plugin
+ */
+interface LinkPluginParams {
+    /**
+     * An optional function to validate the URL of a link.
+     * By default, no validation is performed.
+     */
+    validateUrl?: React.ComponentProps<typeof LexicalLinkPlugin>['validateUrl'];
+    /**
+     * Whether to disable the auto-linking of URLs and email addresses.
+     * @default false
+     */
+    disableAutoLink?: boolean;
+}
+/**
+ * @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>;
+    markdownSignal: RealmNode<string>;
+    editorRootElementRef: RealmNode<React.RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    placeholder: RealmNode<React.ReactNode>;
+    autoFocus: RealmNode<boolean | {
+        defaultSelection?: "rootStart" | "rootEnd" | undefined;
+        preventScroll?: boolean | undefined;
+    }>;
+    readOnly: RealmNode<boolean>;
+    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>>;
+    onBlur: RealmNode<FocusEvent>;
+    iconComponentFor: RealmNode<(name: IconKey) => React.ReactNode>;
+    markdownProcessingError: RealmNode<{
+        error: string;
+        source: string;
+    } | null>;
+    markdownErrorSignal: RealmNode<{
+        error: string;
+        source: string;
+    }>;
+}>], (r: Realm) => {
+    disableAutoLink: RealmNode<boolean>;
+}>, LinkPluginParams>;
+export {};

package/dist/plugins/link/index.js

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

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

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

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

@@ -0,0 +1,148 @@
+import * as RadixPopover from "@radix-ui/react-popover";
+import * as Tooltip from "@radix-ui/react-tooltip";
+import React__default from "react";
+import { corePluginHooks } 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 { linkDialogPluginHooks } from "./index.js";
+createCommand();
+function LinkEditForm({ url, title, onSubmit, onCancel, linkAutocompleteSuggestions }) {
+  const {
+    register,
+    handleSubmit,
+    control,
+    setValue,
+    reset: _
+  } = useForm({
+    values: {
+      url,
+      title
+    }
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    "form",
+    {
+      onSubmit: (e) => {
+        void handleSubmit(onSubmit)(e);
+        e.stopPropagation();
+        e.preventDefault();
+      },
+      onReset: (e) => {
+        e.stopPropagation();
+        onCancel();
+      },
+      className: classNames(styles.multiFieldForm, styles.linkDialogEditForm)
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-url" }, "URL"), /* @__PURE__ */ React__default.createElement(
+      DownshiftAutoComplete,
+      {
+        register,
+        initialInputValue: url,
+        inputName: "url",
+        suggestions: linkAutocompleteSuggestions,
+        setValue,
+        control,
+        placeholder: "Select or paste an URL",
+        autofocus: true
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement("div", { className: styles.formField }, /* @__PURE__ */ React__default.createElement("label", { htmlFor: "link-title" }, "Title"), /* @__PURE__ */ React__default.createElement("input", { id: "link-title", className: styles.textInput, size: 40, ...register("title") })),
+    /* @__PURE__ */ React__default.createElement("div", { style: { display: "flex", justifyContent: "flex-end", gap: "var(--spacing-2)" } }, /* @__PURE__ */ React__default.createElement("button", { type: "submit", title: "Set URL", "aria-label": "Set URL", className: classNames(styles.primaryButton) }, "Save"), /* @__PURE__ */ React__default.createElement("button", { type: "reset", title: "Cancel change", "aria-label": "Cancel change", className: classNames(styles.secondaryButton) }, "Cancel"))
+  );
+}
+const LinkDialog = () => {
+  const [editorRootElementRef] = corePluginHooks.useEmitterValues("editorRootElementRef");
+  const publishWindowChange = linkDialogPluginHooks.usePublisher("onWindowChange");
+  const [activeEditor] = corePluginHooks.useEmitterValues("activeEditor");
+  const [iconComponentFor] = corePluginHooks.useEmitterValues("iconComponentFor");
+  const [linkDialogState, linkAutocompleteSuggestions] = linkDialogPluginHooks.useEmitterValues(
+    "linkDialogState",
+    "linkAutocompleteSuggestions"
+  );
+  const updateLink = linkDialogPluginHooks.usePublisher("updateLink");
+  const cancelLinkEdit = linkDialogPluginHooks.usePublisher("cancelLinkEdit");
+  const switchFromPreviewToLinkEdit = linkDialogPluginHooks.usePublisher("switchFromPreviewToLinkEdit");
+  const removeLink = linkDialogPluginHooks.usePublisher("removeLink");
+  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 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) ?? 0}px`,
+        left: `${(theRect == null ? void 0 : theRect.left) ?? 0}px`,
+        width: `${(theRect == null ? void 0 : theRect.width) ?? 0}px`,
+        height: `${(theRect == null ? void 0 : theRect.height) ?? 0}px`
+      }
+    }
+  ), /* @__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,
+      {
+        url: linkDialogState.url,
+        title: linkDialogState.title,
+        onSubmit: updateLink,
+        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 && iconComponentFor("open_in_new")
+    ), /* @__PURE__ */ React__default.createElement(ActionButton, { onClick: () => switchFromPreviewToLinkEdit(true), title: "Edit link URL", "aria-label": "Edit link URL" }, iconComponentFor("edit")), /* @__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 ? iconComponentFor("check") : iconComponentFor("content_copy")
+    )), /* @__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) }, iconComponentFor("link_off"))),
+    /* @__PURE__ */ React__default.createElement(RadixPopover.Arrow, { className: styles.popoverArrow })
+  )));
+};
+const ActionButton = React__default.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React__default.createElement("button", { className: classNames(styles.actionButton, className), ref, ...props });
+});
+export {
+  LinkDialog,
+  LinkEditForm
+};