f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-09-23 16:12:58 +00:00
Code Wiki Activity

lint

Browse Source
This commit is contained in:
Víctor Losada Hernández
2026-08-23 20:16:10 +02:00
parent b655454348
commit ac30edffd6
1 changed files with 115 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/homebrew/editor/editor.jsx
+55 -61
View File
@@ -1,21 +1,21 @@
import "./editor.less"; import './editor.less';
import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react"; import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from 'react';
import dedent from "dedent"; import dedent from 'dedent';
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';
import defaultCM5Theme from "@themes/codeMirror/default.js"; import defaultCM5Theme from '@themes/codeMirror/default.js';
import darkbrewery from "@themes/codeMirror/darkbrewery.js"; import darkbrewery from '@themes/codeMirror/darkbrewery.js';
import cm5Themes from "codemirror-5-themes"; import cm5Themes from 'codemirror-5-themes';
const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery }; const themes = { default: defaultCM5Theme, ...cm5Themes, darkbrewery };
const EditorThemes = Object.entries(themes) const EditorThemes = Object.entries(themes)
.filter(([name, value]) => Array.isArray(value) && !name.endsWith("Init") && !name.endsWith("Style")) .filter(([name, value])=>Array.isArray(value) && !name.endsWith('Init') && !name.endsWith('Style'))
.map(([name])=>name); .map(([name])=>name);
//const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m; //const PAGEBREAK_REGEX_V3 = /^(?=\\page(?:break)?(?: *{[^\n{}]*})?$)/m;
@@ -49,8 +49,8 @@ const Editor = forwardRef(
onCursorPageChange = ()=>{}, onCursorPageChange = ()=>{},
onViewPageChange = ()=>{}, onViewPageChange = ()=>{},
editorTheme = "default", editorTheme = 'default',
renderer = "legacy", renderer = 'legacy',
moveBrew, moveBrew,
moveSource, moveSource,
@@ -69,43 +69,37 @@ const Editor = forwardRef(
ref, ref,
)=>{ )=>{
const [currentEditorTheme, setEditorTheme] = useState(editorTheme); 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 [snippetBarHeight, setSnippetBarHeight] = useState(26);
const editor = useRef(null); const editor = useRef(null);
const codeEditor = useRef(null); const codeEditor = useRef(null);
const throttleBrewMove = useRef(null); const throttleBrewMove = useRef(null);
const isText = () => { const isText = ()=>isView('text');
return view === "text"; const isStyle = ()=>isView('style');
}; const isMeta = ()=>isView('meta');
const isStyle = () => { const isSnip = ()=>isView('snippet');
return view === "style";
}; const isView = (name)=>view === name;
const isMeta = () => {
return view === "meta";
};
const isSnip = () => {
return view === "snippet";
};
//componentDidMount equivalent //componentDidMount equivalent
useEffect(()=>{ useEffect(()=>{
const brewRenderer = document.getElementById("BrewRenderer"); const brewRenderer = document.getElementById('BrewRenderer');
brewRenderer.onload = () => brewRenderer.contentDocument?.addEventListener("keydown", handleControlKeys); brewRenderer.onload = ()=>brewRenderer.contentDocument?.addEventListener('keydown', handleControlKeys);
document.addEventListener("keydown", handleControlKeys); document.addEventListener('keydown', handleControlKeys);
const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
if(editorTheme && EditorThemes.includes(editorTheme)) { if(editorTheme && EditorThemes.includes(editorTheme)) {
setEditorTheme(editorTheme); setEditorTheme(editorTheme);
} else { } else {
setEditorTheme("default"); setEditorTheme('default');
} }
const snippetBar = document.querySelector(".editor > .snippetBar"); const snippetBar = document.querySelector('.editor > .snippetBar');
if(!snippetBar) return; if(!snippetBar) return;
const resizeObserver = new ResizeObserver((entries)=>{ const resizeObserver = new ResizeObserver((entries)=>{
const height = document.querySelector(".editor > .snippetBar").offsetHeight; const height = document.querySelector('.editor > .snippetBar').offsetHeight;
setSnippetBarHeight(height); setSnippetBarHeight(height);
}); });
@@ -187,7 +181,7 @@ const Editor = forwardRef(
}; };
const handleViewChange = (newView)=>{ const handleViewChange = (newView)=>{
setMoveArrows(newView === "text"); setMoveArrows(newView === 'text');
setView(newView); setView(newView);
}; };
@@ -196,14 +190,14 @@ const Editor = forwardRef(
}, [view]); }, [view]);
const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true)=>{ const brewJump = (targetPage = currentEditorCursorPageNum, smooth = true)=>{
if (!window || !isText() || isJumping || jumpSource === "source") return; if(!window || !isText() || isJumping || jumpSource === 'source') return;
const brewRenderer = const brewRenderer =
window.frames["BrewRenderer"].contentDocument.getElementsByClassName("brewRenderer")[0]; 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}`) .getElementById(`p${targetPage}`)
.getBoundingClientRect().top; .getBoundingClientRect().top;
@@ -216,16 +210,16 @@ const Editor = forwardRef(
isJumping = false; isJumping = false;
jumpSource = null; jumpSource = null;
brewRenderer.removeEventListener("scroll", checkIfScrollComplete); brewRenderer.removeEventListener('scroll', checkIfScrollComplete);
}, 150); }, 150);
}; };
isJumping = true; isJumping = true;
jumpSource = "brew"; jumpSource = 'brew';
checkIfScrollComplete(); checkIfScrollComplete();
brewRenderer.addEventListener("scroll", checkIfScrollComplete); brewRenderer.addEventListener('scroll', checkIfScrollComplete);
if(smooth) { if(smooth) {
const bouncePos = targetPos >= 0 ? -30 : 30; const bouncePos = targetPos >= 0 ? -30 : 30;
@@ -237,14 +231,14 @@ const Editor = forwardRef(
(currentPos, bouncePos, targetPos)=>{ (currentPos, bouncePos, targetPos)=>{
brewRenderer.scrollTo({ brewRenderer.scrollTo({
top : currentPos + bouncePos, top : currentPos + bouncePos,
behavior: "smooth", behavior : 'smooth',
}); });
setTimeout(()=>{ setTimeout(()=>{
brewRenderer.scrollTo({ brewRenderer.scrollTo({
top : currentPos + targetPos, top : currentPos + targetPos,
behavior: "smooth", behavior : 'smooth',
block: "start", block : 'start',
}); });
}, bounceDelay); }, bounceDelay);
}, },
@@ -260,18 +254,18 @@ const Editor = forwardRef(
} else { } else {
brewRenderer.scrollTo({ brewRenderer.scrollTo({
top : currentPos + targetPos, top : currentPos + targetPos,
behavior: "instant", behavior : 'instant',
block: "start", block : 'start',
}); });
} }
}; };
const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true)=>{ const sourceJump = (targetPage = currentBrewRendererPageNum, smooth = true)=>{
if (!isText() || isJumping || jumpSource === "brew") return; if(!isText() || isJumping || jumpSource === 'brew') return;
const editor = codeEditor.current; const editor = codeEditor.current;
if(!editor) return; if(!editor) return;
jumpSource = "source"; jumpSource = 'source';
editor.scrollToPage(targetPage); editor.scrollToPage(targetPage);
setTimeout(()=>{ setTimeout(()=>{
@@ -289,13 +283,13 @@ const Editor = forwardRef(
return ( return (
<> <>
<CodeEditor <CodeEditor
key="codeEditor" key='codeEditor'
ref={codeEditor} ref={codeEditor}
language="gfm" language='gfm'
tab="brewText" tab='brewText'
view={view} view={view}
value={brew.text} value={brew.text}
onChange={onBrewChange("text")} onChange={onBrewChange('text')}
onCursorChange={(page)=>updateCurrentCursorPage(page)} onCursorChange={(page)=>updateCurrentCursorPage(page)}
onViewChange={(page)=>updateCurrentViewPage(page)} onViewChange={(page)=>updateCurrentViewPage(page)}
editorTheme={currentEditorTheme} editorTheme={currentEditorTheme}
@@ -309,13 +303,13 @@ const Editor = forwardRef(
return ( return (
<> <>
<CodeEditor <CodeEditor
key="codeEditor" key='codeEditor'
ref={codeEditor} ref={codeEditor}
language="css" language='css'
tab="brewStyles" tab='brewStyles'
view={view} view={view}
value={brew.style ?? DEFAULT_STYLE_TEXT} value={brew.style ?? DEFAULT_STYLE_TEXT}
onChange={onBrewChange("style")} onChange={onBrewChange('style')}
editorTheme={currentEditorTheme} editorTheme={currentEditorTheme}
renderer={brew.renderer} renderer={brew.renderer}
style={{ height: `calc(100% - ${snippetBarHeight}px)` }} style={{ height: `calc(100% - ${snippetBarHeight}px)` }}
@@ -326,11 +320,11 @@ const Editor = forwardRef(
if(isMeta()) { if(isMeta()) {
return ( return (
<> <>
<CodeEditor key="codeEditor" view={view} style={{ display: "none" }} /> <CodeEditor key='codeEditor' view={view} style={{ display: 'none' }} />
<MetadataEditor <MetadataEditor
metadata={brew} metadata={brew}
themeBundle={themeBundle} themeBundle={themeBundle}
onChange={onBrewChange("metadata")} onChange={onBrewChange('metadata')}
reportError={reportError} reportError={reportError}
userThemes={userThemes} userThemes={userThemes}
/> />
@@ -344,13 +338,13 @@ const Editor = forwardRef(
return ( return (
<> <>
<CodeEditor <CodeEditor
key="codeEditor" key='codeEditor'
ref={codeEditor} ref={codeEditor}
language="gfm" language='gfm'
tab="brewSnippets" tab='brewSnippets'
view={view} view={view}
value={brew.snippets} value={brew.snippets}
onChange={onBrewChange("snippets")} onChange={onBrewChange('snippets')}
enableFolding={true} enableFolding={true}
editorTheme={currentEditorTheme} editorTheme={currentEditorTheme}
renderer={brew.renderer} renderer={brew.renderer}
@@ -392,7 +386,7 @@ const Editor = forwardRef(
})); }));
return ( return (
<div className="editor" ref={editor}> <div className='editor' ref={editor}>
<SnippetBar <SnippetBar
brew={brew} brew={brew}
view={view} view={view}