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

fix back editor.jsx

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-03-24 23:41:17 +01:00
parent 953ef8c534
commit bba3199dba
1 changed files with 267 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,16 +1,16 @@
/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
import "./editor.less"; import './editor.less';
import React from "react"; import React from 'react';
import createReactClass from "create-react-class"; import createReactClass from 'create-react-class';
import _ from "lodash"; import _ from 'lodash';
import dedent from "dedent"; import dedent from 'dedent';
import Markdown from "@shared/markdown.js"; import Markdown from '@shared/markdown.js';
import CodeEditor from "../../components/codeEditor/codeEditor.jsx"; import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
import SnippetBar from "./snippetbar/snippetbar.jsx"; import SnippetBar from './snippetbar/snippetbar.jsx';
import MetadataEditor from "./metadataEditor/metadataEditor.jsx"; import MetadataEditor from './metadataEditor/metadataEditor.jsx';
const EDITOR_THEME_KEY = "HB_editor_theme"; const EDITOR_THEME_KEY = 'HB_editor_theme';
const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/; const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/;
@@ -32,348 +32,295 @@ const DEFAULT_SNIPPET_TEXT = dedent`
let isJumping = false; let isJumping = false;
const Editor = createReactClass({ const Editor = createReactClass({
displayName: "Editor", displayName : 'Editor',
getDefaultProps: function () { getDefaultProps : function() {
return { return {
brew: { brew : {
text: "", text : '',
style: "", style : ''
}, },
onBrewChange: () => {}, onBrewChange : ()=>{},
reportError: () => {}, reportError : ()=>{},
onCursorPageChange: () => {}, onCursorPageChange : ()=>{},
onViewPageChange: () => {}, onViewPageChange : ()=>{},
editorTheme: "default", editorTheme : 'default',
renderer: "legacy", renderer : 'legacy',
currentEditorCursorPageNum: 1, currentEditorCursorPageNum : 1,
currentEditorViewPageNum: 1, currentEditorViewPageNum : 1,
currentBrewRendererPageNum: 1, currentBrewRendererPageNum : 1,
}; };
}, },
getInitialState: function () { getInitialState : function() {
return { return {
editorTheme: this.props.editorTheme, editorTheme : this.props.editorTheme,
view: "text", //'text', 'style', 'meta', 'snippet' view : 'text', //'text', 'style', 'meta', 'snippet'
snippetBarHeight: 26, snippetBarHeight : 26,
}; };
}, },
editor: React.createRef(null), editor : React.createRef(null),
codeEditor: React.createRef(null), codeEditor : React.createRef(null),
isText: function () { isText : function() {return this.state.view == 'text';},
return this.state.view == "text"; isStyle : function() {return this.state.view == 'style';},
}, isMeta : function() {return this.state.view == 'meta';},
isStyle: function () { isSnip : function() {return this.state.view == 'snippet';},
return this.state.view == "style";
}, componentDidMount : function() {
isMeta: function () {
return this.state.view == "meta";
},
isSnip: function () {
return this.state.view == "snippet";
},
componentDidMount: function () {
this.highlightCustomMarkdown(); this.highlightCustomMarkdown();
document.getElementById("BrewRenderer").addEventListener("keydown", this.handleControlKeys); document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
document.addEventListener("keydown", this.handleControlKeys); document.addEventListener('keydown', this.handleControlKeys);
this.codeEditor.current.codeMirror?.on("cursorActivity", (cm) => { this.codeEditor.current.codeMirror?.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
this.updateCurrentCursorPage(cm.getCursor()); this.codeEditor.current.codeMirror?.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
});
this.codeEditor.current.codeMirror?.on(
"scroll",
_.throttle(() => {
this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());
}, 200),
);
const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
if (editorTheme) { if(editorTheme) {
this.setState({ this.setState({
editorTheme: editorTheme, editorTheme : editorTheme
}); });
} }
const snippetBar = document.querySelector(".editor > .snippetBar"); const snippetBar = document.querySelector('.editor > .snippetBar');
if (!snippetBar) return; if(!snippetBar) return;
this.resizeObserver = new ResizeObserver((entries) => { this.resizeObserver = new ResizeObserver((entries)=>{
const height = document.querySelector(".editor > .snippetBar").offsetHeight; const height = document.querySelector('.editor > .snippetBar').offsetHeight;
this.setState({ snippetBarHeight: height }); this.setState({ snippetBarHeight: height });
}); });
this.resizeObserver.observe(snippetBar); this.resizeObserver.observe(snippetBar);
}, },
componentDidUpdate: function (prevProps, prevState, snapshot) { componentDidUpdate : function(prevProps, prevState, snapshot) {
this.highlightCustomMarkdown(); this.highlightCustomMarkdown();
if (prevProps.moveBrew !== this.props.moveBrew) this.brewJump(); if(prevProps.moveBrew !== this.props.moveBrew)
this.brewJump();
if (prevProps.moveSource !== this.props.moveSource) this.sourceJump(); if(prevProps.moveSource !== this.props.moveSource)
this.sourceJump();
if (this.props.liveScroll) { if(this.props.liveScroll) {
if (prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) { if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) {
this.sourceJump(this.props.currentBrewRendererPageNum, false); this.sourceJump(this.props.currentBrewRendererPageNum, false);
} else if (prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) { } else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) {
this.brewJump(this.props.currentEditorViewPageNum, false); this.brewJump(this.props.currentEditorViewPageNum, false);
} else if (prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) { } else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) {
this.brewJump(this.props.currentEditorCursorPageNum, false); this.brewJump(this.props.currentEditorCursorPageNum, false);
} }
} }
}, },
componentWillUnmount() { componentWillUnmount() {
if (this.resizeObserver) this.resizeObserver.disconnect(); if(this.resizeObserver) this.resizeObserver.disconnect();
}, },
handleControlKeys: function (e) { handleControlKeys : function(e){
if (!(e.ctrlKey && e.metaKey && e.shiftKey)) return; if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return;
const LEFTARROW_KEY = 37; const LEFTARROW_KEY = 37;
const RIGHTARROW_KEY = 39; const RIGHTARROW_KEY = 39;
if (e.keyCode == RIGHTARROW_KEY) this.brewJump(); if(e.keyCode == RIGHTARROW_KEY) this.brewJump();
if (e.keyCode == LEFTARROW_KEY) this.sourceJump(); if(e.keyCode == LEFTARROW_KEY) this.sourceJump();
if (e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) {
e.stopPropagation(); e.stopPropagation();
e.preventDefault(); e.preventDefault();
} }
}, },
updateCurrentCursorPage: function (cursor) { updateCurrentCursorPage : function(cursor) {
const lines = this.props.brew.text.split("\n").slice(1, cursor.line + 1); const lines = this.props.brew.text.split('\n').slice(1, cursor.line + 1);
const pageRegex = this.props.brew.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/; const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
const currentPage = lines.reduce((count, line) => count + (pageRegex.test(line) ? 1 : 0), 1); const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
this.props.onCursorPageChange(currentPage); this.props.onCursorPageChange(currentPage);
}, },
updateCurrentViewPage: function (topScrollLine) { updateCurrentViewPage : function(topScrollLine) {
const lines = this.props.brew.text.split("\n").slice(1, topScrollLine + 1); const lines = this.props.brew.text.split('\n').slice(1, topScrollLine + 1);
const pageRegex = this.props.brew.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/; const pageRegex = this.props.brew.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
const currentPage = lines.reduce((count, line) => count + (pageRegex.test(line) ? 1 : 0), 1); const currentPage = lines.reduce((count, line)=>count + (pageRegex.test(line) ? 1 : 0), 1);
this.props.onViewPageChange(currentPage); this.props.onViewPageChange(currentPage);
}, },
handleInject: function (injectText) { handleInject : function(injectText){
this.codeEditor.current?.injectText(injectText, false); this.codeEditor.current?.injectText(injectText, false);
}, },
handleViewChange: function (newView) { handleViewChange : function(newView){
this.props.setMoveArrows(newView === "text"); this.props.setMoveArrows(newView === 'text');
this.setState( this.setState({
{ view : newView
view: newView, }, ()=>{
}, this.codeEditor.current?.codeMirror?.focus();
() => { });
this.codeEditor.current?.codeMirror?.focus();
},
);
}, },
highlightCustomMarkdown: function () { highlightCustomMarkdown : function(){
if (!this.codeEditor.current?.codeMirror) return; if(!this.codeEditor.current?.codeMirror) return;
if (this.state.view === "text" || this.state.view === "snippet") { if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
const codeMirror = this.codeEditor.current.codeMirror; const codeMirror = this.codeEditor.current.codeMirror;
codeMirror?.operation(() => { codeMirror?.operation(()=>{ // Batch CodeMirror styling
// Batch CodeMirror styling
const foldLines = []; const foldLines = [];
//reset custom text styles //reset custom text styles
const customHighlights = codeMirror?.getAllMarks().filter((mark) => { const customHighlights = codeMirror?.getAllMarks().filter((mark)=>{
// Record details of folded sections // Record details of folded sections
if (mark.__isFold) { if(mark.__isFold) {
const fold = mark.find(); const fold = mark.find();
foldLines.push({ from: fold.from?.line, to: fold.to?.line }); foldLines.push({ from: fold.from?.line, to: fold.to?.line });
} }
return !mark.__isFold; return !mark.__isFold;
}); //Don't undo code folding }); //Don't undo code folding
for (let i = customHighlights.length - 1; i >= 0; i--) customHighlights[i].clear(); for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
let userSnippetCount = 1; // start snippet count from snippet 1 let userSnippetCount = 1; // start snippet count from snippet 1
let editorPageCount = 1; // start page count from page 1 let editorPageCount = 1; // start page count from page 1
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"; 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');
codeMirror?.removeLineClass(lineNumber, "text"); codeMirror?.removeLineClass(lineNumber, 'text');
codeMirror?.removeLineClass(lineNumber, "wrap", "sourceMoveFlash"); codeMirror?.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
// Don't process lines inside folded text // Don't process lines inside folded text
// If the current lineNumber is inside any folded marks, skip line styling // If the current lineNumber is inside any folded marks, skip line styling
if (foldLines.some((fold) => lineNumber >= fold.from && lineNumber <= fold.to)) return; if(foldLines.some((fold)=>lineNumber >= fold.from && lineNumber <= fold.to))
return;
// Styling for \page breaks // Styling for \page breaks
if ( if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
(this.props.renderer == "legacy" && line.includes("\\page")) || (this.props.renderer == 'V3' && line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3))) {
(this.props.renderer == "V3" &&
line.match(textOrSnip ? PAGEBREAK_REGEX_V3 : SNIPPETBREAK_REGEX_V3)) if((lineNumber > 0) && (textOrSnip)) // 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; 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", tabHighlight); 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: textOrSnip ? editorPageCount : userSnippetCount, 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(?:break)?$/)) { if(line.match(/^\\column(?:break)?$/)){
codeMirror?.addLineClass(lineNumber, "text", "columnSplit"); codeMirror?.addLineClass(lineNumber, 'text', 'columnSplit');
} }
// definition lists // definition lists
if (line.includes("::")) { if(line.includes('::')){
if (/^:*$/.test(line) == true) { if(/^:*$/.test(line) == true){ return; };
return; const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd; // the `d` flag, for match indices, throws an ESLint error.
}
const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/dmy; // the `d` flag, for match indices, throws an ESLint error.
let match; let match;
while ((match = regex.exec(line)) != null) { while ((match = regex.exec(line)) != null){
codeMirror?.markText( codeMirror?.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
{ line: lineNumber, ch: match.indices[0][0] }, codeMirror?.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
{ line: lineNumber, ch: match.indices[0][1] }, codeMirror?.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
{ className: "dl-highlight" },
);
codeMirror?.markText(
{ line: lineNumber, ch: match.indices[1][0] },
{ line: lineNumber, ch: match.indices[1][1] },
{ className: "dt-highlight" },
);
codeMirror?.markText(
{ line: lineNumber, ch: match.indices[2][0] },
{ line: lineNumber, ch: match.indices[2][1] },
{ className: "dd-highlight" },
);
const ddIndex = match.indices[2][0]; const ddIndex = match.indices[2][0];
const colons = /::/g; const colons = /::/g;
const colonMatches = colons.exec(match[2]); const colonMatches = colons.exec(match[2]);
if (colonMatches !== null) { if(colonMatches !== null){
codeMirror?.markText( codeMirror?.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
{ line: lineNumber, ch: colonMatches.index + ddIndex },
{ line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex },
{ className: "dl-colon-highlight" },
);
} }
} }
} }
// Subscript & Superscript // Subscript & Superscript
if (line.includes("^")) { if(line.includes('^')) {
let startIndex = line.indexOf("^"); let startIndex = line.indexOf('^');
const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy; const superRegex = /\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^/gy;
const subRegex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy; const subRegex = /\^\^(?!\s)(?=([^\n\^]*[^\s\^]))\1\^\^/gy;
while (startIndex >= 0) { while (startIndex >= 0) {
superRegex.lastIndex = subRegex.lastIndex = startIndex; superRegex.lastIndex = subRegex.lastIndex = startIndex;
let isSuper = false; let isSuper = false;
const match = subRegex.exec(line) || superRegex.exec(line); const match = subRegex.exec(line) || superRegex.exec(line);
if (match) { if(match) {
isSuper = !subRegex.lastIndex; isSuper = !subRegex.lastIndex;
codeMirror?.markText( codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
{ line: lineNumber, ch: match.index },
{ line: lineNumber, ch: match.index + match[0].length },
{ className: isSuper ? "superscript" : "subscript" },
);
} }
startIndex = line.indexOf( startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
"^",
Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex),
);
} }
} }
// Injections: single-line {…} // Highlight injectors {style}
if (line.includes("{") && line.includes("}")) { if(line.includes('{') && line.includes('}')){
const injectionRegex = const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
/(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
let match; let match;
while ((match = injectionRegex.exec(line)) !== null) { while ((match = regex.exec(line)) != null) {
tokens.push({ codeMirror?.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
line: lineNumber,
from: match.index,
to: match.index + match[1].length,
type: "injection",
});
} }
} else if (line.includes("{{") && line.includes("}}")) { // Inline blocks: single-line {{…}} }
const spanRegex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g; // Highlight inline spans {{content}}
if(line.includes('{{') && line.includes('}}')){
const regex = /{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *|}}/g;
let match; let match;
let blockCount = 0; let blockCount = 0;
while ((match = spanRegex.exec(line)) !== null) { while ((match = regex.exec(line)) != null) {
if (match[0].startsWith("{{")) { if(match[0].startsWith('{')) {
blockCount += 1; blockCount += 1;
} else { } else {
blockCount -= 1; blockCount -= 1;
} }
if (blockCount < 0) { if(blockCount < 0) {
blockCount = 0; blockCount = 0;
continue; continue;
} }
tokens.push({ codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
line: lineNumber,
from: match.index,
to: match.index + match[0].length,
type: "inline-block",
});
} }
} else if (line.trimLeft().startsWith("{{") || line.trimLeft().startsWith("}}")) { } else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
// Highlight block divs {{\n Content \n}} // Highlight block divs {{\n Content \n}}
let endCh = line.length + 1; let endCh = line.length+1;
const match = line.match( const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/, if(match)
); endCh = match.index+match[0].length;
if (match) endCh = match.index + match[0].length; codeMirror?.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
codeMirror?.markText(
{ line: lineNumber, ch: 0 },
{ line: lineNumber, ch: endCh },
{ className: "block" },
);
} }
// Emojis // Emojis
if (line.match(/:[^\s:]+:/g)) { if(line.match(/:[^\s:]+:/g)) {
let startIndex = line.indexOf(":"); let startIndex = line.indexOf(':');
const emojiRegex = /:[^\s:]+:/gy; const emojiRegex = /:[^\s:]+:/gy;
while (startIndex >= 0) { while (startIndex >= 0) {
emojiRegex.lastIndex = startIndex; emojiRegex.lastIndex = startIndex;
const match = emojiRegex.exec(line); const match = emojiRegex.exec(line);
if (match) { if(match) {
let tokens = Markdown.marked.lexer(match[0]); let tokens = Markdown.marked.lexer(match[0]);
tokens = tokens[0].tokens.filter((t) => t.type == "emoji"); tokens = tokens[0].tokens.filter((t)=>t.type == 'emoji');
if (!tokens.length) return; if(!tokens.length)
return;
const startPos = { line: lineNumber, ch: match.index }; const startPos = { line: lineNumber, ch: match.index };
const endPos = { line: lineNumber, ch: match.index + match[0].length }; const endPos = { line: lineNumber, ch: match.index + match[0].length };
// Iterate over conflicting marks and clear them // Iterate over conflicting marks and clear them
const marks = codeMirror?.findMarks(startPos, endPos); const marks = codeMirror?.findMarks(startPos, endPos);
marks.forEach(function (marker) { marks.forEach(function(marker) {
if (!marker.__isFold) marker.clear(); if(!marker.__isFold) marker.clear();
}); });
codeMirror?.markText(startPos, endPos, { className: "emoji" }); codeMirror?.markText(startPos, endPos, { className: 'emoji' });
} }
startIndex = line.indexOf(":", Math.max(startIndex + 1, emojiRegex.lastIndex)); startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
} }
} }
} }
@@ -382,226 +329,198 @@ const Editor = createReactClass({
} }
}, },
brewJump: function (targetPage = this.props.currentEditorCursorPageNum, smooth = true) { brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){
if (!window || !this.isText() || isJumping) return; if(!window || !this.isText() || isJumping)
return;
// Get current brewRenderer scroll position and calculate target position // Get current brewRenderer scroll position and calculate target position
const brewRenderer = window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0]; const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
const currentPos = brewRenderer.scrollTop; const currentPos = brewRenderer.scrollTop;
const targetPos = window.frames["BrewRenderer"].contentDocument const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
.getElementById(`p${targetPage}`)
.getBoundingClientRect().top;
let scrollingTimeout; let scrollingTimeout;
const checkIfScrollComplete = () => { const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
// Prevent interrupting a scroll in progress if user clicks multiple times clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs scrollingTimeout = setTimeout(()=>{
scrollingTimeout = setTimeout(() => {
isJumping = false; isJumping = false;
brewRenderer.removeEventListener("scroll", checkIfScrollComplete); brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
}, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done }, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done
}; };
isJumping = true; isJumping = true;
checkIfScrollComplete(); checkIfScrollComplete();
brewRenderer.addEventListener("scroll", checkIfScrollComplete); brewRenderer.addEventListener('scroll', checkIfScrollComplete);
if (smooth) { if(smooth) {
const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling
const bounceDelay = 100; const bounceDelay = 100;
const scrollDelay = 500; const scrollDelay = 500;
if (!this.throttleBrewMove) { if(!this.throttleBrewMove) {
this.throttleBrewMove = _.throttle( this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{
(currentPos, bouncePos, targetPos) => { brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' });
brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: "smooth" }); setTimeout(()=>{
setTimeout(() => { brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: "smooth", block: "start" }); }, bounceDelay);
}, bounceDelay); }, scrollDelay, { leading: true, trailing: false });
}, };
scrollDelay,
{ leading: true, trailing: false },
);
}
this.throttleBrewMove(currentPos, bouncePos, targetPos); this.throttleBrewMove(currentPos, bouncePos, targetPos);
} else { } else {
brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: "instant", block: "start" }); brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' });
} }
}, },
sourceJump: function (targetPage = this.props.currentBrewRendererPageNum, smooth = true) { sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){
if (!this.isText() || isJumping) return; if(!this.isText() || isJumping)
return;
const textSplit = this.props.renderer == "V3" ? PAGEBREAK_REGEX_V3 : /\\page/; const textSplit = this.props.renderer == 'V3' ? PAGEBREAK_REGEX_V3 : /\\page/;
const textString = this.props.brew.text const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
.split(textSplit) const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
.slice(0, targetPage - 1)
.join(textSplit);
const targetLine = textString.match("\n") ? textString.split("\n").length - 1 : -1;
let currentY = this.codeEditor.current.codeMirror?.getScrollInfo().top; let currentY = this.codeEditor.current.codeMirror?.getScrollInfo().top;
let targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, "local", true); let targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
let scrollingTimeout; let scrollingTimeout;
const checkIfScrollComplete = () => { const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
// Prevent interrupting a scroll in progress if user clicks multiple times
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
scrollingTimeout = setTimeout(() => { scrollingTimeout = setTimeout(()=>{
isJumping = false; isJumping = false;
this.codeEditor.current.codeMirror?.off("scroll", checkIfScrollComplete); this.codeEditor.current.codeMirror?.off('scroll', checkIfScrollComplete);
}, 150); // If 150 ms pass without a scroll event, assume scrolling is done }, 150); // If 150 ms pass without a scroll event, assume scrolling is done
}; };
isJumping = true; isJumping = true;
checkIfScrollComplete(); checkIfScrollComplete();
if (this.codeEditor.current?.codeMirror) { if(this.codeEditor.current?.codeMirror) {
this.codeEditor.current.codeMirror?.on("scroll", checkIfScrollComplete); this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
} }
if (smooth) { if(smooth) {
//Scroll 1/10 of the way every 10ms until 1px off. //Scroll 1/10 of the way every 10ms until 1px off.
const incrementalScroll = setInterval(() => { const incrementalScroll = setInterval(()=>{
currentY += (targetY - currentY) / 10; currentY += (targetY - currentY) / 10;
this.codeEditor.current.codeMirror?.scrollTo(null, currentY); this.codeEditor.current.codeMirror?.scrollTo(null, currentY);
// Update target: target height is not accurate until within +-10 lines of the visible window // Update target: target height is not accurate until within +-10 lines of the visible window
if (Math.abs(targetY - currentY > 100)) if(Math.abs(targetY - currentY > 100))
targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, "local", true); targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
// End when close enough // End when close enough
if (Math.abs(targetY - currentY) < 1) { if(Math.abs(targetY - currentY) < 1) {
this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, "wrap", "sourceMoveFlash"); this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
clearInterval(incrementalScroll); clearInterval(incrementalScroll);
} }
}, 10); }, 10);
} else { } else {
this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, "wrap", "sourceMoveFlash"); this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
} }
}, },
//Called when there are changes to the editor's dimensions //Called when there are changes to the editor's dimensions
update: function () {}, update : function(){},
updateEditorTheme: function (newTheme) { updateEditorTheme : function(newTheme){
window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); window.localStorage.setItem(EDITOR_THEME_KEY, newTheme);
this.setState({ this.setState({
editorTheme: newTheme, editorTheme : newTheme
}); });
}, },
//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory //Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
rerenderParent: function () { rerenderParent : function (){
this.forceUpdate(); this.forceUpdate();
}, },
renderEditor: function () { renderEditor : function(){
if (this.isText()) { if(this.isText()){
return ( return <>
<> <CodeEditor key='codeEditor'
<CodeEditor ref={this.codeEditor}
key="codeEditor" language='gfm'
ref={this.codeEditor} tab='brewText'
language="gfm" view={this.state.view}
tab="brewText" value={this.props.brew.text}
view={this.state.view} onChange={this.props.onBrewChange('text')}
value={this.props.brew.text} editorTheme={this.state.editorTheme}
onChange={this.props.onBrewChange("text")} rerenderParent={this.rerenderParent}
editorTheme={this.state.editorTheme} style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }} />
rerenderParent={this.rerenderParent} </>;
style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}
/>
</>
);
} }
if (this.isStyle()) { if(this.isStyle()){
return ( return <>
<> <CodeEditor key='codeEditor'
<CodeEditor ref={this.codeEditor}
key="codeEditor" language='css'
ref={this.codeEditor} tab='brewStyles'
language="css" view={this.state.view}
tab="brewStyles" value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
view={this.state.view} onChange={this.props.onBrewChange('style')}
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT} enableFolding={true}
onChange={this.props.onBrewChange("style")} editorTheme={this.state.editorTheme}
enableFolding={true} rerenderParent={this.rerenderParent}
editorTheme={this.state.editorTheme} style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }} />
rerenderParent={this.rerenderParent} </>;
style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}
/>
</>
);
} }
if (this.isMeta()) { if(this.isMeta()){
return ( return <>
<> <CodeEditor key='codeEditor'
<CodeEditor view={this.state.view}
key="codeEditor" style={{ display: 'none' }}
view={this.state.view} rerenderParent={this.rerenderParent} />
style={{ display: "none" }} <MetadataEditor
rerenderParent={this.rerenderParent} metadata={this.props.brew}
/> themeBundle={this.props.themeBundle}
<MetadataEditor onChange={this.props.onBrewChange('metadata')}
metadata={this.props.brew} reportError={this.props.reportError}
themeBundle={this.props.themeBundle} userThemes={this.props.userThemes}/>
onChange={this.props.onBrewChange("metadata")} </>;
reportError={this.props.reportError}
userThemes={this.props.userThemes}
/>
</>
);
} }
if (this.isSnip()) { if(this.isSnip()){
if (!this.props.brew.snippets) { if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; }
this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; return <>
} <CodeEditor key='codeEditor'
return ( ref={this.codeEditor}
<> language='gfm'
<CodeEditor tab='brewSnippets'
key="codeEditor" view={this.state.view}
ref={this.codeEditor} value={this.props.brew.snippets}
language="gfm" onChange={this.props.onBrewChange('snippets')}
tab="brewSnippets" enableFolding={true}
view={this.state.view} editorTheme={this.state.editorTheme}
value={this.props.brew.snippets} rerenderParent={this.rerenderParent}
onChange={this.props.onBrewChange("snippets")} style={{ height: `calc(100% -${this.state.snippetBarHeight}px)` }} />
enableFolding={true} </>;
editorTheme={this.state.editorTheme}
rerenderParent={this.rerenderParent}
style={{ height: `calc(100% -${this.state.snippetBarHeight}px)` }}
/>
</>
);
} }
}, },
redo: function () { redo : function(){
return this.codeEditor.current?.redo(); return this.codeEditor.current?.redo();
}, },
historySize: function () { historySize : function(){
return this.codeEditor.current?.historySize(); return this.codeEditor.current?.historySize();
}, },
undo: function () { undo : function(){
return this.codeEditor.current?.undo(); return this.codeEditor.current?.undo();
}, },
foldCode: function () { foldCode : function(){
return this.codeEditor.current?.foldAllCode(); return this.codeEditor.current?.foldAllCode();
}, },
unfoldCode: function () { unfoldCode : function(){
return this.codeEditor.current?.unfoldAllCode(); return this.codeEditor.current?.unfoldAllCode();
}, },
render: function () { render : function(){
return ( return (
<div className="editor" ref={this.editor}> <div className='editor' ref={this.editor}>
<SnippetBar <SnippetBar
brew={this.props.brew} brew={this.props.brew}
view={this.state.view} view={this.state.view}
@@ -625,7 +544,7 @@ const Editor = createReactClass({
{this.renderEditor()} {this.renderEditor()}
</div> </div>
); );
}, }
}); });
export default Editor; export default Editor;