Mirrors/notesnook
1
0
Fork 0
mirror of https://github.com/streetwriters/notesnook.git synced 2025-12-16 19:57:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

editor: improve codeblock scrollbar styling (#8548)

Browse Source 
* editor: improve codeblock scrollbar styling
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>

* editor: fix overflowed codeblock's bg color
Signed-off-by: 01zulfi <85733202+01zulfi@users.noreply.github.com>
This commit is contained in:
01zulfi
2025-10-16 16:50:35 +05:00
committed by GitHub
parent fdaddfdb92
commit 27f781cc63
2 changed files with 53 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
packages/editor/src/extensions/code-block/component.tsx
View File

@@ -30,6 +30,7 @@ import { CodeBlockAttributes } from "./code-block.js";
import Languages from "./languages.json";
import { useThemeEngineStore } from "@notesnook/theme";
import { strings } from "@notesnook/intl";
import SimpleBar from "simplebar-react";
export function CodeblockComponent(
props: ReactNodeViewProps<CodeBlockAttributes>
@@ -58,45 +59,53 @@ export function CodeblockComponent(
overflow: "hidden"
}}
>
<Text
ref={(ref) => {
elementRef.current = ref ?? undefined;
forwardRef?.(ref);
<SimpleBar
style={{
backgroundColor: "var(--background-secondary)"
}}
autoCorrect="off"
autoCapitalize="none"
css={theme.codeBlockCSS}
sx={{
pre: {
fontFamily: "inherit !important",
tabSize: "inherit !important",
// background: "transparent !important",
padding: "10px !important",
margin: "0px !important",
width: "100%",
borderRadius: `0px !important`,
>
<div>
<Text
ref={(ref) => {
elementRef.current = ref ?? undefined;
forwardRef?.(ref);
}}
autoCorrect="off"
autoCapitalize="none"
css={theme.codeBlockCSS}
sx={{
pre: {
fontFamily: "inherit !important",
tabSize: "inherit !important",
// background: "transparent !important",
padding: "10px !important",
margin: "0px !important",
width: "100%",
borderRadius: `0px !important`,
"::selection,*::selection": {
bg: "background-selected",
color: "inherit"
},
"::-moz-selection,*::-moz-selection": {
bg: "background-selected",
color: "inherit"
}
},
fontFamily: "monospace",
whiteSpace: "pre", // TODO !important
tabSize: 1,
position: "relative",
lineHeight: "20px",
// bg: "var(--background-secondary)",
// color: "white",
overflowX: "hidden",
display: "flex"
}}
spellCheck={false}
/>
"::selection,*::selection": {
bg: "background-selected",
color: "inherit"
},
"::-moz-selection,*::-moz-selection": {
bg: "background-selected",
color: "inherit"
}
},
fontFamily: "monospace",
whiteSpace: "pre", // TODO !important
tabSize: 1,
position: "relative",
lineHeight: "20px",
// bg: "var(--background-secondary)",
// color: "white",
// overflowX: "hidden",
display: "flex"
}}
spellCheck={false}
/>
</div>
</SimpleBar>
<Flex
ref={toolbarRef}
contentEditable={false}

7
packages/editor/styles/styles.css
View File

@@ -956,3 +956,10 @@ del.diffdel {
.simplebar-content:before {
content: "" !important;
}
.simplebar-content:after {
content: "" !important;
}
pre[class*="language-"] {
overflow: initial !important;
}