Merge pull request #375 from hunghg255/update-codeblock

chore: update codeblock use rangi

Author: hunghg255

docs/extensions/CodeBlock/index.md

@@ -8,17 +8,9 @@ next:
 
 # CodeBlock
 
-- The `CodeBlock` extension allows you to add code blocks to your editor. It supports syntax highlighting and language selection, making it ideal for displaying code snippets in a visually appealing way. Reference [code-block-lowlight](https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight) for more details.
 - The `RichTextCodeBlock` component provides a toolbar for the `CodeBlock` extension, allowing users to easily select the programming language for their code blocks.
-- The `CodeBlock` extension is built on top of the `code-block-lowlight` extension, which uses the `lowlight` library for syntax highlighting. You can customize the languages supported by registering them with `lowlight`.
 - The `RichTextBubbleCodeBlock` component provides a bubble menu for the `CodeBlock` extension, allowing users to easily delete code blocks.
 
-## Installation
-
-```bash
-npm install highlight.js lowlight
-```
-
 ## Usage
 
 ```tsx
@@ -40,26 +32,10 @@ import { RichTextBubbleCodeBlock } from 'reactjs-tiptap-editor/bubble';
 import { CodeBlock, RichTextCodeBlock } from 'reactjs-tiptap-editor/codeblock'; // [!code ++]
 // ... other extensions
 
-// Lowlight, Highlight.js
-import { createLowlight } from 'lowlight';
-import css from 'highlight.js/lib/languages/css';
-import js from 'highlight.js/lib/languages/javascript';
-import ts from 'highlight.js/lib/languages/typescript';
-import html from 'highlight.js/lib/languages/xml';
 
 // Import CSS
 import 'reactjs-tiptap-editor/style.css';
 
-// Optional: Import lowlight languages
-// create a lowlight instance with all languages loaded
-
-//This is only an example, all supported languages are already loaded above
-// but you can also register only specific languages to reduce bundle-size
-const lowlight = createLowlight();
-lowlight.register('html', html);
-lowlight.register('css', css);
-lowlight.register('js', js);
-lowlight.register('ts', ts);
 
 const extensions = [
   // Base Extensions
@@ -79,11 +55,6 @@ const extensions = [
   ...
   // Import Extensions Here
   CodeBlock// [!code ++]
-
-  // Config Lowlight
-  // CodeBlock.configure({
-  //   lowlight: lowlight, // [!code ++]
-  // }),
 ];
 
 const RichTextToolbar = () => {

package.json

@@ -736,95 +736,94 @@
   },
   "dependencies": {
     "@excalidraw/excalidraw": "^0.18.1",
-    "@floating-ui/dom": "^1.7.6",
+    "@floating-ui/dom": "^1.8.0",
     "@hocuspocus/provider": "^3.4.4",
-    "@radix-ui/react-checkbox": "^1.3.7",
-    "@radix-ui/react-dialog": "^1.1.19",
-    "@radix-ui/react-dropdown-menu": "^2.1.20",
+    "@radix-ui/react-checkbox": "^1.3.11",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.11",
-    "@radix-ui/react-popover": "^1.1.19",
-    "@radix-ui/react-select": "^2.3.3",
-    "@radix-ui/react-separator": "^1.1.11",
-    "@radix-ui/react-slot": "^1.3.0",
-    "@radix-ui/react-switch": "^1.3.3",
-    "@radix-ui/react-tabs": "^1.1.17",
-    "@radix-ui/react-toast": "^1.2.19",
-    "@radix-ui/react-toggle": "^1.1.14",
-    "@radix-ui/react-tooltip": "^1.2.12",
-    "@tiptap/core": "^3.27.3",
-    "@tiptap/extension-blockquote": "^3.27.3",
-    "@tiptap/extension-bold": "^3.27.3",
-    "@tiptap/extension-bullet-list": "^3.27.3",
-    "@tiptap/extension-code": "^3.27.3",
-    "@tiptap/extension-code-block-lowlight": "^3.27.3",
-    "@tiptap/extension-collaboration": "^3.27.3",
-    "@tiptap/extension-collaboration-caret": "^3.27.3",
-    "@tiptap/extension-document": "^3.27.3",
-    "@tiptap/extension-drag-handle": "^3.27.3",
-    "@tiptap/extension-drag-handle-react": "^3.27.3",
-    "@tiptap/extension-emoji": "^3.27.3",
-    "@tiptap/extension-hard-break": "^3.27.3",
-    "@tiptap/extension-heading": "^3.27.3",
-    "@tiptap/extension-highlight": "^3.27.3",
-    "@tiptap/extension-horizontal-rule": "^3.27.3",
-    "@tiptap/extension-image": "^3.27.3",
-    "@tiptap/extension-italic": "^3.27.3",
-    "@tiptap/extension-link": "^3.27.3",
-    "@tiptap/extension-list": "^3.27.3",
-    "@tiptap/extension-list-item": "^3.27.3",
-    "@tiptap/extension-mention": "^3.27.3",
-    "@tiptap/extension-node-range": "^3.27.3",
-    "@tiptap/extension-ordered-list": "^3.27.3",
-    "@tiptap/extension-paragraph": "^3.27.3",
-    "@tiptap/extension-strike": "^3.27.3",
-    "@tiptap/extension-subscript": "^3.27.3",
-    "@tiptap/extension-superscript": "^3.27.3",
-    "@tiptap/extension-table": "^3.27.3",
-    "@tiptap/extension-task-item": "^3.27.3",
-    "@tiptap/extension-task-list": "^3.27.3",
-    "@tiptap/extension-text": "^3.27.3",
-    "@tiptap/extension-text-align": "^3.27.3",
-    "@tiptap/extension-text-style": "^3.27.3",
-    "@tiptap/extension-underline": "^3.27.3",
-    "@tiptap/extensions": "^3.27.3",
-    "@tiptap/pm": "^3.27.3",
-    "@tiptap/react": "^3.27.3",
-    "@tiptap/suggestion": "^3.27.3",
-    "@tiptap/y-tiptap": "^3.0.6",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-switch": "^1.3.7",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@radix-ui/react-toast": "^1.2.23",
+    "@radix-ui/react-toggle": "^1.1.18",
+    "@radix-ui/react-tooltip": "^1.2.16",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-blockquote": "^3.29.2",
+    "@tiptap/extension-bold": "^3.29.2",
+    "@tiptap/extension-bullet-list": "^3.29.2",
+    "@tiptap/extension-code": "^3.29.2",
+    "@tiptap/extension-code-block": "^3.29.2",
+    "@tiptap/extension-collaboration": "^3.29.2",
+    "@tiptap/extension-collaboration-caret": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-drag-handle": "^3.29.2",
+    "@tiptap/extension-drag-handle-react": "^3.29.2",
+    "@tiptap/extension-emoji": "^3.29.2",
+    "@tiptap/extension-hard-break": "^3.29.2",
+    "@tiptap/extension-heading": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-horizontal-rule": "^3.29.2",
+    "@tiptap/extension-image": "^3.29.2",
+    "@tiptap/extension-italic": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/extension-list": "^3.29.2",
+    "@tiptap/extension-list-item": "^3.29.2",
+    "@tiptap/extension-mention": "^3.29.2",
+    "@tiptap/extension-node-range": "^3.29.2",
+    "@tiptap/extension-ordered-list": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-strike": "^3.29.2",
+    "@tiptap/extension-subscript": "^3.29.2",
+    "@tiptap/extension-superscript": "^3.29.2",
+    "@tiptap/extension-table": "^3.29.2",
+    "@tiptap/extension-task-item": "^3.29.2",
+    "@tiptap/extension-task-list": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/extension-text-align": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/extensions": "^3.29.2",
+    "@tiptap/pm": "^3.29.2",
+    "@tiptap/react": "^3.29.2",
+    "@tiptap/suggestion": "^3.29.2",
+    "@tiptap/y-tiptap": "^3.0.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "deep-equal": "^2.2.3",
     "docx": "^9.7.1",
     "easydrawer": "^0.0.15",
     "frimousse": "^0.3.0",
-    "highlight.js": "^11.11.1",
     "katex": "^0.16.47",
     "lodash-es": "^4.18.1",
-    "lowlight": "^3.3.0",
     "lucide-react": "^0.427.0",
     "marked": "^15.0.12",
-    "mermaid": "^11.16.0",
+    "mermaid": "^11.16.1",
     "prosemirror-docx": "^0.2.1",
+    "rangi": "^2.2.0",
     "re-resizable": "^6.11.2",
-    "react-colorful": "^5.7.0",
+    "react-colorful": "^5.8.0",
     "react-image-crop": "^11.1.2",
     "react-tweet": "^3.3.1",
     "reactjs-signal": "^2.0.6",
     "scroll-into-view-if-needed": "^3.1.0",
     "svg64": "^2.0.0",
     "y-protocols": "^1.0.7",
-    "yjs": "^13.6.31"
+    "yjs": "^13.6.32"
   },
   "devDependencies": {
     "@types/deep-equal": "^1.0.4",
     "@types/katex": "^0.16.8",
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^24.13.3",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@vitejs/plugin-react": "^5.2.0",
-    "autoprefixer": "^10.5.2",
+    "autoprefixer": "^10.5.4",
     "bumpp": "^10.4.1",
     "contributorkit": "^0.0.4",
     "esno": "^4.8.0",
@@ -834,13 +833,13 @@
     "mammoth": "^1.12.0",
     "md5": "^2.3.0",
     "oxfmt": "^0.55.0",
-    "oxlint": "^1.73.0",
-    "postcss": "^8.5.16",
+    "oxlint": "^1.77.0",
+    "postcss": "^8.5.26",
     "postcss-replace": "^2.0.1",
     "postcss-scss": "^4.0.9",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "sass": "^1.101.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "sass": "^1.102.0",
     "tailwind-merge": "^2.6.1",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.3",

playground/index.html

@@ -1,18 +1,16 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>React Tiptap Editor</title>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"
-    />
-  </head>
 
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./src/main.tsx"></script>
-  </body>
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>React Tiptap Editor</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="./src/main.tsx"></script>
+</body>
+
 </html>

playground/src/App.tsx

@@ -16,11 +16,6 @@ import { EditorContent, useEditor } from '@tiptap/react';
 //   name: 'github.com/hunghg255',
 //   document: ydoc,
 // })
-import css from 'highlight.js/lib/languages/css';
-import js from 'highlight.js/lib/languages/javascript';
-import ts from 'highlight.js/lib/languages/typescript';
-import html from 'highlight.js/lib/languages/xml';
-import { all, createLowlight } from 'lowlight';
 import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { RichTextProvider } from 'reactjs-tiptap-editor';
 import { Attachment, RichTextAttachment } from 'reactjs-tiptap-editor/attachment';
@@ -108,15 +103,8 @@ import 'easydrawer/styles.css';
 import '@excalidraw/excalidraw/index.css';
 import 'katex/contrib/mhchem';
 
-// create a lowlight instance with all languages loaded
-const lowlight = createLowlight();
-
 // This is only an example, all supported languages are already loaded above
 // but you can also register only specific languages to reduce bundle-size
-lowlight.register('html', html);
-lowlight.register('css', css);
-lowlight.register('js', js);
-lowlight.register('ts', ts);
 
 function getRandomColor() {
   const letters = '0123456789ABCDEF';
@@ -259,9 +247,7 @@ const extensions = [
   Blockquote,
   HorizontalRule,
   Code,
-  CodeBlock.configure({
-    lowlight,
-  }),
+  CodeBlock,
 
   Column,
   ColumnNode,
@@ -359,7 +345,8 @@ const extensions = [
   // }),
 ];
 
-const DEFAULT = `<pre dir="auto"><code class="language-js">const a = 2;</code></pre><p dir="auto"></p>`;
+const DEFAULT = `<pre class="shj" dir="auto"><code class="language-js">const a = 2;\
+</code></pre><p dir="auto"></p>`;
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout;