@byline/richtext-lexical 3.4.0 → 3.5.0

package/dist/field/extensions/admonition/admonition-commands.d.ts

@@ -0,0 +1,25 @@
+/**
+ * This Source Code is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ *
+ * Copyright (c) Infonomic Company Limited
+ */
+/**
+ * Leaf module for the admonition Lexical commands. Lives apart from
+ * `admonition-extension.tsx` so the node class (`admonition-node.tsx`)
+ * can dispatch the "open modal" command from its `createDOM` chrome
+ * without importing the extension (which imports the node — a cycle).
+ */
+import { type LexicalCommand, type NodeKey } from 'lexical';
+import type { AdmonitionAttributes } from './node-types';
+/**
+ * Opens the admonition modal. Payload of `null` means "insert a new
+ * admonition"; a `{ nodeKey }` payload means "edit the existing node"
+ * — dispatched by the per-node Edit button rendered in `createDOM`.
+ */
+export declare const OPEN_ADMONITION_MODAL_COMMAND: LexicalCommand<{
+    nodeKey: NodeKey;
+} | null>;
+/** Inserts a new admonition (type + title come from the modal). */
+export declare const INSERT_ADMONITION_COMMAND: LexicalCommand<AdmonitionAttributes>;

package/dist/field/extensions/admonition/admonition-commands.js

@@ -0,0 +1,4 @@
+import { createCommand } from "lexical";
+const OPEN_ADMONITION_MODAL_COMMAND = createCommand('OPEN_ADMONITION_MODAL_COMMAND');
+const INSERT_ADMONITION_COMMAND = createCommand('INSERT_ADMONITION_COMMAND');
+export { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND };

package/dist/field/extensions/admonition/admonition-extension.d.ts

@@ -6,10 +6,9 @@
  * Copyright (c) Infonomic Company Limited
  */
 import * as React from 'react';
-import { type LexicalCommand } from 'lexical';
+import { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND } from './admonition-commands';
 import type { AdmonitionAttributes } from './node-types';
 export type InsertAdmonitionPayload = Readonly<AdmonitionAttributes>;
-export declare const OPEN_ADMONITION_MODAL_COMMAND: LexicalCommand<null>;
-export declare const INSERT_ADMONITION_COMMAND: LexicalCommand<AdmonitionAttributes>;
+export { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND };
 export declare function AdmonitionPlugin(): React.JSX.Element;
 export declare const AdmonitionExtension: import("lexical").LexicalExtension<import("lexical").ExtensionConfigBase, "@byline/richtext-lexical/Admonition", unknown, unknown>;

package/dist/field/extensions/admonition/admonition-extension.js

@@ -2,57 +2,163 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
 import { ReactExtension } from "@lexical/react/ReactExtension";
-import { $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
-import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_NORMAL, configExtension, createCommand, declarePeerDependency, defineExtension } from "lexical";
+import { useOptionalExtensionDependency } from "@lexical/react/useExtensionComponent";
+import { $findMatchingParent, $insertNodeToNearestRoot, mergeRegister } from "@lexical/utils";
+import { $createParagraphNode, $createTextNode, $getNodeByKey, $getSelection, $isDecoratorNode, $isElementNode, $isLineBreakNode, $isParagraphNode, $isRangeSelection, $isTextNode, COMMAND_PRIORITY_EDITOR, COMMAND_PRIORITY_LOW, COMMAND_PRIORITY_NORMAL, KEY_ARROW_DOWN_COMMAND, KEY_ARROW_LEFT_COMMAND, KEY_ARROW_RIGHT_COMMAND, KEY_ARROW_UP_COMMAND, configExtension, declarePeerDependency, defineExtension } from "lexical";
 import { useToolbarActiveEditor } from "../../plugins/toolbar-plugin/toolbar-active-editor.js";
 import { DropDownItem } from "../../ui/dropdown.js";
+import { BylineFloatingUIExtension } from "../byline-floating-ui/byline-floating-ui-extension.js";
 import { BylineToolbarExtension } from "../byline-toolbar/byline-toolbar-extension.js";
