Merge pull request #3282 from udecode/fix/make-prismjs-optional

Make Prism.js optional for `@udecode/code-block`
udecode · Jun 23, 2024 · 1fdf213 · 1fdf213
2 parents d8a3e88 + 1551e67
commit 1fdf213
Show file tree

Hide file tree

Showing 10 changed files with 161 additions and 192 deletions.
diff --git a/.changeset/afraid-stingrays-boil.md b/.changeset/afraid-stingrays-boil.md
@@ -0,0 +1,25 @@
+---
+"@udecode/plate-code-block": major
+---
+
+Make the dependency on prismjs optional
+
+New usage:
+
+```ts
+// Import Prism with your supported languages
+import Prism from 'prismjs';
+
+import 'prismjs/components/prism-antlr4.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+// ...
+
+const plugins = createPlugins([
+  createCodeBlockPlugin({
+    options: {
+      prism: Prism,
+    },
+  }),
+]);
+```
diff --git a/apps/www/content/docs/components/changelog.mdx b/apps/www/content/docs/components/changelog.mdx
@@ -10,7 +10,11 @@ Use the [CLI](https://platejs.org/docs/components/cli) to install the latest ver
 
 ## June 2024 #11
 
-### Pending #11.2
+### June 23 #11.3
+
+- breaking change: move list of supported prismjs languages to `code-block-combobox`
+
+### June 13 #11.2
 
 - fix `caption`: update UI when element `caption` property changes
 

diff --git a/apps/www/package.json b/apps/www/package.json
@@ -141,6 +141,7 @@
     "next-themes": "^0.2.1",
     "nuqs": "^1.17.1",
     "prism-react-renderer": "^1.3.5",
+    "prismjs": "^1.29.0",
     "react": "^18.2.0",
     "react-dnd": "16.0.1",
     "react-dnd-html5-backend": "^16.0.1",

diff --git a/apps/www/src/registry/default/example/playground-demo.tsx b/apps/www/src/registry/default/example/playground-demo.tsx
@@ -114,6 +114,7 @@ import { softBreakPlugin } from '@/plate/demo/plugins/softBreakPlugin';
 import { tabbablePlugin } from '@/plate/demo/plugins/tabbablePlugin';
 import { trailingBlockPlugin } from '@/plate/demo/plugins/trailingBlockPlugin';
 import { usePlaygroundValue } from '@/plate/demo/values/usePlaygroundValue';
+import { Prism } from '@/registry/default/plate-ui/code-block-combobox';
 import { CommentsPopover } from '@/registry/default/plate-ui/comments-popover';
 import { CursorOverlay } from '@/registry/default/plate-ui/cursor-overlay';
 import { Editor } from '@/registry/default/plate-ui/editor';
@@ -162,7 +163,12 @@ export const usePlaygroundPlugins = ({
           createParagraphPlugin({ enabled: !!enabled.p }),
           createHeadingPlugin({ enabled: !!enabled.heading }),
           createBlockquotePlugin({ enabled: !!enabled.blockquote }),
-          createCodeBlockPlugin({ enabled: !!enabled.code_block }),
+          createCodeBlockPlugin({
+            enabled: !!enabled.code_block,
+            options: {
+              prism: Prism,
+            },
+          }),
           createHorizontalRulePlugin({ enabled: !!enabled.hr }),
           createLinkPlugin({ ...linkPlugin, enabled: !!enabled.a }),
           createListPlugin({

diff --git a/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx b/apps/www/src/registry/default/plate-ui/code-block-combobox.tsx
@@ -1,14 +1,16 @@
 'use client';
 
+/* eslint-disable unicorn/prefer-export-from */
+
 import React, { useState } from 'react';
 
 import { cn } from '@udecode/cn';
 import {
-  CODE_BLOCK_LANGUAGES,
-  CODE_BLOCK_LANGUAGES_POPULAR,
   useCodeBlockCombobox,
   useCodeBlockComboboxState,
 } from '@udecode/plate-code-block';
+// Prism must be imported before all language files
+import Prism from 'prismjs';
 
 import { Icons } from '@/components/icons';
 
@@ -22,15 +24,110 @@ import {
 } from './command';
 import { Popover, PopoverContent, PopoverTrigger } from './popover';
 
+import 'prismjs/components/prism-antlr4.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-c.js';
+import 'prismjs/components/prism-cmake.js';
+import 'prismjs/components/prism-coffeescript.js';
+import 'prismjs/components/prism-cpp.js';
+import 'prismjs/components/prism-csharp.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-dart.js';
+// import 'prismjs/components/prism-django.js';
+import 'prismjs/components/prism-docker.js';
+// import 'prismjs/components/prism-ejs.js';
+import 'prismjs/components/prism-erlang.js';
+import 'prismjs/components/prism-git.js';
+import 'prismjs/components/prism-go.js';
+import 'prismjs/components/prism-graphql.js';
+import 'prismjs/components/prism-groovy.js';
+import 'prismjs/components/prism-java.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-jsx.js';
+import 'prismjs/components/prism-kotlin.js';
+import 'prismjs/components/prism-latex.js';
+import 'prismjs/components/prism-less.js';
+import 'prismjs/components/prism-lua.js';
+import 'prismjs/components/prism-makefile.js';
+import 'prismjs/components/prism-markdown.js';
+import 'prismjs/components/prism-matlab.js';
+import 'prismjs/components/prism-objectivec.js';
+import 'prismjs/components/prism-perl.js';
+// import 'prismjs/components/prism-php.js';
+import 'prismjs/components/prism-powershell.js';
+import 'prismjs/components/prism-properties.js';
+import 'prismjs/components/prism-protobuf.js';
+import 'prismjs/components/prism-python.js';
+import 'prismjs/components/prism-r.js';
+import 'prismjs/components/prism-ruby.js';
+import 'prismjs/components/prism-sass.js';
+import 'prismjs/components/prism-scala.js';
+import 'prismjs/components/prism-scheme.js';
+import 'prismjs/components/prism-scss.js';
+import 'prismjs/components/prism-sql.js';
+import 'prismjs/components/prism-swift.js';
+import 'prismjs/components/prism-tsx.js';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-wasm.js';
+import 'prismjs/components/prism-yaml.js';
+
+export { Prism };
+
 const languages: { label: string; value: string }[] = [
   { label: 'Plain Text', value: 'text' },
-  ...Object.entries({
-    ...CODE_BLOCK_LANGUAGES_POPULAR,
-    ...CODE_BLOCK_LANGUAGES,
-  }).map(([key, val]) => ({
-    label: val as string,
-    value: key,
-  })),
+  { label: 'Bash', value: 'bash' },
+  { label: 'CSS', value: 'css' },
+  { label: 'Git', value: 'git' },
+  { label: 'GraphQL', value: 'graphql' },
+  { label: 'HTML', value: 'html' },
+  { label: 'JavaScript', value: 'javascript' },
+  { label: 'JSON', value: 'json' },
+  { label: 'JSX', value: 'jsx' },
+  { label: 'Markdown', value: 'markdown' },
+  { label: 'SQL', value: 'sql' },
+  { label: 'SVG', value: 'svg' },
+  { label: 'TSX', value: 'tsx' },
+  { label: 'TypeScript', value: 'typescript' },
+  { label: 'WebAssembly', value: 'wasm' },
+  { label: 'ANTLR4', value: 'antlr4' },
+  { label: 'C', value: 'c' },
+  { label: 'CMake', value: 'cmake' },
+  { label: 'CoffeeScript', value: 'coffeescript' },
+  { label: 'C#', value: 'csharp' },
+  { label: 'Dart', value: 'dart' },
+  { label: 'Django', value: 'django' },
+  { label: 'Docker', value: 'docker' },
+  { label: 'EJS', value: 'ejs' },
+  { label: 'Erlang', value: 'erlang' },
+  { label: 'Go', value: 'go' },
+  { label: 'Groovy', value: 'groovy' },
+  { label: 'Java', value: 'java' },
+  { label: 'Kotlin', value: 'kotlin' },
+  { label: 'LaTeX', value: 'latex' },
+  { label: 'Less', value: 'less' },
+  { label: 'Lua', value: 'lua' },
+  { label: 'Makefile', value: 'makefile' },
+  { label: 'Markup', value: 'markup' },
+  { label: 'MATLAB', value: 'matlab' },
+  { label: 'Objective-C', value: 'objectivec' },
+  { label: 'Perl', value: 'perl' },
+  { label: 'PHP', value: 'php' },
+  { label: 'PowerShell', value: 'powershell' },
+  { label: '.properties', value: 'properties' },
+  { label: 'Protocol Buffers', value: 'protobuf' },
+  { label: 'Python', value: 'python' },
+  { label: 'R', value: 'r' },
+  { label: 'Ruby', value: 'ruby' },
+  { label: 'Sass (Sass)', value: 'sass' },
+  // FIXME: Error with current scala grammar
+  { label: 'Scala', value: 'scala' },
+  { label: 'Scheme', value: 'scheme' },
+  { label: 'Sass (Scss)', value: 'scss' },
+  { label: 'Shell', value: 'shell' },
+  { label: 'Swift', value: 'swift' },
+  { label: 'XML', value: 'xml' },
+  { label: 'YAML', value: 'yaml' },
 ];
 
 export function CodeBlockCombobox() {

diff --git a/packages/code-block/package.json b/packages/code-block/package.json
@@ -49,11 +49,9 @@
     "test:watch": "yarn p:test:watch",
     "typecheck": "yarn p:typecheck"
   },
-  "dependencies": {
-    "prismjs": "^1.29.0"
-  },
   "devDependencies": {
-    "@udecode/plate-common": "workspace:^"
+    "@udecode/plate-common": "workspace:^",
+    "prismjs": "^1.29.0"
   },
   "peerDependencies": {
     "@udecode/plate-common": ">=34.0.5",

diff --git a/packages/code-block/src/client/decorateCodeLine.ts b/packages/code-block/src/client/decorateCodeLine.ts
@@ -8,7 +8,6 @@ import {
   getParentNode,
   getPlugin,
 } from '@udecode/plate-common/server';
-import Prism from 'prismjs';
 
 import type { CodeBlockPlugin, TCodeBlockElement } from '../shared/types';
 
@@ -18,56 +17,6 @@ import {
   ELEMENT_CODE_SYNTAX,
 } from '../shared/constants';
 
-import 'prismjs/components/prism-antlr4.js';
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-c.js';
-import 'prismjs/components/prism-cmake.js';
-import 'prismjs/components/prism-coffeescript.js';
-import 'prismjs/components/prism-cpp.js';
-import 'prismjs/components/prism-csharp.js';
-import 'prismjs/components/prism-css.js';
-import 'prismjs/components/prism-dart.js';
-// import 'prismjs/components/prism-django.js';
-import 'prismjs/components/prism-docker.js';
-// import 'prismjs/components/prism-ejs.js';
-import 'prismjs/components/prism-erlang.js';
-import 'prismjs/components/prism-git.js';
-import 'prismjs/components/prism-go.js';
-import 'prismjs/components/prism-graphql.js';
-import 'prismjs/components/prism-groovy.js';
-import 'prismjs/components/prism-java.js';
-import 'prismjs/components/prism-javascript.js';
-import 'prismjs/components/prism-json.js';
-import 'prismjs/components/prism-jsx.js';
-import 'prismjs/components/prism-kotlin.js';
-import 'prismjs/components/prism-latex.js';
-import 'prismjs/components/prism-less.js';
-import 'prismjs/components/prism-lua.js';
-import 'prismjs/components/prism-makefile.js';
-import 'prismjs/components/prism-markdown.js';
-import 'prismjs/components/prism-matlab.js';
-import 'prismjs/components/prism-objectivec.js';
-import 'prismjs/components/prism-perl.js';
-// import 'prismjs/components/prism-php.js';
-import 'prismjs/components/prism-powershell.js';
-import 'prismjs/components/prism-properties.js';
-import 'prismjs/components/prism-protobuf.js';
-import 'prismjs/components/prism-python.js';
-import 'prismjs/components/prism-r.js';
-import 'prismjs/components/prism-ruby.js';
-import 'prismjs/components/prism-sass.js';
-import 'prismjs/components/prism-scala.js';
-import 'prismjs/components/prism-scheme.js';
-import 'prismjs/components/prism-scss.js';
-import 'prismjs/components/prism-sql.js';
-import 'prismjs/components/prism-swift.js';
-import 'prismjs/components/prism-tsx.js';
-import 'prismjs/components/prism-typescript.js';
-import 'prismjs/components/prism-wasm.js';
-import 'prismjs/components/prism-yaml.js';
-
-const { Token, languages, tokenize } = Prism;
-
 export interface CodeSyntaxRange extends Range {
   [ELEMENT_CODE_SYNTAX]: true;
   tokenType: string;
@@ -82,6 +31,12 @@ export const decorateCodeLine = <
   const code_block = getPlugin<CodeBlockPlugin, V>(editor, ELEMENT_CODE_BLOCK);
   const code_line = getPlugin<{}, V>(editor, ELEMENT_CODE_LINE);
 
+  const { prism: Prism } = code_block.options;
+
+  if (!Prism) return () => [];
+
+  const { Token, languages, tokenize } = Prism;
+
   return ([node, path]): CodeSyntaxRange[] => {
     const ranges: CodeSyntaxRange[] = [];