feat: Add code highlighting feature to the rich text editor

package-lock.json

@@ -14,9 +14,11 @@
         "@lexical/rich-text": "^0.37.0",
         "@lexical/selection": "^0.37.0",
         "@lexical/utils": "^0.37.0",
+        "@types/prismjs": "^1.26.5",
         "i18next": "^25.5.3",
         "i18next-browser-languagedetector": "^8.2.0",
         "lexical": "^0.37.0",
+        "prismjs": "^1.30.0",
         "react": "^19.1.1",
         "react-dom": "^19.1.1",
         "react-i18next": "^16.0.0",
@@ -1342,6 +1344,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.5",
+      "resolved": "https://registry.npmjs.org/@types/prismjs/-/prismjs-1.26.5.tgz",
+      "integrity": "sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.16",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.16.tgz",

package.json

@@ -16,9 +16,11 @@
     "@lexical/rich-text": "^0.37.0",
     "@lexical/selection": "^0.37.0",
     "@lexical/utils": "^0.37.0",
+    "@types/prismjs": "^1.26.5",
     "i18next": "^25.5.3",
     "i18next-browser-languagedetector": "^8.2.0",
     "lexical": "^0.37.0",
+    "prismjs": "^1.30.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-i18next": "^16.0.0",

src/editor/RichTextEditor.tsx

@@ -4,11 +4,12 @@ import { ContentEditable } from '@lexical/react/LexicalContentEditable';
 import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
 import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
 import { HeadingNode, QuoteNode } from '@lexical/rich-text';
-import { CodeNode } from '@lexical/code';
+import { CodeNode, CodeHighlightNode } from '@lexical/code';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { ListPlugin } from '@lexical/react/LexicalListPlugin';
 
 import ToolbarPlugin from './plugins/ToolbarPlugin';
+import CodeHighlightPlugin from './plugins/CodeHighlightPlugin';
 import editorTheme from './themes/EditorTheme';
 import './styles/editor.css';
 
@@ -22,6 +23,7 @@ const editorConfig = {
     HeadingNode,
     QuoteNode,
     CodeNode,
+    CodeHighlightNode,
     ListNode,
     ListItemNode,
   ],
@@ -44,6 +46,7 @@ export default function RichTextEditor() {
           />
           <HistoryPlugin />
           <ListPlugin />
+          <CodeHighlightPlugin />
         </div>
       </div>
     </LexicalComposer>

src/editor/plugins/CodeHighlightPlugin.tsx

@@ -0,0 +1,13 @@
+import { registerCodeHighlighting } from '@lexical/code';
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+
+export default function CodeHighlightPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    return registerCodeHighlighting(editor);
+  }, [editor]);
+
+  return null;
+}

src/editor/plugins/ToolbarPlugin.tsx

@@ -10,9 +10,12 @@ import {
   COMMAND_PRIORITY_CRITICAL,
   $getSelection,
   $isRangeSelection,
+  $createParagraphNode,
 } from 'lexical';
 import type { TextFormatType } from 'lexical';
 import { $getSelectionStyleValueForProperty, $patchStyleText } from '@lexical/selection';
+import { $setBlocksType } from '@lexical/selection';
+import { $createCodeNode, $isCodeNode } from '@lexical/code';
 
 import DropdownColorPicker from '../ui/DropdownColorPicker';
 import '../styles/toolbar.css';
