Implementing a Robust Rich Text Editor in React: From contentEditable to Lexical

import React, { useRef, useState, useEffect } from 'react';
import DOMPurify from 'dompurify';

export function CEEditor() {
  const ref = useRef<HTMLDivElement>(null);
  const [html, setHtml] = useState('<p>Edit me <strong>now</strong>.</p>');

  useEffect(() => {
    if (ref.current) ref.current.innerHTML = html;
  }, [html]);

  function onInput() {
    if (!ref.current) return;
    const dirty = ref.current.innerHTML;
    const clean = DOMPurify.sanitize(dirty, {
      ALLOWED_TAGS: ['p','strong','em','u','a','ul','ol','li','code','pre','br','h1','h2','blockquote'],
      ALLOWED_ATTR: ['href','target','rel']
    });
    setHtml(clean);
  }

  // execCommand is deprecated but works for quick prototypes
  function cmd(command: string, value?: string) {
    document.execCommand(command, false, value);
    onInput();
    ref.current?.focus();
  }

  return (
    <div>
      <div style={{ display:'flex', gap:8, marginBottom:8 }}>
        <button onClick={() => cmd('bold')}>B</button>
        <button onClick={() => cmd('italic')}>I</button>
        <button onClick={() => cmd('underline')}>U</button>
        <button onClick={() => cmd('formatBlock','H1')}>H1</button>
        <button onClick={() => cmd('insertUnorderedList')}>• List</button>
        <button onClick={() => cmd('createLink', prompt('URL?') || '')}>Link</button>
      </div>
      <div
        ref={ref}
        contentEditable
        role="textbox"
        aria-multiline="true"
        onInput={onInput}
        style={{ border:'1px solid #ccc', padding:12, minHeight:120 }}
      />
      <pre>{html}</pre>
    </div>
  );
}

npm install slate slate-react slate-history

import React, { useMemo, useCallback } from 'react';
import { Slate, Editable, withReact, useSlate } from 'slate-react';
import { createEditor, Transforms, Editor, Text } from 'slate';
import { withHistory } from 'slate-history';

const initialValue = [
  { type: 'paragraph', children: [ { text: 'Hello, Slate!' } ] }
];

const HOTKEYS: Record<string,string> = {
  'mod+b': 'bold',
  'mod+i': 'italic',
  'mod+u': 'underline',
};

function isMarkActive(editor: Editor, format: string) {
  const marks = Editor.marks(editor);
  return marks ? (marks as any)[format] === true : false;
}

function toggleMark(editor: Editor, format: string) {
  const active = isMarkActive(editor, format);
  if (active) Editor.removeMark(editor, format);
  else Editor.addMark(editor, format, true);
}

function MarkButton({ format, label }: { format: string; label: string }) {
  const editor = useSlate();
  const active = isMarkActive(editor, format);
  return (
    <button
      aria-pressed={active}
      onMouseDown={(e) => { e.preventDefault(); toggleMark(editor, format); }}
    >{label}</button>
  );
}

export function SlateEditor() {
  const editor = useMemo(() => withHistory(withReact(createEditor() as Editor)), []);

  const renderElement = useCallback((props: any) => {
    const { element, attributes, children } = props;
    switch (element.type) {
      case 'heading-one':
        return <h1 {...attributes}>{children}</h1>;
      case 'bulleted-list':
        return <ul {...attributes}>{children}</ul>;
      case 'list-item':
        return <li {...attributes}>{children}</li>;
      default:
        return <p {...attributes}>{children}</p>;
    }
  }, []);

  const renderLeaf = useCallback((props: any) => {
    const { attributes, children, leaf } = props;
    let el = children;
    if (leaf.bold) el = <strong>{el}</strong>;
    if (leaf.italic) el = <em>{el}</em>;
    if (leaf.underline) el = <u>{el}</u>;
    if (leaf.code) el = <code>{el}</code>;
    return <span {...attributes}>{el}</span>;
  }, []);

  const onKeyDown = (event: React.KeyboardEvent) => {
    const key = (event.ctrlKey || event.metaKey ? 'mod+' : '') + event.key.toLowerCase();
    const format = HOTKEYS[key];
    if (format) {
      event.preventDefault();
      toggleMark(editor, format);
    }
  };

  return (
    <Slate editor={editor} value={initialValue} onChange={() => {}}>
      <div style={{ display:'flex', gap:8, marginBottom:8 }}>
        <MarkButton format='bold' label='Bold' />
        <MarkButton format='italic' label='Italic' />
        <MarkButton format='underline' label='Underline' />
      </div>
      <Editable
        renderElement={renderElement}
        renderLeaf={renderLeaf}
        onKeyDown={onKeyDown}
        placeholder="Write something…"
        style={{ border:'1px solid #ccc', padding:12, minHeight:120 }}
      />
    </Slate>
  );
}

import DOMPurify from 'dompurify';

export function sanitizeHtml(html: string) {
  return DOMPurify.sanitize(html, {
    ALLOWED_TAGS: ['p','strong','em','u','a','ul','ol','li','code','pre','blockquote','h1','h2','br'],
    ALLOWED_ATTR: ['href','rel','target']
  });
}

npm install lexical @lexical/react

import React from 'react';
import { LexicalComposer } from '@lexical/react/LexicalComposer';
import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
import { ListPlugin } from '@lexical/react/LexicalListPlugin';

const theme = {
  text: { bold: 'font-bold', italic: 'italic', underline: 'underline' },
  paragraph: 'mb-2',
};

function onChange(editorState: any) {
  editorState.read(() => {
    // traverse and persist serialized state, or export to HTML/Markdown
  });
}

export function LexicalEditor() {
  const initialConfig = {
    namespace: 'my-richtext',
    theme,
    onError(error: Error) { console.error(error); }
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <div style={{ border:'1px solid #ccc', padding:12 }}>
        <RichTextPlugin
          contentEditable={<ContentEditable style={{ minHeight: 120, outline: 'none' }} />}
          placeholder={<div style={{ opacity: 0.5 }}>Write something…</div>}
        />
        <HistoryPlugin />
        <ListPlugin />
        <OnChangePlugin onChange={onChange} />
      </div>
    </LexicalComposer>
  );
}