@mdxeditor/editor 0.14.1 → 0.15.0

package/dist/MDXEditor.js

@@ -61,9 +61,16 @@ const EditorRootElement = ({ children, className }) => {
   const editorRootElementRef = React__default.useRef(null);
   const setEditorRootElementRef = corePluginHooks.usePublisher("editorRootElementRef");
   React__default.useEffect(() => {
+    const popupContainer = document.createElement("div");
+    popupContainer.classList.add(styles.editorRoot);
+    document.body.appendChild(popupContainer);
+    editorRootElementRef.current = popupContainer;
     setEditorRootElementRef(editorRootElementRef);
+    return () => {
+      document.body.removeChild(popupContainer);
+    };
   }, [editorRootElementRef, setEditorRootElementRef]);
-  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor"), ref: editorRootElementRef }, children);
+  return /* @__PURE__ */ React__default.createElement("div", { className: classNames(styles.editorRoot, styles.editorWrapper, className, "mdxeditor") }, children);
 };
 const Methods = ({ mdxRef }) => {
   const realm = corePluginHooks.useRealmContext();

package/dist/directive-editors/AdmonitionDirectiveDescriptor.js

@@ -16,6 +16,7 @@ const AdmonitionDirectiveDescriptor = {
     return /* @__PURE__ */ React__default.createElement("div", { className: theme.admonition[mdastNode.name] }, /* @__PURE__ */ React__default.createElement(
       NestedLexicalEditor,
       {
+        block: true,
         focusEmitter,
         getContent: (node) => node.children,
         getUpdatedMdastNode: (mdastNode2, children) => ({ ...mdastNode2, children })

package/dist/importMarkdownToLexical.d.ts

@@ -2,7 +2,7 @@ import { LexicalNode, RootNode as LexicalRootNode } from 'lexical';
 import * as Mdast from 'mdast';
 import { fromMarkdown } from 'mdast-util-from-markdown';
 import { ParseOptions } from 'micromark-util-types';
-import { IS_BOLD, IS_ITALIC, IS_UNDERLINE } from './FormatConstants';
+import { IS_BOLD, IS_CODE, IS_ITALIC, IS_UNDERLINE } from './FormatConstants';
 /** @internal */
 export type MdastExtensions = NonNullable<Parameters<typeof fromMarkdown>[1]>['mdastExtensions'];
 /**
@@ -21,12 +21,12 @@ export interface MdastVisitActions {
      * Adds formatting as a context for the current node and its children.
      * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
      */
-    addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE, node?: Mdast.Content): void;
+    addFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void;
     /**
      * Adds formatting as a context for the current node and its children.
      * This is necessary due to mdast treating formatting as a node, while lexical considering it an attribute of a node.
      */
-    removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE, node?: Mdast.Content): void;
+    removeFormatting(format: typeof IS_BOLD | typeof IS_ITALIC | typeof IS_UNDERLINE | typeof IS_CODE, node?: Mdast.Content): void;
     /**
      * Access the current formatting context.
      */

package/dist/plugins/core/MdastInlineCodeVisitor.js

@@ -1,8 +1,24 @@
 import { $createTextNode } from "lexical";
 import { IS_CODE } from "../../FormatConstants.js";
+function isOpeningCodeNode(node) {
+  return node.type === "html" && node.value === "<code>";
+}
+function isClosingCodeNode(node) {
+  return node.type === "html" && node.value === "</code>";
+}
 const MdastInlineCodeVisitor = {
-  testNode: "inlineCode",
-  visitNode({ mdastNode, actions }) {
+  testNode: (node) => {
+    return node.type === "inlineCode" || isOpeningCodeNode(node) || isClosingCodeNode(node);
+  },
+  visitNode({ mdastNode, actions, mdastParent }) {
+    if (isOpeningCodeNode(mdastNode)) {
+      actions.addFormatting(IS_CODE, mdastParent);
+      return;
+    }
+    if (isClosingCodeNode(mdastNode)) {
+      actions.removeFormatting(IS_CODE, mdastParent);
+      return;
+    }
     actions.addAndStepInto($createTextNode(mdastNode.value).setFormat(IS_CODE));
   }
 };

package/dist/plugins/core/index.js

@@ -2,7 +2,7 @@ import { createEmptyHistoryState } from "@lexical/react/LexicalHistoryPlugin.js"
 import { $isHeadingNode } from "@lexical/rich-text";
 import { $setBlocksType } from "@lexical/selection";
 import { $findMatchingParent, $wrapNodeInElement, $insertNodeToNearestRoot } from "@lexical/utils";
-import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
+import { createCommand, SELECTION_CHANGE_COMMAND, $getRoot, COMMAND_PRIORITY_CRITICAL, BLUR_COMMAND, KEY_DOWN_COMMAND, COMMAND_PRIORITY_LOW, FORMAT_TEXT_COMMAND, $isRootOrShadowRoot, $getSelection, $isRangeSelection, $insertNodes, $createParagraphNode, ParagraphNode, TextNode } from "lexical";
 import { exportMarkdownFromLexical } from "../../exportMarkdownFromLexical.js";
 import { importMarkdownToLexical } from "../../importMarkdownToLexical.js";
 import { LexicalLinebreakVisitor } from "./LexicalLinebreakVisitor.js";
@@ -16,6 +16,7 @@ import { MdastRootVisitor } from "./MdastRootVisitor.js";
 import { MdastTextVisitor } from "./MdastTextVisitor.js";
 import { SharedHistoryPlugin } from "./SharedHistoryPlugin.js";
 import { noop } from "../../utils/fp.js";
+import { controlOrMeta } from "../../utils/detectMac.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
 const NESTED_EDITOR_UPDATED_COMMAND = createCommand("NESTED_EDITOR_UPDATED_COMMAND");
@@ -185,6 +186,30 @@ const coreSystem = system((r) => {
       COMMAND_PRIORITY_CRITICAL
     );
   });
+  r.pub(createRootEditorSubscription, (theRootEditor) => {
+    return theRootEditor.registerCommand(
+      KEY_DOWN_COMMAND,
+      (event) => {
+        const { keyCode, ctrlKey, metaKey } = event;
+        if (keyCode === 65 && controlOrMeta(metaKey, ctrlKey)) {
+          event.preventDefault();
+          theRootEditor.update(() => {
+            var _a;
+            const root = $getRoot();
+            const skipFirstChild = ((_a = root.getFirstChild()) == null ? void 0 : _a.getType()) === "frontmatter";
+            root.select(skipFirstChild ? 1 : 0, root.getChildrenSize());
+            const rootElement = theRootEditor.getRootElement();
+            rootElement.focus({
+              preventScroll: true
+            });
+          });
+          return true;
+        }
+        return false;
+      },
+      COMMAND_PRIORITY_LOW
+    );
+  });
   const composerChildren = r.node([]);
   const addComposerChild = createAppendNodeFor(composerChildren);
   const topAreaChildren = r.node([]);

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

@@ -64,7 +64,57 @@ export declare const headingsSystem: SystemSpec<[SystemSpec<[], (r: Realm) => {
     applyBlockType: RealmNode<BlockType>;
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
-}>], (_: Realm) => {}>;
+}>], (r: Realm, [{ createRootEditorSubscription, convertSelectionToNode }]: [{
+    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<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    placeholder: RealmNode<ReactNode>;
+    autoFocus: RealmNode<boolean>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}]) => {}>;
 /**
  * @internal
  */
@@ -118,4 +168,54 @@ export declare const headingsPlugin: PluginConstructor<SystemSpec<[SystemSpec<[]
     applyBlockType: RealmNode<BlockType>;
     convertSelectionToNode: RealmNode<() => ElementNode>;
     insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
-}>], (_: Realm) => {}>, object>;
+}>], (r: Realm, [{ createRootEditorSubscription, convertSelectionToNode }]: [{
+    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<RefObject<HTMLDivElement> | null>;
+    contentEditableClassName: RealmNode<string>;
+    placeholder: RealmNode<ReactNode>;
+    autoFocus: RealmNode<boolean>;
+    composerChildren: RealmNode<ComponentType<{}>[]>;
+    addComposerChild: RealmNode<ComponentType<{}>>;
+    topAreaChildren: RealmNode<ComponentType<{}>[]>;
+    addTopAreaChild: RealmNode<ComponentType<{}>>;
+    nestedEditorChildren: RealmNode<ComponentType<{}>[]>;
+    addNestedEditorChild: RealmNode<ComponentType<{}>>;
+    editorWrappers: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>[]>;
+    addEditorWrapper: RealmNode<ComponentType<{
+        children: ReactNode;
+    }>>;
+    currentFormat: RealmNode<number>;
+    editorInFocus: RealmNode<EditorInFocus | null>;
+    applyFormat: RealmNode<TextFormatType>;
+    currentBlockType: RealmNode<BlockType>;
+    applyBlockType: RealmNode<BlockType>;
+    convertSelectionToNode: RealmNode<() => ElementNode>;
+    insertDecoratorNode: RealmNode<() => DecoratorNode<unknown>>;
+}]) => {}>, object>;

