f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-27 08:08:11 +00:00
Code Wiki Activity

snippetline count, and disable highlights in css tab

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-03-26 23:56:40 +01:00
parent d4c1eba3f3
commit 06e15a04e9
2 changed files with 93 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/components/codeEditor/codeEditor.jsx
View File

@@ -39,7 +39,7 @@ const createHighlightPlugin = (renderer, tab)=>{
}
toDOM() {
const span = document.createElement('span');
span.className = 'cm-page-count';
span.className = 'cm-count';
span.textContent = this.count;
span.style.color = '#989898';
return span;
@@ -62,6 +62,7 @@ const createHighlightPlugin = (renderer, tab)=>{
const tokens = tokenize(view.state.doc.toString());
let pageCount = 1;
let snippetCount = 0;
tokens.forEach((tok)=>{
const line = view.state.doc.line(tok.line + 1);
@@ -74,11 +75,15 @@ const createHighlightPlugin = (renderer, tab)=>{
} else {
decos.push(Decoration.line({ class: `cm-${tok.type}` }).range(line.from));
if(tok.type === 'pageLine') {
if(tok.type === 'pageLine' && tab === "brewText") {
pageCount++;
line.from === 0 && pageCount--;
decos.push(Decoration.widget({ widget: new countWidget(pageCount), side: 2 }).range(line.to));
}
if(tok.type === 'snippetLine' && tab === "brewSnippets") {
snippetCount++;
decos.push(Decoration.widget({ widget: new countWidget(snippetCount), side: 2 }).range(line.to));
}
}
});
@@ -121,7 +126,7 @@ const CodeEditor = forwardRef(
? syntaxHighlighting(customHighlightStyle)
: syntaxHighlighting(legacyCustomHighlightStyle);
const customHighlightPlugin = createHighlightPlugin(renderer);
const customHighlightPlugin = createHighlightPlugin(renderer, tab);
const combinedHighlight = [
customHighlightPlugin,
@@ -231,7 +236,7 @@ const CodeEditor = forwardRef(
? syntaxHighlighting(customHighlightStyle)
: syntaxHighlighting(legacyCustomHighlightStyle);
const customHighlightPlugin = createHighlightPlugin(renderer);
const customHighlightPlugin = createHighlightPlugin(renderer, tab);
view.dispatch({
effects : highlightCompartment.reconfigure([customHighlightPlugin, highlightExtension]),

163
client/homebrew/editor/editor.less
View File

@@ -10,95 +10,100 @@
.codeEditor {
height : calc(100% - 25px);
.cm-editor { height : 100%; }
.cm-pageLine, &.brewSnippets .cm-snippetLine {
&.brewSnippets .cm-snippetLine {
background : #33333328;
border-top : #333399 solid 1px;
}
.cm-tooltip-autocomplete {
&.brewText, &.brewSnippets {
li {
display : flex;
gap : 10px;
align-items : center;
justify-content : flex-start;
.cm-completionIcon { display : none; }
.cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; }
.cm-pageLine {
background : #33333328;
border-top : #333399 solid 1px;
}
}
.cm-tooltip-autocomplete {
li {
display : flex;
gap : 10px;
align-items : center;
justify-content : flex-start;
.cm-completionIcon { display : none; }
.cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; }
}
}
.cm-page-count {
float : right;
color : grey;
}
.cm-snippet-count {
float : right;
color : grey;
}
.cm-columnSplit {
font-style : italic;
color : grey;
background-color : fade(#229999, 15%);
border-bottom : #229999 solid 1px;
}
.cm-define {
&:not(.term):not(.definition) {
font-weight : bold;
color : #949494;
background : #E5E5E5;
border-radius : 3px;
.cm-count {
float : right;
color : grey;
}
&.term { color : rgb(96, 117, 143); }
&.definition { color : rgb(97, 57, 178); }
}
.cm-block:not(.cm-comment) {
font-weight : bold;
color : purple;
//font-style: italic;
}
.cm-inline-block:not(.cm-comment) {
font-weight : bold;
color : red;
//font-style: italic;
}
.cm-injection:not(.cm-comment) {
font-weight : bold;
color : green;
}
.cm-emoji:not(.cm-comment) {
padding-bottom : 1px;
margin-left : 2px;
font-weight : bold;
color : #360034;
outline : solid 2px #FF96FC;
outline-offset : -2px;
background : #FFC8FF;
border-radius : 6px;
}
.cm-superscript:not(.cm-comment) {
font-size : 0.9em;
font-weight : bold;
vertical-align : super;
color : goldenrod;
}
.cm-subscript:not(.cm-comment) {
font-size : 0.9em;
font-weight : bold;
vertical-align : sub;
color : rgb(123, 123, 15);
}
.cm-definitionList {
.cm-definitionTerm { color : rgb(96, 117, 143); }
.cm-definitionColon {
font-weight : bold;
color : #949494;
background : #E5E5E5;
border-radius : 3px;
.cm-columnSplit {
font-style : italic;
color : grey;
background-color : fade(#229999, 15%);
border-bottom : #229999 solid 1px;
}
.cm-definitionDesc { color : rgb(97, 57, 178); }
}
.cm-define {
&:not(.term):not(.definition) {
font-weight : bold;
color : #949494;
background : #E5E5E5;
border-radius : 3px;
}
&.term { color : rgb(96, 117, 143); }
&.definition { color : rgb(97, 57, 178); }
}
.cm-block:not(.cm-comment) {
font-weight : bold;
color : purple;
//font-style: italic;
}
.cm-inline-block:not(.cm-comment) {
font-weight : bold;
color : red;
//font-style: italic;
}
.cm-injection:not(.cm-comment) {
font-weight : bold;
color : green;
}
.cm-emoji:not(.cm-comment) {
padding-bottom : 1px;
margin-left : 2px;
font-weight : bold;
color : #360034;
outline : solid 2px #FF96FC;
outline-offset : -2px;
background : #FFC8FF;
border-radius : 6px;
}
.cm-superscript:not(.cm-comment) {
font-size : 0.9em;
font-weight : bold;
vertical-align : super;
color : goldenrod;
}
.cm-subscript:not(.cm-comment) {
font-size : 0.9em;
font-weight : bold;
vertical-align : sub;
color : rgb(123, 123, 15);
}
.cm-definitionList {
.cm-definitionTerm { color : rgb(96, 117, 143); }
.cm-definitionColon {
font-weight : bold;
color : #949494;
background : #E5E5E5;
border-radius : 3px;
}
.cm-definitionDesc { color : rgb(97, 57, 178); }
}
}
}
.brewJump {