@byline/richtext-lexical 3.3.1 → 3.4.1

package/src/field/context/markdown-mode-context.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+/**
+ * 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 { createContext, useContext, useMemo, useRef, useState } 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>
+}
+
+const MarkdownModeContext = createContext<MarkdownModeContextValue | null>(null)
+
+/**
+ * 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 function MarkdownModeProvider({
+  children,
+}: {
+  children: React.ReactNode
+}): React.JSX.Element {
+  const [isMarkdown, setIsMarkdown] = useState(false)
+  const markdownModeRef = useRef(false)
+  const value = useMemo<MarkdownModeContextValue>(
+    () => ({ isMarkdown, setIsMarkdown, markdownModeRef }),
+    [isMarkdown]
+  )
+  return <MarkdownModeContext.Provider value={value}>{children}</MarkdownModeContext.Provider>
+}
+
+export function useMarkdownMode(): MarkdownModeContextValue {
+  const ctx = useContext(MarkdownModeContext)
+  if (ctx == null) {
+    throw new Error('useMarkdownMode must be used within a MarkdownModeProvider')
+  }
+  return ctx
+}

package/src/field/editor-component.css

@@ -2,6 +2,9 @@
   display: flex;
   isolation: isolate;
   width: 100%;
+  /* Flex container — keep it from being widened by its content (a wide
+   * white-space:pre code block) past its allotted column width. */
+  min-width: 0;
 }
 
 .lexicalRichTextEditor--read-only {
@@ -21,6 +24,9 @@
 .lexicalRichTextEditor__wrap {
   width: 100%;
   position: relative;
+  /* Flex item of .lexicalRichTextEditor — default min-width:auto would let
+   * the code block's intrinsic width grow this past 100%. */
+  min-width: 0;
 }
 
 .lexicalRichTextEditor.error {

package/src/field/editor-context.tsx

@@ -22,6 +22,7 @@ import {
 
 import { defaultExtensionsList } from './config/default-extensions'
 import { EditorConfigContext } from './config/editor-config-context'
+import { MarkdownModeProvider } from './context/markdown-mode-context'
 import { SharedHistoryContext } from './context/shared-history-context'
 import { SharedOnChangeContext } from './context/shared-on-change-context'
 import { Editor } from './editor'
@@ -119,18 +120,20 @@ export function EditorContext(props: {
     <EditorConfigContext config={editorConfig.settings}>
       <SharedOnChangeContext onChange={onChange}>
         <SharedHistoryContext>
-          <LexicalExtensionComposer
-            extension={rootExtension}
-            contentEditable={null}
-            key={composerKey + editable}
-          >
-            <div className="editor-shell">
-              {beforeEditor}
-              <Editor minHeight={props.minHeight} maxHeight={props.maxHeight} />
-              {afterEditor}
-              {children}
-            </div>
-          </LexicalExtensionComposer>
+          <MarkdownModeProvider>
+            <LexicalExtensionComposer
+              extension={rootExtension}
+              contentEditable={null}
+              key={composerKey + editable}
+            >
+              <div className="editor-shell">
+                {beforeEditor}
+                <Editor minHeight={props.minHeight} maxHeight={props.maxHeight} />
+                {afterEditor}
+                {children}
+              </div>
+            </LexicalExtensionComposer>
+          </MarkdownModeProvider>
         </SharedHistoryContext>
       </SharedOnChangeContext>
     </EditorConfigContext>

package/src/field/editor.css

@@ -48,6 +48,11 @@
   flex: auto;
   position: relative;
   max-width: 100%;
+  /* Flex item default min-width:auto would let a wide (white-space:pre) code
+   * block grow this wrapper to its content width and scroll the whole editor.
+   * min-width:0 keeps the wrapper at the container width so the code block's
+   * own overflow-x scrolls internally and its sticky gutter stays pinned. */
+  min-width: 0;
   resize: vertical;
   z-index: -1;
 }
@@ -1255,6 +1260,28 @@ button.toolbar-item.active i {
   opacity: 1;
 }
 
+button.toolbar-item .markdown-toggle-label {
+  font-family: var(--font-mono, ui-monospace, monospace);
+  font-size: 15px;
+  font-weight: 700;
+  line-height: 18px;
+  width: 18px;
+  text-align: center;
+  /* Explicit color (like `.toolbar-item .text`) rather than inheriting —
+   * in dark mode `.editor-shell` sets the inherited color to #fff, which the
+   * `.toolbar span { filter: invert(1) }` rule would then flip to black.
+   * A mid-gray inverts to a visible mid-gray in both themes. */
+  color: #777;
+}
+
+button.toolbar-item.active .markdown-toggle-label {
+  color: #1a1a1a;
+}
+
+button.toolbar-item:disabled .markdown-toggle-label {
+  color: #bbb;
+}
+
 .toolbar-item.font-family .text {
   display: block;
   max-width: 40px;

package/src/field/editor.tsx

@@ -11,7 +11,6 @@
 import type * as React from 'react'
 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'
@@ -26,6 +25,7 @@ import type { EditorState, LexicalEditor } from 'lexical'
 
 import { useEditorConfig } from './config/editor-config-context'
 import { ContentEditable } from './content-editable'
+import { useMarkdownMode } from './context/markdown-mode-context'
 import { useSharedHistoryContext } from './context/shared-history-context'
 import { useSharedOnChange } from './context/shared-on-change-context'
 import { Debug } from './debug'
@@ -34,6 +34,7 @@ import {
   selectFloatingUIItems,
 } from './extensions/byline-floating-ui/byline-floating-ui-extension'
 import { TableExtension as BylineTableExtension } from './extensions/table/table-extension'
+import { BYLINE_TRANSFORMERS } from './markdown/transformers'
 // import { AiPlugin } from './plugins/ai-plugin'
 // import { DragDropPaste } from './plugins/drag-drop-paste-plugin'
 import { TablePlugin } from './plugins/table-plugin'
@@ -63,6 +64,7 @@ export const Editor = memo(function Editor({
   const _debugTagLogCountRef = useState(() => ({ count: 0 }))[0]
   const { onChange } = useSharedOnChange()
   const { historyState } = useSharedHistoryContext()
+  const { markdownModeRef } = useMarkdownMode()
   const {
     config: {
       options: { debug, richText, showTreeView, markdownShortcutPlugin },
@@ -148,6 +150,9 @@ export const Editor = memo(function Editor({
             //   console.log('[lexical][top] tags', Array.from(tags))
             // }
             if (tags.has(APPLY_VALUE_TAG)) return
+            // Markdown-source edits are a transient view — never persisted to
+            // the form. Only the single convert-back on exit reaches onChange.
+            if (markdownModeRef.current) return
             if (!tags.has('focus') || tags.size > 1) {
               if (onChange != null) onChange(editorState, editor, tags)
             }
@@ -161,7 +166,9 @@ export const Editor = memo(function Editor({
               ErrorBoundary={LexicalErrorBoundary}
             />
             <HistoryPlugin externalHistoryState={historyState} />
-            {markdownShortcutPlugin && <MarkdownShortcutPlugin transformers={TRANSFORMERS} />}
+            {markdownShortcutPlugin && (
+              <MarkdownShortcutPlugin transformers={BYLINE_TRANSFORMERS} />
+            )}
             {floatingAnchorElem != null &&
               !isSmallWidthViewport &&
               floatingUIItems.map(({ id, Component }) => (

package/src/field/hooks/use-markdown-toggle.ts

@@ -0,0 +1,142 @@
+'use client'
+
+/**
+ * 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 { 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, type EditorState, RootNode } from 'lexical'
+
+import { APPLY_VALUE_TAG } from '../constants'
+import { useMarkdownMode } from '../context/markdown-mode-context'
+import { BYLINE_TRANSFORMERS } from '../markdown/transformers'
+
+const MARKDOWN_LANGUAGE = 'markdown'
+
+/** Trailing blank lines are semantically meaningless in markdown — ignore
+ * them when deciding whether the user actually edited the source. */
+function normalize(markdown: string): string {
+  return markdown.replace(/\n+$/, '')
+}
+
+/**
+ * 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 function useMarkdownToggle(): {
+  isMarkdown: boolean
+  toggleMarkdown: () => void
+} {
+  const [editor] = useLexicalComposerContext()
+  const { isMarkdown, setIsMarkdown, markdownModeRef } = useMarkdownMode()
+
+  // Exact rich state captured on entry, restored verbatim on a no-edit exit.
+  const originalEditorStateRef = useRef<EditorState | null>(null)
+  // The markdown we generated on entry — compared against the code node text
+  // on exit to detect whether the user touched the source.
+  const originalMarkdownRef = useRef<string>('')
+  // Unregister fn for the root-shape guard, live only while in markdown mode.
+  const unregisterTransformRef = useRef<(() => void) | null>(null)
+
+  const registerRootGuard = useCallback(() => {
+    unregisterTransformRef.current?.()
+    // Safety net: keep the root as exactly one markdown CodeNode so the user
+    // can't split it into sibling root nodes while editing source.
+    unregisterTransformRef.current = editor.registerNodeTransform(RootNode, (rootNode) => {
+      let codeNode = rootNode.getChildren().find($isCodeNode)
+      if (codeNode == null) {
+        codeNode = $createCodeNode(MARKDOWN_LANGUAGE)
+      }
+      if (rootNode.getChildrenSize() !== 1 || codeNode.getParent() == null) {
+        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()
+    // Suppress persistence *before* mutating so the code-block snapshot is
+    // never emitted to the form.
+    markdownModeRef.current = true
+    editor.update(() => {
+      const markdown = $convertToMarkdownString(BYLINE_TRANSFORMERS, undefined, 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 && originalEditorStateRef.current != null) {
+      // Pure round-trip: restore the exact captured state. Tagged so the
+      // OnChangePlugin ignores it — guaranteed no patch.
+      editor.setEditorState(originalEditorStateRef.current, { tag: APPLY_VALUE_TAG })
+      markdownModeRef.current = false
+    } else {
+      // Edited: drop the guard first so the single rebuilt rich state IS
+      // emitted to the form (one field change → one patch).
+      markdownModeRef.current = false
+      editor.update(() => {
+        $convertFromMarkdownString(currentMarkdown, BYLINE_TRANSFORMERS, undefined, true)
+      })
+    }
+
+    originalEditorStateRef.current = null
+    originalMarkdownRef.current = ''
+    setIsMarkdown(false)
+  }, [editor, clearRootGuard, markdownModeRef, setIsMarkdown])
+
+  const toggleMarkdown = useCallback(() => {
+    if (markdownModeRef.current) {
+      exitMarkdown()
+    } else {
+      enterMarkdown()
+    }
+  }, [markdownModeRef, enterMarkdown, exitMarkdown])
+
+  // If the host unmounts while still in markdown mode, drop the transform.
+  useEffect(() => () => clearRootGuard(), [clearRootGuard])
+
+  return { isMarkdown, toggleMarkdown }
+}

package/src/field/markdown/transformers.ts

@@ -0,0 +1,280 @@
+/**
+ * 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 {
+  $convertFromMarkdownString,
+  $convertToMarkdownString,
+  type ElementTransformer,
+  type MultilineElementTransformer,
+  TEXT_FORMAT_TRANSFORMERS,
+  TRANSFORMERS,
+  type Transformer,
+} 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'
+import type { AdmonitionType } from '../extensions/admonition/node-types'
+
+// A markdown table row: | a | b | c |
+const TABLE_ROW_REG_EXP = /^(?:\|)(.+)(?:\|)\s?$/
+// The header separator row: | --- | :--: | ---: |  (0.44's @lexical/markdown
+// does not export isTableRowDivider, so inline it).
+const TABLE_ROW_DIVIDER_REG_EXP = /^(\| ?:?-+:? ?)+\|?\s?$/
+
+function isTableRowDivider(row: string): boolean {
+  return TABLE_ROW_DIVIDER_REG_EXP.test(row)
+}
+
+export const TABLE: ElementTransformer = {
+  dependencies: [TableNode, TableRowNode, TableCellNode],
+  export: (node) => {
+    if (!$isTableNode(node)) {
+      return null
+    }
+
+    const output: string[] = []
+
+    for (const row of node.getChildren()) {
+      const rowOutput: string[] = []
+      if (!$isTableRowNode(row)) {
+        continue
+      }
+
+      let isHeaderRow = false
+      for (const cell of row.getChildren()) {
+        if ($isTableCellNode(cell)) {
+          // Cell content is itself markdown; escape literal newlines so the
+          // row stays on one line.
+          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) => {
+    // Header divider row: promote the previous table's last row to headers.
+    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 (matchCells == null) {
+      return
+    }
+
+    const rows = [matchCells]
+    let sibling = parentNode.getPreviousSibling()
+    let maxCells = matchCells.length
+
+    // Walk backwards over preceding single-text paragraphs that are also
+    // table rows, accumulating them into this table.
+    while (sibling) {
+      if (!$isParagraphNode(sibling)) {
+        break
+      }
+      if (sibling.getChildrenSize() !== 1) {
+        break
+      }
+      const firstChild = sibling.getFirstChild()
+      if (!$isTextNode(firstChild)) {
+        break
+      }
+      const cells = mapToTableCells(firstChild.getTextContent())
+      if (cells == null) {
+        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: TableNode): number {
+  const row = table.getFirstChild()
+  return $isTableRowNode(row) ? row.getChildrenSize() : 0
+}
+
+const $createTableCell = (textContent: string): TableCellNode => {
+  const content = textContent.replace(/\\n/g, '\n')
+  const cell = $createTableCellNode(TableCellHeaderStates.NO_STATUS)
+  $convertFromMarkdownString(content, BYLINE_TRANSFORMERS, cell)
+  return cell
+}
+
+const mapToTableCells = (textContent: string): Array<TableCellNode> | null => {
+  const match = textContent.match(TABLE_ROW_REG_EXP)
+  if (!match?.[1]) {
+    return null
+  }
+  return match[1].split('|').map((text) => $createTableCell(text))
+}
+
+// ---------------------------------------------------------------------------
+// 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.
+// ---------------------------------------------------------------------------
+
+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]
+
+export const ADMONITION: MultilineElementTransformer = {
+  dependencies: [AdmonitionNode],
+  export: (node) => {
+    if (!$isAdmonitionNode(node)) {
+      return null
+    }
+    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()
+    })
+
+    const heading = title ? `:::${type}[${title}]` : `:::${type}`
+    return body ? `${heading}\n${body}\n:::` : `${heading}\n:::`
+  },
+  regExpStart: ADMONITION_START_REG_EXP,
+  // `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) => {
+    const rawType = startMatch[1]
+    if (!ADMONITION_TYPES.has(rawType)) {
+      return false
+    }
+    const admonitionType = rawType as AdmonitionType
+    const title = startMatch[2] ?? ''
+
+    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) {
+      const body = linesInBetween.join('\n').trim()
+      if (body) {
+        node.__content.update(
+          () => {
+            $convertFromMarkdownString(body, ADMONITION_BODY_TRANSFORMERS)
+          },
+          { discrete: true }
+        )
+      }
+    }
+
+    rootNode.append(node)
+  },
+  type: 'multiline-element',
+}
+
+/**
+ * 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 const BYLINE_TRANSFORMERS: Array<Transformer> = [TABLE, ADMONITION, ...TRANSFORMERS]

package/src/field/plugins/toolbar-plugin/index.tsx

@@ -92,6 +92,7 @@ import {
   OPEN_LINK_MODAL_COMMAND,
   TOGGLE_LINK_COMMAND,
 } from '../../extensions/link'
+import { useMarkdownToggle } from '../../hooks/use-markdown-toggle'
 import { IS_APPLE } from '../../shared/environment'
 import { DropDown, DropDownItem } from '../../ui/dropdown'
 import { getSelectedNode } from '../../utils/getSelectedNode'
@@ -372,9 +373,10 @@ export function ToolbarPlugin(): React.JSX.Element {
   const {
     uuid,
     config: {
-      options: { textAlignment, undoRedo, textStyle, inlineCode },
+      options: { textAlignment, undoRedo, textStyle, inlineCode, markdownToggle },
     },
   } = useEditorConfig()
+  const { isMarkdown, toggleMarkdown } = useMarkdownToggle()
   // const { openModal } = usePayloadModal()
   // const editDepth = useEditDepth()
 
@@ -869,6 +871,23 @@ export function ToolbarPlugin(): React.JSX.Element {
           <Fragment key={item.id}>{item.node}</Fragment>
         ))}
       </ToolbarActiveEditorProvider>
+
+      {markdownToggle && (
+        <>
+          <Divider />
+          <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}
+          >
+            <span className="markdown-toggle-label">M</span>
+          </button>
+        </>
+      )}
     </div>
   )
 }