From 0842e398c493cc97d06994b93eb632c3f6580027 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 27 Mar 2026 16:10:45 +0100 Subject: [PATCH] most of the css highlights --- client/components/codeEditor/codeEditor.jsx | 16 ++++--- .../components/codeEditor/customHighlight.js | 45 ++++++++++++++++++- themes/codeMirror/customThemes/default.js | 8 ++-- 3 files changed, 57 insertions(+), 12 deletions(-) diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx index 3fe8e82ac..f1e95dca5 100644 --- a/client/components/codeEditor/codeEditor.jsx +++ b/client/components/codeEditor/codeEditor.jsx @@ -17,7 +17,7 @@ import { EditorState, Compartment } from '@codemirror/state'; import { foldGutter, foldKeymap, syntaxHighlighting } from '@codemirror/language'; import { defaultKeymap, history, historyField, undo, redo } from '@codemirror/commands'; import { languages } from '@codemirror/language-data'; -import { css } from '@codemirror/lang-css'; +import { css, cssLanguage } from '@codemirror/lang-css'; import { markdown, markdownLanguage } from '@codemirror/lang-markdown'; import { autocompleteEmoji } from './autocompleteEmoji.js'; import { searchKeymap, search } from '@codemirror/search'; @@ -31,11 +31,17 @@ const highlightCompartment = new Compartment(); import { customKeymap } from './customKeyMap.js'; import { homebreweryFold, hbFolding } from './customFolding.js'; -import { customHighlightStyle, tokenizeCustomMarkdown } from './customHighlight.js'; +import { customHighlightStyle, tokenizeCustomMarkdown, tokenizeCustomCSS } from './customHighlight.js'; import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js'; //only makes highlight for const createHighlightPlugin = (renderer, tab)=>{ - const tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown; + let tokenize; + +if (tab === "brewStyles") { + tokenize = tokenizeCustomCSS; +} else { + tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown; +} /* eslint-disable no-restricted-syntax */ class countWidget extends WidgetType { constructor(count) { @@ -153,7 +159,7 @@ const CodeEditor = forwardRef( highlightExtension, ]; - const languageExtension = language === 'css' ? css() : markdown({ base: markdownLanguage, codeLanguages: languages }); + const languageExtension = language === 'css' ? [css(), cssLanguage] : markdown({ base: markdownLanguage, codeLanguages: languages }); const themeExtension = Array.isArray(themes[editorTheme]) ? themes[editorTheme] : []; @@ -178,7 +184,7 @@ const CodeEditor = forwardRef( highlightActiveLineGutter(), highlightCompartment.of(combinedHighlight), themeCompartment.of(themeExtension), - autocompleteEmoji, + ...(tab !== 'brewStyles' ? [autocompleteEmoji] : []), search(), ]; }; diff --git a/client/components/codeEditor/customHighlight.js b/client/components/codeEditor/customHighlight.js index 38a5dbba8..f13445720 100644 --- a/client/components/codeEditor/customHighlight.js +++ b/client/components/codeEditor/customHighlight.js @@ -16,13 +16,17 @@ const customTags = { definitionTerm : 'definitionTerm', // .cm-definitionTerm definitionDesc : 'definitionDesc', // .cm-definitionDesc definitionColon : 'definitionColon', // .cm-definitionColon + + //CSS + + variable: 'variable', + colorMark: 'colorMark', }; export function tokenizeCustomMarkdown(text) { const tokens = []; const lines = text.split('\n'); - console.log(tags); lines.forEach((lineText, lineNumber)=>{ // --- Page / snippet lines --- if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine }); @@ -228,6 +232,29 @@ export function tokenizeCustomMarkdown(text) { return tokens; } +export function tokenizeCustomCSS(text) { + const tokens = []; + const lines = text.split('\n'); + + lines.forEach((lineText, lineNumber)=>{ + + if(/--[a-zA-Z0-9-_]+/gm.test(lineText)) { + const varRegex =/--[a-zA-Z0-9-_]+/gm; + let match; + while ((match = varRegex.exec(lineText)) !== null) { + tokens.push({ + line : lineNumber, + from : match.index +1, + to : match.index + match.length[1] +1, + type : customTags.varProperty, + }); + } + } + }); + + return tokens; +} + export const customHighlightStyle = HighlightStyle.define([ { tag: tags.heading, class: 'cm-header' }, { tag: tags.heading1, class: 'cm-header cm-header-1' }, @@ -236,13 +263,27 @@ export const customHighlightStyle = HighlightStyle.define([ { tag: tags.heading4, class: 'cm-header cm-header-4' }, { tag: tags.heading5, class: 'cm-header cm-header-5' }, { tag: tags.heading6, class: 'cm-header cm-header-6' }, + { tag: tags.link, class: 'cm-link' }, { tag: tags.string, class: 'cm-string' }, { tag: tags.url, class: 'cm-string cm-url' }, { tag: tags.list, class: 'cm-list' }, { tag: tags.strong, class: 'cm-strong' }, { tag: tags.emphasis, class: 'cm-em' }, - + + { tag: tags.tagName, class: 'cm-tag' }, + { tag: tags.className, class: 'cm-class' }, + { tag: tags.propertyName, class: 'cm-property' }, + { tag: tags.attributeValue, class: 'cm-value' }, + { tag: tags.keyword, class: 'cm-keyword' }, + { tag: tags.atom, class: 'cm-atom' }, + { tag: tags.integer, class: 'cm-integer' }, + { tag: tags.unit, class: 'cm-unit' }, + { tag: tags.color, class: 'cm-color' }, + { tag: tags.paren, class: 'cm-paren' }, + { tag: tags.variableName, class: 'cm-variable' }, + { tag: tags.invalid, class: 'cm-error' }, + { tag: tags.comment, class: 'cm-comment' }, { tag: customTags.pageLine, color: '#f0a' }, { tag: customTags.snippetLine, class: 'cm-snippetLine', color: '#0af' }, diff --git a/themes/codeMirror/customThemes/default.js b/themes/codeMirror/customThemes/default.js index d6974c255..49e663a58 100644 --- a/themes/codeMirror/customThemes/default.js +++ b/themes/codeMirror/customThemes/default.js @@ -46,8 +46,6 @@ export const defaultCM5Theme = EditorView.theme({ }, ".cm-foldmarker": { color: "blue", - textShadow: - "#b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px", fontFamily: "arial", lineHeight: "0.3", cursor: "pointer", @@ -59,16 +57,16 @@ export const defaultCM5Theme = EditorView.theme({ ".cm-em": { fontStyle: "italic" }, ".cm-quote": { color: "#090" }, ".cm-keyword": { color: "#708" }, - ".cm-atom": { color: "#219" }, + ".cm-atom, cm-value, cm-color": { color: "#219" }, ".cm-number": { color: "#164" }, ".cm-def": { color: "#00f" }, ".cm-list": { color: "#05a" }, - ".cm-variable-3, .cm-type": { color: "#085" }, + ".cm-variable, .cm-type": { color: "#085" }, ".cm-comment": { color: "#a50" }, ".cm-link": { color: "#00c", textDecoration: "underline" }, ".cm-string": { color: "#a11", textDecoration: "none" }, ".cm-string-2": { color: "#f50", textDecoration: "none" }, - ".cm-meta, .cm-qualifier": { color: "#555" }, + ".cm-meta, .cm-qualifier, .cm-class": { color: "#555" }, ".cm-builtin": { color: "#30a" }, ".cm-bracket": { color: "#997" }, ".cm-tag": { color: "#170" },