diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx index d027583b6..714bb9ca0 100644 --- a/client/components/codeEditor/codeEditor.jsx +++ b/client/components/codeEditor/codeEditor.jsx @@ -26,7 +26,7 @@ import { autocompleteEmoji } from './autocompleteEmoji.js'; import { searchKeymap, search } from '@codemirror/search'; import { closeBrackets } from '@codemirror/autocomplete'; -const customClose = closeBrackets({ brackets: ['()', '[]', '{{}}'] }); +const autoCloseBrackets = closeBrackets({ brackets: ['()', '[]', '{{}}'] }); import * as themesImport from '@uiw/codemirror-themes-all'; import defaultCM5Theme from '@themes/codeMirror/default.js'; @@ -37,7 +37,7 @@ const themeCompartment = new Compartment(); const highlightCompartment = new Compartment(); import { generalKeymap, markdownKeymap } from './customKeyMaps.js'; -import pageFoldExtension from './customFolding.js'; +import foldOnPages from './customFolding.js'; import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js'; import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js'; @@ -148,31 +148,37 @@ const CodeEditor = forwardRef( const themeExtension = Array.isArray(themes[editorTheme]) ? themes[editorTheme] : themes[editorTheme] || themes['default']; return [ - history(), //allows for undo and redo - setEventListeners, EditorView.lineWrapping, - scrollPastEnd(), + setEventListeners, languageExtension, + autoCloseBrackets, lineNumbers(), - pageFoldExtension, + scrollPastEnd(), + search(), + history(), //allows for undo and redo + ...(tab !== 'brewStyles' ? [autocompleteEmoji] : []), + //folding + foldOnPages, foldGutter({ openText : '▾', closedText : '▸' }), - highlightActiveLine(), - highlightActiveLineGutter(), + //highlights highlightCompartment.of([customHighlightPlugin, highlightExtension]), themeCompartment.of(themeExtension), - ...(tab !== 'brewStyles' ? [autocompleteEmoji] : []), - search(), + highlightActiveLine(), + highlightActiveLineGutter(), + + //keyboard shortcut keymap.of([...defaultKeymap, foldKeymap, ...searchKeymap]), generalKeymap, ...(tab !== 'brewStyles' ? [markdownKeymap] : []), + + //multiple cursors and selections drawSelection(), EditorState.allowMultipleSelections.of(true), - customClose, dropCursor(), ]; }; @@ -241,7 +247,9 @@ const CodeEditor = forwardRef( effects : themeCompartment.reconfigure(themeExtension), }); }, [editorTheme]); + useEffect(()=>{ + //rebuild syntax highlight when changing tab or renderer const view = viewRef.current; if(!view) return; diff --git a/client/components/codeEditor/customFolding.js b/client/components/codeEditor/customFolding.js index ea9087c03..49cb449e7 100644 --- a/client/components/codeEditor/customFolding.js +++ b/client/components/codeEditor/customFolding.js @@ -1,6 +1,6 @@ import { foldService, codeFolding } from '@codemirror/language'; -const pageFoldExtension = [ +const foldOnPages = [ foldService.of((state, lineStart)=>{ //tells where to fold const doc = state.doc; const matcher = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; @@ -43,4 +43,4 @@ const pageFoldExtension = [ }), ]; -export default pageFoldExtension; \ No newline at end of file +export default foldOnPages; \ No newline at end of file diff --git a/client/components/codeEditor/customHighlight.js b/client/components/codeEditor/customHighlight.js index 596434a9c..eefdb740a 100644 --- a/client/components/codeEditor/customHighlight.js +++ b/client/components/codeEditor/customHighlight.js @@ -26,6 +26,8 @@ export function tokenizeCustomMarkdown(text) { const tokens = []; const lines = text.split('\n'); + //tokens without a `from` or `to` are interpreted by the custom plugin as line tokens + lines.forEach((lineText, lineNumber)=>{ // --- Page / snippet lines --- if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine });