@byline/richtext-lexical 3.3.0 → 3.4.0

package/dist/field/config/default.js

@@ -9,6 +9,7 @@ const DEFAULT_EDITOR_SETTINGS = {
         showTreeView: false,
         textAlignment: true,
         markdownShortcutPlugin: false,
+        markdownToggle: false,
         undoRedo: true,
         textStyle: true,
         inlineCode: true,

package/dist/field/config/types.d.ts

@@ -7,7 +7,7 @@ import type { ExtensionsList } from './extensions-list';
  * {@link EditorConfig.extensions} and is manipulated via the chainable
  * `lexicalEditor((c) => c.extensions.add(...).remove(...))` API.
  */
-export type OptionName = 'richText' | 'showTreeView' | 'textAlignment' | 'markdownShortcutPlugin' | 'undoRedo' | 'textStyle' | 'inlineCode' | 'debug';
+export type OptionName = 'richText' | 'showTreeView' | 'textAlignment' | 'markdownShortcutPlugin' | 'markdownToggle' | 'undoRedo' | 'textStyle' | 'inlineCode' | 'debug';
 export interface EditorSettings {
     options: Record<OptionName, boolean>;
     /**

package/dist/field/context/markdown-mode-context.d.ts

@@ -0,0 +1,32 @@
+/**
+ * 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';
+interface MarkdownModeContextValue {
+    /** React state — drives toolbar button active styling and re-render. */
+    isMarkdown: boolean;
+    setIsMarkdown: (value: boolean) => void;
+    /**
+     * Synchronous mirror of {@link isMarkdown} for non-React readers — the
+     * editor's `OnChangePlugin` guard consults this to decide whether to
+     * suppress form persistence. React state updates are async, so the
+     * toggle handler writes the ref eagerly (before mutating the editor) to
+     * guarantee the markdown-source snapshot is never emitted to the form.
+     */
+    markdownModeRef: React.MutableRefObject<boolean>;
+}
+/**
+ * Holds the per-editor "view as markdown source" mode. Sits OUTSIDE the
+ * Lexical composer (alongside the shared on-change / history contexts) so
+ * both the in-composer editor surface and the toolbar button read the same
+ * mode — and so node decorators rendered as composer siblings can see it.
+ */
+export declare function MarkdownModeProvider({ children, }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export declare function useMarkdownMode(): MarkdownModeContextValue;
+export {};

package/dist/field/context/markdown-mode-context.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useRef, useState } from "react";
+const MarkdownModeContext = /*#__PURE__*/ createContext(null);
+function MarkdownModeProvider({ children }) {
+    const [isMarkdown, setIsMarkdown] = useState(false);
+    const markdownModeRef = useRef(false);
+    const value = useMemo(()=>({
+            isMarkdown,
+            setIsMarkdown,
+            markdownModeRef
+        }), [
+        isMarkdown
+    ]);
+    return /*#__PURE__*/ jsx(MarkdownModeContext.Provider, {
+        value: value,
+        children: children
+    });
+}
+function useMarkdownMode() {
+    const ctx = useContext(MarkdownModeContext);
+    if (null == ctx) throw new Error('useMarkdownMode must be used within a MarkdownModeProvider');
+    return ctx;
+}
+export { MarkdownModeProvider, useMarkdownMode };

package/dist/field/editor-component.css

@@ -1,6 +1,7 @@
 .lexicalRichTextEditor {
   isolation: isolate;
   width: 100%;
+  min-width: 0;
   display: flex;
 }
 
@@ -15,6 +16,7 @@
 
 .lexicalRichTextEditor__wrap {
   width: 100%;
+  min-width: 0;
   position: relative;
 }
 

package/dist/field/editor-context.js

@@ -5,6 +5,7 @@ import { LexicalExtensionComposer } from "@lexical/react/LexicalExtensionCompose
 import { defineExtension } from "lexical";
 import { defaultExtensionsList } from "./config/default-extensions.js";
 import { EditorConfigContext } from "./config/editor-config-context.js";
+import { MarkdownModeProvider } from "./context/markdown-mode-context.js";
 import { SharedHistoryContext } from "./context/shared-history-context.js";
 import { SharedOnChangeContext } from "./context/shared-on-change-context.js";
 import { Editor } from "./editor.js";
@@ -38,22 +39,24 @@ function EditorContext(props) {
         children: /*#__PURE__*/ jsx(SharedOnChangeContext, {
             onChange: onChange,
             children: /*#__PURE__*/ jsx(SharedHistoryContext, {
-                children: /*#__PURE__*/ jsx(LexicalExtensionComposer, {
-                    extension: rootExtension,
-                    contentEditable: null,
-                    children: /*#__PURE__*/ jsxs("div", {
-                        className: "editor-shell",
-                        children: [
-                            beforeEditor,
-                            /*#__PURE__*/ jsx(Editor, {
-                                minHeight: props.minHeight,
-                                maxHeight: props.maxHeight
-                            }),
-                            afterEditor,
-                            children
-                        ]
-                    })
-                }, composerKey + editable)
+                children: /*#__PURE__*/ jsx(MarkdownModeProvider, {
+                    children: /*#__PURE__*/ jsx(LexicalExtensionComposer, {
+                        extension: rootExtension,
+                        contentEditable: null,
+                        children: /*#__PURE__*/ jsxs("div", {
+                            className: "editor-shell",
+                            children: [
+                                beforeEditor,
+                                /*#__PURE__*/ jsx(Editor, {
+                                    minHeight: props.minHeight,
+                                    maxHeight: props.maxHeight
+                                }),
+                                afterEditor,
+                                children
+                            ]
+                        })
+                    }, composerKey + editable)
+                })
             })
         })
     });

