-
Notifications
You must be signed in to change notification settings - Fork 317
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add a ruleset editor to the options page
fix #168 The color scheme is based on [hybrid-vim](https://github.com/w0ng/vim-hybrid). BREAKING CHANGE: regular expressions with flags other than 'i' and 'u' (e.g. `/example/g`) are now invalid.
- Loading branch information
Showing
10 changed files
with
573 additions
and
81 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,191 @@ | ||
| import { standardKeymap } from '@codemirror/commands'; | ||
| import { highlightActiveLineGutter, lineNumbers } from '@codemirror/gutter'; | ||
| import { HighlightStyle, tags as t } from '@codemirror/highlight'; | ||
| import { history, historyKeymap } from '@codemirror/history'; | ||
| import { language } from '@codemirror/language'; | ||
| import { Compartment, EditorState } from '@codemirror/state'; | ||
| import { StreamLanguage, StreamParser } from '@codemirror/stream-parser'; | ||
| import { EditorView, highlightSpecialChars, keymap } from '@codemirror/view'; | ||
| import React, { useCallback, useEffect, useLayoutEffect, useRef } from 'react'; | ||
| import { FOCUS_END_CLASS, FOCUS_START_CLASS } from './constants'; | ||
| import { useTheme } from './theme'; | ||
|
|
||
| export type EditorProps<ParserState> = { | ||
| focusStart?: boolean; | ||
| focusEnd?: boolean; | ||
| parser?: StreamParser<ParserState>; | ||
| height?: string; | ||
| readOnly?: boolean; | ||
| value?: string; | ||
| onChange?: (value: string) => void; | ||
| }; | ||
|
|
||
| export function Editor<ParserState>({ | ||
| focusStart = false, | ||
| focusEnd = false, | ||
| parser, | ||
| height, | ||
| readOnly = false, | ||
| value = '', | ||
| onChange, | ||
| }: EditorProps<ParserState>): JSX.Element { | ||
| const view = useRef<EditorView | null>(null); | ||
| const highlightStyleCompartment = useRef(new Compartment()); | ||
| const languageCompartment = useRef(new Compartment()); | ||
| const readOnlyCompartment = useRef(new Compartment()); | ||
| const themeCompartment = useRef(new Compartment()); | ||
| const updateListenerCompartment = useRef(new Compartment()); | ||
|
|
||
| const parentCallback = useCallback((parent: HTMLDivElement | null) => { | ||
| if (parent) { | ||
| // mount | ||
| view.current = new EditorView({ | ||
| state: EditorState.create({ | ||
| doc: value, // Set the initial value to prevent undo from going back to empty | ||
| extensions: [ | ||
| keymap.of([...standardKeymap, ...historyKeymap]), | ||
| history(), | ||
| lineNumbers(), | ||
| highlightActiveLineGutter(), | ||
| highlightSpecialChars(), | ||
| highlightStyleCompartment.current.of([]), | ||
| languageCompartment.current.of([]), | ||
| readOnlyCompartment.current.of([]), | ||
| themeCompartment.current.of([]), | ||
| updateListenerCompartment.current.of([]), | ||
| ], | ||
| }), | ||
| parent, | ||
| }); | ||
| } else { | ||
| // unmount | ||
| view.current?.destroy(); | ||
| } | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.contentDOM.classList.toggle(FOCUS_START_CLASS, focusStart); | ||
| }, [focusStart]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.contentDOM.classList.toggle(FOCUS_END_CLASS, focusEnd); | ||
| }, [focusEnd]); | ||
|
|
||
| const theme = useTheme(); | ||
| useLayoutEffect(() => { | ||
| view.current?.dispatch({ | ||
| effects: highlightStyleCompartment.current.reconfigure( | ||
| HighlightStyle.define([ | ||
| { | ||
| tag: t.annotation, | ||
| color: theme.editor.annotation, | ||
| }, | ||
| { | ||
| tag: t.regexp, | ||
| color: theme.editor.regexp, | ||
| }, | ||
| { | ||
| tag: t.comment, | ||
| color: theme.editor.comment, | ||
| }, | ||
| { | ||
| tag: t.invalid, | ||
| color: theme.editor.comment, | ||
| }, | ||
| ]), | ||
| ), | ||
| }); | ||
| }, [theme]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.dispatch({ | ||
| effects: languageCompartment.current.reconfigure( | ||
| parser ? language.of(StreamLanguage.define(parser)) : [], | ||
| ), | ||
| }); | ||
| }, [parser]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.dispatch({ | ||
| effects: readOnlyCompartment.current.reconfigure(EditorState.readOnly.of(readOnly)), | ||
| }); | ||
| }, [readOnly]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.dispatch({ | ||
| effects: themeCompartment.current.reconfigure( | ||
| EditorView.theme( | ||
| { | ||
| '&': { | ||
| backgroundColor: theme.editor.background, | ||
| border: `1px solid ${theme.editor.border}`, | ||
| color: theme.editor.text, | ||
| height: height ?? 'auto', | ||
| }, | ||
| '&.cm-editor.cm-focused': { | ||
| boxShadow: `0 0 0 2px ${theme.focus.shadow}`, | ||
| outline: 'none', | ||
| }, | ||
| '.cm-scroller': { | ||
| fontFamily: | ||
| 'ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace', | ||
| overflow: 'auto', | ||
| }, | ||
| '.cm-gutters': { | ||
| backgroundColor: theme.editor.background, | ||
| border: 'none', | ||
| color: theme.editor.lineNumber, | ||
| }, | ||
| '.cm-activeLineGutter': { | ||
| backgroundColor: 'transparent', | ||
| }, | ||
| '&.cm-focused .cm-activeLineGutter': { | ||
| color: theme.editor.activeLineNumber, | ||
| }, | ||
| '.cm-lineNumbers .cm-gutterElement': { | ||
| padding: '0 8px', | ||
| }, | ||
| '.cm-content ::selection': { | ||
| backgroundColor: theme.editor.selectionBackground, | ||
| }, | ||
| }, | ||
| { dark: theme.name === 'dark' }, | ||
| ), | ||
| ), | ||
| }); | ||
| }, [height, theme]); | ||
|
|
||
| useLayoutEffect(() => { | ||
| view.current?.dispatch({ | ||
| effects: updateListenerCompartment.current.reconfigure( | ||
| onChange | ||
| ? EditorView.updateListener.of(viewUpdate => { | ||
| if (viewUpdate.docChanged) { | ||
| onChange(viewUpdate.state.doc.toString()); | ||
| } | ||
| }) | ||
| : [], | ||
| ), | ||
| }); | ||
| }, [onChange]); | ||
|
|
||
| useEffect(() => { | ||
| if (view.current) { | ||
| const currentValue = view.current.state.doc.toString(); | ||
| if (value !== currentValue) { | ||
| view.current.dispatch( | ||
| view.current.state.update({ | ||
| changes: { | ||
| from: 0, | ||
| to: currentValue.length, | ||
| insert: value, | ||
| }, | ||
| }), | ||
| ); | ||
| } | ||
| } | ||
| }, [value]); | ||
|
|
||
| return <div ref={parentCallback} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| import type { StreamParser } from '@codemirror/stream-parser'; | ||
| import React from 'react'; | ||
| import { Editor, EditorProps } from '../components/editor'; | ||
| import { RE_LINE } from '../ruleset'; | ||
|
|
||
| type ParserState = { | ||
| tokens: (readonly [number, string | null])[]; | ||
| }; | ||
|
|
||
| const parser: StreamParser<ParserState> = { | ||
| token(stream, state) { | ||
| if (stream.sol()) { | ||
| const groups = RE_LINE.exec(stream.string)?.groups; | ||
| if (!groups) { | ||
| stream.skipToEnd(); | ||
| return 'invalid'; | ||
| } | ||
| state.tokens = []; | ||
| if (groups.spaceBeforeRuleOrComment) { | ||
| state.tokens.push([groups.spaceBeforeRuleOrComment.length, null]); | ||
| } | ||
| if (groups.highlight) { | ||
| state.tokens.push([groups.highlight.length, 'annotation']); | ||
| } | ||
| if (groups.spaceAfterHighlight) { | ||
| state.tokens.push([groups.spaceAfterHighlight.length, null]); | ||
| } | ||
| if (groups.matchPattern) { | ||
| state.tokens.push([groups.matchPattern.length, null]); | ||
| } | ||
| if (groups.regularExpression) { | ||
| state.tokens.push([groups.regularExpression.length, 'regexp']); | ||
| } | ||
| if (groups.spaceAfterRule) { | ||
| state.tokens.push([groups.spaceAfterRule.length, null]); | ||
| } | ||
| if (groups.comment) { | ||
| state.tokens.push([groups.comment.length, 'lineComment']); | ||
| } | ||
| } | ||
| const token = state.tokens.shift(); | ||
| if (!token) { | ||
| // Something went wrong... | ||
| stream.skipToEnd(); | ||
| return 'invalid'; | ||
| } | ||
| stream.pos += token[0]; | ||
| return token[1]; | ||
| }, | ||
| startState() { | ||
| return { tokens: [] }; | ||
| }, | ||
| copyState(state) { | ||
| return { tokens: [...state.tokens] }; | ||
| }, | ||
| }; | ||
|
|
||
| export type RulesetEditorProps = Omit<EditorProps<ParserState>, 'parser'>; | ||
|
|
||
| export const RulesetEditor: React.VFC<RulesetEditorProps> = props => ( | ||
| <Editor parser={parser} {...props} /> | ||
| ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.