Merge branch 'main' into new-release

Author: matthewlipski

examples/01-basic/04-default-blocks/App.tsx

@@ -138,13 +138,5 @@ export default function App() {
   });
 
   // Renders the editor instance using a React component.
-  return (
-    <div
-      style={{
-        height: "50vh",
-        overflow: "scroll",
-      }}>
-      <BlockNoteView editor={editor} />
-    </div>
-  );
+  return <BlockNoteView editor={editor} />;
 }

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

@@ -141,15 +141,17 @@ function updateBlockContentNode<
       content = inlineContentToNodes(
         [block.content],
         state.schema,
-        editor.schema.styleSchema
+        editor.schema.styleSchema,
+        newNodeType.name
       );
     } else if (Array.isArray(block.content)) {
       // Adds a text node with the provided styles converted into marks to the content,
       // for each InlineContent object.
       content = inlineContentToNodes(
         block.content,
         state.schema,
-        editor.schema.styleSchema
+        editor.schema.styleSchema,
+        newNodeType.name
       );
     } else if (block.content.type === "tableContent") {
       content = tableContentToNodes(

packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/external.html

@@ -0,0 +1 @@
+<pre><code class="bn-inline-content language-javascript">const hello = 'world';<br>console.log(hello);<br></code></pre>

packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/internal.html

@@ -0,0 +1,3 @@
+<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="codeBlock"><pre><code class="bn-inline-content language-javascript">const hello = 'world';
+console.log(hello);
+</code></pre></div></div></div></div>

packages/core/src/api/exporters/html/util/serializeBlocksInternalHTML.ts

@@ -21,6 +21,7 @@ export function serializeInlineContentInternalHTML<
   editor: BlockNoteEditor<any, I, S>,
   blockContent: PartialBlock<BSchema, I, S>["content"],
   serializer: DOMSerializer,
+  blockType?: string,
   options?: { document?: Document }
 ) {
   let nodes: any;
@@ -32,13 +33,15 @@ export function serializeInlineContentInternalHTML<
     nodes = inlineContentToNodes(
       [blockContent],
       editor.pmSchema,
-      editor.schema.styleSchema
+      editor.schema.styleSchema,
+      blockType
     );
   } else if (Array.isArray(blockContent)) {
     nodes = inlineContentToNodes(
       blockContent,
       editor.pmSchema,
-      editor.schema.styleSchema
+      editor.schema.styleSchema,
+      blockType
     );
   } else if (blockContent.type === "tableContent") {
     nodes = tableContentToNodes(
@@ -102,6 +105,7 @@ function serializeBlock<
       editor,
       block.content as any, // TODO
       serializer,
+      block.type,
       options
     );
     ret.contentDOM.appendChild(ic);

packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/contains-newlines/markdown.md

@@ -0,0 +1,4 @@
+```javascript
+const hello = 'world';
+console.log(hello);
+```

packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap

@@ -662,6 +662,33 @@ exports[`Test BlockNote-Prosemirror conversion > Case: custom style schema > Con
 }
 `;
 
+exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert codeBlock/contains-newlines to/from prosemirror 1`] = `
+{
+  "attrs": {
+    "backgroundColor": "default",
+    "id": "1",
+    "textColor": "default",
+  },
+  "content": [
+    {
+      "attrs": {
+        "language": "javascript",
+      },
+      "content": [
+        {
+          "text": "const hello = 'world';
+console.log(hello);
+",
+          "type": "text",
+        },
+      ],
+      "type": "codeBlock",
+    },
+  ],
+  "type": "blockContainer",
+}
+`;
+
 exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert codeBlock/defaultLanguage to/from prosemirror 1`] = `
 {
   "attrs": {

packages/core/src/api/nodeConversions/blockToNode.ts

@@ -25,7 +25,8 @@ import { UnreachableCaseError } from "../../util/typescript.js";
 function styledTextToNodes<T extends StyleSchema>(
   styledText: StyledText<T>,
   schema: Schema,
-  styleSchema: T
+  styleSchema: T,
+  blockType?: string
 ): Node[] {
   const marks: Mark[] = [];
 
@@ -44,6 +45,12 @@ function styledTextToNodes<T extends StyleSchema>(
     }
   }
 
+  const parseHardBreaks = !blockType || !schema.nodes[blockType].spec.code;
+
+  if (!parseHardBreaks) {
+    return [schema.text(styledText.text, marks)];
+  }
+
   return (
     styledText.text
       // Splits text & line breaks.
@@ -96,7 +103,8 @@ function linkToNodes(
 function styledTextArrayToNodes<S extends StyleSchema>(
   content: string | StyledText<S>[],
   schema: Schema,
-  styleSchema: S
+  styleSchema: S,
+  blockType?: string
 ): Node[] {
   const nodes: Node[] = [];
 
@@ -105,14 +113,17 @@ function styledTextArrayToNodes<S extends StyleSchema>(
       ...styledTextToNodes(
         { type: "text", text: content, styles: {} },
         schema,
-        styleSchema
+        styleSchema,
+        blockType
       )
     );
     return nodes;
   }
 
   for (const styledText of content) {
-    nodes.push(...styledTextToNodes(styledText, schema, styleSchema));
+    nodes.push(
+      ...styledTextToNodes(styledText, schema, styleSchema, blockType)
+    );
   }
   return nodes;
 }
@@ -126,17 +137,22 @@ export function inlineContentToNodes<
 >(
   blockContent: PartialInlineContent<I, S>,
   schema: Schema,
-  styleSchema: S
+  styleSchema: S,
+  blockType?: string
 ): Node[] {
   const nodes: Node[] = [];
 
   for (const content of blockContent) {
     if (typeof content === "string") {
-      nodes.push(...styledTextArrayToNodes(content, schema, styleSchema));
+      nodes.push(
+        ...styledTextArrayToNodes(content, schema, styleSchema, blockType)
+      );
     } else if (isPartialLinkInlineContent(content)) {
       nodes.push(...linkToNodes(content, schema, styleSchema));
     } else if (isStyledTextInlineContent(content)) {
-      nodes.push(...styledTextArrayToNodes([content], schema, styleSchema));
+      nodes.push(
+        ...styledTextArrayToNodes([content], schema, styleSchema, blockType)
+      );
     } else {
       nodes.push(
         blockOrInlineContentToContentNode(content, schema, styleSchema)
@@ -217,10 +233,20 @@ function blockOrInlineContentToContentNode(
   if (!block.content) {
     contentNode = schema.nodes[type].createChecked(block.props);
   } else if (typeof block.content === "string") {
-    const nodes = inlineContentToNodes([block.content], schema, styleSchema);
+    const nodes = inlineContentToNodes(
+      [block.content],
+      schema,
+      styleSchema,
+      type
+    );
     contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (Array.isArray(block.content)) {
-    const nodes = inlineContentToNodes(block.content, schema, styleSchema);
+    const nodes = inlineContentToNodes(
+      block.content,
+      schema,
+      styleSchema,
+      type
+    );
     contentNode = schema.nodes[type].createChecked(block.props, nodes);
   } else if (block.content.type === "tableContent") {
     const nodes = tableContentToNodes(block.content, schema, styleSchema);

packages/core/src/api/testUtil/cases/defaultSchema.ts

@@ -208,6 +208,15 @@ export const defaultSchemaTestCases: EditorTestCases<
         },
       ],
     },
+    {
+      name: "codeBlock/contains-newlines",
+      blocks: [
+        {
+          type: "codeBlock",
+          content: "const hello = 'world';\nconsole.log(hello);\n",
+        },
+      ],
+    },
     {
       name: "pageBreak/basic",
       blocks: [

packages/core/src/editor/BlockNoteExtensions.ts

@@ -1,17 +1,13 @@
 import { AnyExtension, Extension, extensions } from "@tiptap/core";
-import { Awareness } from "y-protocols/awareness";
-
-import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
-
-import Collaboration from "@tiptap/extension-collaboration";
-import CollaborationCursor from "@tiptap/extension-collaboration-cursor";
 import { Gapcursor } from "@tiptap/extension-gapcursor";
 import { HardBreak } from "@tiptap/extension-hard-break";
 import { History } from "@tiptap/extension-history";
 import { Link } from "@tiptap/extension-link";
 import { Text } from "@tiptap/extension-text";
 import { Plugin } from "prosemirror-state";
 import * as Y from "yjs";
+
+import type { BlockNoteEditor, BlockNoteExtension } from "./BlockNoteEditor.js";
 import { createDropFileExtension } from "../api/clipboard/fromClipboard/fileDropExtension.js";
 import { createPasteFromClipboardExtension } from "../api/clipboard/fromClipboard/pasteExtension.js";
 import { createCopyToClipboardExtension } from "../api/clipboard/toClipboard/copyExtension.js";
@@ -44,6 +40,7 @@ import {
   StyleSchema,
   StyleSpecs,
 } from "../schema/index.js";
+import { createCollaborationExtensions } from "../extensions/Collaboration/createCollaborationExtensions.js";
 
 type ExtensionOptions<
   BSchema extends BlockSchema,
@@ -247,128 +244,7 @@ const getTipTapExtensions = <
   ];
 
   if (opts.collaboration) {
-    tiptapExtensions.push(
-      Collaboration.configure({
-        fragment: opts.collaboration.fragment,
-      })
-    );
-
-    const awareness = opts.collaboration?.provider.awareness as Awareness;
-
-    if (awareness) {
-      const cursors = new Map<
-        number,
-        { element: HTMLElement; hideTimeout: NodeJS.Timeout | undefined }
-      >();
-
-      if (opts.collaboration.showCursorLabels !== "always") {
-        awareness.on(
-          "change",
-          ({
-            updated,
-          }: {
-            added: Array<number>;
-            updated: Array<number>;
-            removed: Array<number>;
-          }) => {
-            for (const clientID of updated) {
-              const cursor = cursors.get(clientID);
-
-              if (cursor) {
-                cursor.element.setAttribute("data-active", "");
-
-                if (cursor.hideTimeout) {
-                  clearTimeout(cursor.hideTimeout);
-                }
-
-                cursors.set(clientID, {
-                  element: cursor.element,
-                  hideTimeout: setTimeout(() => {
-                    cursor.element.removeAttribute("data-active");
-                  }, 2000),
-                });
-              }
-            }
-          }
-        );
-      }
-
-      const createCursor = (clientID: number, name: string, color: string) => {
-        const cursorElement = document.createElement("span");
-
-        cursorElement.classList.add("collaboration-cursor__caret");
-        cursorElement.setAttribute("style", `border-color: ${color}`);
-        if (opts.collaboration?.showCursorLabels === "always") {
-          cursorElement.setAttribute("data-active", "");
-        }
-
-        const labelElement = document.createElement("span");
-
-        labelElement.classList.add("collaboration-cursor__label");
-        labelElement.setAttribute("style", `background-color: ${color}`);
-        labelElement.insertBefore(document.createTextNode(name), null);
-
-        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
-        cursorElement.insertBefore(labelElement, null);
-        cursorElement.insertBefore(document.createTextNode("\u2060"), null); // Non-breaking space
-
-        cursors.set(clientID, {
-          element: cursorElement,
-          hideTimeout: undefined,
-        });
-
-        if (opts.collaboration?.showCursorLabels !== "always") {
-          cursorElement.addEventListener("mouseenter", () => {
-            const cursor = cursors.get(clientID)!;
-            cursor.element.setAttribute("data-active", "");
-
-            if (cursor.hideTimeout) {
-              clearTimeout(cursor.hideTimeout);
-              cursors.set(clientID, {
-                element: cursor.element,
-                hideTimeout: undefined,
-              });
-            }
-          });
-
-          cursorElement.addEventListener("mouseleave", () => {
-            const cursor = cursors.get(clientID)!;
-
-            cursors.set(clientID, {
-              element: cursor.element,
-              hideTimeout: setTimeout(() => {
-                cursor.element.removeAttribute("data-active");
-              }, 2000),
-            });
-          });
-        }
-
-        return cursors.get(clientID)!;
-      };
-
-      const defaultRender = (user: { color: string; name: string }) => {
-        const clientState = [...awareness.getStates().entries()].find(
-          (state) => state[1].user === user
-        );
-
-        if (!clientState) {
-          throw new Error("Could not find client state for user");
-        }
-
-        const clientID = clientState[0];
-
-        return (
-          cursors.get(clientID) || createCursor(clientID, user.name, user.color)
-        ).element;
-      };
-      tiptapExtensions.push(
-        CollaborationCursor.configure({
-          user: opts.collaboration.user,
-          render: opts.collaboration.renderCursor || defaultRender,
-          provider: opts.collaboration.provider,
-        })
-      );
-    }
+    tiptapExtensions.push(...createCollaborationExtensions(opts.collaboration));
   } else {
     // disable history extension when collaboration is enabled as Yjs takes care of undo / redo
     tiptapExtensions.push(History);