elias/strudel-docker
1
0
Fork 0
mirror of https://github.com/eliasstepanik/strudel-docker.git synced 2026-01-25 04:28:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

style fixes + hide-console option

Browse Source 
- thicker highlighting outline
- only shade actual characters, not whole lines
- strudel hide-console will now hide console
This commit is contained in:
Felix Roos 2022-07-29 00:00:41 +02:00
parent fd61001b4d
commit 913416a9d5
5 changed files with 29 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/dist/index.cjs.js vendored
View File

File diff suppressed because one or more lines are too long

16
packages/react/dist/index.es.js vendored
View File

@ -46,7 +46,13 @@ const materialPalenightTheme = EditorView.theme(
lineHeight: '22px', lineHeight: '22px',
}, },
'.cm-line': { '.cm-line': {
background: '#2C323699', // background: '#2C323699',
background: 'transparent',
},
'.cm-line > *': {
// background: '#2C323699',
background: '#00000090',
// background: 'transparent',
}, },
// done // done
'&.cm-focused .cm-cursor': { '&.cm-focused .cm-cursor': {
@ -71,7 +77,7 @@ const materialPalenightTheme = EditorView.theme(
backgroundColor: '#6199ff2f', backgroundColor: '#6199ff2f',
}, },
'.cm-activeLine': { backgroundColor: highlightBackground }, '.cm-activeLine': { backgroundColor: cursor + '50' },
'.cm-selectionMatch': { backgroundColor: '#aafe661a' }, '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
@ -193,7 +199,7 @@ const highlightField = StateField.define({
if (from > l || to > l) { if (from > l || to > l) {
return; return;
} }
const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } }); const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
return mark.range(from, to); return mark.range(from, to);
})).filter(Boolean), true); })).filter(Boolean), true);
} }
@ -351,6 +357,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
} }
}, [activeCode, onDrawProp]); }, [activeCode, onDrawProp]);
const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
// cycle hook to control scheduling // cycle hook to control scheduling
const cycle = useCycle({ const cycle = useCycle({
onDraw, onDraw,
@ -449,6 +457,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
}; };
return { return {
hideHeader,
hideConsole,
pending, pending,
code, code,
setCode, setCode,

3
packages/react/src/components/CodeMirror6.jsx
View File

@ -60,7 +60,8 @@ const highlightField = StateField.define({
if (from > l || to > l) { if (from > l || to > l) {
return; // dont mark outside of range, as it will throw an error return; // dont mark outside of range, as it will throw an error
} }
const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } }); // const mark = Decoration.mark({ attributes: { style: `outline: 1px solid ${color}` } });
const mark = Decoration.mark({ attributes: { style: `outline: 1.5px solid ${color};` } });
return mark.range(from, to); return mark.range(from, to);
}), }),
) )

4
packages/react/src/hooks/useRepl.mjs
View File

@ -36,6 +36,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
} }
}, [activeCode, onDrawProp]); }, [activeCode, onDrawProp]);
const hideHeader = useMemo(() => activeCode && activeCode.includes('strudel hide-header'), [activeCode]);
const hideConsole = useMemo(() => activeCode && activeCode.includes('strudel hide-console'), [activeCode]);
// cycle hook to control scheduling // cycle hook to control scheduling
const cycle = useCycle({ const cycle = useCycle({
onDraw, onDraw,
@ -136,6 +138,8 @@ function useRepl({ tune, defaultSynth, autolink = true, onEvent, onDraw: onDrawP
}; };
return { return {
hideHeader,
hideConsole,
pending, pending,
code, code,
setCode, setCode,

10
packages/react/src/themes/material-palenight.js
View File

@ -36,7 +36,13 @@ export const materialPalenightTheme = EditorView.theme(
lineHeight: '22px', lineHeight: '22px',
}, },
'.cm-line': { '.cm-line': {
background: '#2C323699', // background: '#2C323699',
background: 'transparent',
},
'.cm-line > *': {
// background: '#2C323699',
background: '#00000090',
// background: 'transparent',
}, },
// done // done
'&.cm-focused .cm-cursor': { '&.cm-focused .cm-cursor': {
@ -61,7 +67,7 @@ export const materialPalenightTheme = EditorView.theme(
backgroundColor: '#6199ff2f', backgroundColor: '#6199ff2f',
}, },
'.cm-activeLine': { backgroundColor: highlightBackground }, '.cm-activeLine': { backgroundColor: cursor + '50' },
'.cm-selectionMatch': { backgroundColor: '#aafe661a' }, '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
'&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': { '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {