@brett_lamy/docstream-editor 0.3.0 → 0.3.2

package/README.md

@@ -11,8 +11,6 @@ TipTap editor components for Docstream GitBook-style markdown documents.
 - Conversion helpers between the Docstream AST and TipTap JSON.
 - Slash menu for inserting supported blocks.
 - Code block support through `lowlight`.
-- Live React/JSX/TSX code blocks backed by almost-node.
-- `ReactDemoEditor` for editing and running a complete multi-file project.
 - Table, task list, heading, quote, and inline formatting support.
 - Preserves Docstream/GitBook block semantics when converting back to markdown.
 
@@ -102,53 +100,9 @@ The editor supports common ProseMirror/TipTap content plus GitBook-flavored bloc
 - Columns
 - Figures and images
 - OpenAPI operation placeholders
-- Video and public Replay QA previews inside embed blocks
 
 Some blocks are intentionally represented as structured nodes rather than fully bespoke editing controls. They are preserved through parse, edit, and serialize flows so the document can continue to round-trip as GitBook-style markdown.
 
-### Video and Replay QA embeds
-
-Insert an embed block from the slash menu, then enter a direct video URL or a
-public Loop QA project URL. The editor renders video assets through Docstream's
-`VideoEmbed` and converts Loop QA project paths to their chrome-free public
-preview route. The serialized markdown remains portable:
-
-```md
-{% embed url="https://loop-qa.replay.io/projects/project-id/tasks/task-id" /%}
-```
-
-### Live React code
-
-Code blocks can opt into a live preview by setting `live="true"`. The block
-must be a complete entry module (including its `createRoot` call); ordinary
-code snippets remain read-only:
-
-````md
-{% code language="jsx" live="true" entry="/src/main.jsx" %}
-```jsx
-import { createRoot } from "react-dom/client"
-createRoot(document.getElementById("root")).render(<h1>Hello</h1>)
-```
-{% endcode %}
-````
-
-For multi-file demos, use the standalone editor component:
-
-```tsx
-import { ReactDemoEditor } from "@brett_lamy/docstream-editor"
-
-<ReactDemoEditor
-  files={{
-    "/src/main.jsx": mainSource,
-    "/src/App.jsx": appSource,
-  }}
-  entry="/src/main.jsx"
-/>
-```
-
-The host app must install `@agent-wasm/core` and expose its service worker with
-`almostnodePlugin()` from `@agent-wasm/core/vite`.
-
 ## Slash Menu
 
 The editor includes a slash menu extension for inserting supported block structures. Type `/` in an empty paragraph to open block insertion options.
