fix: video parsing and export for markdown (#1955)

Author: Hector-Zhuang

packages/core/package.json

@@ -113,6 +113,7 @@
     "remark-rehype": "^11.1.2",
     "remark-stringify": "^11.0.0",
     "unified": "^11.0.5",
+    "unist-util-visit": "^5.0.0",
     "uuid": "^8.3.2",
     "y-prosemirror": "^1.3.7",
     "y-protocols": "^1.0.6",

packages/core/src/api/exporters/markdown/markdownExporter.ts

@@ -13,13 +13,15 @@ import {
   StyleSchema,
 } from "../../../schema/index.js";
 import { createExternalHTMLExporter } from "../html/externalHTMLExporter.js";
-import { removeUnderlines } from "./removeUnderlinesRehypePlugin.js";
+import { removeUnderlines } from "./util/removeUnderlinesRehypePlugin.js";
 import { addSpacesToCheckboxes } from "./util/addSpacesToCheckboxesRehypePlugin.js";
+import { convertVideoToMarkdown } from "./util/convertVideoToMarkdownRehypePlugin.js";
 
 // Needs to be sync because it's used in drag handler event (SideMenuPlugin)
 export function cleanHTMLToMarkdown(cleanHTMLString: string) {
   const markdownString = unified()
     .use(rehypeParse, { fragment: true })
+    .use(convertVideoToMarkdown)
     .use(removeUnderlines)
     .use(addSpacesToCheckboxes)
     .use(rehypeRemark)

packages/core/src/api/exporters/markdown/util/convertVideoToMarkdownRehypePlugin.ts

@@ -0,0 +1,19 @@
+import { Parent as HASTParent } from "hast";
+import { visit } from "unist-util-visit";
+
+// Originally, rehypeParse parses videos as links, which is incorrect.
+export function convertVideoToMarkdown() {
+  return (tree: HASTParent) => {
+    visit(tree, "element", (node, index, parent) => {
+      if (parent && node.tagName === "video") {
+        const src = node.properties?.src || node.properties?.["data-url"] || "";
+        const name =
+          node.properties?.title || node.properties?.["data-name"] || "";
+        parent.children[index!] = {
+          type: "text",
+          value: `![${name}](${src})`,
+        };
+      }
+    });
+  };
+}

packages/core/src/api/exporters/markdown/removeUnderlinesRehypePlugin.ts renamed to packages/core/src/api/exporters/markdown/util/removeUnderlinesRehypePlugin.ts

@@ -14,6 +14,7 @@ import {
   StyleSchema,
 } from "../../../schema/index.js";
 import { HTMLToBlocks } from "../html/parseHTML.js";
+import { isVideoUrl } from "../../../util/string.js";
 
 // modified version of https://github.com/syntax-tree/mdast-util-to-hast/blob/main/lib/handlers/code.js
 // that outputs a data-language attribute instead of a CSS class (e.g.: language-typescript)
@@ -54,13 +55,43 @@ function code(state: any, node: any) {
   return result;
 }
 
+function video(state: any, node: any) {
+  const url = String(node?.url || "");
+  const title = node?.title ? String(node.title) : undefined;
+
+  let result: any = {
+    type: "element",
+    tagName: "video",
+    properties: {
+      src: url,
+      "data-name": title,
+      "data-url": url,
+      controls: true,
+    },
+    children: [],
+  };
+  state.patch?.(node, result);
+  result = state.applyData ? state.applyData(node, result) : result;
+
+  return result;
+}
+
 export function markdownToHTML(markdown: string): string {
   const htmlString = unified()
     .use(remarkParse)
     .use(remarkGfm)
     .use(remarkRehype, {
       handlers: {
         ...(remarkRehypeDefaultHandlers as any),
+        image: (state: any, node: any) => {
+          const url = String(node?.url || "");
+
+          if (isVideoUrl(url)) {
+            return video(state, node);
+          } else {
+            return remarkRehypeDefaultHandlers.image(state, node);
+          }
+        },
         code,
       },
     })

packages/core/src/api/parsers/markdown/parseMarkdown.ts

@@ -13,3 +13,24 @@ export function filenameFromURL(url: string): string {
   }
   return parts[parts.length - 1];
 }
+
+export function isVideoUrl(url: string) {
+  const videoExtensions = [
+    "mp4",
+    "webm",
+    "ogg",
+    "mov",
+    "mkv",
+    "flv",
+    "avi",
+    "wmv",
+    "m4v",
+  ];
+  try {
+    const pathname = new URL(url).pathname;
+    const ext = pathname.split(".").pop()?.toLowerCase() || "";
+    return videoExtensions.includes(ext);
+  } catch (_) {
+    return false;
+  }
+}

packages/core/src/util/string.ts

@@ -0,0 +1,23 @@
+<div class="bn-block-group" data-node-type="blockGroup">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+    <div class="bn-block" data-node-type="blockContainer" data-id="1">
+      <div
+        class="bn-block-content"
+        data-content-type="image"
+        data-url="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+        data-file-block=""
+      >
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
+          <div class="bn-visual-media-wrapper">
+            <img
+              class="bn-visual-media"
+              src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+              alt="BlockNote image"
+              draggable="false"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

pnpm-lock.yaml

@@ -0,0 +1,24 @@
+<div class="bn-block-group" data-node-type="blockGroup">
+  <div class="bn-block-outer" data-node-type="blockOuter" data-id="1">
+    <div class="bn-block" data-node-type="blockContainer" data-id="1">
+      <div
+        class="bn-block-content"
+        data-content-type="video"
+        data-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+        data-file-block=""
+      >
+        <div class="bn-file-block-content-wrapper" style="position: relative;">
+          <div class="bn-visual-media-wrapper">
+            <video
+              class="bn-visual-media"
+              src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+              controls=""
+              draggable="false"
+              width="0"
+            ></video>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

tests/src/unit/core/formatConversion/export/__snapshots__/blocknoteHTML/image.html

@@ -0,0 +1,5 @@
+<img
+  src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+  alt="BlockNote image"
+  data-url="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+ />