feat: Code block (#1177)

* feat: Code block

* fix: Export code block from core

* feat: Customize code block util

* feat: Code block fixes, improvements & tests

* fix: Update snapshots

* fix: Update snapshots (link menu)

* fix: Update snapshots (link menu)

* fix merge mistake

* export customizeCodeBlock

---------

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

Author: areknawo

examples/01-basic/03-all-blocks/App.tsx

@@ -44,6 +44,11 @@ export default function App() {
         type: "checkListItem",
         content: "Check List Item",
       },
+      {
+        type: "codeBlock",
+        props: { language: "javascript" },
+        content: "console.log('Hello, world!');",
+      },
       {
         type: "table",
         content: {

package-lock.json

@@ -97,11 +97,13 @@
     "uuid": "^8.3.2",
     "y-prosemirror": "1.2.12",
     "y-protocols": "^1.0.6",
-    "yjs": "^13.6.15"
+    "yjs": "^13.6.15",
+    "prosemirror-highlight": "^0.9.0",
+    "shiki": "^1.22.0"
   },
   "devDependencies": {
     "@types/emoji-mart": "^3.0.14",
-    "@types/hast": "^2.3.4",
+    "@types/hast": "^3.0.0",
     "@types/uuid": "^8.3.4",
     "eslint": "^8.10.0",
     "jsdom": "^21.1.0",

packages/core/package.json

@@ -1,4 +1,5 @@
 export const acceptedMIMETypes = [
+  "vscode-editor-data",
   "blocknote/html",
   "Files",
   "text/html",

packages/core/src/api/clipboard/fromClipboard/acceptedMIMETypes.ts

@@ -0,0 +1,49 @@
+import { BlockNoteEditor } from "../../../editor/BlockNoteEditor.js";
+import {
+  BlockSchema,
+  InlineContentSchema,
+  StyleSchema,
+} from "../../../schema/index.js";
+
+export async function handleVSCodePaste<
+  BSchema extends BlockSchema,
+  I extends InlineContentSchema,
+  S extends StyleSchema
+>(event: ClipboardEvent, editor: BlockNoteEditor<BSchema, I, S>) {
+  const view = editor.prosemirrorView;
+  const { schema } = view.state;
+
+  if (!event.clipboardData) {
+    return false;
+  }
+
+  const text = event.clipboardData!.getData("text/plain");
+  const vscode = event.clipboardData!.getData("vscode-editor-data");
+  const vscodeData = vscode ? JSON.parse(vscode) : undefined;
+  const language = vscodeData?.mode;
+
+  if (!text) {
+    return false;
+  }
+
+  if (!schema.nodes.codeBlock) {
+    view.pasteText(text);
+
+    return true;
+  }
+
+  if (!language) {
+    return false;
+  }
+
+  // strip carriage return chars from text pasted as code
+  // see: https://github.com/ProseMirror/prosemirror-view/commit/a50a6bcceb4ce52ac8fcc6162488d8875613aacd
+  editor._tiptapEditor.view.pasteHTML(
+    `<pre><code class="language-${language}">${text.replace(
+      /\r\n?/g,
+      "\n"
+    )}</code></pre>`
+  );
+
+  return true;
+}

packages/core/src/api/clipboard/fromClipboard/handleVSCodePaste.ts

@@ -10,6 +10,7 @@ import {
 import { nestedListsToBlockNoteStructure } from "../../parsers/html/util/nestedLists.js";
 import { acceptedMIMETypes } from "./acceptedMIMETypes.js";
 import { handleFileInsertion } from "./handleFileInsertion.js";
+import { handleVSCodePaste } from "./handleVSCodePaste.js";
 
 export const createPasteFromClipboardExtension = <
   BSchema extends BlockSchema,
@@ -43,6 +44,11 @@ export const createPasteFromClipboardExtension = <
                   return true;
                 }
 
+                if (format === "vscode-editor-data") {
+                  handleVSCodePaste(event, editor);
+                  return true;
+                }
+
                 if (format === "Files") {
                   handleFileInsertion(event, editor);
                   return true;

packages/core/src/api/clipboard/fromClipboard/pasteExtension.ts

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

packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html

@@ -0,0 +1 @@
+<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">console.log('Hello, world!');</code></pre></div></div></div></div>

packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html

@@ -0,0 +1 @@
+<pre><code class="bn-inline-content language-javascript"></code></pre>

packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html

@@ -0,0 +1 @@
+<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"></code></pre></div></div></div></div>