@@ -218,3 +172,9 @@ import { GitbookStreamdown } from "@brett_lamy/docstream"
 
 <GitbookStreamdown markdown={markdown} isStreaming={false} />
 ```
+
+Embed nodes preserve the Docstream media attributes (`title`, `poster`,
+`autoplay`, `loop`, `muted`, and `controls`) when converting between the
+editable TipTap document and GitBook markdown. This makes short, muted,
+autoplaying clips round-trip through the editor without losing their playback
+contract.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brett_lamy/docstream-editor",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "description": "TipTap editor for Docstream GitBook-style markdown documents.",
   "type": "module",
   "main": "./src/index.ts",
@@ -20,7 +20,7 @@
     "./styles.css": "./src/styles.css"
   },
   "dependencies": {
-    "@brett_lamy/docstream": "0.3.0",
+    "@brett_lamy/docstream": "0.3.2",
     "lowlight": "^3.3.0",
     "lucide-react": "^1.17.0"
   },
@@ -35,5 +35,9 @@
     "@tiptap/starter-kit": "^3.26.1",
     "@tiptap/suggestion": "^3.26.1",
     "react": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BLamy/docstream-editor.git"
   }
 }

package/src/editor/convert.ts

@@ -98,8 +98,16 @@ function blockToPM(b: Block): PMNode {
           content: blocksPM(s.children),
         })),
       }
-    case "embed":
-      return { type: "gbEmbed", attrs: { url: b.url } }
+    case "embed": {
+      const attrs: Record<string, string | boolean> = { url: b.url }
+      if (b.title !== undefined) attrs.title = b.title
+      if (b.poster !== undefined) attrs.poster = b.poster
+      if (b.autoplay !== undefined) attrs.autoplay = b.autoplay
+      if (b.loop !== undefined) attrs.loop = b.loop
+      if (b.muted !== undefined) attrs.muted = b.muted
+      if (b.controls !== undefined) attrs.controls = b.controls
+      return { type: "gbEmbed", attrs }
+    }
     case "content-ref":
       return { type: "gbContentRef", attrs: { url: b.url, label: plainText(b.children) } }
     case "columns":
@@ -255,8 +263,19 @@ function pmToBlock(n: PMNode): Block | null {
           children: pmToBlocks(s.content),
         })),
       }
-    case "gbEmbed":
-      return { type: "embed", url: String(n.attrs?.url ?? "") }
+    case "gbEmbed": {
+      const embed: Extract<Block, { type: "embed" }> = {
+        type: "embed",
+        url: String(n.attrs?.url ?? ""),
+      }
+      if (typeof n.attrs?.title === "string") embed.title = n.attrs.title
+      if (typeof n.attrs?.poster === "string") embed.poster = n.attrs.poster
+      if (typeof n.attrs?.autoplay === "boolean") embed.autoplay = n.attrs.autoplay
+      if (typeof n.attrs?.loop === "boolean") embed.loop = n.attrs.loop
+      if (typeof n.attrs?.muted === "boolean") embed.muted = n.attrs.muted
+      if (typeof n.attrs?.controls === "boolean") embed.controls = n.attrs.controls
+      return embed
+    }
     case "gbContentRef":
       return {
         type: "content-ref",

package/src/editor/nodes.tsx

@@ -306,15 +306,34 @@ function isDirectVideo(url: string): boolean {
   return /\.(?:mp4|webm|ogg)(?:[?#]|$)/i.test(url)
 }
 
+function booleanAttribute(value: unknown): boolean | undefined {
+  return typeof value === "boolean" ? value : undefined
+}
+
 function EmbedView({ node, updateAttributes, editor }: NodeViewProps) {
   const url = node.attrs.url as string
   const preview = embedPreview(url)
+  const title = typeof node.attrs.title === "string" && node.attrs.title ? node.attrs.title : url
+  const poster = typeof node.attrs.poster === "string" ? node.attrs.poster : undefined
+  const autoplay = booleanAttribute(node.attrs.autoplay)
+  const loop = booleanAttribute(node.attrs.loop)
+  const muted = booleanAttribute(node.attrs.muted)
+  const controls = booleanAttribute(node.attrs.controls)
   return (
     <NodeViewWrapper className="gb-embed" contentEditable={false}>
       {isReplayQaUrl(url) ? (
         <ReplayPreview source={url} title="Replay preview" />
       ) : preview || isDirectVideo(url) ? (
-        <VideoEmbed src={preview ?? url} className="gb-embed-frame" title={url} />
+        <VideoEmbed
+          src={preview ?? url}
+          className="gb-embed-frame"
+          title={title}
+          {...(autoplay === undefined ? {} : { autoplay })}
+          {...(loop === undefined ? {} : { loop })}
+          {...(muted === undefined ? {} : { muted })}
+          {...(controls === undefined ? {} : { controls })}
+          {...(poster === undefined ? {} : { poster })}
+        />
       ) : (
         <a className="gb-embed-link" href={url} target="_blank" rel="noreferrer">
           <Link2 className="size-4" /> {url || "Embed URL…"}
@@ -337,7 +356,15 @@ export const GbEmbed = Node.create({
   group: "block",
   atom: true,
   addAttributes() {
-    return { url: { default: "" } }
+    return {
+      url: { default: "" },
+      title: { default: null },
+      autoplay: { default: null },
+      loop: { default: null },
+      muted: { default: null },
+      controls: { default: null },
+      poster: { default: null },
+    }
   },
   parseHTML() {
     return [{ tag: "div[data-gb-embed]" }]