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

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

@@ -10,95 +10,100 @@
.codeEditor { .codeEditor {
height : calc(100% - 25px); height : calc(100% - 25px);
.cm-editor { height : 100%; } .cm-editor { height : 100%; }
.cm-pageLine, &.brewSnippets .cm-snippetLine { &.brewSnippets .cm-snippetLine {
background : #33333328; background : #33333328;
border-top : #333399 solid 1px; border-top : #333399 solid 1px;
} }
.cm-tooltip-autocomplete { &.brewText, &.brewSnippets {
li { .cm-pageLine {
display : flex; background : #33333328;
gap : 10px; border-top : #333399 solid 1px;
align-items : center;
justify-content : flex-start;
.cm-completionIcon { display : none; }
.cm-tooltip-autocomplete .cm-completionLabel { translate : 0 -2px; }
} }
} .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 { .cm-count {
float : right; float : right;
color : grey; 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;
} }
&.term { color : rgb(96, 117, 143); } .cm-columnSplit {
&.definition { color : rgb(97, 57, 178); } font-style : italic;
} color : grey;
.cm-block:not(.cm-comment) { background-color : fade(#229999, 15%);
font-weight : bold; border-bottom : #229999 solid 1px;
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); } .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 { .brewJump {