rfellows commented on code in PR #10144:
URL: https://github.com/apache/nifi/pull/10144#discussion_r2279784676
##########
nifi-frontend/src/main/frontend/apps/update-attribute/src/app/pages/update-attribute/ui/ua-editor/_ua-editor.component-theme.scss:
##########
@@ -22,12 +22,6 @@
.ua-editor {
@include mat.button-density(-1);
- .editor {
- &.blank {
- cursor: not-allowed !important;
- }
- }
-
.CodeMirror.cm-s-nifi {
Review Comment:
`CodeMirror` class specifier is no longer needed, right?
there are still a few other places where we use `.CodeMirror` in css files.
we should clean those up if not needed anymore as well.
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/codemirror/themes/defaultTheme.ts:
##########
@@ -0,0 +1,36 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { baseTheme } from './baseTheme';
+import { EditorView } from '@codemirror/view';
+
+export const defaultTheme = EditorView.theme({
+ ...baseTheme,
+ '.tok-comment': { color: 'var(--editor-comment)' },
+ '.tok-controlKeyword': { color: 'var(--editor-control-keyword)' },
+ '.tok-definitionKeyword.tok-keyword': { color: 'var(--editor-keyword)' },
+ '.tok-variableName': { color: 'var(--editor-variable-name)' },
+ '.tok-keyword': { color: 'var(--editor-py-keyword)' },
+ '.tok-name': { color: 'var(--editor-text)' },
+ '.tok-functionName.tok-variableName': { color:
'var(--editor-function-name-variable-name)' },
+ '.tok-number': { color: 'var(--editor-number)' },
+ '.tok-string2': { color: 'var(--editor-special)' },
+ '.tok-string': { color: 'var(--editor-string)' },
+ '.tok-typeName': { color: 'var(--editor-type-name)' },
+ '.typetag': { color: 'var(--editor-type-tag)' },
Review Comment:
`--editor-type-tag` is not defined in either purple or material theme files.
##########
nifi-frontend/src/main/frontend/libs/shared/src/components/codemirror/themes/baseTheme.ts:
##########
@@ -0,0 +1,442 @@
+/*!
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { StyleSpec } from 'style-mod';
+
+const boxStyle = {
+ boxShadow: 'var(--mat-sys-level2)',
Review Comment:
`--mat-sys-level2` doesn't seem to be defined in either theme.
##########
nifi-frontend/src/main/frontend/apps/standard-content-viewer/src/app/pages/standard-content-viewer/feature/standard-content-viewer.component.ts:
##########
@@ -69,7 +109,69 @@ export class StandardContentViewer {
loadContent(): void {
if (this.ref && this.mimeTypeDisplayName) {
- this.setMode(this.mimeTypeDisplayName);
+ // Base extensions that are always included
+ const baseExtensions: Extension[] = [
+ lineNumbers(),
+ history(),
+ indentUnit.of(' '),
+ EditorView.lineWrapping,
+ rectangularSelection(),
+ crosshairCursor(),
+ EditorState.allowMultipleSelections.of(true),
+ indentOnInput(),
+ highlightActiveLine(),
+ [highlightActiveLineGutter(), Prec.highest(lineNumbers())],
+ foldGutter(),
+ bracketMatching(),
+ EditorView.contentAttributes.of({ 'aria-label': 'Code Editor'
}),
+ keymap.of([...defaultKeymap, ...historyKeymap, ...foldKeymap])
+ ];
+
+ // Define highlight styles
+ const xmlHighlightStyle = HighlightStyle.define([
+ { tag: t.tagName, color: 'var(--editor-variable-2)' },
+ { tag: t.comment, color: 'var(--editor-comment)' }
+ ]);
Review Comment:
I think we should make this a bit more robust. currently, only tags and
comments are colored. Here is my suggestion:
```suggestion
const xmlHighlightStyle = HighlightStyle.define([
{ tag: t.tagName, color: 'var(--editor-variable-2)' },
{ tag: t.comment, color: 'var(--editor-comment)' },
{ tag: t.attributeName, color: 'var(--editor-variable-2)' },
{ tag: t.attributeValue, color: 'var(--editor-string)' },
{ tag: t.string, color: 'var(--editor-string)' },
{ tag: t.content, color: 'var(--editor-text)' },
{ tag: t.punctuation, color: 'var(--editor-bracket)' },
{ tag: t.angleBracket, color: 'var(--editor-bracket)' }
]);
```
**Before:**
<img width="910" height="879" alt="Screenshot 2025-08-15 at 16 51 20"
src="https://github.com/user-attachments/assets/408ce774-a4d9-44d4-ba31-89468c08bd46";
/>
**After:**
<img width="876" height="879" alt="Screenshot 2025-08-15 at 16 52 51"
src="https://github.com/user-attachments/assets/7b4ecd9a-1c44-4e04-ac0d-1bb2bbc8ded8";
/>
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss:
##########
@@ -162,34 +164,40 @@
--nf-connection-drop-shadow: white; /* The connection drop shadow color */
--nf-canvas-background: #e5ebed; /* The canvas background color */
--nf-canvas-border-stroke-width: 1; /* The canvas border stroke width */
- --nf-codemirror-gutters: #efefef; /* The codemirror gutters color */
- --nf-codemirror-linenumber: #b4b4b4; /* The codemirror line number color */
- --nf-codemirror-selection: rgba(128, 203, 196, 0.8); /* The codemirror
selection color */
- --nf-codemirror-header: #0000ff; /* The codemirror header color */
- --nf-codemirror-quote: #009400; /* The codemirror quote color */
- --nf-codemirror-negative: #de3535; /* The codemirror negative color */
- --nf-codemirror-positive: #219a21; /* The codemirror positive color */
- --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
- --nf-codemirror-keyword: #6800ab; /* The codemirror keyword color */
- --nf-codemirror-error-background-color: #ff8094; /* The codemirror error
background color */
- --nf-codemirror-error-color: rgba(0, 0, 0, 0); /* The codemirror error
text color */
- --nf-codemirror-link: #0000ce; /* The codemirror link color */
- --nf-codemirror-invalidchar: #ff0000; /* The codemirror invalid character
color */
- --nf-codemirror-operator: #0083b9; /* The codemirror operator color */
- --nf-codemirror-variable: #000; /* The codemirror variable color */
- --nf-codemirror-variable-2: #0054a6; /* The codemirror variable 2 color */
- --nf-codemirror-variable-3: #ad0007; /* The codemirror variable 3 color */
- --nf-codemirror-builtin: #3400ad; /* The codemirror builtin color */
- --nf-codemirror-atom: #bd2b00; /* The codemirror atom color */
- --nf-codemirror-number: #c20021; /* The codemirror number color */
- --nf-codemirror-def: #0553f8; /* The codemirror definition color */
- --nf-codemirror-string: #ec000c; /* The codemirror string color */
- --nf-codemirror-string2: #ec000c; /* The codemirror string 2 color */
- --nf-codemirror-comment: #545454; /* The codemirror comment color */
- --nf-codemirror-tag: #f8052e; /* The codemirror tag color */
- --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non
matching bracket color */
- --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.3); /* The codemirror
matching tag color */
- --nf-codemirror-activeline-background: rgba(0, 0, 0, 0.5); /* The
codemirror active line background color */
+
+ // Codemirror
+ --editor-text: #191e24;
+ --editor-comment: #5d6a85;
+ --editor-string: #860112;
+ --editor-keyword: #085bd7;
+ --editor-function: #087959;
+ --editor-type: #653e03;
+ --editor-line-number: #5d6a85;
+ --editor-active-line-number: #191e24;
+ --editor-control-keyword: #653e03;
+ --editor-variable-name: #002c6e;
+ --editor-py-keyword: #9712e8;
+ --editor-function-name-variable-name: #653e03;
+ --editor-number: #087959;
+ --editor-special: #bf0822;
+ --editor-type-name: #087959;
+ --editor-error-bg: #f76a86;
+ --editor-executed-bg: #d6e6ff;
+ --editor-selection-match-bg: #9fabc144;
+ --editor-search-match-bg: #ffedcd;
+ --editor-search-match-selected-bg: #ffedcd;
+ --editor-active-handler-border: #b67901;
+ --editor-link: #0000ce;
+ --editor-matchingtag: rgba(255, 150, 0, 0.3);
+ --editor-selected-background: #d6e6ff;
+ --editor-selected-ui: #085bd7;
+ --editor-selected-hover-text: #004cbe;
+ --editor-bracket: #93937c;
+ --editor-parameter: #ec000c;
+ --editor-el-function: #3400ad;
+ --editor-variable-2: #0679e8;
Review Comment:
I was wondering if we should define some root values for these tokens
outside of the theming system just in case there are cases in the wild where
developers have created their own theme. Until they specify these tokens, their
usage of the editors would appear broken due to no syntax highlighting.
Not sure it is a big deal or not, we really don't provide fallbacks for
other things in the theming. It was just a thought I had. Let me know what you
think.
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss:
##########
@@ -647,34 +656,41 @@ html {
--nf-connection-drop-shadow: black; /* The connection drop shadow color */
--nf-canvas-background: #0d1411; /* The canvas background color */
--nf-canvas-border-stroke-width: 2; /* The canvas border stroke width */
- --nf-codemirror-gutters: #3b3b3b; /* The codemirror gutters color */
- --nf-codemirror-linenumber: #bbbbbb; /* The codemirror line number color */
- --nf-codemirror-selection: rgba(128, 203, 196, 0.2); /* The codemirror
selection color */
- --nf-codemirror-header: #b8b8ff; /* The codemirror header color */
- --nf-codemirror-quote: #6bfd6b; /* The codemirror quote color */
- --nf-codemirror-negative: #fc9797; /* The codemirror negative color */
- --nf-codemirror-positive: #8cfd8c; /* The codemirror positive color */
- --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
- --nf-codemirror-keyword: #c792ea; /* The codemirror keyword color */
- --nf-codemirror-error-background-color: #ff002a; /* The codemirror error
background color */
- --nf-codemirror-error-color: rgba(255, 255, 255, 1); /* The codemirror
error text color */
- --nf-codemirror-link: #8e8ef6; /* The codemirror link color */
- --nf-codemirror-invalidchar: #ff9c9c; /* The codemirror invalid character
color */
- --nf-codemirror-operator: #89ddff; /* The codemirror operator color */
- --nf-codemirror-variable: #fff; /* The codemirror variable color */
- --nf-codemirror-variable-2: #72b6fc; /* The codemirror variable 2 color */
- --nf-codemirror-variable-3: #f07178; /* The codemirror variable 3 color */
- --nf-codemirror-builtin: #a280f3; /* The codemirror builtin color */
- --nf-codemirror-atom: #f78c6c; /* The codemirror atom color */
- --nf-codemirror-number: #fd758c; /* The codemirror number color */
- --nf-codemirror-def: #82aaff; /* The codemirror definition color */
- --nf-codemirror-string: #f07178; /* The codemirror string color */
- --nf-codemirror-string2: #f07178; /* The codemirror string 2 color */
- --nf-codemirror-comment: #d7d7d7; /* The codemirror comment color */
- --nf-codemirror-tag: #fc768d; /* The codemirror tag color */
- --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non
matching bracket color */
- --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.97); /* The codemirror
matching tag color */
- --nf-codemirror-activeline-background: rgba(255, 255, 255, 0.5); /* The
codemirror active line background color */
+
+ // Codemirror
+ --editor-text: #f7f7f7;
+ --editor-comment: #70819a;
+ --editor-string: #f76a86;
+ --editor-keyword: #86b6fc;
+ --editor-function: #97f3cf;
+ --editor-type: #fccf54;
+ --editor-line-number: #bdc4d5;
+ --editor-active-line-number: #fbfbfb;
+ --editor-control-keyword: #fccf54;
+ --editor-variable-name: #5999f8;
+ --editor-py-keyword: #cb7efa;
+ --editor-function-name-variable-name: #fccf54;
+ --editor-number: #97f3cf;
+ --editor-special: #f76a86;
+ --editor-type-name: #97f3cf;
+ --editor-error-bg: #66000e;
+ --editor-executed-bg: #002c6e;
+ --editor-selection-match-bg: #9fabc144;
+ --editor-search-match-bg: #653e03;
+ --editor-search-match-selected-bg: #dd5f04cc;
+ --editor-active-handler-border: #ffedcd;
+ --editor-link: #8e8ef6;
+ --editor-matchingtag: rgba(255, 150, 0, 0.97);
+ --editor-selected-background: #d6e6ff;
+ --editor-selected-ui: #085bd7;
+ --editor-selected-hover-text: #004cbe;
+ --editor-selection-match-bg: #9fabc144;
+ --editor-bracket: #93937c;
+ --editor-parameter: #f07178;
Review Comment:
Maybe not use the red
```suggestion
--editor-parameter: #72b6fc;
```
##########
nifi-frontend/src/main/frontend/libs/shared/src/assets/themes/material.scss:
##########
@@ -162,34 +164,40 @@
--nf-connection-drop-shadow: white; /* The connection drop shadow color */
--nf-canvas-background: #e5ebed; /* The canvas background color */
--nf-canvas-border-stroke-width: 1; /* The canvas border stroke width */
- --nf-codemirror-gutters: #efefef; /* The codemirror gutters color */
- --nf-codemirror-linenumber: #b4b4b4; /* The codemirror line number color */
- --nf-codemirror-selection: rgba(128, 203, 196, 0.8); /* The codemirror
selection color */
- --nf-codemirror-header: #0000ff; /* The codemirror header color */
- --nf-codemirror-quote: #009400; /* The codemirror quote color */
- --nf-codemirror-negative: #de3535; /* The codemirror negative color */
- --nf-codemirror-positive: #219a21; /* The codemirror positive color */
- --nf-codemirror-bracket: #93937c; /* The codemirror bracket color */
- --nf-codemirror-keyword: #6800ab; /* The codemirror keyword color */
- --nf-codemirror-error-background-color: #ff8094; /* The codemirror error
background color */
- --nf-codemirror-error-color: rgba(0, 0, 0, 0); /* The codemirror error
text color */
- --nf-codemirror-link: #0000ce; /* The codemirror link color */
- --nf-codemirror-invalidchar: #ff0000; /* The codemirror invalid character
color */
- --nf-codemirror-operator: #0083b9; /* The codemirror operator color */
- --nf-codemirror-variable: #000; /* The codemirror variable color */
- --nf-codemirror-variable-2: #0054a6; /* The codemirror variable 2 color */
- --nf-codemirror-variable-3: #ad0007; /* The codemirror variable 3 color */
- --nf-codemirror-builtin: #3400ad; /* The codemirror builtin color */
- --nf-codemirror-atom: #bd2b00; /* The codemirror atom color */
- --nf-codemirror-number: #c20021; /* The codemirror number color */
- --nf-codemirror-def: #0553f8; /* The codemirror definition color */
- --nf-codemirror-string: #ec000c; /* The codemirror string color */
- --nf-codemirror-string2: #ec000c; /* The codemirror string 2 color */
- --nf-codemirror-comment: #545454; /* The codemirror comment color */
- --nf-codemirror-tag: #f8052e; /* The codemirror tag color */
- --nf-codemirror-nonmatchingbracket: #a62020; /* The codemirror non
matching bracket color */
- --nf-codemirror-matchingtag: rgba(255, 150, 0, 0.3); /* The codemirror
matching tag color */
- --nf-codemirror-activeline-background: rgba(0, 0, 0, 0.5); /* The
codemirror active line background color */
+
+ // Codemirror
+ --editor-text: #191e24;
+ --editor-comment: #5d6a85;
+ --editor-string: #860112;
+ --editor-keyword: #085bd7;
+ --editor-function: #087959;
+ --editor-type: #653e03;
+ --editor-line-number: #5d6a85;
+ --editor-active-line-number: #191e24;
+ --editor-control-keyword: #653e03;
+ --editor-variable-name: #002c6e;
+ --editor-py-keyword: #9712e8;
+ --editor-function-name-variable-name: #653e03;
+ --editor-number: #087959;
+ --editor-special: #bf0822;
+ --editor-type-name: #087959;
+ --editor-error-bg: #f76a86;
+ --editor-executed-bg: #d6e6ff;
+ --editor-selection-match-bg: #9fabc144;
+ --editor-search-match-bg: #ffedcd;
+ --editor-search-match-selected-bg: #ffedcd;
+ --editor-active-handler-border: #b67901;
+ --editor-link: #0000ce;
+ --editor-matchingtag: rgba(255, 150, 0, 0.3);
+ --editor-selected-background: #d6e6ff;
+ --editor-selected-ui: #085bd7;
+ --editor-selected-hover-text: #004cbe;
+ --editor-bracket: #93937c;
+ --editor-parameter: #ec000c;
Review Comment:
The red used for parameters is a bit harsh. i suggest the purle-ish blue:
```suggestion
--editor-parameter: #3400ad;
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