package/dist/plugins/headings/index.js

@@ -1,10 +1,47 @@
 import { coreSystem } from "../core/index.js";
 import { MdastHeadingVisitor } from "./MdastHeadingVisitor.js";
-import { HeadingNode } from "@lexical/rich-text";
+import { $createHeadingNode, HeadingNode } from "@lexical/rich-text";
 import { LexicalHeadingVisitor } from "./LexicalHeadingVisitor.js";
+import { KEY_DOWN_COMMAND, $createParagraphNode, COMMAND_PRIORITY_LOW } from "lexical";
+import { controlOrMeta } from "../../utils/detectMac.js";
 import { system } from "../../gurx/realmFactory.js";
 import { realmPlugin } from "../../gurx/react.js";
-const headingsSystem = system((_) => ({}), [coreSystem]);
+const FORMATTING_KEYS = [48, 49, 50, 51, 52, 53, 54];
+const CODE_TO_HEADING_MAP = {
+  49: "h1",
+  50: "h2",
+  51: "h3",
+  52: "h4",
+  53: "h5",
+  54: "h6"
+};
+const headingsSystem = system(
+  (r, [{ createRootEditorSubscription, convertSelectionToNode }]) => {
+    r.pub(createRootEditorSubscription, (theRootEditor) => {
+      return theRootEditor.registerCommand(
+        KEY_DOWN_COMMAND,
+        (event) => {
+          const { keyCode, ctrlKey, metaKey, altKey } = event;
+          if (FORMATTING_KEYS.includes(keyCode) && controlOrMeta(metaKey, ctrlKey) && altKey) {
+            event.preventDefault();
+            theRootEditor.update(() => {
+              if (keyCode === 48) {
+                r.pub(convertSelectionToNode, () => $createParagraphNode());
+              } else {
+                r.pub(convertSelectionToNode, () => $createHeadingNode(CODE_TO_HEADING_MAP[keyCode]));
+              }
+            });
+            return true;
+          }
+          return false;
+        },
+        COMMAND_PRIORITY_LOW
+      );
+    });
+    return {};
+  },
+  [coreSystem]
+);
 const [headingsPlugin] = realmPlugin({
   id: "headings",
   systemSpec: headingsSystem,

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

@@ -1,5 +1,5 @@
 import { TOGGLE_LINK_COMMAND, $isLinkNode } from "@lexical/link";
-import { $isRangeSelection, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, COMMAND_PRIORITY_HIGH } from "lexical";
+import { $isRangeSelection, KEY_ESCAPE_COMMAND, COMMAND_PRIORITY_LOW, KEY_MODIFIER_COMMAND, $getSelection, COMMAND_PRIORITY_HIGH } from "lexical";
 import { IS_APPLE } from "../../utils/detectMac.js";
 import { getSelectionRectangle, getSelectedNode } from "../../utils/lexicalHelpers.js";
 import { coreSystem } from "../core/index.js";
@@ -83,9 +83,14 @@ const linkDialogSystem = system(
         KEY_MODIFIER_COMMAND,
         (event) => {
           if (event.key === "k" && (IS_APPLE ? event.metaKey : event.ctrlKey)) {
-            r.pub(openLinkEditDialog, true);
-            event.stopPropagation();
-            return true;
+            const selection = $getSelection();
+            if ($isRangeSelection(selection) && !selection.isCollapsed()) {
+              r.pub(openLinkEditDialog, true);
+              event.stopPropagation();
+              return true;
+            } else {
+              return false;
+            }
           }
           return false;
         },

package/dist/plugins/toolbar/primitives/DialogButton.js

@@ -77,6 +77,7 @@ const DialogForm = ({ autocompleteSuggestions, onSubmitCallback, dialogInputPlac
   };
   const onSubmitEH = (e) => {
     e.preventDefault();
+    e.stopPropagation();
     onSubmitCallback(inputProps.value);
   };
   const dropdownIsVisible = isOpen && items.length > 0;

package/dist/utils/detectMac.d.ts

@@ -1,2 +1,3 @@
 export declare const CAN_USE_DOM: boolean;
 export declare const IS_APPLE: boolean;
+export declare function controlOrMeta(metaKey: boolean, ctrlKey: boolean): boolean;

package/dist/utils/detectMac.js

@@ -1,6 +1,13 @@
 const CAN_USE_DOM = typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined";
 const IS_APPLE = CAN_USE_DOM && /Mac|iPod|iPhone|iPad/.test(navigator.platform);
+function controlOrMeta(metaKey, ctrlKey) {
+  if (IS_APPLE) {
+    return metaKey;
+  }
+  return ctrlKey;
+}
 export {
   CAN_USE_DOM,
-  IS_APPLE
+  IS_APPLE,
+  controlOrMeta
 };

package/package.json

@@ -9,7 +9,7 @@
   "private": false,
   "sideEffects": false,
   "type": "module",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "description": "React component for rich text markdown editing",
   "scripts": {
     "build": "vite build",