@blue-patterns/richtext 0.0.0-stage → 0.7.18

package/dist/editorNodes.js

@@ -0,0 +1,30 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file editorNodes.ts
+ * @input Imports the default Lexical node classes registered by the editor.
+ * @output Exports DEFAULT_NODES — the base OSS node set.
+ * @position Shared by RichTextEditor.tsx (editor config) and
+ *   markdownSerializers.ts (headless conversion), so both register the same
+ *   nodes and Markdown round-trips consistently.
+ *
+ * SYNC: When the default node set changes, both consumers pick it up here.
+ */
+
+import { ListNode, ListItemNode } from '@lexical/list';
+import { HeadingNode, QuoteNode } from '@lexical/rich-text';
+import { LinkNode, AutoLinkNode } from '@lexical/link';
+import { CodeNode, CodeHighlightNode } from '@lexical/code';
+import { TableNode, TableRowNode, TableCellNode } from '@lexical/table';
+import { HorizontalRuleNode } from '@lexical/extension';
+import { RichTextExtensionNode } from "./markdownExtensionNode.js";
+
+/**
+ * The default OSS node set registered with the editor: headings, quotes,
+ * lists, links, code, and tables. Extend via the `nodes` prop / option rather
+ * than editing this list.
+ */
+export const DEFAULT_NODES = [HeadingNode, QuoteNode, ListNode, ListItemNode, LinkNode, AutoLinkNode, CodeNode, CodeHighlightNode, TableNode, TableRowNode, TableCellNode, HorizontalRuleNode,
+// Markdown plugin nodes (spec:AST-064): registered everywhere so stored
+// state that holds them always loads.
+RichTextExtensionNode];

package/dist/editorTheme.d.ts

@@ -0,0 +1,7 @@
+import type { EditorThemeClasses } from 'lexical';
+/**
+ * Builds the Lexical EditorThemeClasses object. Lexical expects plain
+ * class-name strings, which `stylex.props(...).className` yields.
+ */
+export declare function sharedEditorTheme(): EditorThemeClasses;
+//# sourceMappingURL=editorTheme.d.ts.map

package/dist/editorTheme.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editorTheme.d.ts","sourceRoot":"","sources":["../src/editorTheme.ts"],"names":[],"mappings":"AA2BA,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAschD;;;GAGG;AACH,wBAAgB,iBAAiB,IAAI,kBAAkB,CAgEtD"}

package/dist/editorTheme.js