package/dist/field/editor.css

@@ -38,6 +38,7 @@
   resize: vertical;
   z-index: -1;
   flex: auto;
+  min-width: 0;
   max-width: 100%;
   position: relative;
 }
@@ -1223,6 +1224,24 @@ button.toolbar-item.active i {
   opacity: 1;
 }
 
+button.toolbar-item .markdown-toggle-label {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  text-align: center;
+  color: #777;
+  width: 18px;
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 18px;
+}
+
+button.toolbar-item.active .markdown-toggle-label {
+  color: #1a1a1a;
+}
+
+button.toolbar-item:disabled .markdown-toggle-label {
+  color: #bbb;
+}
+
 .toolbar-item.font-family .text {
   max-width: 40px;
   display: block;

package/dist/field/editor.js

@@ -1,7 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { memo, useCallback, useEffect, useMemo, useState } from "react";
-import { TRANSFORMERS } from "@lexical/markdown";
 import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
 import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
 import { MarkdownShortcutPlugin } from "@lexical/react/LexicalMarkdownShortcutPlugin";
@@ -11,11 +10,13 @@ import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
 import { useExtensionDependency, useOptionalExtensionDependency } from "@lexical/react/useExtensionComponent";
 import { useEditorConfig } from "./config/editor-config-context.js";
 import { ContentEditable } from "./content-editable.js";
+import { useMarkdownMode } from "./context/markdown-mode-context.js";
 import { useSharedHistoryContext } from "./context/shared-history-context.js";
 import { useSharedOnChange } from "./context/shared-on-change-context.js";
 import { Debug } from "./debug.js";
 import { BylineFloatingUIExtension, selectFloatingUIItems } from "./extensions/byline-floating-ui/byline-floating-ui-extension.js";
 import { TableExtension } from "./extensions/table/table-extension.js";
+import { BYLINE_TRANSFORMERS } from "./markdown/transformers.js";
 import { TablePlugin } from "./plugins/table-plugin/index.js";
 import { ToolbarPlugin } from "./plugins/toolbar-plugin/index.js";
 import { TreeViewPlugin } from "./plugins/treeview-plugin/index.js";
@@ -31,6 +32,7 @@ const editor_Editor = /*#__PURE__*/ memo(function({ minHeight, maxHeight }) {
         }))[0];
     const { onChange } = useSharedOnChange();
     const { historyState } = useSharedHistoryContext();
+    const { markdownModeRef } = useMarkdownMode();
     const { config: { options: { debug, richText, showTreeView, markdownShortcutPlugin }, placeholderText } } = useEditorConfig();
     const hasTableExtension = void 0 !== useOptionalExtensionDependency(TableExtension);
     const floatingUIItems = selectFloatingUIItems(useExtensionDependency(BylineFloatingUIExtension).config.items);
