make collab provider optional and change output of code blocks (#321)

Author: YousefED

packages/core/src/BlockNoteExtensions.ts

@@ -118,32 +118,34 @@ export const getBlockNoteExtensions = <BSchema extends BlockSchema>(opts: {
         fragment: opts.collaboration.fragment,
       })
     );
-    const defaultRender = (user: { color: string; name: string }) => {
-      const cursor = document.createElement("span");
+    if (opts.collaboration.provider?.awareness) {
+      const defaultRender = (user: { color: string; name: string }) => {
+        const cursor = document.createElement("span");
 
-      cursor.classList.add(styles["collaboration-cursor__caret"]);
-      cursor.setAttribute("style", `border-color: ${user.color}`);
+        cursor.classList.add(styles["collaboration-cursor__caret"]);
+        cursor.setAttribute("style", `border-color: ${user.color}`);
 
-      const label = document.createElement("span");
+        const label = document.createElement("span");
 
-      label.classList.add(styles["collaboration-cursor__label"]);
-      label.setAttribute("style", `background-color: ${user.color}`);
-      label.insertBefore(document.createTextNode(user.name), null);
+        label.classList.add(styles["collaboration-cursor__label"]);
+        label.setAttribute("style", `background-color: ${user.color}`);
+        label.insertBefore(document.createTextNode(user.name), null);
 
-      const nonbreakingSpace1 = document.createTextNode("\u2060");
-      const nonbreakingSpace2 = document.createTextNode("\u2060");
-      cursor.insertBefore(nonbreakingSpace1, null);
-      cursor.insertBefore(label, null);
-      cursor.insertBefore(nonbreakingSpace2, null);
-      return cursor;
-    };
-    ret.push(
-      CollaborationCursor.configure({
-        user: opts.collaboration.user,
-        render: opts.collaboration.renderCursor || defaultRender,
-        provider: opts.collaboration.provider,
-      })
-    );
+        const nonbreakingSpace1 = document.createTextNode("\u2060");
+        const nonbreakingSpace2 = document.createTextNode("\u2060");
+        cursor.insertBefore(nonbreakingSpace1, null);
+        cursor.insertBefore(label, null);
+        cursor.insertBefore(nonbreakingSpace2, null);
+        return cursor;
+      };
+      ret.push(
+        CollaborationCursor.configure({
+          user: opts.collaboration.user,
+          render: opts.collaboration.renderCursor || defaultRender,
+          provider: opts.collaboration.provider,
+        })
+      );
+    }
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
     ret.push(History);

packages/core/src/api/formatConversions/formatConversions.ts

@@ -4,7 +4,7 @@ import rehypeRemark from "rehype-remark";
 import rehypeStringify from "rehype-stringify";
 import remarkGfm from "remark-gfm";
 import remarkParse from "remark-parse";
-import remarkRehype from "remark-rehype";
+import remarkRehype, { defaultHandlers } from "remark-rehype";
 import remarkStringify from "remark-stringify";
 import { unified } from "unified";
 import { Block, BlockSchema } from "../../extensions/Blocks/api/blockTypes";
@@ -47,7 +47,7 @@ export async function HTMLToBlocks<BSchema extends BlockSchema>(
   htmlNode.innerHTML = html.trim();
 
   const parser = DOMParser.fromSchema(schema);
-  const parentNode = parser.parse(htmlNode);
+  const parentNode = parser.parse(htmlNode); //, { preserveWhitespace: "full" });
 
   const blocks: Block<BSchema>[] = [];
 
@@ -73,6 +73,45 @@ export async function blocksToMarkdown<BSchema extends BlockSchema>(
   return markdownString.value as string;
 }
 
+// modefied 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)
+function code(state: any, node: any) {
+  const value = node.value ? node.value + "\n" : "";
+  /** @type {Properties} */
+  const properties: any = {};
+
+  if (node.lang) {
+    // changed line
+    properties["data-language"] = node.lang;
+  }
+
+  // Create `<code>`.
+  /** @type {Element} */
+  let result: any = {
+    type: "element",
+    tagName: "code",
+    properties,
+    children: [{ type: "text", value }],
+  };
+
+  if (node.meta) {
+    result.data = { meta: node.meta };
+  }
+
+  state.patch(node, result);
+  result = state.applyData(node, result);
+
+  // Create `<pre>`.
+  result = {
+    type: "element",
+    tagName: "pre",
+    properties: {},
+    children: [result],
+  };
+  state.patch(node, result);
+  return result;
+}
+
 export async function markdownToBlocks<BSchema extends BlockSchema>(
   markdown: string,
   blockSchema: BSchema,
@@ -81,7 +120,12 @@ export async function markdownToBlocks<BSchema extends BlockSchema>(
   const htmlString = await unified()
     .use(remarkParse)
     .use(remarkGfm)
-    .use(remarkRehype)
+    .use(remarkRehype, {
+      handlers: {
+        ...(defaultHandlers as any),
+        code,
+      },
+    })
     .use(rehypeStringify)
     .process(markdown);