From f53ed8c8e7ea120e25cc22971923bc3de402fb5f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 23 Aug 2026 19:52:11 +0200 Subject: [PATCH 1/8] this is mostly working --- client/homebrew/editor/editor.jsx | 635 +++++++++++++++++------------- 1 file changed, 354 insertions(+), 281 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index f500bebeb..66e6aaadf 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -1,29 +1,22 @@ -/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ -import './editor.less'; -import React from 'react'; -import createReactClass from 'create-react-class'; -import _ from 'lodash'; -import dedent from 'dedent'; +import "./editor.less"; +import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react"; +import dedent from "dedent"; -import CodeEditor from '@components/codeEditor/codeEditor.jsx'; -import SnippetBar from './snippetbar/snippetbar.jsx'; -import MetadataEditor from './metadataEditor/metadataEditor.jsx'; +import CodeEditor from "@components/codeEditor/codeEditor.jsx"; +import SnippetBar from "./snippetbar/snippetbar.jsx"; +import MetadataEditor from "./metadataEditor/metadataEditor.jsx"; -const EDITOR_THEME_KEY = 'HB_editor_theme'; +const EDITOR_THEME_KEY = "HB_editor_theme"; -import defaultCM5Theme from '@themes/codeMirror/default.js'; -import darkbrewery from '@themes/codeMirror/darkbrewery.js'; -import cm5Themes from 'codemirror-5-themes'; +import defaultCM5Theme from "@themes/codeMirror/default.js"; +import darkbrewery from "@themes/codeMirror/darkbrewery.js"; +import cm5Themes from "codemirror-5-themes"; const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; const EditorThemes = Object.entries(themes) - .filter(([name, value])=>Array.isArray(value) && - !name.endsWith('Init') && - !name.endsWith('Style') - ) - .map(([name])=>name); - + .filter(([name, value]) => Array.isArray(value) && !name.endsWith("Init") && !name.endsWith("Style")) + .map(([name]) => name); //const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; //const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/; @@ -45,306 +38,386 @@ const DEFAULT_SNIPPET_TEXT = dedent` let isJumping = false; let jumpSource = null; -const Editor = createReactClass({ - displayName : 'Editor', - getDefaultProps : function() { - return { - brew : { - text : '', - style : '' - }, +const Editor = forwardRef( + ( + { + brew = {}, - onBrewChange : ()=>{}, - reportError : ()=>{}, + onBrewChange = () => {}, + reportError = () => {}, - onCursorPageChange : ()=>{}, - onViewPageChange : ()=>{}, + onCursorPageChange = () => {}, + onViewPageChange = () => {}, - editorTheme : 'default', - renderer : 'legacy', + editorTheme = "default", + renderer = "legacy", - currentEditorCursorPageNum : 1, - currentEditorViewPageNum : 1, - currentBrewRendererPageNum : 1, + moveBrew, + moveSource, + liveScroll, + + setMoveArrows, + updateBrew, + showEditButtons, + themeBundle, + userThemes, + + currentEditorCursorPageNum = 1, + currentEditorViewPageNum = 1, + currentBrewRendererPageNum = 1, + }, + ref, + ) => { + const [currentEditorTheme, setEditorTheme] = useState(editorTheme); + const [view, setView] = useState("text"); // 'text', 'style', 'meta', 'snippet' + const [snippetBarHeight, setSnippetBarHeight] = useState(26); + + const editor = useRef(null); + const codeEditor = useRef(null); + const throttleBrewMove = useRef(null); + + const isText = () => { + return view === "text"; }; - }, - getInitialState : function() { - return { - editorTheme : this.props.editorTheme, - view : 'text', //'text', 'style', 'meta', 'snippet' - snippetBarHeight : 26, + const isStyle = () => { + return view === "style"; + }; + const isMeta = () => { + return view === "meta"; + }; + const isSnip = () => { + return view === "snippet"; }; - }, - editor : React.createRef(null), - codeEditor : React.createRef(null), + //componentDidMount equivalent + useEffect(() => { + const brewRenderer = document.getElementById("BrewRenderer"); + brewRenderer.onload = () => brewRenderer.contentDocument?.addEventListener("keydown", handleControlKeys); + document.addEventListener("keydown", handleControlKeys); - isText : function() {return this.state.view == 'text';}, - isStyle : function() {return this.state.view == 'style';}, - isMeta : function() {return this.state.view == 'meta';}, - isSnip : function() {return this.state.view == 'snippet';}, - - componentDidMount : function() { - - const brewRenderer = document.getElementById('BrewRenderer'); - brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', this.handleControlKeys); - document.addEventListener('keydown', this.handleControlKeys); - - const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); - if(editorTheme && EditorThemes.includes(editorTheme)) { - this.setState({ editorTheme }); - } else { - this.setState({ editorTheme: 'default' }); - } - const snippetBar = document.querySelector('.editor > .snippetBar'); - if(!snippetBar) return; - - this.resizeObserver = new ResizeObserver((entries)=>{ - const height = document.querySelector('.editor > .snippetBar').offsetHeight; - this.setState({ snippetBarHeight: height }); - }); - - this.resizeObserver.observe(snippetBar); - }, - - componentDidUpdate : function(prevProps, prevState, snapshot) { - - if(prevProps.moveBrew !== this.props.moveBrew) - this.brewJump(); - - if(prevProps.moveSource !== this.props.moveSource) - this.sourceJump(); - - if(this.props.liveScroll) { - if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) { - this.sourceJump(this.props.currentBrewRendererPageNum, false); - } else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) { - this.brewJump(this.props.currentEditorViewPageNum, false); - } else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) { - this.brewJump(this.props.currentEditorCursorPageNum, false); + const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); + if (editorTheme && EditorThemes.includes(editorTheme)) { + setEditorTheme(editorTheme); + } else { + setEditorTheme("default"); } - } - }, + const snippetBar = document.querySelector(".editor > .snippetBar"); + if (!snippetBar) return; - componentWillUnmount() { - if(this.resizeObserver) this.resizeObserver.disconnect(); - }, + const resizeObserver = new ResizeObserver((entries) => { + const height = document.querySelector(".editor > .snippetBar").offsetHeight; + setSnippetBarHeight(height); + }); - handleControlKeys : function(e){ - if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; - const LEFTARROW_KEY = 37; - const RIGHTARROW_KEY = 39; - if(e.keyCode == RIGHTARROW_KEY) this.brewJump(); - if(e.keyCode == LEFTARROW_KEY) this.sourceJump(); - if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { - e.stopPropagation(); - e.preventDefault(); - } - }, + resizeObserver.observe(snippetBar); - updateCurrentCursorPage : function(pageNumber) { - this.props.onCursorPageChange(pageNumber); - }, + //ComponentWillUnmount equivalent + return () => { + if (resizeObserver) resizeObserver.disconnect(); + }; + }, []); - updateCurrentViewPage : function(pageNumber) { - this.props.onViewPageChange(pageNumber); - }, - - handleInject : function(injectText){ - this.codeEditor.current?.injectText(injectText); - }, - - handleViewChange : function(newView){ - this.props.setMoveArrows(newView === 'text'); - - this.setState({ - view : newView - }, ()=>{ - this.codeEditor.current?.focus(); + const previousProps = useRef({ + moveBrew, + moveSource, + currentBrewRendererPageNum, + currentEditorViewPageNum, + currentEditorCursorPageNum, }); - }, - brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){ - if(!window || !this.isText() || isJumping || jumpSource === 'source') - return; + //componentDidUpdate Equivalent + useEffect(() => { + const prev = previousProps.current; - // Get current brewRenderer scroll position and calculate target position - const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; - const currentPos = brewRenderer.scrollTop; - const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; + if (prev.moveBrew !== moveBrew) { + brewJump(); + } - let scrollingTimeout; - const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times - clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs - scrollingTimeout = setTimeout(()=>{ - isJumping = false; - jumpSource = null; - brewRenderer.removeEventListener('scroll', checkIfScrollComplete); - }, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done + if (prev.moveSource !== moveSource) { + sourceJump(); + } + + if (liveScroll) { + if (prev.currentBrewRendererPageNum !== currentBrewRendererPageNum) { + sourceJump(currentBrewRendererPageNum, false); + } else if (prev.currentEditorViewPageNum !== currentEditorViewPageNum) { + brewJump(currentEditorViewPageNum, false); + } else if (prev.currentEditorCursorPageNum !== currentEditorCursorPageNum) { + brewJump(currentEditorCursorPageNum, false); + } + } + + previousProps.current = { + moveBrew, + moveSource, + currentBrewRendererPageNum, + currentEditorViewPageNum, + currentEditorCursorPageNum, + }; + }, [ + moveBrew, + moveSource, + liveScroll, + currentBrewRendererPageNum, + currentEditorViewPageNum, + currentEditorCursorPageNum, + ]); + + const handleControlKeys = (e) => { + if (!(e.ctrlKey && e.metaKey && e.shiftKey)) return; + const LEFTARROW_KEY = 37; + const RIGHTARROW_KEY = 39; + if (e.keyCode == RIGHTARROW_KEY) brewJump(); + if (e.keyCode == LEFTARROW_KEY) sourceJump(); + if (e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { + e.stopPropagation(); + e.preventDefault(); + } + }; + const updateCurrentCursorPage = (pageNumber) => { + onCursorPageChange(pageNumber); }; - isJumping = true; - jumpSource = 'brew'; - checkIfScrollComplete(); - brewRenderer.addEventListener('scroll', checkIfScrollComplete); + const updateCurrentViewPage = (pageNumber) => { + onViewPageChange(pageNumber); + }; - if(smooth) { - const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling - const bounceDelay = 100; - const scrollDelay = 500; + const handleInject = (injectText) => { + codeEditor.current?.injectText(injectText); + }; - if(!this.throttleBrewMove) { - this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{ - brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' }); - setTimeout(()=>{ - brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' }); - }, bounceDelay); - }, scrollDelay, { leading: true, trailing: false }); + const handleViewChange = (newView) => { + setMoveArrows(newView === "text"); + setView(newView); + }; + + useEffect(() => { + codeEditor.current?.focus(); + }, [view]); + + const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true) => { + if (!window || !isText() || isJumping || jumpSource === "source") return; + + const brewRenderer = + window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0]; + + const currentPos = brewRenderer.scrollTop; + + const targetPos = window.frames["BrewRenderer"].contentDocument + .getElementById(`p${targetPage}`) + .getBoundingClientRect().top; + + let scrollingTimeout; + + const checkIfScrollComplete = () => { + clearTimeout(scrollingTimeout); + + scrollingTimeout = setTimeout(() => { + isJumping = false; + jumpSource = null; + + brewRenderer.removeEventListener("scroll", checkIfScrollComplete); + }, 150); }; - this.throttleBrewMove(currentPos, bouncePos, targetPos); - } else { - brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' }); - } - }, - sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){ - if(!this.isText() || isJumping || jumpSource === 'brew') - return; + isJumping = true; + jumpSource = "brew"; - const editor = this.codeEditor.current; - if(!editor) return; - jumpSource = 'source'; + checkIfScrollComplete(); - editor.scrollToPage(targetPage); - setTimeout(()=>{ - jumpSource = null; - }, 200); - }, + brewRenderer.addEventListener("scroll", checkIfScrollComplete); - //Called when there are changes to the editor's dimensions - update : function(){}, + if (smooth) { + const bouncePos = targetPos >= 0 ? -30 : 30; + const bounceDelay = 100; + const scrollDelay = 500; - updateEditorTheme : function(newTheme){ - window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); - this.setState({ - editorTheme : newTheme - }); - }, + if (!throttleBrewMove.current) { + throttleBrewMove.current = _.throttle( + (currentPos, bouncePos, targetPos) => { + brewRenderer.scrollTo({ + top: currentPos + bouncePos, + behavior: "smooth", + }); - //Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory - rerenderParent : function (){ - this.forceUpdate(); - }, + setTimeout(() => { + brewRenderer.scrollTo({ + top: currentPos + targetPos, + behavior: "smooth", + block: "start", + }); + }, bounceDelay); + }, + scrollDelay, + { + leading: true, + trailing: false, + }, + ); + } - renderEditor : function(){ - if(this.isText()){ - return <> - this.updateCurrentCursorPage(page)} - onViewChange={(page)=>this.updateCurrentViewPage(page)} - editorTheme={this.state.editorTheme} - renderer={this.props.brew.renderer} - style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}/> - ; - } - if(this.isStyle()){ - return <> - - ; - } - if(this.isMeta()){ - return <> - - - ; - } - if(this.isSnip()){ - if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; } - return <> - - ; - } - }, + throttleBrewMove.current(currentPos, bouncePos, targetPos); + } else { + brewRenderer.scrollTo({ + top: currentPos + targetPos, + behavior: "instant", + block: "start", + }); + } + }; - redo : function(){ - return this.codeEditor.current?.redo(); - }, + const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true) => { + if (!isText() || isJumping || jumpSource === "brew") return; - historySize : function(){ - return this.codeEditor.current?.historySize(); - }, + const editor = codeEditor.current; + if (!editor) return; + jumpSource = "source"; - undo : function(){ - return this.codeEditor.current?.undo(); - }, + editor.scrollToPage(targetPage); + setTimeout(() => { + jumpSource = null; + }, 200); + }; - foldCode : function() { - return this.codeEditor.current?.foldAll(); - }, + const updateEditorTheme = (newTheme) => { + window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); + setEditorTheme(newTheme); + }; + + const renderEditor = () => { + if (isText()) { + return ( + <> + updateCurrentCursorPage(page)} + onViewChange={(page) => updateCurrentViewPage(page)} + editorTheme={currentEditorTheme} + renderer={brew.renderer} + style={{ height: `calc(100% - ${snippetBarHeight}px)` }} + /> + + ); + } + if (isStyle()) { + return ( + <> + + + ); + } + if (isMeta()) { + return ( + <> + + + + ); + } + if (isSnip()) { + if (!brew.snippets) { + brew.snippets = DEFAULT_SNIPPET_TEXT; + } + return ( + <> + + + ); + } + }; + const redo = () => { + return codeEditor.current?.redo(); + }; + + const historySize = () => { + return codeEditor.current?.historySize(); + }; + + const undo = () => { + return codeEditor.current?.undo(); + }; + + const foldCode = () => { + return codeEditor.current?.foldAll(); + }; + + const unfoldCode = () => { + return codeEditor.current?.unfoldAll(); + }; + + const update = () => {}; + + useImperativeHandle(ref, () => ({ + update, + undo, + redo, + foldCode, + unfoldCode, + historySize, + })); - unfoldCode : function() { - return this.codeEditor.current?.unfoldAll(); - }, - render : function(){ return ( -
+
- {this.renderEditor()} + {renderEditor()}
); - } -}); + }, +); -export default Editor; \ No newline at end of file +export default Editor; From b6554543489613187b40f1bed3f2284e715ebc55 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 23 Aug 2026 20:14:12 +0200 Subject: [PATCH 2/8] remove rerenderparent hook --- client/homebrew/editor/editor.jsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 66e6aaadf..18cc59913 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -354,7 +354,6 @@ const Editor = forwardRef( enableFolding={true} editorTheme={currentEditorTheme} renderer={brew.renderer} - rerenderParent={rerenderParent} style={{ height: `calc(100% - 25px)` }} /> @@ -407,7 +406,7 @@ const Editor = forwardRef( foldCode={foldCode} unfoldCode={unfoldCode} historySize={historySize()} - currentEditorTheme={editorTheme} + currentEditorTheme={currentEditorTheme} updateEditorTheme={updateEditorTheme} themeBundle={themeBundle} cursorPos={codeEditor.current?.getCursorPosition() || {}} From ac30edffd6b1c2ae99df4d3733b4ec0bda0acf30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 23 Aug 2026 20:16:10 +0200 Subject: [PATCH 3/8] lint --- client/homebrew/editor/editor.jsx | 236 +++++++++++++++--------------- 1 file changed, 115 insertions(+), 121 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 18cc59913..7daf8511b 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -1,22 +1,22 @@ -import "./editor.less"; -import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react"; -import dedent from "dedent"; +import './editor.less'; +import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'; +import dedent from 'dedent'; -import CodeEditor from "@components/codeEditor/codeEditor.jsx"; -import SnippetBar from "./snippetbar/snippetbar.jsx"; -import MetadataEditor from "./metadataEditor/metadataEditor.jsx"; +import CodeEditor from '@components/codeEditor/codeEditor.jsx'; +import SnippetBar from './snippetbar/snippetbar.jsx'; +import MetadataEditor from './metadataEditor/metadataEditor.jsx'; -const EDITOR_THEME_KEY = "HB_editor_theme"; +const EDITOR_THEME_KEY = 'HB_editor_theme'; -import defaultCM5Theme from "@themes/codeMirror/default.js"; -import darkbrewery from "@themes/codeMirror/darkbrewery.js"; -import cm5Themes from "codemirror-5-themes"; +import defaultCM5Theme from '@themes/codeMirror/default.js'; +import darkbrewery from '@themes/codeMirror/darkbrewery.js'; +import cm5Themes from 'codemirror-5-themes'; const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; const EditorThemes = Object.entries(themes) - .filter(([name, value]) => Array.isArray(value) && !name.endsWith("Init") && !name.endsWith("Style")) - .map(([name]) => name); + .filter(([name, value])=>Array.isArray(value) && !name.endsWith('Init') && !name.endsWith('Style')) + .map(([name])=>name); //const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; //const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/; @@ -43,14 +43,14 @@ const Editor = forwardRef( { brew = {}, - onBrewChange = () => {}, - reportError = () => {}, + onBrewChange = ()=>{}, + reportError = ()=>{}, - onCursorPageChange = () => {}, - onViewPageChange = () => {}, + onCursorPageChange = ()=>{}, + onViewPageChange = ()=>{}, - editorTheme = "default", - renderer = "legacy", + editorTheme = 'default', + renderer = 'legacy', moveBrew, moveSource, @@ -67,53 +67,47 @@ const Editor = forwardRef( currentBrewRendererPageNum = 1, }, ref, - ) => { + )=>{ const [currentEditorTheme, setEditorTheme] = useState(editorTheme); - const [view, setView] = useState("text"); // 'text', 'style', 'meta', 'snippet' + const [view, setView] = useState('text'); // 'text', 'style', 'meta', 'snippet' const [snippetBarHeight, setSnippetBarHeight] = useState(26); const editor = useRef(null); const codeEditor = useRef(null); const throttleBrewMove = useRef(null); - const isText = () => { - return view === "text"; - }; - const isStyle = () => { - return view === "style"; - }; - const isMeta = () => { - return view === "meta"; - }; - const isSnip = () => { - return view === "snippet"; - }; + const isText = ()=>isView('text'); + const isStyle = ()=>isView('style'); + const isMeta = ()=>isView('meta'); + const isSnip = ()=>isView('snippet'); + + const isView = (name)=>view === name; //componentDidMount equivalent - useEffect(() => { - const brewRenderer = document.getElementById("BrewRenderer"); - brewRenderer.onload = () => brewRenderer.contentDocument?.addEventListener("keydown", handleControlKeys); - document.addEventListener("keydown", handleControlKeys); + useEffect(()=>{ + const brewRenderer = document.getElementById('BrewRenderer'); + brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', handleControlKeys); + document.addEventListener('keydown', handleControlKeys); const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); - if (editorTheme && EditorThemes.includes(editorTheme)) { + if(editorTheme && EditorThemes.includes(editorTheme)) { setEditorTheme(editorTheme); } else { - setEditorTheme("default"); + setEditorTheme('default'); } - const snippetBar = document.querySelector(".editor > .snippetBar"); - if (!snippetBar) return; + const snippetBar = document.querySelector('.editor > .snippetBar'); + if(!snippetBar) return; - const resizeObserver = new ResizeObserver((entries) => { - const height = document.querySelector(".editor > .snippetBar").offsetHeight; + const resizeObserver = new ResizeObserver((entries)=>{ + const height = document.querySelector('.editor > .snippetBar').offsetHeight; setSnippetBarHeight(height); }); resizeObserver.observe(snippetBar); //ComponentWillUnmount equivalent - return () => { - if (resizeObserver) resizeObserver.disconnect(); + return ()=>{ + if(resizeObserver) resizeObserver.disconnect(); }; }, []); @@ -126,23 +120,23 @@ const Editor = forwardRef( }); //componentDidUpdate Equivalent - useEffect(() => { + useEffect(()=>{ const prev = previousProps.current; - if (prev.moveBrew !== moveBrew) { + if(prev.moveBrew !== moveBrew) { brewJump(); } - if (prev.moveSource !== moveSource) { + if(prev.moveSource !== moveSource) { sourceJump(); } - if (liveScroll) { - if (prev.currentBrewRendererPageNum !== currentBrewRendererPageNum) { + if(liveScroll) { + if(prev.currentBrewRendererPageNum !== currentBrewRendererPageNum) { sourceJump(currentBrewRendererPageNum, false); - } else if (prev.currentEditorViewPageNum !== currentEditorViewPageNum) { + } else if(prev.currentEditorViewPageNum !== currentEditorViewPageNum) { brewJump(currentEditorViewPageNum, false); - } else if (prev.currentEditorCursorPageNum !== currentEditorCursorPageNum) { + } else if(prev.currentEditorCursorPageNum !== currentEditorCursorPageNum) { brewJump(currentEditorCursorPageNum, false); } } @@ -163,95 +157,95 @@ const Editor = forwardRef( currentEditorCursorPageNum, ]); - const handleControlKeys = (e) => { - if (!(e.ctrlKey && e.metaKey && e.shiftKey)) return; + const handleControlKeys = (e)=>{ + if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; const LEFTARROW_KEY = 37; const RIGHTARROW_KEY = 39; - if (e.keyCode == RIGHTARROW_KEY) brewJump(); - if (e.keyCode == LEFTARROW_KEY) sourceJump(); - if (e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { + if(e.keyCode == RIGHTARROW_KEY) brewJump(); + if(e.keyCode == LEFTARROW_KEY) sourceJump(); + if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { e.stopPropagation(); e.preventDefault(); } }; - const updateCurrentCursorPage = (pageNumber) => { + const updateCurrentCursorPage = (pageNumber)=>{ onCursorPageChange(pageNumber); }; - const updateCurrentViewPage = (pageNumber) => { + const updateCurrentViewPage = (pageNumber)=>{ onViewPageChange(pageNumber); }; - const handleInject = (injectText) => { + const handleInject = (injectText)=>{ codeEditor.current?.injectText(injectText); }; - const handleViewChange = (newView) => { - setMoveArrows(newView === "text"); + const handleViewChange = (newView)=>{ + setMoveArrows(newView === 'text'); setView(newView); }; - useEffect(() => { + useEffect(()=>{ codeEditor.current?.focus(); }, [view]); - const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true) => { - if (!window || !isText() || isJumping || jumpSource === "source") return; + const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true)=>{ + if(!window || !isText() || isJumping || jumpSource === 'source') return; const brewRenderer = - window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0]; + window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const currentPos = brewRenderer.scrollTop; - const targetPos = window.frames["BrewRenderer"].contentDocument + const targetPos = window.frames['BrewRenderer'].contentDocument .getElementById(`p${targetPage}`) .getBoundingClientRect().top; let scrollingTimeout; - const checkIfScrollComplete = () => { + const checkIfScrollComplete = ()=>{ clearTimeout(scrollingTimeout); - scrollingTimeout = setTimeout(() => { + scrollingTimeout = setTimeout(()=>{ isJumping = false; jumpSource = null; - brewRenderer.removeEventListener("scroll", checkIfScrollComplete); + brewRenderer.removeEventListener('scroll', checkIfScrollComplete); }, 150); }; isJumping = true; - jumpSource = "brew"; + jumpSource = 'brew'; checkIfScrollComplete(); - brewRenderer.addEventListener("scroll", checkIfScrollComplete); + brewRenderer.addEventListener('scroll', checkIfScrollComplete); - if (smooth) { + if(smooth) { const bouncePos = targetPos >= 0 ? -30 : 30; const bounceDelay = 100; const scrollDelay = 500; - if (!throttleBrewMove.current) { + if(!throttleBrewMove.current) { throttleBrewMove.current = _.throttle( - (currentPos, bouncePos, targetPos) => { + (currentPos, bouncePos, targetPos)=>{ brewRenderer.scrollTo({ - top: currentPos + bouncePos, - behavior: "smooth", + top : currentPos + bouncePos, + behavior : 'smooth', }); - setTimeout(() => { + setTimeout(()=>{ brewRenderer.scrollTo({ - top: currentPos + targetPos, - behavior: "smooth", - block: "start", + top : currentPos + targetPos, + behavior : 'smooth', + block : 'start', }); }, bounceDelay); }, scrollDelay, { - leading: true, - trailing: false, + leading : true, + trailing : false, }, ); } @@ -259,45 +253,45 @@ const Editor = forwardRef( throttleBrewMove.current(currentPos, bouncePos, targetPos); } else { brewRenderer.scrollTo({ - top: currentPos + targetPos, - behavior: "instant", - block: "start", + top : currentPos + targetPos, + behavior : 'instant', + block : 'start', }); } }; - const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true) => { - if (!isText() || isJumping || jumpSource === "brew") return; + const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true)=>{ + if(!isText() || isJumping || jumpSource === 'brew') return; const editor = codeEditor.current; - if (!editor) return; - jumpSource = "source"; + if(!editor) return; + jumpSource = 'source'; editor.scrollToPage(targetPage); - setTimeout(() => { + setTimeout(()=>{ jumpSource = null; }, 200); }; - const updateEditorTheme = (newTheme) => { + const updateEditorTheme = (newTheme)=>{ window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); setEditorTheme(newTheme); }; - const renderEditor = () => { - if (isText()) { + const renderEditor = ()=>{ + if(isText()) { return ( <> updateCurrentCursorPage(page)} - onViewChange={(page) => updateCurrentViewPage(page)} + onChange={onBrewChange('text')} + onCursorChange={(page)=>updateCurrentCursorPage(page)} + onViewChange={(page)=>updateCurrentViewPage(page)} editorTheme={currentEditorTheme} renderer={brew.renderer} style={{ height: `calc(100% - ${snippetBarHeight}px)` }} @@ -305,17 +299,17 @@ const Editor = forwardRef( ); } - if (isStyle()) { + if(isStyle()) { return ( <> ); } - if (isMeta()) { + if(isMeta()) { return ( <> - + ); } - if (isSnip()) { - if (!brew.snippets) { + if(isSnip()) { + if(!brew.snippets) { brew.snippets = DEFAULT_SNIPPET_TEXT; } return ( <> { + const redo = ()=>{ return codeEditor.current?.redo(); }; - const historySize = () => { + const historySize = ()=>{ return codeEditor.current?.historySize(); }; - const undo = () => { + const undo = ()=>{ return codeEditor.current?.undo(); }; - const foldCode = () => { + const foldCode = ()=>{ return codeEditor.current?.foldAll(); }; - const unfoldCode = () => { + const unfoldCode = ()=>{ return codeEditor.current?.unfoldAll(); }; - const update = () => {}; + const update = ()=>{}; - useImperativeHandle(ref, () => ({ + useImperativeHandle(ref, ()=>({ update, undo, redo, @@ -392,7 +386,7 @@ const Editor = forwardRef( })); return ( -
+
Date: Sun, 23 Aug 2026 20:19:03 +0200 Subject: [PATCH 4/8] minify some things --- client/homebrew/editor/editor.jsx | 36 ++++++------------------------- 1 file changed, 7 insertions(+), 29 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 7daf8511b..cf8b46fcd 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -1,3 +1,4 @@ +/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ import './editor.less'; import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react'; import dedent from 'dedent'; @@ -354,37 +355,14 @@ const Editor = forwardRef( ); } }; - const redo = ()=>{ - return codeEditor.current?.redo(); - }; - - const historySize = ()=>{ - return codeEditor.current?.historySize(); - }; - - const undo = ()=>{ - return codeEditor.current?.undo(); - }; - - const foldCode = ()=>{ - return codeEditor.current?.foldAll(); - }; - - const unfoldCode = ()=>{ - return codeEditor.current?.unfoldAll(); - }; - - const update = ()=>{}; - useImperativeHandle(ref, ()=>({ - update, - undo, - redo, - foldCode, - unfoldCode, - historySize, + update : ()=>{}, + undo : ()=>codeEditor.current?.undo(), + redo : ()=>codeEditor.current?.redo(), + foldCode : ()=>codeEditor.current?.foldAll(), + unfoldCode : ()=>codeEditor.current?.unfoldAll(), + historySize : ()=>codeEditor.current?.historySize(), })); - return (
Date: Sun, 23 Aug 2026 21:43:46 +0200 Subject: [PATCH 5/8] fix small issue --- client/homebrew/editor/editor.jsx | 21 +++++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index cf8b46fcd..eac31f320 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -355,14 +355,23 @@ const Editor = forwardRef( ); } }; + const redo = ()=>codeEditor.current?.redo(); + const historySize = ()=>codeEditor.current?.historySize(); + const undo = ()=>codeEditor.current?.undo(); + const foldCode = ()=>codeEditor.current?.foldAll(); + const unfoldCode = ()=>codeEditor.current?.unfoldAll(); + + const update = ()=>{}; + useImperativeHandle(ref, ()=>({ - update : ()=>{}, - undo : ()=>codeEditor.current?.undo(), - redo : ()=>codeEditor.current?.redo(), - foldCode : ()=>codeEditor.current?.foldAll(), - unfoldCode : ()=>codeEditor.current?.unfoldAll(), - historySize : ()=>codeEditor.current?.historySize(), + update, + undo, + redo, + foldCode, + unfoldCode, + historySize, })); + return (
Date: Sun, 23 Aug 2026 21:56:37 +0200 Subject: [PATCH 6/8] remove lodash use --- client/homebrew/editor/editor.jsx | 57 ++--- config/editorReferenceCopy.jsx | 350 ++++++++++++++++++++++++++++++ 2 files changed, 371 insertions(+), 36 deletions(-) create mode 100644 config/editorReferenceCopy.jsx diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index eac31f320..df95d79fc 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -124,13 +124,8 @@ const Editor = forwardRef( useEffect(()=>{ const prev = previousProps.current; - if(prev.moveBrew !== moveBrew) { - brewJump(); - } - - if(prev.moveSource !== moveSource) { - sourceJump(); - } + if(prev.moveBrew !== moveBrew) brewJump(); + if(prev.moveSource !== moveSource) sourceJump(); if(liveScroll) { if(prev.currentBrewRendererPageNum !== currentBrewRendererPageNum) { @@ -194,13 +189,13 @@ const Editor = forwardRef( if(!window || !isText() || isJumping || jumpSource === 'source') return; const brewRenderer = - window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; + window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const currentPos = brewRenderer.scrollTop; const targetPos = window.frames['BrewRenderer'].contentDocument - .getElementById(`p${targetPage}`) - .getBoundingClientRect().top; + .getElementById(`p${targetPage}`) + .getBoundingClientRect().top; let scrollingTimeout; @@ -219,39 +214,29 @@ const Editor = forwardRef( jumpSource = 'brew'; checkIfScrollComplete(); - brewRenderer.addEventListener('scroll', checkIfScrollComplete); if(smooth) { const bouncePos = targetPos >= 0 ? -30 : 30; - const bounceDelay = 100; - const scrollDelay = 500; + const now = Date.now(); - if(!throttleBrewMove.current) { - throttleBrewMove.current = _.throttle( - (currentPos, bouncePos, targetPos)=>{ - brewRenderer.scrollTo({ - top : currentPos + bouncePos, - behavior : 'smooth', - }); + // leading: true, trailing: false, 500ms throttle + if(now - throttleBrewMove.current >= 500) { + throttleBrewMove.current = now; - setTimeout(()=>{ - brewRenderer.scrollTo({ - top : currentPos + targetPos, - behavior : 'smooth', - block : 'start', - }); - }, bounceDelay); - }, - scrollDelay, - { - leading : true, - trailing : false, - }, - ); + brewRenderer.scrollTo({ + top : currentPos + bouncePos, + behavior : 'smooth', + }); + + setTimeout(()=>{ + brewRenderer.scrollTo({ + top : currentPos + targetPos, + behavior : 'smooth', + block : 'start', + }); + }, 100); } - - throttleBrewMove.current(currentPos, bouncePos, targetPos); } else { brewRenderer.scrollTo({ top : currentPos + targetPos, diff --git a/config/editorReferenceCopy.jsx b/config/editorReferenceCopy.jsx new file mode 100644 index 000000000..3f0386da4 --- /dev/null +++ b/config/editorReferenceCopy.jsx @@ -0,0 +1,350 @@ +/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ +import './editor.less'; +import React from 'react'; +import createReactClass from 'create-react-class'; +import _ from 'lodash'; +import dedent from 'dedent'; + +import CodeEditor from '@components/codeEditor/codeEditor.jsx'; +import SnippetBar from '../client/homebrew/editor/snippetbar/snippetbar.jsx'; +import MetadataEditor from '../client/homebrew/editor/metadataEditor/metadataEditor.jsx'; + +const EDITOR_THEME_KEY = 'HB_editor_theme'; + +import defaultCM5Theme from '@themes/codeMirror/default.js'; +import darkbrewery from '@themes/codeMirror/darkbrewery.js'; +import cm5Themes from 'codemirror-5-themes'; + +const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; + +const EditorThemes = Object.entries(themes) + .filter(([name, value])=>Array.isArray(value) && + !name.endsWith('Init') && + !name.endsWith('Style') + ) + .map(([name])=>name); + + +//const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; +//const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/; +const DEFAULT_STYLE_TEXT = dedent` + /*=======--- Example CSS styling ---=======*/ + /* Any CSS here will apply to your document! */ + + .myExampleClass { + color: black; + }`; + +const DEFAULT_SNIPPET_TEXT = dedent` + \snippet example snippet + + The text between \`\snippet title\` lines will become a snippet of name \`title\` as this example provides. + + This snippet is accessible in the brew tab, and will be inherited if the brew is used as a theme. +`; +let isJumping = false; +let jumpSource = null; + +const Editor = createReactClass({ + displayName : 'Editor', + getDefaultProps : function() { + return { + brew : { + text : '', + style : '' + }, + + onBrewChange : ()=>{}, + reportError : ()=>{}, + + onCursorPageChange : ()=>{}, + onViewPageChange : ()=>{}, + + editorTheme : 'default', + renderer : 'legacy', + + currentEditorCursorPageNum : 1, + currentEditorViewPageNum : 1, + currentBrewRendererPageNum : 1, + }; + }, + getInitialState : function() { + return { + editorTheme : this.props.editorTheme, + view : 'text', //'text', 'style', 'meta', 'snippet' + snippetBarHeight : 26, + }; + }, + + editor : React.createRef(null), + codeEditor : React.createRef(null), + + isText : function() {return this.state.view == 'text';}, + isStyle : function() {return this.state.view == 'style';}, + isMeta : function() {return this.state.view == 'meta';}, + isSnip : function() {return this.state.view == 'snippet';}, + + componentDidMount : function() { + + const brewRenderer = document.getElementById('BrewRenderer'); + brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', this.handleControlKeys); + document.addEventListener('keydown', this.handleControlKeys); + + const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); + if(editorTheme && EditorThemes.includes(editorTheme)) { + this.setState({ editorTheme }); + } else { + this.setState({ editorTheme: 'default' }); + } + const snippetBar = document.querySelector('.editor > .snippetBar'); + if(!snippetBar) return; + + this.resizeObserver = new ResizeObserver((entries)=>{ + const height = document.querySelector('.editor > .snippetBar').offsetHeight; + this.setState({ snippetBarHeight: height }); + }); + + this.resizeObserver.observe(snippetBar); + }, + + componentDidUpdate : function(prevProps, prevState, snapshot) { + + if(prevProps.moveBrew !== this.props.moveBrew) + this.brewJump(); + + if(prevProps.moveSource !== this.props.moveSource) + this.sourceJump(); + + if(this.props.liveScroll) { + if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) { + this.sourceJump(this.props.currentBrewRendererPageNum, false); + } else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) { + this.brewJump(this.props.currentEditorViewPageNum, false); + } else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) { + this.brewJump(this.props.currentEditorCursorPageNum, false); + } + } + }, + + componentWillUnmount() { + if(this.resizeObserver) this.resizeObserver.disconnect(); + }, + + handleControlKeys : function(e){ + if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; + const LEFTARROW_KEY = 37; + const RIGHTARROW_KEY = 39; + if(e.keyCode == RIGHTARROW_KEY) this.brewJump(); + if(e.keyCode == LEFTARROW_KEY) this.sourceJump(); + if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { + e.stopPropagation(); + e.preventDefault(); + } + }, + + updateCurrentCursorPage : function(pageNumber) { + this.props.onCursorPageChange(pageNumber); + }, + + updateCurrentViewPage : function(pageNumber) { + this.props.onViewPageChange(pageNumber); + }, + + handleInject : function(injectText){ + this.codeEditor.current?.injectText(injectText); + }, + + handleViewChange : function(newView){ + this.props.setMoveArrows(newView === 'text'); + + this.setState({ + view : newView + }, ()=>{ + this.codeEditor.current?.focus(); + }); + }, + + brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){ + if(!window || !this.isText() || isJumping || jumpSource === 'source') + return; + + // Get current brewRenderer scroll position and calculate target position + const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; + const currentPos = brewRenderer.scrollTop; + const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; + + let scrollingTimeout; + const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times + clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs + scrollingTimeout = setTimeout(()=>{ + isJumping = false; + jumpSource = null; + brewRenderer.removeEventListener('scroll', checkIfScrollComplete); + }, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done + }; + + isJumping = true; + jumpSource = 'brew'; + checkIfScrollComplete(); + brewRenderer.addEventListener('scroll', checkIfScrollComplete); + + if(smooth) { + const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling + const bounceDelay = 100; + const scrollDelay = 500; + + if(!this.throttleBrewMove) { + this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{ + brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' }); + setTimeout(()=>{ + brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' }); + }, bounceDelay); + }, scrollDelay, { leading: true, trailing: false }); + }; + this.throttleBrewMove(currentPos, bouncePos, targetPos); + } else { + brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' }); + } + }, + + sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){ + if(!this.isText() || isJumping || jumpSource === 'brew') + return; + + const editor = this.codeEditor.current; + if(!editor) return; + jumpSource = 'source'; + + editor.scrollToPage(targetPage); + setTimeout(()=>{ + jumpSource = null; + }, 200); + }, + + //Called when there are changes to the editor's dimensions + update : function(){}, + + updateEditorTheme : function(newTheme){ + window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); + this.setState({ + editorTheme : newTheme + }); + }, + + //Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory + rerenderParent : function (){ + this.forceUpdate(); + }, + + renderEditor : function(){ + if(this.isText()){ + return <> + this.updateCurrentCursorPage(page)} + onViewChange={(page)=>this.updateCurrentViewPage(page)} + editorTheme={this.state.editorTheme} + renderer={this.props.brew.renderer} + style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}/> + ; + } + if(this.isStyle()){ + return <> + + ; + } + if(this.isMeta()){ + return <> + + + ; + } + if(this.isSnip()){ + if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; } + return <> + + ; + } + }, + + redo : function(){ + return this.codeEditor.current?.redo(); + }, + + historySize : function(){ + return this.codeEditor.current?.historySize(); + }, + + undo : function(){ + return this.codeEditor.current?.undo(); + }, + + foldCode : function() { + return this.codeEditor.current?.foldAll(); + }, + + unfoldCode : function() { + return this.codeEditor.current?.unfoldAll(); + }, + render : function(){ + return ( +
+ + + {this.renderEditor()} +
+ ); + } +}); + +export default Editor; \ No newline at end of file From 613cea91a3c193f5a4414e87616bd2e58417a759 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 23 Aug 2026 22:11:30 +0200 Subject: [PATCH 7/8] skim lines --- client/homebrew/editor/editor.jsx | 124 +++++++++--------------------- 1 file changed, 36 insertions(+), 88 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index df95d79fc..92ce0b78c 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -84,18 +84,13 @@ const Editor = forwardRef( const isView = (name)=>view === name; - //componentDidMount equivalent useEffect(()=>{ const brewRenderer = document.getElementById('BrewRenderer'); brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', handleControlKeys); document.addEventListener('keydown', handleControlKeys); const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); - if(editorTheme && EditorThemes.includes(editorTheme)) { - setEditorTheme(editorTheme); - } else { - setEditorTheme('default'); - } + if(editorTheme && EditorThemes.includes(editorTheme)) setEditorTheme(editorTheme); else setEditorTheme('default'); const snippetBar = document.querySelector('.editor > .snippetBar'); if(!snippetBar) return; @@ -103,55 +98,18 @@ const Editor = forwardRef( const height = document.querySelector('.editor > .snippetBar').offsetHeight; setSnippetBarHeight(height); }); - resizeObserver.observe(snippetBar); - //ComponentWillUnmount equivalent return ()=>{ if(resizeObserver) resizeObserver.disconnect(); }; }, []); - const previousProps = useRef({ - moveBrew, - moveSource, - currentBrewRendererPageNum, - currentEditorViewPageNum, - currentEditorCursorPageNum, - }); - - //componentDidUpdate Equivalent - useEffect(()=>{ - const prev = previousProps.current; - - if(prev.moveBrew !== moveBrew) brewJump(); - if(prev.moveSource !== moveSource) sourceJump(); - - if(liveScroll) { - if(prev.currentBrewRendererPageNum !== currentBrewRendererPageNum) { - sourceJump(currentBrewRendererPageNum, false); - } else if(prev.currentEditorViewPageNum !== currentEditorViewPageNum) { - brewJump(currentEditorViewPageNum, false); - } else if(prev.currentEditorCursorPageNum !== currentEditorCursorPageNum) { - brewJump(currentEditorCursorPageNum, false); - } - } - - previousProps.current = { - moveBrew, - moveSource, - currentBrewRendererPageNum, - currentEditorViewPageNum, - currentEditorCursorPageNum, - }; - }, [ - moveBrew, - moveSource, - liveScroll, - currentBrewRendererPageNum, - currentEditorViewPageNum, - currentEditorCursorPageNum, - ]); + useEffect(()=>{ if(moveBrew) brewJump(); }, [moveBrew]); + useEffect(()=>{ if(moveSource) sourceJump(); }, [moveSource]); + useEffect(()=>{ if(liveScroll) sourceJump(currentBrewRendererPageNum, false); }, [currentBrewRendererPageNum, liveScroll]); + useEffect(()=>{ if(liveScroll) brewJump(currentEditorViewPageNum, false); }, [currentEditorViewPageNum, liveScroll]); + useEffect(()=>{ if(liveScroll) brewJump(currentEditorCursorPageNum, false); }, [currentEditorCursorPageNum, liveScroll]); const handleControlKeys = (e)=>{ if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; @@ -164,6 +122,7 @@ const Editor = forwardRef( e.preventDefault(); } }; + const updateCurrentCursorPage = (pageNumber)=>{ onCursorPageChange(pageNumber); }; @@ -180,7 +139,6 @@ const Editor = forwardRef( setMoveArrows(newView === 'text'); setView(newView); }; - useEffect(()=>{ codeEditor.current?.focus(); }, [view]); @@ -189,25 +147,25 @@ const Editor = forwardRef( if(!window || !isText() || isJumping || jumpSource === 'source') return; const brewRenderer = - window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; + window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const currentPos = brewRenderer.scrollTop; const targetPos = window.frames['BrewRenderer'].contentDocument - .getElementById(`p${targetPage}`) - .getBoundingClientRect().top; + .getElementById(`p${targetPage}`) + .getBoundingClientRect().top; let scrollingTimeout; - const checkIfScrollComplete = ()=>{ - clearTimeout(scrollingTimeout); + const checkIfScrollComplete = ()=>{// Prevent interrupting a scroll in progress if user clicks multiple times + clearTimeout(scrollingTimeout);// Reset the timer every time a scroll event occurs scrollingTimeout = setTimeout(()=>{ isJumping = false; jumpSource = null; brewRenderer.removeEventListener('scroll', checkIfScrollComplete); - }, 150); + }, 150);// If 150 ms pass without a brewRenderer scroll event, assume scrolling is done }; isJumping = true; @@ -217,31 +175,20 @@ const Editor = forwardRef( brewRenderer.addEventListener('scroll', checkIfScrollComplete); if(smooth) { - const bouncePos = targetPos >= 0 ? -30 : 30; + const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling const now = Date.now(); - // leading: true, trailing: false, 500ms throttle if(now - throttleBrewMove.current >= 500) { throttleBrewMove.current = now; - brewRenderer.scrollTo({ - top : currentPos + bouncePos, - behavior : 'smooth', - }); + brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' }); setTimeout(()=>{ - brewRenderer.scrollTo({ - top : currentPos + targetPos, - behavior : 'smooth', - block : 'start', - }); + brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' }); }, 100); } } else { - brewRenderer.scrollTo({ - top : currentPos + targetPos, - behavior : 'instant', - block : 'start', + brewRenderer.scrollTo({ top : currentPos + targetPos, behavior : 'instant', block : 'start', }); } }; @@ -249,11 +196,10 @@ const Editor = forwardRef( const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true)=>{ if(!isText() || isJumping || jumpSource === 'brew') return; - const editor = codeEditor.current; - if(!editor) return; + if(!codeEditor.current) return; jumpSource = 'source'; - editor.scrollToPage(targetPage); + codeEditor.current.scrollToPage(targetPage); setTimeout(()=>{ jumpSource = null; }, 200); @@ -303,20 +249,6 @@ const Editor = forwardRef( ); } - if(isMeta()) { - return ( - <> - - - - ); - } if(isSnip()) { if(!brew.snippets) { brew.snippets = DEFAULT_SNIPPET_TEXT; @@ -339,13 +271,29 @@ const Editor = forwardRef( ); } + if(isMeta()) { + return ( + <> + + + + ); + } }; + const redo = ()=>codeEditor.current?.redo(); const historySize = ()=>codeEditor.current?.historySize(); const undo = ()=>codeEditor.current?.undo(); const foldCode = ()=>codeEditor.current?.foldAll(); const unfoldCode = ()=>codeEditor.current?.unfoldAll(); + //Called when there are changes to the editor's dimensions const update = ()=>{}; useImperativeHandle(ref, ()=>({ @@ -382,7 +330,7 @@ const Editor = forwardRef( {renderEditor()}
); - }, + } ); export default Editor; From b39502d801605cf260b45f712d81d53901539cce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Sun, 23 Aug 2026 22:12:11 +0200 Subject: [PATCH 8/8] remove reference file --- config/editorReferenceCopy.jsx | 350 --------------------------------- 1 file changed, 350 deletions(-) delete mode 100644 config/editorReferenceCopy.jsx diff --git a/config/editorReferenceCopy.jsx b/config/editorReferenceCopy.jsx deleted file mode 100644 index 3f0386da4..000000000 --- a/config/editorReferenceCopy.jsx +++ /dev/null @@ -1,350 +0,0 @@ -/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ -import './editor.less'; -import React from 'react'; -import createReactClass from 'create-react-class'; -import _ from 'lodash'; -import dedent from 'dedent'; - -import CodeEditor from '@components/codeEditor/codeEditor.jsx'; -import SnippetBar from '../client/homebrew/editor/snippetbar/snippetbar.jsx'; -import MetadataEditor from '../client/homebrew/editor/metadataEditor/metadataEditor.jsx'; - -const EDITOR_THEME_KEY = 'HB_editor_theme'; - -import defaultCM5Theme from '@themes/codeMirror/default.js'; -import darkbrewery from '@themes/codeMirror/darkbrewery.js'; -import cm5Themes from 'codemirror-5-themes'; - -const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; - -const EditorThemes = Object.entries(themes) - .filter(([name, value])=>Array.isArray(value) && - !name.endsWith('Init') && - !name.endsWith('Style') - ) - .map(([name])=>name); - - -//const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; -//const SNIPPETBREAK_REGEX_V3 = /^\\snippet\ .*$/; -const DEFAULT_STYLE_TEXT = dedent` - /*=======--- Example CSS styling ---=======*/ - /* Any CSS here will apply to your document! */ - - .myExampleClass { - color: black; - }`; - -const DEFAULT_SNIPPET_TEXT = dedent` - \snippet example snippet - - The text between \`\snippet title\` lines will become a snippet of name \`title\` as this example provides. - - This snippet is accessible in the brew tab, and will be inherited if the brew is used as a theme. -`; -let isJumping = false; -let jumpSource = null; - -const Editor = createReactClass({ - displayName : 'Editor', - getDefaultProps : function() { - return { - brew : { - text : '', - style : '' - }, - - onBrewChange : ()=>{}, - reportError : ()=>{}, - - onCursorPageChange : ()=>{}, - onViewPageChange : ()=>{}, - - editorTheme : 'default', - renderer : 'legacy', - - currentEditorCursorPageNum : 1, - currentEditorViewPageNum : 1, - currentBrewRendererPageNum : 1, - }; - }, - getInitialState : function() { - return { - editorTheme : this.props.editorTheme, - view : 'text', //'text', 'style', 'meta', 'snippet' - snippetBarHeight : 26, - }; - }, - - editor : React.createRef(null), - codeEditor : React.createRef(null), - - isText : function() {return this.state.view == 'text';}, - isStyle : function() {return this.state.view == 'style';}, - isMeta : function() {return this.state.view == 'meta';}, - isSnip : function() {return this.state.view == 'snippet';}, - - componentDidMount : function() { - - const brewRenderer = document.getElementById('BrewRenderer'); - brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', this.handleControlKeys); - document.addEventListener('keydown', this.handleControlKeys); - - const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); - if(editorTheme && EditorThemes.includes(editorTheme)) { - this.setState({ editorTheme }); - } else { - this.setState({ editorTheme: 'default' }); - } - const snippetBar = document.querySelector('.editor > .snippetBar'); - if(!snippetBar) return; - - this.resizeObserver = new ResizeObserver((entries)=>{ - const height = document.querySelector('.editor > .snippetBar').offsetHeight; - this.setState({ snippetBarHeight: height }); - }); - - this.resizeObserver.observe(snippetBar); - }, - - componentDidUpdate : function(prevProps, prevState, snapshot) { - - if(prevProps.moveBrew !== this.props.moveBrew) - this.brewJump(); - - if(prevProps.moveSource !== this.props.moveSource) - this.sourceJump(); - - if(this.props.liveScroll) { - if(prevProps.currentBrewRendererPageNum !== this.props.currentBrewRendererPageNum) { - this.sourceJump(this.props.currentBrewRendererPageNum, false); - } else if(prevProps.currentEditorViewPageNum !== this.props.currentEditorViewPageNum) { - this.brewJump(this.props.currentEditorViewPageNum, false); - } else if(prevProps.currentEditorCursorPageNum !== this.props.currentEditorCursorPageNum) { - this.brewJump(this.props.currentEditorCursorPageNum, false); - } - } - }, - - componentWillUnmount() { - if(this.resizeObserver) this.resizeObserver.disconnect(); - }, - - handleControlKeys : function(e){ - if(!(e.ctrlKey && e.metaKey && e.shiftKey)) return; - const LEFTARROW_KEY = 37; - const RIGHTARROW_KEY = 39; - if(e.keyCode == RIGHTARROW_KEY) this.brewJump(); - if(e.keyCode == LEFTARROW_KEY) this.sourceJump(); - if(e.keyCode == LEFTARROW_KEY || e.keyCode == RIGHTARROW_KEY) { - e.stopPropagation(); - e.preventDefault(); - } - }, - - updateCurrentCursorPage : function(pageNumber) { - this.props.onCursorPageChange(pageNumber); - }, - - updateCurrentViewPage : function(pageNumber) { - this.props.onViewPageChange(pageNumber); - }, - - handleInject : function(injectText){ - this.codeEditor.current?.injectText(injectText); - }, - - handleViewChange : function(newView){ - this.props.setMoveArrows(newView === 'text'); - - this.setState({ - view : newView - }, ()=>{ - this.codeEditor.current?.focus(); - }); - }, - - brewJump : function(targetPage=this.props.currentEditorCursorPageNum, smooth=true){ - if(!window || !this.isText() || isJumping || jumpSource === 'source') - return; - - // Get current brewRenderer scroll position and calculate target position - const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; - const currentPos = brewRenderer.scrollTop; - const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; - - let scrollingTimeout; - const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times - clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs - scrollingTimeout = setTimeout(()=>{ - isJumping = false; - jumpSource = null; - brewRenderer.removeEventListener('scroll', checkIfScrollComplete); - }, 150); // If 150 ms pass without a brewRenderer scroll event, assume scrolling is done - }; - - isJumping = true; - jumpSource = 'brew'; - checkIfScrollComplete(); - brewRenderer.addEventListener('scroll', checkIfScrollComplete); - - if(smooth) { - const bouncePos = targetPos >= 0 ? -30 : 30; //Do a little bounce before scrolling - const bounceDelay = 100; - const scrollDelay = 500; - - if(!this.throttleBrewMove) { - this.throttleBrewMove = _.throttle((currentPos, bouncePos, targetPos)=>{ - brewRenderer.scrollTo({ top: currentPos + bouncePos, behavior: 'smooth' }); - setTimeout(()=>{ - brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' }); - }, bounceDelay); - }, scrollDelay, { leading: true, trailing: false }); - }; - this.throttleBrewMove(currentPos, bouncePos, targetPos); - } else { - brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'instant', block: 'start' }); - } - }, - - sourceJump : function(targetPage=this.props.currentBrewRendererPageNum, smooth=true){ - if(!this.isText() || isJumping || jumpSource === 'brew') - return; - - const editor = this.codeEditor.current; - if(!editor) return; - jumpSource = 'source'; - - editor.scrollToPage(targetPage); - setTimeout(()=>{ - jumpSource = null; - }, 200); - }, - - //Called when there are changes to the editor's dimensions - update : function(){}, - - updateEditorTheme : function(newTheme){ - window.localStorage.setItem(EDITOR_THEME_KEY, newTheme); - this.setState({ - editorTheme : newTheme - }); - }, - - //Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory - rerenderParent : function (){ - this.forceUpdate(); - }, - - renderEditor : function(){ - if(this.isText()){ - return <> - this.updateCurrentCursorPage(page)} - onViewChange={(page)=>this.updateCurrentViewPage(page)} - editorTheme={this.state.editorTheme} - renderer={this.props.brew.renderer} - style={{ height: `calc(100% - ${this.state.snippetBarHeight}px)` }}/> - ; - } - if(this.isStyle()){ - return <> - - ; - } - if(this.isMeta()){ - return <> - - - ; - } - if(this.isSnip()){ - if(!this.props.brew.snippets) { this.props.brew.snippets = DEFAULT_SNIPPET_TEXT; } - return <> - - ; - } - }, - - redo : function(){ - return this.codeEditor.current?.redo(); - }, - - historySize : function(){ - return this.codeEditor.current?.historySize(); - }, - - undo : function(){ - return this.codeEditor.current?.undo(); - }, - - foldCode : function() { - return this.codeEditor.current?.foldAll(); - }, - - unfoldCode : function() { - return this.codeEditor.current?.unfoldAll(); - }, - render : function(){ - return ( -
- - - {this.renderEditor()} -
- ); - } -}); - -export default Editor; \ No newline at end of file