From 5744c570d8175c17869ad42729b12853ca9feb68 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Tue, 11 Mar 2025 23:19:56 +0100 Subject: [PATCH 01/18] feat: use slim shiki build and pre-compiled languages --- package-lock.json | 336 ++++++++++++++---- packages/core/package.json | 7 +- .../CodeBlockContent/CodeBlockContent.ts | 21 +- .../defaultSupportedLanguages.ts | 158 +++----- .../blocks/CodeBlockContent/shiki.bundle.ts | 129 +++++++ packages/core/tsconfig.json | 2 +- packages/core/vite.config.ts | 6 +- 7 files changed, 476 insertions(+), 183 deletions(-) create mode 100644 packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts diff --git a/package-lock.json b/package-lock.json index 87e75256c7..bcfed6d65a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9591,90 +9591,110 @@ "uuid": "dist/bin/uuid" } }, - "node_modules/@shikijs/core": { + "node_modules/@shikijs/engine-oniguruma": { "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.1.tgz", - "integrity": "sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==", + "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz", + "integrity": "sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { - "@shikijs/engine-javascript": "1.22.1", - "@shikijs/engine-oniguruma": "1.22.1", "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.3" + "@shikijs/vscode-textmate": "^9.3.0" + } + }, + "node_modules/@shikijs/langs": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.2.1.tgz", + "integrity": "sha512-If0iDHYRSGbihiA8+7uRsgb1er1Yj11pwpX1c6HLYnizDsKAw5iaT3JXj5ZpaimXSWky/IhxTm7C6nkiYVym+A==", + "dependencies": { + "@shikijs/types": "3.2.1" + } + }, + "node_modules/@shikijs/langs-precompiled": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/langs-precompiled/-/langs-precompiled-3.2.1.tgz", + "integrity": "sha512-M8AQBjYRVk6seMMwlz7FNIWolAE0bZalBLOwFUPNuM8g8LL7o+GjD/2vKmV7/vxaJ79P0XyZ3I1tFAbWS1wCHQ==", + "dependencies": { + "@shikijs/types": "3.2.1", + "oniguruma-to-es": "^4.1.0" + }, + "engines": { + "node": ">=20" + } + }, + "node_modules/@shikijs/langs-precompiled/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" } }, - "node_modules/@shikijs/core/node_modules/@types/hast": { + "node_modules/@shikijs/langs-precompiled/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "node_modules/@shikijs/langs-precompiled/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "license": "MIT", "dependencies": { "@types/unist": "*" } }, - "node_modules/@shikijs/core/node_modules/@types/unist": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", - "license": "MIT" + "node_modules/@shikijs/langs/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + } }, - "node_modules/@shikijs/core/node_modules/hast-util-to-html": { - "version": "9.0.3", - "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.3.tgz", - "integrity": "sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==", - "license": "MIT", + "node_modules/@shikijs/langs/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "node_modules/@shikijs/langs/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", "dependencies": { - "@types/hast": "^3.0.0", - "@types/unist": "^3.0.0", - "ccount": "^2.0.0", - "comma-separated-tokens": "^2.0.0", - "hast-util-whitespace": "^3.0.0", - "html-void-elements": "^3.0.0", - "mdast-util-to-hast": "^13.0.0", - "property-information": "^6.0.0", - "space-separated-tokens": "^2.0.0", - "stringify-entities": "^4.0.0", - "zwitch": "^2.0.4" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "@types/unist": "*" } }, - "node_modules/@shikijs/core/node_modules/hast-util-whitespace": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", - "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", - "license": "MIT", + "node_modules/@shikijs/themes": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.2.1.tgz", + "integrity": "sha512-k5DKJUT8IldBvAm8WcrDT5+7GA7se6lLksR+2E3SvyqGTyFMzU2F9Gb7rmD+t+Pga1MKrYFxDIeyWjMZWM6uBQ==", "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" + "@shikijs/types": "3.2.1" } }, - "node_modules/@shikijs/engine-javascript": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.1.tgz", - "integrity": "sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==", - "license": "MIT", + "node_modules/@shikijs/themes/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", "dependencies": { - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0", - "oniguruma-to-js": "0.4.3" + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" } }, - "node_modules/@shikijs/engine-oniguruma": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz", - "integrity": "sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==", - "license": "MIT", + "node_modules/@shikijs/themes/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "node_modules/@shikijs/themes/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", "dependencies": { - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0" + "@types/unist": "*" } }, "node_modules/@shikijs/types": { @@ -9682,6 +9702,8 @@ "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz", "integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@shikijs/vscode-textmate": "^9.3.0", "@types/hast": "^3.0.4" @@ -9692,6 +9714,8 @@ "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@types/unist": "*" } @@ -9700,7 +9724,9 @@ "version": "9.3.0", "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz", "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==", - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true }, "node_modules/@shuding/opentype.js": { "version": "1.4.0-beta.0", @@ -15351,6 +15377,11 @@ "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz", "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==" }, + "node_modules/emoji-regex-xs": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/emoji-regex-xs/-/emoji-regex-xs-1.0.0.tgz", + "integrity": "sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==" + }, "node_modules/emojis-list": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz", @@ -23968,11 +23999,37 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/oniguruma-parser": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/oniguruma-parser/-/oniguruma-parser-0.5.4.tgz", + "integrity": "sha512-yNxcQ8sKvURiTwP0mV6bLQCYE7NKfKRRWunhbZnXgxSmB1OXa1lHrN3o4DZd+0Si0kU5blidK7BcROO8qv5TZA==" + }, + "node_modules/oniguruma-to-es": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-4.1.0.tgz", + "integrity": "sha512-SNwG909cSLo4vPyyPbU/VJkEc9WOXqu2ycBlfd1UCXLqk1IijcQktSBb2yRQ2UFPsDhpkaf+C1dtT3PkLK/yWA==", + "dependencies": { + "emoji-regex-xs": "^1.0.0", + "oniguruma-parser": "^0.5.4", + "regex": "^6.0.1", + "regex-recursion": "^6.0.2" + } + }, + "node_modules/oniguruma-to-es/node_modules/regex": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/regex/-/regex-6.0.1.tgz", + "integrity": "sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, "node_modules/oniguruma-to-js": { "version": "0.4.3", "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz", "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "regex": "^4.3.2" }, @@ -26640,7 +26697,22 @@ "version": "4.3.3", "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz", "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==", - "license": "MIT" + "license": "MIT", + "optional": true, + "peer": true + }, + "node_modules/regex-recursion": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", + "integrity": "sha512-0YCaSCq2VRIebiaUviZNs0cBz1kg5kVS2UKUfNIx8YVs1cN3AV7NTctO5FOKBA+UT2BPJIWZauYHPqJODG50cg==", + "dependencies": { + "regex-utilities": "^2.3.0" + } + }, + "node_modules/regex-utilities": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/regex-utilities/-/regex-utilities-2.3.0.tgz", + "integrity": "sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==" }, "node_modules/regexp.prototype.flags": { "version": "1.5.2", @@ -31218,6 +31290,12 @@ "license": "MPL-2.0", "dependencies": { "@emoji-mart/data": "^1.2.1", + "@shikijs/core": "3.2.1", + "@shikijs/engine-javascript": "3.2.1", + "@shikijs/langs": "3.2.1", + "@shikijs/langs-precompiled": "3.2.1", + "@shikijs/themes": "3.2.1", + "@shikijs/types": "3.2.1", "@tiptap/core": "^2.11.5", "@tiptap/extension-bold": "^2.11.5", "@tiptap/extension-code": "^2.11.5", @@ -31254,7 +31332,6 @@ "remark-parse": "^10.0.1", "remark-rehype": "^10.1.0", "remark-stringify": "^10.0.2", - "shiki": "^1.22.0", "unified": "^10.1.2", "uuid": "^8.3.2", "y-prosemirror": "1.2.17", @@ -31284,6 +31361,51 @@ } } }, + "packages/core/node_modules/@shikijs/core": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.2.1.tgz", + "integrity": "sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==", + "dependencies": { + "@shikijs/types": "3.2.1", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.5" + } + }, + "packages/core/node_modules/@shikijs/core/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "packages/core/node_modules/@shikijs/engine-javascript": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.2.1.tgz", + "integrity": "sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==", + "dependencies": { + "@shikijs/types": "3.2.1", + "@shikijs/vscode-textmate": "^10.0.2", + "oniguruma-to-es": "^4.1.0" + } + }, + "packages/core/node_modules/@shikijs/engine-javascript/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "packages/core/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + } + }, + "packages/core/node_modules/@shikijs/types/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, "packages/core/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -31293,6 +31415,54 @@ "@types/unist": "*" } }, + "packages/core/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "packages/core/node_modules/hast-util-to-html": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", + "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-whitespace": "^3.0.0", + "html-void-elements": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "property-information": "^7.0.0", + "space-separated-tokens": "^2.0.0", + "stringify-entities": "^4.0.0", + "zwitch": "^2.0.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "packages/core/node_modules/hast-util-whitespace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", + "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "packages/core/node_modules/property-information": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz", + "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, "packages/core/node_modules/prosemirror-highlight": { "version": "0.9.0", "resolved": "https://registry.npmjs.org/prosemirror-highlight/-/prosemirror-highlight-0.9.0.tgz", @@ -31368,6 +31538,8 @@ "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.1.tgz", "integrity": "sha512-PbJ6XxrWLMwB2rm3qdjIHNm3zq4SfFnOx0B3rEoi4AN8AUngsdyZ1tRe5slMPtn6jQkbUURLNZPpLR7Do3k78g==", "license": "MIT", + "optional": true, + "peer": true, "dependencies": { "@shikijs/core": "1.22.1", "@shikijs/engine-javascript": "1.22.1", @@ -31377,6 +31549,44 @@ "@types/hast": "^3.0.4" } }, + "packages/core/node_modules/shiki/node_modules/@shikijs/core": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.1.tgz", + "integrity": "sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==", + "optional": true, + "peer": true, + "dependencies": { + "@shikijs/engine-javascript": "1.22.1", + "@shikijs/engine-oniguruma": "1.22.1", + "@shikijs/types": "1.22.1", + "@shikijs/vscode-textmate": "^9.3.0", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.3" + } + }, + "packages/core/node_modules/shiki/node_modules/@shikijs/engine-javascript": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.1.tgz", + "integrity": "sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==", + "optional": true, + "peer": true, + "dependencies": { + "@shikijs/types": "1.22.1", + "@shikijs/vscode-textmate": "^9.3.0", + "oniguruma-to-js": "0.4.3" + } + }, + "packages/core/node_modules/shiki/node_modules/@shikijs/types": { + "version": "1.22.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz", + "integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==", + "optional": true, + "peer": true, + "dependencies": { + "@shikijs/vscode-textmate": "^9.3.0", + "@types/hast": "^3.0.4" + } + }, "packages/dev-scripts": { "name": "@blocknote/dev-scripts", "version": "0.25.1", diff --git a/packages/core/package.json b/packages/core/package.json index 6b3e29b01b..05c5ae8953 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -63,6 +63,12 @@ }, "dependencies": { "@emoji-mart/data": "^1.2.1", + "@shikijs/core": "3.2.1", + "@shikijs/engine-javascript": "3.2.1", + "@shikijs/langs": "3.2.1", + "@shikijs/langs-precompiled": "3.2.1", + "@shikijs/themes": "3.2.1", + "@shikijs/types": "3.2.1", "@tiptap/core": "^2.11.5", "@tiptap/extension-bold": "^2.11.5", "@tiptap/extension-code": "^2.11.5", @@ -99,7 +105,6 @@ "remark-parse": "^10.0.1", "remark-rehype": "^10.1.0", "remark-stringify": "^10.0.2", - "shiki": "^1.22.0", "unified": "^10.1.2", "uuid": "^8.3.2", "y-prosemirror": "1.2.17", diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts index 2143d9f686..b38b76a2dc 100644 --- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts +++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts @@ -2,12 +2,6 @@ import { InputRule, isTextSelection } from "@tiptap/core"; import { TextSelection } from "@tiptap/pm/state"; import { createHighlightPlugin, Parser } from "prosemirror-highlight"; import { createParser } from "prosemirror-highlight/shiki"; -import { - BundledLanguage, - bundledLanguagesInfo, - createHighlighter, - Highlighter, -} from "shiki"; import { createBlockSpecFromStronglyTypedTiptapNode, createStronglyTypedTiptapNode, @@ -18,6 +12,12 @@ import { defaultSupportedLanguages, SupportedLanguageConfig, } from "./defaultSupportedLanguages.js"; +import { + bundledLanguages, + Highlighter, + BundledLanguage, + createHighlighter, +} from "./shiki.bundle.js"; interface CodeBlockOptions { defaultLanguage: string; @@ -32,7 +32,7 @@ export const shikiHighlighterPromiseSymbol = Symbol.for( export const defaultCodeBlockPropSchema = { language: { default: "javascript", - values: [...defaultSupportedLanguages.map((lang) => lang.id)], + values: defaultSupportedLanguages.map((lang) => lang.id), }, } satisfies PropSchema; @@ -218,8 +218,8 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ globalThisForShiki[shikiHighlighterPromiseSymbol] = globalThisForShiki[shikiHighlighterPromiseSymbol] || createHighlighter({ - themes: ["github-dark"], langs: [], + themes: ["github-dark"], }); return globalThisForShiki[shikiHighlighterPromiseSymbol].then( @@ -236,14 +236,15 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ language !== "text" && !highlighter.getLoadedLanguages().includes(language) && supportedLanguages.find(({ id }) => id === language) && - bundledLanguagesInfo.find(({ id }) => id === language) + language in bundledLanguages ) { return highlighter.loadLanguage(language as BundledLanguage); } if (!parser) { parser = - globalThisForShiki[shikiParserSymbol] || createParser(highlighter); + globalThisForShiki[shikiParserSymbol] || + createParser(highlighter as any); globalThisForShiki[shikiParserSymbol] = parser; } diff --git a/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts b/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts index b5da23b0cd..0740233b4f 100644 --- a/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts +++ b/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts @@ -1,5 +1,3 @@ -import { bundledLanguagesInfo } from "shiki"; - export type SupportedLanguageConfig = { id: string; name: string; @@ -7,110 +5,56 @@ export type SupportedLanguageConfig = { }; export const defaultSupportedLanguages: SupportedLanguageConfig[] = [ - { - id: "text", - name: "Plain Text", - match: ["text", "txt", "plain"], - }, - ...bundledLanguagesInfo - .filter((lang) => { - return [ - "c", - "cpp", - "css", - "glsl", - "graphql", - "haml", - "html", - "java", - "javascript", - "json", - "jsonc", - "jsonl", - "jsx", - "julia", - "less", - "markdown", - "mdx", - "php", - "postcss", - "pug", - "python", - "r", - "regexp", - "sass", - "scss", - "shellscript", - "sql", - "svelte", - "typescript", - "vue", - "vue-html", - "wasm", - "wgsl", - "xml", - "yaml", - ].includes(lang.id); - }) - .map((lang) => ({ - match: [lang.id, ...(lang.aliases || [])], - id: lang.id, - name: lang.name, - })), + { id: "text", name: "Plain Text", match: ["text", "txt", "plain"] }, + { match: ["c"], id: "c", name: "C" }, + { match: ["cpp", "c++"], id: "cpp", name: "C++" }, + { match: ["css"], id: "css", name: "CSS" }, + { match: ["glsl"], id: "glsl", name: "GLSL" }, + { match: ["graphql", "gql"], id: "graphql", name: "GraphQL" }, + { match: ["haml"], id: "haml", name: "Ruby Haml" }, + { match: ["html"], id: "html", name: "HTML" }, + { match: ["java"], id: "java", name: "Java" }, + { match: ["javascript", "js"], id: "javascript", name: "JavaScript" }, + { match: ["json"], id: "json", name: "JSON" }, + { match: ["jsonc"], id: "jsonc", name: "JSON with Comments" }, + { match: ["jsonl"], id: "jsonl", name: "JSON Lines" }, + { match: ["jsx"], id: "jsx", name: "JSX" }, + { match: ["julia", "jl"], id: "julia", name: "Julia" }, + { match: ["less"], id: "less", name: "Less" }, + { match: ["markdown", "md"], id: "markdown", name: "Markdown" }, + { match: ["mdx"], id: "mdx", name: "MDX" }, + { match: ["php"], id: "php", name: "PHP" }, + { match: ["postcss"], id: "postcss", name: "PostCSS" }, + { match: ["pug", "jade"], id: "pug", name: "Pug" }, + { match: ["python", "py"], id: "python", name: "Python" }, + { match: ["r"], id: "r", name: "R" }, + { match: ["regexp", "regex"], id: "regexp", name: "RegExp" }, + { match: ["sass"], id: "sass", name: "Sass" }, + { match: ["scss"], id: "scss", name: "SCSS" }, + { + match: ["shellscript", "bash", "sh", "shell", "zsh"], + id: "shellscript", + name: "Shell", + }, + { match: ["sql"], id: "sql", name: "SQL" }, + { match: ["svelte"], id: "svelte", name: "Svelte" }, + { match: ["typescript", "ts"], id: "typescript", name: "TypeScript" }, + { match: ["vue"], id: "vue", name: "Vue" }, + { match: ["vue-html"], id: "vue-html", name: "Vue HTML" }, + { match: ["wasm"], id: "wasm", name: "WebAssembly" }, + { match: ["wgsl"], id: "wgsl", name: "WGSL" }, + { match: ["xml"], id: "xml", name: "XML" }, + { match: ["yaml", "yml"], id: "yaml", name: "YAML" }, { id: "tsx", name: "TSX", match: ["tsx", "typescriptreact"] }, - { - id: "haskell", - name: "Haskell", - match: ["haskell", "hs"], - }, - { - id: "csharp", - name: "C#", - match: ["c#", "csharp", "cs"], - }, - { - id: "latex", - name: "LaTeX", - match: ["latex"], - }, - { - id: "lua", - name: "Lua", - match: ["lua"], - }, - { - id: "mermaid", - name: "Mermaid", - match: ["mermaid", "mmd"], - }, - { - id: "ruby", - name: "Ruby", - match: ["ruby", "rb"], - }, - { - id: "rust", - name: "Rust", - match: ["rust", "rs"], - }, - { - id: "scala", - name: "Scala", - match: ["scala"], - }, - { - id: "swift", - name: "Swift", - match: ["swift"], - }, - { - id: "kotlin", - name: "Kotlin", - match: ["kotlin", "kt", "kts"], - }, - { - id: "objective-c", - name: "Objective C", - match: ["objective-c", "objc"], - }, + { id: "haskell", name: "Haskell", match: ["haskell", "hs"] }, + { id: "csharp", name: "C#", match: ["c#", "csharp", "cs"] }, + { id: "latex", name: "LaTeX", match: ["latex"] }, + { id: "lua", name: "Lua", match: ["lua"] }, + { id: "mermaid", name: "Mermaid", match: ["mermaid", "mmd"] }, + { id: "ruby", name: "Ruby", match: ["ruby", "rb"] }, + { id: "rust", name: "Rust", match: ["rust", "rs"] }, + { id: "scala", name: "Scala", match: ["scala"] }, + { id: "swift", name: "Swift", match: ["swift"] }, + { id: "kotlin", name: "Kotlin", match: ["kotlin", "kt", "kts"] }, + { id: "objective-c", name: "Objective C", match: ["objective-c", "objc"] }, ]; diff --git a/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts b/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts new file mode 100644 index 0000000000..a1b5da3b9b --- /dev/null +++ b/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts @@ -0,0 +1,129 @@ +/* Generate by @shikijs/codegen */ +import type { + DynamicImportLanguageRegistration, + DynamicImportThemeRegistration, + HighlighterGeneric, +} from "@shikijs/types"; +import { + createSingletonShorthands, + createdBundledHighlighter, +} from "@shikijs/core"; +import { createJavaScriptRawEngine } from "@shikijs/engine-javascript/raw"; + +type BundledLanguage = keyof typeof bundledLanguages; +type BundledTheme = "github-dark"; +type Highlighter = HighlighterGeneric; + +const bundledLanguages = { + c: () => import("@shikijs/langs-precompiled/c"), + cpp: () => import("@shikijs/langs-precompiled/cpp"), + "c++": () => import("@shikijs/langs-precompiled/cpp"), + css: () => import("@shikijs/langs-precompiled/css"), + glsl: () => import("@shikijs/langs-precompiled/glsl"), + graphql: () => import("@shikijs/langs-precompiled/graphql"), + gql: () => import("@shikijs/langs-precompiled/graphql"), + haml: () => import("@shikijs/langs-precompiled/haml"), + html: () => import("@shikijs/langs-precompiled/html"), + java: () => import("@shikijs/langs-precompiled/java"), + javascript: () => import("@shikijs/langs-precompiled/javascript"), + js: () => import("@shikijs/langs-precompiled/javascript"), + json: () => import("@shikijs/langs-precompiled/json"), + jsonc: () => import("@shikijs/langs-precompiled/jsonc"), + jsonl: () => import("@shikijs/langs-precompiled/jsonl"), + jsx: () => import("@shikijs/langs-precompiled/jsx"), + julia: () => import("@shikijs/langs-precompiled/julia"), + jl: () => import("@shikijs/langs-precompiled/julia"), + less: () => import("@shikijs/langs-precompiled/less"), + markdown: () => import("@shikijs/langs-precompiled/markdown"), + md: () => import("@shikijs/langs-precompiled/markdown"), + mdx: () => import("@shikijs/langs-precompiled/mdx"), + php: () => import("@shikijs/langs-precompiled/php"), + postcss: () => import("@shikijs/langs-precompiled/postcss"), + pug: () => import("@shikijs/langs-precompiled/pug"), + jade: () => import("@shikijs/langs-precompiled/pug"), + python: () => import("@shikijs/langs-precompiled/python"), + py: () => import("@shikijs/langs-precompiled/python"), + r: () => import("@shikijs/langs-precompiled/r"), + regexp: () => import("@shikijs/langs-precompiled/regexp"), + regex: () => import("@shikijs/langs-precompiled/regexp"), + sass: () => import("@shikijs/langs-precompiled/sass"), + scss: () => import("@shikijs/langs-precompiled/scss"), + shellscript: () => import("@shikijs/langs-precompiled/shellscript"), + bash: () => import("@shikijs/langs-precompiled/shellscript"), + sh: () => import("@shikijs/langs-precompiled/shellscript"), + shell: () => import("@shikijs/langs-precompiled/shellscript"), + zsh: () => import("@shikijs/langs-precompiled/shellscript"), + sql: () => import("@shikijs/langs-precompiled/sql"), + svelte: () => import("@shikijs/langs-precompiled/svelte"), + typescript: () => import("@shikijs/langs-precompiled/typescript"), + ts: () => import("@shikijs/langs-precompiled/typescript"), + vue: () => import("@shikijs/langs-precompiled/vue"), + "vue-html": () => import("@shikijs/langs-precompiled/vue-html"), + wasm: () => import("@shikijs/langs-precompiled/wasm"), + wgsl: () => import("@shikijs/langs-precompiled/wgsl"), + xml: () => import("@shikijs/langs-precompiled/xml"), + yaml: () => import("@shikijs/langs-precompiled/yaml"), + yml: () => import("@shikijs/langs-precompiled/yaml"), + tsx: () => import("@shikijs/langs-precompiled/tsx"), + typescriptreact: () => import("@shikijs/langs-precompiled/tsx"), + haskell: () => import("@shikijs/langs-precompiled/haskell"), + hs: () => import("@shikijs/langs-precompiled/haskell"), + "c#": () => import("@shikijs/langs-precompiled/csharp"), + csharp: () => import("@shikijs/langs-precompiled/csharp"), + cs: () => import("@shikijs/langs-precompiled/csharp"), + latex: () => import("@shikijs/langs-precompiled/latex"), + lua: () => import("@shikijs/langs-precompiled/lua"), + mermaid: () => import("@shikijs/langs-precompiled/mermaid"), + mmd: () => import("@shikijs/langs-precompiled/mermaid"), + ruby: () => import("@shikijs/langs-precompiled/ruby"), + rb: () => import("@shikijs/langs-precompiled/ruby"), + rust: () => import("@shikijs/langs-precompiled/rust"), + rs: () => import("@shikijs/langs-precompiled/rust"), + scala: () => import("@shikijs/langs-precompiled/scala"), + // Swift does not support pre-compilation right now + swift: () => import("@shikijs/langs/swift"), + kotlin: () => import("@shikijs/langs-precompiled/kotlin"), + kt: () => import("@shikijs/langs-precompiled/kotlin"), + kts: () => import("@shikijs/langs-precompiled/kotlin"), + "objective-c": () => import("@shikijs/langs-precompiled/objective-c"), + objc: () => import("@shikijs/langs-precompiled/objective-c"), +} satisfies Record; + +const bundledThemes = { + "github-dark": () => import("@shikijs/themes/github-dark"), +} as Record; + +const createHighlighter = /* @__PURE__ */ createdBundledHighlighter< + BundledLanguage, + BundledTheme +>({ + langs: bundledLanguages, + themes: bundledThemes, + engine: () => createJavaScriptRawEngine(), +}); + +const { + codeToHtml, + codeToHast, + codeToTokensBase, + codeToTokens, + codeToTokensWithThemes, + getSingletonHighlighter, + getLastGrammarState, +} = /* @__PURE__ */ createSingletonShorthands( + createHighlighter +); + +export { + bundledLanguages, + bundledThemes, + codeToHast, + codeToHtml, + codeToTokens, + codeToTokensBase, + codeToTokensWithThemes, + createHighlighter, + getLastGrammarState, + getSingletonHighlighter, +}; +export type { BundledLanguage, BundledTheme, Highlighter }; diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json index a894e90f9e..bbfc728065 100644 --- a/packages/core/tsconfig.json +++ b/packages/core/tsconfig.json @@ -4,7 +4,7 @@ "useDefineForClassFields": true, "module": "ESNext", "lib": ["ESNext", "DOM"], - "moduleResolution": "Node", + "moduleResolution": "bundler", "jsx": "react-jsx", "strict": true, "sourceMap": true, diff --git a/packages/core/vite.config.ts b/packages/core/vite.config.ts index c5f9b60463..57d6d3a2f0 100644 --- a/packages/core/vite.config.ts +++ b/packages/core/vite.config.ts @@ -32,7 +32,11 @@ export default defineConfig({ if (deps.includes(source)) { return true; } - return source.startsWith("prosemirror-") || source.startsWith("shiki/"); + return ( + source.startsWith("prosemirror-") || + source.startsWith("@shikijs/lang") || + source.startsWith("@shikijs/theme") + ); }, output: { // Provide global variables to use in the UMD build From 18196a5dfa42d9ce8470b91195c9f0ad7a27d8a3 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Fri, 14 Mar 2025 14:31:43 +0100 Subject: [PATCH 02/18] feat: separate code-block package --- packages/code-block/.gitignore | 24 +++ packages/code-block/package.json | 76 +++++++++ packages/code-block/src/index.ts | 205 ++++++++++++++++++++++++ packages/code-block/src/shiki.bundle.ts | 104 ++++++++++++ packages/code-block/tsconfig.json | 28 ++++ packages/code-block/vite.config.ts | 67 ++++++++ packages/code-block/vitestSetup.ts | 10 ++ 7 files changed, 514 insertions(+) create mode 100644 packages/code-block/.gitignore create mode 100644 packages/code-block/package.json create mode 100644 packages/code-block/src/index.ts create mode 100644 packages/code-block/src/shiki.bundle.ts create mode 100644 packages/code-block/tsconfig.json create mode 100644 packages/code-block/vite.config.ts create mode 100644 packages/code-block/vitestSetup.ts diff --git a/packages/code-block/.gitignore b/packages/code-block/.gitignore new file mode 100644 index 0000000000..a547bf36d8 --- /dev/null +++ b/packages/code-block/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/packages/code-block/package.json b/packages/code-block/package.json new file mode 100644 index 0000000000..2beae1666d --- /dev/null +++ b/packages/code-block/package.json @@ -0,0 +1,76 @@ +{ + "name": "@blocknote/code-block", + "homepage": "https://github.com/TypeCellOS/BlockNote", + "private": false, + "sideEffects": false, + "license": "MPL-2.0", + "version": "0.25.2", + "files": [ + "dist", + "types", + "src" + ], + "keywords": [ + "react", + "javascript", + "editor", + "typescript", + "prosemirror", + "wysiwyg", + "rich-text-editor", + "notion", + "yjs", + "block-based", + "tiptap" + ], + "description": "A \"Notion-style\" block-based extensible text editor built on top of Prosemirror and Tiptap.", + "type": "module", + "source": "src/index.ts", + "types": "./types/src/index.d.ts", + "main": "./dist/blocknote-code-block.cjs", + "module": "./dist/blocknote-code-block.js", + "exports": { + ".": { + "types": "./types/src/index.d.ts", + "import": "./dist/blocknote-code-block.js", + "require": "./dist/blocknote-code-block.cjs" + } + }, + "scripts": { + "dev": "vite", + "build": "tsc && vite build", + "lint": "eslint src --max-warnings 0", + "test": "vitest --run", + "test-watch": "vitest watch" + }, + "dependencies": { + "@shikijs/core": "^3.2.1", + "@shikijs/engine-javascript": "^3.2.1", + "@shikijs/langs-precompiled": "^3.2.1", + "@shikijs/langs": "^3.2.1", + "@shikijs/themes": "^3.2.1" + }, + "devDependencies": { + "@blocknote/core": "^0.25.2", + "eslint": "^8.10.0", + "prettier": "^2.7.1", + "rollup-plugin-webpack-stats": "^0.2.2", + "typescript": "^5.0.4", + "vite": "^5.3.4", + "vite-plugin-eslint": "^1.8.1", + "vitest": "^2.0.3" + }, + "peerDependencies": { + "@blocknote/core": "^0.25.2" + }, + "eslintConfig": { + "extends": [ + "../../.eslintrc.js" + ] + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org/" + }, + "gitHead": "37614ab348dcc7faa830a9a88437b37197a2162d" +} diff --git a/packages/code-block/src/index.ts b/packages/code-block/src/index.ts new file mode 100644 index 0000000000..e6a200e6c1 --- /dev/null +++ b/packages/code-block/src/index.ts @@ -0,0 +1,205 @@ +import type { CodeBlockOptions } from "@blocknote/core"; +import { createHighlighter } from "./shiki.bundle.js"; + +export const codeBlock = { + defaultLanguage: "javascript", + supportedLanguages: { + text: { + name: "Plain Text", + aliases: ["text", "txt", "plain"], + }, + c: { + name: "C", + aliases: ["c"], + }, + cpp: { + name: "C++", + aliases: ["cpp", "c++"], + }, + css: { + name: "CSS", + aliases: ["css"], + }, + glsl: { + name: "GLSL", + aliases: ["glsl"], + }, + graphql: { + name: "GraphQL", + aliases: ["graphql", "gql"], + }, + haml: { + name: "Ruby Haml", + aliases: ["haml"], + }, + html: { + name: "HTML", + aliases: ["html"], + }, + java: { + name: "Java", + aliases: ["java"], + }, + javascript: { + name: "JavaScript", + aliases: ["javascript", "js"], + }, + json: { + name: "JSON", + aliases: ["json"], + }, + jsonc: { + name: "JSON with Comments", + aliases: ["jsonc"], + }, + jsonl: { + name: "JSON Lines", + aliases: ["jsonl"], + }, + jsx: { + name: "JSX", + aliases: ["jsx"], + }, + julia: { + name: "Julia", + aliases: ["julia", "jl"], + }, + less: { + name: "Less", + aliases: ["less"], + }, + markdown: { + name: "Markdown", + aliases: ["markdown", "md"], + }, + mdx: { + name: "MDX", + aliases: ["mdx"], + }, + php: { + name: "PHP", + aliases: ["php"], + }, + postcss: { + name: "PostCSS", + aliases: ["postcss"], + }, + pug: { + name: "Pug", + aliases: ["pug", "jade"], + }, + python: { + name: "Python", + aliases: ["python", "py"], + }, + r: { + name: "R", + aliases: ["r"], + }, + regexp: { + name: "RegExp", + aliases: ["regexp", "regex"], + }, + sass: { + name: "Sass", + aliases: ["sass"], + }, + scss: { + name: "SCSS", + aliases: ["scss"], + }, + shellscript: { + name: "Shell", + aliases: ["shellscript", "bash", "sh", "shell", "zsh"], + }, + sql: { + name: "SQL", + aliases: ["sql"], + }, + svelte: { + name: "Svelte", + aliases: ["svelte"], + }, + typescript: { + name: "TypeScript", + aliases: ["typescript", "ts"], + }, + vue: { + name: "Vue", + aliases: ["vue"], + }, + "vue-html": { + name: "Vue HTML", + aliases: ["vue-html"], + }, + wasm: { + name: "WebAssembly", + aliases: ["wasm"], + }, + wgsl: { + name: "WGSL", + aliases: ["wgsl"], + }, + xml: { + name: "XML", + aliases: ["xml"], + }, + yaml: { + name: "YAML", + aliases: ["yaml", "yml"], + }, + tsx: { + name: "TSX", + aliases: ["tsx", "typescriptreact"], + }, + haskell: { + name: "Haskell", + aliases: ["haskell", "hs"], + }, + csharp: { + name: "C#", + aliases: ["c#", "csharp", "cs"], + }, + latex: { + name: "LaTeX", + aliases: ["latex"], + }, + lua: { + name: "Lua", + aliases: ["lua"], + }, + mermaid: { + name: "Mermaid", + aliases: ["mermaid", "mmd"], + }, + ruby: { + name: "Ruby", + aliases: ["ruby", "rb"], + }, + rust: { + name: "Rust", + aliases: ["rust", "rs"], + }, + scala: { + name: "Scala", + aliases: ["scala"], + }, + swift: { + name: "Swift", + aliases: ["swift"], + }, + kotlin: { + name: "Kotlin", + aliases: ["kotlin", "kt", "kts"], + }, + "objective-c": { + name: "Objective C", + aliases: ["objective-c", "objc"], + }, + }, + createHighlighter: () => + createHighlighter({ + themes: ["github-dark", "github-light"], + langs: [], + }), +} as CodeBlockOptions; diff --git a/packages/code-block/src/shiki.bundle.ts b/packages/code-block/src/shiki.bundle.ts new file mode 100644 index 0000000000..75962c807f --- /dev/null +++ b/packages/code-block/src/shiki.bundle.ts @@ -0,0 +1,104 @@ +/* Generate by @shikijs/codegen */ +import type { + DynamicImportLanguageRegistration, + DynamicImportThemeRegistration, + HighlighterGeneric, +} from "@shikijs/types"; +import { createdBundledHighlighter } from "@shikijs/core"; +import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript"; + +type BundledLanguage = "typescript" | "ts" | "javascript" | "js" | "vue"; +type BundledTheme = "github-light" | "github-dark"; +type Highlighter = HighlighterGeneric; + +const bundledLanguages = { + c: () => import("@shikijs/langs-precompiled/c"), + cpp: () => import("@shikijs/langs-precompiled/cpp"), + "c++": () => import("@shikijs/langs-precompiled/cpp"), + css: () => import("@shikijs/langs-precompiled/css"), + glsl: () => import("@shikijs/langs-precompiled/glsl"), + graphql: () => import("@shikijs/langs-precompiled/graphql"), + gql: () => import("@shikijs/langs-precompiled/graphql"), + haml: () => import("@shikijs/langs-precompiled/haml"), + html: () => import("@shikijs/langs-precompiled/html"), + java: () => import("@shikijs/langs-precompiled/java"), + javascript: () => import("@shikijs/langs-precompiled/javascript"), + js: () => import("@shikijs/langs-precompiled/javascript"), + json: () => import("@shikijs/langs-precompiled/json"), + jsonc: () => import("@shikijs/langs-precompiled/jsonc"), + jsonl: () => import("@shikijs/langs-precompiled/jsonl"), + jsx: () => import("@shikijs/langs-precompiled/jsx"), + julia: () => import("@shikijs/langs-precompiled/julia"), + jl: () => import("@shikijs/langs-precompiled/julia"), + less: () => import("@shikijs/langs-precompiled/less"), + markdown: () => import("@shikijs/langs-precompiled/markdown"), + md: () => import("@shikijs/langs-precompiled/markdown"), + mdx: () => import("@shikijs/langs-precompiled/mdx"), + php: () => import("@shikijs/langs-precompiled/php"), + postcss: () => import("@shikijs/langs-precompiled/postcss"), + pug: () => import("@shikijs/langs-precompiled/pug"), + jade: () => import("@shikijs/langs-precompiled/pug"), + python: () => import("@shikijs/langs-precompiled/python"), + py: () => import("@shikijs/langs-precompiled/python"), + r: () => import("@shikijs/langs-precompiled/r"), + regexp: () => import("@shikijs/langs-precompiled/regexp"), + regex: () => import("@shikijs/langs-precompiled/regexp"), + sass: () => import("@shikijs/langs-precompiled/sass"), + scss: () => import("@shikijs/langs-precompiled/scss"), + shellscript: () => import("@shikijs/langs-precompiled/shellscript"), + bash: () => import("@shikijs/langs-precompiled/shellscript"), + sh: () => import("@shikijs/langs-precompiled/shellscript"), + shell: () => import("@shikijs/langs-precompiled/shellscript"), + zsh: () => import("@shikijs/langs-precompiled/shellscript"), + sql: () => import("@shikijs/langs-precompiled/sql"), + svelte: () => import("@shikijs/langs-precompiled/svelte"), + typescript: () => import("@shikijs/langs-precompiled/typescript"), + ts: () => import("@shikijs/langs-precompiled/typescript"), + vue: () => import("@shikijs/langs-precompiled/vue"), + "vue-html": () => import("@shikijs/langs-precompiled/vue-html"), + wasm: () => import("@shikijs/langs-precompiled/wasm"), + wgsl: () => import("@shikijs/langs-precompiled/wgsl"), + xml: () => import("@shikijs/langs-precompiled/xml"), + yaml: () => import("@shikijs/langs-precompiled/yaml"), + yml: () => import("@shikijs/langs-precompiled/yaml"), + tsx: () => import("@shikijs/langs-precompiled/tsx"), + typescriptreact: () => import("@shikijs/langs-precompiled/tsx"), + haskell: () => import("@shikijs/langs-precompiled/haskell"), + hs: () => import("@shikijs/langs-precompiled/haskell"), + "c#": () => import("@shikijs/langs-precompiled/csharp"), + csharp: () => import("@shikijs/langs-precompiled/csharp"), + cs: () => import("@shikijs/langs-precompiled/csharp"), + latex: () => import("@shikijs/langs-precompiled/latex"), + lua: () => import("@shikijs/langs-precompiled/lua"), + mermaid: () => import("@shikijs/langs-precompiled/mermaid"), + mmd: () => import("@shikijs/langs-precompiled/mermaid"), + ruby: () => import("@shikijs/langs-precompiled/ruby"), + rb: () => import("@shikijs/langs-precompiled/ruby"), + rust: () => import("@shikijs/langs-precompiled/rust"), + rs: () => import("@shikijs/langs-precompiled/rust"), + scala: () => import("@shikijs/langs-precompiled/scala"), + // Swift does not support pre-compilation right now + swift: () => import("@shikijs/langs/swift"), + kotlin: () => import("@shikijs/langs-precompiled/kotlin"), + kt: () => import("@shikijs/langs-precompiled/kotlin"), + kts: () => import("@shikijs/langs-precompiled/kotlin"), + "objective-c": () => import("@shikijs/langs-precompiled/objective-c"), + objc: () => import("@shikijs/langs-precompiled/objective-c"), +} as Record; + +const bundledThemes = { + "github-dark": () => import("@shikijs/themes/github-dark"), + "github-light": () => import("@shikijs/themes/github-light"), +} as Record; + +const createHighlighter = /* @__PURE__ */ createdBundledHighlighter< + BundledLanguage, + BundledTheme +>({ + langs: bundledLanguages, + themes: bundledThemes, + engine: () => createJavaScriptRegexEngine(), +}); + +export { createHighlighter }; +export type { BundledLanguage, BundledTheme, Highlighter }; diff --git a/packages/code-block/tsconfig.json b/packages/code-block/tsconfig.json new file mode 100644 index 0000000000..30ab55f7ca --- /dev/null +++ b/packages/code-block/tsconfig.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "lib": ["ESNext", "DOM"], + "moduleResolution": "bundler", + "jsx": "react-jsx", + "strict": true, + "sourceMap": true, + "resolveJsonModule": true, + "esModuleInterop": true, + "noEmit": false, + "noUnusedLocals": true, + "noUnusedParameters": true, + "noImplicitReturns": true, + "outDir": "dist", + "declaration": true, + "declarationDir": "types", + "composite": true, + "skipLibCheck": true, + "emitDeclarationOnly": true, + "paths": { + "@shikijs/types": ["../../node_modules/@shikijs/types"] + } + }, + "include": ["src"] +} diff --git a/packages/code-block/vite.config.ts b/packages/code-block/vite.config.ts new file mode 100644 index 0000000000..eae4a8806b --- /dev/null +++ b/packages/code-block/vite.config.ts @@ -0,0 +1,67 @@ +import * as path from "path"; +import { webpackStats } from "rollup-plugin-webpack-stats"; +import { defineConfig } from "vite"; +import pkg from "./package.json"; +// import eslintPlugin from "vite-plugin-eslint"; + +const deps = Object.keys({ + ...pkg.dependencies, + ...pkg.peerDependencies, + ...pkg.devDependencies, +}); + +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + test: { + setupFiles: ["./vitestSetup.ts"], + }, + plugins: [webpackStats() as any], + // used so that vitest resolves the core package from the sources instead of the built version + resolve: { + alias: + conf.command === "build" + ? ({} as Record) + : ({ + // load live from sources with live reload working + "@blocknote/core": path.resolve(__dirname, "../core/src/"), + "@blocknote/react": path.resolve(__dirname, "../react/src/"), + } as Record), + }, + build: { + sourcemap: true, + lib: { + entry: { + "blocknote-code-block": path.resolve(__dirname, "src/index.ts"), + }, + name: "blocknote-code-block", + formats: ["es", "cjs"], + fileName: (format, entryName) => + format === "es" ? `${entryName}.js` : `${entryName}.cjs`, + }, + rollupOptions: { + // make sure to externalize deps that shouldn't be bundled + // into your library + external: (source: string) => { + if (deps.includes(source)) { + return true; + } + + if (source === "react/jsx-runtime") { + return true; + } + + if (source.startsWith("prosemirror-")) { + return true; + } + + return false; + }, + output: { + // Provide global variables to use in the UMD build + // for externalized deps + globals: {}, + interop: "compat", // https://rollupjs.org/migration/#changed-defaults + }, + }, + }, +})); diff --git a/packages/code-block/vitestSetup.ts b/packages/code-block/vitestSetup.ts new file mode 100644 index 0000000000..a946b5fc3a --- /dev/null +++ b/packages/code-block/vitestSetup.ts @@ -0,0 +1,10 @@ +import { afterEach, beforeEach } from "vitest"; + +beforeEach(() => { + globalThis.window = globalThis.window || ({} as any); + (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS = {}; +}); + +afterEach(() => { + delete (window as Window & { __TEST_OPTIONS?: any }).__TEST_OPTIONS; +}); From 898197bc00bb35dea566f1fd99a64890dacd3489 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Fri, 14 Mar 2025 14:32:21 +0100 Subject: [PATCH 03/18] feat: configuration for codeBlock options exposed --- packages/core/package.json | 7 +- .../CodeBlockContent/CodeBlockContent.ts | 162 +++++++++++------- .../defaultSupportedLanguages.ts | 60 ------- .../blocks/CodeBlockContent/shiki.bundle.ts | 129 -------------- packages/core/src/blocks/defaultBlocks.ts | 2 - packages/core/src/editor/BlockNoteEditor.ts | 13 ++ 6 files changed, 110 insertions(+), 263 deletions(-) delete mode 100644 packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts delete mode 100644 packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts diff --git a/packages/core/package.json b/packages/core/package.json index d9da19d886..4753f52808 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -63,11 +63,6 @@ }, "dependencies": { "@emoji-mart/data": "^1.2.1", - "@shikijs/core": "3.2.1", - "@shikijs/engine-javascript": "3.2.1", - "@shikijs/langs": "3.2.1", - "@shikijs/langs-precompiled": "3.2.1", - "@shikijs/themes": "3.2.1", "@shikijs/types": "3.2.1", "@tiptap/core": "^2.11.5", "@tiptap/extension-bold": "^2.11.5", @@ -91,7 +86,7 @@ "emoji-mart": "^5.6.0", "hast-util-from-dom": "^4.2.0", "prosemirror-dropcursor": "^1.8.1", - "prosemirror-highlight": "^0.9.0", + "prosemirror-highlight": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", "prosemirror-model": "^1.24.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.4", diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts index b38b76a2dc..06f42f56ee 100644 --- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts +++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts @@ -8,22 +8,59 @@ import { PropSchema, } from "../../schema/index.js"; import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js"; -import { - defaultSupportedLanguages, - SupportedLanguageConfig, -} from "./defaultSupportedLanguages.js"; -import { - bundledLanguages, - Highlighter, - BundledLanguage, - createHighlighter, -} from "./shiki.bundle.js"; - -interface CodeBlockOptions { - defaultLanguage: string; - indentLineWithTab: boolean; - supportedLanguages: SupportedLanguageConfig[]; -} +import { HighlighterGeneric } from "@shikijs/types"; +import { BlockNoteEditor } from "../../index.js"; + +export type CodeBlockOptions = { + /** + * Whether to indent lines with a tab when the user presses `Tab` in a code block. + * + * @default true + */ + indentLineWithTab?: boolean; + /** + * The default language to use for code blocks. + * + * @default "text" + */ + defaultLanguage?: string; + /** + * The languages that are supported in the editor. + * + * @example + * { + * javascript: { + * name: "JavaScript", + * aliases: ["js"], + * }, + * typescript: { + * name: "TypeScript", + * aliases: ["ts"], + * }, + * } + */ + supportedLanguages: Record< + string, + { + /** + * The display name of the language. + */ + name: string; + /** + * Aliases for this language. + */ + aliases?: string[]; + } + >; + /** + * The highlighter to use for code blocks. + */ + createHighlighter?: () => Promise>; +}; + +type CodeBlockConfigOptions = { + editor: BlockNoteEditor; +}; export const shikiParserSymbol = Symbol.for("blocknote.shikiParser"); export const shikiHighlighterPromiseSymbol = Symbol.for( @@ -31,8 +68,7 @@ export const shikiHighlighterPromiseSymbol = Symbol.for( ); export const defaultCodeBlockPropSchema = { language: { - default: "javascript", - values: defaultSupportedLanguages.map((lang) => lang.id), + default: "text", }, } satisfies PropSchema; @@ -45,18 +81,17 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ defining: true, addOptions() { return { - defaultLanguage: "javascript", + defaultLanguage: "text", indentLineWithTab: true, - supportedLanguages: defaultSupportedLanguages, + supportedLanguages: {}, }; }, addAttributes() { - const supportedLanguages = this.options - .supportedLanguages as SupportedLanguageConfig[]; + const options = this.options as CodeBlockConfigOptions; return { language: { - default: this.options.defaultLanguage, + default: options.editor.settings.codeBlock.defaultLanguage, parseHTML: (inputElement) => { let element = inputElement as HTMLElement | null; let language: string | null = null; @@ -91,11 +126,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ return null; } - return ( - supportedLanguages.find(({ match }) => { - return match.includes(language); - })?.id || this.options.defaultLanguage - ); + return getLanguageId(options.editor.settings.codeBlock, language); }, renderHTML: (attributes) => { // TODO: Use `data-language="..."` instead for easier parsing @@ -143,8 +174,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ }; }, addNodeView() { - const supportedLanguages = this.options - .supportedLanguages as SupportedLanguageConfig[]; + const options = this.options as CodeBlockConfigOptions; return ({ editor, node, getPos, HTMLAttributes }) => { const pre = document.createElement("pre"); @@ -169,7 +199,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ }); }; - supportedLanguages.forEach(({ id, name }) => { + Object.entries( + options.editor.settings.codeBlock.supportedLanguages + ).forEach(([id, { name }]) => { const option = document.createElement("option"); option.value = id; @@ -178,7 +210,9 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ }); selectWrapper.contentEditable = "false"; - select.value = node.attrs.language || this.options.defaultLanguage; + select.value = + node.attrs.language || + options.editor.settings.codeBlock.defaultLanguage; dom.removeChild(contentDOM); dom.appendChild(selectWrapper); dom.appendChild(pre); @@ -203,24 +237,30 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ }; }, addProseMirrorPlugins() { - const supportedLanguages = this.options - .supportedLanguages as SupportedLanguageConfig[]; + const options = this.options as CodeBlockConfigOptions; const globalThisForShiki = globalThis as { - [shikiHighlighterPromiseSymbol]?: Promise; + [shikiHighlighterPromiseSymbol]?: Promise>; [shikiParserSymbol]?: Parser; }; - let highlighter: Highlighter | undefined; + let highlighter: HighlighterGeneric | undefined; let parser: Parser | undefined; - - const lazyParser: Parser = (options) => { + let hasWarned = false; + const lazyParser: Parser = (parserOptions) => { + if (!options.editor.settings.codeBlock.createHighlighter) { + if (process.env.NODE_ENV === "development" && !hasWarned) { + // eslint-disable-next-line no-console + console.log( + "For syntax highlighting of code blocks, you must provide a highlighter function" + ); + hasWarned = true; + } + return []; + } if (!highlighter) { globalThisForShiki[shikiHighlighterPromiseSymbol] = globalThisForShiki[shikiHighlighterPromiseSymbol] || - createHighlighter({ - langs: [], - themes: ["github-dark"], - }); + options.editor.settings.codeBlock.createHighlighter(); return globalThisForShiki[shikiHighlighterPromiseSymbol].then( (createdHighlighter) => { @@ -229,16 +269,15 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ ); } - const language = options.language; + const language = parserOptions.language; if ( language && language !== "text" && !highlighter.getLoadedLanguages().includes(language) && - supportedLanguages.find(({ id }) => id === language) && - language in bundledLanguages + language in options.editor.settings.codeBlock.supportedLanguages ) { - return highlighter.loadLanguage(language as BundledLanguage); + return highlighter.loadLanguage(language); } if (!parser) { @@ -248,7 +287,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ globalThisForShiki[shikiParserSymbol] = parser; } - return parser(options); + return parser(parserOptions); }; const shikiLazyPlugin = createHighlightPlugin({ @@ -260,8 +299,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ return [shikiLazyPlugin]; }, addInputRules() { - const supportedLanguages = this.options - .supportedLanguages as SupportedLanguageConfig[]; + const options = this.options as CodeBlockConfigOptions; return [ new InputRule({ @@ -270,10 +308,10 @@ const CodeBlockContent = createStronglyTypedTiptapNode({ const $start = state.doc.resolve(range.from); const languageName = match[1].trim(); const attributes = { - language: - supportedLanguages.find(({ match }) => { - return match.includes(languageName); - })?.id || this.options.defaultLanguage, + language: getLanguageId( + options.editor.settings.codeBlock, + languageName + ), }; if ( @@ -384,18 +422,10 @@ export const CodeBlock = createBlockSpecFromStronglyTypedTiptapNode( defaultCodeBlockPropSchema ); -export function customizeCodeBlock(options: Partial) { - return createBlockSpecFromStronglyTypedTiptapNode( - CodeBlockContent.configure(options), - { - language: { - default: - options.defaultLanguage || - defaultCodeBlockPropSchema.language.default, - values: - options.supportedLanguages?.map((lang) => lang.id) || - defaultCodeBlockPropSchema.language.values, - }, - } +function getLanguageId(options: CodeBlockOptions, languageName: string) { + return ( + Object.entries(options.supportedLanguages).find(([id, { aliases }]) => { + return aliases?.includes(languageName) || id === languageName; + })?.[0] || options.defaultLanguage ); } diff --git a/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts b/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts deleted file mode 100644 index 0740233b4f..0000000000 --- a/packages/core/src/blocks/CodeBlockContent/defaultSupportedLanguages.ts +++ /dev/null @@ -1,60 +0,0 @@ -export type SupportedLanguageConfig = { - id: string; - name: string; - match: string[]; -}; - -export const defaultSupportedLanguages: SupportedLanguageConfig[] = [ - { id: "text", name: "Plain Text", match: ["text", "txt", "plain"] }, - { match: ["c"], id: "c", name: "C" }, - { match: ["cpp", "c++"], id: "cpp", name: "C++" }, - { match: ["css"], id: "css", name: "CSS" }, - { match: ["glsl"], id: "glsl", name: "GLSL" }, - { match: ["graphql", "gql"], id: "graphql", name: "GraphQL" }, - { match: ["haml"], id: "haml", name: "Ruby Haml" }, - { match: ["html"], id: "html", name: "HTML" }, - { match: ["java"], id: "java", name: "Java" }, - { match: ["javascript", "js"], id: "javascript", name: "JavaScript" }, - { match: ["json"], id: "json", name: "JSON" }, - { match: ["jsonc"], id: "jsonc", name: "JSON with Comments" }, - { match: ["jsonl"], id: "jsonl", name: "JSON Lines" }, - { match: ["jsx"], id: "jsx", name: "JSX" }, - { match: ["julia", "jl"], id: "julia", name: "Julia" }, - { match: ["less"], id: "less", name: "Less" }, - { match: ["markdown", "md"], id: "markdown", name: "Markdown" }, - { match: ["mdx"], id: "mdx", name: "MDX" }, - { match: ["php"], id: "php", name: "PHP" }, - { match: ["postcss"], id: "postcss", name: "PostCSS" }, - { match: ["pug", "jade"], id: "pug", name: "Pug" }, - { match: ["python", "py"], id: "python", name: "Python" }, - { match: ["r"], id: "r", name: "R" }, - { match: ["regexp", "regex"], id: "regexp", name: "RegExp" }, - { match: ["sass"], id: "sass", name: "Sass" }, - { match: ["scss"], id: "scss", name: "SCSS" }, - { - match: ["shellscript", "bash", "sh", "shell", "zsh"], - id: "shellscript", - name: "Shell", - }, - { match: ["sql"], id: "sql", name: "SQL" }, - { match: ["svelte"], id: "svelte", name: "Svelte" }, - { match: ["typescript", "ts"], id: "typescript", name: "TypeScript" }, - { match: ["vue"], id: "vue", name: "Vue" }, - { match: ["vue-html"], id: "vue-html", name: "Vue HTML" }, - { match: ["wasm"], id: "wasm", name: "WebAssembly" }, - { match: ["wgsl"], id: "wgsl", name: "WGSL" }, - { match: ["xml"], id: "xml", name: "XML" }, - { match: ["yaml", "yml"], id: "yaml", name: "YAML" }, - { id: "tsx", name: "TSX", match: ["tsx", "typescriptreact"] }, - { id: "haskell", name: "Haskell", match: ["haskell", "hs"] }, - { id: "csharp", name: "C#", match: ["c#", "csharp", "cs"] }, - { id: "latex", name: "LaTeX", match: ["latex"] }, - { id: "lua", name: "Lua", match: ["lua"] }, - { id: "mermaid", name: "Mermaid", match: ["mermaid", "mmd"] }, - { id: "ruby", name: "Ruby", match: ["ruby", "rb"] }, - { id: "rust", name: "Rust", match: ["rust", "rs"] }, - { id: "scala", name: "Scala", match: ["scala"] }, - { id: "swift", name: "Swift", match: ["swift"] }, - { id: "kotlin", name: "Kotlin", match: ["kotlin", "kt", "kts"] }, - { id: "objective-c", name: "Objective C", match: ["objective-c", "objc"] }, -]; diff --git a/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts b/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts deleted file mode 100644 index a1b5da3b9b..0000000000 --- a/packages/core/src/blocks/CodeBlockContent/shiki.bundle.ts +++ /dev/null @@ -1,129 +0,0 @@ -/* Generate by @shikijs/codegen */ -import type { - DynamicImportLanguageRegistration, - DynamicImportThemeRegistration, - HighlighterGeneric, -} from "@shikijs/types"; -import { - createSingletonShorthands, - createdBundledHighlighter, -} from "@shikijs/core"; -import { createJavaScriptRawEngine } from "@shikijs/engine-javascript/raw"; - -type BundledLanguage = keyof typeof bundledLanguages; -type BundledTheme = "github-dark"; -type Highlighter = HighlighterGeneric; - -const bundledLanguages = { - c: () => import("@shikijs/langs-precompiled/c"), - cpp: () => import("@shikijs/langs-precompiled/cpp"), - "c++": () => import("@shikijs/langs-precompiled/cpp"), - css: () => import("@shikijs/langs-precompiled/css"), - glsl: () => import("@shikijs/langs-precompiled/glsl"), - graphql: () => import("@shikijs/langs-precompiled/graphql"), - gql: () => import("@shikijs/langs-precompiled/graphql"), - haml: () => import("@shikijs/langs-precompiled/haml"), - html: () => import("@shikijs/langs-precompiled/html"), - java: () => import("@shikijs/langs-precompiled/java"), - javascript: () => import("@shikijs/langs-precompiled/javascript"), - js: () => import("@shikijs/langs-precompiled/javascript"), - json: () => import("@shikijs/langs-precompiled/json"), - jsonc: () => import("@shikijs/langs-precompiled/jsonc"), - jsonl: () => import("@shikijs/langs-precompiled/jsonl"), - jsx: () => import("@shikijs/langs-precompiled/jsx"), - julia: () => import("@shikijs/langs-precompiled/julia"), - jl: () => import("@shikijs/langs-precompiled/julia"), - less: () => import("@shikijs/langs-precompiled/less"), - markdown: () => import("@shikijs/langs-precompiled/markdown"), - md: () => import("@shikijs/langs-precompiled/markdown"), - mdx: () => import("@shikijs/langs-precompiled/mdx"), - php: () => import("@shikijs/langs-precompiled/php"), - postcss: () => import("@shikijs/langs-precompiled/postcss"), - pug: () => import("@shikijs/langs-precompiled/pug"), - jade: () => import("@shikijs/langs-precompiled/pug"), - python: () => import("@shikijs/langs-precompiled/python"), - py: () => import("@shikijs/langs-precompiled/python"), - r: () => import("@shikijs/langs-precompiled/r"), - regexp: () => import("@shikijs/langs-precompiled/regexp"), - regex: () => import("@shikijs/langs-precompiled/regexp"), - sass: () => import("@shikijs/langs-precompiled/sass"), - scss: () => import("@shikijs/langs-precompiled/scss"), - shellscript: () => import("@shikijs/langs-precompiled/shellscript"), - bash: () => import("@shikijs/langs-precompiled/shellscript"), - sh: () => import("@shikijs/langs-precompiled/shellscript"), - shell: () => import("@shikijs/langs-precompiled/shellscript"), - zsh: () => import("@shikijs/langs-precompiled/shellscript"), - sql: () => import("@shikijs/langs-precompiled/sql"), - svelte: () => import("@shikijs/langs-precompiled/svelte"), - typescript: () => import("@shikijs/langs-precompiled/typescript"), - ts: () => import("@shikijs/langs-precompiled/typescript"), - vue: () => import("@shikijs/langs-precompiled/vue"), - "vue-html": () => import("@shikijs/langs-precompiled/vue-html"), - wasm: () => import("@shikijs/langs-precompiled/wasm"), - wgsl: () => import("@shikijs/langs-precompiled/wgsl"), - xml: () => import("@shikijs/langs-precompiled/xml"), - yaml: () => import("@shikijs/langs-precompiled/yaml"), - yml: () => import("@shikijs/langs-precompiled/yaml"), - tsx: () => import("@shikijs/langs-precompiled/tsx"), - typescriptreact: () => import("@shikijs/langs-precompiled/tsx"), - haskell: () => import("@shikijs/langs-precompiled/haskell"), - hs: () => import("@shikijs/langs-precompiled/haskell"), - "c#": () => import("@shikijs/langs-precompiled/csharp"), - csharp: () => import("@shikijs/langs-precompiled/csharp"), - cs: () => import("@shikijs/langs-precompiled/csharp"), - latex: () => import("@shikijs/langs-precompiled/latex"), - lua: () => import("@shikijs/langs-precompiled/lua"), - mermaid: () => import("@shikijs/langs-precompiled/mermaid"), - mmd: () => import("@shikijs/langs-precompiled/mermaid"), - ruby: () => import("@shikijs/langs-precompiled/ruby"), - rb: () => import("@shikijs/langs-precompiled/ruby"), - rust: () => import("@shikijs/langs-precompiled/rust"), - rs: () => import("@shikijs/langs-precompiled/rust"), - scala: () => import("@shikijs/langs-precompiled/scala"), - // Swift does not support pre-compilation right now - swift: () => import("@shikijs/langs/swift"), - kotlin: () => import("@shikijs/langs-precompiled/kotlin"), - kt: () => import("@shikijs/langs-precompiled/kotlin"), - kts: () => import("@shikijs/langs-precompiled/kotlin"), - "objective-c": () => import("@shikijs/langs-precompiled/objective-c"), - objc: () => import("@shikijs/langs-precompiled/objective-c"), -} satisfies Record; - -const bundledThemes = { - "github-dark": () => import("@shikijs/themes/github-dark"), -} as Record; - -const createHighlighter = /* @__PURE__ */ createdBundledHighlighter< - BundledLanguage, - BundledTheme ->({ - langs: bundledLanguages, - themes: bundledThemes, - engine: () => createJavaScriptRawEngine(), -}); - -const { - codeToHtml, - codeToHast, - codeToTokensBase, - codeToTokens, - codeToTokensWithThemes, - getSingletonHighlighter, - getLastGrammarState, -} = /* @__PURE__ */ createSingletonShorthands( - createHighlighter -); - -export { - bundledLanguages, - bundledThemes, - codeToHast, - codeToHtml, - codeToTokens, - codeToTokensBase, - codeToTokensWithThemes, - createHighlighter, - getLastGrammarState, - getSingletonHighlighter, -}; -export type { BundledLanguage, BundledTheme, Highlighter }; diff --git a/packages/core/src/blocks/defaultBlocks.ts b/packages/core/src/blocks/defaultBlocks.ts index 81dc0e49ab..e57e59f489 100644 --- a/packages/core/src/blocks/defaultBlocks.ts +++ b/packages/core/src/blocks/defaultBlocks.ts @@ -32,8 +32,6 @@ import { Paragraph } from "./ParagraphBlockContent/ParagraphBlockContent.js"; import { Table } from "./TableBlockContent/TableBlockContent.js"; import { VideoBlock } from "./VideoBlockContent/VideoBlockContent.js"; -export { customizeCodeBlock } from "./CodeBlockContent/CodeBlockContent.js"; - export const defaultBlockSpecs = { paragraph: Paragraph, heading: Heading, diff --git a/packages/core/src/editor/BlockNoteEditor.ts b/packages/core/src/editor/BlockNoteEditor.ts index 2fc754bbf7..d9b87b9622 100644 --- a/packages/core/src/editor/BlockNoteEditor.ts +++ b/packages/core/src/editor/BlockNoteEditor.ts @@ -101,6 +101,7 @@ import { nodeToBlock } from "../api/nodeConversions/nodeToBlock.js"; import type { ThreadStore, User } from "../comments/index.js"; import "../style.css"; import { EventEmitter } from "../util/EventEmitter.js"; +import { CodeBlockOptions } from "../blocks/CodeBlockContent/CodeBlockContent.js"; export type BlockNoteExtensionFactory = ( editor: BlockNoteEditor @@ -156,6 +157,11 @@ export type BlockNoteEditorOptions< showCursorLabels?: "always" | "activity"; }; + /** + * Options for code blocks. + */ + codeBlock?: CodeBlockOptions; + comments: { threadStore: ThreadStore; }; @@ -442,6 +448,7 @@ export class BlockNoteEditor< cellTextColor: boolean; headers: boolean; }; + codeBlock: CodeBlockOptions; }; public static create< @@ -489,6 +496,12 @@ export class BlockNoteEditor< cellTextColor: options?.tables?.cellTextColor ?? false, headers: options?.tables?.headers ?? false, }, + codeBlock: { + indentLineWithTab: options?.codeBlock?.indentLineWithTab ?? true, + defaultLanguage: options?.codeBlock?.defaultLanguage ?? "text", + supportedLanguages: options?.codeBlock?.supportedLanguages ?? {}, + createHighlighter: options?.codeBlock?.createHighlighter ?? undefined, + }, }; // apply defaults From 2c8aea04e9a19d12cc8b0738b0bb4face0c2991b Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Fri, 14 Mar 2025 14:32:45 +0100 Subject: [PATCH 04/18] chore: package updates --- package-lock.json | 197 +++++++++++++++++++++++++++++++--------- playground/package.json | 1 + 2 files changed, 156 insertions(+), 42 deletions(-) diff --git a/package-lock.json b/package-lock.json index a2a99215fd..8924b34a5e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3324,6 +3324,10 @@ "resolved": "packages/ariakit", "link": true }, + "node_modules/@blocknote/code-block": { + "resolved": "packages/code-block", + "link": true + }, "node_modules/@blocknote/core": { "resolved": "packages/core", "link": true @@ -9591,6 +9595,119 @@ "uuid": "dist/bin/uuid" } }, + "node_modules/@shikijs/core": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.2.1.tgz", + "integrity": "sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==", + "dependencies": { + "@shikijs/types": "3.2.1", + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4", + "hast-util-to-html": "^9.0.5" + } + }, + "node_modules/@shikijs/core/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + } + }, + "node_modules/@shikijs/core/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "node_modules/@shikijs/core/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, + "node_modules/@shikijs/core/node_modules/@types/unist": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" + }, + "node_modules/@shikijs/core/node_modules/hast-util-to-html": { + "version": "9.0.5", + "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", + "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", + "dependencies": { + "@types/hast": "^3.0.0", + "@types/unist": "^3.0.0", + "ccount": "^2.0.0", + "comma-separated-tokens": "^2.0.0", + "hast-util-whitespace": "^3.0.0", + "html-void-elements": "^3.0.0", + "mdast-util-to-hast": "^13.0.0", + "property-information": "^7.0.0", + "space-separated-tokens": "^2.0.0", + "stringify-entities": "^4.0.0", + "zwitch": "^2.0.4" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/@shikijs/core/node_modules/hast-util-whitespace": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", + "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", + "dependencies": { + "@types/hast": "^3.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/unified" + } + }, + "node_modules/@shikijs/core/node_modules/property-information": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz", + "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/wooorm" + } + }, + "node_modules/@shikijs/engine-javascript": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.2.1.tgz", + "integrity": "sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==", + "dependencies": { + "@shikijs/types": "3.2.1", + "@shikijs/vscode-textmate": "^10.0.2", + "oniguruma-to-es": "^4.1.0" + } + }, + "node_modules/@shikijs/engine-javascript/node_modules/@shikijs/types": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", + "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", + "dependencies": { + "@shikijs/vscode-textmate": "^10.0.2", + "@types/hast": "^3.0.4" + } + }, + "node_modules/@shikijs/engine-javascript/node_modules/@shikijs/vscode-textmate": { + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" + }, + "node_modules/@shikijs/engine-javascript/node_modules/@types/hast": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", + "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "dependencies": { + "@types/unist": "*" + } + }, "node_modules/@shikijs/engine-oniguruma": { "version": "1.22.1", "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz", @@ -31284,17 +31401,37 @@ "url": "https://github.com/sponsors/isaacs" } }, + "packages/code-block": { + "name": "@blocknote/code-block", + "version": "0.25.2", + "license": "MPL-2.0", + "dependencies": { + "@shikijs/core": "^3.2.1", + "@shikijs/engine-javascript": "^3.2.1", + "@shikijs/langs": "^3.2.1", + "@shikijs/langs-precompiled": "^3.2.1", + "@shikijs/themes": "^3.2.1" + }, + "devDependencies": { + "@blocknote/core": "^0.25.2", + "eslint": "^8.10.0", + "prettier": "^2.7.1", + "rollup-plugin-webpack-stats": "^0.2.2", + "typescript": "^5.0.4", + "vite": "^5.3.4", + "vite-plugin-eslint": "^1.8.1", + "vitest": "^2.0.3" + }, + "peerDependencies": { + "@blocknote/core": "^0.25.2" + } + }, "packages/core": { "name": "@blocknote/core", "version": "0.25.2", "license": "MPL-2.0", "dependencies": { "@emoji-mart/data": "^1.2.1", - "@shikijs/core": "3.2.1", - "@shikijs/engine-javascript": "3.2.1", - "@shikijs/langs": "3.2.1", - "@shikijs/langs-precompiled": "3.2.1", - "@shikijs/themes": "3.2.1", "@shikijs/types": "3.2.1", "@tiptap/core": "^2.11.5", "@tiptap/extension-bold": "^2.11.5", @@ -31318,7 +31455,7 @@ "emoji-mart": "^5.6.0", "hast-util-from-dom": "^4.2.0", "prosemirror-dropcursor": "^1.8.1", - "prosemirror-highlight": "^0.9.0", + "prosemirror-highlight": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", "prosemirror-model": "^1.24.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.4", @@ -31361,37 +31498,6 @@ } } }, - "packages/core/node_modules/@shikijs/core": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-3.2.1.tgz", - "integrity": "sha512-FhsdxMWYu/C11sFisEp7FMGBtX/OSSbnXZDMBhGuUDBNTdsoZlMSgQv5f90rwvzWAdWIW6VobD+G3IrazxA6dQ==", - "dependencies": { - "@shikijs/types": "3.2.1", - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.5" - } - }, - "packages/core/node_modules/@shikijs/core/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, - "packages/core/node_modules/@shikijs/engine-javascript": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-3.2.1.tgz", - "integrity": "sha512-eMdcUzN3FMQYxOmRf2rmU8frikzoSHbQDFH2hIuXsrMO+IBOCI9BeeRkCiBkcLDHeRKbOCtYMJK3D6U32ooU9Q==", - "dependencies": { - "@shikijs/types": "3.2.1", - "@shikijs/vscode-textmate": "^10.0.2", - "oniguruma-to-es": "^4.1.0" - } - }, - "packages/core/node_modules/@shikijs/engine-javascript/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, "packages/core/node_modules/@shikijs/types": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", @@ -31424,6 +31530,8 @@ "version": "9.0.5", "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", + "optional": true, + "peer": true, "dependencies": { "@types/hast": "^3.0.0", "@types/unist": "^3.0.0", @@ -31446,6 +31554,8 @@ "version": "3.0.0", "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", + "optional": true, + "peer": true, "dependencies": { "@types/hast": "^3.0.0" }, @@ -31458,15 +31568,17 @@ "version": "7.0.0", "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz", "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==", + "optional": true, + "peer": true, "funding": { "type": "github", "url": "https://github.com/sponsors/wooorm" } }, "packages/core/node_modules/prosemirror-highlight": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/prosemirror-highlight/-/prosemirror-highlight-0.9.0.tgz", - "integrity": "sha512-ujJ1M4JgHop8xZ1uyjFDDg8DkOfXC87tJMQAVDTgR9dQOsIv9MoSA6jGcP7xM84P0ecbu1bqVVe9fqbY2zJDSQ==", + "version": "0.12.2", + "resolved": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", + "integrity": "sha512-6a5hLqmoGcW6hVnWvzgRkLj9+VtzyLmnilFDCqTzXvZwzRRcDgda8I6PwcUSOv/AI+Qhn+BTO+IiOrEWHAqk8Q==", "license": "MIT", "funding": { "url": "https://github.com/sponsors/ocavue" @@ -31480,8 +31592,8 @@ "prosemirror-transform": "^1.8.0", "prosemirror-view": "^1.32.4", "refractor": "^4.8.1", - "shiki": "^1.9.0", - "sugar-high": "^0.6.1" + "shiki": "^1.9.0 || ^2.0.0 || ^3.0.0", + "sugar-high": "^0.6.1 || ^0.7.0 || ^0.8.0 || ^0.9.0" }, "peerDependenciesMeta": { "@types/hast": { @@ -32234,6 +32346,7 @@ "@aws-sdk/client-s3": "^3.609.0", "@aws-sdk/s3-request-presigner": "^3.609.0", "@blocknote/ariakit": "^0.25.2", + "@blocknote/code-block": "^0.25.2", "@blocknote/core": "^0.25.2", "@blocknote/mantine": "^0.25.2", "@blocknote/react": "^0.25.2", diff --git a/playground/package.json b/playground/package.json index 8789afe280..d586303528 100644 --- a/playground/package.json +++ b/playground/package.json @@ -13,6 +13,7 @@ "@aws-sdk/client-s3": "^3.609.0", "@aws-sdk/s3-request-presigner": "^3.609.0", "@blocknote/ariakit": "^0.25.2", + "@blocknote/code-block": "^0.25.2", "@blocknote/core": "^0.25.2", "@blocknote/mantine": "^0.25.2", "@blocknote/react": "^0.25.2", From 8a92651029ba5285cad636110fb4ecbb338964ed Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Fri, 14 Mar 2025 14:33:18 +0100 Subject: [PATCH 05/18] docs: example integration (revert me) --- examples/01-basic/01-minimal/App.tsx | 5 ++++- examples/01-basic/01-minimal/package.json | 3 ++- examples/01-basic/01-minimal/vite.config.ts | 4 ++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/examples/01-basic/01-minimal/App.tsx b/examples/01-basic/01-minimal/App.tsx index d4fd6f2e12..36e1dd09fe 100644 --- a/examples/01-basic/01-minimal/App.tsx +++ b/examples/01-basic/01-minimal/App.tsx @@ -2,10 +2,13 @@ import "@blocknote/core/fonts/inter.css"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { useCreateBlockNote } from "@blocknote/react"; +import { codeBlock } from "@blocknote/code-block"; export default function App() { // Creates a new editor instance. - const editor = useCreateBlockNote({}); + const editor = useCreateBlockNote({ + codeBlock, + }); // Renders the editor instance using a React component. return ; diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json index 5f028d3f39..6bd8904e89 100644 --- a/examples/01-basic/01-minimal/package.json +++ b/examples/01-basic/01-minimal/package.json @@ -11,6 +11,7 @@ "lint": "eslint . --max-warnings 0" }, "dependencies": { + "@blocknote/code-block": "latest", "@blocknote/core": "latest", "@blocknote/react": "latest", "@blocknote/ariakit": "latest", @@ -34,4 +35,4 @@ "eslintIgnore": [ "dist" ] -} \ No newline at end of file +} diff --git a/examples/01-basic/01-minimal/vite.config.ts b/examples/01-basic/01-minimal/vite.config.ts index f62ab20bc2..68af3c4cf1 100644 --- a/examples/01-basic/01-minimal/vite.config.ts +++ b/examples/01-basic/01-minimal/vite.config.ts @@ -27,6 +27,10 @@ export default defineConfig((conf) => ({ __dirname, "../../packages/react/src/" ), + "@blocknote/code-block": path.resolve( + __dirname, + "../../packages/code-block/src/" + ), } as any), }, })); From eda4f7000fca5b53bd90145181e13a03826a16d6 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Fri, 14 Mar 2025 14:42:19 +0100 Subject: [PATCH 06/18] chore: bump to latest prosemirror-highlight version --- package-lock.json | 296 ++----------------------------- packages/code-block/package.json | 3 +- packages/core/package.json | 2 +- 3 files changed, 21 insertions(+), 280 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8924b34a5e..97ec5face2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9606,20 +9606,6 @@ "hast-util-to-html": "^9.0.5" } }, - "node_modules/@shikijs/core/node_modules/@shikijs/types": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", - "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, - "node_modules/@shikijs/core/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, "node_modules/@shikijs/core/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", @@ -9686,40 +9672,6 @@ "oniguruma-to-es": "^4.1.0" } }, - "node_modules/@shikijs/engine-javascript/node_modules/@shikijs/types": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", - "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, - "node_modules/@shikijs/engine-javascript/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, - "node_modules/@shikijs/engine-javascript/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/@shikijs/engine-oniguruma": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.22.1.tgz", - "integrity": "sha512-L+1Vmd+a2kk8HtogUFymQS6BjUfJnzcWoUp1BUgxoDiklbKSMvrsMuLZGevTOP1m0rEjgnC5MsDmsr8lX1lC+Q==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0" - } - }, "node_modules/@shikijs/langs": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.2.1.tgz", @@ -9740,50 +9692,6 @@ "node": ">=20" } }, - "node_modules/@shikijs/langs-precompiled/node_modules/@shikijs/types": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", - "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, - "node_modules/@shikijs/langs-precompiled/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, - "node_modules/@shikijs/langs-precompiled/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/@shikijs/langs/node_modules/@shikijs/types": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", - "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, - "node_modules/@shikijs/langs/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, - "node_modules/@shikijs/langs/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dependencies": { - "@types/unist": "*" - } - }, "node_modules/@shikijs/themes": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-3.2.1.tgz", @@ -9792,7 +9700,7 @@ "@shikijs/types": "3.2.1" } }, - "node_modules/@shikijs/themes/node_modules/@shikijs/types": { + "node_modules/@shikijs/types": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", @@ -9801,49 +9709,18 @@ "@types/hast": "^3.0.4" } }, - "node_modules/@shikijs/themes/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, - "node_modules/@shikijs/themes/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dependencies": { - "@types/unist": "*" - } - }, - "node_modules/@shikijs/types": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz", - "integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/vscode-textmate": "^9.3.0", - "@types/hast": "^3.0.4" - } - }, "node_modules/@shikijs/types/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "license": "MIT", - "optional": true, - "peer": true, "dependencies": { "@types/unist": "*" } }, "node_modules/@shikijs/vscode-textmate": { - "version": "9.3.0", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-9.3.0.tgz", - "integrity": "sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==", - "license": "MIT", - "optional": true, - "peer": true + "version": "10.0.2", + "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", + "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" }, "node_modules/@shuding/opentype.js": { "version": "1.4.0-beta.0", @@ -24140,20 +24017,6 @@ "regex-utilities": "^2.3.0" } }, - "node_modules/oniguruma-to-js": { - "version": "0.4.3", - "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.3.tgz", - "integrity": "sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "regex": "^4.3.2" - }, - "funding": { - "url": "https://github.com/sponsors/antfu" - } - }, "node_modules/open": { "version": "8.4.2", "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz", @@ -26810,14 +26673,6 @@ "@babel/runtime": "^7.8.4" } }, - "node_modules/regex": { - "version": "4.3.3", - "resolved": "https://registry.npmjs.org/regex/-/regex-4.3.3.tgz", - "integrity": "sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==", - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/regex-recursion": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", @@ -31410,7 +31265,8 @@ "@shikijs/engine-javascript": "^3.2.1", "@shikijs/langs": "^3.2.1", "@shikijs/langs-precompiled": "^3.2.1", - "@shikijs/themes": "^3.2.1" + "@shikijs/themes": "^3.2.1", + "@shikijs/types": "^3.2.1" }, "devDependencies": { "@blocknote/core": "^0.25.2", @@ -31455,7 +31311,7 @@ "emoji-mart": "^5.6.0", "hast-util-from-dom": "^4.2.0", "prosemirror-dropcursor": "^1.8.1", - "prosemirror-highlight": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", + "prosemirror-highlight": "^0.13.0", "prosemirror-model": "^1.24.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.4", @@ -31498,24 +31354,11 @@ } } }, - "packages/core/node_modules/@shikijs/types": { - "version": "3.2.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-3.2.1.tgz", - "integrity": "sha512-/NTWAk4KE2M8uac0RhOsIhYQf4pdU0OywQuYDGIGAJ6Mjunxl2cGiuLkvu4HLCMn+OTTLRWkjZITp+aYJv60yA==", - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.2", - "@types/hast": "^3.0.4" - } - }, - "packages/core/node_modules/@shikijs/types/node_modules/@shikijs/vscode-textmate": { - "version": "10.0.2", - "resolved": "https://registry.npmjs.org/@shikijs/vscode-textmate/-/vscode-textmate-10.0.2.tgz", - "integrity": "sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==" - }, "packages/core/node_modules/@types/hast": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", + "devOptional": true, "license": "MIT", "dependencies": { "@types/unist": "*" @@ -31524,66 +31367,18 @@ "packages/core/node_modules/@types/unist": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==" - }, - "packages/core/node_modules/hast-util-to-html": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", - "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", - "optional": true, - "peer": true, - "dependencies": { - "@types/hast": "^3.0.0", - "@types/unist": "^3.0.0", - "ccount": "^2.0.0", - "comma-separated-tokens": "^2.0.0", - "hast-util-whitespace": "^3.0.0", - "html-void-elements": "^3.0.0", - "mdast-util-to-hast": "^13.0.0", - "property-information": "^7.0.0", - "space-separated-tokens": "^2.0.0", - "stringify-entities": "^4.0.0", - "zwitch": "^2.0.4" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "packages/core/node_modules/hast-util-whitespace": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", - "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", - "optional": true, - "peer": true, - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "packages/core/node_modules/property-information": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz", - "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==", - "optional": true, - "peer": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } + "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", + "devOptional": true }, "packages/core/node_modules/prosemirror-highlight": { - "version": "0.12.2", - "resolved": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", - "integrity": "sha512-6a5hLqmoGcW6hVnWvzgRkLj9+VtzyLmnilFDCqTzXvZwzRRcDgda8I6PwcUSOv/AI+Qhn+BTO+IiOrEWHAqk8Q==", - "license": "MIT", + "version": "0.13.0", + "resolved": "https://registry.npmjs.org/prosemirror-highlight/-/prosemirror-highlight-0.13.0.tgz", + "integrity": "sha512-GIC2VCTUnukNdsEGLQWWOVpYPl/7/KrVp4xs7XMB48/4rhUrHK8hp8TEog4Irmv+2kmjx24RLnaisGOCP6U8jw==", "funding": { "url": "https://github.com/sponsors/ocavue" }, "peerDependencies": { + "@shikijs/types": "^1.29.2 || ^2.0.0 || ^3.0.0", "@types/hast": "^3.0.0", "highlight.js": "^11.9.0", "lowlight": "^3.1.0", @@ -31591,11 +31386,13 @@ "prosemirror-state": "^1.4.3", "prosemirror-transform": "^1.8.0", "prosemirror-view": "^1.32.4", - "refractor": "^4.8.1", - "shiki": "^1.9.0 || ^2.0.0 || ^3.0.0", + "refractor": "^5.0.0", "sugar-high": "^0.6.1 || ^0.7.0 || ^0.8.0 || ^0.9.0" }, "peerDependenciesMeta": { + "@shikijs/types": { + "optional": true + }, "@types/hast": { "optional": true }, @@ -31620,9 +31417,6 @@ "refractor": { "optional": true }, - "shiki": { - "optional": true - }, "sugar-high": { "optional": true } @@ -31645,60 +31439,6 @@ "url": "https://github.com/sponsors/isaacs" } }, - "packages/core/node_modules/shiki": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.22.1.tgz", - "integrity": "sha512-PbJ6XxrWLMwB2rm3qdjIHNm3zq4SfFnOx0B3rEoi4AN8AUngsdyZ1tRe5slMPtn6jQkbUURLNZPpLR7Do3k78g==", - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/core": "1.22.1", - "@shikijs/engine-javascript": "1.22.1", - "@shikijs/engine-oniguruma": "1.22.1", - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0", - "@types/hast": "^3.0.4" - } - }, - "packages/core/node_modules/shiki/node_modules/@shikijs/core": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.22.1.tgz", - "integrity": "sha512-bqAhT/Ri5ixV4oYsvJNH8UJjpjbINWlWyXY6tBTsP4OmD6XnFv43nRJ+lTdxd2rmG5pgam/x+zGR6kLRXrpEKA==", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/engine-javascript": "1.22.1", - "@shikijs/engine-oniguruma": "1.22.1", - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.3" - } - }, - "packages/core/node_modules/shiki/node_modules/@shikijs/engine-javascript": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.22.1.tgz", - "integrity": "sha512-540pyoy0LWe4jj2BVbgELwOFu1uFvRI7lg4hdsExrSXA9x7gqfzZ/Nnh4RfX86aDAgJ647gx4TCmRwACbnQSvw==", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/types": "1.22.1", - "@shikijs/vscode-textmate": "^9.3.0", - "oniguruma-to-js": "0.4.3" - } - }, - "packages/core/node_modules/shiki/node_modules/@shikijs/types": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.22.1.tgz", - "integrity": "sha512-+45f8mu/Hxqs6Kyhfm98Nld5n7Q7lwhjU8UtdQwrOPs7BnM4VAb929O3IQ2ce+4D7SlNFlZGd8CnKRSnwbQreQ==", - "optional": true, - "peer": true, - "dependencies": { - "@shikijs/vscode-textmate": "^9.3.0", - "@types/hast": "^3.0.4" - } - }, "packages/dev-scripts": { "name": "@blocknote/dev-scripts", "version": "0.25.1", diff --git a/packages/code-block/package.json b/packages/code-block/package.json index 2beae1666d..7568fe27af 100644 --- a/packages/code-block/package.json +++ b/packages/code-block/package.json @@ -48,7 +48,8 @@ "@shikijs/engine-javascript": "^3.2.1", "@shikijs/langs-precompiled": "^3.2.1", "@shikijs/langs": "^3.2.1", - "@shikijs/themes": "^3.2.1" + "@shikijs/themes": "^3.2.1", + "@shikijs/types": "^3.2.1" }, "devDependencies": { "@blocknote/core": "^0.25.2", diff --git a/packages/core/package.json b/packages/core/package.json index 4753f52808..2538f6d311 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -86,7 +86,7 @@ "emoji-mart": "^5.6.0", "hast-util-from-dom": "^4.2.0", "prosemirror-dropcursor": "^1.8.1", - "prosemirror-highlight": "https://pkg.pr.new/ocavue/prosemirror-highlight@80", + "prosemirror-highlight": "^0.13.0", "prosemirror-model": "^1.24.1", "prosemirror-state": "^1.4.3", "prosemirror-tables": "^1.6.4", From 9ef6b40a7bd46c164cc1dc5914baba52bd8a2e8f Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Sat, 15 Mar 2025 11:59:43 +0100 Subject: [PATCH 07/18] docs: add examples and docs --- examples/01-basic/01-minimal/App.tsx | 5 +- examples/01-basic/01-minimal/package.json | 3 +- examples/01-basic/01-minimal/vite.config.ts | 4 - .../04-theming/06-code-block/.bnexample.json | 6 ++ examples/04-theming/06-code-block/App.tsx | 16 ++++ examples/04-theming/06-code-block/README.md | 27 ++++++ examples/04-theming/06-code-block/index.html | 14 +++ examples/04-theming/06-code-block/main.tsx | 11 +++ .../04-theming/06-code-block/package.json | 37 ++++++++ .../04-theming/06-code-block/tsconfig.json | 36 +++++++ .../04-theming/06-code-block/vite.config.ts | 32 +++++++ .../07-custom-code-block/.bnexample.json | 6 ++ .../04-theming/07-custom-code-block/App.tsx | 95 +++++++++++++++++++ .../04-theming/07-custom-code-block/README.md | 49 ++++++++++ .../07-custom-code-block/index.html | 14 +++ .../04-theming/07-custom-code-block/main.tsx | 11 +++ .../07-custom-code-block/package.json | 37 ++++++++ .../07-custom-code-block/shiki.bundle.ts | 63 ++++++++++++ .../07-custom-code-block/tsconfig.json | 36 +++++++ .../07-custom-code-block/vite.config.ts | 32 +++++++ playground/src/examples.gen.tsx | 36 +++++++ 21 files changed, 560 insertions(+), 10 deletions(-) create mode 100644 examples/04-theming/06-code-block/.bnexample.json create mode 100644 examples/04-theming/06-code-block/App.tsx create mode 100644 examples/04-theming/06-code-block/README.md create mode 100644 examples/04-theming/06-code-block/index.html create mode 100644 examples/04-theming/06-code-block/main.tsx create mode 100644 examples/04-theming/06-code-block/package.json create mode 100644 examples/04-theming/06-code-block/tsconfig.json create mode 100644 examples/04-theming/06-code-block/vite.config.ts create mode 100644 examples/04-theming/07-custom-code-block/.bnexample.json create mode 100644 examples/04-theming/07-custom-code-block/App.tsx create mode 100644 examples/04-theming/07-custom-code-block/README.md create mode 100644 examples/04-theming/07-custom-code-block/index.html create mode 100644 examples/04-theming/07-custom-code-block/main.tsx create mode 100644 examples/04-theming/07-custom-code-block/package.json create mode 100644 examples/04-theming/07-custom-code-block/shiki.bundle.ts create mode 100644 examples/04-theming/07-custom-code-block/tsconfig.json create mode 100644 examples/04-theming/07-custom-code-block/vite.config.ts diff --git a/examples/01-basic/01-minimal/App.tsx b/examples/01-basic/01-minimal/App.tsx index 36e1dd09fe..a3b92bafd2 100644 --- a/examples/01-basic/01-minimal/App.tsx +++ b/examples/01-basic/01-minimal/App.tsx @@ -2,13 +2,10 @@ import "@blocknote/core/fonts/inter.css"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { useCreateBlockNote } from "@blocknote/react"; -import { codeBlock } from "@blocknote/code-block"; export default function App() { // Creates a new editor instance. - const editor = useCreateBlockNote({ - codeBlock, - }); + const editor = useCreateBlockNote(); // Renders the editor instance using a React component. return ; diff --git a/examples/01-basic/01-minimal/package.json b/examples/01-basic/01-minimal/package.json index 6bd8904e89..5f028d3f39 100644 --- a/examples/01-basic/01-minimal/package.json +++ b/examples/01-basic/01-minimal/package.json @@ -11,7 +11,6 @@ "lint": "eslint . --max-warnings 0" }, "dependencies": { - "@blocknote/code-block": "latest", "@blocknote/core": "latest", "@blocknote/react": "latest", "@blocknote/ariakit": "latest", @@ -35,4 +34,4 @@ "eslintIgnore": [ "dist" ] -} +} \ No newline at end of file diff --git a/examples/01-basic/01-minimal/vite.config.ts b/examples/01-basic/01-minimal/vite.config.ts index 68af3c4cf1..f62ab20bc2 100644 --- a/examples/01-basic/01-minimal/vite.config.ts +++ b/examples/01-basic/01-minimal/vite.config.ts @@ -27,10 +27,6 @@ export default defineConfig((conf) => ({ __dirname, "../../packages/react/src/" ), - "@blocknote/code-block": path.resolve( - __dirname, - "../../packages/code-block/src/" - ), } as any), }, })); diff --git a/examples/04-theming/06-code-block/.bnexample.json b/examples/04-theming/06-code-block/.bnexample.json new file mode 100644 index 0000000000..6d4a02dd52 --- /dev/null +++ b/examples/04-theming/06-code-block/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": ["Basic"] +} diff --git a/examples/04-theming/06-code-block/App.tsx b/examples/04-theming/06-code-block/App.tsx new file mode 100644 index 0000000000..3cbbb76c2f --- /dev/null +++ b/examples/04-theming/06-code-block/App.tsx @@ -0,0 +1,16 @@ +import "@blocknote/core/fonts/inter.css"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; +// This packages some of the most used languages in on-demand bundle +import { codeBlock } from "@blocknote/code-block"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock, + }); + + // Renders the editor instance using a React component. + return ; +} diff --git a/examples/04-theming/06-code-block/README.md b/examples/04-theming/06-code-block/README.md new file mode 100644 index 0000000000..54c760878d --- /dev/null +++ b/examples/04-theming/06-code-block/README.md @@ -0,0 +1,27 @@ +# Code Block Highlighting + +To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size + +We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users. + +To use it, you can do the following: + +```tsx +import { codeBlock } from "@blocknote/code-block"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock, + }); + + // Renders the editor instance using a React component. + return ; +} +``` + +If you need to configure the themes or support more languages, you can provide your own codeBlock highlighting like described in [the custom code block docs](./custom-code-block/) + +**Relevant Docs:** + +- [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/04-theming/06-code-block/index.html b/examples/04-theming/06-code-block/index.html new file mode 100644 index 0000000000..bf5de26360 --- /dev/null +++ b/examples/04-theming/06-code-block/index.html @@ -0,0 +1,14 @@ + + + + + + Code Block Highlighting + + +
+ + + diff --git a/examples/04-theming/06-code-block/main.tsx b/examples/04-theming/06-code-block/main.tsx new file mode 100644 index 0000000000..f88b490fbd --- /dev/null +++ b/examples/04-theming/06-code-block/main.tsx @@ -0,0 +1,11 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + +); diff --git a/examples/04-theming/06-code-block/package.json b/examples/04-theming/06-code-block/package.json new file mode 100644 index 0000000000..0a55c50898 --- /dev/null +++ b/examples/04-theming/06-code-block/package.json @@ -0,0 +1,37 @@ +{ + "name": "@blocknote/example-code-block", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "lint": "eslint . --max-warnings 0" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.10.0", + "vite": "^5.3.4" + }, + "eslintConfig": { + "extends": [ + "../../../.eslintrc.js" + ] + }, + "eslintIgnore": [ + "dist" + ] +} \ No newline at end of file diff --git a/examples/04-theming/06-code-block/tsconfig.json b/examples/04-theming/06-code-block/tsconfig.json new file mode 100644 index 0000000000..dbe3e6f62d --- /dev/null +++ b/examples/04-theming/06-code-block/tsconfig.json @@ -0,0 +1,36 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true + }, + "include": [ + "." + ], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} \ No newline at end of file diff --git a/examples/04-theming/06-code-block/vite.config.ts b/examples/04-theming/06-code-block/vite.config.ts new file mode 100644 index 0000000000..f62ab20bc2 --- /dev/null +++ b/examples/04-theming/06-code-block/vite.config.ts @@ -0,0 +1,32 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import react from "@vitejs/plugin-react"; +import * as fs from "fs"; +import * as path from "path"; +import { defineConfig } from "vite"; +// import eslintPlugin from "vite-plugin-eslint"; +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // Comment out the lines below to load a built version of blocknote + // or, keep as is to load live from sources with live reload working + "@blocknote/core": path.resolve( + __dirname, + "../../packages/core/src/" + ), + "@blocknote/react": path.resolve( + __dirname, + "../../packages/react/src/" + ), + } as any), + }, +})); diff --git a/examples/04-theming/07-custom-code-block/.bnexample.json b/examples/04-theming/07-custom-code-block/.bnexample.json new file mode 100644 index 0000000000..6d4a02dd52 --- /dev/null +++ b/examples/04-theming/07-custom-code-block/.bnexample.json @@ -0,0 +1,6 @@ +{ + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": ["Basic"] +} diff --git a/examples/04-theming/07-custom-code-block/App.tsx b/examples/04-theming/07-custom-code-block/App.tsx new file mode 100644 index 0000000000..52f87abd77 --- /dev/null +++ b/examples/04-theming/07-custom-code-block/App.tsx @@ -0,0 +1,95 @@ +import "@blocknote/core/fonts/inter.css"; +import { BlockNoteView } from "@blocknote/mantine"; +import "@blocknote/mantine/style.css"; +import { useCreateBlockNote } from "@blocknote/react"; +// Bundle created from `npx shiki-codegen --langs typescript,javascript,react --themes light-plus,dark-plus --engine javascript --precompiled ./shiki.bundle.ts` +import { createHighlighter } from "./shiki.bundle.js"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock: { + indentLineWithTab: true, + defaultLanguage: "typescript", + supportedLanguages: { + typescript: { + name: "TypeScript", + aliases: ["ts"], + }, + javascript: { + name: "JavaScript", + aliases: ["js"], + }, + vue: { + name: "Vue", + }, + }, + // This creates a highlighter, it can be asynchronous to load it afterwards + createHighlighter: () => + createHighlighter({ + themes: ["dark-plus", "light-plus"], + langs: [], + }), + }, + initialContent: [ + { + id: "fc832df4-bd15-49d2-8d64-140c27f29692", + type: "codeBlock", + props: { + language: "typescript", + }, + content: [ + { + type: "text", + text: "const x = 3 * 4;", + styles: {}, + }, + ], + children: [], + }, + { + id: "aecf786b-cbde-4915-b86c-b4c8264fc8f7", + type: "paragraph", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + }, + content: [], + children: [], + }, + { + id: "f85ab261-dfe8-47f0-929f-533808a4184d", + type: "heading", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + level: 3, + }, + content: [ + { + type: "text", + text: 'Click on "Typescript" above to see the different supported languages', + styles: {}, + }, + ], + children: [], + }, + { + id: "dec03378-6b49-442a-89f0-b2551ce0f60c", + type: "paragraph", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + }, + content: [], + children: [], + }, + ], + }); + + // Renders the editor instance using a React component. + return ; +} diff --git a/examples/04-theming/07-custom-code-block/README.md b/examples/04-theming/07-custom-code-block/README.md new file mode 100644 index 0000000000..dd9c37f05a --- /dev/null +++ b/examples/04-theming/07-custom-code-block/README.md @@ -0,0 +1,49 @@ +# Custom Code Block Theme & Language + +To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook. + +This allows you to configure a shiki highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use. + +To create a highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a highlighter for your languages and themes. + +For example to create a highlighter using the optimized javascript engine, javascript, typescript, vue, and light and dark themes, you can run the following command: + +```bash +npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts +``` + +This will generate a `shiki.bundle.ts` file that you can use to create a highlighter for your editor. + +Like this: + +```ts +import { createHighlighter } from "./shiki.bundle.js"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock: { + indentLineWithTab: true, + defaultLanguage: "typescript", + supportedLanguages: { + typescript: { + name: "TypeScript", + aliases: ["ts"], + }, + }, + createHighlighter: () => + createHighlighter({ + themes: ["light-plus", "dark-plus"], + langs: [], + }), + }, + }); + + return ; +} +``` + +**Relevant Docs:** + +- [Editor Setup](/docs/editor-basics/setup) +- [shiki-codegen](https://shiki.style/packages/codegen) diff --git a/examples/04-theming/07-custom-code-block/index.html b/examples/04-theming/07-custom-code-block/index.html new file mode 100644 index 0000000000..1b7a1f0b09 --- /dev/null +++ b/examples/04-theming/07-custom-code-block/index.html @@ -0,0 +1,14 @@ + + + + + + Custom Code Block Theme & Language + + +
+ + + diff --git a/examples/04-theming/07-custom-code-block/main.tsx b/examples/04-theming/07-custom-code-block/main.tsx new file mode 100644 index 0000000000..f88b490fbd --- /dev/null +++ b/examples/04-theming/07-custom-code-block/main.tsx @@ -0,0 +1,11 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import React from "react"; +import { createRoot } from "react-dom/client"; +import App from "./App"; + +const root = createRoot(document.getElementById("root")!); +root.render( + + + +); diff --git a/examples/04-theming/07-custom-code-block/package.json b/examples/04-theming/07-custom-code-block/package.json new file mode 100644 index 0000000000..c549ab9864 --- /dev/null +++ b/examples/04-theming/07-custom-code-block/package.json @@ -0,0 +1,37 @@ +{ + "name": "@blocknote/example-custom-code-block", + "description": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "private": true, + "version": "0.12.4", + "scripts": { + "start": "vite", + "dev": "vite", + "build": "tsc && vite build", + "preview": "vite preview", + "lint": "eslint . --max-warnings 0" + }, + "dependencies": { + "@blocknote/core": "latest", + "@blocknote/react": "latest", + "@blocknote/ariakit": "latest", + "@blocknote/mantine": "latest", + "@blocknote/shadcn": "latest", + "react": "^18.3.1", + "react-dom": "^18.3.1" + }, + "devDependencies": { + "@types/react": "^18.0.25", + "@types/react-dom": "^18.0.9", + "@vitejs/plugin-react": "^4.3.1", + "eslint": "^8.10.0", + "vite": "^5.3.4" + }, + "eslintConfig": { + "extends": [ + "../../../.eslintrc.js" + ] + }, + "eslintIgnore": [ + "dist" + ] +} \ No newline at end of file diff --git a/examples/04-theming/07-custom-code-block/shiki.bundle.ts b/examples/04-theming/07-custom-code-block/shiki.bundle.ts new file mode 100644 index 0000000000..a5d6eeaceb --- /dev/null +++ b/examples/04-theming/07-custom-code-block/shiki.bundle.ts @@ -0,0 +1,63 @@ +/* Generate by @shikijs/codegen */ +import type { + DynamicImportLanguageRegistration, + DynamicImportThemeRegistration, + HighlighterGeneric, +} from "@shikijs/types"; +import { + createSingletonShorthands, + createdBundledHighlighter, +} from "@shikijs/core"; +import { createJavaScriptRegexEngine } from "@shikijs/engine-javascript"; + +type BundledLanguage = "typescript" | "ts" | "javascript" | "js" | "vue"; +type BundledTheme = "light-plus" | "dark-plus"; +type Highlighter = HighlighterGeneric; + +const bundledLanguages = { + typescript: () => import("@shikijs/langs-precompiled/typescript"), + ts: () => import("@shikijs/langs-precompiled/typescript"), + javascript: () => import("@shikijs/langs-precompiled/javascript"), + js: () => import("@shikijs/langs-precompiled/javascript"), + vue: () => import("@shikijs/langs-precompiled/vue"), +} as Record; + +const bundledThemes = { + "light-plus": () => import("@shikijs/themes/light-plus"), + "dark-plus": () => import("@shikijs/themes/dark-plus"), +} as Record; + +const createHighlighter = /* @__PURE__ */ createdBundledHighlighter< + BundledLanguage, + BundledTheme +>({ + langs: bundledLanguages, + themes: bundledThemes, + engine: () => createJavaScriptRegexEngine(), +}); + +const { + codeToHtml, + codeToHast, + codeToTokensBase, + codeToTokens, + codeToTokensWithThemes, + getSingletonHighlighter, + getLastGrammarState, +} = /* @__PURE__ */ createSingletonShorthands( + createHighlighter +); + +export { + bundledLanguages, + bundledThemes, + codeToHast, + codeToHtml, + codeToTokens, + codeToTokensBase, + codeToTokensWithThemes, + createHighlighter, + getLastGrammarState, + getSingletonHighlighter, +}; +export type { BundledLanguage, BundledTheme, Highlighter }; diff --git a/examples/04-theming/07-custom-code-block/tsconfig.json b/examples/04-theming/07-custom-code-block/tsconfig.json new file mode 100644 index 0000000000..dbe3e6f62d --- /dev/null +++ b/examples/04-theming/07-custom-code-block/tsconfig.json @@ -0,0 +1,36 @@ +{ + "__comment": "AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "lib": [ + "DOM", + "DOM.Iterable", + "ESNext" + ], + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": false, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "module": "ESNext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react-jsx", + "composite": true + }, + "include": [ + "." + ], + "__ADD_FOR_LOCAL_DEV_references": [ + { + "path": "../../../packages/core/" + }, + { + "path": "../../../packages/react/" + } + ] +} \ No newline at end of file diff --git a/examples/04-theming/07-custom-code-block/vite.config.ts b/examples/04-theming/07-custom-code-block/vite.config.ts new file mode 100644 index 0000000000..f62ab20bc2 --- /dev/null +++ b/examples/04-theming/07-custom-code-block/vite.config.ts @@ -0,0 +1,32 @@ +// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY +import react from "@vitejs/plugin-react"; +import * as fs from "fs"; +import * as path from "path"; +import { defineConfig } from "vite"; +// import eslintPlugin from "vite-plugin-eslint"; +// https://vitejs.dev/config/ +export default defineConfig((conf) => ({ + plugins: [react()], + optimizeDeps: {}, + build: { + sourcemap: true, + }, + resolve: { + alias: + conf.command === "build" || + !fs.existsSync(path.resolve(__dirname, "../../packages/core/src")) + ? {} + : ({ + // Comment out the lines below to load a built version of blocknote + // or, keep as is to load live from sources with live reload working + "@blocknote/core": path.resolve( + __dirname, + "../../packages/core/src/" + ), + "@blocknote/react": path.resolve( + __dirname, + "../../packages/react/src/" + ), + } as any), + }, +})); diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index b2f7adda71..b884c4ec75 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -798,6 +798,42 @@ "pathFromRoot": "examples/04-theming", "slug": "theming" } + }, + { + "projectSlug": "code-block", + "fullSlug": "theming/code-block", + "pathFromRoot": "examples/04-theming/06-code-block", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Code Block Highlighting", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + } + }, + { + "projectSlug": "custom-code-block", + "fullSlug": "theming/custom-code-block", + "pathFromRoot": "examples/04-theming/07-custom-code-block", + "config": { + "playground": true, + "docs": true, + "author": "matthewlipski", + "tags": [ + "Basic" + ] + }, + "title": "Custom Code Block Theme & Language", + "group": { + "pathFromRoot": "examples/04-theming", + "slug": "theming" + } } ] }, From c790747ddf9149a6ab6df1965b29c7d8ded87f8d Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 16:51:34 +0100 Subject: [PATCH 08/18] test: update snapshots --- .../__snapshots__/internal/basicBlocks.html | 2 +- .../codeBlock/defaultLanguage/external.html | 2 +- .../codeBlock/defaultLanguage/internal.html | 2 +- .../__snapshots__/codeBlock/empty/external.html | 2 +- .../__snapshots__/codeBlock/empty/internal.html | 2 +- .../codeBlock/defaultLanguage/markdown.md | 4 +--- .../__snapshots__/codeBlock/empty/markdown.md | 2 +- .../api/exporters/markdown/markdownExporter.test.ts | 2 +- .../__snapshots__/nodeConversions.test.ts.snap | 4 ++-- .../html/__snapshots__/parse-codeblocks.json | 2 +- .../core/src/api/testUtil/cases/defaultSchema.ts | 13 +++++++++++++ .../src/blocks/CodeBlockContent/CodeBlockContent.ts | 4 ++-- 12 files changed, 26 insertions(+), 15 deletions(-) diff --git a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html index 8c7757e46a..82cda89dab 100644 --- a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html +++ b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html @@ -1 +1 @@ -