+import { FloatingTextFormatExtension } from "../floating-text-format/floating-text-format-extension.js";
+import { FloatingTextFormatToolbarPlugin } from "../floating-text-format/index.js";
+import { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND } from "./admonition-commands.js";
 import { AdmonitionModal } from "./admonition-modal.js";
-import { $createAdmonitionNode, AdmonitionNode } from "./admonition-node.js";
+import { $createAdmonitionNode, $isAdmonitionNode, AdmonitionNode } from "./admonition-node.js";
 import * as __rspack_external_react from "react";
-const OPEN_ADMONITION_MODAL_COMMAND = createCommand('OPEN_ADMONITION_MODAL_COMMAND');
-const INSERT_ADMONITION_COMMAND = createCommand('INSERT_ADMONITION_COMMAND');
+function $selectionInsideAdmonition() {
+    const selection = $getSelection();
+    if (!$isRangeSelection(selection)) return false;
+    return null != $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode);
+}
+function $flattenToParagraph(element) {
+    const paragraph = $createParagraphNode();
+    const children = element.getChildren();
+    const allInline = children.length > 0 && children.every((child)=>$isTextNode(child) || $isLineBreakNode(child) || child.isInline());
+    if (allInline) paragraph.append(...children);
+    else {
+        const text = element.getTextContent();
+        if (text.length > 0) paragraph.append($createTextNode(text));
+    }
+    element.replace(paragraph);
+}
+function $normalizeAdmonition(node) {
+    const parent = node.getParent();
+    const ancestorAdmonition = null != parent ? $findMatchingParent(parent, (candidate)=>$isAdmonitionNode(candidate)) : null;
+    if (null != ancestorAdmonition) {
+        for (const child of node.getChildren())node.insertBefore(child);
+        node.remove();
+        return;
+    }
+    if (0 === node.getChildrenSize()) return void node.append($createParagraphNode());
+    for (const child of node.getChildren())if (!$isParagraphNode(child)) {
+        if ($isTextNode(child) || $isLineBreakNode(child) || child.isInline()) {
+            const paragraph = $createParagraphNode();
+            child.insertBefore(paragraph);
+            paragraph.append(child);
+            continue;
+        }
+        if ($isDecoratorNode(child)) {
+            child.remove();
+            continue;
+        }
+        if ($isElementNode(child)) $flattenToParagraph(child);
+    }
+}
+function $onEscapeUp() {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection) && selection.isCollapsed() && 0 === selection.anchor.offset) {
+        const admonition = $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode);
+        if ($isAdmonitionNode(admonition)) {
+            const parent = admonition.getParent();
+            if (null != parent && parent.getFirstChild() === admonition && selection.anchor.key === admonition.getFirstDescendant()?.getKey()) admonition.insertBefore($createParagraphNode());
+        }
+    }
+    return false;
+}
+function $onEscapeDown() {
+    const selection = $getSelection();
+    if ($isRangeSelection(selection) && selection.isCollapsed()) {
+        const admonition = $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode);
+        if ($isAdmonitionNode(admonition)) {
+            const parent = admonition.getParent();
+            if (null != parent && parent.getLastChild() === admonition) {
+                const lastParagraph = admonition.getLastDescendant();
+                if (null != lastParagraph && selection.anchor.key === lastParagraph.getKey() && selection.anchor.offset === lastParagraph.getTextContentSize()) admonition.insertAfter($createParagraphNode());
+            }
+        }
+    }
+    return false;
+}
 function AdmonitionPlugin() {
     const [editor] = useLexicalComposerContext();
     const [open, setOpen] = __rspack_external_react.useState(false);
+    const [editNodeKey, setEditNodeKey] = __rspack_external_react.useState(null);
+    const [modalData, setModalData] = __rspack_external_react.useState({
+        title: '',
+        admonitionType: void 0
+    });
     (0, __rspack_external_react.useEffect)(()=>{
         if (!editor.hasNodes([
             AdmonitionNode
         ])) throw new Error('AdmonitionPlugin: AdmonitionNode not registered on editor');
-        return mergeRegister(editor.registerCommand(OPEN_ADMONITION_MODAL_COMMAND, ()=>{
+        return mergeRegister(editor.registerCommand(OPEN_ADMONITION_MODAL_COMMAND, (payload)=>{
+            if (null == payload) {
+                setEditNodeKey(null);
+                setModalData({
+                    title: '',
+                    admonitionType: void 0
+                });
+                setOpen(true);
+                return true;
+            }
+            const data = editor.getEditorState().read(()=>{
+                const node = $getNodeByKey(payload.nodeKey);
+                return $isAdmonitionNode(node) ? {
+                    title: node.getTitle(),
+                    admonitionType: node.getAdmonitionType()
+                } : null;
+            });
+            if (null == data) return false;
+            setEditNodeKey(payload.nodeKey);
+            setModalData(data);
             setOpen(true);
             return true;
         }, COMMAND_PRIORITY_NORMAL), editor.registerCommand(INSERT_ADMONITION_COMMAND, (payload)=>{
             const selection = $getSelection();
             if (!$isRangeSelection(selection)) return false;
-            const focusNode = selection.focus.getNode();
-            if (null !== focusNode) {
-                const admonitionNode = $createAdmonitionNode(payload);
-                $insertNodeToNearestRoot(admonitionNode);
-            }
+            if ($selectionInsideAdmonition()) return true;
+            const admonition = $createAdmonitionNode(payload);
+            admonition.append($createParagraphNode());
+            $insertNodeToNearestRoot(admonition);
+            admonition.selectStart();
             return true;
-        }, COMMAND_PRIORITY_EDITOR));
+        }, COMMAND_PRIORITY_EDITOR), editor.registerNodeTransform(AdmonitionNode, $normalizeAdmonition), editor.registerCommand(KEY_ARROW_DOWN_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_RIGHT_COMMAND, $onEscapeDown, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_UP_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ARROW_LEFT_COMMAND, $onEscapeUp, COMMAND_PRIORITY_LOW));
     }, [
         editor
     ]);
-    const handleInsertAdmonition = ({ admonitionType, title })=>{
-        if (null != title && null != admonitionType) {
-            const admonitionPayload = {
+    const handleSubmit = ({ admonitionType, title })=>{
+        setOpen(false);
+        if (null == admonitionType) return;
+        const key = editNodeKey;
+        if (null != key) editor.update(()=>{
+            const node = $getNodeByKey(key);
+            if ($isAdmonitionNode(node)) node.update({
                 admonitionType,
                 title
-            };
-            editor.dispatchCommand(INSERT_ADMONITION_COMMAND, admonitionPayload);
-        } else console.error('Error: missing title or type for admonition.');
-        setOpen(false);
+            });
+        });
+        else editor.dispatchCommand(INSERT_ADMONITION_COMMAND, {
+            admonitionType,
+            title
+        });
+        setEditNodeKey(null);
     };
     return /*#__PURE__*/ jsx(AdmonitionModal, {
         open: open,
-        data: {
-            title: '',
-            admonitionType: void 0
+        data: modalData,
+        onClose: ()=>{
+            setOpen(false);
+            setEditNodeKey(null);
         },
-        onClose: ()=>setOpen(false),
-        onSubmit: handleInsertAdmonition
+        onSubmit: handleSubmit
+    });
+}
+function AdmonitionFloatingTextFormat({ anchorElem }) {
+    const hasGlobalToolbar = void 0 !== useOptionalExtensionDependency(FloatingTextFormatExtension);
+    if (hasGlobalToolbar) return null;
+    return /*#__PURE__*/ jsx(FloatingTextFormatToolbarPlugin, {
+        anchorElem: anchorElem,
+        shouldShow: $selectionInsideAdmonition
     });
 }
 function AdmonitionInsertItem() {
@@ -95,6 +201,14 @@ const AdmonitionExtension = defineExtension({
                     node: /*#__PURE__*/ jsx(AdmonitionInsertItem, {})
                 }
             ]
+        }),
+        declarePeerDependency(BylineFloatingUIExtension.name, {
+            items: [
+                {
+                    id: '@byline/richtext-lexical/Admonition/floating-text-format',
+                    Component: AdmonitionFloatingTextFormat
+                }
+            ]
         })
     ]
 });

