@byline/richtext-lexical 3.4.1 → 3.5.0

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

@@ -5,16 +5,22 @@
  *
  * Copyright (c) Infonomic Company Limited
  */
-import type { LexicalEditor, NodeKey, SerializedEditor, SerializedLexicalNode, Spread } from 'lexical';
+import type { NodeKey, SerializedElementNode, Spread } from 'lexical';
 export type AdmonitionType = 'note' | 'tip' | 'warning' | 'danger';
 export interface AdmonitionAttributes {
     admonitionType: AdmonitionType;
     title: string;
-    content?: LexicalEditor;
     key?: NodeKey;
 }
+/**
+ * The admonition is an `ElementNode` — its body lives as real children in
+ * the main editor tree (paragraphs + inline content), so the serialized
+ * shape extends `SerializedElementNode` and carries `children`. `type` and
+ * `title` are node-level attributes set from the Insert/Edit modal; they
+ * ride the opening Docusaurus fence (`:::type[title]`) on markdown export,
+ * not the body.
+ */
 export type SerializedAdmonitionNode = Spread<{
     admonitionType: AdmonitionType;
     title: string;
-    content: SerializedEditor;
-}, SerializedLexicalNode>;
+}, SerializedElementNode>;

package/dist/field/extensions/floating-text-format/index.d.ts

@@ -7,6 +7,13 @@
  */
 import './index.css';
 import type * as React from 'react';
-export declare function FloatingTextFormatToolbarPlugin({ anchorElem, }: {
+export declare function FloatingTextFormatToolbarPlugin({ anchorElem, shouldShow, }: {
     anchorElem?: HTMLElement;
+    /**
+     * Optional gate evaluated inside an editor read context. Return `false`
+     * to suppress the popover for the current selection — used to scope the
+     * toolbar to admonition bodies on editors where the global
+     * `FloatingTextFormatExtension` is removed.
+     */
+    shouldShow?: () => boolean;
 }): React.JSX.Element | null;

package/dist/field/extensions/floating-text-format/index.js

@@ -207,7 +207,7 @@ function TextFormatFloatingToolbar({ editor, anchorElem, isLink, isBold, isItali
         })
     });
 }
-function useFloatingTextFormatToolbar(editor, anchorElem) {
+function useFloatingTextFormatToolbar(editor, anchorElem, shouldShow) {
     const [isText, setIsText] = useState(false);
     const [isLink, setIsLink] = useState(false);
     const [isBold, setIsBold] = useState(false);
@@ -225,6 +225,7 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
             const rootElement = editor.getRootElement();
             if (null !== nativeSelection && (!$isRangeSelection(selection) || null === rootElement || !rootElement.contains(nativeSelection.anchorNode))) return void setIsText(false);
             if (!$isRangeSelection(selection)) return;
+            if (null != shouldShow && !shouldShow()) return void setIsText(false);
             const node = getSelectedNode(selection);
             setIsBold(selection.hasFormat('bold'));
             setIsItalic(selection.hasFormat('italic'));
@@ -240,7 +241,8 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
             if (!selection.isCollapsed() && '' === rawTextContent) setIsText(false);
         });
     }, [
-        editor
+        editor,
+        shouldShow
     ]);
     useEffect(()=>{
         document.addEventListener('selectionchange', updatePopup);
@@ -272,8 +274,8 @@ function useFloatingTextFormatToolbar(editor, anchorElem) {
         isCode: isCode
     }), anchorElem);
 }
-function FloatingTextFormatToolbarPlugin({ anchorElem = document.body }) {
+function FloatingTextFormatToolbarPlugin({ anchorElem = document.body, shouldShow }) {
     const [editor] = useLexicalComposerContext();
-    return useFloatingTextFormatToolbar(editor, anchorElem);
+    return useFloatingTextFormatToolbar(editor, anchorElem, shouldShow);
 }
 export { FloatingTextFormatToolbarPlugin };

package/dist/field/markdown/transformers.js

@@ -1,6 +1,6 @@
-import { $convertFromMarkdownString, $convertToMarkdownString, TEXT_FORMAT_TRANSFORMERS, TRANSFORMERS } from "@lexical/markdown";
+import { $convertFromMarkdownString, $convertToMarkdownString, LINK, TEXT_FORMAT_TRANSFORMERS, TRANSFORMERS } from "@lexical/markdown";
 import { $createTableCellNode, $createTableNode, $createTableRowNode, $isTableCellNode, $isTableNode, $isTableRowNode, TableCellHeaderStates, TableCellNode, TableNode, TableRowNode } from "@lexical/table";
-import { $isParagraphNode, $isTextNode } from "lexical";
+import { $createParagraphNode, $isParagraphNode, $isTextNode } from "lexical";
 import { $createAdmonitionNode, $isAdmonitionNode, AdmonitionNode } from "../extensions/admonition/admonition-node.js";
 const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
 const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-+:? ?)+\|?\s?$/;
