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;