feat(editor): use alt color for inline code sigils

public/assets/css/03-editor-view.css

@@ -585,6 +585,10 @@ div[data-lexical-editor] {
   .inline-code, .code-block {
     font-family: var(--code-font);
     background-color: var(--accent-color-interactible);
+
+    &::highlight(inline-code-sigil) {
+      color: var(--alt-content-color);
+    }
   }
 
   .quote-block {
@@ -595,7 +599,7 @@ div[data-lexical-editor] {
     margin-inline: 0;
 
     ::highlight(quote-block-sigil) {
-      color: var(--alt-content-color)
+      color: var(--alt-content-color);
     }
   }
 

src/lib/editor/index.tsx

@@ -35,6 +35,7 @@ import AutoFocusPlugin from "./plugins/AutoFocusPlugin";
 import { TransclusionContentGetter } from "./types/TransclusionContentGetter";
 import {
   highlightHeadingSigils,
+  highlightInlineCodeSigils,
   highlightQuoteBlockSigils,
 } from "./utils/highlight";
 import { KeyValueNode } from "./nodes/KeyValueNode";
@@ -88,6 +89,7 @@ export const Editor = ({
         editorState.read(() => {
           highlightHeadingSigils();
           highlightQuoteBlockSigils();
+          highlightInlineCodeSigils();
           const root = $getRoot();
           onChange(getSubtextFromEditor(root));
         });

src/lib/editor/utils/highlight.ts

@@ -39,3 +39,33 @@ export const highlightQuoteBlockSigils = () => {
   // @ts-ignore
   CSS.highlights.set("quote-block-sigil", highlight);
 };
+
+
+export const highlightInlineCodeSigils = () => {
+  const inlineCodeSpans = document.querySelectorAll(
+    "div[data-lexical-editor] .inline-code",
+  );
+
+  const ranges: Range[] = [];
+  Array.from(inlineCodeSpans).forEach((span) => {
+    const textNode = span.childNodes[0];
+    const rangeStart = new Range();
+    rangeStart.setStart(textNode, 0);
+    rangeStart.setEnd(textNode, 1);
+    ranges.push(rangeStart);
+
+    const textContent = textNode.textContent;
+
+    if (textContent) {
+      const rangeEnd = new Range();
+      rangeEnd.setStart(textNode, textContent.length - 1);
+      rangeEnd.setEnd(textNode, textContent.length);
+      ranges.push(rangeEnd);
+    }
+  });
+
+  // @ts-ignore
+  const highlight = new Highlight(...ranges);
+  // @ts-ignore
+  CSS.highlights.set("inline-code-sigil", highlight);
+};