@@ -103,7 +103,8 @@ const ADMONITION_TYPES = new Set([
 const ADMONITION_START_REG_EXP = /^:::(note|tip|warning|danger)(?:\[([^\]]*)\])?\s*$/;
 const ADMONITION_END_REG_EXP = /^:::\s*$/;
 const ADMONITION_BODY_TRANSFORMERS = [
-    ...TEXT_FORMAT_TRANSFORMERS
+    ...TEXT_FORMAT_TRANSFORMERS,
+    LINK
 ];
 const ADMONITION = {
     dependencies: [
@@ -113,10 +114,7 @@ const ADMONITION = {
         if (!$isAdmonitionNode(node)) return null;
         const type = node.getAdmonitionType();
         const title = node.getTitle();
-        let body = '';
-        node.__content.read(()=>{
-            body = $convertToMarkdownString(ADMONITION_BODY_TRANSFORMERS).trim();
-        });
+        const body = $convertToMarkdownString(ADMONITION_BODY_TRANSFORMERS, node).trim();
         const heading = title ? `:::${type}[${title}]` : `:::${type}`;
         return body ? `${heading}\n${body}\n:::` : `${heading}\n:::`;
     },
@@ -125,7 +123,7 @@ const ADMONITION = {
         optional: true,
         regExp: ADMONITION_END_REG_EXP
     },
-    replace: (rootNode, children, startMatch, _endMatch, linesInBetween)=>{
+    replace: (rootNode, children, startMatch, _endMatch, linesInBetween, isImport)=>{
         const rawType = startMatch[1];
         if (!ADMONITION_TYPES.has(rawType)) return false;
         const admonitionType = rawType;
@@ -134,15 +132,14 @@ const ADMONITION = {
             admonitionType,
             title
         });
-        if (!children && null != linesInBetween) {
+        if (null != children) node.append(...children);
+        else if (null != linesInBetween) {
             const body = linesInBetween.join('\n').trim();
-            if (body) node.__content.update(()=>{
-                $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS);
-            }, {
-                discrete: true
-            });
+            if (body) $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS, node);
         }
+        if (0 === node.getChildrenSize()) node.append($createParagraphNode());
         rootNode.append(node);
+        if (!isImport) node.selectStart();
     },
     type: 'multiline-element'
 };

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.4.1",
+  "version": "3.5.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -77,10 +77,10 @@
     "npm-run-all": "^4.1.5",
     "prism-react-renderer": "^2.4.1",
     "react-error-boundary": "^6.1.1",
-    "@byline/client": "3.4.1",
-    "@byline/admin": "3.4.1",
-    "@byline/ui": "3.4.1",
-    "@byline/core": "3.4.1"
+    "@byline/client": "3.5.0",
+    "@byline/ui": "3.5.0",
+    "@byline/admin": "3.5.0",
+    "@byline/core": "3.5.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/field/extensions/admonition/admonition-commands.ts

@@ -0,0 +1,31 @@
+/**
+ * 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 { createCommand, 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 const OPEN_ADMONITION_MODAL_COMMAND: LexicalCommand<{ nodeKey: NodeKey } | null> =
+  createCommand('OPEN_ADMONITION_MODAL_COMMAND')
+
+/** Inserts a new admonition (type + title come from the modal). */
+export const INSERT_ADMONITION_COMMAND: LexicalCommand<AdmonitionAttributes> = createCommand(
+  'INSERT_ADMONITION_COMMAND'
+)

package/src/field/extensions/admonition/admonition-extension.tsx

@@ -13,43 +13,192 @@ import { useEffect } from 'react'
 
 import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
 import { ReactExtension } from '@lexical/react/ReactExtension'
-import { $insertNodeToNearestRoot, mergeRegister } from '@lexical/utils'
+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,
   configExtension,
-  createCommand,
   declarePeerDependency,
   defineExtension,
-  type LexicalCommand,
+  type ElementNode,
+  KEY_ARROW_DOWN_COMMAND,
+  KEY_ARROW_LEFT_COMMAND,
+  KEY_ARROW_RIGHT_COMMAND,
+  KEY_ARROW_UP_COMMAND,
+  type NodeKey,
 } from 'lexical'
 
 import { useToolbarActiveEditor } from '../../plugins/toolbar-plugin/toolbar-active-editor'
 import { DropDownItem } from '../../ui/dropdown'