@@ -91,6 +93,7 @@ const editor_Editor = /*#__PURE__*/ memo(function({ minHeight, maxHeight }) {
                         ignoreSelectionChange: true,
                         onChange: (editorState, editor, tags)=>{
                             if (tags.has(APPLY_VALUE_TAG)) return;
+                            if (markdownModeRef.current) return;
                             if (!tags.has('focus') || tags.size > 1) {
                                 if (null != onChange) onChange(editorState, editor, tags);
                             }
@@ -109,7 +112,7 @@ const editor_Editor = /*#__PURE__*/ memo(function({ minHeight, maxHeight }) {
                                 externalHistoryState: historyState
                             }),
                             markdownShortcutPlugin && /*#__PURE__*/ jsx(MarkdownShortcutPlugin, {
-                                transformers: TRANSFORMERS
+                                transformers: BYLINE_TRANSFORMERS
                             }),
                             null != floatingAnchorElem && !isSmallWidthViewport && floatingUIItems.map(({ id, Component })=>/*#__PURE__*/ jsx(Component, {
                                     anchorElem: floatingAnchorElem

package/dist/field/hooks/use-markdown-toggle.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Document-level "view as markdown source" toggle for a single editor.
+ *
+ * The editor is bound to a Byline form field that accumulates
+ * `DocumentPatch[]`, so this hook is deliberate about persistence:
+ *
+ *  - While in markdown mode the surface is a single `CodeNode` of raw
+ *    markdown text. `markdownModeRef` suppresses the editor's
+ *    `OnChangePlugin` so none of those keystrokes reach the form.
+ *  - A pure round-trip (WYSIWYG → markdown → WYSIWYG with no edits)
+ *    restores the *exact* captured `EditorState` — identical serialized
+ *    state, so the form sees no change and records **no patch**.
+ *  - Edits made in markdown produce a single conversion back to rich
+ *    nodes on exit, emitting one field value change → **one patch**.
+ */
+export declare function useMarkdownToggle(): {
+    isMarkdown: boolean;
+    toggleMarkdown: () => void;
+};

package/dist/field/hooks/use-markdown-toggle.js

@@ -0,0 +1,102 @@
+"use client";
+import { useCallback, useEffect, useRef } from "react";
+import { $createCodeNode, $isCodeNode } from "@lexical/code";
+import { $convertFromMarkdownString, $convertToMarkdownString } from "@lexical/markdown";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $getRoot, RootNode } from "lexical";
+import { APPLY_VALUE_TAG } from "../constants.js";
+import { useMarkdownMode } from "../context/markdown-mode-context.js";
+import { BYLINE_TRANSFORMERS } from "../markdown/transformers.js";
+const MARKDOWN_LANGUAGE = 'markdown';
+function normalize(markdown) {
+    return markdown.replace(/\n+$/, '');
+}
+function useMarkdownToggle() {
+    const [editor] = useLexicalComposerContext();
+    const { isMarkdown, setIsMarkdown, markdownModeRef } = useMarkdownMode();
+    const originalEditorStateRef = useRef(null);
+    const originalMarkdownRef = useRef('');
+    const unregisterTransformRef = useRef(null);
+    const registerRootGuard = useCallback(()=>{
+        unregisterTransformRef.current?.();
+        unregisterTransformRef.current = editor.registerNodeTransform(RootNode, (rootNode)=>{
+            let codeNode = rootNode.getChildren().find($isCodeNode);
+            if (null == codeNode) codeNode = $createCodeNode(MARKDOWN_LANGUAGE);
+            if (1 !== rootNode.getChildrenSize() || null == codeNode.getParent()) {
+                rootNode.splice(0, rootNode.getChildrenSize(), [
+                    codeNode
+                ]);
+                codeNode.selectEnd();
+            }
+            if (codeNode.getLanguage() !== MARKDOWN_LANGUAGE) codeNode.setLanguage(MARKDOWN_LANGUAGE);
+        });
+    }, [
+        editor
+    ]);
+    const clearRootGuard = useCallback(()=>{
+        unregisterTransformRef.current?.();
+        unregisterTransformRef.current = null;
+    }, []);
+    const enterMarkdown = useCallback(()=>{
+        originalEditorStateRef.current = editor.getEditorState();
+        markdownModeRef.current = true;
+        editor.update(()=>{
+            const markdown = $convertToMarkdownString(BYLINE_TRANSFORMERS, void 0, true);
+            originalMarkdownRef.current = markdown;
+            const codeNode = $createCodeNode(MARKDOWN_LANGUAGE);
+            $getRoot().clear().append(codeNode);
+            codeNode.select().insertRawText(markdown);
+        });
+        registerRootGuard();
+        setIsMarkdown(true);
+    }, [
+        editor,
+        markdownModeRef,
+        registerRootGuard,
+        setIsMarkdown
+    ]);
+    const exitMarkdown = useCallback(()=>{
+        clearRootGuard();
+        let currentMarkdown = '';
+        editor.read(()=>{
+            const first = $getRoot().getFirstChild();
+            currentMarkdown = $isCodeNode(first) ? first.getTextContent() : $getRoot().getTextContent();
+        });
+        const edited = normalize(currentMarkdown) !== normalize(originalMarkdownRef.current);
+        if (edited || null == originalEditorStateRef.current) {
+            markdownModeRef.current = false;
+            editor.update(()=>{
+                $convertFromMarkdownString(currentMarkdown, BYLINE_TRANSFORMERS, void 0, true);
+            });
+        } else {
+            editor.setEditorState(originalEditorStateRef.current, {
+                tag: APPLY_VALUE_TAG
+            });
+            markdownModeRef.current = false;
+        }
+        originalEditorStateRef.current = null;
+        originalMarkdownRef.current = '';
+        setIsMarkdown(false);
+    }, [
+        editor,
+        clearRootGuard,
+        markdownModeRef,
+        setIsMarkdown
+    ]);
+    const toggleMarkdown = useCallback(()=>{
+        if (markdownModeRef.current) exitMarkdown();
+        else enterMarkdown();
+    }, [
+        markdownModeRef,
+        enterMarkdown,
+        exitMarkdown
+    ]);
+    useEffect(()=>()=>clearRootGuard(), [
+        clearRootGuard
+    ]);
+    return {
+        isMarkdown,
+        toggleMarkdown
+    };
+}
+export { useMarkdownToggle };

package/dist/field/markdown/transformers.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+/**
+ * Byline markdown transformers.
+ *
+ * Extends the stock `@lexical/markdown` `TRANSFORMERS` with handlers for
+ * Byline's custom nodes, so the document-level markdown toggle (and the
+ * inline markdown-shortcut plugin) round-trip them instead of dropping
+ * them. The `TABLE` transformer is adapted from the Lexical playground's
+ * `MarkdownTransformers` (GFM pipe tables).
+ *
+ * Used in the browser editor only (the toggle + shortcuts). Server-side
+ * markdown export walks the serialized JSON via its own serializer and
+ * does not use this module.
+ */
+import { type ElementTransformer, type MultilineElementTransformer, type Transformer } from '@lexical/markdown';
+export declare const TABLE: ElementTransformer;
+export declare const ADMONITION: MultilineElementTransformer;
+/**
+ * Stock transformers plus Byline's custom-node handlers. Self-referenced by
+ * the `TABLE` transformer (cells are converted with the same set), so it
+ * must be declared after `TABLE` — the references live inside callbacks that
+ * run well after module init, so there is no TDZ hazard.
+ */
+export declare const BYLINE_TRANSFORMERS: Array<Transformer>;

package/dist/field/markdown/transformers.js

@@ -0,0 +1,151 @@
+import { $convertFromMarkdownString, $convertToMarkdownString, 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 { $createAdmonitionNode, $isAdmonitionNode, AdmonitionNode } from "../extensions/admonition/admonition-node.js";
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/;
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-+:? ?)+\|?\s?$/;
+function isTableRowDivider(row) {
+    return TABLE_ROW_DIVIDER_REG_EXP.test(row);
+}
+const TABLE = {
+    dependencies: [
+        TableNode,
+        TableRowNode,
+        TableCellNode
+    ],
+    export: (node)=>{
+        if (!$isTableNode(node)) return null;
+        const output = [];
+        for (const row of node.getChildren()){
+            const rowOutput = [];
+            if (!$isTableRowNode(row)) continue;
+            let isHeaderRow = false;
+            for (const cell of row.getChildren())if ($isTableCellNode(cell)) {
+                rowOutput.push($convertToMarkdownString(BYLINE_TRANSFORMERS, cell).replace(/\n/g, '\\n').trim());
+                if (cell.hasHeaderState(TableCellHeaderStates.ROW)) isHeaderRow = true;
+            }
+            output.push(`| ${rowOutput.join(' | ')} |`);
+            if (isHeaderRow) output.push(`| ${rowOutput.map(()=>'---').join(' | ')} |`);
+        }
+        return output.join('\n');
+    },
+    regExp: TABLE_ROW_REG_EXP,
+    replace: (parentNode, _children, match)=>{
+        if (isTableRowDivider(match[0])) {
+            const table = parentNode.getPreviousSibling();
+            if (!table || !$isTableNode(table)) return;
+            const rows = table.getChildren();
+            const lastRow = rows[rows.length - 1];
+            if (!lastRow || !$isTableRowNode(lastRow)) return;
+            lastRow.getChildren().forEach((cell)=>{
+                if (!$isTableCellNode(cell)) return;
+                cell.setHeaderStyles(TableCellHeaderStates.ROW, TableCellHeaderStates.ROW);
+            });
+            parentNode.remove();
+            return;
+        }
+        const matchCells = mapToTableCells(match[0]);
+        if (null == matchCells) return;
+        const rows = [
+            matchCells
+        ];
+        let sibling = parentNode.getPreviousSibling();
+        let maxCells = matchCells.length;
+        while(sibling){
+            if (!$isParagraphNode(sibling)) break;
+            if (1 !== sibling.getChildrenSize()) break;
+            const firstChild = sibling.getFirstChild();
+            if (!$isTextNode(firstChild)) break;
+            const cells = mapToTableCells(firstChild.getTextContent());
+            if (null == cells) break;
+            maxCells = Math.max(maxCells, cells.length);
+            rows.unshift(cells);
+            const previousSibling = sibling.getPreviousSibling();
+            sibling.remove();
+            sibling = previousSibling;
+        }
+        const table = $createTableNode();
+        for (const cells of rows){
+            const tableRow = $createTableRowNode();
+            table.append(tableRow);
+            for(let i = 0; i < maxCells; i++)tableRow.append(i < cells.length ? cells[i] : $createTableCell(''));
+        }
+        const previousSibling = parentNode.getPreviousSibling();
+        if ($isTableNode(previousSibling) && getTableColumnsSize(previousSibling) === maxCells) {
+            previousSibling.append(...table.getChildren());
+            parentNode.remove();
+        } else parentNode.replace(table);
+        table.selectEnd();
+    },
+    type: 'element'
+};
+function getTableColumnsSize(table) {
+    const row = table.getFirstChild();
+    return $isTableRowNode(row) ? row.getChildrenSize() : 0;
+}
+const $createTableCell = (textContent)=>{
+    const content = textContent.replace(/\\n/g, '\n');
+    const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS);
+    $convertFromMarkdownString(content, BYLINE_TRANSFORMERS, cell);
+    return cell;
+};
+const mapToTableCells = (textContent)=>{
+    const match = textContent.match(TABLE_ROW_REG_EXP);
+    if (!match?.[1]) return null;
+    return match[1].split('|').map((text)=>$createTableCell(text));
+};
+const ADMONITION_TYPES = new Set([
+    'note',
+    'tip',
+    'warning',
+    'danger'
+]);
+const ADMONITION_START_REG_EXP = /^:::(note|tip|warning|danger)(?:\[([^\]]*)\])?\s*$/;
+const ADMONITION_END_REG_EXP = /^:::\s*$/;
+const ADMONITION_BODY_TRANSFORMERS = [
+    ...TEXT_FORMAT_TRANSFORMERS
+];
+const ADMONITION = {
+    dependencies: [
+        AdmonitionNode
+    ],
+    export: (node)=>{
+        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 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)=>{
+        const rawType = startMatch[1];
+        if (!ADMONITION_TYPES.has(rawType)) return false;
+        const admonitionType = rawType;
+        const title = startMatch[2] ?? '';
+        const node = $createAdmonitionNode({
+            admonitionType,
+            title
+        });
+        if (!children && null != linesInBetween) {
+            const body = linesInBetween.join('\n').trim();
+            if (body) node.__content.update(()=>{
+                $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS);
+            }, {
+                discrete: true
+            });
+        }
+        rootNode.append(node);
+    },
+    type: 'multiline-element'
+};
+const BYLINE_TRANSFORMERS = [
+    TABLE,
+    ADMONITION,
+    ...TRANSFORMERS
+];
+export { ADMONITION, BYLINE_TRANSFORMERS, TABLE };

package/dist/field/plugins/toolbar-plugin/index.js

@@ -14,6 +14,7 @@ import { $createParagraphNode, $getNodeByKey, $getSelection, $isRangeSelection,
 import { useEditorConfig } from "../../config/editor-config-context.js";
 import { BylineToolbarExtension, selectToolbarItems } from "../../extensions/byline-toolbar/byline-toolbar-extension.js";
 import { $isLinkNode, LinkExtension, OPEN_LINK_MODAL_COMMAND, TOGGLE_LINK_COMMAND } from "../../extensions/link/index.js";
+import { useMarkdownToggle } from "../../hooks/use-markdown-toggle.js";
 import { IS_APPLE } from "../../shared/environment.js";
 import { DropDown, DropDownItem } from "../../ui/dropdown.js";
 import { getSelectedNode } from "../../utils/getSelectedNode.js";
@@ -283,7 +284,8 @@ function ToolbarPlugin() {
         toolbarConfig.items
     ]);
     const hasLinkExtension = void 0 !== useOptionalExtensionDependency(LinkExtension);
-    const { uuid, config: { options: { textAlignment, undoRedo, textStyle, inlineCode } } } = useEditorConfig();
+    const { uuid, config: { options: { textAlignment, undoRedo, textStyle, inlineCode, markdownToggle } } } = useEditorConfig();
+    const { isMarkdown, toggleMarkdown } = useMarkdownToggle();
     const $updateToolbar = useCallback(()=>{
         const selection = $getSelection();
         if ($isRangeSelection(selection)) {
@@ -756,6 +758,24 @@ function ToolbarPlugin() {
                 children: trailingToolbarItems.map((item)=>/*#__PURE__*/ jsx(external_react_Fragment, {
                         children: item.node
                     }, item.id))
+            }),
+            markdownToggle && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(Divider, {}),
+                    /*#__PURE__*/ jsx("button", {
+                        type: "button",
+                        disabled: !isEditable,
+                        onClick: toggleMarkdown,
+                        className: `toolbar-item spaced markdown-toggle ${isMarkdown ? 'active' : ''}`,
+                        title: isMarkdown ? 'Convert from Markdown' : 'Convert to Markdown',
+                        "aria-label": isMarkdown ? 'Convert from markdown' : 'Convert to markdown',
+                        "aria-pressed": isMarkdown,
+                        children: /*#__PURE__*/ jsx("span", {
+                            className: "markdown-toggle-label",
+                            children: "M"
+                        })
+                    })
+                ]
             })
         ]
     });

