f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 12:22:44 +00:00
Code Wiki Activity

Fix Highlighting issue with new brew sample snippets

Browse Source
This commit is contained in:
David Bolack
2025-03-31 20:50:54 -05:00
parent 4eeaa7c650
commit 8e8f520eaa
1 changed files with 13 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/homebrew/editor/editor.jsx
View File

@@ -13,6 +13,7 @@ const MetadataEditor = require('./metadataEditor/metadataEditor.jsx');
const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME'; const EDITOR_THEME_KEY = 'HOMEBREWERY-EDITOR-THEME';
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m; const PAGEBREAK_REGEX_V3 = /^(?=\\page(?: *{[^\n{}]*})?$)/m;
const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
const SNIPPETBAR_HEIGHT = 25; const SNIPPETBAR_HEIGHT = 25;
const DEFAULT_STYLE_TEXT = dedent` const DEFAULT_STYLE_TEXT = dedent`
/*=======--- Example CSS styling ---=======*/ /*=======--- Example CSS styling ---=======*/
@@ -155,6 +156,7 @@ const Editor = createClass({
handleViewChange : function(newView){ handleViewChange : function(newView){
this.props.setMoveArrows(newView === 'text'); this.props.setMoveArrows(newView === 'text');
this.setState({ this.setState({
view : newView view : newView
}, ()=>{ }, ()=>{
@@ -190,6 +192,9 @@ const Editor = createClass({
const whichSource = this.state.view === 'text' ? this.props.brew.text : this.props.brew.snippets; const whichSource = this.state.view === 'text' ? this.props.brew.text : this.props.brew.snippets;
_.forEach(whichSource?.split('\n'), (line, lineNumber)=>{ _.forEach(whichSource?.split('\n'), (line, lineNumber)=>{
const tabHighlight = this.state.view === 'text' ? 'pageLine' : 'snippetLine';
const textOrSnip = this.state.view === 'text';
//reset custom line styles //reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background', 'pageLine'); codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine'); codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine');
@@ -203,40 +208,28 @@ const Editor = createClass({
// Styling for \page breaks // Styling for \page breaks
if((this.props.renderer == 'legacy' && line.includes('\\page')) || if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
(this.props.renderer == 'V3' && line.match(PAGEBREAK_REGEX_V3))) { (this.props.renderer == 'V3' && line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3))) {
if(lineNumber > 0) // Since \page is optional on first line of document, if((lineNumber > 0) && (textOrSnip)) // Since \page is optional on first line of document,
editorPageCount += 1; // don't use it to increment page count; stay at 1 editorPageCount += 1; // don't use it to increment page count; stay at 1
else if(this.state.view !== 'text') userSnippetCount += 1;
// add back the original class 'background' but also add the new class '.pageline' // add back the original class 'background' but also add the new class '.pageline'
codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); codeMirror.addLineClass(lineNumber, 'background', tabHighlight);
const pageCountElement = Object.assign(document.createElement('span'), { const pageCountElement = Object.assign(document.createElement('span'), {
className : 'editor-page-count', className : 'editor-page-count',
textContent : editorPageCount textContent : textOrSnip ? editorPageCount : userSnippetCount
}); });
codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
}; };
// New Codemirror styling for V3 renderer // New Codemirror styling for V3 renderer
if(this.props.renderer == 'V3') { if(this.props.renderer === 'V3') {
if(line.match(/^\\column$/)){ if(line.match(/^\\column$/)){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit'); codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
} }
// Styling for \snippet breaks
if(this.state.view === 'snip' && line.match(/^\\snippet\ .*$/)) {
// add back the original class 'background' but also add the new class '.snippetLine'
codeMirror.addLineClass(lineNumber, 'background', 'snippetLine');
const userSnippetCountElement = Object.assign(document.createElement('span'), {
className : 'editor-snippet-count',
textContent : userSnippetCount
});
codeMirror.setBookmark({ line: lineNumber, ch: line.length }, userSnippetCountElement);
userSnippetCount += 1;
};
// definition lists // definition lists
if(line.includes('::')){ if(line.includes('::')){
if(/^:*$/.test(line) == true){ return; }; if(/^:*$/.test(line) == true){ return; };
@@ -490,12 +483,13 @@ const Editor = createClass({
} }
if(this.isSnip()){ if(this.isSnip()){
if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
return <> return <>
<CodeEditor key='codeEditor' <CodeEditor key='codeEditor'
ref={this.codeEditor} ref={this.codeEditor}
language='gfm' language='gfm'
view={this.state.view} view={this.state.view}
value={this.props.brew.snippets ?? DEFAULT_SNIPPET_TEXT} value={this.props.brew.snippets}
onChange={this.props.onSnipChange} onChange={this.props.onSnipChange}
enableFolding={true} enableFolding={true}
editorTheme={this.state.editorTheme} editorTheme={this.state.editorTheme}