[COMMS-1059] Enable diagrams support in BlockNote on documents

extensions/op-blocknote-hocuspocus/package.json

@@ -32,6 +32,7 @@
   },
   "devDependencies": {
     "@blocknote/core": "^0.55.0",
+    "@blocknote/diagram-block": "^0.55.0",
     "@blocknote/math-block": "^0.55.0",
     "@eslint/js": "^10.0.1",
     "@eslint/json": "^2.1.1",
@@ -50,6 +51,9 @@
   "overrides": {
     "@blocknote/math-block": {
       "katex": "^0.18.11"
+    },
+    "mermaid": {
+      "katex": "^0.18.11"
     }
   },
   "allowScripts": {

extensions/op-blocknote-hocuspocus/src/diagramSpec.ts

@@ -0,0 +1,44 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { createBlockSpec } from "@blocknote/core";
+
+export const diagramStaticSpec = createBlockSpec(
+  { type: "diagram", propSchema: {}, content: "plain" },
+  {
+    meta: { code: true, defining: true, isolating: false },
+    render: () => {
+      const pre = document.createElement("pre");
+      const code = document.createElement("code");
+      code.className = "language-mermaid";
+      code.dataset.language = "mermaid";
+      pre.append(code);
+
+      return { dom: pre, contentDOM: code };
+    },
+  },
+);

extensions/op-blocknote-hocuspocus/src/extensions/openProjectApi.ts

@@ -35,6 +35,7 @@ import {
 } from "@openproject/op-blocknote-extensions/server";
 import * as Y from "yjs";
 import { TokenExpired, TokenExpiryMissing, unauthorized } from "../closeEvents";
+import { diagramStaticSpec } from "../diagramSpec";
 import { mathBlockStaticSpec, mathInlineStaticSpec } from "../mathSpecs";
 import { decryptAndValidateToken } from "../services/tokenValidationService";
 import type { ApiResponseDocument } from "../types";
@@ -44,6 +45,7 @@ export const editorSchema = BlockNoteSchema.create().extend({
   blockSpecs: {
     openProjectWorkPackageBlock: openProjectWorkPackageStaticBlockSpec(),
     mathBlock: mathBlockStaticSpec(),
+    diagram: diagramStaticSpec(),
   },
   inlineContentSpecs: {
     openProjectWorkPackageInline: openProjectWorkPackageStaticInlineSpec,

extensions/op-blocknote-hocuspocus/test/extensions/diagram.test.ts

@@ -0,0 +1,50 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import { createDiagramBlockConfig, createReactDiagramBlockSpec } from "@blocknote/diagram-block";
+import { describe, expect, test } from "vitest";
+import { diagramStaticSpec } from "../../src/diagramSpec";
+import { storedMarkdown } from "../helpers/storedMarkdown";
+
+describe("diagram", () => {
+  test("stores a diagram as a mermaid code block", async () => {
+    const markdown = await storedMarkdown([
+      { type: "diagram", content: "graph TD\n    A[Start] --> B[Stop]" },
+    ]);
+
+    expect(markdown).toBe("```mermaid\ngraph TD\n    A[Start] --> B[Stop]\n```\n");
+  });
+});
+
+describe("diagram spec", () => {
+  test("matches the diagram block of @blocknote/diagram-block", () => {
+    const { code, defining, isolating } = createReactDiagramBlockSpec().implementation.meta ?? {};
+
+    expect(diagramStaticSpec().config).toEqual(createDiagramBlockConfig());
+    expect(diagramStaticSpec().implementation.meta).toEqual({ code, defining, isolating });
+  });
+});

extensions/op-blocknote-hocuspocus/test/extensions/math.test.ts

@@ -32,17 +32,8 @@ import {
   mathInlineContentConfig,
 } from "@blocknote/math-block";
 import { describe, expect, test } from "vitest";
-import * as Y from "yjs";
-import { createEditor } from "../../src/extensions/openProjectApi";
 import { mathBlockStaticSpec, mathInlineStaticSpec } from "../../src/mathSpecs";
-
-async function storedMarkdown(blocks:unknown[]) {
-  const editor = createEditor();
-  const fragment = new Y.Doc().getXmlFragment("document-store");
-  // @ts-expect-error BlockNote types are complicated
-  editor.blocksToYXmlFragment(blocks, fragment);
-  return editor.blocksToMarkdownLossy(editor.yXmlFragmentToBlocks(fragment));
-}
+import { storedMarkdown } from "../helpers/storedMarkdown";
 
 describe("math", () => {
   test("stores a math block as a $$ block", async () => {

extensions/op-blocknote-hocuspocus/test/helpers/storedMarkdown.ts

@@ -0,0 +1,38 @@
+//-- copyright
+// OpenProject is an open source project management software.
+// Copyright (C) the OpenProject GmbH
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License version 3.
+//
+// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+// Copyright (C) 2006-2013 Jean-Philippe Lang
+// Copyright (C) 2010-2013 the ChiliProject Team
+//
+// This program is free software; you can redistribute it and/or
+// modify it under the terms of the GNU General Public License
+// as published by the Free Software Foundation; either version 2
+// of the License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+//
+// See COPYRIGHT and LICENSE files for more details.
+//++
+
+import * as Y from "yjs";
+import { createEditor } from "../../src/extensions/openProjectApi";
+
+// The markdown `onStoreDocument` sends, for blocks that went through Yjs like the editor's do.
+export async function storedMarkdown(blocks:unknown[]) {
+  const editor = createEditor();
+  const fragment = new Y.Doc().getXmlFragment("document-store");
+  // @ts-expect-error BlockNote types are complicated
+  editor.blocksToYXmlFragment(blocks, fragment);
+  return editor.blocksToMarkdownLossy(editor.yXmlFragmentToBlocks(fragment));
+}