Merge branch 'main' into new-releases

Author: matthewlipski

.eslintrc.js

@@ -1,7 +1,13 @@
 module.exports = {
   root: true,
-  extends: ["react-app", "react-app/jest"],
-  plugins: ["import"],
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "react-app",
+    "react-app/jest",
+  ],
+  parser: "@typescript-eslint/parser",
+  plugins: ["import", "@typescript-eslint"],
   rules: {
     curly: 1,
     "import/no-extraneous-dependencies": [
@@ -13,5 +19,8 @@ module.exports = {
         bundledDependencies: false,
       },
     ],
+    // would be nice to enable these rules later, but they are too noisy right now
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
   },
 };

examples/vanilla/src/ui/addHyperlinkToolbar.ts

@@ -12,8 +12,8 @@ export const addHyperlinkToolbar = (editor: BlockNoteEditor) => {
       element.style.padding = "10px";
       element.style.opacity = "0.8";
 
-      let url = hyperlinkToolbarState.url;
-      let text = hyperlinkToolbarState.text;
+      const url = hyperlinkToolbarState.url;
+      const text = hyperlinkToolbarState.text;
 
       const editBtn = createButton("edit", () => {
         const newUrl = prompt("new url") || url;

package-lock.json

@@ -13,7 +13,9 @@
     "eslint-config-react-app": "^7.0.0",
     "lerna": "^5.4.0",
     "patch-package": "^6.4.7",
-    "typescript": "^5.0.4"
+    "typescript": "^5.0.4",
+    "@typescript-eslint/parser": "^5.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.5.0"
   },
   "scripts": {
     "start": "lerna run --stream --scope @blocknote/example-editor dev",

package.json

@@ -353,7 +353,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
    */
   public forEachBlock(
     callback: (block: Block<BSchema>) => boolean,
-    reverse: boolean = false
+    reverse = false
   ): void {
     const blocks = this.topLevelBlocks.slice();
 
@@ -692,7 +692,7 @@ export class BlockNoteEditor<BSchema extends BlockSchema = DefaultBlockSchema> {
       return;
     }
 
-    let { from, to } = this._tiptapEditor.state.selection;
+    const { from, to } = this._tiptapEditor.state.selection;
 
     if (!text) {
       text = this._tiptapEditor.state.doc.textBetween(from, to);

packages/core/src/BlockNoteEditor.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/BlockNoteExtensions.ts

@@ -24,7 +24,7 @@ let insert: (
 ) => Block<DefaultBlockSchema>[];
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 
@@ -80,7 +80,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Inserting Blocks with Different Placements", () => {

packages/core/src/api/blockManipulation/blockManipulation.test.ts

@@ -107,7 +107,7 @@ export function removeBlocks(
   });
 
   if (idsOfBlocksToRemove.size > 0) {
-    let notFoundIds = [...idsOfBlocksToRemove].join("\n");
+    const notFoundIds = [...idsOfBlocksToRemove].join("\n");
 
     throw Error(
       "Blocks with the following IDs could not be found in the editor: " +

packages/core/src/api/blockManipulation/blockManipulation.ts

@@ -579,7 +579,7 @@ function removeInlineContentClass(html: string) {
 }
 
 beforeEach(() => {
-  (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS = {};
+  (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {};
 
   editor = new BlockNoteEditor();
 });
@@ -588,7 +588,7 @@ afterEach(() => {
   editor._tiptapEditor.destroy();
   editor = undefined as any;
 
-  delete (window as Window & { __TEST_OPTIONS?: {} }).__TEST_OPTIONS;
+  delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS;
 });
 
 describe("Non-Nested Block/HTML/Markdown Conversions", () => {

packages/core/src/api/formatConversions/formatConversions.test.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);