@byline/richtext-lexical 3.4.0 → 3.5.0

package/src/field/markdown/transformers.ts

@@ -24,6 +24,7 @@ import {
   $convertFromMarkdownString,
   $convertToMarkdownString,
   type ElementTransformer,
+  LINK,
   type MultilineElementTransformer,
   TEXT_FORMAT_TRANSFORMERS,
   TRANSFORMERS,
@@ -41,7 +42,7 @@ import {
   TableNode,
   TableRowNode,
 } from '@lexical/table'
-import { $isParagraphNode, $isTextNode } from 'lexical'
+import { $createParagraphNode, $isParagraphNode, $isTextNode } from 'lexical'
 
 import {
   $createAdmonitionNode,
@@ -202,20 +203,32 @@ const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
 // ---------------------------------------------------------------------------
 // Admonitions  →  Docusaurus directive syntax:  :::type[Title] … :::
 //
-// AdmonitionNode is a DecoratorNode whose body is a *nested* LexicalEditor
-// (a bare `createEditor()` — paragraph/text/linebreak only). So the body is
-// converted with an inline-only transformer set that matches what the nested
-// editor can hold; block constructs in the body are intentionally not
-// round-tripped because the node can't represent them anyway.
+// Markdown format hat-tip: this mirrors Docusaurus admonitions —
+// https://docusaurus.io/docs/markdown-features/admonitions — which in turn
+// follow the remark-directive "generic directives" proposal
+// (https://github.com/remarkjs/remark-directive). We support the four
+// Docusaurus types (note / tip / warning / danger) and the optional
+// `[Title]` on the opening fence.
+//
+// AdmonitionNode is an ElementNode whose body lives as real children in the
+// main editor tree, so the body round-trips through the *same* markdown
+// engine — no second editor, no second transformer registry. The body is
+// deliberately restricted to formatted text + links (paragraphs only): the
+// `ADMONITION_BODY_TRANSFORMERS` set never imports block constructs, and the
+// extension's structure transform strips anything richer that slips in via
+// paste. Type/title ride the opening fence, not the body.
 // ---------------------------------------------------------------------------
 
 const ADMONITION_TYPES: ReadonlySet<string> = new Set(['note', 'tip', 'warning', 'danger'])
 const ADMONITION_START_REG_EXP = /^:::(note|tip|warning|danger)(?:\[([^\]]*)\])?\s*$/
 const ADMONITION_END_REG_EXP = /^:::\s*$/
 
-// Inline-only — the nested admonition editor has no block nodes beyond the
-// default paragraph, so importing headings/lists/tables into it would fail.
-const ADMONITION_BODY_TRANSFORMERS: Array<Transformer> = [...TEXT_FORMAT_TRANSFORMERS]
+// Body restriction: inline text formatting + links. Paragraph splitting on
+// blank lines is inherent to the markdown importer/exporter, so multi-
+// paragraph bodies round-trip without any element transformer. Excluding the
+// block transformers here is what keeps headings / lists / tables / nested
+// admonitions out of an admonition body at parse time.
+const ADMONITION_BODY_TRANSFORMERS: Array<Transformer> = [...TEXT_FORMAT_TRANSFORMERS, LINK]
 
 export const ADMONITION: MultilineElementTransformer = {
   dependencies: [AdmonitionNode],
@@ -226,18 +239,21 @@ export const ADMONITION: MultilineElementTransformer = {
     const type = node.getAdmonitionType()
     const title = node.getTitle()
 
-    // Convert the nested editor's content to markdown in its own read context.
-    let body = ''
-    node.__content.read(() => {
-      body = $convertToMarkdownString(ADMONITION_BODY_TRANSFORMERS).trim()
-    })
+    // The body is real children of `node` — export its subtree directly with
+    // the same engine.
+    const body = $convertToMarkdownString(ADMONITION_BODY_TRANSFORMERS, node).trim()
 
     const heading = title ? `:::${type}[${title}]` : `:::${type}`
     return body ? `${heading}\n${body}\n:::` : `${heading}\n:::`
   },
   regExpStart: ADMONITION_START_REG_EXP,
-  regExpEnd: ADMONITION_END_REG_EXP,
-  replace: (rootNode, children, startMatch, _endMatch, linesInBetween) => {
+  // `optional` is required for the as-you-type shortcut path to run this
+  // transformer at all: runMultilineElementTransformers skips any multiline
+  // transformer whose regExpEnd is non-optional (the closing ::: hasn't been
+  // typed yet when the start line fires). The toggle/import path still honours
+  // the explicit ::: end when present, falling back to EOF only if it's absent.
+  regExpEnd: { optional: true, regExp: ADMONITION_END_REG_EXP },
+  replace: (rootNode, children, startMatch, _endMatch, linesInBetween, isImport) => {
     const rawType = startMatch[1]
     if (!ADMONITION_TYPES.has(rawType)) {
       return false
@@ -247,21 +263,31 @@ export const ADMONITION: MultilineElementTransformer = {
 
     const node = $createAdmonitionNode({ admonitionType, title })
 
-    // Import path: body arrives as the lines between the fences. Populate the
-    // nested editor synchronously so it's flushed before render/serialize.
-    if (!children && linesInBetween != null) {
+    if (children != null) {
+      // As-you-type shortcut path: the lines between the fences arrive as
+      // already-parsed nodes — move them into the body. The structure
+      // transform normalises anything outside the allowed subset.
+      node.append(...children)
+    } else if (linesInBetween != null) {
+      // Import / toggle path: body arrives as raw text between the fences.
       const body = linesInBetween.join('\n').trim()
       if (body) {
-        node.__content.update(
-          () => {
-            $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS)
-          },
-          { discrete: true }
-        )
+        $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS, node)
       }
     }
 
+    // Never leave the shadow root empty (no place for the caret to land).
+    if (node.getChildrenSize() === 0) {
+      node.append($createParagraphNode())
+    }
+
     rootNode.append(node)
+
+    // Drop the caret into the body on the live shortcut path; the bulk import
+    // path manages selection itself.
+    if (!isImport) {
+      node.selectStart()
+    }
   },
   type: 'multiline-element',
 }

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

@@ -1,119 +0,0 @@
-.LexicalEditor__admonition .Admonition__container {
-  border: 1px solid #666;
-  border-radius: 2px;
-  margin-top: .5rem;
-  margin-bottom: 1.5rem;
-  padding: 8px;
-  position: relative;
-}
-
-.LexicalEditor__admonition .Admonition__container.focused {
-  outline: 2px solid #3c84f4;
-}
-
-.LexicalEditor__admonition .Admonition__container .admonition-edit-button {
-  z-index: 1;
-  color: #fff;
-  cursor: pointer;
-  -webkit-user-select: none;
-  user-select: none;
-  background-color: #00000080;
-  border: 1px solid #ffffff4d;
-  border-radius: 5px;
-  min-width: 60px;
-  margin: 0 auto;
-  padding: 3px 4px;
-  font-size: .9rem;
-  display: block;
-  position: absolute;
-  top: 8px;
-  right: 12px;
-}
-
-.LexicalEditor__admonition .Admonition__container .admonition-edit-button:hover {
-  background-color: #3c84f480;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__header {
-  align-items: center;
-  margin-bottom: .75rem;
-  font-size: 1.5rem;
-  font-weight: bold;
-  display: flex;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__content {
-  position: relative;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  color: #000;
-  background-color: #f4f4f4;
-  min-width: 100%;
-  display: block;
-  position: relative;
-  overflow: hidden;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable .tree-view-output {
-  border-radius: 0;
-  margin: 0;
-}
-
-.LexicalEditor__admonition .admonition-content-button:hover {
-  background-color: #3c84f480;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  resize: none;
-  cursor: text;
-  caret-color: #050505;
-  -moz-tab-size: 1;
-  tab-size: 1;
-  -webkit-user-select: text;
-  user-select: text;
-  white-space: pre-wrap;
-  word-break: break-word;
-  border: 0;
-  outline: 0;
-  min-height: 20px;
-  padding: 10px;
-  font-size: 16px;
-  line-height: 1.4em;
-  display: block;
-  position: relative;
-}
-
-.AdmonitionNode__contentEditable p {
-  margin-bottom: .25em;
-}
-
-.Admonition__placeholder {
-  color: #888;
-  text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
-  right: unset;
-  -webkit-user-select: none;
-  user-select: none;
-  white-space: nowrap;
-  pointer-events: none;
-  font-size: 12px;
-  display: inline-block;
-  position: absolute;
-  overflow: hidden;
-}
-
-.dark .AdmonitionNode__contentEditable {
-  color: #eee;
-  caret-color: auto;
-}
-
-.dark .LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  background-color: #222;
-}
-
-.dark .AdmonitionNode__placeholder {
-  color: #888;
-}
-

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

@@ -1,17 +0,0 @@
-/**
- * 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
- */
-import type * as React from 'react';
-import type { LexicalEditor, NodeKey } from 'lexical';
-import type { AdmonitionType } from './node-types';
-import './admonition-node-component.css';
-export default function AdmonitionNodeComponent({ admonitionType, title, content, nodeKey, }: {
-    admonitionType: AdmonitionType;
-    title: string;
-    content: LexicalEditor;
-    nodeKey: NodeKey;
-}): React.JSX.Element;

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

@@ -1,196 +0,0 @@
-"use client";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Suspense, useCallback, useEffect, useRef, useState } from "react";
-import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
-import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
-import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
-import { LexicalNestedComposer } from "@lexical/react/LexicalNestedComposer";
-import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
-import { useLexicalNodeSelection } from "@lexical/react/useLexicalNodeSelection";
-import { mergeRegister } from "@lexical/utils";
-import classnames from "classnames";
-import { $getNodeByKey, $getSelection, $isNodeSelection, $setSelection, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND, KEY_ENTER_COMMAND, KEY_ESCAPE_COMMAND, SELECTION_CHANGE_COMMAND } from "lexical";
-import { useEditorConfig } from "../../config/editor-config-context.js";
-import { ContentEditable } from "../../content-editable.js";
-import { useSharedHistoryContext } from "../../context/shared-history-context.js";
-import { useSharedOnChange } from "../../context/shared-on-change-context.js";
-import { Placeholder } from "../../ui/placeholder.js";
-import { FloatingTextFormatToolbarPlugin } from "../floating-text-format/index.js";
-import { FloatingLinkEditorPlugin } from "../link/floating-link-editor.js";
-import { LinkPlugin } from "../link/link-extension.js";
-import { AdmonitionModal } from "./admonition-modal.js";
-import { $isAdmonitionNode } from "./admonition-node.js";
-import { DangerIcon, NoteIcon, TipIcon, WarningIcon } from "./icons/index.js";
-import "./admonition-node-component.css";
-const icons = {
-    note: NoteIcon,
-    tip: TipIcon,
-    warning: WarningIcon,
-    danger: DangerIcon
-};
-function AdmonitionNodeComponent({ admonitionType, title, content, nodeKey }) {
-    const [open, setOpen] = useState(false);
-    const [editor] = useLexicalComposerContext();
-    const buttonRef = useRef(null);
-    const { historyState } = useSharedHistoryContext();
-    const [isSelected, setSelected, _clearSelection] = useLexicalNodeSelection(nodeKey);
-    const [selection, setSelection] = useState(null);
-    const { uuid } = useEditorConfig();
-    const { onChange } = useSharedOnChange();
-    const editorState = editor.getEditorState();
-    const activeEditorRef = useRef(null);
-    const node = editorState.read(()=>$getNodeByKey(nodeKey));
-    const onDelete = useCallback((payload)=>{
-        if (isSelected && $isNodeSelection($getSelection())) {
-            const event = payload;
-            event.preventDefault();
-            const node = $getNodeByKey(nodeKey);
-            if ($isAdmonitionNode(node)) node?.remove();
-            setSelected(false);
-        }
-        return false;
-    }, [
-        isSelected,
-        nodeKey,
-        setSelected
-    ]);
-    const onEnter = useCallback((event)=>{
-        const latestSelection = $getSelection();
-        if (isSelected && $isNodeSelection(latestSelection) && 1 === latestSelection.getNodes().length) {
-            $setSelection(null);
-            event.preventDefault();
-            content.focus();
-            return true;
-        }
-        return false;
-    }, [
-        content,
-        isSelected
-    ]);
-    const onEscape = useCallback((event)=>{
-        if (activeEditorRef.current === content || buttonRef.current === event.target) {
-            $setSelection(null);
-            editor.update(()=>{
-                setSelected(true);
-                const parentRootElement = editor.getRootElement();
-                if (null !== parentRootElement) parentRootElement.focus();
-            });
-            return true;
-        }
-        return false;
-    }, [
-        content,
-        editor,
-        setSelected
-    ]);
-    useEffect(()=>{
-        let isMounted = true;
-        const unregister = mergeRegister(editor.registerUpdateListener(({ editorState })=>{
-            if (isMounted) setSelection(editorState.read(()=>$getSelection()));
-        }), editor.registerCommand(SELECTION_CHANGE_COMMAND, (_, activeEditor)=>{
-            activeEditorRef.current = activeEditor;
-            return false;
-        }, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_DELETE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, onDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ENTER_COMMAND, onEnter, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_ESCAPE_COMMAND, onEscape, COMMAND_PRIORITY_LOW));
-        return ()=>{
-            isMounted = false;
-            unregister();
-        };
-    }, [
-        editor,
-        onDelete,
-        onEnter,
-        onEscape
-    ]);
-    const draggable = isSelected && $isNodeSelection(selection);
-    const isFocused = isSelected;
-    const handleToggleModal = ()=>{
-        if (null != uuid) setOpen(!open);
-    };
-    const handleUpdateAdmonition = ({ admonitionType, title })=>{
-        setOpen(false);
-        if (null != title && null != admonitionType) {
-            const admonitionPayload = {
-                admonitionType,
-                title
-            };
-            editor.update(()=>{
-                node.update(admonitionPayload);
-            });
-        } else console.error('Error: unable to find image source from document.');
-    };
-    const classNames = classnames('Admonition__container', {
-        focused: isFocused
-    }, {
-        draggable: $isNodeSelection(selection)
-    });
-    const Icon = icons[admonitionType];
-    return /*#__PURE__*/ jsxs(Suspense, {
-        fallback: null,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                draggable: draggable,
-                className: classNames,
-                children: [
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: "admonition-edit-button",
-                        ref: buttonRef,
-                        onClick: handleToggleModal,
-                        children: "Edit"
-                    }),
-                    /*#__PURE__*/ jsxs("div", {
-                        className: "AdmonitionNode__header",
-                        children: [
-                            /*#__PURE__*/ jsx(Icon, {}),
-                            /*#__PURE__*/ jsx("div", {
-                                children: title
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "AdmonitionNode__content",
-                        children: /*#__PURE__*/ jsxs(LexicalNestedComposer, {
-                            initialEditor: content,
-                            children: [
-                                /*#__PURE__*/ jsx(OnChangePlugin, {
-                                    ignoreSelectionChange: true,
-                                    onChange: (_nestedEditorState, _nestedEditor, nestedTags)=>{
-                                        const editorState = editor.getEditorState();
-                                        if (null != onChange) onChange(editorState, editor, nestedTags);
-                                    }
-                                }),
-                                /*#__PURE__*/ jsx(LinkPlugin, {}),
-                                /*#__PURE__*/ jsx(FloatingLinkEditorPlugin, {}),
-                                /*#__PURE__*/ jsx(FloatingTextFormatToolbarPlugin, {}),
-                                /*#__PURE__*/ jsx(HistoryPlugin, {
-                                    externalHistoryState: historyState
-                                }),
-                                /*#__PURE__*/ jsx(RichTextPlugin, {
-                                    contentEditable: /*#__PURE__*/ jsx(ContentEditable, {
-                                        className: "AdmonitionNode__contentEditable"
-                                    }),
-                                    placeholder: /*#__PURE__*/ jsx(Placeholder, {
-                                        className: "Admonition__placeholder",
-                                        children: "Enter some text..."
-                                    }),
-                                    ErrorBoundary: LexicalErrorBoundary
-                                })
-                            ]
-                        })
-                    })
-                ]
-            }),
-            null != uuid && uuid.length > 0 && /*#__PURE__*/ jsx(AdmonitionModal, {
-                open: open,
-                onClose: handleToggleModal,
-                onSubmit: handleUpdateAdmonition,
-                data: {
-                    title,
-                    admonitionType
-                }
-            })
-        ]
-    });
-}
-export default AdmonitionNodeComponent;

package/dist/field/extensions/admonition/icons/danger-icon.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-import './danger-icon.css';
-interface Props {
-    className?: string;
-}
-export declare function DangerIcon({ className, ...rest }: Props): React.JSX.Element;
-export {};

package/dist/field/extensions/admonition/icons/index.d.ts

@@ -1,4 +0,0 @@
-export * from './danger-icon';
-export * from './note-icon';
-export * from './tip-icon';
-export * from './warning-icon';

package/dist/field/extensions/admonition/icons/note-icon.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-import './note-icon.css';
-interface Props {
-    className?: string;
-}
-export declare function NoteIcon({ className, ...rest }: Props): React.JSX.Element;
-export {};

package/dist/field/extensions/admonition/icons/tip-icon.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-import './tip-icon.css';
-interface Props {
-    className?: string;
-}
-export declare function TipIcon({ className, ...rest }: Props): React.JSX.Element;
-export {};

package/dist/field/extensions/admonition/icons/warning-icon.d.ts

@@ -1,7 +0,0 @@
-import type React from 'react';
-import './warning-icon.css';
-interface Props {
-    className?: string;
-}
-export declare function WarningIcon({ className, ...rest }: Props): React.JSX.Element;
-export {};

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

@@ -1,115 +0,0 @@
-.LexicalEditor__admonition .Admonition__container {
-  position: relative;
-  margin-top: 0.5rem;
-  margin-bottom: 1.5rem;
-  padding: 8px;
-  border: solid 1px #666666;
-  border-radius: 2px;
-}
-
-.LexicalEditor__admonition .Admonition__container.focused {
-  outline: 2px solid rgb(60, 132, 244);
-  /* user-select: none; */
-}
-
-.LexicalEditor__admonition .Admonition__container .admonition-edit-button {
-  display: block;
-  position: absolute;
-  z-index: 1;
-  font-size: 0.9rem;
-  top: 8px;
-  right: 12px;
-  padding: 3px 4px;
-  margin: 0 auto;
-  border: 1px solid rgba(255, 255, 255, 0.3);
-  border-radius: 5px;
-  background-color: rgba(0, 0, 0, 0.5);
-  min-width: 60px;
-  color: #fff;
-  cursor: pointer;
-  user-select: none;
-}
-
-.LexicalEditor__admonition .Admonition__container .admonition-edit-button:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-
-.LexicalEditor__admonition .AdmonitionNode__header {
-  display: flex;
-  align-items: center;
-  font-weight: bold;
-  font-size: 1.5rem;
-  margin-bottom: 0.75rem;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__content {
-  position: relative;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  display: block;
-  position: relative;
-  background-color: #f4f4f4;
-  min-width: 100%;
-  color: #000;
-  overflow: hidden;
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable .tree-view-output {
-  margin: 0;
-  border-radius: 0;
-}
-
-.LexicalEditor__admonition .admonition-content-button:hover {
-  background-color: rgba(60, 132, 244, 0.5);
-}
-
-.LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  min-height: 20px;
-  border: 0px;
-  resize: none;
-  cursor: text;
-  caret-color: rgb(5, 5, 5);
-  display: block;
-  position: relative;
-  tab-size: 1;
-  outline: 0px;
-  padding: 10px;
-  user-select: text;
-  font-size: 16px;
-  line-height: 1.4em;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.AdmonitionNode__contentEditable p {
-  margin-bottom: 0.25em;
-}
-
-.Admonition__placeholder {
-  font-size: 12px;
-  color: #888;
-  overflow: hidden;
-  position: absolute;
-  text-overflow: ellipsis;
-  top: 10px;
-  left: 10px;
-  right: unset;
-  user-select: none;
-  white-space: nowrap;
-  display: inline-block;
-  pointer-events: none;
-}
-
-.dark .AdmonitionNode__contentEditable {
-  color: #eeeeee;
-  caret-color: auto;
-}
-
-.dark .LexicalEditor__admonition .AdmonitionNode__contentEditable {
-  background-color: #222222;
-}
-
-.dark .AdmonitionNode__placeholder {
-  color: #888;
-}