Skip to content

Commit

Permalink
update to support cm 6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
nothingislost committed Jun 12, 2022
1 parent 9b6bd96 commit 482a714
Show file tree
Hide file tree
Showing 9 changed files with 403 additions and 53 deletions.
1 change: 1 addition & 0 deletions esbuild.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ esbuild
"@codemirror/view",
"@lezer/common",
"@lezer/lr",
"@lezer/highlight",
...builtins,
],
format: "cjs",
Expand Down
4 changes: 2 additions & 2 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"id": "obsidian-dynamic-highlights",
"name": "Dynamic Highlights",
"version": "0.2.5",
"minAppVersion": "0.13.5",
"version": "0.3.0",
"minAppVersion": "0.15.0",
"description": "Dynamically highlight text based on cursor selection or search query with full regex, mobile, and live preview support",
"author": "NothingIsLost",
"authorUrl": "https://github.com/nothingislost",
Expand Down
28 changes: 11 additions & 17 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,15 @@
"author": "",
"license": "MIT",
"devDependencies": {
"@codemirror/autocomplete": "^0.19.9",
"@codemirror/basic-setup": "^0.19.1",
"@codemirror/commands": "^0.19.0",
"@codemirror/fold": "0.19.0",
"@codemirror/highlight": "^0.19.0",
"@codemirror/history": "^0.19.0",
"@codemirror/lang-css": "^0.19.3",
"@codemirror/lang-html": "^0.19.4",
"@codemirror/language": "^0.19.0",
"@codemirror/matchbrackets": "^0.19.0",
"@codemirror/panel": "^0.19.0",
"@codemirror/rangeset": "^0.19.0",
"@codemirror/search": "^0.19.0",
"@codemirror/state": "^0.19.0",
"@codemirror/stream-parser": "https://github.com/lishid/stream-parser",
"@codemirror/view": "^0.19.0",
"@codemirror/autocomplete": "^6.0.0",
"@codemirror/commands": "^6.0.0",
"@codemirror/lang-css": "^6.0.0",
"@codemirror/lang-html": "^6.0.0",
"@codemirror/language": "https://github.com/lishid/cm-language",
"@codemirror/lint": "^6.0.0",
"@codemirror/search": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@simonwep/pickr": "https://github.com/nothingislost/pickr/archive/a17739f7aa1871b44da778cbb79ae76dae77d839.tar.gz",
"@types/lodash": "^4.14.178",
"@types/node": "^16.11.6",
Expand All @@ -35,11 +28,12 @@
"@typescript-eslint/parser": "^5.2.0",
"ajv": "^8.9.0",
"builtin-modules": "^3.2.0",
"codemirror": "^6.0.0",
"codemirror6-themes": "^0.1.2",
"esbuild": "0.13.12",
"lodash": "^4.17.21",
"monkey-around": "^2.2.0",
"obsidian": "^0.13.21",
"obsidian": "^0.14.8",
"regexp-match-indices": "^1.0.2",
"sortablejs": "^1.14.0",
"stylelint": "^14.2.0",
Expand Down
41 changes: 22 additions & 19 deletions src/editor/extensions.ts
Original file line number Diff line number Diff line change
@@ -1,25 +1,29 @@
import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
import { css } from "@codemirror/lang-css";
import {
bracketMatching,
defaultHighlightStyle,
foldGutter,
foldKeymap,
indentOnInput,
syntaxHighlighting,
} from "@codemirror/language";
import { EditorState, Extension } from "@codemirror/state";
import {
keymap,
highlightSpecialChars,
drawSelection,
highlightActiveLine,
dropCursor,
EditorView,
highlightActiveLine,
highlightActiveLineGutter,
highlightSpecialChars,
keymap,
lineNumbers,
rectangularSelection,
} from "@codemirror/view";
import { Extension, EditorState } from "@codemirror/state";
import { history, historyKeymap } from "@codemirror/history";
import { foldGutter, foldKeymap } from "@codemirror/fold";
import { css } from "@codemirror/lang-css";
import { indentOnInput } from "@codemirror/language";
import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter";
import { defaultKeymap, indentWithTab } from "@codemirror/commands";
import { bracketMatching } from "@codemirror/matchbrackets";
import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets";
import { searchKeymap, highlightSelectionMatches } from "@codemirror/search";
import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
import { commentKeymap } from "@codemirror/comment";
import { rectangularSelection } from "@codemirror/rectangular-selection";
import { defaultHighlightStyle } from "@codemirror/highlight";

import { autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
import { highlightSelectionMatches, searchKeymap } from "@codemirror/search";

import { lintKeymap } from "@codemirror/lint";

export const basicSetup: Extension[] = [
Expand All @@ -33,7 +37,7 @@ export const basicSetup: Extension[] = [
dropCursor(),
EditorState.allowMultipleSelections.of(true),
indentOnInput(),
defaultHighlightStyle.fallback,
syntaxHighlighting(defaultHighlightStyle, { fallback: true }),
EditorView.lineWrapping,
bracketMatching(),
closeBrackets(),
Expand All @@ -48,7 +52,6 @@ export const basicSetup: Extension[] = [
...historyKeymap,
indentWithTab,
...foldKeymap,
...commentKeymap,
...completionKeymap,
...lintKeymap,
]),
Expand Down
133 changes: 133 additions & 0 deletions src/editor/theme-dark.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import { EditorView } from "@codemirror/view";
import { Extension } from "@codemirror/state";
import { HighlightStyle, syntaxHighlighting } from "@codemirror/language";
import { tags as t } from "@lezer/highlight";

/*
Credits for color palette:
Author: Mattia Astorino (http://github.com/equinusocio)
Website: https://material-theme.site/
*/

const ivory = "#abb2bf",
stone = "#7d8799", // Brightened compared to original to increase contrast
invalid = "#ffffff",
darkBackground = "#21252b",
highlightBackground = "rgba(0, 0, 0, 0.5)",
background = "#292d3e",
tooltipBackground = "#353a42",
selection = "rgba(128, 203, 196, 0.2)",
cursor = "#ffcc00";

/// The editor theme styles for Material Palenight.
export const materialPalenightTheme = EditorView.theme(
{
// done
"&": {
color: "#ffffff",
backgroundColor: background,
},

// done
".cm-content": {
caretColor: cursor,
},

// done
"&.cm-focused .cm-cursor": {
borderLeftColor: cursor,
},

"&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": {
backgroundColor: selection,
},

".cm-panels": { backgroundColor: darkBackground, color: "#ffffff" },
".cm-panels.cm-panels-top": { borderBottom: "2px solid black" },
".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" },

// done, use onedarktheme
".cm-searchMatch": {
backgroundColor: "#72a1ff59",
outline: "1px solid #457dff",
},
".cm-searchMatch.cm-searchMatch-selected": {
backgroundColor: "#6199ff2f",
},

".cm-activeLine": { backgroundColor: highlightBackground },
".cm-selectionMatch": { backgroundColor: "#aafe661a" },

"&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": {
backgroundColor: "#bad0f847",
outline: "1px solid #515a6b",
},

// done
".cm-gutters": {
background: "#292d3e",
color: "#676e95",
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 Material Palenight theme.
export const materialPalenightHighlightStyle = HighlightStyle.define([
{ tag: t.keyword, color: "#c792ea" },
{ tag: t.operator, color: "#89ddff" },
{ tag: t.special(t.variableName), color: "#eeffff" },
{ tag: t.typeName, color: "#f07178" },
{ tag: t.atom, color: "#f78c6c" },
{ tag: t.number, color: "#ff5370" },
{ tag: t.definition(t.variableName), color: "#82aaff" },
{ tag: t.string, color: "#c3e88d" },
{ tag: t.special(t.string), color: "#f07178" },
{ tag: t.comment, color: stone },
{ tag: t.variableName, color: "#f07178" },
{ tag: t.tagName, color: "#ff5370" },
{ tag: t.bracket, color: "#a2a1a4" },
{ tag: t.meta, color: "#ffcb6b" },
{ tag: t.attributeName, color: "#c792ea" },
{ tag: t.propertyName, color: "#c792ea" },
{ tag: t.className, color: "#decb6b" },
{ tag: t.invalid, color: invalid },
]);

/// Extension to enable the Material Palenight theme (both the editor theme and
/// the highlight style).
export const materialPalenight: Extension = [
materialPalenightTheme,
syntaxHighlighting(materialPalenightHighlightStyle),
];
Loading

0 comments on commit 482a714

Please sign in to comment.