@@ -0,0 +1,328 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file editorTheme.ts
+ * @input Uses StyleX + Astryx design tokens
+ * @output Exports sharedEditorTheme(), which builds a Lexical EditorThemeClasses
+ *   object mapping Lexical's theme slots to StyleX-generated class names, with
+ *   document blocks styled like core Markdown (spec:AST-061 FR2–FR4).
+ * @position Shared by RichTextEditor.tsx and RichTextView.tsx so editor and
+ *   read-only view render identically.
+ *
+ * SYNC: When modified, keep RichTextEditor.tsx and RichTextView.tsx in sync.
+ */
+
+import * as stylex from '@stylexjs/stylex';
+import '@blue-patterns/core/theme/tokens.stylex';
+import { colorVars, spacingVars, radiusVars, typographyVars, typeScaleVars, fontWeightVars, borderVars, focusVars, sizeVars } from '@blue-patterns/core/theme/tokens.stylex';
+import { CODE_SYNTAX_CLASS } from "./internal/CodeSyntaxPlugin.js";
+// Document blocks follow core Markdown's typography, spacing, and measure
+// (spec:AST-061 FR2–FR4): type-scale tokens for text, one block spacing table
+// with no margin before the first block or after the last, and prose capped
+// at Markdown's default content width while code and tables span the editor.
+const PROSE_MEASURE = '680px';
+
+// Block margins wrap their spacing tokens in calc(). The value is unique to
+// these rules, so its atomic class never matches a margin declared by other
+// code; a stylesheet in a later cascade layer therefore cannot outrank the
+// :first-child and :last-child rules that remove the outer margins.
+const MAJOR_HEADING_BEFORE = `calc(${spacingVars['--spacing-6']})`;
+const MAJOR_HEADING_AFTER = `calc(${spacingVars['--spacing-3']})`;
+const MINOR_HEADING_BEFORE = `calc(${spacingVars['--spacing-4']})`;
+const MINOR_HEADING_AFTER = `calc(${spacingVars['--spacing-2']})`;
+const TEXT_BLOCK_SPACE = `calc(${spacingVars['--spacing-3']})`;
+const WIDE_BLOCK_SPACE = `calc(${spacingVars['--spacing-4']})`;
+const LIST_ITEM_SPACE = `calc(${spacingVars['--spacing-1']})`;
+const TASK_BOX_SIZE = '20px';
+const LIST_ROW_GAP = `calc(${spacingVars['--spacing-0-5']})`;
+const LIST_ROW_FLUSH = `calc(${spacingVars['--spacing-0']})`;
+const NESTED_LIST_SPACE = `calc(${spacingVars['--spacing-2']})`;
+const RULE_SPACE = `calc(${spacingVars['--spacing-6']})`;
+const CODE_SPACE = `calc(${spacingVars['--spacing-3']})`;
+// Core CodeBlock's header (8px, a small control, 8px) overlaps the code's
+// 12px top padding by 8px, so its code starts 8px + control + 12px down.
+const CODE_HEADER_SPACE = `calc(${spacingVars['--spacing-2']} + ${sizeVars['--size-element-sm']} + ${spacingVars['--spacing-3']})`;
+// A block that names no language has no header: core CodeBlock puts its copy
+// button in a column of its own at the inline end (8px, a small control, 8px),
+// beside the code rather than over it, so the code ends that much earlier.
+const CODE_CORNER_SPACE = `calc(${spacingVars['--spacing-4']} + ${sizeVars['--size-element-sm']} + 2 * ${spacingVars['--spacing-2']})`;
+const editorTheme = {
+  providerDirection: {
+    ksoyAI: "x1epdd7z",
+    $$css: true
+  },
+  paragraph: {
+    keoZOQ: "x1ftnraw xnhvf09 xe66n16",
+    k1K539: "x18pneqc xfo59cc x1vugyqv",
+    ks0D6T: "x7ep2pv",
+    k63SB2: "x1pd3egz",
+    kMwMTN: "x1heor9g",
+    $$css: true
+  },
+  h1: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "xcg7oai",
+    k63SB2: "x1v68xuy",
+    kLWn49: "xfmsba7",
+    keoZOQ: "x13xmvwt xnhvf09",
+    k1K539: "x18pneqc xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  h2: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "x1xvnhcw",
+    k63SB2: "x12yy4cs",
+    kLWn49: "x1cpk1wn",
+    keoZOQ: "x13xmvwt xnhvf09",
+    k1K539: "x18pneqc xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  h3: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "xii13ha",
+    k63SB2: "x1jcxfy8",
+    kLWn49: "xwjzt0u",
+    keoZOQ: "x13xmvwt xnhvf09",
+    k1K539: "x18pneqc xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  h4: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "x8tkxat",
+    k63SB2: "x2hcmsi",
+    kLWn49: "xqerer",
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1hws3vx xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  h5: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "xsgqta0",
+    k63SB2: "xno150v",
+    kLWn49: "xo3gurs",
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1hws3vx xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  h6: {
+    kMv6JI: "x1g81bgm",
+    kGuDYH: "xw5ohdf",
+    k63SB2: "x1pw4frv",
+    kLWn49: "xeixjfn",
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1hws3vx xfo59cc",
+    ks0D6T: "x7ep2pv",
+    $$css: true
+  },
+  quote: {
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1u2y747 xfo59cc",
+    kUOVxO: "xrxpjvj",
+    ks0D6T: "x7ep2pv",
+    kZCmMZ: "x1rey3nv",
+    k2ei4v: "xyumdvf",
+    kVhnKS: "x1t7ytsu",
+    kGJrpR: "x14ydlgx",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  ul: {
+    keoZOQ: "x1ftnraw xnhvf09",
+    k1K539: "x18pneqc xfo59cc",
+    ks0D6T: "x7ep2pv",
+    kZCmMZ: "x31w388",
+    kpqbRz: "x43c9pm",
+    $$css: true
+  },
+  ol: {
+    keoZOQ: "x1ftnraw xnhvf09",
+    k1K539: "x18pneqc xfo59cc",
+    ks0D6T: "x7ep2pv",
+    kZCmMZ: "x31w388",
+    kpqbRz: "x43c9pm",
+    $$css: true
+  },
+  ulMarker0: {
+    kH6xsr: "xtaz4m5",
+    $$css: true
+  },
+  ulMarker1: {
+    kH6xsr: "xrylv2j",
+    $$css: true
+  },
+  ulMarker2: {
+    kH6xsr: "x152237o",
+    $$css: true
+  },
+  olMarker0: {
+    kH6xsr: "x3yw8vx",
+    $$css: true
+  },
+  olMarker1: {
+    kH6xsr: "x1rrqm6h",
+    $$css: true
+  },
+  olMarker2: {
+    kH6xsr: "x19k9dhg",
+    $$css: true
+  },
+  tableScrollableWrapper: {
+    kXHlph: "xw2csxc",
+    ks0D6T: "x193iq5w",
+    k1xSpc: "xrvj5dj",
+    kumcoG: "x1mkdm3x",
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1u2y747 xfo59cc",
+    $$css: true
+  },
+  table: {
+    kLvRdT: "x1mwwwfo",
+    kzqmXN: "xh8yej3",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x14i3s5s",
+    $$css: true
+  },
+  tableRow: {
+    kt9PQ7: "xso031l",
+    kfdmCh: "x1q0q8m5",
+    kL6WhQ: "xw8gpjh x1bta2m4",
+    $$css: true
+  },
+  tableCell: {
+    kB7OPa: "x1afcbsf",
+    k8WAf4: "xce4md1",
+    kg3NbH: "xf314gf",
+    k9WMMc: "x1yc453h",
+    kXLuUW: "xxymvpz",
+    kHjlTd: "x1mzt3pk",
+    ke9TFa: "xw8tdv1 x1qlsc9e",
+    k8ry5P: "x18b5jzi",
+    kBCPoo: "x1gejf6u",
+    $$css: true
+  },
+  tableCellHeader: {
+    k63SB2: "x2mo6ok",
+    kMwMTN: "xv1l7n4",
+    $$css: true
+  },
+  tableCellSelected: {
+    kMeerF: "xak0ai5",
+    k3XXqK: "x9ssot5",
+    kjBf7l: "x19bwoy8",
+    kInvED: "x1c097ug",
+    $$css: true
+  },
+  code: {
+    k1xSpc: "x1lliihq",
+    kMv6JI: "x9m5x89",
+    kGuDYH: "xp03k98",
+    kLWn49: "x17iicif",
+    kWkggS: "xzyc27v",
+    kMzoRj: "x1litavf",
+    ksu8eU: "x1y0btm7",
+    kVAM5u: "x14i3s5s",
+    kaIpWk: "xh6dtrn",
+    kLKAdn: "xekneqv x2w4pp4",
+    kGO01o: "xvmdzux",
+    kZCmMZ: "x1rey3nv",
+    kwRFfy: "xza90q5 x18crcbm",
+    kB7OPa: "x9f619",
+    kzqmXN: "xeq5yr9",
+    k7Eaqz: "xejm5pw",
+    ks0D6T: "x193iq5w",
+    keoZOQ: "x1w2a574 xnhvf09",
+    k1K539: "x1u2y747 xfo59cc",
+    khDVqt: "x126k92a",
+    kTgw9: "x1yn0g08",
+    kHjlTd: "x1mzt3pk",
+    $$css: true
+  }
+};
+
+/**
+ * Builds the Lexical EditorThemeClasses object. Lexical expects plain
+ * class-name strings, which `stylex.props(...).className` yields.
+ */
+export function sharedEditorTheme() {
+  // A class for a block Lexical may mark `dir="auto"`.
+  const block = (...styles) => stylex.props(...styles, editorTheme.providerDirection).className ?? '';
+  const className = style => stylex.props(style).className ?? '';
+  return {
+    paragraph: block(editorTheme.paragraph),
+    // A Markdown plugin's block node is spaced and measured as a paragraph,
+    // as core Markdown spaces its block (RichTextExtensionNode reads it).
+    markdownExtensionBlock: block(editorTheme.paragraph),
+    heading: {
+      h1: block(editorTheme.h1),
+      h2: block(editorTheme.h2),
+      h3: block(editorTheme.h3),
+      h4: block(editorTheme.h4),
+      h5: block(editorTheme.h5),
+      h6: block(editorTheme.h6)
+    },
+    quote: block(editorTheme.quote),
+    list: {
+      ul: block(editorTheme.ul),
+      ol: block(editorTheme.ol),
+      listitem: {
+        className: "x1f3mx8c xmvvslv x1uerj9w x13xdy6z x1wqhfsw xkuhcwz xsgnyjk x10j6jf0 xfo59cc x1sle589 x81k3mc xovwveo x2i8j16 x8yim9t x1pvqllw xbj1ybn x1kuvm45"
+      }.className,
+      nested: {
+        listitem: {
+          className: "x1f3mx8c xmvvslv x1uerj9w x13xdy6z x1wqhfsw xkuhcwz xsgnyjk x10j6jf0 xfo59cc x1sle589 x81k3mc xovwveo x2i8j16 x8yim9t x1pvqllw xbj1ybn x1kuvm45"
+        }.className
+      },
+      // Lexical picks the class at `depth % 3` (spec:AST-061 DEC-6).
+      ulDepth: [className(editorTheme.ulMarker0), className(editorTheme.ulMarker1), className(editorTheme.ulMarker2)],
+      olDepth: [className(editorTheme.olMarker0), className(editorTheme.olMarker1), className(editorTheme.olMarker2)]
+    },
+    link: {
+      className: "xjse4m1 x1bvjpef x1ypdohk x16khyan"
+    }.className,
+    text: {
+      bold: {
+        className: "x2mo6ok"
+      }.className,
+      italic: {
+        className: "x1k4tb9n"
+      }.className,
+      underline: {
+        className: "x1bvjpef"
+      }.className,
+      strikethrough: {
+        className: "xmqliwb"
+      }.className,
+      code: {
+        className: "x9m5x89 xwmxj5m x7a5moj xx3sua9"
+      }.className
+    },
+    // The plain class lets CodeSyntaxPlugin's highlight rules find code blocks.
+    code: `${block(editorTheme.code)} ${CODE_SYNTAX_CLASS}`,
+    hr: {
+      className: "xc342km x11xkdxz x13fuv20 x1pc3f07 x13xmvwt xnhvf09 xe66n16 x1qaki06 xfo59cc x1vugyqv"
+    }.className,
+    hrSelected: {
+      className: "xak0ai5 x9ssot5 x19bwoy8 x1eqjuhu"
+    }.className,
+    // MarkdownExtensionsPlugin puts it on a selected plugin node.
+    markdownExtensionSelected: {
+      className: "xak0ai5 x9ssot5 x19bwoy8 x1eqjuhu"
+    }.className,
+    table: block(editorTheme.table),
+    // Lexical stamps rows and cells `dir="auto"` too, which would set a cell
+    // of English text left-to-right inside a right-to-left document.
+    tableRow: block(editorTheme.tableRow),
+    tableCell: block(editorTheme.tableCell),
+    tableCellHeader: block(editorTheme.tableCellHeader),
+    // Added on top of the cell's own class by Lexical while the cell is in a
+    // table selection, so it carries no direction of its own.
+    tableCellSelected: className(editorTheme.tableCellSelected),
+    tableScrollableWrapper: block(editorTheme.tableScrollableWrapper)
+  };
+}

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @file index.ts
+ * @input Imports RichTextEditor and RichTextView components and their types
+ * @output Public API surface for @blue-patterns/richtext
+ * @position Package entry point (barrel) for @blue-patterns/richtext — the
+ *   Lexical-based rich text editor and viewer, promoted out of
+ *   @blue-patterns/lab so it can be canaried independently.
+ *
+ * Exports only what a caller builds with (spec:AST-061/DEC-8): the generated
+ * editor theme classes and the autolink regular expressions stay internal,
+ * and Lexical's `Transformer` type comes from `@lexical/markdown`.
+ * `publicSurface.test.ts` holds the runtime list.
+ *
+ * SYNC: When modified, update this header, /packages/richtext/README.md,
+ *   /packages/richtext/src/publicSurface.test.ts, and the editor component doc
+ *   files.
+ */
+export { RichTextEditor } from './RichTextEditor.js';
+export type { RichTextEditorProps, RichTextEditorRef, RichTextEditorStatus, RichTextEditorStatusType, RichTextEditorSize, } from './RichTextEditor.js';
+export { RichTextView } from './RichTextView.js';
+export type { RichTextViewProps } from './RichTextView.js';
+export { markdownToEditorStateJSON, editorStateJSONToMarkdown, } from './markdownSerializers.js';
+export type { MarkdownSerializerOptions } from './markdownSerializers.js';
+export { createRichTextExtension, RichTextExtensionError, } from './markdownExtensions.js';
+export type { RichTextMarkdownExtension } from './markdownExtensions.js';
+export { RichTextEditorToolbar, RICHTEXT_ICON_KEYS, } from './RichTextEditorToolbar.js';
+export type { RichTextEditorToolbarProps } from './RichTextEditorToolbar.js';
+export { RichTextEditorAutoLinkPlugin, DEFAULT_LINK_MATCHERS, NEW_TAB_LINK_ATTRIBUTES, } from './RichTextEditorAutoLinkPlugin.js';
+export type { RichTextEditorAutoLinkPluginProps } from './RichTextEditorAutoLinkPlugin.js';
+export { sanitizeUrl, validateUrl } from './linkUtils.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;GAgBG;AAEH,OAAO,EAAC,cAAc,EAAC,MAAM,kBAAkB,CAAC;AAChD,YAAY,EACV,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,wBAAwB,EACxB,kBAAkB,GACnB,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAC,YAAY,EAAC,MAAM,gBAAgB,CAAC;AAC5C,YAAY,EAAC,iBAAiB,EAAC,MAAM,gBAAgB,CAAC;AAEtD,OAAO,EACL,yBAAyB,EACzB,yBAAyB,GAC1B,MAAM,uBAAuB,CAAC;AAC/B,YAAY,EAAC,yBAAyB,EAAC,MAAM,uBAAuB,CAAC;AACrE,OAAO,EACL,uBAAuB,EACvB,sBAAsB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAC,yBAAyB,EAAC,MAAM,sBAAsB,CAAC;AAEpE,OAAO,EACL,qBAAqB,EACrB,kBAAkB,GACnB,MAAM,yBAAyB,CAAC;AACjC,YAAY,EAAC,0BAA0B,EAAC,MAAM,yBAAyB,CAAC;AAExE,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,gCAAgC,CAAC;AACxC,YAAY,EAAC,iCAAiC,EAAC,MAAM,gCAAgC,CAAC;AAEtF,OAAO,EAAC,WAAW,EAAE,WAAW,EAAC,MAAM,aAAa,CAAC"}

package/dist/index.js

@@ -0,0 +1,28 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Imports RichTextEditor and RichTextView components and their types
+ * @output Public API surface for @blue-patterns/richtext
+ * @position Package entry point (barrel) for @blue-patterns/richtext — the
+ *   Lexical-based rich text editor and viewer, promoted out of
+ *   @blue-patterns/lab so it can be canaried independently.
+ *
+ * Exports only what a caller builds with (spec:AST-061/DEC-8): the generated
+ * editor theme classes and the autolink regular expressions stay internal,
+ * and Lexical's `Transformer` type comes from `@lexical/markdown`.
+ * `publicSurface.test.ts` holds the runtime list.
+ *
+ * SYNC: When modified, update this header, /packages/richtext/README.md,
+ *   /packages/richtext/src/publicSurface.test.ts, and the editor component doc
+ *   files.
+ */
+export { RichTextEditor } from "./RichTextEditor.js";
+export { RichTextView } from "./RichTextView.js";
+export { markdownToEditorStateJSON, editorStateJSONToMarkdown } from "./markdownSerializers.js";
+export { createRichTextExtension, RichTextExtensionError } from "./markdownExtensions.js";
+export { RichTextEditorToolbar, RICHTEXT_ICON_KEYS } from "./RichTextEditorToolbar.js";
+export { RichTextEditorAutoLinkPlugin, DEFAULT_LINK_MATCHERS, NEW_TAB_LINK_ATTRIBUTES } from "./RichTextEditorAutoLinkPlugin.js";
+export { sanitizeUrl, validateUrl } from "./linkUtils.js";

package/dist/internal/CodeBackspacePlugin.d.ts

@@ -0,0 +1,2 @@
+export declare function CodeBackspacePlugin(): null;
+//# sourceMappingURL=CodeBackspacePlugin.d.ts.map

package/dist/internal/CodeBackspacePlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBackspacePlugin.d.ts","sourceRoot":"","sources":["../../src/internal/CodeBackspacePlugin.tsx"],"names":[],"mappings":"AAsEA,wBAAgB,mBAAmB,IAAI,IAAI,CAyB1C"}

package/dist/internal/CodeBackspacePlugin.js

@@ -0,0 +1,70 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file CodeBackspacePlugin.tsx
+ * @input Uses @lexical/react (composer context), @lexical/code (CodeNode), and
+ *   lexical.
+ * @output Exports CodeBackspacePlugin, which makes Backspace at the very start
+ *   of a code block turn the block into a paragraph holding its lines.
+ * @position Rendered by RichTextEditor; always on, not exported. Lexical's
+ *   own Backspace there merges the code into the block above, and a heading
+ *   above reads back as a longer heading and a stray paragraph.
+ */
+import { useEffect } from 'react';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { $isCodeNode } from '@lexical/code';
+import { $createLineBreakNode, $createParagraphNode, $createTextNode, $getSelection, $isRangeSelection, COMMAND_PRIORITY_LOW, DELETE_CHARACTER_COMMAND } from 'lexical';
+
+/** Start is offset 0 of the block or of its first child, not the start of a later line. */
+function $codeBlockAtCaretStart() {
+  const selection = $getSelection();
+  if (!$isRangeSelection(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) {
+    return null;
+  }
+  const node = selection.anchor.getNode();
+  const code = $isCodeNode(node) ? node : node.getParent();
+  if (!$isCodeNode(code)) {
+    return null;
+  }
+  return node.is(code) || node.is(code.getFirstChild()) ? code : null;
+}
+
+/**
+ * A newline inside text exports as a soft break, and the lines read back as
+ * one. A line break node exports as a hard break. Empty lines at the end of
+ * the code are dropped: a hard break that ends a paragraph reads back as a
+ * literal backslash.
+ */
+function $paragraphOfLines(code) {
+  const paragraph = $createParagraphNode();
+  code.getTextContent().replace(/\n+$/, '').split('\n').forEach((line, index) => {
+    if (index > 0) {
+      paragraph.append($createLineBreakNode());
+    }
+    if (line !== '') {
+      paragraph.append($createTextNode(line));
+    }
+  });
+  return paragraph;
+}
+export function CodeBackspacePlugin() {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => editor.registerCommand(DELETE_CHARACTER_COMMAND, isBackward => {
+    if (!isBackward || !editor.isEditable()) {
+      return false;
+    }
+    const code = $codeBlockAtCaretStart();
+    if (code == null) {
+      return false;
+    }
+    const paragraph = $paragraphOfLines(code);
+    code.replace(paragraph);
+    paragraph.selectStart();
+    return true;
+  },
+  // Ahead of the rich-text deletion, which would do the merge.
+  COMMAND_PRIORITY_LOW), [editor]);
+  return null;
+}

package/dist/internal/CodeBlockHeaderPlugin.d.ts

@@ -0,0 +1,11 @@
+import { type JSX } from 'react';
+import type { CodeLanguage } from '@blue-patterns/core/CodeBlock';
+/**
+ * Draws a header over each top-level code block and keeps it there as the
+ * document, the editor's size, or the window changes.
+ */
+export declare function CodeBlockHeaderPlugin({ codeLanguages, }?: {
+    /** Language values a fence may name; a matched fence shows the value's name. */
+    codeLanguages?: ReadonlyArray<CodeLanguage>;
+}): JSX.Element;
+//# sourceMappingURL=CodeBlockHeaderPlugin.d.ts.map

package/dist/internal/CodeBlockHeaderPlugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeBlockHeaderPlugin.d.ts","sourceRoot":"","sources":["../../src/internal/CodeBlockHeaderPlugin.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAsB,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AAQpD,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,+BAA+B,CAAC;AA4JhE;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,aAAa,GACd,GAAE;IACD,gFAAgF;IAChF,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;CACxC,GAAG,GAAG,CAAC,OAAO,CAyFnB"}