@brett_lamy/docstream-editor 0.3.1 → 0.3.2

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.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"
   },

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