@brett_lamy/docstream-editor 1.2.0 → 1.2.2

package/README.md

@@ -15,7 +15,8 @@ TipTap editor components for Docstream GitBook-style markdown documents.
 - Preserves Docstream/GitBook block semantics when converting back to markdown.
 - Copy a docs page (docstream's "Copy page") and paste it in: the editor shows the same page and
   serializes it back byte-for-byte — demos with their inline files, install command boxes, titled
-  tab sets and all.
+  tab sets and all. Inline code may combine with links, bold, italic and strike
+  (``[`@brett_lamy/ui`](url)``, ``**bold `x` text**``); the editor's `GbCode` mark allows it.
 - Preserves mounted source-file/export provenance and can write edits to the real file through Vite.
 
 ## Installation
@@ -24,7 +25,7 @@ TipTap editor components for Docstream GitBook-style markdown documents.
 npm install @brett_lamy/docstream-editor @brett_lamy/docstream react
 ```
 
-React is a peer dependency. `@brett_lamy/docstream` is a runtime dependency because the editor uses the same parser, serializer, OpenAPI rendering, and asset helpers.
+React and the TipTap packages (including `@tiptap/extension-code`) are peer dependencies. `@brett_lamy/docstream` is a runtime dependency because the editor uses the same parser, serializer, OpenAPI rendering, and asset helpers.
 
 ## Basic Setup
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream-editor",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "TipTap editor for Docstream GitBook-style markdown documents.",
   "type": "module",
   "scripts": {
@@ -34,12 +34,13 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@brett_lamy/docstream": "1.2.1",
+    "@brett_lamy/docstream": "1.2.2",
     "gpu-lexer": "0.0.2",
     "lucide-react": "^1.17.0"
   },
   "peerDependencies": {
     "@tiptap/core": "^3.26.1",
+    "@tiptap/extension-code": "^3.26.1",
     "@tiptap/extension-code-block": "^3.26.1",
     "@tiptap/extension-list": "^3.26.1",
     "@tiptap/extension-placeholder": "^3.26.1",
@@ -57,6 +58,7 @@
   "devDependencies": {
     "@agent-wasm/core": "^0.4.0",
     "@tiptap/core": "^3.26.1",
+    "@tiptap/extension-code": "^3.26.1",
     "@tiptap/extension-code-block": "^3.26.1",
     "@tiptap/extension-list": "^3.26.1",
     "@tiptap/extension-placeholder": "^3.26.1",

package/src/editor/convert.ts

@@ -99,6 +99,7 @@ function blockToPM(b: Block): PMNode {
           language: b.language,
           title: b.title,
           lineNumbers: b.lineNumbers,
+          lineNumbersExplicit: b.lineNumbersExplicit ? true : null,
           live: !!b.live,
           entry: b.entry ?? null,
           collapsedCodeLines: b.collapsedCodeLines ?? null,
@@ -188,6 +189,11 @@ function blockToPM(b: Block): PMNode {
           variants: b.variants?.length ? b.variants.map((v) => ({ id: v.id, label: v.label })) : null,
           viewport: b.viewport ?? null,
           entry: b.entry ?? null,
+          status: b.status ?? null,
+          bleed: b.bleed ?? null,
+          className: b.className ?? null,
+          surface: b.surface ?? null,
+          variantsWidth: b.variantsWidth ?? null,
           files: b.files?.length ? b.files.map((f) => ({ ...f })) : null,
         },
       }
@@ -344,6 +350,7 @@ function pmToBlock(n: PMNode): Block | null {
         language: (n.attrs?.language as string) || null,
         title: (n.attrs?.title as string) || null,
         lineNumbers: !!n.attrs?.lineNumbers,
+        ...(n.attrs?.lineNumbersExplicit ? { lineNumbersExplicit: true } : {}),
         live: !!n.attrs?.live,
         entry: (n.attrs?.entry as string) || null,
         ...(collapsed ? { collapsedCodeLines: collapsed } : {}),
@@ -504,6 +511,7 @@ export function pmToDemo(a: Record<string, unknown>): DemoNode {
   const layout = String(a.layout ?? "")
   const files = pmDemoFiles(a.files)
   const viewport = String(a.viewport ?? "")
+  const bleed = a.bleed === true || a.bleed === "true" ? true : a.bleed === false || a.bleed === "false" ? false : undefined
   return {
     type: "demo",
     src: String(a.src ?? ""),
@@ -514,6 +522,11 @@ export function pmToDemo(a: Record<string, unknown>): DemoNode {
     ...(variants.length ? { variants } : {}),
     ...(DEMO_VIEWPORTS.includes(viewport) ? { viewport: viewport as DemoViewport } : {}),
     ...(a.entry ? { entry: String(a.entry) } : {}),
+    ...(a.status ? { status: String(a.status) } : {}),
+    ...(bleed === undefined ? {} : { bleed }),
+    ...(a.className ? { className: String(a.className) } : {}),
+    ...(a.surface ? { surface: String(a.surface) } : {}),
+    ...(a.variantsWidth ? { variantsWidth: String(a.variantsWidth) } : {}),
     ...(files.length ? { files } : {}),
   }
 }

package/src/editor/extensions.ts

@@ -1,4 +1,5 @@
 import StarterKit from "@tiptap/starter-kit"
+import Code from "@tiptap/extension-code"
 import Placeholder from "@tiptap/extension-placeholder"
 import { TaskItem, TaskList } from "@tiptap/extension-list"
 import { Table, TableCell, TableHeader, TableRow } from "@tiptap/extension-table"
@@ -15,6 +16,18 @@ export const GbTable = Table.extend({
   },
 })
 
+/**
+ * Inline code that coexists with link, bold, italic and strike. TipTap's code mark
+ * excludes every other mark (`excludes: "_"`), so Markdown such as
+ * ``[`@brett_lamy/ui`](url)`` or ``**bold `x` text**`` — which docstream parses into one
+ * text run with both marks — failed the schema ("Invalid collection of marks for node
+ * text: link,code") and dropped the whole paste. Docstream serializes every combination
+ * back byte-for-byte.
+ */
+export const GbCode = Code.extend({
+  excludes: "",
+})
+
 /**
  * `inner` on the link mark: the link sits inside its emphasis (`**[x](url)**`)
  * rather than around it (`[**x**](url)`). Kept so pasted Markdown round-trips
@@ -84,8 +97,10 @@ export function createGitbookExtensions(options: GitbookExtensionOptions = {}):
   const list: AnyExtension[] = [
     StarterKit.configure({
       codeBlock: false,
+      code: false,
       ...(disableHistory ? { undoRedo: false } : {}),
     }),
+    GbCode,
     GbCodeBlock,
     TaskList,
     TaskItem.configure({ nested: true }),

package/src/editor/nodes.tsx

@@ -707,6 +707,16 @@ function DemoFilesEditor({ files, entry, onChange }: {
   )
 }
 
+/** A string attribute carried as `data-<name>` in the editor's HTML (clipboard between editors). */
+function dataAttr(key: string, name = key) {
+  return {
+    default: null,
+    parseHTML: (element: HTMLElement) => element.getAttribute(`data-${name}`),
+    renderHTML: (attributes: Record<string, unknown>) =>
+      attributes[key] ? { [`data-${name}`]: String(attributes[key]) } : {},
+  }
+}
+
 function DemoView({ node, updateAttributes, editor }: NodeViewProps) {
   const editable = editor.isEditable
   const { demoResolver, demoRuntime, demoDependencies } = useEditorRuntime()
@@ -769,6 +779,11 @@ function DemoView({ node, updateAttributes, editor }: NodeViewProps) {
             viewport={demo.viewport}
             files={files}
             entry={entry}
+            status={demo.status}
+            bleed={demo.bleed}
+            canvasClassName={demo.className}
+            surface={demo.surface}
+            variantsWidth={demo.variantsWidth}
             {...(demoRuntime ? { runtime: demoRuntime } : {})}
             {...(demoDependencies ? { dependencies: demoDependencies } : {})}
           />
@@ -796,6 +811,21 @@ export const GbDemo = Node.create({
       variants: { default: null, rendered: false },
       viewport: { default: null },
       entry: { default: null },
+      // Look (`status="Live" bleed="true" className="…" surface="…" variantsWidth="220"`),
+      // kept verbatim; the tag's values win over the resolver's meta.json.
+      status: dataAttr("status"),
+      bleed: {
+        default: null,
+        parseHTML: (element: HTMLElement) => {
+          const raw = element.getAttribute("data-bleed")
+          return raw === null ? null : raw !== "false"
+        },
+        renderHTML: (attributes: Record<string, unknown>) =>
+          typeof attributes.bleed === "boolean" ? { "data-bleed": String(attributes.bleed) } : {},
+      },
+      className: dataAttr("className", "canvas-class"),
+      surface: dataAttr("surface"),
+      variantsWidth: dataAttr("variantsWidth", "variants-width"),
       // `{ path, content, language? }[]` — the files between `{% demo %}` and `{% enddemo %}`.
       files: {
         default: null,
@@ -1115,6 +1145,8 @@ export const GbCodeBlock = CodeBlock.extend({
       ...this.parent?.(),
       title: { default: null },
       lineNumbers: { default: false },
+      // The source wrote `lineNumbers="…"` explicitly: kept so the fence round-trips byte-for-byte.
+      lineNumbersExplicit: { default: null, rendered: false },
       live: { default: false },
       entry: { default: null },
       collapsedCodeLines: { default: null, rendered: false },

package/src/index.ts

@@ -5,7 +5,7 @@ export type { PMNode } from "./editor/convert"
 
 // Building blocks for composing a custom editor (e.g. with Yjs collaboration
 // or a bespoke slash menu) instead of the batteries-included GitbookEditor.
-export { createGitbookExtensions, getGitbookSchema, GbTable, GbLinkInner } from "./editor/extensions"
+export { createGitbookExtensions, getGitbookSchema, GbCode, GbTable, GbLinkInner } from "./editor/extensions"
 export type { GitbookExtensionOptions, ReferenceSources } from "./editor/extensions"
 export { gitbookNodes, GbCodeBlock, GbCommand, GbDemo, GbReference } from "./editor/nodes"
 export { GbAttachment, formatBytes } from "./editor/attachments"