diff --git a/package.json b/package.json index ee1e6e28..a3049f15 100644 --- a/package.json +++ b/package.json @@ -54,6 +54,7 @@ "@codemirror/lint": "^6.4.2", "@codemirror/search": "^6.5.4", "@codemirror/state": "^6.3.1", + "@codemirror/theme-one-dark": "^6.1.2", "@codemirror/view": "^6.21.3", "@lezer/common": "^1.1.0", "@lezer/highlight": "^1.1.6", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 78496655..bf3b68df 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,6 +38,9 @@ dependencies: '@codemirror/state': specifier: ^6.3.1 version: 6.3.1 + '@codemirror/theme-one-dark': + specifier: ^6.1.2 + version: 6.1.2 '@codemirror/view': specifier: ^6.21.3 version: 6.21.3 @@ -1558,6 +1561,15 @@ packages: resolution: {integrity: sha512-88e4HhMtKJyw6fKprGaN/yZfiaoGYOi2nM45YCUC6R/kex9sxFWBDGatS1vk4lMgnWmdIIB9tk8Gj1LmL8YfvA==} dev: false + /@codemirror/theme-one-dark@6.1.2: + resolution: {integrity: sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==} + dependencies: + '@codemirror/language': 6.9.1 + '@codemirror/state': 6.3.1 + '@codemirror/view': 6.21.3 + '@lezer/highlight': 1.1.6 + dev: false + /@codemirror/view@6.21.3: resolution: {integrity: sha512-8l1aSQ6MygzL4Nx7GVYhucSXvW4jQd0F6Zm3v9Dg+6nZEfwzJVqi4C2zHfDljID+73gsQrWp9TgHc81xU15O4A==} dependencies: diff --git a/src/tiddlywiki-codemirror-6/engine.ts b/src/tiddlywiki-codemirror-6/engine.ts index 44bc3191..9a7d2ac9 100644 --- a/src/tiddlywiki-codemirror-6/engine.ts +++ b/src/tiddlywiki-codemirror-6/engine.ts @@ -1,18 +1,7 @@ // @ts-nocheck -import { completeAnyWord } from '@codemirror/autocomplete'; -import { tags } from '@lezer/highlight'; -import { Vim, vim } from '@replit/codemirror-vim'; -import { html, htmlLanguage } from '@codemirror/lang-html'; -import { json, jsonLanguage } from '@codemirror/lang-json'; -import { css, cssLanguage } from '@codemirror/lang-css'; -import { - markdown, - markdownLanguage, - markdownKeymap, -} from '@codemirror/lang-markdown'; -import { javascript, javascriptLanguage } from '@codemirror/lang-javascript'; -import { HighlightStyle, syntaxHighlighting } from '@codemirror/language'; +// @language import { + HighlightStyle, indentUnit, defaultHighlightStyle, syntaxHighlighting, @@ -21,6 +10,16 @@ import { foldGutter, foldKeymap, } from '@codemirror/language'; +import { html, htmlLanguage } from '@codemirror/lang-html'; +import { json, jsonLanguage } from '@codemirror/lang-json'; +import { css, cssLanguage } from '@codemirror/lang-css'; +import { + markdown, + markdownLanguage, + markdownKeymap, +} from '@codemirror/lang-markdown'; +import { javascript, javascriptLanguage } from '@codemirror/lang-javascript'; + import { EditorState, EditorSelection, Prec } from '@codemirror/state'; import { searchKeymap, @@ -28,9 +27,9 @@ import { openSearchPanel, closeSearchPanel, } from '@codemirror/search'; - import { autocompletion, + completeAnyWord, completionKeymap, closeBrackets, closeBracketsKeymap, @@ -59,13 +58,10 @@ import { placeholder, tooltips, } from '@codemirror/view'; -import { - indentWithTab, - history, - historyKeymap, - undo, - redo, -} from '@codemirror/commands'; +import { tags } from '@lezer/highlight'; +import { Vim, vim } from '@replit/codemirror-vim'; +// import { oneDarkTheme, oneDarkHighlightStyle, } from '@codemirror/theme-one-dark'; + // import { tiddlywiki, tiddlywikiLanguage } from '@codemirror/lang-tiddlywiki'; class CodeMirrorEngine { @@ -92,8 +88,22 @@ class CodeMirrorEngine { this.openSearchPanel = openSearchPanel; this.closeSearchPanel = closeSearchPanel; - this.solarizedLightTheme = EditorView.theme({}, { dark: false }); - this.solarizedDarkTheme = EditorView.theme({}, { dark: true }); + this.solarizedLightTheme = EditorView.theme( + { + '&.cm-focused': { + outline: 'none', + }, + }, + { dark: false }, + ); + this.solarizedDarkTheme = EditorView.theme( + { + '&.cm-focused': { + outline: 'none', + }, + }, + { dark: true }, + ); this.solarizedLightHighlightStyle = $tw.utils.codemirror.getSolarizedLightHighlightStyle( @@ -324,10 +334,12 @@ class CodeMirrorEngine { editorExtensions.push(keymap.of([indentWithTab])); } + // vim editorExtensions.push(vim()); Vim.map('jk', '', 'insert'); // in insert mode Vim.map('H', '0', 'normal'); Vim.map('L', '$', 'normal'); + // editorExtensions.push(oneDarkTheme); if ( this.widget.wiki.getTiddlerText( diff --git a/src/tiddlywiki-codemirror-6/files/lib/one-dark.js b/src/tiddlywiki-codemirror-6/files/lib/one-dark.js deleted file mode 100644 index cf64518d..00000000 --- a/src/tiddlywiki-codemirror-6/files/lib/one-dark.js +++ /dev/null @@ -1,146 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, '__esModule', { value: true }); - - -if ($tw.browser && !window.CM) { - require("$:/plugins/BTC/tiddlywiki-codemirror-6/lib/codemirror.js"); -} - -var view = CM['@codemirror/view']; -var language = CM['@codemirror/language']; -var highlight = CM['@lezer/highlight']; - -// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors -const chalky = "#e5c07b", coral = "#e06c75", cyan = "#56b6c2", invalid = "#ffffff", ivory = "#abb2bf", stone = "#7d8799", // Brightened compared to original to increase contrast -malibu = "#61afef", sage = "#98c379", whiskey = "#d19a66", violet = "#c678dd", darkBackground = "#21252b", highlightBackground = "#2c313a", background = "#282c34", tooltipBackground = "#353a42", selection = "#3E4451", cursor = "#528bff"; -/** -The colors used in the theme, as CSS color strings. -*/ -const color = { - chalky, - coral, - cyan, - invalid, - ivory, - stone, - malibu, - sage, - whiskey, - violet, - darkBackground, - highlightBackground, - background, - tooltipBackground, - selection, - cursor -}; -/** -The editor theme styles for One Dark. -*/ -const oneDarkTheme = view.EditorView.theme({ - "&": { - color: ivory, - backgroundColor: background - }, - ".cm-content": { - caretColor: cursor - }, - ".cm-cursor, .cm-dropCursor": { borderLeftColor: cursor }, - "&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": { backgroundColor: selection }, - ".cm-panels": { backgroundColor: darkBackground, color: ivory }, - ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, - ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, - ".cm-searchMatch": { - backgroundColor: "#72a1ff59", - outline: "1px solid #457dff" - }, - ".cm-searchMatch.cm-searchMatch-selected": { - backgroundColor: "#6199ff2f" - }, - ".cm-activeLine": { backgroundColor: "#6699ff0b" }, - ".cm-selectionMatch": { backgroundColor: "#aafe661a" }, - "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { - backgroundColor: "#bad0f847" - }, - ".cm-gutters": { - backgroundColor: background, - color: stone, - border: "none" - }, - ".cm-activeLineGutter": { - backgroundColor: highlightBackground - }, - ".cm-foldPlaceholder": { - backgroundColor: "transparent", - border: "none", - color: "#ddd" - }, - ".cm-tooltip": { - border: "none", - backgroundColor: tooltipBackground - }, - ".cm-tooltip .cm-tooltip-arrow:before": { - borderTopColor: "transparent", - borderBottomColor: "transparent" - }, - ".cm-tooltip .cm-tooltip-arrow:after": { - borderTopColor: tooltipBackground, - borderBottomColor: tooltipBackground - }, - ".cm-tooltip-autocomplete": { - "& > ul > li[aria-selected]": { - backgroundColor: highlightBackground, - color: ivory - } - } -}, { dark: true }); -/** -The highlighting style for code in the One Dark theme. -*/ -const oneDarkHighlightStyle = language.HighlightStyle.define([ - { tag: highlight.tags.keyword, - color: violet }, - { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.propertyName, highlight.tags.macroName], - color: coral }, - { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], - color: malibu }, - { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], - color: whiskey }, - { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], - color: ivory }, - { tag: [highlight.tags.typeName, highlight.tags.className, highlight.tags.number, highlight.tags.changed, highlight.tags.annotation, highlight.tags.modifier, highlight.tags.self, highlight.tags.namespace], - color: chalky }, - { tag: [highlight.tags.operator, highlight.tags.operatorKeyword, highlight.tags.url, highlight.tags.escape, highlight.tags.regexp, highlight.tags.link, highlight.tags.special(highlight.tags.string)], - color: cyan }, - { tag: [highlight.tags.meta, highlight.tags.comment], - color: stone }, - { tag: highlight.tags.strong, - fontWeight: "bold" }, - { tag: highlight.tags.emphasis, - fontStyle: "italic" }, - { tag: highlight.tags.strikethrough, - textDecoration: "line-through" }, - { tag: highlight.tags.link, - color: stone, - textDecoration: "underline" }, - { tag: highlight.tags.heading, - fontWeight: "bold", - color: coral }, - { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], - color: whiskey }, - { tag: [highlight.tags.processingInstruction, highlight.tags.string, highlight.tags.inserted], - color: sage }, - { tag: highlight.tags.invalid, - color: invalid }, -]); -/** -Extension to enable the One Dark theme (both the editor theme and -the highlight style). -*/ -const oneDark = [oneDarkTheme, language.syntaxHighlighting(oneDarkHighlightStyle)]; - -exports.color = color; -exports.oneDark = oneDark; -exports.oneDarkHighlightStyle = oneDarkHighlightStyle; -exports.oneDarkTheme = oneDarkTheme; diff --git a/src/tiddlywiki-codemirror-6/files/tiddlywiki.files b/src/tiddlywiki-codemirror-6/files/tiddlywiki.files index 8e190489..e55e373a 100644 --- a/src/tiddlywiki-codemirror-6/files/tiddlywiki.files +++ b/src/tiddlywiki-codemirror-6/files/tiddlywiki.files @@ -1,13 +1,5 @@ { "tiddlers": [ - { - "file": "lib/one-dark.js", - "fields": { - "type": "application/javascript", - "title": "$:/plugins/BTC/tiddlywiki-codemirror-6/lib/one-dark.js", - "module-type": "library" - } - }, { "file": "modules/startup/load-codemirror-modules.js", "fields": { diff --git a/src/tiddlywiki-codemirror-6/readme.tid b/src/tiddlywiki-codemirror-6/readme.tid index 0553724b..01d56a16 100644 --- a/src/tiddlywiki-codemirror-6/readme.tid +++ b/src/tiddlywiki-codemirror-6/readme.tid @@ -9,6 +9,14 @@ If you like the plugin, feel free to leave me a star on [ext[GitHub|https://gith !! TODO * [x] 字体大小问题 +* lsp: https://github.com/FurqanSoftware/codemirror-languageserver +* [ ] autocompletion better +* [ ] multi cursor +* [ ] toggle line wrap config option +* subplugin for different language +* lang-tiddlywiki * refactor engine.js to es6 class * 焦点残留问题 -* 调色板问题 \ No newline at end of file +* theme: https://github.com/codemirror/theme-one-dark +* tab to completion +* min completion length \ No newline at end of file diff --git a/wiki/tiddlers/22nd October 2023.js b/wiki/tiddlers/22nd October 2023.js new file mode 100644 index 00000000..637bf1d2 --- /dev/null +++ b/wiki/tiddlers/22nd October 2023.js @@ -0,0 +1,3 @@ +const demo = 1; + + console.log(demo) \ No newline at end of file diff --git a/wiki/tiddlers/22nd October 2023.js.meta b/wiki/tiddlers/22nd October 2023.js.meta new file mode 100644 index 00000000..b5db5bf4 --- /dev/null +++ b/wiki/tiddlers/22nd October 2023.js.meta @@ -0,0 +1,5 @@ +created: 20231022083508728 +modified: 20231022083643066 +tags: Journal +title: 22nd October 2023 +type: application/javascript \ No newline at end of file