package/dist/field/extensions/admonition/admonition-node.css

@@ -0,0 +1,112 @@
+.LexicalEditor__admonition {
+  border: 1px solid #666;
+  border-left-width: 4px;
+  border-radius: 3px;
+  margin-top: .5rem;
+  margin-bottom: 1.5rem;
+  padding: 8px 12px 4px;
+  position: relative;
+}
+
+.LexicalEditor__admonition.admonition-note {
+  border-left-color: #4a90d9;
+}
+
+.LexicalEditor__admonition.admonition-tip {
+  border-left-color: #3fa45b;
+}
+
+.LexicalEditor__admonition.admonition-warning {
+  border-left-color: #d9a334;
+}
+
+.LexicalEditor__admonition.admonition-danger {
+  border-left-color: #d94a4a;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__header {
+  text-transform: capitalize;
+  -webkit-user-select: none;
+  user-select: none;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: .25rem;
+  font-size: 1rem;
+  font-weight: bold;
+  display: flex;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__icon {
+  align-items: center;
+  display: inline-flex;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__icon svg {
+  fill: currentColor;
+  width: 20px;
+  height: 20px;
+}
+
+.LexicalEditor__admonition.admonition-note .AdmonitionNode__icon {
+  color: #4a90d9;
+}
+
+.LexicalEditor__admonition.admonition-tip .AdmonitionNode__icon {
+  color: #3fa45b;
+}
+
+.LexicalEditor__admonition.admonition-warning .AdmonitionNode__icon {
+  color: #d9a334;
+}
+
+.LexicalEditor__admonition.admonition-danger .AdmonitionNode__icon {
+  color: #d94a4a;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__title {
+  flex: auto;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__edit-button {
+  color: inherit;
+  cursor: pointer;
+  -webkit-user-select: none;
+  user-select: none;
+  background-color: #0000000a;
+  border: 1px solid #0003;
+  border-radius: 5px;
+  flex: none;
+  padding: 2px 8px;
+  font-size: .8rem;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__edit-button:hover {
+  background-color: #3c84f42e;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content {
+  color: #4b5563;
+  font-size: .925em;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content > * {
+  margin-bottom: .25em;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content > :last-child {
+  margin-bottom: 0;
+}
+
+.dark .LexicalEditor__admonition {
+  border-color: #444;
+}
+
+.dark .LexicalEditor__admonition .AdmonitionNode__content {
+  color: #9ca3af;
+}
+
+.dark .LexicalEditor__admonition .AdmonitionNode__edit-button {
+  background-color: #ffffff14;
+  border-color: #fff3;
+}
+

package/dist/field/extensions/admonition/admonition-node.d.ts

@@ -5,30 +5,42 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import * as React from 'react';
-import type { DOMConversionMap, DOMExportOutput, EditorConfig, LexicalEditor, LexicalNode, NodeKey } from 'lexical';
-import { DecoratorNode } from 'lexical';
+import type { DOMConversionMap, DOMExportOutput, EditorConfig, ElementDOMSlot, LexicalEditor, LexicalNode, LexicalUpdateJSON, NodeKey } from 'lexical';
+import { ElementNode } from 'lexical';
 import type { AdmonitionAttributes, AdmonitionType, SerializedAdmonitionNode } from './node-types';
-export declare class AdmonitionNode extends DecoratorNode<React.JSX.Element> {
+import './admonition-node.css';
+/**
+ * The admonition (callout) block. An `ElementNode` whose body is real
+ * children in the main editor tree — see the module note in
+ * `../../markdown/transformers.ts` for why this beats a nested editor for
+ * markdown round-tripping. `__admonitionType` / `__title` are attributes set
+ * from the Insert/Edit modal and rendered as non-editable chrome; the body
+ * (paragraphs + inline content) renders into the slot returned by
+ * `getDOMSlot`.
+ */
+export declare class AdmonitionNode extends ElementNode {
     __admonitionType: AdmonitionType;
     __title: string;
-    __content: LexicalEditor;
     static getType(): string;
     static clone(node: AdmonitionNode): AdmonitionNode;
     static importJSON(serializedNode: SerializedAdmonitionNode): AdmonitionNode;
     static importDOM(): DOMConversionMap | null;
-    constructor(admonitionType: AdmonitionType, title: string, content?: LexicalEditor, key?: NodeKey);
-    exportDOM(): DOMExportOutput;
+    constructor(admonitionType: AdmonitionType, title: string, key?: NodeKey);
+    updateFromJSON(serializedNode: LexicalUpdateJSON<SerializedAdmonitionNode>): this;
     exportJSON(): SerializedAdmonitionNode;
+    exportDOM(): DOMExportOutput;
+    isShadowRoot(): boolean;
     isInline(): false;
+    canBeEmpty(): boolean;
+    canIndent(): false;
+    createDOM(config: EditorConfig, editor: LexicalEditor): HTMLElement;
+    getDOMSlot(element: HTMLElement): ElementDOMSlot<HTMLElement>;
+    updateDOM(prevNode: AdmonitionNode, dom: HTMLElement): boolean;
     getTitle(): string;
-    setTitle(title: string): void;
+    setTitle(title: string): this;
     getAdmonitionType(): AdmonitionType;
-    setAdmonitionType(admonitionType: AdmonitionType): void;
-    update(payload: AdmonitionAttributes): void;
-    createDOM(config: EditorConfig): HTMLElement;
-    updateDOM(prevNode: AdmonitionNode, dom: HTMLElement, config: EditorConfig): boolean;
-    decorate(): React.JSX.Element;
+    setAdmonitionType(admonitionType: AdmonitionType): this;
+    update(payload: Partial<Pick<AdmonitionAttributes, 'admonitionType' | 'title'>>): void;
 }
-export declare function $createAdmonitionNode({ admonitionType, title, content, key, }: AdmonitionAttributes): AdmonitionNode;
+export declare function $createAdmonitionNode({ admonitionType, title, key, }: AdmonitionAttributes): AdmonitionNode;
 export declare function $isAdmonitionNode(node: LexicalNode | null | undefined): node is AdmonitionNode;

package/dist/field/extensions/admonition/admonition-node.js

@@ -1,127 +1,176 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
-import { $applyNodeReplacement, DecoratorNode, createEditor } from "lexical";
-import * as __rspack_external_react from "react";
-const AdmonitionNodeComponent = /*#__PURE__*/ __rspack_external_react.lazy(async ()=>await import("./admonition-node-component.js"));
+import { $applyNodeReplacement, ElementNode } from "lexical";
+import { OPEN_ADMONITION_MODAL_COMMAND } from "./admonition-commands.js";
+import "./admonition-node.css";
+const ADMONITION_TYPES = new Set([
+    'note',
+    'tip',
+    'warning',
+    'danger'
+]);
+function isAdmonitionType(value) {
+    return 'string' == typeof value && ADMONITION_TYPES.has(value);
+}
+const ICON_SVG = {
+    note: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M11,17H13V11H11V17Z"></path></svg>',
+    tip: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2,4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"></path></svg>',
+    warning: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"></path></svg>',
+    danger: '<svg focusable="false" aria-hidden="true" viewBox="0 0 24 24"><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"></path></svg>'
+};
 function convertAdmonitionElement(domNode) {
-    if (domNode instanceof HTMLDivElement) {
+    if (domNode instanceof HTMLDivElement && null != domNode.dataset.type) {
         const type = domNode.dataset.type;
-        const title = domNode.dataset.title;
-        const node = $createAdmonitionNode({
-            admonitionType: type,
-            title
-        });
+        if (!isAdmonitionType(type)) return null;
+        const title = domNode.dataset.title ?? '';
         return {
-            node
+            node: $createAdmonitionNode({
+                admonitionType: type,
+                title
+            })
         };
     }
     return null;
 }
-class AdmonitionNode extends DecoratorNode {
+class AdmonitionNode extends ElementNode {
     static getType() {
         return 'admonition';
     }
     static clone(node) {
-        return new AdmonitionNode(node.__admonitionType, node.__title, node.__content, node.__key);
+        return new AdmonitionNode(node.__admonitionType, node.__title, node.__key);
     }
     static importJSON(serializedNode) {
-        const { admonitionType, title, content } = serializedNode;
-        const node = $createAdmonitionNode({
-            admonitionType,
-            title
-        });
-        const nestedEditor = node.__content;
-        const editorState = nestedEditor.parseEditorState(content.editorState);
-        if (!editorState.isEmpty()) nestedEditor.setEditorState(editorState);
-        return node;
+        return $createAdmonitionNode({
+            admonitionType: serializedNode.admonitionType,
+            title: serializedNode.title
+        }).updateFromJSON(serializedNode);
     }
     static importDOM() {
         return {
-            div: (_node)=>({
+            div: (node)=>{
+                if (null == node.dataset.type || !isAdmonitionType(node.dataset.type)) return null;
+                return {
                     conversion: convertAdmonitionElement,
-                    priority: 0
-                })
+                    priority: 1
+                };
+            }
+        };
+    }
+    updateFromJSON(serializedNode) {
+        return super.updateFromJSON(serializedNode).setAdmonitionType(serializedNode.admonitionType).setTitle(serializedNode.title);
+    }
+    exportJSON() {
+        return {
+            ...super.exportJSON(),
+            admonitionType: this.__admonitionType,
+            title: this.__title
         };
     }
     exportDOM() {
         const element = document.createElement('div');
         element.setAttribute('data-type', this.__admonitionType);
         element.setAttribute('data-title', this.__title);
+        element.className = `admonition admonition-${this.__admonitionType}`;
         return {
             element
         };
     }
-    exportJSON() {
-        return {
-            admonitionType: this.__admonitionType,
-            title: this.__title,
-            content: this.__content.toJSON(),
-            type: 'admonition',
-            version: 1
-        };
+    isShadowRoot() {
+        return true;
     }
     isInline() {
         return false;
     }
+    canBeEmpty() {
+        return true;
+    }
+    canIndent() {
+        return false;
+    }
+    createDOM(config, editor) {
+        const key = this.getKey();
+        const dom = document.createElement('div');
+        dom.setAttribute('data-type', this.__admonitionType);
+        dom.setAttribute('data-title', this.__title);
+        dom.className = `${config.theme.admonition ?? ''} admonition-${this.__admonitionType}`.trim();
+        const header = document.createElement('div');
+        header.className = 'AdmonitionNode__header';
+        header.contentEditable = 'false';
+        header.setAttribute('data-lexical-admonition-chrome', 'true');
+        const icon = document.createElement('span');
+        icon.className = 'AdmonitionNode__icon';
+        icon.innerHTML = ICON_SVG[this.__admonitionType];
+        const titleEl = document.createElement('span');
+        titleEl.className = 'AdmonitionNode__title';
+        titleEl.textContent = this.__title;
+        const editButton = document.createElement('button');
+        editButton.type = 'button';
+        editButton.className = 'AdmonitionNode__edit-button';
+        editButton.textContent = 'Edit';
+        editButton.addEventListener('click', (event)=>{
+            event.preventDefault();
+            event.stopPropagation();
+            editor.dispatchCommand(OPEN_ADMONITION_MODAL_COMMAND, {
+                nodeKey: key
+            });
+        });
+        header.appendChild(icon);
+        header.appendChild(titleEl);
+        header.appendChild(editButton);
+        const content = document.createElement('div');
+        content.className = 'AdmonitionNode__content';
+        dom.appendChild(header);
+        dom.appendChild(content);
+        return dom;
+    }
+    getDOMSlot(element) {
+        const content = element.querySelector(':scope > .AdmonitionNode__content');
+        if (!(content instanceof HTMLElement)) throw new Error('AdmonitionNode: expected a .AdmonitionNode__content slot element');
+        return super.getDOMSlot(element).withElement(content);
+    }
+    updateDOM(prevNode, dom) {
+        const type = this.__admonitionType;
+        if (type !== prevNode.__admonitionType) {
+            dom.className = `${dom.className.replace(/admonition-\w+/, '').trim()} admonition-${type}`.trim();
+            dom.setAttribute('data-type', type);
+            const icon = dom.querySelector(':scope > .AdmonitionNode__header > .AdmonitionNode__icon');
+            if (null != icon) icon.innerHTML = ICON_SVG[type];
+        }
+        if (this.__title !== prevNode.__title) {
+            dom.setAttribute('data-title', this.__title);
+            const titleEl = dom.querySelector(':scope > .AdmonitionNode__header > .AdmonitionNode__title');
+            if (null != titleEl) titleEl.textContent = this.__title;
+        }
+        return false;
+    }
     getTitle() {
-        return this.__title;
+        return this.getLatest().__title;
     }
     setTitle(title) {
         const writable = this.getWritable();
         writable.__title = title;
+        return writable;
     }
     getAdmonitionType() {
-        return this.__admonitionType;
+        return this.getLatest().__admonitionType;
     }
     setAdmonitionType(admonitionType) {
         const writable = this.getWritable();
         writable.__admonitionType = admonitionType;
+        return writable;
     }
     update(payload) {
         const writable = this.getWritable();
-        const { admonitionType, title } = payload;
-        if (null != admonitionType) writable.__admonitionType = admonitionType;
-        if (null != title) writable.__title = title;
-    }
-    createDOM(config) {
-        const div = document.createElement('div');
-        div.setAttribute('data-type', this.__admonitionType);
-        div.setAttribute('data-title', this.__title);
-        const className = `${config.theme.admonition} admonition-${this.__admonitionType}`;
-        if (void 0 !== className) div.className = className;
-        return div;
-    }
-    updateDOM(prevNode, dom, config) {
-        const admonitionType = this.__admonitionType;
-        if (admonitionType !== prevNode.__admonitionType) {
-            const className = `${config.theme.admonition} admonition-${admonitionType}`;
-            if (void 0 !== className) dom.className = className;
-            dom.setAttribute('data-type', admonitionType);
-            return true;
-        }
-        if (this.__title !== prevNode.__title) {
-            dom.setAttribute('data-title', this.__title);
-            return true;
-        }
-        return false;
-    }
-    decorate() {
-        return /*#__PURE__*/ jsx(AdmonitionNodeComponent, {
-            admonitionType: this.__admonitionType,
-            title: this.__title,
-            content: this.__content,
-            nodeKey: this.getKey()
-        });
+        if (null != payload.admonitionType) writable.__admonitionType = payload.admonitionType;
+        if (null != payload.title) writable.__title = payload.title;
     }
-    constructor(admonitionType, title, content, key){
+    constructor(admonitionType, title, key){
         super(key);
         this.__admonitionType = admonitionType;
         this.__title = title;
-        this.__content = content ?? createEditor();
     }
 }
-function $createAdmonitionNode({ admonitionType, title, content, key }) {
-    return $applyNodeReplacement(new AdmonitionNode(admonitionType, title, content, key));
+function $createAdmonitionNode({ admonitionType, title, key }) {
+    return $applyNodeReplacement(new AdmonitionNode(admonitionType, title, key));
 }
 function $isAdmonitionNode(node) {
     return node instanceof AdmonitionNode;

package/dist/field/extensions/admonition/index.js

@@ -1,2 +1,3 @@
+export * from "./admonition-commands.js";
 export * from "./admonition-node.js";
 export * from "./node-types.js";