@@ -27,6 +30,7 @@ export default function ToolbarPlugin() {
   const [isUnderline, setIsUnderline] = useState(false);
   const [isStrikethrough, setIsStrikethrough] = useState(false);
   const [isCode, setIsCode] = useState(false);
+  const [isCodeBlock, setIsCodeBlock] = useState(false);
   const [fontColor, setFontColor] = useState('#000');
   const [bgColor, setBgColor] = useState('#fff');
   const [fontSize, setFontSize] = useState('15px');
@@ -41,6 +45,14 @@ export default function ToolbarPlugin() {
       setIsStrikethrough(selection.hasFormat('strikethrough'));
       setIsCode(selection.hasFormat('code'));
 
+      // Check if we're in a code block
+      const anchorNode = selection.anchor.getNode();
+      const element =
+        anchorNode.getKey() === 'root'
+          ? anchorNode
+          : anchorNode.getTopLevelElementOrThrow();
+      setIsCodeBlock($isCodeNode(element));
+
       // Update color
       setFontColor(
         $getSelectionStyleValueForProperty(selection, 'color', '#000')
@@ -136,6 +148,19 @@ export default function ToolbarPlugin() {
     [editor]
   );
 
+  const formatCodeBlock = useCallback(() => {
+    editor.update(() => {
+      const selection = $getSelection();
+      if ($isRangeSelection(selection)) {
+        if (isCodeBlock) {
+          $setBlocksType(selection, () => $createParagraphNode());
+        } else {
+          $setBlocksType(selection, () => $createCodeNode());
+        }
+      }
+    });
+  }, [editor, isCodeBlock]);
+
   return (
     <div className="toolbar" ref={toolbarRef}>
       <button
@@ -207,6 +232,12 @@ export default function ToolbarPlugin() {
         aria-label="Insert Code">
         <i className="format code" />
       </button>
+      <button
+        onClick={formatCodeBlock}
+        className={'toolbar-item spaced ' + (isCodeBlock ? 'active' : '')}
+        aria-label="Code Block">
+        <i className="format code-block" />
+      </button>
       <div className="divider" />
       
       <DropdownColorPicker

src/editor/styles/editor.css

@@ -91,7 +91,7 @@
   background-color: #f4f4f4;
   font-family: Menlo, Consolas, Monaco, monospace;
   display: block;
-  padding: 8px 12px;
+  padding: 8px 8px 8px 52px;
   line-height: 1.53;
   font-size: 13px;
   margin: 0;
@@ -103,6 +103,22 @@
   border-radius: 4px;
 }
 
+.editor-code:before {
+  content: attr(data-gutter);
+  position: absolute;
+  background-color: #e8e8e8;
+  left: 0;
+  top: 0;
+  border-right: 1px solid #ccc;
+  padding: 8px;
+  color: #777;
+  white-space: pre-wrap;
+  text-align: right;
+  min-width: 25px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
 .editor-text-bold {
   font-weight: bold;
 }
@@ -146,3 +162,48 @@
 .editor-nested-listitem {
   list-style-type: none;
 }
+
+/* Code highlighting tokens */
+.editor-token-comment {
+  color: slategray;
+}
+
+.editor-token-deleted {
+  border-image: linear-gradient(to right, #ffcecb 50%, #ffebe9 50%) fill 0/0/0 100vw;
+}
+
+.editor-token-inserted {
+  border-image: linear-gradient(to right, #aceebb 50%, #dafbe1 50%) fill 0/0/0 100vw;
+}
+
+.editor-token-unchanged {
+  border-image: linear-gradient(to right, #ddd 50%, #f0f2f5 50%) fill 0/0/0 100vw;
+}
+
+.editor-token-punctuation {
+  color: #999;
+}
+
+.editor-token-property {
+  color: #905;
+}
+
+.editor-token-selector {
+  color: #690;
+}
+
+.editor-token-operator {
+  color: #9a6e3a;
+}
+
+.editor-token-attr {
+  color: #07a;
+}
+
+.editor-token-variable {
+  color: #e90;
+}
+
+.editor-token-function {
+  color: #dd4a68;
+}

src/editor/styles/toolbar.css

@@ -113,6 +113,10 @@ i.format.code {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>');
 }
 
+i.format.code-block {
+  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 10l2 2-2 2"/><path d="M16 14h-4"/></svg>');
+}
+
 i.icon.font-color {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 20h16"/><path d="m6 16 6-12 6 12"/><path d="M8 12h8"/></svg>');
   display: inline-block;

src/editor/themes/EditorTheme.ts

@@ -27,7 +27,39 @@ const theme: EditorThemeClasses = {
     code: 'editor-text-code',
   },
   code: 'editor-code',
-  codeHighlight: {},
+  codeHighlight: {
+    atrule: 'editor-token-attr',
+    attr: 'editor-token-attr',
+    boolean: 'editor-token-property',
+    builtin: 'editor-token-selector',
+    cdata: 'editor-token-comment',
+    char: 'editor-token-selector',
+    class: 'editor-token-function',
+    'class-name': 'editor-token-function',
+    comment: 'editor-token-comment',
+    constant: 'editor-token-property',
+    deleted: 'editor-token-deleted',
+    doctype: 'editor-token-comment',
+    entity: 'editor-token-operator',
+    function: 'editor-token-function',
+    important: 'editor-token-variable',
+    inserted: 'editor-token-inserted',
+    keyword: 'editor-token-attr',
+    namespace: 'editor-token-variable',
+    number: 'editor-token-property',
+    operator: 'editor-token-operator',
+    prolog: 'editor-token-comment',
+    property: 'editor-token-property',
+    punctuation: 'editor-token-punctuation',
+    regex: 'editor-token-variable',
+    selector: 'editor-token-selector',
+    string: 'editor-token-selector',
+    symbol: 'editor-token-property',
+    tag: 'editor-token-property',
+    unchanged: 'editor-token-unchanged',
+    url: 'editor-token-operator',
+    variable: 'editor-token-variable',
+  },
 };
 
 export default theme;