showing spaces

[StarkovSergey]

Is there a way to show spaces in React codemirror?

[jaywcjlove]

@StarkovSergey https://codesandbox.io/embed/https-github-com-uiwjs-react-codemirror-issues-465-jdlv1z?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { highlightSpecialChars } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";

const specialCharsHighlight = (code, description, placeholder) => {
  const element = document.createElement("span");
  if (code === 0x20) {
    element.textContent = "~";
    element.classList.add("cm-specialChar");
    element.contentEditable = "false";
    element.title = "Trailing space";
  } else {
    element.textContent = placeholder;
    element.classList.add("cm-specialChar");
    element.contentEditable = "false";
    element.title = description ?? "Control char unknown";
  }
  return element;
};

export default function App() {
  return (
    <div>
      <CodeMirror
        value="console.log('hello world!');"
        height="200px"
        theme="dark"
        extensions={[
          javascript({ jsx: true }),
          highlightSpecialChars({
            specialChars: / (?= *$)/g,
            render: specialCharsHighlight
          })
        ]}
      />
    </div>
  );
}

https://discuss.codemirror.net/t/cm6-showtrailingspace/3987