mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-11-04 22:38:43 +00:00
Merge branch 'master' of https://github.com/naturalcrit/homebrewery into fit-listpage-into-vault
This commit is contained in:
Víctor Losada Hernández
@@ -22,7 +22,7 @@ import _ from 'lodash';
|
||||
// use react context to keep track of the menu depth (menus in menus)
|
||||
const MenuDepthContext = React.createContext(0);
|
||||
|
||||
const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, ...props })=>{
|
||||
const Dropdown = ({ groupName, className = null, icon, children, color = null, customTrigger, disabled = false, ...props })=>{
|
||||
const reactId = useId();
|
||||
const safeId = reactId.replace(/[^a-zA-Z0-9_-]/g, '');
|
||||
const menuId = `${_.kebabCase(groupName)}-${safeId}-menu`;
|
||||
@@ -41,7 +41,7 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
|
||||
useEffect(()=>{
|
||||
triggerRef.current?.setAttribute('style', `anchor-name: ${anchorName}`);
|
||||
menuRef.current?.setAttribute('style', `position-anchor: ${anchorName}`);
|
||||
}, [anchorName]);
|
||||
}, [anchorName, disabled]);
|
||||
|
||||
// hide popover with click inside iframe (not supported by light dismiss)
|
||||
useEffect(()=>{
|
||||
@@ -91,8 +91,23 @@ const Dropdown = ({ groupName, className = null, icon, children, color = null, c
|
||||
document.querySelectorAll('.menu-list:popover-open').forEach((openMenu)=>openMenu.hidePopover());
|
||||
};
|
||||
|
||||
if(disabled){
|
||||
return (
|
||||
<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
|
||||
<button
|
||||
className={['menu-item', color].filter(Boolean).join(' ')}
|
||||
aria-label={groupName}
|
||||
role='menuitem'
|
||||
disabled
|
||||
>
|
||||
{trigger(groupName, icon)}
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<li className='menu-wrapper' role='none'>
|
||||
<li className={['menu-wrapper', className].filter(Boolean).join(' ')} role='none'>
|
||||
<button
|
||||
id={`${menuId}-trigger`}
|
||||
className={['menu-item', color].join(' ')}
|
||||
|
||||
@@ -11,6 +11,9 @@
|
||||
}
|
||||
|
||||
:root { --activeTriggerColor : var(--activeTriggerColor); }
|
||||
.menu-wrapper {
|
||||
list-style: none;
|
||||
}
|
||||
.menu-list {
|
||||
position : fixed;
|
||||
top : anchor(bottom);
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
|
||||
import './snippetbar.less';
|
||||
import React from 'react';
|
||||
import createReactClass from 'create-react-class';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { Dropdown } from '@components/dropdown/dropdown.jsx';
|
||||
|
||||
import _ from 'lodash';
|
||||
@@ -31,260 +30,247 @@ const execute = function(val, props){
|
||||
return val;
|
||||
};
|
||||
|
||||
const Snippetbar = createReactClass({
|
||||
displayName : 'SnippetBar',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : {},
|
||||
view : 'text',
|
||||
onViewChange : ()=>{},
|
||||
onInject : ()=>{},
|
||||
onToggle : ()=>{},
|
||||
showEditButtons : true,
|
||||
renderer : 'legacy',
|
||||
undo : ()=>{},
|
||||
redo : ()=>{},
|
||||
historySize : ()=>{},
|
||||
foldCode : ()=>{},
|
||||
unfoldCode : ()=>{},
|
||||
formatCode : ()=>{},
|
||||
cursorPos : {},
|
||||
themeBundle : [],
|
||||
updateBrew : ()=>{}
|
||||
};
|
||||
},
|
||||
const SnippetBar = ({
|
||||
brew = {},
|
||||
view = 'text',
|
||||
onViewChange = ()=>{},
|
||||
onInject = ()=>{},
|
||||
onToggle = ()=>{},
|
||||
showEditButtons = true,
|
||||
renderer = 'legacy',
|
||||
undo = ()=>{},
|
||||
redo = ()=>{},
|
||||
historySize = ()=>{},
|
||||
foldCode = ()=>{},
|
||||
unfoldCode = ()=>{},
|
||||
formatCode = ()=>{},
|
||||
cursorPos = {},
|
||||
themeBundle = [],
|
||||
updateBrew = ()=>{}
|
||||
})=>{
|
||||
const [snippets, setSnippets] = useState([]);
|
||||
const [historyExists, setHistoryExists] = useState(false);
|
||||
const [historyItems, setHistoryItems] = useState([]);
|
||||
|
||||
getInitialState : function() {
|
||||
return {
|
||||
renderer : this.props.renderer,
|
||||
snippets : [],
|
||||
showHistory : false,
|
||||
historyExists : false,
|
||||
historyItems : []
|
||||
};
|
||||
},
|
||||
useEffect(()=>{
|
||||
setSnippets(compileSnippets());
|
||||
}, []);
|
||||
|
||||
componentDidMount : async function(prevState) {
|
||||
const snippets = this.compileSnippets();
|
||||
this.setState({
|
||||
snippets : snippets
|
||||
});
|
||||
},
|
||||
|
||||
componentDidUpdate : async function(prevProps, prevState) {
|
||||
if(prevProps.renderer != this.props.renderer ||
|
||||
prevProps.themeBundle != this.props.themeBundle ||
|
||||
prevProps.brew.snippets != this.props.brew.snippets) {
|
||||
this.setState({
|
||||
snippets : this.compileSnippets()
|
||||
});
|
||||
};
|
||||
|
||||
// Update history list if it has changed
|
||||
const checkHistoryItems = await loadHistory(this.props.brew);
|
||||
|
||||
// If all items have the noData property, there is no saved data
|
||||
const checkHistoryExists = !checkHistoryItems.every((historyItem)=>{
|
||||
return historyItem?.noData;
|
||||
});
|
||||
if(prevState.historyExists != checkHistoryExists){
|
||||
this.setState({
|
||||
historyExists : checkHistoryExists
|
||||
});
|
||||
}
|
||||
|
||||
// If any history items have changed, update the list
|
||||
if(checkHistoryExists && checkHistoryItems.some((historyItem, index)=>{
|
||||
return index >= prevState.historyItems.length || !_.isEqual(historyItem, prevState.historyItems[index]);
|
||||
})){
|
||||
this.setState({
|
||||
historyItems : checkHistoryItems
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mergeCustomizer : function(oldValue, newValue, key) {
|
||||
if(key == 'snippets') {
|
||||
const mergeCustomizer = (oldValue, newValue, key)=>{
|
||||
if(key == 'snippets') {
|
||||
const result = _.reverse(_.unionBy(_.reverse(newValue), _.reverse(oldValue), 'name')); // Join snippets together, with preference for the child theme over the parent theme
|
||||
return result.filter((snip)=>snip.gen || snip.subsnippets);
|
||||
};
|
||||
},
|
||||
|
||||
compileSnippets : function() {
|
||||
};
|
||||
const compileSnippets = ()=>{
|
||||
let compiledSnippets = [];
|
||||
|
||||
let oldSnippets = _.keyBy(compiledSnippets, 'groupName');
|
||||
|
||||
if(this.props.themeBundle.snippets) {
|
||||
for (let snippets of this.props.themeBundle.snippets) {
|
||||
if(themeBundle.snippets) {
|
||||
for (let snippets of themeBundle.snippets) {
|
||||
if(typeof(snippets) == 'string') // load staticThemes as needed; they were sent as just a file name
|
||||
snippets = ThemeSnippets[snippets];
|
||||
|
||||
const newSnippets = _.keyBy(_.cloneDeep(snippets), 'groupName');
|
||||
compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, this.mergeCustomizer));
|
||||
compiledSnippets = _.values(_.mergeWith(oldSnippets, newSnippets, mergeCustomizer));
|
||||
|
||||
oldSnippets = _.keyBy(compiledSnippets, 'groupName');
|
||||
}
|
||||
}
|
||||
|
||||
const userSnippetsasJSON = brewSnippetsToJSON(this.props.brew.title || 'New Document', this.props.brew.snippets, this.props.themeBundle.snippets);
|
||||
const userSnippetsasJSON = brewSnippetsToJSON(brew.title || 'New Document', brew.snippets, themeBundle.snippets);
|
||||
compiledSnippets.push(userSnippetsasJSON);
|
||||
|
||||
return compiledSnippets;
|
||||
},
|
||||
};
|
||||
|
||||
handleSnippetClick : function(injectedText){
|
||||
this.props.onInject(injectedText);
|
||||
},
|
||||
useEffect(()=>{
|
||||
setSnippets(compileSnippets());
|
||||
}, [renderer, themeBundle, brew.snippets]);
|
||||
|
||||
renderSnippetGroups : function(){
|
||||
const snippets = this.state.snippets.filter((snippetGroup)=>snippetGroup.view === this.props.view);
|
||||
if(snippets.length === 0) return null;
|
||||
useEffect(()=>{
|
||||
const updateHistory = async ()=>{
|
||||
// Update history list if it has changed
|
||||
const checkHistoryItems = await loadHistory(brew);
|
||||
|
||||
// If all items have the noData property, there is no saved data
|
||||
const checkHistoryExists = !checkHistoryItems.every(
|
||||
(historyItem)=>historyItem?.noData
|
||||
);
|
||||
|
||||
if(historyExists !== checkHistoryExists) {
|
||||
setHistoryExists(checkHistoryExists);
|
||||
}
|
||||
|
||||
// If any history items have changed, update the list
|
||||
if(!_.isEqual(checkHistoryItems, historyItems)) {
|
||||
setHistoryItems(checkHistoryItems);
|
||||
}
|
||||
};
|
||||
|
||||
updateHistory();
|
||||
}, [brew]);
|
||||
|
||||
const handleSnippetClick = (injectedText)=>onInject(injectedText);
|
||||
|
||||
const renderSnippetGroups = ()=>{
|
||||
const currentSnippets = snippets.filter((snippetGroup)=>snippetGroup.view === view);
|
||||
if(currentSnippets.length === 0) return null;
|
||||
|
||||
return <ul className='snippets' role='menubar' aria-label='Snippets Menubar'>
|
||||
{_.map(snippets, (snippetGroup)=>{
|
||||
{_.map(currentSnippets, (snippetGroup)=>{
|
||||
return <SnippetGroup
|
||||
brew={this.props.brew}
|
||||
brew={brew}
|
||||
groupName={snippetGroup.groupName}
|
||||
icon={snippetGroup.icon}
|
||||
snippets={snippetGroup.snippets}
|
||||
key={snippetGroup.groupName}
|
||||
onSnippetClick={this.handleSnippetClick}
|
||||
cursorPos={this.props.cursorPos}
|
||||
onSnippetClick={handleSnippetClick}
|
||||
cursorPos={cursorPos}
|
||||
/>;
|
||||
})
|
||||
}
|
||||
</ul>;
|
||||
},
|
||||
};
|
||||
|
||||
replaceContent : function(item){
|
||||
return this.props.updateBrew(item);
|
||||
},
|
||||
const replaceContent = (item)=>{
|
||||
return updateBrew(item);
|
||||
};
|
||||
|
||||
toggleHistoryMenu : function(){
|
||||
this.setState({
|
||||
showHistory : !this.state.showHistory
|
||||
});
|
||||
},
|
||||
const renderHistoryMenu = ()=>{
|
||||
return (
|
||||
<Dropdown
|
||||
groupName='History'
|
||||
icon='fas fa-clock-rotate-left'
|
||||
className='history'
|
||||
customTrigger={<><i className='fas fa-clock-rotate-left' /></>}
|
||||
disabled={!historyExists}
|
||||
>
|
||||
{historyExists && _.map(historyItems, (item, index)=>{
|
||||
if(item.noData || !item.savedAt) return null;
|
||||
|
||||
renderHistoryItems : function() {
|
||||
if(!this.state.historyExists) return;
|
||||
const saveTime = new Date(item.savedAt);
|
||||
const diffMs = new Date() - saveTime;
|
||||
const diffSecs = Math.floor(diffMs / 1000);
|
||||
|
||||
return <div className='dropdown'>
|
||||
{_.map(this.state.historyItems, (item, index)=>{
|
||||
if(item.noData || !item.savedAt) return;
|
||||
let diffString = `about ${diffSecs} seconds ago`;
|
||||
|
||||
const saveTime = new Date(item.savedAt);
|
||||
const diffMs = new Date() - saveTime;
|
||||
const diffSecs = Math.floor(diffMs / 1000);
|
||||
if(diffSecs > 60)
|
||||
diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
|
||||
if(diffSecs > (60 * 60))
|
||||
diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
|
||||
if(diffSecs > (24 * 60 * 60))
|
||||
diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
|
||||
if(diffSecs > (7 * 24 * 60 * 60))
|
||||
diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
|
||||
|
||||
let diffString = `about ${diffSecs} seconds ago`;
|
||||
return (
|
||||
<li key={index} role='none'>
|
||||
<button
|
||||
className='menu-item'
|
||||
onClick={()=>replaceContent(item)}
|
||||
role='menuitem'
|
||||
>
|
||||
<i className={`fas fa-${index + 1}`} />
|
||||
<span
|
||||
className='name'
|
||||
title={saveTime.toISOString()}
|
||||
>
|
||||
v{item.version} : {diffString}
|
||||
</span>
|
||||
</button>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</Dropdown>
|
||||
);
|
||||
};
|
||||
|
||||
if(diffSecs > 60) diffString = `about ${Math.floor(diffSecs / 60)} minutes ago`;
|
||||
if(diffSecs > (60 * 60)) diffString = `about ${Math.floor(diffSecs / (60 * 60))} hours ago`;
|
||||
if(diffSecs > (24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (24 * 60 * 60))} days ago`;
|
||||
if(diffSecs > (7 * 24 * 60 * 60)) diffString = `about ${Math.floor(diffSecs / (7 * 24 * 60 * 60))} weeks ago`;
|
||||
|
||||
return <div className='snippet' key={index} onClick={()=>{this.replaceContent(item);}} >
|
||||
<i className={`fas fa-${index+1}`} />
|
||||
<span className='name' title={saveTime.toISOString()}>v{item.version} : {diffString}</span>
|
||||
</div>;
|
||||
})}
|
||||
</div>;
|
||||
},
|
||||
|
||||
renderEditorButtons : function(){
|
||||
if(!this.props.showEditButtons) return;
|
||||
const renderEditorButtons =()=>{
|
||||
if(!showEditButtons) return;
|
||||
|
||||
return (
|
||||
<div className='editors'>
|
||||
{this.props.view !== 'meta' && this.props.view !== 'settings' && <><div className='historyTools'>
|
||||
<button className={`editorTool snippetGroup history ${this.state.historyExists ? 'active' : ''}`}
|
||||
onClick={this.toggleHistoryMenu} >
|
||||
<i className='fas fa-clock-rotate-left' />
|
||||
{ this.state.showHistory && this.renderHistoryItems() }
|
||||
</button>
|
||||
<button className={`editorTool undo ${this.props.historySize.done ? 'active' : ''}`}
|
||||
onClick={this.props.undo} >
|
||||
{view !== 'meta' && view !== 'settings' && <><div className='historyTools'>
|
||||
{renderHistoryMenu()}
|
||||
<button className={`editorTool undo ${historySize.done ? 'active' : ''}`}
|
||||
onClick={undo} >
|
||||
<i className='fas fa-undo' />
|
||||
</button>
|
||||
<button className={`editorTool redo ${this.props.historySize.undone ? 'active' : ''}`}
|
||||
onClick={this.props.redo} >
|
||||
<button className={`editorTool redo ${historySize.undone ? 'active' : ''}`}
|
||||
onClick={redo} >
|
||||
<i className='fas fa-redo' />
|
||||
</button>
|
||||
</div>
|
||||
<div className='codeTools'>
|
||||
<button className={`editorTool foldAll ${this.props.foldCode ? 'active' : ''}`}
|
||||
onClick={this.props.foldCode} >
|
||||
<button className={`editorTool foldAll ${foldCode ? 'active' : ''}`}
|
||||
onClick={foldCode} >
|
||||
<i className='fas fa-compress-alt' />
|
||||
</button>
|
||||
<button className={`editorTool unfoldAll ${this.props.unfoldCode ? 'active' : ''}`}
|
||||
onClick={this.props.unfoldCode} >
|
||||
<button className={`editorTool unfoldAll ${unfoldCode ? 'active' : ''}`}
|
||||
onClick={unfoldCode} >
|
||||
<i className='fas fa-expand-alt' />
|
||||
</button>
|
||||
<button className={`editorTool formatCode ${this.props.formatCode ? 'active' : ''}`}
|
||||
onClick={this.props.formatCode} >
|
||||
<button className={`editorTool formatCode ${formatCode ? 'active' : ''}`}
|
||||
onClick={formatCode} >
|
||||
<i className='fas fa-wand-magic-sparkles' />
|
||||
</button>
|
||||
</div></>}
|
||||
|
||||
<div className='tabs'>
|
||||
<button className={cx('text', { selected: this.props.view === 'text' })}
|
||||
onClick={()=>this.props.onViewChange('text')}>
|
||||
<button className={cx('text', { selected: view === 'text' })}
|
||||
onClick={()=>onViewChange('text')}>
|
||||
<i className='fa fa-beer' />
|
||||
</button>
|
||||
<button className={cx('style', { selected: this.props.view === 'style' })}
|
||||
onClick={()=>this.props.onViewChange('style')}>
|
||||
<button className={cx('style', { selected: view === 'style' })}
|
||||
onClick={()=>onViewChange('style')}>
|
||||
<i className='fa fa-paint-brush' />
|
||||
</button>
|
||||
<button className={cx('snippet', { selected: this.props.view === 'snippet' })}
|
||||
onClick={()=>this.props.onViewChange('snippet')}>
|
||||
<button className={cx('snippet', { selected: view === 'snippet' })}
|
||||
onClick={()=>onViewChange('snippet')}>
|
||||
<i className='fas fa-th-list' />
|
||||
</button>
|
||||
<button className={cx('meta', { selected: this.props.view === 'meta' })}
|
||||
onClick={()=>this.props.onViewChange('meta')}>
|
||||
<button className={cx('meta', { selected: view === 'meta' })}
|
||||
onClick={()=>onViewChange('meta')}>
|
||||
<i className='fas fa-info-circle' />
|
||||
</button>
|
||||
<button className={cx('settings', { selected: this.props.view === 'settings' })}
|
||||
onClick={()=>this.props.onViewChange('settings')}>
|
||||
<button className={cx('settings', { selected: view === 'settings' })}
|
||||
onClick={()=>onViewChange('settings')}>
|
||||
<i className='fas fa-gear' />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
render : function(){
|
||||
return <div className='snippetBar'>
|
||||
{this.renderSnippetGroups()}
|
||||
{this.renderEditorButtons()}
|
||||
</div>;
|
||||
}
|
||||
});
|
||||
return <div className='snippetBar'>
|
||||
{renderSnippetGroups()}
|
||||
{renderEditorButtons()}
|
||||
</div>;
|
||||
};
|
||||
|
||||
export default Snippetbar;
|
||||
export default SnippetBar;
|
||||
|
||||
const SnippetGroup = createReactClass({
|
||||
displayName : 'SnippetGroup',
|
||||
getDefaultProps : function() {
|
||||
return {
|
||||
brew : {},
|
||||
groupName : '',
|
||||
icon : 'fas fa-rocket',
|
||||
snippets : [],
|
||||
onSnippetClick : function(){},
|
||||
};
|
||||
},
|
||||
handleSnippetClick : function(e, snippet){
|
||||
this.props.onSnippetClick(execute(snippet.gen, this.props));
|
||||
},
|
||||
renderSnippets : function(snippets){
|
||||
const SnippetGroup = (props)=>{
|
||||
const {
|
||||
brew = {},
|
||||
groupName = '',
|
||||
icon = 'fas fa-rocket',
|
||||
snippets = [],
|
||||
onSnippetClick = function(){},
|
||||
} = props;
|
||||
|
||||
const handleSnippetClick = (e, snippet)=>{
|
||||
onSnippetClick(execute(snippet.gen, props));
|
||||
};
|
||||
const renderSnippets = (snippets)=>{
|
||||
return _.map(snippets, (snippet)=>{
|
||||
if(!snippet.subsnippets){
|
||||
return (
|
||||
<li key={snippet.name} role='none'>
|
||||
<button className='menu-item' onClick={(e)=>this.handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
|
||||
<button className='menu-item' onClick={(e)=>handleSnippetClick(e, snippet)} role='menuitem' aria-label={snippet.name} disabled={snippet.disabled}>
|
||||
<i className={snippet.icon} />
|
||||
<span className={`name${snippet.disabled ? ' disabled' : ''}`} title={snippet.name}>{snippet.name}</span>
|
||||
{snippet.experimental && <span className='status'>beta</span>}
|
||||
@@ -295,17 +281,15 @@ const SnippetGroup = createReactClass({
|
||||
} else if(snippet.subsnippets){
|
||||
return (
|
||||
<Dropdown groupName={snippet.name} icon={snippet.icon} key={snippet.name}>
|
||||
{this.renderSnippets(snippet.subsnippets)}
|
||||
{renderSnippets(snippet.subsnippets)}
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
render : function(){
|
||||
return <Dropdown groupName={this.props.groupName} id={this.props.groupName} icon={this.props.icon}>
|
||||
{this.renderSnippets(this.props.snippets)}
|
||||
</Dropdown>;
|
||||
},
|
||||
});
|
||||
return <Dropdown groupName={groupName} id={groupName} icon={icon}>
|
||||
{renderSnippets(snippets)}
|
||||
</Dropdown>;
|
||||
};
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
display : flex;
|
||||
justify-content : flex-end;
|
||||
min-width : 275px; //must be controlled every time an item is added, must be hardcoded for the wrapping as it is applied
|
||||
font-size : 0.85rem;
|
||||
font-size:0.85rem;
|
||||
&:only-child {min-width : unset; margin-left : auto;}
|
||||
reading-order : 2;
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
&:first-child { border-left : none; }
|
||||
|
||||
& > button {
|
||||
& > button, & > li {
|
||||
position : relative;
|
||||
width : @menuHeight;
|
||||
height : @menuHeight;
|
||||
@@ -44,7 +44,7 @@
|
||||
text-align : center;
|
||||
cursor : pointer;
|
||||
|
||||
&.editorTool:not(.active) { cursor : not-allowed; }
|
||||
&.editorTool:not(.active),&.editorTool:disabled { cursor : not-allowed; }
|
||||
|
||||
&:hover,&.selected { background-color : var(--hoverMenuColor); }
|
||||
&.text {
|
||||
@@ -59,6 +59,9 @@
|
||||
&.snippet {
|
||||
.tooltipLeft('Snippets');
|
||||
}
|
||||
&.settings {
|
||||
.tooltipLeft('Settings');
|
||||
}
|
||||
&.undo {
|
||||
.tooltipLeft('Undo');
|
||||
color : grey;
|
||||
@@ -85,11 +88,16 @@
|
||||
&.active { color : inherit; }
|
||||
}
|
||||
&.history {
|
||||
font-size:.70rem;
|
||||
|
||||
i {
|
||||
min-width:auto;
|
||||
}
|
||||
.tooltipLeft('History');
|
||||
position : relative;
|
||||
color : grey;
|
||||
border : none;
|
||||
&.active { color : inherit; }
|
||||
&:not(:disabled) { color : inherit; }
|
||||
& > .dropdown {
|
||||
right : -1px;
|
||||
& > .snippet { padding-right : 10px; }
|
||||
|
||||
@@ -3,7 +3,7 @@ import './editPage.less';
|
||||
// Common imports
|
||||
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
|
||||
import request from '../../utils/request-middleware.js';
|
||||
import { hbfm } from 'marked-hbfm';
|
||||
|
||||
import _ from 'lodash';
|
||||
|
||||
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
|
||||
@@ -20,16 +20,11 @@ import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
|
||||
import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
|
||||
import googleDriveIcon from '../../googleDrive.svg';
|
||||
|
||||
const BREWKEY = 'HB_newPage_content';
|
||||
const STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
const METAKEY = 'HB_newPage_meta';
|
||||
|
||||
const useLocalStorage = false;
|
||||
const sandbox = false;
|
||||
const sandbox = false;
|
||||
const showFloatingButtons = false;
|
||||
const showEditorButtons = true;
|
||||
const pageName = "editPage";
|
||||
const pageName = 'editPage';
|
||||
|
||||
const EditPage = (props)=>{
|
||||
props = {
|
||||
@@ -108,23 +103,17 @@ const EditPage = (props)=>{
|
||||
if(!res) return;
|
||||
|
||||
const updatedFields = {
|
||||
googleId : res.body.googleId ?? null,
|
||||
editId : res.body.editId,
|
||||
googleId : res.body.googleId ?? null, //TODO: investigate if we can set googleId:null in server/update instead of undefined
|
||||
editId : res.body.editId, //then, editPage can just apply res.body instead of breaking out these fields.
|
||||
shareId : res.body.shareId,
|
||||
version : res.body.version
|
||||
};
|
||||
|
||||
lastSavedBrew.current = {
|
||||
...brew,
|
||||
...updatedFields
|
||||
};
|
||||
return updatedFields;
|
||||
};
|
||||
|
||||
setCurrentBrew((prevBrew)=>({
|
||||
...prevBrew,
|
||||
...updatedFields
|
||||
}));
|
||||
|
||||
history.replaceState(null, null, `/edit/${res.body.editId}`);
|
||||
const onSaveSuccess = (savedBrew)=>{
|
||||
history.replaceState(null, null, `/edit/${savedBrew.editId}`);;
|
||||
};
|
||||
|
||||
const renderGoogleDriveIcon = ()=>(
|
||||
@@ -176,24 +165,21 @@ const EditPage = (props)=>{
|
||||
trySave,
|
||||
} = useCommonEditPageFunctions({
|
||||
saveGoogle,
|
||||
setSaveGoogle,
|
||||
error,
|
||||
setError,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
hbfm,
|
||||
sandbox,
|
||||
showFloatingButtons,
|
||||
lastSavedBrew,
|
||||
save,
|
||||
onSaveSuccess,
|
||||
pageName,
|
||||
showEditorButtons,
|
||||
renderGoogleDriveIcon,
|
||||
userThemes: props.userThemes
|
||||
userThemes : props.userThemes
|
||||
});
|
||||
|
||||
return renderPanels();
|
||||
|
||||
@@ -3,7 +3,6 @@ import './homePage.less';
|
||||
// Common imports
|
||||
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
|
||||
import request from '../../utils/request-middleware.js';
|
||||
import { hbfm } from 'marked-hbfm';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
|
||||
@@ -11,16 +10,11 @@ import { DEFAULT_BREW } from '../../../../server/brewDefau
|
||||
import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
|
||||
|
||||
// Page specific imports
|
||||
const BREWKEY = 'HB_newPage_content';
|
||||
const STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
const METAKEY = 'HB_newPage_meta';
|
||||
|
||||
const useLocalStorage = false;
|
||||
const sandbox = true;
|
||||
const showFloatingButtons = true;
|
||||
const showEditorButtons = false;
|
||||
const pageName = "homePage";
|
||||
const pageName = 'homePage';
|
||||
|
||||
const HomePage =(props)=>{
|
||||
props = {
|
||||
@@ -28,9 +22,9 @@ const HomePage =(props)=>{
|
||||
...props
|
||||
};
|
||||
|
||||
const [currentBrew, setCurrentBrew] = useState(props.brew);
|
||||
const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
|
||||
const [error, setError] = useState(undefined);
|
||||
const [currentBrew, setCurrentBrew] = useState(props.brew);
|
||||
const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
|
||||
const [error, setError] = useState(undefined);
|
||||
|
||||
const lastSavedBrew = useRef(_.cloneDeep(props.brew));
|
||||
|
||||
@@ -44,32 +38,32 @@ const HomePage =(props)=>{
|
||||
});
|
||||
if(!res) return;
|
||||
|
||||
const saved = res.body;
|
||||
return res.body;
|
||||
};
|
||||
|
||||
const onSaveSuccess = (savedBrew)=>{
|
||||
window.onbeforeunload = null;
|
||||
window.location = `/edit/${saved.editId}`;
|
||||
window.location = `/edit/${savedBrew.editId}`;
|
||||
};
|
||||
|
||||
const {
|
||||
renderPanels
|
||||
} = useCommonEditPageFunctions({
|
||||
saveGoogle,
|
||||
setSaveGoogle,
|
||||
error,
|
||||
setError,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
hbfm,
|
||||
sandbox,
|
||||
showFloatingButtons,
|
||||
lastSavedBrew,
|
||||
save,
|
||||
onSaveSuccess,
|
||||
pageName,
|
||||
showEditorButtons,
|
||||
userThemes: {}
|
||||
userThemes : {}
|
||||
});
|
||||
|
||||
return renderPanels();
|
||||
|
||||
@@ -3,7 +3,6 @@ import './newPage.less';
|
||||
// Common imports
|
||||
import React, { useState, useEffect, useRef, useEffectEvent } from 'react';
|
||||
import request from '../../utils/request-middleware.js';
|
||||
import { hbfm } from 'marked-hbfm';
|
||||
import _ from 'lodash';
|
||||
|
||||
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
|
||||
@@ -11,18 +10,11 @@ import { DEFAULT_BREW } from '../../../../server/brewDefau
|
||||
import useCommonEditPageFunctions from '../../utils/commonEditPageFunctions.jsx';
|
||||
|
||||
// Page specific imports
|
||||
const BREWKEY = 'HB_newPage_content';
|
||||
const STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
const METAKEY = 'HB_newPage_meta';
|
||||
|
||||
const SAVEKEYPREFIX = 'HB_editor_defaultSave_';
|
||||
|
||||
const useLocalStorage = true;
|
||||
const sandbox = true;
|
||||
const showFloatingButtons = false;
|
||||
const showEditorButtons = true;
|
||||
const pageName = "newPage";
|
||||
const pageName = 'newPage';
|
||||
|
||||
const NewPage = (props)=>{
|
||||
props = {
|
||||
@@ -31,44 +23,11 @@ const NewPage = (props)=>{
|
||||
};
|
||||
|
||||
const [currentBrew, setCurrentBrew] = useState(props.brew);
|
||||
const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
|
||||
const [error, setError] = useState(null);
|
||||
const [saveGoogle, setSaveGoogle] = useState(global.account?.googleId ? true : false);
|
||||
const [error, setError] = useState(null);
|
||||
|
||||
const lastSavedBrew = useRef(_.cloneDeep(props.brew));
|
||||
|
||||
useEffect(()=>{
|
||||
loadBrew();
|
||||
}, []);
|
||||
|
||||
const loadBrew = ()=>{
|
||||
const brew = { ...currentBrew };
|
||||
if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
|
||||
const brewStorage = localStorage.getItem(BREWKEY);
|
||||
const styleStorage = localStorage.getItem(STYLEKEY);
|
||||
const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
|
||||
|
||||
brew.text = brewStorage ?? brew.text;
|
||||
brew.style = styleStorage ?? brew.style;
|
||||
brew.renderer = metaStorage?.renderer ?? brew.renderer;
|
||||
brew.theme = metaStorage?.theme ?? brew.theme;
|
||||
brew.lang = metaStorage?.lang ?? brew.lang;
|
||||
}
|
||||
|
||||
const SAVEKEY = `${SAVEKEYPREFIX}${global.account?.username}`;
|
||||
const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
|
||||
|
||||
setCurrentBrew(brew);
|
||||
lastSavedBrew.current = brew;
|
||||
setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
|
||||
|
||||
localStorage.setItem(BREWKEY, brew.text);
|
||||
if(brew.style)
|
||||
localStorage.setItem(STYLEKEY, brew.style);
|
||||
localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
|
||||
if(window.location.pathname !== '/new')
|
||||
window.history.replaceState({}, window.location.title, '/new/');
|
||||
};
|
||||
|
||||
const save = async (brew, saveToGoogle)=>{
|
||||
//Prepare content to send to server
|
||||
const brewToSave = {
|
||||
@@ -87,11 +46,10 @@ const NewPage = (props)=>{
|
||||
});
|
||||
if(!res) return;
|
||||
|
||||
const savedBrew = res.body;
|
||||
return res.body;
|
||||
};
|
||||
|
||||
localStorage.removeItem(BREWKEY);
|
||||
localStorage.removeItem(STYLEKEY);
|
||||
localStorage.removeItem(METAKEY);
|
||||
const onSaveSuccess = (savedBrew)=>{
|
||||
window.onbeforeunload = null;
|
||||
window.location = `/edit/${savedBrew.editId}`;
|
||||
};
|
||||
@@ -100,23 +58,20 @@ const NewPage = (props)=>{
|
||||
renderPanels
|
||||
} = useCommonEditPageFunctions({
|
||||
saveGoogle,
|
||||
setSaveGoogle,
|
||||
error,
|
||||
setError,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
hbfm,
|
||||
sandbox,
|
||||
showFloatingButtons,
|
||||
lastSavedBrew,
|
||||
save,
|
||||
onSaveSuccess,
|
||||
pageName,
|
||||
showEditorButtons,
|
||||
userThemes: props.userThemes
|
||||
userThemes : props.userThemes
|
||||
});
|
||||
|
||||
return renderPanels();
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import React, { useState, useEffect, useEffectEvent, useRef } from 'react';
|
||||
import { printCurrentBrew, fetchThemeBundle } from '@shared/helpers.js';
|
||||
import _ from 'lodash';
|
||||
import { hbfm } from 'marked-hbfm';
|
||||
|
||||
import Headtags from '@vitreum/headtags.js';
|
||||
import SplitPane from '@components/splitPane/splitPane.jsx';
|
||||
@@ -22,7 +23,12 @@ import ShareNavItem from '@navbar/share.navitem.jsx';
|
||||
import RecentNavItems from '@navbar/recent.navitem.jsx';
|
||||
const { both: RecentNavItem } = RecentNavItems;
|
||||
|
||||
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
|
||||
const AUTOSAVE_KEY = 'HB_editor_autoSaveOn';
|
||||
const BREWKEY = 'HB_newPage_content';
|
||||
const STYLEKEY = 'HB_newPage_style';
|
||||
const SNIPKEY = 'HB_newPage_snippets';
|
||||
const METAKEY = 'HB_newPage_meta';
|
||||
const SAVEKEY_PREFIX = 'HB_editor_defaultSave_';
|
||||
|
||||
const SAVE_TIMEOUT = 10000; //Autosave 10 seconds after last change
|
||||
const UNSAVED_WARNING_TIMEOUT = 900000; //Warn user afer 15 minutes of unsaved changes
|
||||
@@ -31,20 +37,17 @@ const UNSAVED_WARNING_POPUP_TIMEOUT = 4000; //Show the warning for 4 seconds
|
||||
export default function useCommonEditPageFunctions(dependencies) {
|
||||
const {
|
||||
saveGoogle,
|
||||
setSaveGoogle,
|
||||
error,
|
||||
setError,
|
||||
currentBrew,
|
||||
setCurrentBrew,
|
||||
useLocalStorage,
|
||||
BREWKEY,
|
||||
STYLEKEY,
|
||||
SNIPKEY,
|
||||
METAKEY,
|
||||
hbfm,
|
||||
sandbox,
|
||||
showFloatingButtons,
|
||||
lastSavedBrew,
|
||||
save,
|
||||
onSaveSuccess,
|
||||
pageName,
|
||||
renderGoogleDriveIcon = ()=>{},
|
||||
showEditorButtons,
|
||||
@@ -70,6 +73,7 @@ export default function useCommonEditPageFunctions(dependencies) {
|
||||
|
||||
//==--------- Page setup ----------==//
|
||||
useEffect(()=>{
|
||||
if(useLocalStorage) loadBrewFromLocalStorage();
|
||||
const autoSavePref = !sandbox && JSON.parse(localStorage.getItem(AUTOSAVE_KEY) ?? true);
|
||||
setAutoSaveEnabled(autoSavePref);
|
||||
setWarnUnsavedChanges(!autoSavePref);
|
||||
@@ -95,6 +99,44 @@ export default function useCommonEditPageFunctions(dependencies) {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const loadBrewFromLocalStorage = ()=>{
|
||||
const brew = { ...currentBrew };
|
||||
if(!brew.shareId && typeof window !== 'undefined') { //Load from localStorage if in client browser
|
||||
const brewStorage = localStorage.getItem(BREWKEY);
|
||||
const styleStorage = localStorage.getItem(STYLEKEY);
|
||||
const snipStorage = localStorage.getItem(SNIPKEY);
|
||||
const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
|
||||
|
||||
brew.text = brewStorage ?? brew.text;
|
||||
brew.style = styleStorage ?? brew.style;
|
||||
brew.snippets = snipStorage ?? brew.snippets;
|
||||
brew.renderer = metaStorage?.renderer ?? brew.renderer;
|
||||
brew.theme = metaStorage?.theme ?? brew.theme;
|
||||
brew.lang = metaStorage?.lang ?? brew.lang;
|
||||
}
|
||||
|
||||
const SAVEKEY = `${SAVEKEY_PREFIX}${global.account?.username}`;
|
||||
const saveStorage = localStorage.getItem(SAVEKEY) || 'HOMEBREWERY';
|
||||
|
||||
setCurrentBrew(brew);
|
||||
lastSavedBrew.current = brew;
|
||||
setSaveGoogle(saveStorage == 'GOOGLE-DRIVE' && saveGoogle);
|
||||
|
||||
localStorage.setItem(BREWKEY, brew.text);
|
||||
if(brew.style) localStorage.setItem(STYLEKEY, brew.style);
|
||||
if(brew.snippets) localStorage.setItem(SNIPKEY, brew.snippets);
|
||||
localStorage.setItem(METAKEY, JSON.stringify({ renderer: brew.renderer, theme: brew.theme, lang: brew.lang }));
|
||||
if(window.location.pathname !== '/new')
|
||||
window.history.replaceState({}, window.location.title, '/new/');
|
||||
};
|
||||
|
||||
const clearLocalStorage = ()=>{
|
||||
localStorage.removeItem(BREWKEY);
|
||||
localStorage.removeItem(STYLEKEY);
|
||||
localStorage.removeItem(SNIPKEY);
|
||||
localStorage.removeItem(METAKEY);
|
||||
};
|
||||
|
||||
//======----- Check for unsaved changes and autosave if enabled -----======
|
||||
useEffect(()=>{
|
||||
const hasChange = !_.isEqual(currentBrew, lastSavedBrew.current);
|
||||
@@ -127,12 +169,12 @@ export default function useCommonEditPageFunctions(dependencies) {
|
||||
|
||||
if(useLocalStorage) {
|
||||
if(field == 'text') localStorage.setItem(BREWKEY, value);
|
||||
if(field == 'style') localStorage.setItem(STYLEKEY, 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
|
||||
theme : value.theme,
|
||||
lang : value.lang
|
||||
}));
|
||||
}
|
||||
};
|
||||
@@ -160,8 +202,23 @@ export default function useCommonEditPageFunctions(dependencies) {
|
||||
setIsSaving(true);
|
||||
setError(null);
|
||||
setHTMLErrors(hbfm.validate(currentBrew.text));
|
||||
await save(currentBrew, saveToGoogle)
|
||||
const brewToSave = currentBrew;
|
||||
let savedBrew = await save(brewToSave, saveToGoogle)
|
||||
.catch((err)=>{setError(err);});
|
||||
if(savedBrew) {
|
||||
lastSavedBrew.current = {
|
||||
...brewToSave,
|
||||
...savedBrew
|
||||
};
|
||||
|
||||
setCurrentBrew((prevBrew)=>({
|
||||
...prevBrew,
|
||||
...savedBrew
|
||||
}));
|
||||
|
||||
if(useLocalStorage) clearLocalStorage();
|
||||
onSaveSuccess(savedBrew);
|
||||
}
|
||||
setIsSaving(false);
|
||||
setLastSavedTime(new Date());
|
||||
if(!autoSaveEnabled) resetWarnUnsavedTimer();
|
||||
@@ -216,14 +273,14 @@ export default function useCommonEditPageFunctions(dependencies) {
|
||||
? <ErrorNavItem error={error} clearError={clearError} />
|
||||
: <Nav.dropdown className='save-menu'>
|
||||
{renderSaveButton()}
|
||||
{pageName == "editPage" && renderAutoSaveButton()}
|
||||
{pageName == 'editPage' && renderAutoSaveButton()}
|
||||
</Nav.dropdown>}
|
||||
<NewBrewItem />
|
||||
<PrintNavItem />
|
||||
<HelpNavItem />
|
||||
<VaultNavItem />
|
||||
{(pageName == "editPage") && <ShareNavItem brew={currentBrew} currentPage={currentBrewRendererPageNum} />}
|
||||
<RecentNavItem brew={currentBrew} storageKey={(pageName == "editPage") ? 'edit' : undefined} />
|
||||
{(pageName == 'editPage') && <ShareNavItem brew={currentBrew} currentPage={currentBrewRendererPageNum} />}
|
||||
<RecentNavItem brew={currentBrew} storageKey={(pageName == 'editPage') ? 'edit' : undefined} />
|
||||
<AccountNavItem />
|
||||
</Nav.section>
|
||||
</Navbar>
|
||||
|
||||
Reference in New Issue
Block a user