-
-
Notifications
You must be signed in to change notification settings - Fork 103
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Work on Codemirror 6 highlighting #102
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -7,8 +7,7 @@ import { javascript } from '@codemirror/lang-javascript'; | |
import { materialPalenight } from './themes/material-palenight'; | ||
|
||
const highlightMark = Decoration.mark({ class: 'cm-highlight' }); | ||
const addHighlight = StateEffect.define(); | ||
const removeHighlight = StateEffect.define(); | ||
export const setHighlights = StateEffect.define(); | ||
const highlightTheme = EditorView.baseTheme({ | ||
'.cm-highlight': { outline: '1px solid #FFCA28' }, | ||
// '.cm-highlight': { background: '#FFCA28' }, | ||
|
@@ -19,60 +18,29 @@ const highlightField = StateField.define({ | |
}, | ||
update(highlights, tr) { | ||
try { | ||
highlights = highlights.map(tr.changes); | ||
for (let e of tr.effects) { | ||
if (e.is(addHighlight)) { | ||
highlights = highlights.update({ | ||
add: [highlightMark.range(e.value.from, e.value.to)], | ||
}); | ||
} | ||
if (e.is(removeHighlight)) { | ||
highlights = highlights.update({ | ||
filter: (f, t, value) => { | ||
if (f === e.value.from && t === e.value.to) { | ||
return false; | ||
} | ||
return true; | ||
// console.log('filter', f,t,value, e.value.from, e.value.to); | ||
}, | ||
}); | ||
if (e.is(setHighlights)) { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. that looks much simpler than what I fabricated :D didn't know you could just set the Decorations directly |
||
highlights = Decoration.set( | ||
e.value | ||
.flatMap((event) => event.context.locations || []) | ||
.map(({ start, end }) => { | ||
let from = tr.newDoc.line(start.line).from + start.column; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This should make |
||
let to = tr.newDoc.line(end.line).from + end.column; | ||
return highlightMark.range(from, to); | ||
}), | ||
true, | ||
); | ||
} | ||
} | ||
return highlights; | ||
} catch (err) { | ||
// console.warn('highlighting error', err); | ||
console.warn('highlighting error', err); | ||
return highlights; | ||
} | ||
}, | ||
provide: (f) => EditorView.decorations.from(f), | ||
}); | ||
|
||
// let timeouts = []; | ||
|
||
export const highlightEvent = (event, view, code) => { | ||
if (!view) { | ||
return; | ||
} | ||
const ranges = event.context?.locations?.map(({ start, end }) => { | ||
return [start, end].map(({ line, column }) => positionToOffset({ line: line - 1, ch: column }, code)); | ||
}); | ||
const effects = ranges.map(([from, to]) => addHighlight.of({ from, to })); | ||
|
||
if (!effects.length) return false; | ||
if (!view.state.field(highlightField, false)) { | ||
effects.push(StateEffect.appendConfig.of([highlightField, highlightTheme])); | ||
} | ||
view.dispatch({ effects }); | ||
// const index = timeouts.length; | ||
// timeouts = timeouts.filter(time) | ||
/* const timeout = */ setTimeout(() => { | ||
const effects = ranges.map(([from, to]) => removeHighlight.of({ from, to })); | ||
view.dispatch({ effects }); | ||
// timeouts.splice(index, 1); | ||
}, event.duration * 1000); | ||
// timeouts.pusn({timeout,); | ||
}; | ||
|
||
export default function CodeMirror({ value, onChange, onViewChanged, onCursor, options, editorDidMount }) { | ||
return ( | ||
<> | ||
|
@@ -88,6 +56,8 @@ export default function CodeMirror({ value, onChange, onViewChanged, onCursor, o | |
extensions={[ | ||
javascript(), | ||
materialPalenight, | ||
highlightField, | ||
highlightTheme, | ||
// theme, language, ... | ||
]} | ||
/> | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
looks good! we could also move this to a custom hook like
useHighlights({pattern,view,started})
or similar, then we could reuse it in the mini repl