Fix Code Block syntax highlighting for imported text (#1388)

* Don't insert hard breaks into Code Blocks

* Add a code block with newlines to the test cases

* Code improvements

* Updated snapshots

* Updated snapshot and small fix

* Re-added accidentally deleted snapshots

---------

Co-authored-by: matthewlipski <[email protected]>

Author: Hansenq

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: [