@brett_lamy/docstream-editor 0.3.1 → 0.3.3

package/README.md

@@ -172,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.1",
+  "version": "0.3.3",
   "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"
   },
@@ -39,5 +39,18 @@
   "repository": {
     "type": "git",
     "url": "git+https://github.com/BLamy/docstream-editor.git"
+  },
+  "devDependencies": {
+    "@tiptap/core": "^3.26.1",
+    "@tiptap/extension-code-block-lowlight": "^3.26.1",
+    "@tiptap/extension-list": "^3.26.1",
+    "@tiptap/extension-placeholder": "^3.26.1",
+    "@tiptap/extension-table": "^3.26.1",
+    "@tiptap/pm": "^3.26.1",
+    "@tiptap/react": "^3.26.1",
+    "@tiptap/starter-kit": "^3.26.1",
+    "@tiptap/suggestion": "^3.26.1",
+    "react": "^19",
+    "react-dom": "^19"
   }
 }

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]" }]

package/src/styles.css

@@ -559,9 +559,9 @@
 
 .gb-react-demo-editor {
   overflow: hidden;
-  border: 1px solid var(--gb-border, var(--border));
+  border: 1px solid var(--gb-border, var(--border, #e4e4e7));
   border-radius: 12px;
-  background: var(--gb-panel, var(--card));
+  background: var(--gb-panel, var(--card, #ffffff));
 }
 .gb-react-demo-editor-source {
   display: grid;
@@ -569,8 +569,8 @@
   min-height: 260px;
 }
 .gb-react-demo-files {
-  border-right: 1px solid var(--gb-border, var(--border));
-  background: var(--gb-muted, var(--muted));
+  border-right: 1px solid var(--gb-border, var(--border, #e4e4e7));
+  background: var(--gb-muted, var(--muted, #f4f4f5));
 }
 .gb-react-demo-files-header,
 .gb-react-demo-editor-toolbar {
@@ -579,19 +579,19 @@
   gap: 8px;
   min-height: 40px;
   padding: 8px 10px;
-  border-bottom: 1px solid var(--gb-border, var(--border));
+  border-bottom: 1px solid var(--gb-border, var(--border, #e4e4e7));
   font-size: 12px;
 }
 .gb-react-demo-files-header svg {
   margin-left: auto;
-  color: var(--gb-muted-foreground, var(--muted-foreground));
+  color: var(--gb-muted-foreground, var(--muted-foreground, #71717a));
 }
 .gb-react-demo-file {
   display: block;
   width: 100%;
   padding: 8px 10px;
   overflow: hidden;
-  color: var(--gb-muted-foreground, var(--muted-foreground));
+  color: var(--gb-muted-foreground, var(--muted-foreground, #71717a));
   font-family: ui-monospace, Menlo, monospace;
   font-size: 11px;
   text-align: left;
@@ -599,8 +599,8 @@
   white-space: nowrap;
 }
 .gb-react-demo-file-active {
-  color: var(--gb-panel-foreground, var(--foreground));
-  background: var(--gb-panel, var(--card));
+  color: var(--gb-panel-foreground, var(--foreground, #18181b));
+  background: var(--gb-panel, var(--card, #ffffff));
 }
 .gb-react-demo-editor-pane {
   display: flex;
@@ -609,7 +609,7 @@
 }
 .gb-react-demo-editor-toolbar code {
   overflow: hidden;
-  color: var(--gb-muted-foreground, var(--muted-foreground));
+  color: var(--gb-muted-foreground, var(--muted-foreground, #71717a));
   text-overflow: ellipsis;
   white-space: nowrap;
 }
@@ -618,10 +618,10 @@
   align-items: center;
   gap: 5px;
   margin-left: auto;
-  border: 1px solid var(--gb-border, var(--border));
+  border: 1px solid var(--gb-border, var(--border, #e4e4e7));
   border-radius: 6px;
   padding: 4px 8px;
-  color: var(--gb-panel-foreground, var(--foreground));
+  color: var(--gb-panel-foreground, var(--foreground, #18181b));
   font-size: 11px;
 }
 .gb-react-demo-preview-button:disabled { opacity: 0.5; }
@@ -633,15 +633,15 @@
   border: 0;
   padding: 14px;
   outline: none;
-  color: var(--gb-panel-foreground, var(--foreground));
-  background: var(--gb-panel, var(--card));
+  color: var(--gb-panel-foreground, var(--foreground, #18181b));
+  background: var(--gb-panel, var(--card, #ffffff));
   font-family: ui-monospace, Menlo, monospace;
   font-size: 12px;
   line-height: 1.6;
 }
 .gb-react-demo-editor-empty {
   padding: 18px;
-  color: var(--gb-muted-foreground, var(--muted-foreground));
+  color: var(--gb-muted-foreground, var(--muted-foreground, #71717a));
   font-size: 12px;
   text-align: center;
 }
@@ -651,7 +651,7 @@
     display: flex;
     overflow-x: auto;
     border-right: 0;
-    border-bottom: 1px solid var(--gb-border, var(--border));
+    border-bottom: 1px solid var(--gb-border, var(--border, #e4e4e7));
   }
   .gb-react-demo-files-header { flex: 0 0 auto; border-bottom: 0; }
   .gb-react-demo-file { width: auto; flex: 0 0 auto; }