+import {
+  type BylineFloatingUIConfig,
+  BylineFloatingUIExtension,
+  type BylineFloatingUIProps,
+} from '../byline-floating-ui/byline-floating-ui-extension'
 import {
   type BylineToolbarConfig,
   BylineToolbarExtension,
 } from '../byline-toolbar/byline-toolbar-extension'
+import { FloatingTextFormatExtension } from '../floating-text-format/floating-text-format-extension'
+import { FloatingTextFormatToolbarPlugin } from '../floating-text-format/index'
+import { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND } from './admonition-commands'
 import { AdmonitionModal } from './admonition-modal'
-import { $createAdmonitionNode, AdmonitionNode } from './admonition-node'
-import type { AdmonitionAttributes } from './node-types'
+import { $createAdmonitionNode, $isAdmonitionNode, AdmonitionNode } from './admonition-node'
+import type { AdmonitionAttributes, AdmonitionType } from './node-types'
 import type { AdmonitionData } from './types'
 
 export type InsertAdmonitionPayload = Readonly<AdmonitionAttributes>
 
-export const OPEN_ADMONITION_MODAL_COMMAND: LexicalCommand<null> = createCommand(
-  'OPEN_ADMONITION_MODAL_COMMAND'
-)
+// Re-exported for backwards compatibility — the commands now live in their
+// own leaf module so the node can dispatch the "open modal" command without
+// importing this extension.
+export { INSERT_ADMONITION_COMMAND, OPEN_ADMONITION_MODAL_COMMAND }
+
+// ---------------------------------------------------------------------------
+// Body restriction — structure-enforcing transform.
+//
+// The admonition body is deliberately limited to formatted text + links
+// (paragraphs only): no nested admonitions, no images / embeds, no headings /
+// lists / tables / code blocks. Insert-command guards prevent the common
+// entry points; this transform is the backstop for paste and markdown import.
+// ---------------------------------------------------------------------------
+
+/** True when the selection's anchor sits inside an admonition body. */
+function $selectionInsideAdmonition(): boolean {
+  const selection = $getSelection()
+  if (!$isRangeSelection(selection)) {
+    return false
+  }
+  return $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode) != null
+}
 
