react-codemirror
react-codemirror copied to clipboard
uiwjs
How can I change drag background-color ?
I want to change drag back-ground-color
i've changed theme selection color, but it doesnt work
`
import ReactCodeMirror from "@uiw/react-codemirror"; import { loadLanguage, langNames, langs, } from "@uiw/codemirror-extensions-langs"; import classes from "./EditorBox.module.css"; import createTheme from "@uiw/codemirror-themes"; import { markdown, markdownLanguage } from "@codemirror/lang-markdown"; import { languages } from "@codemirror/language-data"; import { EditorView } from "@codemirror/view"; import { javascript } from "@codemirror/lang-javascript";
type ContentType = { content: string; contentHandler: () => void; };
const myTheme = createTheme({ theme: "dark", settings: { background: "#121212", foreground: "#4D4D4C", caret: "#AEAFAD", selection: "#000", selectionMatch: "#000", gutterBackground: "#FFFFFF", gutterForeground: "#4D4D4C", gutterBorder: "#ddd", gutterActiveForeground: "", lineHighlight: "#EFEFEF", }, styles: [], });
loadLanguage("tsx");
export default function EditorBox({ content, contentHandler }: ContentType) { return ( <> <div className={classes.editorBox_container}> <ReactCodeMirror theme={myTheme} value={content} onChange={contentHandler} height="100vh" basicSetup={{ foldGutter: false, lineNumbers: false, highlightActiveLine: false, }} extensions={[ markdown({ base: markdownLanguage, codeLanguages: languages }), EditorView.lineWrapping, javascript({ jsx: true }), ]} /> </> ); }
`
@brgndyy
import { EditorView } from '@codemirror/view';
export const selectionBackground = EditorView.theme(
{
'& .cm-selectionBackground': {
backgroundColor: 'red',
},
},
{
dark: false,
},
);
function App() {
return (
<CodeMirror
value="console.log('hello world!');"
height="200px"
extensions={[selectionBackground, javascript({ jsx: true })]}
/>
);
}
export default App;
https://github.com/uiwjs/react-codemirror/blob/e9386901e07c55b9e137d46fc72620a422d4c8ff/themes/theme/src/index.tsx#L96-L102
But in this case, I have to close the window at all, but the problem occurs
import ReactCodeMirror from "@uiw/react-codemirror";
import classes from "./EditorBox.module.css";
import createTheme from "@uiw/codemirror-themes";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { tags as t } from "@lezer/highlight";
type ContentType = {
content: string;
contentHandler: () => void;
};
export const selectionBackground = EditorView.theme(
{
'& .cm-selectionBackground': {
backgroundColor: 'red',
},
},
{
dark: false,
},
);
const myTheme = createTheme({
theme: "dark",
settings: {
background: "#171717",
foreground: "#ffffff",
caret: "#ffffff",
selection: "#674c4c",
selectionMatch: "#00000025",
lineHighlight: "#8a91991a",
gutterBackground: "#fff",
gutterForeground: "#8a919966",
},
styles: [
{ tag: t.comment, color: "#787b8099" },
{ tag: t.variableName, color: "#0080ff" },
{ tag: [t.string, t.special(t.brace)], color: "#5c6166" },
{ tag: t.number, color: "#5c6166" },
{ tag: t.bool, color: "#5c6166" },
{ tag: t.null, color: "#5c6166" },
{ tag: t.keyword, color: "#5c6166" },
{ tag: t.operator, color: "#5c6166" },
{ tag: t.className, color: "#5c6166" },
{ tag: t.definition(t.typeName), color: "#5c6166" },
{ tag: t.typeName, color: "#5c6166" },
{ tag: t.angleBracket, color: "#5c6166" },
{ tag: t.tagName, color: "#5c6166" },
{ tag: t.attributeName, color: "#5c6166" },
{ tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
{ tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
{ tag: t.heading3, fontWeight: "bold", fontSize: "1.17em" },
{ tag: t.heading4, fontWeight: "bold", fontSize: "1em" },
{ tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
{ tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
{ tag: t.strong, fontWeight: "bold" },
],
});
export default function EditorBox({ content, contentHandler }: ContentType) {
return (
<>
<div className={classes.editorBox_container}>
<ReactCodeMirror
className={classes.code_mirror}
theme={myTheme}
value={content}
onChange={contentHandler}
height="100vh"
basicSetup={{
foldGutter: false,
lineNumbers: false,
highlightActiveLine: false,
}}
extensions={[
markdown({
base: markdownLanguage,
codeLanguages: languages,
addKeymap: false,
extensions: {},
}),
EditorView.lineWrapping,
selectionBackground,
javascript({ jsx: true }),
]}
/>
</div>
</>
);
}
@brgndyy https://codesandbox.io/embed/react-codemirror-example-codemirror-6-forked-z7ogy8?fontsize=14&hidenavigation=1&theme=dark
import React from "react";
import CodeMirror from "@uiw/react-codemirror";
import { javascript } from "@codemirror/lang-javascript";
import { EditorView } from "@codemirror/view";
export const selectionBackground = EditorView.baseTheme({
"&.cm-focused .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: "red"
}
});
export default function App() {
const onChange = React.useCallback((value, viewUpdate) => {
console.log("value:", value);
}, []);
return (
<div>
<CodeMirror
value="console.log('hello world!');"
height="200px"
theme="dark"
extensions={[javascript({ jsx: true }), selectionBackground]}
onChange={onChange}
/>
<CodeMirror
value="console.log('hello world!');"
height="200px"
extensions={[javascript({ jsx: true }), selectionBackground]}
onChange={(value, viewUpdate) => {
console.log("value:", value);
}}
/>
</div>
);
}
@brgndyy
const myTheme = createTheme({
theme: "dark",
settings: {
background: "#171717",
foreground: "#ffffff",
caret: "#ffffff",
+ selection: "red",
selectionMatch: "#00000025",
lineHighlight: "#8a91991a",
gutterBackground: "#fff",
gutterForeground: "#8a919966"
},
styles: [
{ tag: t.comment, color: "#787b8099" },
]
});
import ReactCodeMirror from "@uiw/react-codemirror";
import classes from "./EditorBox.module.css";
import createTheme from "@uiw/codemirror-themes";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { tags as t } from "@lezer/highlight";
type ContentType = {
content: string;
contentHandler: () => void;
};
export const selectionBackground = EditorView.baseTheme({
"&.cm-focused .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: "red"
}
});
const myTheme = createTheme({
theme: "dark",
settings: {
background: "#171717",
foreground: "#ffffff",
caret: "#ffffff",
selection: "red",
selectionMatch: "#00000025",
lineHighlight: "#8a91991a",
gutterBackground: "#fff",
gutterForeground: "#8a919966",
},
styles: [
{ tag: t.comment, color: "#787b8099" },
{ tag: t.variableName, color: "#0080ff" },
{ tag: [t.string, t.special(t.brace)], color: "#5c6166" },
{ tag: t.number, color: "#5c6166" },
{ tag: t.bool, color: "#5c6166" },
{ tag: t.null, color: "#5c6166" },
{ tag: t.keyword, color: "#5c6166" },
{ tag: t.operator, color: "#5c6166" },
{ tag: t.className, color: "#5c6166" },
{ tag: t.definition(t.typeName), color: "#5c6166" },
{ tag: t.typeName, color: "#5c6166" },
{ tag: t.angleBracket, color: "#5c6166" },
{ tag: t.tagName, color: "#5c6166" },
{ tag: t.attributeName, color: "#5c6166" },
{ tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
{ tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
{ tag: t.heading3, fontWeight: "bold", fontSize: "1.5rem" },
{ tag: t.heading4, fontWeight: "bold", fontSize: "1.125rem" },
{ tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
{ tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
{ tag: t.strong, fontWeight: "bold" },
],
});
export default function EditorBox({ content, contentHandler }: ContentType) {
return (
<>
<div className={classes.editorBox_container}>
<ReactCodeMirror
className={classes.code_mirror}
theme={myTheme}
value={content}
onChange={contentHandler}
height="100vh"
basicSetup={{
foldGutter: false,
lineNumbers: false,
highlightActiveLine: false,
}}
extensions={[
markdown({
base: markdownLanguage,
codeLanguages: languages,
addKeymap: false,
extensions: {},
}),
EditorView.lineWrapping,
selectionBackground,
javascript({ jsx: true }),
]}
/>
</div>
</>
);
}
😭 is it right code? still same..
sorry for many questions
@brgndyy You customized the theme myTheme, don't use selectionBackground
import ReactCodeMirror from "@uiw/react-codemirror";
import classes from "./EditorBox.module.css";
import createTheme from "@uiw/codemirror-themes";
import { markdown, markdownLanguage } from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { tags as t } from "@lezer/highlight";
type ContentType = {
content: string;
contentHandler: () => void;
};
- export const selectionBackground = EditorView.baseTheme({
- "&.cm-focused .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection": {
- backgroundColor: "red"
- }
- });
const myTheme = createTheme({
theme: "dark",
settings: {
background: "#171717",
foreground: "#ffffff",
caret: "#ffffff",
+ selection: "red",
selectionMatch: "#00000025",
lineHighlight: "#8a91991a",
gutterBackground: "#fff",
gutterForeground: "#8a919966",
},
styles: [
{ tag: t.comment, color: "#787b8099" },
{ tag: t.variableName, color: "#0080ff" },
{ tag: [t.string, t.special(t.brace)], color: "#5c6166" },
{ tag: t.number, color: "#5c6166" },
{ tag: t.bool, color: "#5c6166" },
{ tag: t.null, color: "#5c6166" },
{ tag: t.keyword, color: "#5c6166" },
{ tag: t.operator, color: "#5c6166" },
{ tag: t.className, color: "#5c6166" },
{ tag: t.definition(t.typeName), color: "#5c6166" },
{ tag: t.typeName, color: "#5c6166" },
{ tag: t.angleBracket, color: "#5c6166" },
{ tag: t.tagName, color: "#5c6166" },
{ tag: t.attributeName, color: "#5c6166" },
{ tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
{ tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
{ tag: t.heading3, fontWeight: "bold", fontSize: "1.5rem" },
{ tag: t.heading4, fontWeight: "bold", fontSize: "1.125rem" },
{ tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
{ tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
{ tag: t.strong, fontWeight: "bold" },
],
});
export default function EditorBox({ content, contentHandler }: ContentType) {
return (
<>
<div className={classes.editorBox_container}>
<ReactCodeMirror
className={classes.code_mirror}
theme={myTheme}
value={content}
onChange={contentHandler}
height="100vh"
basicSetup={{
foldGutter: false,
lineNumbers: false,
highlightActiveLine: false,
}}
extensions={[
markdown({
base: markdownLanguage,
codeLanguages: languages,
addKeymap: false,
extensions: {},
}),
EditorView.lineWrapping,
- selectionBackground,
javascript({ jsx: true }),
]}
/>
</div>
</>
);
}
import ReactCodeMirror from "@uiw/react-codemirror";
import classes from "./EditorBox.module.css";
import createTheme from "@uiw/codemirror-themes";
import {
markdown,
markdownLanguage,
insertNewlineContinueMarkup,
} from "@codemirror/lang-markdown";
import { languages } from "@codemirror/language-data";
import { EditorView } from "@codemirror/view";
import { javascript } from "@codemirror/lang-javascript";
import { tags as t } from "@lezer/highlight";
import { KeyBinding, keymap } from "@codemirror/view";
import { StateCommand, EditorState, Transaction } from "@codemirror/state";
// const customInsertNewline: StateCommand = ({ state, dispatch }) => {
// const tr = state.update({
// changes: { from: state.selection.main.head, insert: "\n" },
// });
// dispatch(tr);
// return true;
// };
// const customKeyBindings: KeyBinding[] = [
// {
// key: "Enter",
// run: customInsertNewline,
// },
// ];
type ContentType = {
content: string;
contentHandler: () => void;
};
// export const selectionBackground = EditorView.baseTheme({
// "&.cm-focused .cm-selectionBackground, & .cm-selectionLayer .cm-selectionBackground, .cm-content ::selection":
// {
// backgroundColor: "red",
// },
// });
const myTheme = createTheme({
theme: "dark",
settings: {
background: "#171717",
foreground: "#ffffff",
caret: "#ffffff",
selection: "red",
selectionMatch: "#00000025",
lineHighlight: "#8a91991a",
gutterBackground: "#fff",
gutterForeground: "#8a919966",
},
styles: [
{ tag: t.comment, color: "#787b8099" },
{ tag: t.variableName, color: "#0080ff" },
{ tag: [t.string, t.special(t.brace)], color: "#5c6166" },
{ tag: t.number, color: "#5c6166" },
{ tag: t.bool, color: "#5c6166" },
{ tag: t.null, color: "#5c6166" },
{ tag: t.keyword, color: "#5c6166" },
{ tag: t.operator, color: "#5c6166" },
{ tag: t.className, color: "#5c6166" },
{ tag: t.definition(t.typeName), color: "#5c6166" },
{ tag: t.typeName, color: "#5c6166" },
{ tag: t.angleBracket, color: "#5c6166" },
{ tag: t.tagName, color: "#5c6166" },
{ tag: t.attributeName, color: "#5c6166" },
{ tag: t.heading1, fontWeight: "bold", fontSize: "2.5rem" },
{ tag: t.heading2, fontWeight: "bold", fontSize: "2rem" },
{ tag: t.heading3, fontWeight: "bold", fontSize: "1.17em" },
{ tag: t.heading4, fontWeight: "bold", fontSize: "1em" },
{ tag: t.heading5, fontWeight: "bold", fontSize: ".83em" },
{ tag: t.heading6, fontWeight: "bold", fontSize: ".67em" },
{ tag: t.strong, fontWeight: "bold" },
],
});
export default function EditorBox({ content, contentHandler }: ContentType) {
return (
<>
<div className={classes.editorBox_container}>
<ReactCodeMirror
className={classes.code_mirror}
theme={myTheme}
value={content}
onChange={contentHandler}
height="100vh"
// basicSetup={{
// foldGutter: false,
// lineNumbers: false,
// highlightActiveLine: false,
// }}
extensions={[
// markdown({
// base: markdownLanguage,
// codeLanguages: languages,
// addKeymap: false,
// extensions: {},
// }),
// EditorView.lineWrapping,
// selectionBackground,
javascript({ jsx: true }),
// keymap.of(customKeyBindings),
]}
/>
</div>
</>
);
}
{
"name": "velogwrite",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@codemirror/basic-setup": "^0.20.0",
"@codemirror/commands": "^6.2.3",
"@codemirror/lang-javascript": "^6.1.7",
"@codemirror/lang-markdown": "^6.1.1",
"@codemirror/language-data": "^6.2.1",
"@codemirror/state": "^6.2.0",
"@codemirror/view": "^6.9.5",
"@lezer/highlight": "^1.1.4",
"@types/node": "18.15.11",
"@types/react": "18.0.35",
"@types/react-dom": "18.0.11",
"@uiw/codemirror-extensions-basic-setup": "^4.19.16",
"@uiw/codemirror-extensions-events": "^4.19.16",
"@uiw/codemirror-extensions-langs": "^4.19.16",
"@uiw/codemirror-themes": "^4.19.16",
"@uiw/react-codemirror": "^4.19.16",
"@uiw/react-markdown-preview": "^4.1.11",
"eslint": "8.38.0",
"eslint-config-next": "13.3.0",
"lezer-markdown": "^0.14.5",
"next": "13.3.0",
"next-remove-imports": "^1.0.11",
"react": "18.2.0",
"react-dom": "18.2.0",
"react-markdown": "^8.0.7",
"react-syntax-highlighter": "^15.5.0",
"remark-gfm": "^3.0.1",
"typescript": "5.0.4"
},
"devDependencies": {
"@types/react-syntax-highlighter": "^15.5.6"
}
}
I did as you told me and went to the code sandbox you told me to and fixed it this far, but the same phenomenon occurs. am i the only one doing this? The environment is Next.js13, and I'm attaching the package.json file just in case.
And my next.config.js file
const removeImports = require("next-remove-imports")();
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = removeImports({
...nextConfig,
});
/** @type {import('next').NextConfig} */
const nextConfig = {
experimental: {
appDir: true,
},
};
module.exports = nextConfig
I've tried both and it's the same.
@brgndyy Then I don't understand where your mistake is
You can use codesandbox.io to reproduce your error, record a video and tell me.
Here is my codesandbox
The color does not change when dragged in the browser window, but the color changes only when other browser windows or menu windows are piled up.
basicSetup={{
+ drawSelection: false,
}}
@brgndyy Conflict with default configuration
Thank you so much for solving it. Colors change properly.
However, if I go to basic-setup and set the drawSelection property to false, only the text written in the selection range is dragged. It must be set to true, but the entire div is dragged.
Is it possible to change the color as specified while dragging the entire range when dragging?
If drawSelection is set to true here, the above error occurs again.
-
drawSelection: false
-
drawSelection: true (that I want)
@brgndyy I can't find the style name for drawSelection, so I can't solve this problem.
What does drawSelection style name mean? If you give me a hint, I'll look for it. Are you saying that the drawSelection style name is built into the codemirror and cannot be modified?
I am desperate because I have to implement it. I am sorry for asking many questions.
@jaywcjlove @brgndyy - the issue is your css precedence for the selection highlight is too low when selected. Here's the codemirror internal setting
.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground {
background: "#233"
}
Which is defined inside @codemirror/view/dist/index.js
Here's yours:
.ͼ8m.cm-focused .cm-selectionBackground, .ͼ8m .cm-selectionLayer .cm-selectionBackground, .ͼ8m .cm-content ::selection
Easy enough to increase the precedence in your theme rules to fix this with something like:
.cm-editor.cm-focused > .cm-scroller > .cm-selectionLayer > .cm-selectionBackground
Instead.
