Closed StarkovSergey closed 1 year ago
@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>
);
}
Is there a way to show spaces in React codemirror?