-export const INSERT_ADMONITION_COMMAND: LexicalCommand<AdmonitionAttributes> = createCommand(
-  'INSERT_ADMONITION_COMMAND'
-)
+/** Flatten a disallowed block child to a paragraph, preserving inline content. */
+function $flattenToParagraph(element: ElementNode): void {
+  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: AdmonitionNode): void {
+  // Never allow an admonition to nest inside another — unwrap this one,
+  // hoisting its children to sit before it in the outer admonition.
+  const parent = node.getParent()
+  const ancestorAdmonition =
+    parent != null ? $findMatchingParent(parent, (candidate) => $isAdmonitionNode(candidate)) : null
+  if (ancestorAdmonition != null) {
+    for (const child of node.getChildren()) {
+      node.insertBefore(child)
+    }
+    node.remove()
+    return
+  }
+
+  if (node.getChildrenSize() === 0) {
+    node.append($createParagraphNode())
+    return
+  }
+
+  for (const child of node.getChildren()) {
+    if ($isParagraphNode(child)) {
+      continue
+    }
+    // Inline / text / linebreak stragglers → wrap in a paragraph.
+    if ($isTextNode(child) || $isLineBreakNode(child) || child.isInline()) {
+      const paragraph = $createParagraphNode()
+      child.insertBefore(paragraph)
+      paragraph.append(child)
+      continue
+    }
+    // Decorators (images, embeds, horizontal rule) aren't allowed in the body.
+    if ($isDecoratorNode(child)) {
+      child.remove()
+      continue
+    }
+    // Other block elements (headings, lists, quotes, tables, code) collapse
+    // to a paragraph.
+    if ($isElementNode(child)) {
+      $flattenToParagraph(child)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Shadow-root escape — insert a paragraph above/below when the caret is at the
+// admonition's outer edge, so the block never traps the cursor. Mirrors the
+// Lexical Collapsible plugin.
+// ---------------------------------------------------------------------------
+
+function $onEscapeUp(): boolean {
+  const selection = $getSelection()
+  if ($isRangeSelection(selection) && selection.isCollapsed() && selection.anchor.offset === 0) {
+    const admonition = $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode)
+    if ($isAdmonitionNode(admonition)) {
+      const parent = admonition.getParent()
+      if (
+        parent != null &&
+        parent.getFirstChild() === admonition &&
+        selection.anchor.key === admonition.getFirstDescendant()?.getKey()
+      ) {
+        admonition.insertBefore($createParagraphNode())
+      }
+    }
+  }
+  return false
+}
+
+function $onEscapeDown(): boolean {
+  const selection = $getSelection()
+  if ($isRangeSelection(selection) && selection.isCollapsed()) {
+    const admonition = $findMatchingParent(selection.anchor.getNode(), $isAdmonitionNode)
+    if ($isAdmonitionNode(admonition)) {
+      const parent = admonition.getParent()
+      if (parent != null && parent.getLastChild() === admonition) {
+        const lastParagraph = admonition.getLastDescendant()
+        if (
+          lastParagraph != null &&
+          selection.anchor.key === lastParagraph.getKey() &&
+          selection.anchor.offset === lastParagraph.getTextContentSize()
+        ) {
+          admonition.insertAfter($createParagraphNode())
+        }
+      }
+    }
+  }
+  return false
+}
 
 export function AdmonitionPlugin(): React.JSX.Element {
   const [editor] = useLexicalComposerContext()
   const [open, setOpen] = React.useState(false)
+  // Null target = insert a new admonition; a key = edit that existing node.
+  const [editNodeKey, setEditNodeKey] = React.useState<NodeKey | null>(null)
+  const [modalData, setModalData] = React.useState<{
+    title: string
+    admonitionType?: AdmonitionType
+  }>({ title: '', admonitionType: undefined })
 
   useEffect(() => {
     if (!editor.hasNodes([AdmonitionNode])) {
@@ -57,10 +206,26 @@ export function AdmonitionPlugin(): React.JSX.Element {
     }
 
     return mergeRegister(
-      // TODO: possibly register this command with insert and edit options?
-      editor.registerCommand<null>(
+      editor.registerCommand<{ nodeKey: NodeKey } | null>(
         OPEN_ADMONITION_MODAL_COMMAND,
-        () => {
+        (payload) => {
+          if (payload == null) {
+            setEditNodeKey(null)
+            setModalData({ title: '', admonitionType: undefined })
+            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 (data == null) {
+            return false
+          }
+          setEditNodeKey(payload.nodeKey)
+          setModalData(data)
           setOpen(true)
           return true
         },
@@ -69,47 +234,85 @@ export function AdmonitionPlugin(): React.JSX.Element {
 
       editor.registerCommand<InsertAdmonitionPayload>(
         INSERT_ADMONITION_COMMAND,
-        (payload: AdmonitionAttributes) => {
-          // return true
+        (payload) => {
           const selection = $getSelection()
-
           if (!$isRangeSelection(selection)) {
             return false
           }
-
-          const focusNode = selection.focus.getNode()
-
-          if (focusNode !== null) {
-            const admonitionNode = $createAdmonitionNode(payload)
-            $insertNodeToNearestRoot(admonitionNode)
+          // No nesting — refuse (silently) when already inside an admonition.
+          if ($selectionInsideAdmonition()) {
+            return true
           }
+          const admonition = $createAdmonitionNode(payload)
+          admonition.append($createParagraphNode())
+          $insertNodeToNearestRoot(admonition)
+          admonition.selectStart()
           return true
         },
         COMMAND_PRIORITY_EDITOR
-      )
+      ),
+
+      // Structure / restriction backstop.
+      editor.registerNodeTransform(AdmonitionNode, $normalizeAdmonition),
+
+      // Shadow-root caret escape.
+      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 }: AdmonitionData): void => {
-    if (title != null && admonitionType != null) {
-      const admonitionPayload: AdmonitionAttributes = {
-        admonitionType,
-        title,
-      }
-
-      editor.dispatchCommand(INSERT_ADMONITION_COMMAND, admonitionPayload)
+  const handleSubmit = ({ admonitionType, title }: AdmonitionData): void => {
+    setOpen(false)
+    if (admonitionType == null) {
+      return
+    }
+    const key = editNodeKey
+    if (key != null) {
+      editor.update(() => {
+        const node = $getNodeByKey(key)
+        if ($isAdmonitionNode(node)) {
+          node.update({ admonitionType, title })
+        }
+      })
     } else {
-      console.error('Error: missing title or type for admonition.')
+      editor.dispatchCommand(INSERT_ADMONITION_COMMAND, { admonitionType, title })
     }
-    setOpen(false)
+    setEditNodeKey(null)
   }
 
   return (
     <AdmonitionModal
       open={open}
-      data={{ title: '', admonitionType: undefined }}
-      onClose={() => setOpen(false)}
-      onSubmit={handleInsertAdmonition}
+      data={modalData}
+      onClose={() => {
+        setOpen(false)
+        setEditNodeKey(null)
+      }}
+      onSubmit={handleSubmit}
+    />
+  )
+}
+
+/**
+ * Floating text-format toolbar scoped to admonition bodies. Only mounts when
+ * the global `FloatingTextFormatExtension` is *absent* — when it's present, it
+ * already covers admonition bodies (and everywhere else), so this would just
+ * double up. This is what gives the body its bold/italic/link popover on
+ * editors (e.g. the AI editor) that suppress the global one.
+ */
+function AdmonitionFloatingTextFormat({
+  anchorElem,
+}: BylineFloatingUIProps): React.JSX.Element | null {
+  const hasGlobalToolbar = useOptionalExtensionDependency(FloatingTextFormatExtension) !== undefined
+  if (hasGlobalToolbar) {
+    return null
+  }
+  return (
+    <FloatingTextFormatToolbarPlugin
+      anchorElem={anchorElem}
+      shouldShow={$selectionInsideAdmonition}
     />
   )
 }
@@ -144,5 +347,13 @@ export const AdmonitionExtension = defineExtension({
         },
       ],
     } satisfies Partial<BylineToolbarConfig>),
+    declarePeerDependency<typeof BylineFloatingUIExtension>(BylineFloatingUIExtension.name, {
+      items: [
+        {
+          id: '@byline/richtext-lexical/Admonition/floating-text-format',
+          Component: AdmonitionFloatingTextFormat,
+        },
+      ],
+    } satisfies Partial<BylineFloatingUIConfig>),
   ],
 })

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

@@ -0,0 +1,113 @@
+/**
+ * Admonition (callout) block — ElementNode chrome.
+ *
+ * The container is a real block in the main editor tree. The header
+ * (icon + title + Edit button) is non-editable chrome injected in
+ * `createDOM`; the body paragraphs render into `.AdmonitionNode__content`
+ * (the DOM slot returned by `getDOMSlot`).
+ */
+
+.LexicalEditor__admonition {
+  position: relative;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
+  padding: 8px 12px 4px;
+  border: solid 1px #666666;
+  border-left-width: 4px;
+  border-radius: 3px;
+}
+
+/* Per-type accent — colours the left border + header icon. */
+.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 {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-weight: bold;
+  font-size: 1rem;
+  text-transform: capitalize;
+  margin-bottom: 0.25rem;
+  user-select: none;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__icon {
+  display: inline-flex;
+  align-items: center;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__icon svg {
+  width: 20px;
+  height: 20px;
+  fill: currentColor;
+}
+
+.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: 1 1 auto;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__edit-button {
+  flex: 0 0 auto;
+  font-size: 0.8rem;
+  padding: 2px 8px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 5px;
+  background-color: rgba(0, 0, 0, 0.04);
+  color: inherit;
+  cursor: pointer;
+  user-select: none;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__edit-button:hover {
+  background-color: rgba(60, 132, 244, 0.18);
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content {
+  font-size: 0.925em;
+  color: #4b5563;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content > * {
+  margin-bottom: 0.25em;
+}
+
+.LexicalEditor__admonition .AdmonitionNode__content > *:last-child {
+  margin-bottom: 0;
+}
+
+.dark .LexicalEditor__admonition {
+  border-color: #444444;
+}
+
+.dark .LexicalEditor__admonition .AdmonitionNode__content {
+  color: #9ca3af;
+}
+
+.dark .LexicalEditor__admonition .AdmonitionNode__edit-button {
+  border-color: rgba(255, 255, 255, 0.2);
+  background-color: rgba(255, 255, 255, 0.08);
+}