Fix: video parsing and Markdown export issues

packages/core/package.json

@@ -110,6 +110,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,18 @@
+import { visit } from "unist-util-visit";
+
+// Originally, rehypeParse parses videos as links, which is incorrect.
+export function convertVideoToMarkdown() {
+  return (tree: any) => {
+    visit(tree, "element", (node, index, parent) => {
+      if (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/parsers/markdown/parseMarkdown.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/util/string.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;
+  }
+}

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

@@ -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>

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

@@ -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__/html/image.html

@@ -0,0 +1,4 @@
+<a
+  href="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+  data-url="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
+>https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png</a>

tests/src/unit/core/formatConversion/export/__snapshots__/html/video.html

@@ -0,0 +1,4 @@
+<a
+  href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+  data-url="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"
+>https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm</a>

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/image.md

@@ -0,0 +1 @@
+<https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png>

tests/src/unit/core/formatConversion/export/__snapshots__/markdown/video.md

@@ -0,0 +1 @@
+<https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm>

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/image.json

@@ -0,0 +1,23 @@
+[
+  {
+    "attrs": {
+      "backgroundColor": "default",
+      "id": "1",
+      "textColor": "default",
+    },
+    "content": [
+      {
+        "attrs": {
+          "caption": "",
+          "name": "",
+          "previewWidth": undefined,
+          "showPreview": true,
+          "textAlignment": "left",
+          "url": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+        },
+        "type": "image",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]

tests/src/unit/core/formatConversion/export/__snapshots__/nodes/video.json

@@ -0,0 +1,23 @@
+[
+  {
+    "attrs": {
+      "backgroundColor": "default",
+      "id": "1",
+      "textColor": "default",
+    },
+    "content": [
+      {
+        "attrs": {
+          "caption": "",
+          "name": "",
+          "previewWidth": undefined,
+          "showPreview": true,
+          "textAlignment": "left",
+          "url": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+        },
+        "type": "video",
+      },
+    ],
+    "type": "blockContainer",
+  },
+]

tests/src/unit/core/formatConversion/export/exportTestInstances.ts

@@ -1629,6 +1629,34 @@ export const exportTestInstancesBlockNoteHTML: TestInstance<
     },
     executeTest: testExportBlockNoteHTML,
   },
+  {
+    testCase: {
+      name: "image",
+      content: [
+        {
+          type: "image",
+          props: {
+            url: "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+          },
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
+  {
+    testCase: {
+      name: "video",
+      content: [
+        {
+          type: "video",
+          props: {
+            url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+          },
+        },
+      ],
+    },
+    executeTest: testExportBlockNoteHTML,
+  },
 ];
 
 export const exportTestInstancesHTML: TestInstance<

tests/src/unit/core/formatConversion/parse/__snapshots__/markdown/image.json

@@ -0,0 +1,16 @@
+[
+  {
+    "children": [],
+    "content": undefined,
+    "id": "1",
+    "props": {
+      "backgroundColor": "default",
+      "caption": "",
+      "name": "Image",
+      "showPreview": true,
+      "textAlignment": "left",
+      "url": "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png",
+    },
+    "type": "image",
+  },
+]

tests/src/unit/core/formatConversion/parse/__snapshots__/markdown/video.json

@@ -0,0 +1,16 @@
+[
+  {
+    "children": [],
+    "content": undefined,
+    "id": "1",
+    "props": {
+      "backgroundColor": "default",
+      "caption": "",
+      "name": "",
+      "showPreview": true,
+      "textAlignment": "left",
+      "url": "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",
+    },
+    "type": "video",
+  },
+]

tests/src/unit/core/formatConversion/parse/parseTestInstances.ts

@@ -996,4 +996,18 @@ Regular paragraph`,
     },
     executeTest: testParseMarkdown,
   },
+  {
+    testCase: {
+      name: "image",
+      content: `![Image](https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png)`,
+    },
+    executeTest: testParseMarkdown,
+  },
+  {
+    testCase: {
+      name: "video",
+      content: `![Video](https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm)`,
+    },
+    executeTest: testParseMarkdown,
+  },
 ];