mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2025-12-24 14:12:40 +00:00
Merge handText/Style/Snip/MetaChange into handleBrewChange
This commit is contained in:
@@ -40,10 +40,7 @@ const Editor = createClass({
|
||||
style : ''
|
||||
},
|
||||
|
||||
onTextChange : ()=>{},
|
||||
onStyleChange : ()=>{},
|
||||
onMetaChange : ()=>{},
|
||||
onSnipChange : ()=>{},
|
||||
onBrewChange : ()=>{},
|
||||
reportError : ()=>{},
|
||||
|
||||
onCursorPageChange : ()=>{},
|
||||
@@ -438,7 +435,7 @@ const Editor = createClass({
|
||||
language='gfm'
|
||||
view={this.state.view}
|
||||
value={this.props.brew.text}
|
||||
onChange={this.props.onTextChange}
|
||||
onChange={this.props.onBrewChange('text')}
|
||||
editorTheme={this.state.editorTheme}
|
||||
rerenderParent={this.rerenderParent}
|
||||
style={{ height: `calc(100% - ${this.state.snippetbarHeight}px)` }} />
|
||||
@@ -451,7 +448,7 @@ const Editor = createClass({
|
||||
language='css'
|
||||
view={this.state.view}
|
||||
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
|
||||
onChange={this.props.onStyleChange}
|
||||
onChange={this.props.onBrewChange('style')}
|
||||
enableFolding={true}
|
||||
editorTheme={this.state.editorTheme}
|
||||
rerenderParent={this.rerenderParent}
|
||||
@@ -467,7 +464,7 @@ const Editor = createClass({
|
||||
<MetadataEditor
|
||||
metadata={this.props.brew}
|
||||
themeBundle={this.props.themeBundle}
|
||||
onChange={this.props.onMetaChange}
|
||||
onChange={this.props.onBrewChange('metadata')}
|
||||
reportError={this.props.reportError}
|
||||
userThemes={this.props.userThemes}/>
|
||||
</>;
|
||||
@@ -481,7 +478,7 @@ const Editor = createClass({
|
||||
language='gfm'
|
||||
view={this.state.view}
|
||||
value={this.props.brew.snippets}
|
||||
onChange={this.props.onSnipChange}
|
||||
onChange={this.props.onBrewChange('snippets')}
|
||||
enableFolding={true}
|
||||
editorTheme={this.state.editorTheme}
|
||||
rerenderParent={this.rerenderParent}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
/* eslint-disable max-lines */
|
||||
import './editPage.less';
|
||||
|
||||
import React, { useState, useEffect, useRef, useCallback } from 'react';
|
||||
import React, { useState, useEffect, useRef, useCallback, use } from 'react';
|
||||
import request from '../../utils/request-middleware.js';
|
||||
import Markdown from 'naturalcrit/markdown.js';
|
||||
|
||||
@@ -38,6 +38,8 @@ const SAVE_TIMEOUT = 10000;
|
||||
const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
|
||||
const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
|
||||
|
||||
const useLocalStorage = false;
|
||||
|
||||
const EditPage = (props)=>{
|
||||
props = {
|
||||
brew : DEFAULT_BREW_LOAD,
|
||||
@@ -111,29 +113,27 @@ const EditPage = (props)=>{
|
||||
editorRef.current?.update();
|
||||
};
|
||||
|
||||
const handleTextChange = (text)=>{
|
||||
const handleBrewChange = (field) => (value, subfield) => { //'text', 'style', 'snippets', 'metadata'
|
||||
if (subfield == 'renderer' || subfield == 'theme')
|
||||
fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
|
||||
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length)
|
||||
setHTMLErrors(Markdown.validate(text));
|
||||
setCurrentBrew((prevBrew)=>({ ...prevBrew, text }));
|
||||
};
|
||||
if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
|
||||
setHTMLErrors(Markdown.validate(value));
|
||||
|
||||
const handleStyleChange = (style)=>{
|
||||
setCurrentBrew((prevBrew)=>({ ...prevBrew, style }));
|
||||
};
|
||||
if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
|
||||
else setCurrentBrew(prev => ({ ...prev, [field]: value }));
|
||||
|
||||
const handleSnipChange = (snippet)=>{
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length)
|
||||
setHTMLErrors(Markdown.validate(snippet));
|
||||
setCurrentBrew((prevBrew)=>({ ...prevBrew, snippets: snippet }));
|
||||
};
|
||||
|
||||
const handleMetaChange = (metadata, field = undefined)=>{
|
||||
if(field === 'theme' || field === 'renderer')
|
||||
fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
|
||||
|
||||
setCurrentBrew((prev)=>({ ...prev, ...metadata }));
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, value);
|
||||
if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
|
||||
if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : value.renderer,
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const updateBrew = (newData)=>setCurrentBrew((prevBrew)=>({
|
||||
@@ -396,10 +396,7 @@ const EditPage = (props)=>{
|
||||
<Editor
|
||||
ref={editorRef}
|
||||
brew={currentBrew}
|
||||
onTextChange={handleTextChange}
|
||||
onStyleChange={handleStyleChange}
|
||||
onSnipChange={handleSnipChange}
|
||||
onMetaChange={handleMetaChange}
|
||||
onBrewChange={handleBrewChange}
|
||||
reportError={setError}
|
||||
renderer={currentBrew.renderer}
|
||||
userThemes={props.userThemes}
|
||||
|
||||
@@ -3,6 +3,7 @@ import './homePage.less';
|
||||
import React from 'react';
|
||||
import { useEffect, useState, useRef } from 'react';
|
||||
import request from '../../utils/request-middleware.js';
|
||||
import Markdown from 'naturalcrit/markdown.js';
|
||||
import { Meta } from 'vitreum/headtags';
|
||||
|
||||
import Nav from 'naturalcrit/nav/nav.jsx';
|
||||
@@ -21,6 +22,8 @@ import BrewRenderer from '../../brewRenderer/brewRenderer.jsx
|
||||
|
||||
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
|
||||
|
||||
const useLocalStorage = false;
|
||||
|
||||
const HomePage =(props)=>{
|
||||
props = {
|
||||
brew : DEFAULT_BREW,
|
||||
@@ -28,9 +31,10 @@ const HomePage =(props)=>{
|
||||
...props
|
||||
};
|
||||
|
||||
const [brew , setBrew] = useState(props.brew);
|
||||
const [currentBrew , setCurrentBrew] = useState(props.brew);
|
||||
const [welcomeText , setWelcomeText] = useState(props.brew.text);
|
||||
const [error , setError] = useState(undefined);
|
||||
const [HTMLErrors , setHTMLErrors] = useState(Markdown.validate(props.brew.text));
|
||||
const [currentEditorViewPageNum , setCurrentEditorViewPageNum] = useState(1);
|
||||
const [currentEditorCursorPageNum, setCurrentEditorCursorPageNum] = useState(1);
|
||||
const [currentBrewRendererPageNum, setCurrentBrewRendererPageNum] = useState(1);
|
||||
@@ -40,12 +44,12 @@ const HomePage =(props)=>{
|
||||
const editorRef = useRef(null);
|
||||
|
||||
useEffect(()=>{
|
||||
fetchThemeBundle(setError, setThemeBundle, brew.renderer, brew.theme);
|
||||
fetchThemeBundle(setError, setThemeBundle, currentBrew.renderer, currentBrew.theme);
|
||||
}, []);
|
||||
|
||||
const save = ()=>{
|
||||
request.post('/api')
|
||||
.send(brew)
|
||||
.send(currentBrew)
|
||||
.end((err, res)=>{
|
||||
if(err) {
|
||||
setError(err);
|
||||
@@ -60,8 +64,27 @@ const HomePage =(props)=>{
|
||||
editorRef.current.update();
|
||||
};
|
||||
|
||||
const handleTextChange = (text)=>{
|
||||
setBrew((prevBrew) => ({ ...prevBrew, text }));
|
||||
const handleBrewChange = (field) => (value, subfield) => { //'text', 'style', 'snippets', 'metadata'
|
||||
if (subfield == 'renderer' || subfield == 'theme')
|
||||
fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
|
||||
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
|
||||
setHTMLErrors(Markdown.validate(value));
|
||||
|
||||
if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
|
||||
else setCurrentBrew(prev => ({ ...prev, [field]: value }));
|
||||
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, value);
|
||||
if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
|
||||
if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : value.renderer,
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const clearError = ()=>{
|
||||
@@ -93,9 +116,9 @@ const HomePage =(props)=>{
|
||||
<SplitPane onDragFinish={handleSplitMove}>
|
||||
<Editor
|
||||
ref={editorRef}
|
||||
brew={brew}
|
||||
onTextChange={handleTextChange}
|
||||
renderer={brew.renderer}
|
||||
brew={currentBrew}
|
||||
onBrewChange={handleBrewChange}
|
||||
renderer={currentBrew.renderer}
|
||||
showEditButtons={false}
|
||||
themeBundle={themeBundle}
|
||||
onCursorPageChange={setCurrentEditorCursorPageNum}
|
||||
@@ -105,9 +128,9 @@ const HomePage =(props)=>{
|
||||
currentBrewRendererPageNum={currentBrewRendererPageNum}
|
||||
/>
|
||||
<BrewRenderer
|
||||
text={brew.text}
|
||||
style={brew.style}
|
||||
renderer={brew.renderer}
|
||||
text={currentBrew.text}
|
||||
style={currentBrew.style}
|
||||
renderer={currentBrew.renderer}
|
||||
onPageChange={setCurrentBrewRendererPageNum}
|
||||
currentEditorViewPageNum={currentEditorViewPageNum}
|
||||
currentEditorCursorPageNum={currentEditorCursorPageNum}
|
||||
@@ -116,7 +139,7 @@ const HomePage =(props)=>{
|
||||
/>
|
||||
</SplitPane>
|
||||
</div>
|
||||
<div className={`floatingSaveButton${welcomeText !== brew.text ? ' show' : ''}`} onClick={save}>
|
||||
<div className={`floatingSaveButton${welcomeText !== currentBrew.text ? ' show' : ''}`} onClick={save}>
|
||||
Save current <i className='fas fa-save' />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -22,9 +22,12 @@ import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '.
|
||||
|
||||
const BREWKEY = 'homebrewery-new';
|
||||
const STYLEKEY = 'homebrewery-new-style';
|
||||
const SNIPKEY = 'homebrewery-new-snippets';
|
||||
const METAKEY = 'homebrewery-new-meta';
|
||||
const SAVEKEY = `HOMEBREWERY-DEFAULT-SAVE-LOCATION-${global.account?.username || ''}`;
|
||||
|
||||
const useLocalStorage = true;
|
||||
|
||||
const NewPage = (props) => {
|
||||
props = {
|
||||
brew: DEFAULT_BREW,
|
||||
@@ -96,41 +99,27 @@ const NewPage = (props) => {
|
||||
editorRef.current.update();
|
||||
};
|
||||
|
||||
const handleBrewChange = (field) => (value, subfield) => { //'text', 'style', 'snippets', 'metadata'
|
||||
if (subfield == 'renderer' || subfield == 'theme')
|
||||
fetchThemeBundle(setError, setThemeBundle, value.renderer, value.theme);
|
||||
|
||||
const handleTextChange = (text)=>{
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length)
|
||||
HTMLErrors = Markdown.validate(text);
|
||||
if(HTMLErrors.length && (field == 'text' || field == 'snippets'))
|
||||
setHTMLErrors(Markdown.validate(value));
|
||||
|
||||
setHTMLErrors(HTMLErrors);
|
||||
setCurrentBrew((prevBrew) => ({ ...prevBrew, text }));
|
||||
localStorage.setItem(BREWKEY, text);
|
||||
};
|
||||
if(field == 'metadata') setCurrentBrew(prev => ({ ...prev, ...value }));
|
||||
else setCurrentBrew(prev => ({ ...prev, [field]: value }));
|
||||
|
||||
const handleStyleChange = (style) => {
|
||||
setCurrentBrew(prevBrew => ({ ...prevBrew, style }));
|
||||
localStorage.setItem(STYLEKEY, style);
|
||||
};
|
||||
|
||||
const handleSnipChange = (snippet)=>{
|
||||
//If there are HTML errors, run the validator on every change to give quick feedback
|
||||
if(HTMLErrors.length)
|
||||
HTMLErrors = Markdown.validate(snippet);
|
||||
|
||||
setHTMLErrors(HTMLErrors);
|
||||
setCurrentBrew((prevBrew) => ({ ...prevBrew, snippets: snippet }));
|
||||
};
|
||||
|
||||
const handleMetaChange = (metadata, field = undefined) => {
|
||||
if (field === 'theme' || field === 'renderer')
|
||||
fetchThemeBundle(setError, setThemeBundle, metadata.renderer, metadata.theme);
|
||||
|
||||
setCurrentBrew(prev => ({ ...prev, ...metadata }));
|
||||
localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : metadata.renderer,
|
||||
theme : metadata.theme,
|
||||
lang : metadata.lang
|
||||
}));
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, value);
|
||||
if(field == 'snippets') localStorage.setItem(SNIPKEY, value);
|
||||
if(field == 'metadata') localStorage.setItem(METAKEY, JSON.stringify({
|
||||
renderer : value.renderer,
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
const save = async () => {
|
||||
@@ -204,10 +193,7 @@ const NewPage = (props) => {
|
||||
<Editor
|
||||
ref={editorRef}
|
||||
brew={currentBrew}
|
||||
onTextChange={handleTextChange}
|
||||
onStyleChange={handleStyleChange}
|
||||
onMetaChange={handleMetaChange}
|
||||
onSnipChange={handleSnipChange}
|
||||
onBrewChange={handleBrewChange}
|
||||
renderer={currentBrew.renderer}
|
||||
userThemes={props.userThemes}
|
||||
themeBundle={themeBundle}
|
||||
|
||||
Reference in New Issue
Block a user