mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-09-20 16:42:58 +00:00
lint
This commit is contained in:
Víctor Losada Hernández
+115
-121
@@ -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 (
|
||||
<>
|
||||
<CodeEditor
|
||||
key="codeEditor"
|
||||
key='codeEditor'
|
||||
ref={codeEditor}
|
||||
language="gfm"
|
||||
tab="brewText"
|
||||
language='gfm'
|
||||
tab='brewText'
|
||||
view={view}
|
||||
value={brew.text}
|
||||
onChange={onBrewChange("text")}
|
||||
onCursorChange={(page) => 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 (
|
||||
<>
|
||||
<CodeEditor
|
||||
key="codeEditor"
|
||||
key='codeEditor'
|
||||
ref={codeEditor}
|
||||
language="css"
|
||||
tab="brewStyles"
|
||||
language='css'
|
||||
tab='brewStyles'
|
||||
view={view}
|
||||
value={brew.style ?? DEFAULT_STYLE_TEXT}
|
||||
onChange={onBrewChange("style")}
|
||||
onChange={onBrewChange('style')}
|
||||
editorTheme={currentEditorTheme}
|
||||
renderer={brew.renderer}
|
||||
style={{ height: `calc(100% - ${snippetBarHeight}px)` }}
|
||||
@@ -323,34 +317,34 @@ const Editor = forwardRef(
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (isMeta()) {
|
||||
if(isMeta()) {
|
||||
return (
|
||||
<>
|
||||
<CodeEditor key="codeEditor" view={view} style={{ display: "none" }} />
|
||||
<CodeEditor key='codeEditor' view={view} style={{ display: 'none' }} />
|
||||
<MetadataEditor
|
||||
metadata={brew}
|
||||
themeBundle={themeBundle}
|
||||
onChange={onBrewChange("metadata")}
|
||||
onChange={onBrewChange('metadata')}
|
||||
reportError={reportError}
|
||||
userThemes={userThemes}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
if (isSnip()) {
|
||||
if (!brew.snippets) {
|
||||
if(isSnip()) {
|
||||
if(!brew.snippets) {
|
||||
brew.snippets = DEFAULT_SNIPPET_TEXT;
|
||||
}
|
||||
return (
|
||||
<>
|
||||
<CodeEditor
|
||||
key="codeEditor"
|
||||
key='codeEditor'
|
||||
ref={codeEditor}
|
||||
language="gfm"
|
||||
tab="brewSnippets"
|
||||
language='gfm'
|
||||
tab='brewSnippets'
|
||||
view={view}
|
||||
value={brew.snippets}
|
||||
onChange={onBrewChange("snippets")}
|
||||
onChange={onBrewChange('snippets')}
|
||||
enableFolding={true}
|
||||
editorTheme={currentEditorTheme}
|
||||
renderer={brew.renderer}
|
||||
@@ -360,29 +354,29 @@ const Editor = forwardRef(
|
||||
);
|
||||
}
|
||||
};
|
||||
const redo = () => {
|
||||
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 (
|
||||
<div className="editor" ref={editor}>
|
||||
<div className='editor' ref={editor}>
|
||||
<SnippetBar
|
||||
brew={brew}
|
||||
view={view}
|
||||
|
||||
Reference in New Issue
Block a user