feat: mermaid diagram integration (#202)

packages/editor-ext/src/index.ts

@@ -10,3 +10,5 @@ export * from "./lib/callout";
 export * from "./lib/media-utils";
 export * from "./lib/link";
 export * from "./lib/selection";
+export * from "./lib/custom-code-block"
+

packages/editor-ext/src/lib/custom-code-block.ts

@@ -0,0 +1,25 @@
+import CodeBlockLowlight, {
+  CodeBlockLowlightOptions,
+} from "@tiptap/extension-code-block-lowlight";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+
+export interface CustomCodeBlockOptions extends CodeBlockLowlightOptions {
+  view: any;
+}
+
+export const CustomCodeBlock = CodeBlockLowlight.extend<CustomCodeBlockOptions>(
+  {
+    selectable: true,
+
+    addOptions() {
+      return {
+        ...this.parent?.(),
+        view: null,
+      };
+    },
+
+    addNodeView() {
+      return ReactNodeViewRenderer(this.options.view);
+    },
+  },
+);