0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-26 21:18:12 +00:00

small fixes

This commit is contained in:
Víctor Losada Hernández
2026-03-26 14:42:56 +01:00
parent b0ebeaffb9
commit 3b9eae2e4f
3 changed files with 17 additions and 23 deletions

View File

@@ -28,7 +28,6 @@ import { customHighlightStyle, tokenizeCustomMarkdown } from './customHighlight.
import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js'; //only makes highlight for import { legacyCustomHighlightStyle, legacyTokenizeCustomMarkdown } from './legacyCustomHighlight.js'; //only makes highlight for
const createHighlightPlugin = (renderer)=>{ const createHighlightPlugin = (renderer)=>{
console.log(renderer);
const tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown; const tokenize = renderer === 'V3' ? tokenizeCustomMarkdown : legacyTokenizeCustomMarkdown;
return ViewPlugin.fromClass( return ViewPlugin.fromClass(
@@ -164,7 +163,6 @@ const CodeEditor = forwardRef(
highlightActiveLine(), highlightActiveLine(),
highlightActiveLineGutter(), highlightActiveLineGutter(),
customHighlightPlugin,
highlightCompartment.of(combinedHighlight), highlightCompartment.of(combinedHighlight),
]; ];
}; };
@@ -237,10 +235,9 @@ const CodeEditor = forwardRef(
const view = viewRef.current; const view = viewRef.current;
if(!view) return; if(!view) return;
const highlightExtension = const highlightExtension =renderer === 'V3'
renderer === 'V3' ? syntaxHighlighting(customHighlightStyle)
? syntaxHighlighting(customHighlightStyle) : syntaxHighlighting(legacyCustomHighlightStyle);
: syntaxHighlighting(legacyCustomHighlightStyle);
const customHighlightPlugin = createHighlightPlugin(renderer); const customHighlightPlugin = createHighlightPlugin(renderer);
@@ -294,7 +291,7 @@ const CodeEditor = forwardRef(
focus : ()=>viewRef.current.focus(), focus : ()=>viewRef.current.focus(),
})); }));
return <div className='codeEditor' ref={editorRef} style={style} />; return <div className={`codeEditor ${tab}`} ref={editorRef} style={style} />;
}, },
); );

View File

@@ -3,20 +3,19 @@ import { tags } from '@lezer/highlight';
// Making the tokens // Making the tokens
const customTags = { const customTags = {
pageLine : 'pageLine', // .cm-pageLine pageLine : 'pageLine', // .cm-pageLine
snippetLine : 'snippetLine', // .cm-snippetLine snippetLine : 'snippetLine', // .cm-snippetLine
columnSplit : 'columnSplit', // .cm-columnSplit columnSplit : 'columnSplit', // .cm-columnSplit
snippetBreak : 'snippetBreak', // .cm-snippetBreak block : 'block', // .cm-block
block : 'block', // .cm-block inlineBlock : 'inline-block', // .cm-inline-block
inlineBlock : 'inline-block', // .cm-inline-block injection : 'injection', // .cm-injection
injection : 'injection', // .cm-injection emoji : 'emoji', // .cm-emoji
emoji : 'emoji', // .cm-emoji superscript : 'superscript', // .cm-superscript
superscript : 'superscript', // .cm-superscript subscript : 'subscript', // .cm-subscript
subscript : 'subscript', // .cm-subscript
definitionList : 'definitionList', // .cm-definitionList definitionList : 'definitionList', // .cm-definitionList
definitionTerm : 'definitionTerm', // .cm-definitionTerm definitionTerm : 'definitionTerm', // .cm-definitionTerm
definitionDesc : 'definitionDesc', // .cm-definitionDesc definitionDesc : 'definitionDesc', // .cm-definitionDesc
definitionColon : 'definitionColon', // .cm-definitionColon definitionColon : 'definitionColon',// .cm-definitionColon
}; };
export function tokenizeCustomMarkdown(text) { export function tokenizeCustomMarkdown(text) {
@@ -32,7 +31,6 @@ export function tokenizeCustomMarkdown(text) {
if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine }); if(/^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m.test(lineText)) tokens.push({ line: lineNumber, type: customTags.pageLine });
if(/^\\snippet\ .*$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.snippetLine }); if(/^\\snippet\ .*$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.snippetLine });
if(/^\\column(?:break)?$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.columnSplit }); if(/^\\column(?:break)?$/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.columnSplit });
if(/\\snippet/.test(lineText)) tokens.push({ line: lineNumber, type: customTags.snippetBreak });
// --- Emoji --- // --- Emoji ---
if(/:.\w+?:/.test(lineText)) { if(/:.\w+?:/.test(lineText)) {
@@ -230,8 +228,6 @@ export function tokenizeCustomMarkdown(text) {
if(match) endCh = match.index + match[0].length; if(match) endCh = match.index + match[0].length;
tokens.push({ line: lineNumber, type: customTags.block }); tokens.push({ line: lineNumber, type: customTags.block });
} }
}); });
return tokens; return tokens;
@@ -241,7 +237,7 @@ export const customHighlightStyle = HighlightStyle.define([
{ tag: tags.heading1, color: '#000', fontWeight: '700' }, { tag: tags.heading1, color: '#000', fontWeight: '700' },
{ tag: tags.keyword, color: '#07a' }, // example for your markdown headings { tag: tags.keyword, color: '#07a' }, // example for your markdown headings
{ tag: customTags.pageLine, color: '#f0a' }, { tag: customTags.pageLine, color: '#f0a' },
{ tag: customTags.snippetBreak, class: 'cm-snippet-break', color: '#0af' }, { tag: customTags.snippetLine, class: 'cm-snippetLine', color: '#0af' },
{ tag: customTags.inlineBlock, class: 'cm-inline-block', backgroundColor: '#fffae6' }, { tag: customTags.inlineBlock, class: 'cm-inline-block', backgroundColor: '#fffae6' },
{ tag: customTags.emoji, class: 'cm-emoji', color: '#fa0' }, { tag: customTags.emoji, class: 'cm-emoji', color: '#fa0' },
{ tag: customTags.superscript, class: 'cm-superscript', verticalAlign: 'super', fontSize: '0.8em' }, { tag: customTags.superscript, class: 'cm-superscript', verticalAlign: 'super', fontSize: '0.8em' },

View File

@@ -10,10 +10,11 @@
.codeEditor { .codeEditor {
height : calc(100% - 25px); height : calc(100% - 25px);
.cm-editor { height : 100%; } .cm-editor { height : 100%; }
.cm-pageLine, .cm-snippetLine { .cm-pageLine, &.brewSnippets .cm-snippetLine {
background : #33333328; background : #33333328;
border-top : #333399 solid 1px; border-top : #333399 solid 1px;
} }
.cm-editor-page-count { .cm-editor-page-count {
float : right; float : right;
color : grey; color : grey;