chore: update code block

Author: hunghg255

docs/extensions/CodeBlock/index.md

@@ -8,13 +8,16 @@ next:
 
 # CodeBlock
 
-- The `CodeBlock` extension allows you to add code blocks to your editor. It uses [prism-code-editor](https://prism-code-editor.netlify.app/) for syntax highlighting.
+- The `CodeBlock` extension allows you to add code blocks to your editor. It uses [prism-code-editor-lightweight](https://github.com/hunghg255/prism-code-editor-lightweight) for syntax highlighting.
 
 ## Usage
 
 ```tsx
 import { CodeBlock } from 'reactjs-tiptap-editor/extension-bundle'; // [!code ++]
 
+import 'prism-code-editor-lightweight/layout.css'; // [!code ++]
+import 'prism-code-editor-lightweight/themes/github-dark.css'; // [!code ++]
+
 const extensions = [
   ...,
   // Import Extensions Here

playground/src/App.tsx

@@ -57,6 +57,10 @@ import 'reactjs-tiptap-editor/style.css'
 import 'katex/dist/katex.min.css'
 import 'easydrawer/styles.css'
 
+import 'prism-code-editor-lightweight/layout.css';
+import "prism-code-editor-lightweight/themes/github-dark.css"
+
+
 function convertBase64ToBlob(base64: string) {
   const arr = base64.split(',')
   const mime = arr[0].match(/:(.*?);/)![1]
@@ -197,7 +201,31 @@ const extensions = [
   Twitter,
 ]
 
-const DEFAULT = `<h1 style="text-align: center">Rich Text Editor</h1><p>A modern WYSIWYG rich text editor based on <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://github.com/scrumpy/tiptap">tiptap</a> and <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> for Reactjs</p><p></p><p style="text-align: center"></p><div style="text-align: center;" class="image"><img height="auto" src="https://picsum.photos/1920/1080.webp?t=1" align="center" width="500"></div><p></p><div data-type="horizontalRule"><hr></div><h2>Demo</h2><p>👉<a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://reactjs-tiptap-editor.vercel.app/">Demo</a></p><h2>Features</h2><ul><li><p>Use <a target="_blank" rel="noopener noreferrer nofollow" class="link" href="https://ui.shadcn.com/">shadcn ui</a> components</p></li><li><p>Markdown support</p></li><li><p>TypeScript support</p></li><li><p>I18n support (vi, en, zh, pt)</p></li><li><p>React support</p></li><li><p>Slash Commands</p></li><li><p>Multi Column</p></li><li><p>TailwindCss</p></li><li><p>Support emoji</p></li><li><p>Support iframe</p></li><li><p>Support mermaid</p></li></ul><h2>Installation</h2><pre code="pnpm install reactjs-tiptap-editor" language="bash" linenumbers="true" wordwrap="false" tabsize="2" shouldfocus="false"><code>pnpm install reactjs-tiptap-editor</code></pre><p></p>`
+const DEFAULT = `<pre code="const options = {
+  language: 'html',
+  insertSpaces: true,
+  tabSize: 2,
+  lineNumbers: true,
+  readOnly: false,
+  wordWrap: false,
+  value: code,
+  rtl: false,
+  onUpdate(code) {},
+  onSelectionChange([start, end, direction], code) {},
+  onTokenize(tokens, language, code) {}
+}" language="typescript" linenumbers="true" wordwrap="false" tabsize="2" shouldfocus="false"><code>const options = {
+  language: 'html',
+  insertSpaces: true,
+  tabSize: 2,
+  lineNumbers: true,
+  readOnly: false,
+  wordWrap: false,
+  value: code,
+  rtl: false,
+  onUpdate(code) {},
+  onSelectionChange([start, end, direction], code) {},
+  onTokenize(tokens, language, code) {}
+}</code></pre>`
 
 function debounce(func: any, wait: number) {
   let timeout: NodeJS.Timeout

src/constants/resetCSS.ts

@@ -1,5 +1,5 @@
 export const RESET_CSS = `
-.reactjs-tiptap-editor, 
+.reactjs-tiptap-editor,
 .richtext-dialog-content {
   button,
   input:where([type=button]),
@@ -12,8 +12,7 @@ export const RESET_CSS = `
 
   input,
   optgroup,
-  select,
-  textarea {
+  select {
     font-family: inherit;
     font-feature-settings: inherit;
     font-variation-settings: inherit;
@@ -79,21 +78,17 @@ export const RESET_CSS = `
     border-collapse: collapse;
   }
 
-  input, textarea {
+  input {
     border-width: 1px;
   }
 
-  textarea {
-    resize: vertical;
-  }
 
-  input::placeholder,
-  textarea::placeholder {
+  input::placeholder {
     opacity: 1;
     color: #9ca3af;
   }
 
-  button, input, textarea {
+  button, input {
     cursor: pointer;
     color: inherit;
   }
@@ -131,7 +126,7 @@ div[data-tippy-root] {
   background-color: hsl(var(--richtext-background));
   color: hsl(var(--richtext-foreground));
 
-  button, input, textarea {
+  button, input {
     cursor: pointer;
     color: inherit;
   }

src/extensions/CodeBlock/components/NodeViewCodeBlock/NodeViewCodeBlock.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/ban-ts-comment */
 import React, { useCallback, useEffect, useRef } from 'react';
 
 import { NodeViewWrapper } from '@tiptap/react';
@@ -46,7 +45,6 @@ import 'prism-code-editor-lightweight/prism/languages/typescript';
 import 'prism-code-editor-lightweight/prism/languages/tsx';
 import 'prism-code-editor-lightweight/prism/languages/yaml';
 import 'prism-code-editor-lightweight/prism/languages/regex';
-import 'prism-code-editor-lightweight/layout.css';
 
 import { createEditor, type PrismEditor } from 'prism-code-editor-lightweight';
 import { defaultCommands, editHistory } from 'prism-code-editor-lightweight/commands';
@@ -88,7 +86,7 @@ export function NodeViewCodeBlock(props: any) {
 
   const containerRef: any = useRef<HTMLPreElement>(null);
 
-  const deleteMe = useCallback(() => deleteNode(CodeBlock.name, props?.editor), [props?.edito]);
+  const deleteMe = useCallback(() => deleteNode(CodeBlock.name, props?.editor), [props?.editor]);
 
   const codeEditor = useRef<PrismEditor | null>(null);
   const code = props.node.attrs.code || props.node.textContent || '';
@@ -120,6 +118,7 @@ export function NodeViewCodeBlock(props: any) {
 
   const validateAndUpdateLanguage = (attrs: any) => {
     const validatedAttrs = { ...attrs };
+
     if (validatedAttrs.language && !languages.some(lang => lang.value === validatedAttrs.language)) {
       validatedAttrs.language = 'plaintext';
       props.updateAttributes({
@@ -170,8 +169,7 @@ export function NodeViewCodeBlock(props: any) {
   }, [containerRef]);
 
   useEffect(() => {
-    //@ts-expect-error
-    if (codeEditor.current?.setOption) {
+    if (codeEditor.current?.setOptions) {
       codeEditor.current?.setOptions({
         readOnly: props.editor.isEditable,
       });
@@ -180,12 +178,12 @@ export function NodeViewCodeBlock(props: any) {
   }, [codeEditor, props.editor.isEditable]);
 
   useEffect(() => {
-    //@ts-expect-error
-    if (codeEditor.current?.setOption) {
+    if (codeEditor.current?.setOptions) {
       const attrs = validateAndUpdateLanguage(props.node.attrs);
+
       codeEditor.current?.setOptions(attrs);
     }
-  }, [codeEditor, props.node.attrs.language, props.node.attrs.lineNumbers, props.node.attrs.wordWrap, props.node.attrs.tabSize, props.node.attrs]);
+  }, [codeEditor, props.node.attrs]);
 
   return (
     <NodeViewWrapper className={clsx(styles.wrap, 'render-wrapper')}>
@@ -218,7 +216,6 @@ export function NodeViewCodeBlock(props: any) {
                   languages?.map((lang) => {
                     return (
                       <SelectItem
-                        className="focus:richtext-bg-[#5a5d5e4f] focus:richtext-text-white"
                         key={lang.value}
                         value={lang.value}
                       >
@@ -298,7 +295,6 @@ export function NodeViewCodeBlock(props: any) {
                   tabSizes?.map((size) => {
                     return (
                       <SelectItem
-                        className="focus:richtext-bg-[#5a5d5e4f] focus:richtext-text-white"
                         key={size}
                         value={size as any}
                       >