CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-06 15:00:49 +12:00
Code Issues Projects Releases Wiki Activity

Fix multiple style issues with codemirror

Browse source
This commit is contained in:
Andrew Kingston 2024-02-22 16:44:18 +00:00
parent 0217bac267
commit 8320c50c96
3 changed files with 44 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/builder/package.json
View file

@ -66,7 +66,7 @@
"@spectrum-css/page": "^3.0.1",
"@spectrum-css/vars": "^3.0.1",
"@zerodevx/svelte-json-view": "^1.0.7",
"codemirror": "^5.59.0",
"codemirror": "^6.0.1",
"dayjs": "^1.10.8",
"downloadjs": "1.4.7",
"fast-json-patch": "^3.1.1",

44
packages/builder/src/components/common/CodeEditor/CodeEditor.svelte
View file

@ -299,12 +299,53 @@
<style>
/* Unify spacing between HBS and JS */
.code-editor :global(.cm-content) {
padding: var(--spacing-m) 0;
padding: 10px 0;
}
.code-editor {
font-size: 12px;
}
/* Overrides to ensure background selection is pixel perfect with active line */
.code-editor :global(.cm-line) {
height: 16px;
padding: 0 var(--spacing-s);
}
.code-editor :global(.cm-activeLine) {
position: relative;
background: transparent;
}
.code-editor :global(.cm-activeLine::before) {
content: "";
position: absolute;
left: 0;
top: 1px;
height: calc(100% - 2px);
width: 100%;
background: var(--spectrum-global-color-gray-75);
z-index: -2;
}
.code-editor :global(.cm-gutterElement) {
margin-bottom: 0;
}
.code-editor :global(.cm-activeLineGutter) {
color: var(--spectrum-global-color-gray-700);
background: transparent;
position: relative;
}
.code-editor :global(.cm-activeLineGutter::before) {
content: "";
position: absolute;
left: 0;
top: 1px;
height: calc(100% - 2px);
width: 100%;
background: var(--spectrum-global-color-gray-200);
z-index: -2;
}
.code-editor :global(.cm-selectionBackground) {
background-color: var(--spectrum-global-color-gray-300) !important;
}
.code-editor :global(.cm-tooltip.cm-completionInfo) {
padding: var(--spacing-m);
}
@ -330,6 +371,7 @@
padding: 0;
margin: 0;
font-size: 12px;
font-family: var(--font-mono);
white-space: pre;
text-overflow: ellipsis;
overflow: hidden;

13
packages/builder/src/components/common/CodeEditor/index.js
View file

@ -35,19 +35,6 @@ export const getDefaultTheme = opts => {
backgroundColor: "var(--spectrum-global-color-gray-75)",
color: "var(--spectrum-global-color-gray-500)",
},
".cm-activeLineGutter": {
backgroundColor: "var(--spectrum-global-color-gray-200)",
color: "var(--spectrum-global-color-gray-700)",
},
".cm-activeLine": {
backgroundColor: "var(--spectrum-global-color-gray-75)",
},
".cm-line": {
padding: "0 var(--spacing-s)",
},
".cm-selectionBackground": {
backgroundColor: "var(--spectrum-global-color-gray-200) !important",
},
"&.cm-focused .cm-cursor": {
borderLeftColor: "var(--spectrum-alias-text-color)",
},