Paragraph

Heading

  1. Numbered List Item

  • Bullet List Item

  • Check List Item

console.log("Hello World");

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Add image

\ No newline at end of file +

Paragraph

Heading

  1. Numbered List Item

  • Bullet List Item

  • Check List Item

console.log("Hello World");

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Add image

\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html index 411e8e3b89..d2c402895c 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html @@ -1 +1 @@ -
console.log('Hello, world!');
\ No newline at end of file +
console.log('Hello, world!');
\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html index 43aae52f35..c3acc1691a 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html @@ -1 +1 @@ -
console.log('Hello, world!');
\ No newline at end of file +
console.log('Hello, world!');
\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html index 1cffb258fb..1b7ff004ff 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html index cd1f144f1b..7da573b074 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html @@ -1 +1 @@ -
\ No newline at end of file +
\ No newline at end of file diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md index eca2b94e33..01e04ececa 100644 --- a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md +++ b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md @@ -1,3 +1 @@ -```javascript -console.log('Hello, world!'); -``` + console.log('Hello, world!'); diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md index 04144d877f..47d4a3700c 100644 --- a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md +++ b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md @@ -1,2 +1,2 @@ -```javascript +``` ``` diff --git a/packages/core/src/api/exporters/markdown/markdownExporter.test.ts b/packages/core/src/api/exporters/markdown/markdownExporter.test.ts index 2eb7f67851..1b9e93c414 100644 --- a/packages/core/src/api/exporters/markdown/markdownExporter.test.ts +++ b/packages/core/src/api/exporters/markdown/markdownExporter.test.ts @@ -71,7 +71,7 @@ describe("markdownExporter", () => { for (const document of testCase.documents) { // eslint-disable-next-line no-loop-func - it("Convert " + document.name + " to HTML", async () => { + it("Convert " + document.name + " to Markdown", async () => { const nameSplit = document.name.split("/"); await convertToMarkdownAndCompareSnapshots( editor, diff --git a/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap b/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap index 245ab3ba9c..cfc33073f3 100644 --- a/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap +++ b/packages/core/src/api/nodeConversions/__snapshots__/nodeConversions.test.ts.snap @@ -699,7 +699,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert "content": [ { "attrs": { - "language": "javascript", + "language": "text", }, "content": [ { @@ -724,7 +724,7 @@ exports[`Test BlockNote-Prosemirror conversion > Case: default schema > Convert "content": [ { "attrs": { - "language": "javascript", + "language": "text", }, "type": "codeBlock", }, diff --git a/packages/core/src/api/parsers/html/__snapshots__/parse-codeblocks.json b/packages/core/src/api/parsers/html/__snapshots__/parse-codeblocks.json index 1481967f47..6387ab020d 100644 --- a/packages/core/src/api/parsers/html/__snapshots__/parse-codeblocks.json +++ b/packages/core/src/api/parsers/html/__snapshots__/parse-codeblocks.json @@ -3,7 +3,7 @@ "id": "1", "type": "codeBlock", "props": { - "language": "javascript" + "language": "text" }, "content": [ { diff --git a/packages/core/src/api/testUtil/cases/defaultSchema.ts b/packages/core/src/api/testUtil/cases/defaultSchema.ts index 2dbfaffb5c..2b1b47e5ec 100644 --- a/packages/core/src/api/testUtil/cases/defaultSchema.ts +++ b/packages/core/src/api/testUtil/cases/defaultSchema.ts @@ -23,6 +23,18 @@ export const defaultSchemaTestCases: EditorTestCases< return BlockNoteEditor.create({ schema: withPageBreak(BlockNoteSchema.create()), uploadFile: uploadToTmpFilesDotOrg_DEV_ONLY, + codeBlock: { + supportedLanguages: { + javascript: { + name: "JavaScript", + aliases: ["js"], + }, + python: { + name: "Python", + aliases: ["py"], + }, + }, + }, }); }, documents: [ @@ -213,6 +225,7 @@ export const defaultSchemaTestCases: EditorTestCases< blocks: [ { type: "codeBlock", + props: { language: "javascript" }, content: "const hello = 'world';\nconsole.log(hello);\n", }, ], diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts index 06f42f56ee..3157f0d299 100644 --- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts +++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts @@ -8,7 +8,7 @@ import { PropSchema, } from "../../schema/index.js"; import { createDefaultBlockDOMOutputSpec } from "../defaultBlockHelpers.js"; -import { HighlighterGeneric } from "@shikijs/types"; +import type { HighlighterGeneric } from "@shikijs/types"; import { BlockNoteEditor } from "../../index.js"; export type CodeBlockOptions = { @@ -426,6 +426,6 @@ function getLanguageId(options: CodeBlockOptions, languageName: string) { return ( Object.entries(options.supportedLanguages).find(([id, { aliases }]) => { return aliases?.includes(languageName) || id === languageName; - })?.[0] || options.defaultLanguage + })?.[0] || languageName ); } From ad0936da178cb94b81b7759f278abf0815ad675e Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 17:54:49 +0100 Subject: [PATCH 09/18] chore: update package-lock --- docs/package.json | 1 + examples/04-theming/06-code-block/package.json | 3 ++- package-lock.json | 1 + 3 files changed, 4 insertions(+), 1 deletion(-) diff --git a/docs/package.json b/docs/package.json index f4a35929f7..bc1b9373ca 100644 --- a/docs/package.json +++ b/docs/package.json @@ -10,6 +10,7 @@ }, "dependencies": { "@blocknote/ariakit": "^0.25.2", + "@blocknote/code-block": "^0.25.2", "@blocknote/core": "^0.25.2", "@blocknote/mantine": "^0.25.2", "@blocknote/react": "^0.25.2", diff --git a/examples/04-theming/06-code-block/package.json b/examples/04-theming/06-code-block/package.json index 0a55c50898..52bd9b48b9 100644 --- a/examples/04-theming/06-code-block/package.json +++ b/examples/04-theming/06-code-block/package.json @@ -11,6 +11,7 @@ "lint": "eslint . --max-warnings 0" }, "dependencies": { + "@blocknote/code-block": "latest", "@blocknote/core": "latest", "@blocknote/react": "latest", "@blocknote/ariakit": "latest", @@ -34,4 +35,4 @@ "eslintIgnore": [ "dist" ] -} \ No newline at end of file +} diff --git a/package-lock.json b/package-lock.json index 97ec5face2..c339aea737 100644 --- a/package-lock.json +++ b/package-lock.json @@ -28,6 +28,7 @@ "version": "0.25.2", "dependencies": { "@blocknote/ariakit": "^0.25.2", + "@blocknote/code-block": "^0.25.2", "@blocknote/core": "^0.25.2", "@blocknote/mantine": "^0.25.2", "@blocknote/react": "^0.25.2", From 5bda388fe05160f8fd0b8aa6065dd139d60529fb Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 18:12:35 +0100 Subject: [PATCH 10/18] build: get build to work again --- package-lock.json | 320 ++----------------------------- packages/code-block/package.json | 4 +- packages/core/src/index.ts | 3 +- 3 files changed, 15 insertions(+), 312 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6905d8f823..716825fd4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9673,35 +9673,6 @@ "oniguruma-to-es": "^4.1.0" } }, - "node_modules/@shikijs/engine-oniguruma": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.29.2.tgz", - "integrity": "sha512-7iiOx3SG8+g1MnlzZVDYiaeHe7Ez2Kf2HrJzdmGwkRisT7r4rak0e655AcM/tF9JG/kg5fMNYlLLKglbN7gBqA==", - "dev": true, - "dependencies": { - "@shikijs/types": "1.29.2", - "@shikijs/vscode-textmate": "^10.0.1" - } - }, - "node_modules/@shikijs/engine-oniguruma/node_modules/@shikijs/types": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.29.2.tgz", - "integrity": "sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==", - "dev": true, - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.1", - "@types/hast": "^3.0.4" - } - }, - "node_modules/@shikijs/engine-oniguruma/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dev": true, - "dependencies": { - "@types/unist": "*" - } - }, "node_modules/@shikijs/langs": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-3.2.1.tgz", @@ -17294,22 +17265,20 @@ "integrity": "sha512-IaOQ9puYtjrkq7Y0Ygl9KDZnrf/aiUJYUpVf89y8kyaxbRG7Y1SrX/jaumrv81vc61+kiMempujsM3Yw7w5qcw==" }, "node_modules/glob": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.1.tgz", - "integrity": "sha512-2jelhlq3E4ho74ZyVLN03oKdAZVUa6UDZzFLVH1H7dnoax+y9qyaq8zBkfDIggjniU19z0wU18y16jMB2eyVIw==", + "version": "10.4.5", + "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz", + "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==", "dependencies": { "foreground-child": "^3.1.0", "jackspeak": "^3.1.2", "minimatch": "^9.0.4", "minipass": "^7.1.2", + "package-json-from-dist": "^1.0.0", "path-scurry": "^1.11.1" }, "bin": { "glob": "dist/esm/bin.mjs" }, - "engines": { - "node": ">=16 || 14 >=14.18" - }, "funding": { "url": "https://github.com/sponsors/isaacs" } @@ -24283,6 +24252,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/package-json-from-dist": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz", + "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==" + }, "node_modules/pacote": { "version": "13.6.2", "resolved": "https://registry.npmjs.org/pacote/-/pacote-13.6.2.tgz", @@ -26703,15 +26677,6 @@ "@babel/runtime": "^7.8.4" } }, - "node_modules/regex": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/regex/-/regex-5.1.1.tgz", - "integrity": "sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==", - "dev": true, - "dependencies": { - "regex-utilities": "^2.3.0" - } - }, "node_modules/regex-recursion": { "version": "6.0.2", "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-6.0.2.tgz", @@ -31308,7 +31273,7 @@ "@shikijs/types": "^3.2.1" }, "devDependencies": { - "@blocknote/core": "^0.25.2", + "@blocknote/core": "^0.26.0", "eslint": "^8.10.0", "prettier": "^2.7.1", "rollup-plugin-webpack-stats": "^0.2.2", @@ -31318,270 +31283,7 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "@blocknote/core": "^0.25.2" - } - }, - "packages/code-block/node_modules/@blocknote/core": { - "version": "0.25.2", - "resolved": "https://registry.npmjs.org/@blocknote/core/-/core-0.25.2.tgz", - "integrity": "sha512-SQcQzNXSq0gqM2dNdNOhrQmAH6Q6Rk8NivM0phKm63RNkAEuFw8qkJC12vYrNioSYWBuoLZROOeV/3IKF0Wgxg==", - "dev": true, - "dependencies": { - "@emoji-mart/data": "^1.2.1", - "@tiptap/core": "^2.11.5", - "@tiptap/extension-bold": "^2.11.5", - "@tiptap/extension-code": "^2.11.5", - "@tiptap/extension-collaboration": "^2.11.5", - "@tiptap/extension-collaboration-cursor": "^2.11.5", - "@tiptap/extension-gapcursor": "^2.11.5", - "@tiptap/extension-hard-break": "^2.11.5", - "@tiptap/extension-history": "^2.11.5", - "@tiptap/extension-horizontal-rule": "^2.11.5", - "@tiptap/extension-italic": "^2.11.5", - "@tiptap/extension-link": "^2.11.5", - "@tiptap/extension-paragraph": "^2.11.5", - "@tiptap/extension-strike": "^2.11.5", - "@tiptap/extension-table-cell": "^2.11.5", - "@tiptap/extension-table-header": "^2.11.5", - "@tiptap/extension-table-row": "^2.11.5", - "@tiptap/extension-text": "^2.11.5", - "@tiptap/extension-underline": "^2.11.5", - "@tiptap/pm": "^2.11.5", - "emoji-mart": "^5.6.0", - "hast-util-from-dom": "^4.2.0", - "prosemirror-dropcursor": "^1.8.1", - "prosemirror-highlight": "^0.9.0", - "prosemirror-model": "^1.24.1", - "prosemirror-state": "^1.4.3", - "prosemirror-tables": "^1.6.4", - "prosemirror-transform": "^1.10.2", - "prosemirror-view": "^1.38.1", - "rehype-format": "^5.0.0", - "rehype-parse": "^8.0.4", - "rehype-remark": "^9.1.2", - "rehype-stringify": "^9.0.3", - "remark-gfm": "^3.0.1", - "remark-parse": "^10.0.1", - "remark-rehype": "^10.1.0", - "remark-stringify": "^10.0.2", - "shiki": "^1.22.0", - "unified": "^10.1.2", - "uuid": "^8.3.2", - "y-prosemirror": "1.2.17", - "y-protocols": "^1.0.6", - "yjs": "^13.6.15" - }, - "peerDependencies": { - "@hocuspocus/provider": "^2.15.2" - }, - "peerDependenciesMeta": { - "@hocuspocus/provider": { - "optional": true - } - } - }, - "packages/code-block/node_modules/@types/hast": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz", - "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==", - "dev": true, - "dependencies": { - "@types/unist": "*" - } - }, - "packages/code-block/node_modules/@types/unist": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz", - "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==", - "dev": true - }, - "packages/code-block/node_modules/hast-util-to-html": { - "version": "9.0.5", - "resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.5.tgz", - "integrity": "sha512-OguPdidb+fbHQSU4Q4ZiLKnzWo8Wwsf5bZfbvu7//a9oTYoqD/fWpe96NuHkoS9h0ccGOTe0C4NGXdtS0iObOw==", - "dev": true, - "dependencies": { - "@types/hast": "^3.0.0", - "@types/unist": "^3.0.0", - "ccount": "^2.0.0", - "comma-separated-tokens": "^2.0.0", - "hast-util-whitespace": "^3.0.0", - "html-void-elements": "^3.0.0", - "mdast-util-to-hast": "^13.0.0", - "property-information": "^7.0.0", - "space-separated-tokens": "^2.0.0", - "stringify-entities": "^4.0.0", - "zwitch": "^2.0.4" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "packages/code-block/node_modules/hast-util-whitespace": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz", - "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==", - "dev": true, - "dependencies": { - "@types/hast": "^3.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/unified" - } - }, - "packages/code-block/node_modules/oniguruma-to-es": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/oniguruma-to-es/-/oniguruma-to-es-2.3.0.tgz", - "integrity": "sha512-bwALDxriqfKGfUufKGGepCzu9x7nJQuoRoAFp4AnwehhC2crqrDIAP/uN2qdlsAvSMpeRC3+Yzhqc7hLmle5+g==", - "dev": true, - "dependencies": { - "emoji-regex-xs": "^1.0.0", - "regex": "^5.1.1", - "regex-recursion": "^5.1.1" - } - }, - "packages/code-block/node_modules/property-information": { - "version": "7.0.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-7.0.0.tgz", - "integrity": "sha512-7D/qOz/+Y4X/rzSB6jKxKUsQnphO046ei8qxG59mtM3RG3DHgTK81HrxrmoDVINJb8NKT5ZsRbwHvQ6B68Iyhg==", - "dev": true, - "funding": { - "type": "github", - "url": "https://github.com/sponsors/wooorm" - } - }, - "packages/code-block/node_modules/prosemirror-highlight": { - "version": "0.9.0", - "resolved": "https://registry.npmjs.org/prosemirror-highlight/-/prosemirror-highlight-0.9.0.tgz", - "integrity": "sha512-ujJ1M4JgHop8xZ1uyjFDDg8DkOfXC87tJMQAVDTgR9dQOsIv9MoSA6jGcP7xM84P0ecbu1bqVVe9fqbY2zJDSQ==", - "dev": true, - "funding": { - "url": "https://github.com/sponsors/ocavue" - }, - "peerDependencies": { - "@types/hast": "^3.0.0", - "highlight.js": "^11.9.0", - "lowlight": "^3.1.0", - "prosemirror-model": "^1.19.3", - "prosemirror-state": "^1.4.3", - "prosemirror-transform": "^1.8.0", - "prosemirror-view": "^1.32.4", - "refractor": "^4.8.1", - "shiki": "^1.9.0", - "sugar-high": "^0.6.1" - }, - "peerDependenciesMeta": { - "@types/hast": { - "optional": true - }, - "highlight.js": { - "optional": true - }, - "lowlight": { - "optional": true - }, - "prosemirror-model": { - "optional": true - }, - "prosemirror-state": { - "optional": true - }, - "prosemirror-transform": { - "optional": true - }, - "prosemirror-view": { - "optional": true - }, - "refractor": { - "optional": true - }, - "shiki": { - "optional": true - }, - "sugar-high": { - "optional": true - } - } - }, - "packages/code-block/node_modules/regex-recursion": { - "version": "5.1.1", - "resolved": "https://registry.npmjs.org/regex-recursion/-/regex-recursion-5.1.1.tgz", - "integrity": "sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==", - "dev": true, - "dependencies": { - "regex": "^5.1.1", - "regex-utilities": "^2.3.0" - } - }, - "packages/code-block/node_modules/shiki": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.29.2.tgz", - "integrity": "sha512-njXuliz/cP+67jU2hukkxCNuH1yUi4QfdZZY+sMr5PPrIyXSu5iTb/qYC4BiWWB0vZ+7TbdvYUCeL23zpwCfbg==", - "dev": true, - "dependencies": { - "@shikijs/core": "1.29.2", - "@shikijs/engine-javascript": "1.29.2", - "@shikijs/engine-oniguruma": "1.29.2", - "@shikijs/langs": "1.29.2", - "@shikijs/themes": "1.29.2", - "@shikijs/types": "1.29.2", - "@shikijs/vscode-textmate": "^10.0.1", - "@types/hast": "^3.0.4" - } - }, - "packages/code-block/node_modules/shiki/node_modules/@shikijs/core": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.29.2.tgz", - "integrity": "sha512-vju0lY9r27jJfOY4Z7+Rt/nIOjzJpZ3y+nYpqtUZInVoXQ/TJZcfGnNOGnKjFdVZb8qexiCuSlZRKcGfhhTTZQ==", - "dev": true, - "dependencies": { - "@shikijs/engine-javascript": "1.29.2", - "@shikijs/engine-oniguruma": "1.29.2", - "@shikijs/types": "1.29.2", - "@shikijs/vscode-textmate": "^10.0.1", - "@types/hast": "^3.0.4", - "hast-util-to-html": "^9.0.4" - } - }, - "packages/code-block/node_modules/shiki/node_modules/@shikijs/engine-javascript": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.29.2.tgz", - "integrity": "sha512-iNEZv4IrLYPv64Q6k7EPpOCE/nuvGiKl7zxdq0WFuRPF5PAE9PRo2JGq/d8crLusM59BRemJ4eOqrFrC4wiQ+A==", - "dev": true, - "dependencies": { - "@shikijs/types": "1.29.2", - "@shikijs/vscode-textmate": "^10.0.1", - "oniguruma-to-es": "^2.2.0" - } - }, - "packages/code-block/node_modules/shiki/node_modules/@shikijs/langs": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/langs/-/langs-1.29.2.tgz", - "integrity": "sha512-FIBA7N3LZ+223U7cJDUYd5shmciFQlYkFXlkKVaHsCPgfVLiO+e12FmQE6Tf9vuyEsFe3dIl8qGWKXgEHL9wmQ==", - "dev": true, - "dependencies": { - "@shikijs/types": "1.29.2" - } - }, - "packages/code-block/node_modules/shiki/node_modules/@shikijs/themes": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/themes/-/themes-1.29.2.tgz", - "integrity": "sha512-i9TNZlsq4uoyqSbluIcZkmPL9Bfi3djVxRnofUHwvx/h6SRW3cwgBC5SML7vsDcWyukY0eCzVN980rqP6qNl9g==", - "dev": true, - "dependencies": { - "@shikijs/types": "1.29.2" - } - }, - "packages/code-block/node_modules/shiki/node_modules/@shikijs/types": { - "version": "1.29.2", - "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.29.2.tgz", - "integrity": "sha512-VJjK0eIijTZf0QSTODEXCqinjBn0joAHQ+aPSBzrv4O2d/QSbsMw+ZeSRx03kV34Hy7NzUvV/7NqfYGRLrASmw==", - "dev": true, - "dependencies": { - "@shikijs/vscode-textmate": "^10.0.1", - "@types/hast": "^3.0.4" + "@blocknote/core": "^0.26.0" } }, "packages/core": { diff --git a/packages/code-block/package.json b/packages/code-block/package.json index 0b9beb27b2..898dffe25e 100644 --- a/packages/code-block/package.json +++ b/packages/code-block/package.json @@ -52,7 +52,7 @@ "@shikijs/types": "^3.2.1" }, "devDependencies": { - "@blocknote/core": "^0.25.2", + "@blocknote/core": "^0.26.0", "eslint": "^8.10.0", "prettier": "^2.7.1", "rollup-plugin-webpack-stats": "^0.2.2", @@ -62,7 +62,7 @@ "vitest": "^2.0.3" }, "peerDependencies": { - "@blocknote/core": "^0.25.2" + "@blocknote/core": "^0.26.0" }, "eslintConfig": { "extends": [ diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 3ec64b0dc6..7439917132 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -56,6 +56,8 @@ export * from "./util/esmDependencies.js"; export * from "./util/table.js"; export * from "./util/string.js"; export * from "./util/typescript.js"; + +export type { CodeBlockOptions } from "./blocks/CodeBlockContent/CodeBlockContent.js"; export { UnreachableCaseError, assertEmpty } from "./util/typescript.js"; export { locales }; @@ -69,4 +71,3 @@ export * from "./extensions/UniqueID/UniqueID.js"; export * from "./api/exporters/markdown/markdownExporter.js"; export * from "./api/parsers/html/parseHTML.js"; export * from "./api/parsers/markdown/parseMarkdown.js"; - From e0df65bf59502fc50f796605e565efc1d06e0282 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 18:26:27 +0100 Subject: [PATCH 11/18] chore: add simple tests --- packages/code-block/src/index.test.ts | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/code-block/src/index.test.ts diff --git a/packages/code-block/src/index.test.ts b/packages/code-block/src/index.test.ts new file mode 100644 index 0000000000..22618f9f2a --- /dev/null +++ b/packages/code-block/src/index.test.ts @@ -0,0 +1,17 @@ +import { describe, expect, it } from "vitest"; +import { codeBlock } from "./index.js"; + +describe("codeBlock", () => { + it("should exist", () => { + expect(codeBlock).toBeDefined(); + }); + it("should have defaultLanguage", () => { + expect(codeBlock.defaultLanguage).toBeDefined(); + }); + it("should have supportedLanguages", () => { + expect(codeBlock.supportedLanguages).toBeDefined(); + }); + it("should have createHighlighter", () => { + expect(codeBlock.createHighlighter).toBeDefined(); + }); +}); From 16c787656d48da151eb9af82ee819daa04192835 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 21:22:22 +0100 Subject: [PATCH 12/18] build: do not recompile shiki packages --- packages/code-block/vite.config.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/code-block/vite.config.ts b/packages/code-block/vite.config.ts index eae4a8806b..954be159ec 100644 --- a/packages/code-block/vite.config.ts +++ b/packages/code-block/vite.config.ts @@ -46,11 +46,7 @@ export default defineConfig((conf) => ({ return true; } - if (source === "react/jsx-runtime") { - return true; - } - - if (source.startsWith("prosemirror-")) { + if (source.startsWith("@shikijs/")) { return true; } From 3435284c955a61d71c933f46dced08e9d6e97178 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 21:56:38 +0100 Subject: [PATCH 13/18] docs: attribution --- examples/04-theming/06-code-block/.bnexample.json | 2 +- examples/04-theming/07-custom-code-block/.bnexample.json | 2 +- examples/04-theming/07-custom-code-block/README.md | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/04-theming/06-code-block/.bnexample.json b/examples/04-theming/06-code-block/.bnexample.json index 6d4a02dd52..5778b19ace 100644 --- a/examples/04-theming/06-code-block/.bnexample.json +++ b/examples/04-theming/06-code-block/.bnexample.json @@ -1,6 +1,6 @@ { "playground": true, "docs": true, - "author": "matthewlipski", + "author": "nperez0111", "tags": ["Basic"] } diff --git a/examples/04-theming/07-custom-code-block/.bnexample.json b/examples/04-theming/07-custom-code-block/.bnexample.json index 6d4a02dd52..5778b19ace 100644 --- a/examples/04-theming/07-custom-code-block/.bnexample.json +++ b/examples/04-theming/07-custom-code-block/.bnexample.json @@ -1,6 +1,6 @@ { "playground": true, "docs": true, - "author": "matthewlipski", + "author": "nperez0111", "tags": ["Basic"] } diff --git a/examples/04-theming/07-custom-code-block/README.md b/examples/04-theming/07-custom-code-block/README.md index dd9c37f05a..5401f022e7 100644 --- a/examples/04-theming/07-custom-code-block/README.md +++ b/examples/04-theming/07-custom-code-block/README.md @@ -4,15 +4,15 @@ To configure a code block highlighting theme and language, you can use the `code This allows you to configure a shiki highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use. -To create a highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a highlighter for your languages and themes. +To create a syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a syntax highlighter for your languages and themes. -For example to create a highlighter using the optimized javascript engine, javascript, typescript, vue, and light and dark themes, you can run the following command: +For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command: ```bash npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts ``` -This will generate a `shiki.bundle.ts` file that you can use to create a highlighter for your editor. +This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor. Like this: From c4eac85f016a875a2519f8a2d6e5236cc38a2d8c Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Mon, 24 Mar 2025 22:09:59 +0100 Subject: [PATCH 14/18] docs: add install step --- examples/04-theming/06-code-block/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/examples/04-theming/06-code-block/README.md b/examples/04-theming/06-code-block/README.md index 54c760878d..0c3e5cc7e6 100644 --- a/examples/04-theming/06-code-block/README.md +++ b/examples/04-theming/06-code-block/README.md @@ -6,6 +6,12 @@ We've created a default setup which automatically includes some of the most comm To use it, you can do the following: +```sh +npm install @blocknote/code-block +``` + +And then you can use it like this: + ```tsx import { codeBlock } from "@blocknote/code-block"; From 952d85122ac1d678d90ef6b6341156f69c303975 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Tue, 25 Mar 2025 10:07:58 +0100 Subject: [PATCH 15/18] docs: reorganize docs and add new advanced page for code blocks --- docs/pages/docs/advanced/code-blocks.mdx | 88 +++++++++++++++++++ examples/04-theming/06-code-block/App.tsx | 57 ++++++++++++ examples/04-theming/06-code-block/README.md | 31 +------ examples/04-theming/06-code-block/index.html | 2 +- .../04-theming/06-code-block/package.json | 3 +- playground/src/examples.gen.tsx | 6 +- 6 files changed, 153 insertions(+), 34 deletions(-) create mode 100644 docs/pages/docs/advanced/code-blocks.mdx diff --git a/docs/pages/docs/advanced/code-blocks.mdx b/docs/pages/docs/advanced/code-blocks.mdx new file mode 100644 index 0000000000..660877550c --- /dev/null +++ b/docs/pages/docs/advanced/code-blocks.mdx @@ -0,0 +1,88 @@ +--- +title: Code Block Syntax Highlighting +description: This section explains how to add syntax highlighting to code blocks. +imageTitle: Code Block Syntax Highlighting +--- + +import { Example } from "@/components/example"; + +# Code Block Syntax Highlighting + +To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size + +We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users. + +To use it, you can do the following: + +```sh +npm install @blocknote/code-block +``` + +And then you can use it like this: + +```tsx +import { codeBlock } from "@blocknote/code-block"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock, + }); + + // Renders the editor instance using a React component. + return ; +} +``` + +See the code block example for a more detailed example. + + + +## Custom Themes & Languages + +To configure a code block highlighting theme and language, you can use the `codeBlock` option in the `useCreateBlockNote` hook. + +This allows you to configure a [shiki](https://shiki.style) highlighter for the code blocks of your editor, allowing you to tailor the themes and languages you would like to use. + +To create a syntax highlighter, you can use the [shiki-codegen](https://shiki.style/packages/codegen) CLI for generating the code to create a syntax highlighter for your languages and themes. + +For example to create a syntax highlighter using the optimized javascript engine, javascript, typescript, vue, with light and dark themes, you can run the following command: + +```bash +npx shiki-codegen --langs javascript,typescript,vue --themes light,dark --engine javascript --precompiled ./shiki.bundle.ts +``` + +This will generate a `shiki.bundle.ts` file that you can use to create a syntax highlighter for your editor. + +Like this: + +```ts +import { createHighlighter } from "./shiki.bundle.js"; + +export default function App() { + // Creates a new editor instance. + const editor = useCreateBlockNote({ + codeBlock: { + indentLineWithTab: true, + defaultLanguage: "typescript", + supportedLanguages: { + typescript: { + name: "TypeScript", + aliases: ["ts"], + }, + }, + createHighlighter: () => + createHighlighter({ + themes: ["light-plus", "dark-plus"], + langs: [], + }), + }, + }); + + return ; +} +``` + +See the custom code block example for a more detailed example. + + diff --git a/examples/04-theming/06-code-block/App.tsx b/examples/04-theming/06-code-block/App.tsx index 3cbbb76c2f..a54110a7ac 100644 --- a/examples/04-theming/06-code-block/App.tsx +++ b/examples/04-theming/06-code-block/App.tsx @@ -9,6 +9,63 @@ export default function App() { // Creates a new editor instance. const editor = useCreateBlockNote({ codeBlock, + initialContent: [ + { + id: "fc832df4-bd15-49d2-8d64-140c27f29692", + type: "codeBlock", + props: { + language: "typescript", + }, + content: [ + { + type: "text", + text: "const x = 3 * 4;", + styles: {}, + }, + ], + children: [], + }, + { + id: "aecf786b-cbde-4915-b86c-b4c8264fc8f7", + type: "paragraph", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + }, + content: [], + children: [], + }, + { + id: "f85ab261-dfe8-47f0-929f-533808a4184d", + type: "heading", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + level: 3, + }, + content: [ + { + type: "text", + text: 'Click on "Typescript" above to see the different supported languages', + styles: {}, + }, + ], + children: [], + }, + { + id: "dec03378-6b49-442a-89f0-b2551ce0f60c", + type: "paragraph", + props: { + textColor: "default", + backgroundColor: "default", + textAlignment: "left", + }, + content: [], + children: [], + }, + ], }); // Renders the editor instance using a React component. diff --git a/examples/04-theming/06-code-block/README.md b/examples/04-theming/06-code-block/README.md index 0c3e5cc7e6..8a19cb77d7 100644 --- a/examples/04-theming/06-code-block/README.md +++ b/examples/04-theming/06-code-block/README.md @@ -1,33 +1,8 @@ -# Code Block Highlighting +# Code Block Syntax Highlighting -To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size - -We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users. - -To use it, you can do the following: - -```sh -npm install @blocknote/code-block -``` - -And then you can use it like this: - -```tsx -import { codeBlock } from "@blocknote/code-block"; - -export default function App() { - // Creates a new editor instance. - const editor = useCreateBlockNote({ - codeBlock, - }); - - // Renders the editor instance using a React component. - return ; -} -``` - -If you need to configure the themes or support more languages, you can provide your own codeBlock highlighting like described in [the custom code block docs](./custom-code-block/) +To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size. **Relevant Docs:** +- [Code Block Syntax Highlighting](/docs/advanced/code-blocks) - [Editor Setup](/docs/editor-basics/setup) diff --git a/examples/04-theming/06-code-block/index.html b/examples/04-theming/06-code-block/index.html index bf5de26360..b58e99d093 100644 --- a/examples/04-theming/06-code-block/index.html +++ b/examples/04-theming/06-code-block/index.html @@ -5,7 +5,7 @@ - Code Block Highlighting + Code Block Syntax Highlighting
diff --git a/examples/04-theming/06-code-block/package.json b/examples/04-theming/06-code-block/package.json index 52bd9b48b9..0a55c50898 100644 --- a/examples/04-theming/06-code-block/package.json +++ b/examples/04-theming/06-code-block/package.json @@ -11,7 +11,6 @@ "lint": "eslint . --max-warnings 0" }, "dependencies": { - "@blocknote/code-block": "latest", "@blocknote/core": "latest", "@blocknote/react": "latest", "@blocknote/ariakit": "latest", @@ -35,4 +34,4 @@ "eslintIgnore": [ "dist" ] -} +} \ No newline at end of file diff --git a/playground/src/examples.gen.tsx b/playground/src/examples.gen.tsx index 0194d1d6fd..5d1fc918c2 100644 --- a/playground/src/examples.gen.tsx +++ b/playground/src/examples.gen.tsx @@ -806,12 +806,12 @@ "config": { "playground": true, "docs": true, - "author": "matthewlipski", + "author": "nperez0111", "tags": [ "Basic" ] }, - "title": "Code Block Highlighting", + "title": "Code Block Syntax Highlighting", "group": { "pathFromRoot": "examples/04-theming", "slug": "theming" @@ -824,7 +824,7 @@ "config": { "playground": true, "docs": true, - "author": "matthewlipski", + "author": "nperez0111", "tags": [ "Basic" ] From 864aeb5d7a79aa9e4e4a5461951ab5344d6b9b8b Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Wed, 26 Mar 2025 09:57:00 +0100 Subject: [PATCH 16/18] chore: minor cleanup --- docs/pages/docs/advanced/code-blocks.mdx | 2 +- examples/04-theming/06-code-block/App.tsx | 20 ------------------- .../04-theming/07-custom-code-block/App.tsx | 20 ------------------- 3 files changed, 1 insertion(+), 41 deletions(-) diff --git a/docs/pages/docs/advanced/code-blocks.mdx b/docs/pages/docs/advanced/code-blocks.mdx index 660877550c..582e91597e 100644 --- a/docs/pages/docs/advanced/code-blocks.mdx +++ b/docs/pages/docs/advanced/code-blocks.mdx @@ -8,7 +8,7 @@ import { Example } from "@/components/example"; # Code Block Syntax Highlighting -To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size +To enable code block syntax highlighting, you can use the `codeBlock` option in the `useCreateBlockNote` hook. This is excluded by default to reduce bundle size. We've created a default setup which automatically includes some of the most common languages in the most optimized way possible. The language syntaxes are loaded on-demand to ensure the smallest bundle size for your users. diff --git a/examples/04-theming/06-code-block/App.tsx b/examples/04-theming/06-code-block/App.tsx index a54110a7ac..689799758c 100644 --- a/examples/04-theming/06-code-block/App.tsx +++ b/examples/04-theming/06-code-block/App.tsx @@ -11,7 +11,6 @@ export default function App() { codeBlock, initialContent: [ { - id: "fc832df4-bd15-49d2-8d64-140c27f29692", type: "codeBlock", props: { language: "typescript", @@ -23,21 +22,11 @@ export default function App() { styles: {}, }, ], - children: [], }, { - id: "aecf786b-cbde-4915-b86c-b4c8264fc8f7", type: "paragraph", - props: { - textColor: "default", - backgroundColor: "default", - textAlignment: "left", - }, - content: [], - children: [], }, { - id: "f85ab261-dfe8-47f0-929f-533808a4184d", type: "heading", props: { textColor: "default", @@ -52,18 +41,9 @@ export default function App() { styles: {}, }, ], - children: [], }, { - id: "dec03378-6b49-442a-89f0-b2551ce0f60c", type: "paragraph", - props: { - textColor: "default", - backgroundColor: "default", - textAlignment: "left", - }, - content: [], - children: [], }, ], }); diff --git a/examples/04-theming/07-custom-code-block/App.tsx b/examples/04-theming/07-custom-code-block/App.tsx index 52f87abd77..d6677aa707 100644 --- a/examples/04-theming/07-custom-code-block/App.tsx +++ b/examples/04-theming/07-custom-code-block/App.tsx @@ -33,7 +33,6 @@ export default function App() { }, initialContent: [ { - id: "fc832df4-bd15-49d2-8d64-140c27f29692", type: "codeBlock", props: { language: "typescript", @@ -45,21 +44,11 @@ export default function App() { styles: {}, }, ], - children: [], }, { - id: "aecf786b-cbde-4915-b86c-b4c8264fc8f7", type: "paragraph", - props: { - textColor: "default", - backgroundColor: "default", - textAlignment: "left", - }, - content: [], - children: [], }, { - id: "f85ab261-dfe8-47f0-929f-533808a4184d", type: "heading", props: { textColor: "default", @@ -74,18 +63,9 @@ export default function App() { styles: {}, }, ], - children: [], }, { - id: "dec03378-6b49-442a-89f0-b2551ce0f60c", type: "paragraph", - props: { - textColor: "default", - backgroundColor: "default", - textAlignment: "left", - }, - content: [], - children: [], }, ], }); From 3603ea1a4bb58be97b5930d7694727142fcea2e6 Mon Sep 17 00:00:00 2001 From: Nick the Sick Date: Wed, 26 Mar 2025 10:01:41 +0100 Subject: [PATCH 17/18] fix: output `data-language` in HTML --- .../clipboard/__snapshots__/internal/basicBlocksWithProps.html | 2 +- .../__snapshots__/codeBlock/contains-newlines/external.html | 2 +- .../__snapshots__/codeBlock/contains-newlines/internal.html | 2 +- .../exporters/html/__snapshots__/codeBlock/python/external.html | 2 +- .../exporters/html/__snapshots__/codeBlock/python/internal.html | 2 +- packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocksWithProps.html b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocksWithProps.html index 4397413824..eeaec68e38 100644 --- a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocksWithProps.html +++ b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocksWithProps.html @@ -1 +1 @@ -

Paragraph

Heading

  1. Numbered List Item

  • Bullet List Item

  • Check List Item

console.log("Hello World");

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

1280px-Placeholder_view_vector.svg.png
Placeholder

\ No newline at end of file +

Paragraph

Heading

  1. Numbered List Item

  • Bullet List Item

  • Check List Item

console.log("Hello World");

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

Table Cell

1280px-Placeholder_view_vector.svg.png
Placeholder

\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/external.html index 580c7cf6cf..8de18f9605 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/external.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/external.html @@ -1 +1 @@ -
const hello = 'world';
console.log(hello);
\ No newline at end of file +
const hello = 'world';
console.log(hello);
\ No newline at end of file diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/internal.html index 48fd641e09..d8a93830eb 100644 --- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/internal.html +++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/contains-newlines/internal.html @@ -1,3 +1,3 @@ -
const hello = 'world';
+
const hello = 'world';
 console.log(hello);
 

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/external.html
index e7ee13c56b..4872e5904f 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/external.html
@@ -1 +1 @@
-
print('Hello, world!')

\ No newline at end of file
+
print('Hello, world!')

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/internal.html
index 22e04a4e7e..fee165d05a 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/python/internal.html
@@ -1 +1 @@
-
print('Hello, world!')

\ No newline at end of file
+
print('Hello, world!')

\ No newline at end of file
diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
index 3157f0d299..8757841d08 100644
--- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
+++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
@@ -129,10 +129,10 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           return getLanguageId(options.editor.settings.codeBlock, language);
         },
         renderHTML: (attributes) => {
-          // TODO: Use `data-language="..."` instead for easier parsing
           return attributes.language && attributes.language !== "text"
             ? {
                 class: `language-${attributes.language}`,
+                "data-language": attributes.language,
               }
             : {};
         },

From 6fd73a4007b327dfca5dd36b9212abdc2721dd94 Mon Sep 17 00:00:00 2001
From: Nick the Sick 
Date: Wed, 26 Mar 2025 10:05:34 +0100
Subject: [PATCH 18/18] fix: just always output, even if the language is text

---
 .../src/api/clipboard/__snapshots__/internal/basicBlocks.html | 2 +-
 .../__snapshots__/codeBlock/defaultLanguage/external.html     | 2 +-
 .../__snapshots__/codeBlock/defaultLanguage/internal.html     | 2 +-
 .../html/__snapshots__/codeBlock/empty/external.html          | 2 +-
 .../html/__snapshots__/codeBlock/empty/internal.html          | 2 +-
 .../__snapshots__/codeBlock/defaultLanguage/markdown.md       | 4 +++-
 .../markdown/__snapshots__/codeBlock/empty/markdown.md        | 2 +-
 packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts | 2 +-
 8 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html
index 82cda89dab..ca208287e2 100644
--- a/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html
+++ b/packages/core/src/api/clipboard/__snapshots__/internal/basicBlocks.html
@@ -1 +1 @@
-
Paragraph
Heading
  1. Numbered List Item
  • Bullet List Item
  • Check List Item
console.log("Hello World");
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Add image

\ No newline at end of file
+
Paragraph
Heading
  1. Numbered List Item
  • Bullet List Item
  • Check List Item
console.log("Hello World");
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Table Cell
Add image

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html
index d2c402895c..8db77070b5 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/external.html
@@ -1 +1 @@
-
console.log('Hello, world!');

\ No newline at end of file
+
console.log('Hello, world!');

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html
index c3acc1691a..ef3a373f9a 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/defaultLanguage/internal.html
@@ -1 +1 @@
-
console.log('Hello, world!');

\ No newline at end of file
+
console.log('Hello, world!');

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html
index 1b7ff004ff..22baaf1757 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/external.html
@@ -1 +1 @@
-

\ No newline at end of file
+

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html
index 7da573b074..abe6b97dc8 100644
--- a/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html
+++ b/packages/core/src/api/exporters/html/__snapshots__/codeBlock/empty/internal.html
@@ -1 +1 @@
-

\ No newline at end of file
+

\ No newline at end of file
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md
index 01e04ececa..f5b118ae95 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/defaultLanguage/markdown.md
@@ -1 +1,3 @@
-    console.log('Hello, world!');
+```text
+console.log('Hello, world!');
+```
diff --git a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md
index 47d4a3700c..b5c9416ec5 100644
--- a/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md
+++ b/packages/core/src/api/exporters/markdown/__snapshots__/codeBlock/empty/markdown.md
@@ -1,2 +1,2 @@
-```
+```text
 ```
diff --git a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
index 8757841d08..094a0b65e3 100644
--- a/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
+++ b/packages/core/src/blocks/CodeBlockContent/CodeBlockContent.ts
@@ -129,7 +129,7 @@ const CodeBlockContent = createStronglyTypedTiptapNode({
           return getLanguageId(options.editor.settings.codeBlock, language);
         },
         renderHTML: (attributes) => {
-          return attributes.language && attributes.language !== "text"
+          return attributes.language
             ? {
                 class: `language-${attributes.language}`,
                 "data-language": attributes.language,