package/dist/field/themes/lexical-editor-theme.css

@@ -120,9 +120,12 @@ html[data-theme="dark"] .LexicalEditorTheme__textCode, .dark .LexicalEditorTheme
 .LexicalEditorTheme__code {
   -moz-tab-size: 2;
   tab-size: 2;
+  white-space: pre;
+  box-sizing: border-box;
   background-color: #f0f2f5;
+  max-width: 100%;
   margin: 8px 0;
-  padding: 8px 8px 8px 52px;
+  padding: 8px 8px 8px 0;
   font-family: Menlo, Consolas, Monaco, monospace;
   font-size: 15px;
   line-height: 1.53;
@@ -133,14 +136,19 @@ html[data-theme="dark"] .LexicalEditorTheme__textCode, .dark .LexicalEditorTheme
 
 .LexicalEditorTheme__code:before {
   content: attr(data-gutter);
+  float: left;
+  z-index: 3;
   color: #777;
   white-space: pre-wrap;
   text-align: right;
   background-color: #eee;
   border-right: 1px solid #ccc;
   min-width: 25px;
+  min-height: 100%;
+  margin-top: -8px;
+  margin-right: 10px;
   padding: 8px;
-  position: absolute;
+  position: sticky;
   top: 0;
   left: 0;
 }

package/dist/richtext-field_module.css

@@ -1,5 +1,6 @@
 :is(.wrapper-Kp9TyN, .byline-field-richtext) {
   flex: 1;
+  min-width: 0;
   height: 100%;
   display: flex;
 }
@@ -13,6 +14,7 @@
   flex-direction: column;
   flex: 1;
   gap: .25rem;
+  min-width: 0;
   display: flex;
 }
 

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "3.3.0",
+  "version": "3.4.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/admin": "3.3.0",
-    "@byline/client": "3.3.0",
-    "@byline/core": "3.3.0",
-    "@byline/ui": "3.3.0"
+    "@byline/client": "3.4.0",
+    "@byline/core": "3.4.0",
+    "@byline/ui": "3.4.0",
+    "@byline/admin": "3.4.0"
   },
   "peerDependencies": {
     "react": "^19.0.0",

package/src/field/config/default.ts

@@ -14,6 +14,7 @@ export const DEFAULT_EDITOR_SETTINGS: EditorSettings = {
     showTreeView: false,
     textAlignment: true,
     markdownShortcutPlugin: false,
+    markdownToggle: false,
     undoRedo: true,
     textStyle: true,
     inlineCode: true,

package/src/field/config/types.ts

@@ -14,6 +14,7 @@ export type OptionName =
   | 'showTreeView'
   | 'textAlignment'
   | 'markdownShortcutPlugin'
+  | 'markdownToggle'
   | 'undoRedo'
   | 'textStyle'
   | 'inlineCode'