feat: highlight special chars in StringField and RichTextField (#837)

Author: stevenle

.changeset/nervous-starfishes-relate.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root-cms': patch
+---
+
+feat: highlight special chars in StringField and RichTextField (#837)

packages/root-cms/ui/components/DocEditor/fields/StringField.css

@@ -0,0 +1,44 @@
+.StringField__container {
+  position: relative;
+}
+
+.StringField__highlighter {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  pointer-events: none;
+  color: transparent;
+  white-space: pre-wrap;
+  overflow: hidden;
+  font-family: var(--mantine-font-family);
+  font-size: 12px;
+  line-height: 28px;
+  padding: 0 10px;
+  border: 1px solid transparent;
+  box-sizing: border-box;
+  z-index: 0;
+}
+
+.StringField__highlighter--textarea {
+  line-height: 1.55;
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.StringField__highlight {
+  background-color: rgba(255, 220, 0, 0.25);
+  outline: 1px solid rgba(200, 180, 0, 0.4);
+  border-radius: 2px;
+}
+
+.StringField__container {
+  background-color: #fff;
+
+.StringField__input input,
+.StringField__input textarea {
+  background-color: transparent !important;
+  position: relative;
+  z-index: 1;
+}

packages/root-cms/ui/components/DocEditor/fields/StringField.tsx

@@ -1,13 +1,48 @@
+import './StringField.css';
+
 import {TextInput, Textarea} from '@mantine/core';
 import {ChangeEvent} from 'preact/compat';
+import {useRef} from 'preact/hooks';
 import * as schema from '../../../../core/schema.js';
 import {useDraftDocValue} from '../../../hooks/useDraftDoc.js';
 import {requestHighlightNode} from '../../../utils/iframe-preview.js';
 import {FieldProps} from './FieldProps.js';
 
+interface HighlighterProps {
+  value: string;
+  variant: 'input' | 'textarea';
+  scrollRef?: any;
+}
+
+function Highlighter(props: HighlighterProps) {
+  const {value, variant, scrollRef} = props;
+  const parts = value.split(/([\u00A0\u2011])/g);
+  return (
+    <div
+      ref={scrollRef}
+      className={`StringField__highlighter StringField__highlighter--${variant}`}
+      aria-hidden="true"
+    >
+      {parts.map((part, i) => {
+        if (part === '\u00A0' || part === '\u2011') {
+          return (
+            <span key={i} className="StringField__highlight">
+              {part}
+            </span>
+          );
+        }
+        return <span key={i}>{part}</span>;
+      })}
+      {variant === 'textarea' && value.endsWith('\n') && <br />}
+    </div>
+  );
+}
+
 export function StringField(props: FieldProps) {
   const field = props.field as schema.StringField;
   const [value, setValue] = useDraftDocValue(props.deepKey, '');
+  const highlighterRef = useRef<HTMLDivElement>(null);
+  const inputHighlighterRef = useRef<HTMLDivElement>(null);
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
     setValue(e.currentTarget.value);
@@ -23,29 +58,60 @@ export function StringField(props: FieldProps) {
     requestHighlightNode(null);
   };
 
+  const onScroll = (e: any) => {
+    if (highlighterRef.current) {
+      highlighterRef.current.scrollTop = e.target.scrollTop;
+      highlighterRef.current.scrollLeft = e.target.scrollLeft;
+    }
+  };
+
+  const onInputScroll = (e: any) => {
+    if (inputHighlighterRef.current) {
+      inputHighlighterRef.current.scrollLeft = e.target.scrollLeft;
+    }
+  };
+
   if (field.variant === 'textarea') {
     return (
-      <Textarea
+      <div className="StringField__container">
+        <Highlighter
+          value={value || ''}
+          variant="textarea"
+          scrollRef={highlighterRef}
+        />
+        <Textarea
+          className="StringField__input"
+          size="xs"
+          radius={0}
+          autosize={field.autosize}
+          minRows={4}
+          maxRows={field.maxRows || 12}
+          value={value}
+          onChange={onChange}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onScroll={onScroll}
+        />
+      </div>
+    );
+  }
+  return (
+    <div className="StringField__container">
+      <Highlighter
+        value={value || ''}
+        variant="input"
+        scrollRef={inputHighlighterRef}
+      />
+      <TextInput
+        className="StringField__input"
         size="xs"
         radius={0}
-        autosize={field.autosize}
-        minRows={4}
-        maxRows={field.maxRows || 12}
         value={value}
         onChange={onChange}
         onFocus={onFocus}
         onBlur={onBlur}
+        onScroll={onInputScroll}
       />
-    );
-  }
-  return (
-    <TextInput
-      size="xs"
-      radius={0}
-      value={value}
-      onChange={onChange}
-      onFocus={onFocus}
-      onBlur={onBlur}
-    />
+    </div>
   );
 }

packages/root-cms/ui/components/RichTextEditor/lexical/LexicalEditor.css

@@ -249,4 +249,10 @@
   height: 1px;
   background-color: var(--mantine-color-gray-3, #dee2e6);
   margin: 4px 0;
-}
+}
+
+.SpecialCharacterNode {
+  background-color: rgba(255, 220, 0, 0.25);
+  border-radius: 2px;
+  outline: 1px solid rgba(200, 180, 0, 0.4);
+}

packages/root-cms/ui/components/RichTextEditor/lexical/LexicalEditor.tsx

@@ -47,11 +47,13 @@ import {
   $isInlineComponentNode,
   InlineComponentNode,
 } from './nodes/InlineComponentNode.js';
+import {SpecialCharacterNode} from './nodes/SpecialCharacterNode.js';
 import {FloatingLinkEditorPlugin} from './plugins/FloatingLinkEditorPlugin.js';
 import {FloatingToolbarPlugin} from './plugins/FloatingToolbarPlugin.js';
 import {MarkdownTransformPlugin} from './plugins/MarkdownTransformPlugin.js';
 import {OnChangePlugin} from './plugins/OnChangePlugin.js';
 import {ShortcutsPlugin} from './plugins/ShortcutsPlugin.js';
+import {SpecialCharacterPlugin} from './plugins/SpecialCharacterPlugin.js';
 import {TableActionMenuPlugin} from './plugins/TableActionMenuPlugin.js';
 import {ToolbarPlugin} from './plugins/ToolbarPlugin.js';
 import {TrailingParagraphPlugin} from './plugins/TrailingParagraphPlugin.js';
@@ -72,6 +74,7 @@ const INITIAL_CONFIG: InitialConfigType = {
     TableRowNode,
     BlockComponentNode,
     InlineComponentNode,
+    SpecialCharacterNode,
   ],
   onError: (err: Error) => {
     console.error('[LexicalEditor] error:', err);
@@ -432,6 +435,7 @@ function Editor(props: EditorProps) {
         <TabIndentationPlugin maxIndent={7} />
         <MarkdownTransformPlugin />
         <TrailingParagraphPlugin />
+        <SpecialCharacterPlugin />
         {floatingAnchorElem && (
           <>
             <FloatingToolbarPlugin

packages/root-cms/ui/components/RichTextEditor/lexical/nodes/SpecialCharacterNode.ts

@@ -0,0 +1,79 @@
+import {addClassNamesToElement} from '@lexical/utils';
+import {
+  EditorConfig,
+  LexicalNode,
+  NodeKey,
+  SerializedTextNode,
+  Spread,
+  TextNode,
+} from 'lexical';
+
+export type SerializedSpecialCharacterNode = Spread<
+  {
+    type: 'special-character';
+  },
+  SerializedTextNode
+>;
+
+export class SpecialCharacterNode extends TextNode {
+  static getType(): string {
+    return 'special-character';
+  }
+
+  static clone(node: SpecialCharacterNode): SpecialCharacterNode {
+    return new SpecialCharacterNode(node.__text, node.__key);
+  }
+
+  static importJSON(
+    serializedNode: SerializedSpecialCharacterNode
+  ): SpecialCharacterNode {
+    return $createSpecialCharacterNode(serializedNode.text);
+  }
+
+  constructor(text: string, key?: NodeKey) {
+    super(text, key);
+  }
+
+  exportJSON(): SerializedSpecialCharacterNode {
+    return {
+      ...super.exportJSON(),
+      type: 'special-character',
+    };
+  }
+
+  createDOM(config: EditorConfig): HTMLElement {
+    const dom = super.createDOM(config);
+    addClassNamesToElement(dom, 'SpecialCharacterNode');
+    return dom;
+  }
+
+  updateDOM(
+    prevNode: SpecialCharacterNode,
+    dom: HTMLElement,
+    config: EditorConfig
+  ): boolean {
+    const updated = super.updateDOM(prevNode, dom, config);
+    addClassNamesToElement(dom, 'SpecialCharacterNode');
+    return updated;
+  }
+
+  isTextEntity(): true {
+    return true;
+  }
+
+  canInsertTextAfter(): boolean {
+    return false;
+  }
+}
+
+export function $createSpecialCharacterNode(
+  text: string
+): SpecialCharacterNode {
+  return new SpecialCharacterNode(text);
+}
+
+export function $isSpecialCharacterNode(
+  node: LexicalNode | null | undefined
+): node is SpecialCharacterNode {
+  return node instanceof SpecialCharacterNode;
+}

packages/root-cms/ui/components/RichTextEditor/lexical/plugins/SpecialCharacterPlugin.tsx

@@ -0,0 +1,48 @@
+import {useLexicalComposerContext} from '@lexical/react/LexicalComposerContext';
+import {TextNode} from 'lexical';
+import {useEffect} from 'preact/hooks';
+import {
+  $createSpecialCharacterNode,
+  $isSpecialCharacterNode,
+  SpecialCharacterNode,
+} from '../nodes/SpecialCharacterNode.js';
+
+const SPECIAL_CHARS = /[\u00A0\u2011]/;
+
+export function SpecialCharacterPlugin() {
+  const [editor] = useLexicalComposerContext();
+
+  useEffect(() => {
+    if (!editor.hasNodes([SpecialCharacterNode])) {
+      throw new Error(
+        'SpecialCharacterPlugin: SpecialCharacterNode not registered on editor'
+      );
+    }
+
+    return editor.registerNodeTransform(TextNode, (node) => {
+      if ($isSpecialCharacterNode(node)) {
+        return;
+      }
+
+      const text = node.getTextContent();
+      const match = SPECIAL_CHARS.exec(text);
+
+      if (match) {
+        const index = match.index;
+        const char = match[0];
+        let targetNode;
+
+        if (index === 0) {
+          [targetNode] = node.splitText(index + 1);
+        } else {
+          [, targetNode] = node.splitText(index, index + 1);
+        }
+
+        const specialCharNode = $createSpecialCharacterNode(char);
+        targetNode.replace(specialCharNode);
+      }
+    });
+  }, [editor]);
+
+  return null;
+}