From cf1fb606fb70073043a6cdd450a589dd2382aad8 Mon Sep 17 00:00:00 2001 From: Bram Kragten Date: Mon, 1 Mar 2021 22:55:02 +0100 Subject: [PATCH] Bump codemirror + add more styling (#8503) --- package.json | 20 ++++++------ src/components/ha-code-editor.ts | 2 +- src/resources/codemirror.ts | 53 +++++++++++++++++++------------- yarn.lock | 44 +++++++++++++------------- 4 files changed, 65 insertions(+), 54 deletions(-) diff --git a/package.json b/package.json index a5cc01cfb9..b3ca736a5f 100644 --- a/package.json +++ b/package.json @@ -23,16 +23,16 @@ "license": "Apache-2.0", "dependencies": { "@braintree/sanitize-url": "^5.0.0", - "@codemirror/commands": "^0.17.2", - "@codemirror/gutter": "^0.17.2", - "@codemirror/highlight": "^0.17.2", - "@codemirror/history": "^0.17.2", - "@codemirror/legacy-modes": "^0.17.1", - "@codemirror/search": "^0.17.1", - "@codemirror/state": "^0.17.1", - "@codemirror/stream-parser": "^0.17.1", - "@codemirror/text": "^0.17.2", - "@codemirror/view": "^0.17.7", + "@codemirror/commands": "^0.17.0", + "@codemirror/gutter": "^0.17.0", + "@codemirror/highlight": "^0.17.0", + "@codemirror/history": "^0.17.0", + "@codemirror/legacy-modes": "^0.17.0", + "@codemirror/search": "^0.17.0", + "@codemirror/state": "^0.17.0", + "@codemirror/stream-parser": "^0.17.0", + "@codemirror/text": "^0.17.0", + "@codemirror/view": "^0.17.0", "@formatjs/intl-getcanonicallocales": "^1.4.6", "@formatjs/intl-pluralrules": "^3.4.10", "@fullcalendar/common": "5.1.0", diff --git a/src/components/ha-code-editor.ts b/src/components/ha-code-editor.ts index 4232b1ce3d..55cb03272d 100644 --- a/src/components/ha-code-editor.ts +++ b/src/components/ha-code-editor.ts @@ -137,7 +137,7 @@ export class HaCodeEditor extends UpdatingElement { ...loaded.historyKeymap, ...loaded.tabKeyBindings, saveKeyBinding, - ]), + ] as KeyBinding[]), loaded.tagExtension(modeTag, this._mode), loaded.theme, loaded.Prec.fallback(loaded.highlightStyle), diff --git a/src/resources/codemirror.ts b/src/resources/codemirror.ts index cf357ff708..f647b3e354 100644 --- a/src/resources/codemirror.ts +++ b/src/resources/codemirror.ts @@ -1,5 +1,5 @@ import { HighlightStyle, tags } from "@codemirror/highlight"; -import { EditorView as CMEditorView } from "@codemirror/view"; +import { EditorView as CMEditorView, KeyBinding } from "@codemirror/view"; import { StreamLanguage } from "@codemirror/stream-parser"; import { jinja2 } from "@codemirror/legacy-modes/mode/jinja2"; import { yaml } from "@codemirror/legacy-modes/mode/yaml"; @@ -18,7 +18,7 @@ export const langs = { yaml: StreamLanguage.define(yaml), }; -export const tabKeyBindings = [ +export const tabKeyBindings: KeyBinding[] = [ { key: "Tab", run: indentMore }, { key: "Shift-Tab", @@ -35,6 +35,8 @@ export const theme = CMEditorView.theme({ height: "var(--code-mirror-height, auto)", }, + $scroller: { outline: "none" }, + $content: { caretColor: "var(--secondary-text-color)" }, $$focused: { outline: "none" }, @@ -51,34 +53,43 @@ export const theme = CMEditorView.theme({ "$panels.top": { borderBottom: "1px solid var(--divider-color)" }, "$panels.bottom": { borderTop: "1px solid var(--divider-color)" }, - "$panel.search": { - padding: "2px 6px 4px", - position: "relative", - "& [name=close]": { - position: "absolute", - top: "0", - right: "4px", - backgroundColor: "inherit", - border: "none", - font: "inherit", - padding: "4px", - margin: 0, - outline: "none", - fontSize: "150%", - }, - }, + "$panel.search input": { margin: "4px 4px 0" }, $button: { border: "1px solid var(--primary-color)", - padding: "8px", + padding: "0px 16px", textTransform: "uppercase", margin: "4px", background: "none", + color: "var(--primary-color)", + fontFamily: + "var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, sans-serif))", + fontSize: "var(--mdc-typography-button-font-size, 0.875rem)", + height: "36px", + fontWeight: "var(--mdc-typography-button-font-weight, 500)", + borderRadius: "4px", + letterSpacing: "var(--mdc-typography-button-letter-spacing, 0.0892857em)", }, $textfield: { - backgroundColor: "var(--secondary-background-color)", - padding: "8px", + padding: "4px 0px 5px", + borderRadius: "0", + fontSize: "16px", + color: "var(--primary-text-color)", + border: "0", + background: "none", + fontFamily: "Roboto", + borderBottom: + "1px solid var(--paper-input-container-color, var(--secondary-text-color))", + margin: "4px 4px 0", + "& ::placeholder": { + color: "var(--paper-input-container-color, var(--secondary-text-color))", + }, + "&:focus": { + outline: "none", + borderBottom: "2px solid var(--primary-color)", + paddingBottom: "4px", + }, }, $selectionMatch: { diff --git a/yarn.lock b/yarn.lock index 3252bc38af..6214193236 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1905,10 +1905,10 @@ resolved "https://registry.yarnpkg.com/@braintree/sanitize-url/-/sanitize-url-5.0.0.tgz#3ba791f37b90e7f6170d252b63aacfcae943c039" integrity sha512-WmKrB/575EJCzbeSJR3YQ5sET5FaizeljLRw1382qVUeGqzuWBgIS+AF5a0FO51uQTrDpoRgvuHC2IWVsgwkkA== -"@codemirror/commands@^0.17.2": - version "0.17.4" - resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.17.4.tgz#afca35595cf728eafa280d267285c8985a2f5c8b" - integrity sha512-YB1Iz5nHVZFJCB/WboNRBS7Bb6f/M/LoJQRm4AY2h1uWmSnxbr02DPX3XpTVhams7x7XNtIFtgk/Q4/wel/JXg== +"@codemirror/commands@^0.17.0": + version "0.17.5" + resolved "https://registry.yarnpkg.com/@codemirror/commands/-/commands-0.17.5.tgz#0912955a614e554e4fbcb347a785c5c981f12826" + integrity sha512-9B/Zq6mBkSdf+2xWoOufJutNRhFdsgA9f2w9hfI7ujwFqFLIj7QKuYt+W1LAcJufHYy5BdVCyjgCamx65yb4MA== dependencies: "@codemirror/language" "^0.17.0" "@codemirror/matchbrackets" "^0.17.0" @@ -1917,7 +1917,7 @@ "@codemirror/view" "^0.17.0" lezer-tree "^0.13.0" -"@codemirror/gutter@^0.17.2": +"@codemirror/gutter@^0.17.0": version "0.17.2" resolved "https://registry.yarnpkg.com/@codemirror/gutter/-/gutter-0.17.2.tgz#75c433090d05786614c0c7d14d2efae42c301151" integrity sha512-kyfuNVg3B+yS9U3aNMK/AQ0NyOswOep8lrbldBL4BWXZ8mFzSifT3WNK887WYrEIhqeLjq5qjcsJgFyGrFR0Lg== @@ -1926,10 +1926,10 @@ "@codemirror/state" "^0.17.0" "@codemirror/view" "^0.17.0" -"@codemirror/highlight@^0.17.0", "@codemirror/highlight@^0.17.2": - version "0.17.2" - resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.17.2.tgz#14825083581ed4bd8a4a06cd92a2062d5af923c8" - integrity sha512-KmSOCHjPv7yO9NAtQnqCNwjLHVwFh9InMwul0+JSsor1qLfBR1ljlmqLr7KUe9WWRnM7oD/eSuwF5uNpGtuaNw== +"@codemirror/highlight@^0.17.0": + version "0.17.3" + resolved "https://registry.yarnpkg.com/@codemirror/highlight/-/highlight-0.17.3.tgz#43f519ef93fa1c050ba2cd0631d9d855d9f3ec1e" + integrity sha512-pKuCQ/+CSbibK6ZO2E6YRowhf4LKERwCrSYmQyCw18Dgutt1D2d5t2fv0kziHYC7Jz3ZG2xnrsHABFjS57V6JA== dependencies: "@codemirror/language" "^0.17.0" "@codemirror/rangeset" "^0.17.0" @@ -1938,7 +1938,7 @@ lezer-tree "^0.13.0" style-mod "^3.2.0" -"@codemirror/history@^0.17.2": +"@codemirror/history@^0.17.0": version "0.17.2" resolved "https://registry.yarnpkg.com/@codemirror/history/-/history-0.17.2.tgz#d94273af95f7dbd8a0c41c370984e4bbf55d54e8" integrity sha512-ML/FA6VJMMwsQrx7HFXaOAg/LqrLxUktE5pu230UOn0u5bxIPxbX0lLGs34994s9HPruqbCqIikSc+IfjLkFcA== @@ -1957,7 +1957,7 @@ lezer "^0.13.0" lezer-tree "^0.13.0" -"@codemirror/legacy-modes@^0.17.1": +"@codemirror/legacy-modes@^0.17.0": version "0.17.1" resolved "https://registry.yarnpkg.com/@codemirror/legacy-modes/-/legacy-modes-0.17.1.tgz#18a1a0f4a6b5745e521443525a243b9bc321e8ae" integrity sha512-JafuzWLKuUfKh8rF2VYgUx+fzD4upFxV9kJuIUyv94/S9RcdrDPRU46AmfSpdumY6A9F2qQuTEc5ZLaK3g0iaw== @@ -1989,7 +1989,7 @@ dependencies: "@codemirror/state" "^0.17.0" -"@codemirror/search@^0.17.1": +"@codemirror/search@^0.17.0": version "0.17.1" resolved "https://registry.yarnpkg.com/@codemirror/search/-/search-0.17.1.tgz#eb6ae529093b09f92b1d62c4d0ad8d09c4e218f7" integrity sha512-wY0KP9my/0uKQk9AU39EqmkY6zMVv2Erej5b1rRBksM78JZXzjNUl4gyhtx1/0om84IZ1ocmW8MRElkAY6r1rw== @@ -2001,14 +2001,14 @@ "@codemirror/view" "^0.17.0" crelt "^1.0.5" -"@codemirror/state@^0.17.0", "@codemirror/state@^0.17.1": +"@codemirror/state@^0.17.0": version "0.17.2" resolved "https://registry.yarnpkg.com/@codemirror/state/-/state-0.17.2.tgz#b94846def08c2258bfdf09839359c31823e663ff" integrity sha512-3WwDsBTMkiyFKJntIZjCiyq0KKo1OaKhq8k9vG/eGRm6bYL8rPOAEvufW6AKwuK3BSAftOAHFNXXq+GRNoL7zg== dependencies: "@codemirror/text" "^0.17.0" -"@codemirror/stream-parser@^0.17.0", "@codemirror/stream-parser@^0.17.1": +"@codemirror/stream-parser@^0.17.0": version "0.17.1" resolved "https://registry.yarnpkg.com/@codemirror/stream-parser/-/stream-parser-0.17.1.tgz#b8508676cffac1c34c98d4004a8449d762bef6cf" integrity sha512-toCFLbPzzXNxCjyeNtu/s5Me1xDFQp6qCS4CNfslnW3iAg86M7W4v8SJocmVO3ALAr/6Ci/ECSIN7jsGZcAitw== @@ -2020,15 +2020,15 @@ lezer "^0.13.0" lezer-tree "^0.13.0" -"@codemirror/text@^0.17.0", "@codemirror/text@^0.17.2": +"@codemirror/text@^0.17.0": version "0.17.2" resolved "https://registry.yarnpkg.com/@codemirror/text/-/text-0.17.2.tgz#7076feeaed16556b52d9b028429296ce10eb1280" integrity sha512-KL+cM+uJPW5skyuTRoW43lOaSQq3YDNEPx5z0V/9Wsz9R9dK4kVP5NIRMUFgl9MUCQ9UxIotvgPDpz65j9wjuA== -"@codemirror/view@^0.17.0", "@codemirror/view@^0.17.7": - version "0.17.10" - resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.17.10.tgz#d3bf4b2435b68c7ede784583f2c240f58ac3d5c4" - integrity sha512-Ke3mgfw1qnLekFDFYJsz8ewKa0dBnnUrlYSZd+1X1XkMaqmKZj6enbcvpW0/GnxOvGJpa+HrWCMSrRvCrlaqjA== +"@codemirror/view@^0.17.0": + version "0.17.11" + resolved "https://registry.yarnpkg.com/@codemirror/view/-/view-0.17.11.tgz#d9fad5aa405769f97621bb77fab7abc2edb55f2d" + integrity sha512-pl5fOiBLifExuqAuqhv/yOZvDODQrO26HEtljv4DJqx2Em5kKjzWVHhQymq0dh+nPY+qA4vZCGcT5r/ySNR52Q== dependencies: "@codemirror/rangeset" "^0.17.0" "@codemirror/state" "^0.17.0" @@ -12965,9 +12965,9 @@ strip-json-comments@^3.0.1: integrity sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw== style-mod@^3.2.0: - version "3.2.1" - resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-3.2.1.tgz#daaa4ad2a8b2880b4c07b29c061d49b5db6cab15" - integrity sha512-cQerrMLHjR/fxC4DWC2dRrXc11hvsM7lJ2vtuMOHWU5IG7Deu5RfTbttjbY4xiRAWs3gFIZZFf694jzNPW1Ehw== + version "3.2.2" + resolved "https://registry.yarnpkg.com/style-mod/-/style-mod-3.2.2.tgz#fc445fdd08bd5a513363079ba625f69b2618f31d" + integrity sha512-7X3zF+GjUSQ/opNrzuEOqM+lF+4SOkG5aWxrNw/5rwBrHytsH1Ly8/o9e6Wnqoul2lLT1Pmue63LgiE6mEZAGw== subarg@^1.0.0: version "1.0.0"