f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-03-22 08:58:11 +00:00
Code Wiki Activity

Merge branch 'master' into codeMirror-skipExtraKeys

Browse Source
This commit is contained in:
David Bolack
2026-02-22 10:46:26 -06:00
parent 6b57dcf052 8edf517b7a
commit 1fa0a23459
108 changed files with 5181 additions and 2547 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
changelog.md
View File

@@ -83,12 +83,40 @@ pre {
.page .exampleTable td,th { .page .exampleTable td,th {
border:1px dashed #00000030; border:1px dashed #00000030;
} }
.page .df {
font-size: 2em;
vertical-align: middle;
}
``` ```
## changelog ## changelog
For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery). For a full record of development, visit our [Github Page](https://github.com/naturalcrit/homebrewery).
### Friday 11/14/2025 - v13.20.0 ### Friday 1/11/2026 - v3.20.1
{{taskList
##### calculuschild
* [x] Add D100 "ball" dice icons `:d100:` :df_d100_05:
##### G-Ambatte
* [x] Fix transparent edge on back cover image
Fixes issue [#4551](https://github.com/naturalcrit/homebrewery/issues/4551)
* [x] Fix "Out of sync" error when document contains extended unicode characters
Fixes issue [#4583](https://github.com/naturalcrit/homebrewery/issues/4583)
##### 5e-Cleric
* [x] Fix page count error on Vault
* [x] Fix cover page footnote set to all-caps
Fixes issue [#4559](https://github.com/naturalcrit/homebrewery/issues/4559)
}}
### Friday 11/14/2025 - v3.20.0
{{taskList {{taskList
##### calculuschild ##### calculuschild

4
client/admin/admin.jsx
View File

@@ -1,7 +1,7 @@
import './admin.less'; import './admin.less';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
const BrewUtils = require('./brewUtils/brewUtils.jsx'); import BrewUtils from './brewUtils/brewUtils.jsx';
const NotificationUtils = require('./notificationUtils/notificationUtils.jsx'); import NotificationUtils from './notificationUtils/notificationUtils.jsx';
import AuthorUtils from './authorUtils/authorUtils.jsx'; import AuthorUtils from './authorUtils/authorUtils.jsx';
import LockTools from './lockTools/lockTools.jsx'; import LockTools from './lockTools/lockTools.jsx';

2
client/admin/authorUtils/authorLookup/authorLookup.jsx
View File

@@ -84,4 +84,4 @@ const authorLookup = ()=>{
); );
}; };
module.exports = authorLookup; export default authorLookup;

2
client/admin/authorUtils/authorUtils.jsx
View File

@@ -10,4 +10,4 @@ const authorUtils = ()=>{
); );
}; };
module.exports = authorUtils; export default authorUtils;

11
client/admin/brewUtils/brewCleanup/brewCleanup.jsx
View File

@@ -1,9 +1,8 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
import request from 'superagent';
const request = require('superagent'); const BrewCleanup = createReactClass({
const BrewCleanup = createClass({
displayName : 'BrewCleanup', displayName : 'BrewCleanup',
getDefaultProps(){ getDefaultProps(){
return {}; return {};
@@ -69,4 +68,4 @@ const BrewCleanup = createClass({
} }
}); });
module.exports = BrewCleanup; export default BrewCleanup;

10
client/admin/brewUtils/brewCompress/brewCompress.jsx
View File

@@ -1,8 +1,8 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const request = require('superagent'); import request from 'superagent';
const BrewCompress = createClass({ const BrewCompress = createReactClass({
displayName : 'BrewCompress', displayName : 'BrewCompress',
getDefaultProps(){ getDefaultProps(){
return {}; return {};
@@ -85,4 +85,4 @@ const BrewCompress = createClass({
} }
}); });
module.exports = BrewCompress; export default BrewCompress;

15
client/admin/brewUtils/brewLookup/brewLookup.jsx
View File

@@ -1,12 +1,11 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const cx = require('classnames'); import request from 'superagent';
import cx from 'classnames';
const request = require('superagent'); import Moment from 'moment';
const Moment = require('moment');
const BrewLookup = createReactClass({
const BrewLookup = createClass({
getDefaultProps() { getDefaultProps() {
return {}; return {};
}, },
@@ -110,4 +109,4 @@ const BrewLookup = createClass({
} }
}); });
module.exports = BrewLookup; export default BrewLookup;

28
client/admin/brewUtils/brewUtils.jsx
View File

@@ -1,15 +1,14 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import './brewUtils.less';
require('./brewUtils.less');
const BrewCleanup = require('./brewCleanup/brewCleanup.jsx'); import BrewCleanup from './brewCleanup/brewCleanup.jsx';
const BrewLookup = require('./brewLookup/brewLookup.jsx'); import BrewLookup from './brewLookup/brewLookup.jsx';
const BrewCompress = require ('./brewCompress/brewCompress.jsx'); import BrewCompress from './brewCompress/brewCompress.jsx';
const Stats = require('./stats/stats.jsx'); import Stats from './stats/stats.jsx';
const BrewUtils = createClass({ const BrewUtils = ()=>{
render : function(){ return (
return <> <>
<Stats /> <Stats />
<hr /> <hr />
<BrewLookup /> <BrewLookup />
@@ -17,8 +16,7 @@ const BrewUtils = createClass({
<BrewCleanup /> <BrewCleanup />
<hr /> <hr />
<BrewCompress /> <BrewCompress />
</>; </>
} );
}); };
export default BrewUtils;
module.exports = BrewUtils;

11
client/admin/brewUtils/stats/stats.jsx
View File

@@ -1,9 +1,8 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
import request from 'superagent';
const request = require('superagent'); const Stats = createReactClass({
const Stats = createClass({
displayName : 'Stats', displayName : 'Stats',
getDefaultProps(){ getDefaultProps(){
return {}; return {};
@@ -43,4 +42,4 @@ const Stats = createClass({
} }
}); });
module.exports = Stats; export default Stats;

16
client/admin/lockTools/lockTools.jsx
View File

@@ -1,11 +1,11 @@
/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
require('./lockTools.less'); import './lockTools.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
import request from '../../homebrew/utils/request-middleware.js'; import request from '../../homebrew/utils/request-middleware.js';
const LockTools = createClass({ const LockTools = createReactClass({
displayName : 'LockTools', displayName : 'LockTools',
getInitialState : function() { getInitialState : function() {
return { return {
@@ -55,7 +55,7 @@ const LockTools = createClass({
} }
}); });
const LockBrew = createClass({ const LockBrew = createReactClass({
displayName : 'LockBrew', displayName : 'LockBrew',
getInitialState : function() { getInitialState : function() {
// Default values // Default values
@@ -183,7 +183,7 @@ const LockBrew = createClass({
} }
}); });
const LockTable = createClass({ const LockTable = createReactClass({
displayName : 'LockTable', displayName : 'LockTable',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -273,7 +273,7 @@ const LockTable = createClass({
} }
}); });
const LockLookup = createClass({ const LockLookup = createReactClass({
displayName : 'LockLookup', displayName : 'LockLookup',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -339,4 +339,4 @@ const LockLookup = createClass({
} }
}); });
module.exports = LockTools; export default LockTools;

9
client/admin/notificationUtils/notificationAdd/notificationAdd.jsx
View File

@@ -1,7 +1,6 @@
require('./notificationAdd.less'); import './notificationAdd.less';
const React = require('react'); import React, { useState, useRef } from 'react';
const { useState, useRef } = require('react'); import request from 'superagent';
const request = require('superagent');
const NotificationAdd = ()=>{ const NotificationAdd = ()=>{
const [notificationResult, setNotificationResult] = useState(null); const [notificationResult, setNotificationResult] = useState(null);
@@ -106,4 +105,4 @@ const NotificationAdd = ()=>{
); );
}; };
module.exports = NotificationAdd; export default NotificationAdd;

12
client/admin/notificationUtils/notificationLookup/notificationLookup.jsx
View File

@@ -1,9 +1,7 @@
require('./notificationLookup.less'); import './notificationLookup.less';
import React, { useState } from 'react';
const React = require('react'); import request from 'superagent';
const { useState } = require('react'); import Moment from 'moment';
const request = require('superagent');
const Moment = require('moment');
const NotificationDetail = ({ notification, onDelete })=>( const NotificationDetail = ({ notification, onDelete })=>(
<> <>
@@ -102,4 +100,4 @@ const NotificationLookup = ()=>{
); );
}; };
module.exports = NotificationLookup; export default NotificationLookup;

9
client/admin/notificationUtils/notificationUtils.jsx
View File

@@ -1,7 +1,6 @@
const React = require('react'); import React from 'react';
import NotificationLookup from './notificationLookup/notificationLookup.jsx';
const NotificationLookup = require('./notificationLookup/notificationLookup.jsx'); import NotificationAdd from './notificationAdd/notificationAdd.jsx';
const NotificationAdd = require('./notificationAdd/notificationAdd.jsx');
const NotificationUtils = ()=>{ const NotificationUtils = ()=>{
return ( return (
@@ -12,4 +11,4 @@ const NotificationUtils = ()=>{
); );
}; };
module.exports = NotificationUtils; export default NotificationUtils;

2
client/components/codeEditor/autocompleteEmoji.js
View File

@@ -79,6 +79,6 @@ const showAutocompleteEmoji = function(CodeMirror, editor) {
}); });
}; };
module.exports = { export default {
showAutocompleteEmoji showAutocompleteEmoji
}; };

4
client/components/codeEditor/close-tag.js
View File

@@ -38,11 +38,11 @@ const autoCloseCurlyBraces = function(CodeMirror, cm, typingClosingBrace) {
} }
}; };
module.exports = { export default {
autoCloseCurlyBraces : function(CodeMirror, codeMirror) { autoCloseCurlyBraces : function(CodeMirror, codeMirror) {
const map = { name: 'autoCloseCurlyBraces' }; const map = { name: 'autoCloseCurlyBraces' };
map[`'{'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm); }; map[`'{'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm); };
map[`'}'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm, true); }; map[`'}'`] = function(cm) { return autoCloseCurlyBraces(CodeMirror, cm, true); };
codeMirror.addKeyMap(map); codeMirror?.addKeyMap(map);
} }
}; };

237
client/components/codeEditor/codeEditor.jsx
View File

@@ -1,51 +1,13 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
require('./codeEditor.less'); import './codeEditor.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
const closeTag = require('./close-tag'); import closeTag from './close-tag';
const autoCompleteEmoji = require('./autocompleteEmoji'); import autoCompleteEmoji from './autocompleteEmoji';
let CodeMirror; let CodeMirror;
if(typeof window !== 'undefined'){
CodeMirror = require('codemirror');
//Language Modes const CodeEditor = createReactClass({
require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
require('codemirror/mode/css/css.js');
require('codemirror/mode/javascript/javascript.js');
//Addons
//Code folding
require('codemirror/addon/fold/foldcode.js');
require('codemirror/addon/fold/foldgutter.js');
//Search and replace
require('codemirror/addon/search/search.js');
require('codemirror/addon/search/searchcursor.js');
require('codemirror/addon/search/jump-to-line.js');
require('codemirror/addon/search/match-highlighter.js');
require('codemirror/addon/search/matchesonscrollbar.js');
require('codemirror/addon/dialog/dialog.js');
//Trailing space highlighting
// require('codemirror/addon/edit/trailingspace.js');
//Active line highlighting
// require('codemirror/addon/selection/active-line.js');
//Scroll past last line
require('codemirror/addon/scroll/scrollpastend.js');
//Auto-closing
//XML code folding is a requirement of the auto-closing tag feature and is not enabled
require('codemirror/addon/fold/xml-fold.js');
require('codemirror/addon/edit/closetag.js');
//Autocompletion
require('codemirror/addon/hint/show-hint.js');
const foldPagesCode = require('./fold-pages');
foldPagesCode.registerHomebreweryHelper(CodeMirror);
const foldCSSCode = require('./fold-css');
foldCSSCode.registerHomebreweryHelper(CodeMirror);
}
const CodeEditor = createClass({
displayName : 'CodeEditor', displayName : 'CodeEditor',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -67,23 +29,54 @@ const CodeEditor = createClass({
editor : React.createRef(null), editor : React.createRef(null),
componentDidMount : function() { async componentDidMount() {
CodeMirror = (await import('codemirror')).default;
this.CodeMirror = CodeMirror;
await import('codemirror/mode/gfm/gfm.js');
await import('codemirror/mode/css/css.js');
await import('codemirror/mode/javascript/javascript.js');
// addons
await import('codemirror/addon/fold/foldcode.js');
await import('codemirror/addon/fold/foldgutter.js');
await import('codemirror/addon/fold/xml-fold.js');
await import('codemirror/addon/search/search.js');
await import('codemirror/addon/search/searchcursor.js');
await import('codemirror/addon/search/jump-to-line.js');
await import('codemirror/addon/search/match-highlighter.js');
await import('codemirror/addon/search/matchesonscrollbar.js');
await import('codemirror/addon/dialog/dialog.js');
await import('codemirror/addon/scroll/scrollpastend.js');
await import('codemirror/addon/edit/closetag.js');
await import('codemirror/addon/hint/show-hint.js');
// import 'codemirror/addon/selection/active-line.js';
// import 'codemirror/addon/edit/trailingspace.js';
// register helpers dynamically as well
const foldPagesCode = (await import('./fold-pages')).default;
const foldCSSCode = (await import('./fold-css')).default;
foldPagesCode.registerHomebreweryHelper(CodeMirror);
foldCSSCode.registerHomebreweryHelper(CodeMirror);
this.buildEditor(); this.buildEditor();
const newDoc = CodeMirror.Doc(this.props.value, this.props.language); const newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
this.codeMirror.swapDoc(newDoc); this.codeMirror?.swapDoc(newDoc);
}, },
componentDidUpdate : function(prevProps) { componentDidUpdate : function(prevProps) {
if(prevProps.view !== this.props.view){ //view changed; swap documents if(prevProps.view !== this.props.view){ //view changed; swap documents
let newDoc; let newDoc;
if(!this.state.docs[this.props.view]) { if(!this.state.docs[this.props.view]) {
newDoc = CodeMirror.Doc(this.props.value, this.props.language); newDoc = CodeMirror?.Doc(this.props.value, this.props.language);
} else { } else {
newDoc = this.state.docs[this.props.view]; newDoc = this.state.docs[this.props.view];
} }
const oldDoc = { [prevProps.view]: this.codeMirror.swapDoc(newDoc) }; const oldDoc = { [prevProps.view]: this.codeMirror?.swapDoc(newDoc) };
this.setState((prevState)=>({ this.setState((prevState)=>({
docs : _.merge({}, prevState.docs, oldDoc) docs : _.merge({}, prevState.docs, oldDoc)
@@ -91,17 +84,17 @@ const CodeEditor = createClass({
this.props.rerenderParent(); this.props.rerenderParent();
} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside } else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
this.codeMirror.setValue(this.props.value); this.codeMirror?.setValue(this.props.value);
} }
if(this.props.enableFolding) { if(this.props.enableFolding) {
this.codeMirror.setOption('foldOptions', this.foldOptions(this.codeMirror)); this.codeMirror?.setOption('foldOptions', this.foldOptions(this.codeMirror));
} else { } else {
this.codeMirror.setOption('foldOptions', false); this.codeMirror?.setOption('foldOptions', false);
} }
if(prevProps.editorTheme !== this.props.editorTheme){ if(prevProps.editorTheme !== this.props.editorTheme){
this.codeMirror.setOption('theme', this.props.editorTheme); this.codeMirror?.setOption('theme', this.props.editorTheme);
} }
}, },
@@ -189,12 +182,12 @@ const CodeEditor = createClass({
closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror); closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror); autoCompleteEmoji.showAutocompleteEmoji(CodeMirror, this.codeMirror);
// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works. // Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror?. Either one works.
this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());}); this.codeMirror?.on('change', (cm)=>{this.props.onChange(cm.getValue());});
this.updateSize(); this.updateSize();
}, },
// Use for GFM tabs that use common hotkeys // Use for GFM tabs that use common hot-keys
isGFM : function() { isGFM : function() {
if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true; if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true;
return false; return false;
@@ -220,94 +213,94 @@ const CodeEditor = createClass({
}, },
dedent : function () { dedent : function () {
this.codeMirror.execCommand('indentLess'); this.codeMirror?.execCommand('indentLess');
}, },
makeHeader : function (number) { makeHeader : function (number) {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(); const selection = this.codeMirror?.getSelection();
const header = Array(number).fill('#').join(''); const header = Array(number).fill('#').join('');
this.codeMirror.replaceSelection(`${header} ${selection}`, 'around'); this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
}, },
makeBold : function() { makeBold : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**'; const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
} }
}, },
makeItalic : function() { makeItalic : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
} }
}, },
makeSuper : function() { makeSuper : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(1, -1) : `^${selection}^`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
} }
}, },
makeSub : function() { makeSub : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
} }
}, },
makeNbsp : function() { makeNbsp : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
this.codeMirror.replaceSelection('&nbsp;', 'end'); this.codeMirror?.replaceSelection('&nbsp;', 'end');
}, },
makeSpace : function() { makeSpace : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(); const selection = this.codeMirror?.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){ if(t){
const percent = parseInt(selection.slice(8, -4)) + 10; const percent = parseInt(selection.slice(8, -4)) + 10;
this.codeMirror.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around'); this.codeMirror?.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
} else { } else {
this.codeMirror.replaceSelection(`{{width:10% }}`, 'around'); this.codeMirror?.replaceSelection(`{{width:10% }}`, 'around');
} }
}, },
removeSpace : function() { removeSpace : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(); const selection = this.codeMirror?.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}'; const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){ if(t){
const percent = parseInt(selection.slice(8, -4)) - 10; const percent = parseInt(selection.slice(8, -4)) - 10;
this.codeMirror.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around'); this.codeMirror?.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
} }
}, },
newColumn : function() { newColumn : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
this.codeMirror.replaceSelection('\n\\column\n\n', 'end'); this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
}, },
newPage : function() { newPage : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
this.codeMirror.replaceSelection('\n\\page\n\n', 'end'); this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
}, },
injectText : function(injectText, overwrite=true) { injectText : function(injectText, overwrite=true) {
@@ -322,30 +315,30 @@ const CodeEditor = createClass({
makeUnderline : function() { makeUnderline : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '<u>' && selection.slice(-4) === '</u>';
this.codeMirror.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `<u>${selection}</u>`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
} }
}, },
makeSpan : function() { makeSpan : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 2 }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - 2 });
} }
}, },
makeDiv : function() { makeDiv : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}'; const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around'); this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{\n${selection}\n}}`, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line - 1, ch: cursor.ch }); // set to -2? if wanting to enter classes etc. if so, get rid of first \n when replacing selection this.codeMirror?.setCursor({ line: cursor.line - 1, ch: cursor.ch }); // set to -2? if wanting to enter classes etc. if so, get rid of first \n when replacing selection
} }
}, },
@@ -353,7 +346,7 @@ const CodeEditor = createClass({
let regex; let regex;
let cursorPos; let cursorPos;
let newComment; let newComment;
const selection = this.codeMirror.getSelection(); const selection = this.codeMirror?.getSelection();
if(this.isGFM()){ if(this.isGFM()){
regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs; regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
cursorPos = 4; cursorPos = 4;
@@ -363,46 +356,46 @@ const CodeEditor = createClass({
cursorPos = 3; cursorPos = 3;
newComment = `/* ${selection} */`; newComment = `/* ${selection} */`;
} }
this.codeMirror.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around'); this.codeMirror?.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
if(selection.length === 0){ if(selection.length === 0){
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos }); this.codeMirror?.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
}; };
}, },
makeLink : function() { makeLink : function() {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const isLink = /^\[(.*)\]\((.*)\)$/; const isLink = /^\[(.*)\]\((.*)\)$/;
const selection = this.codeMirror.getSelection().trim(); const selection = this.codeMirror?.getSelection().trim();
let match; let match;
if(match = isLink.exec(selection)){ if(match = isLink.exec(selection)){
const altText = match[1]; const altText = match[1];
const url = match[2]; const url = match[2];
this.codeMirror.replaceSelection(`${altText} ${url}`); this.codeMirror?.replaceSelection(`${altText} ${url}`);
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch }); this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
} else { } else {
this.codeMirror.replaceSelection(`[${selection || 'alt text'}](url)`); this.codeMirror?.replaceSelection(`[${selection || 'alt text'}](url)`);
const cursor = this.codeMirror.getCursor(); const cursor = this.codeMirror?.getCursor();
this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 }); this.codeMirror?.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
} }
}, },
makeList : function(listType) { makeList : function(listType) {
if(!this.isGFM()) return; if(!this.isGFM()) return;
const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to'); const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
this.codeMirror.setSelection( this.codeMirror?.setSelection(
{ line: selectionStart.line, ch: 0 }, { line: selectionStart.line, ch: 0 },
{ line: selectionEnd.line, ch: this.codeMirror.getLine(selectionEnd.line).length } { line: selectionEnd.line, ch: this.codeMirror?.getLine(selectionEnd.line).length }
); );
const newSelection = this.codeMirror.getSelection(); const newSelection = this.codeMirror?.getSelection();
const regex = /^\d+\.\s|^-\s/gm; const regex = /^\d+\.\s|^-\s/gm;
if(newSelection.match(regex) != null){ // if selection IS A LIST if(newSelection.match(regex) != null){ // if selection IS A LIST
this.codeMirror.replaceSelection(newSelection.replace(regex, ''), 'around'); this.codeMirror?.replaceSelection(newSelection.replace(regex, ''), 'around');
} else { // if selection IS NOT A LIST } else { // if selection IS NOT A LIST
listType == 'UL' ? this.codeMirror.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') : listType == 'UL' ? this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
this.codeMirror.replaceSelection(newSelection.replace(/^/gm, (()=>{ this.codeMirror?.replaceSelection(newSelection.replace(/^/gm, (()=>{
let n = 1; let n = 1;
return ()=>{ return ()=>{
return `${n++}. `; return `${n++}. `;
@@ -412,39 +405,39 @@ const CodeEditor = createClass({
}, },
foldAllCode : function() { foldAllCode : function() {
this.codeMirror.execCommand('foldAll'); this.codeMirror?.execCommand('foldAll');
}, },
unfoldAllCode : function() { unfoldAllCode : function() {
this.codeMirror.execCommand('unfoldAll'); this.codeMirror?.execCommand('unfoldAll');
}, },
//=-- Externally used -==// //=-- Externally used -==//
setCursorPosition : function(line, char){ setCursorPosition : function(line, char){
setTimeout(()=>{ setTimeout(()=>{
this.codeMirror.focus(); this.codeMirror?.focus();
this.codeMirror.doc.setCursor(line, char); this.codeMirror?.doc.setCursor(line, char);
}, 10); }, 10);
}, },
getCursorPosition : function(){ getCursorPosition : function(){
return this.codeMirror.getCursor(); return this.codeMirror?.getCursor();
}, },
getTopVisibleLine : function(){ getTopVisibleLine : function(){
const rect = this.codeMirror.getWrapperElement().getBoundingClientRect(); const rect = this.codeMirror?.getWrapperElement().getBoundingClientRect();
const topVisibleLine = this.codeMirror.lineAtHeight(rect.top, 'window'); const topVisibleLine = this.codeMirror?.lineAtHeight(rect.top, 'window');
return topVisibleLine; return topVisibleLine;
}, },
updateSize : function(){ updateSize : function(){
this.codeMirror.refresh(); this.codeMirror?.refresh();
}, },
redo : function(){ redo : function(){
return this.codeMirror.redo(); return this.codeMirror?.redo();
}, },
undo : function(){ undo : function(){
return this.codeMirror.undo(); return this.codeMirror?.undo();
}, },
historySize : function(){ historySize : function(){
return this.codeMirror.doc.historySize(); return this.codeMirror?.doc.historySize();
}, },
foldOptions : function(cm){ foldOptions : function(cm){
@@ -458,7 +451,7 @@ const CodeEditor = createClass({
let foldPreviewText = ''; let foldPreviewText = '';
while (currentLine <= to.line && text.length <= maxLength) { while (currentLine <= to.line && text.length <= maxLength) {
const currentText = this.codeMirror.getLine(currentLine); const currentText = this.codeMirror?.getLine(currentLine);
currentLine++; currentLine++;
if(currentText[0] == '#'){ if(currentText[0] == '#'){
foldPreviewText = currentText; foldPreviewText = currentText;
@@ -493,5 +486,5 @@ const CodeEditor = createClass({
} }
}); });
module.exports = CodeEditor; export default CodeEditor;

2
client/components/codeEditor/fold-css.js
View File

@@ -1,4 +1,4 @@
module.exports = { export default {
registerHomebreweryHelper : function(CodeMirror) { registerHomebreweryHelper : function(CodeMirror) {
CodeMirror.registerHelper('fold', 'homebrewerycss', function(cm, start) { CodeMirror.registerHelper('fold', 'homebrewerycss', function(cm, start) {

2
client/components/codeEditor/fold-pages.js
View File

@@ -1,4 +1,4 @@
module.exports = { export default {
registerHomebreweryHelper : function(CodeMirror) { registerHomebreweryHelper : function(CodeMirror) {
CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) { CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
const matcher = /^\\page.*/; const matcher = /^\\page.*/;

20
client/components/combobox.jsx
View File

@@ -1,9 +1,9 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
require('./combobox.less'); import './combobox.less';
const Combobox = createClass({ const Combobox = createReactClass({
displayName : 'Combobox', displayName : 'Combobox',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -16,6 +16,7 @@ const Combobox = createClass({
suggestMethod : 'includes', suggestMethod : 'includes',
filterOn : [] // should allow as array to filter on multiple attributes, or even custom filter filterOn : [] // should allow as array to filter on multiple attributes, or even custom filter
}, },
valuePatterns: /.+/
}; };
}, },
getInitialState : function() { getInitialState : function() {
@@ -74,6 +75,7 @@ const Combobox = createClass({
type='text' type='text'
onChange={(e)=>this.handleInput(e)} onChange={(e)=>this.handleInput(e)}
value={this.state.value || ''} value={this.state.value || ''}
pattern={this.props.valuePatterns}
placeholder={this.props.placeholder} placeholder={this.props.placeholder}
onBlur={(e)=>{ onBlur={(e)=>{
if(!e.target.checkValidity()){ if(!e.target.checkValidity()){
@@ -82,6 +84,12 @@ const Combobox = createClass({
}); });
} }
}} }}
onKeyDown={(e)=>{
if (e.key === "Enter") {
e.preventDefault();
this.props.onEntry(e);
}
}}
/> />
<i className='fas fa-caret-down'/> <i className='fas fa-caret-down'/>
</div> </div>
@@ -126,4 +134,4 @@ const Combobox = createClass({
} }
}); });
module.exports = Combobox; export default Combobox;

12
client/components/renderWarnings/renderWarnings.jsx
View File

@@ -1,11 +1,11 @@
require('./renderWarnings.less'); import './renderWarnings.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
import Dialog from '../dialog.jsx'; import Dialog from '../dialog.jsx';
const RenderWarnings = createClass({ const RenderWarnings = createReactClass({
displayName : 'RenderWarnings', displayName : 'RenderWarnings',
getInitialState : function() { getInitialState : function() {
return { return {
@@ -57,4 +57,4 @@ const RenderWarnings = createClass({
} }
}); });
module.exports = RenderWarnings; export default RenderWarnings;

7
client/components/splitPane/splitPane.jsx
View File

@@ -1,6 +1,5 @@
require('./splitPane.less'); import './splitPane.less';
const React = require('react'); import React, { useEffect, useState } from 'react';
const { useState, useEffect } = React;
const PANE_WIDTH_KEY = 'HB_editor_splitWidth'; const PANE_WIDTH_KEY = 'HB_editor_splitWidth';
const LIVE_SCROLL_KEY = 'HB_editor_liveScroll'; const LIVE_SCROLL_KEY = 'HB_editor_liveScroll';
@@ -108,4 +107,4 @@ const Pane = ({ width, children, isDragging, moveBrew, moveSource, liveScroll, s
); );
}; };
module.exports = SplitPane; export default SplitPane;

5
client/components/svg/cauldron.svg.jsx
View File

@@ -1,7 +1,6 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class');
module.exports = function(props){ export default function(props){
return <svg version='1.1' x='0px' y='0px' viewBox='0 0 90 112.5' enableBackground='new 0 0 90 90' > return <svg version='1.1' x='0px' y='0px' viewBox='0 0 90 112.5' enableBackground='new 0 0 90 90' >
<path d='M25.363,25.54c0,1.906,8.793,3.454,19.636,3.454c10.848,0,19.638-1.547,19.638-3.454c0-1.12-3.056-2.117-7.774-2.75 c-1.418,1.891-3.659,3.133-6.208,3.133c-2.85,0-5.315-1.547-6.67-3.833C33.617,22.185,25.363,23.692,25.363,25.54z'/><path d='M84.075,54.142c0-8.68-2.868-17.005-8.144-23.829c1.106-1.399,1.41-2.771,1.41-3.854c0-6.574-10.245-9.358-19.264-10.533 c0.209,0.706,0.359,1.439,0.359,2.215c0,0.09-0.022,0.17-0.028,0.26l0,0c-0.028,0.853-0.195,1.667-0.479,2.429 c9.106,1.282,14.508,3.754,14.508,5.63c0,2.644-10.688,6.486-27.439,6.486c-16.748,0-27.438-3.842-27.438-6.486 c0-2.542,9.904-6.183,25.559-6.459c-0.098-0.396-0.159-0.807-0.2-1.223c0.006,0,0.013,0,0.017,0 c-0.017-0.213-0.063-0.417-0.063-0.636c0-1.084,0.226-2.119,0.628-3.058c-6.788,0.129-30.846,1.299-30.846,11.376 c0,1.083,0.305,2.455,1.411,3.854c-5.276,6.823-8.145,15.149-8.145,23.829c0,11.548,5.187,20.107,14.693,25.115 c-0.902,3.146-1.391,7.056,1.111,8.181c2.626,1.178,5.364-2.139,7.111-5.005c4.73,1.261,10.13,1.923,16.161,1.923 c6.034,0,11.428-0.661,16.158-1.922c1.75,2.865,4.493,6.18,7.112,5.004c2.504-1.123,2.014-5.035,1.113-8.179 C78.889,74.249,84.075,65.689,84.075,54.142z M70.39,31.392c5.43,6.046,8.78,14,8.78,22.75c0,20.919-18.582,25.309-34.171,25.309 c-15.587,0-34.17-4.39-34.17-25.309c0-8.75,3.35-16.7,8.781-22.753c5.561,2.643,15.502,4.009,25.389,4.009 C54.886,35.397,64.829,34.031,70.39,31.392z'/><path d='M50.654,23.374c2.892,0,5.234-2.341,5.234-5.233c0-2.887-2.343-5.23-5.234-5.23c-2.887,0-5.231,2.343-5.231,5.23 C45.423,21.032,47.768,23.374,50.654,23.374z'/> <path d='M25.363,25.54c0,1.906,8.793,3.454,19.636,3.454c10.848,0,19.638-1.547,19.638-3.454c0-1.12-3.056-2.117-7.774-2.75 c-1.418,1.891-3.659,3.133-6.208,3.133c-2.85,0-5.315-1.547-6.67-3.833C33.617,22.185,25.363,23.692,25.363,25.54z'/><path d='M84.075,54.142c0-8.68-2.868-17.005-8.144-23.829c1.106-1.399,1.41-2.771,1.41-3.854c0-6.574-10.245-9.358-19.264-10.533 c0.209,0.706,0.359,1.439,0.359,2.215c0,0.09-0.022,0.17-0.028,0.26l0,0c-0.028,0.853-0.195,1.667-0.479,2.429 c9.106,1.282,14.508,3.754,14.508,5.63c0,2.644-10.688,6.486-27.439,6.486c-16.748,0-27.438-3.842-27.438-6.486 c0-2.542,9.904-6.183,25.559-6.459c-0.098-0.396-0.159-0.807-0.2-1.223c0.006,0,0.013,0,0.017,0 c-0.017-0.213-0.063-0.417-0.063-0.636c0-1.084,0.226-2.119,0.628-3.058c-6.788,0.129-30.846,1.299-30.846,11.376 c0,1.083,0.305,2.455,1.411,3.854c-5.276,6.823-8.145,15.149-8.145,23.829c0,11.548,5.187,20.107,14.693,25.115 c-0.902,3.146-1.391,7.056,1.111,8.181c2.626,1.178,5.364-2.139,7.111-5.005c4.73,1.261,10.13,1.923,16.161,1.923 c6.034,0,11.428-0.661,16.158-1.922c1.75,2.865,4.493,6.18,7.112,5.004c2.504-1.123,2.014-5.035,1.113-8.179 C78.889,74.249,84.075,65.689,84.075,54.142z M70.39,31.392c5.43,6.046,8.78,14,8.78,22.75c0,20.919-18.582,25.309-34.171,25.309 c-15.587,0-34.17-4.39-34.17-25.309c0-8.75,3.35-16.7,8.781-22.753c5.561,2.643,15.502,4.009,25.389,4.009 C54.886,35.397,64.829,34.031,70.39,31.392z'/><path d='M50.654,23.374c2.892,0,5.234-2.341,5.234-5.233c0-2.887-2.343-5.23-5.234-5.23c-2.887,0-5.231,2.343-5.231,5.23 C45.423,21.032,47.768,23.374,50.654,23.374z'/>
<circle cx='62.905' cy='10.089' r='3.595'/> <circle cx='62.905' cy='10.089' r='3.595'/>

5
client/components/svg/naturalcrit-d20.svg.jsx
View File

@@ -1,6 +1,5 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class');
module.exports = function(props){ export default function(props){
return <svg version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'><path d='M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116 c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262 c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358 c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976 c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0 s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083 c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113 c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223 c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562 c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223 C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004 c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002 l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008 c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082 c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076 c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043 c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303 c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035 c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017 c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048 c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026 c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202 L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75 L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645 z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649 l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393 l-38.263,6.959L46.631,69.09z'></path></svg>; return <svg version='1.1' x='0px' y='0px' viewBox='0 0 100 100' enableBackground='new 0 0 100 100'><path d='M80.644,87.982l16.592-41.483c0.054-0.128,0.088-0.26,0.108-0.394c0.006-0.039,0.007-0.077,0.011-0.116 c0.007-0.087,0.008-0.174,0.002-0.26c-0.003-0.046-0.007-0.091-0.014-0.137c-0.014-0.089-0.036-0.176-0.063-0.262 c-0.012-0.034-0.019-0.069-0.031-0.103c-0.047-0.118-0.106-0.229-0.178-0.335c-0.004-0.006-0.006-0.012-0.01-0.018L67.999,3.358 c-0.01-0.013-0.003-0.026-0.013-0.04L68,3.315V4c0,0-0.033,0-0.037,0c-0.403-1-1.094-1.124-1.752-0.976 c0,0.004-0.004-0.012-0.007-0.012C66.201,3.016,66.194,3,66.194,3H66.19h-0.003h-0.003h-0.004h-0.003c0,0-0.004,0-0.007,0 s-0.003-0.151-0.007-0.151L20.495,15.227c-0.025,0.007-0.046-0.019-0.071-0.011c-0.087,0.028-0.172,0.041-0.253,0.083 c-0.054,0.027-0.102,0.053-0.152,0.085c-0.051,0.033-0.101,0.061-0.147,0.099c-0.044,0.036-0.084,0.073-0.124,0.113 c-0.048,0.048-0.093,0.098-0.136,0.152c-0.03,0.039-0.059,0.076-0.085,0.117c-0.046,0.07-0.084,0.145-0.12,0.223 c-0.011,0.023-0.027,0.042-0.036,0.066L2.911,57.664C2.891,57.715,3,57.768,3,57.82v0.002c0,0.186,0,0.375,0,0.562 c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004v0.002c0,0.074-0.002,0.15,0.012,0.223 C3.015,58.631,3,58.631,3,58.633c0,0.004,0,0.004,0,0.008c0,0,0,0,0,0.002c0,0,0,0,0,0.004v0.004c0,0,0,0,0,0.002v0.004 c0,0.191-0.046,0.377,0.06,0.545c0-0.002-0.03,0.004-0.03,0.004c0,0.004-0.03,0.004-0.03,0.004c0,0.002,0,0.002,0,0.002 l-0.045,0.004c0.03,0.047,0.036,0.09,0.068,0.133l29.049,37.359c0.002,0.004,0,0.006,0.002,0.01c0.002,0.002,0,0.004,0.002,0.008 c0.006,0.008,0.014,0.014,0.021,0.021c0.024,0.029,0.052,0.051,0.078,0.078c0.027,0.029,0.053,0.057,0.082,0.082 c0.03,0.027,0.055,0.062,0.086,0.088c0.026,0.02,0.057,0.033,0.084,0.053c0.04,0.027,0.081,0.053,0.123,0.076 c0.005,0.004,0.01,0.008,0.016,0.01c0.087,0.051,0.176,0.09,0.269,0.123c0.042,0.014,0.082,0.031,0.125,0.043 c0.021,0.006,0.041,0.018,0.062,0.021c0.123,0.027,0.249,0.043,0.375,0.043c0.099,0,0.202-0.012,0.304-0.027l45.669-8.303 c0.057-0.01,0.108-0.021,0.163-0.037C79.547,88.992,79.562,89,79.575,89c0.004,0,0.004,0,0.004,0c0.021,0,0.039-0.027,0.06-0.035 c0.041-0.014,0.08-0.034,0.12-0.052c0.021-0.01,0.044-0.019,0.064-0.03c0.017-0.01,0.026-0.015,0.033-0.017 c0.014-0.008,0.023-0.021,0.037-0.028c0.14-0.078,0.269-0.174,0.38-0.285c0.014-0.016,0.024-0.034,0.038-0.048 c0.109-0.119,0.201-0.252,0.271-0.398c0.006-0.01,0.016-0.018,0.021-0.029c0.004-0.008,0.008-0.017,0.011-0.026 c0.002-0.004,0.003-0.006,0.005-0.01C80.627,88.021,80.635,88.002,80.644,87.982z M77.611,84.461L48.805,66.453l32.407-25.202 L77.611,84.461z M46.817,63.709L35.863,23.542l43.818,14.608L46.817,63.709z M84.668,40.542l8.926,5.952l-11.902,29.75 L84.668,40.542z M89.128,39.446L84.53,36.38l-6.129-12.257L89.128,39.446z M79.876,34.645L37.807,20.622L65.854,6.599L79.876,34.645 z M33.268,19.107l-6.485-2.162l23.781-6.487L33.268,19.107z M21.92,18.895l8.67,2.891L10.357,47.798L21.92,18.895z M32.652,24.649 l10.845,39.757L7.351,57.178L32.652,24.649z M43.472,67.857L32.969,92.363L8.462,60.855L43.472,67.857z M46.631,69.09l27.826,17.393 l-38.263,6.959L46.631,69.09z'></path></svg>;
}; };

27
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -1,20 +1,19 @@
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
require('./brewRenderer.less'); import './brewRenderer.less';
const React = require('react'); import React, { useState, useRef, useMemo, useEffect } from 'react';
const { useState, useRef, useMemo, useEffect } = React; import _ from 'lodash';
const _ = require('lodash');
const MarkdownLegacy = require('markdownLegacy.js'); import MarkdownLegacy from '../../../shared/markdownLegacy.js';
import Markdown from 'markdown.js'; import Markdown from '../../../shared/markdown.js';
const ErrorBar = require('./errorBar/errorBar.jsx'); import ErrorBar from './errorBar/errorBar.jsx';
const ToolBar = require('./toolBar/toolBar.jsx'); import ToolBar from './toolBar/toolBar.jsx';
//TODO: move to the brew renderer //TODO: move to the brew renderer
const RenderWarnings = require('client/components/renderWarnings/renderWarnings.jsx'); import RenderWarnings from '../../components/renderWarnings/renderWarnings.jsx';
const NotificationPopup = require('./notificationPopup/notificationPopup.jsx'); import NotificationPopup from './notificationPopup/notificationPopup.jsx';
const Frame = require('react-frame-component').default; import Frame from 'react-frame-component';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const { printCurrentBrew } = require('../../../shared/helpers.js'); import { printCurrentBrew } from '../../../shared/helpers.js';
import HeaderNav from './headerNav/headerNav.jsx'; import HeaderNav from './headerNav/headerNav.jsx';
import { safeHTML } from './safeHTML.js'; import { safeHTML } from './safeHTML.js';
@@ -345,4 +344,4 @@ const BrewRenderer = (props)=>{
); );
}; };
module.exports = BrewRenderer; export default BrewRenderer;

9
client/homebrew/brewRenderer/brewRenderer.less
View File

@@ -59,6 +59,12 @@
} }
&-corner { visibility : hidden; } &-corner { visibility : hidden; }
} }
@supports (break-after:always) {
.columnSplit {
margin-bottom: 100vh;
}
}
} }
.pane { position : relative; } .pane { position : relative; }
@@ -81,4 +87,5 @@
} }
} }
.headerNav { visibility : hidden; } .headerNav { visibility : hidden; }
}
}

6
client/homebrew/brewRenderer/errorBar/errorBar.jsx
View File

@@ -1,5 +1,5 @@
require('./errorBar.less'); import './errorBar.less';
const React = require('react'); import React from 'react';
import Dialog from '../../../components/dialog.jsx'; import Dialog from '../../../components/dialog.jsx';
@@ -50,4 +50,4 @@ const ErrorBar = (props)=>{
); );
}; };
module.exports = ErrorBar; export default ErrorBar;

6
client/homebrew/brewRenderer/headerNav/headerNav.jsx
View File

@@ -1,7 +1,7 @@
require('./headerNav.less'); import './headerNav.less';
import * as React from 'react'; import React from 'react';
import * as _ from 'lodash'; import _ from 'lodash';
const MAX_TEXT_LENGTH = 40; const MAX_TEXT_LENGTH = 40;

4
client/homebrew/brewRenderer/notificationPopup/notificationPopup.jsx
View File

@@ -1,4 +1,4 @@
require('./notificationPopup.less'); import './notificationPopup.less';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
import Markdown from 'markdown.js'; import Markdown from 'markdown.js';
@@ -62,4 +62,4 @@ const NotificationPopup = ()=>{
</Dialog>; </Dialog>;
}; };
module.exports = NotificationPopup; export default NotificationPopup;

9
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -1,8 +1,7 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
require('./toolBar.less'); import './toolBar.less';
const React = require('react'); import React, { useState, useEffect } from 'react';
const { useState, useEffect } = React; import _ from 'lodash';
const _ = require('lodash');
import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx'; import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
@@ -259,4 +258,4 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
); );
}; };
module.exports = ToolBar; export default ToolBar;

98
client/homebrew/editor/editor.jsx
View File

@@ -1,14 +1,14 @@
/*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 500, "skipBlankLines": true, "skipComments": true}]*/
require('./editor.less'); import './editor.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
import Markdown from '../../../shared/markdown.js'; import Markdown from '../../../shared/markdown.js';
const CodeEditor = require('client/components/codeEditor/codeEditor.jsx'); import CodeEditor from '../../components/codeEditor/codeEditor.jsx';
const SnippetBar = require('./snippetbar/snippetbar.jsx'); import SnippetBar from './snippetbar/snippetbar.jsx';
const MetadataEditor = require('./metadataEditor/metadataEditor.jsx'); import MetadataEditor from './metadataEditor/metadataEditor.jsx';
const EDITOR_THEME_KEY = 'HB_editor_theme'; const EDITOR_THEME_KEY = 'HB_editor_theme';
@@ -31,7 +31,7 @@ const DEFAULT_SNIPPET_TEXT = dedent`
`; `;
let isJumping = false; let isJumping = false;
const Editor = createClass({ const Editor = createReactClass({
displayName : 'Editor', displayName : 'Editor',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -76,8 +76,8 @@ const Editor = createClass({
document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys); document.getElementById('BrewRenderer').addEventListener('keydown', this.handleControlKeys);
document.addEventListener('keydown', this.handleControlKeys); document.addEventListener('keydown', this.handleControlKeys);
this.codeEditor.current.codeMirror.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());}); this.codeEditor.current.codeMirror?.on('cursorActivity', (cm)=>{this.updateCurrentCursorPage(cm.getCursor());});
this.codeEditor.current.codeMirror.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200)); this.codeEditor.current.codeMirror?.on('scroll', _.throttle(()=>{this.updateCurrentViewPage(this.codeEditor.current.getTopVisibleLine());}, 200));
const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY); const editorTheme = window.localStorage.getItem(EDITOR_THEME_KEY);
if(editorTheme) { if(editorTheme) {
@@ -86,9 +86,9 @@ const Editor = createClass({
}); });
} }
const snippetBar = document.querySelector('.editor > .snippetBar'); const snippetBar = document.querySelector('.editor > .snippetBar');
if (!snippetBar) return; if(!snippetBar) return;
this.resizeObserver = new ResizeObserver(entries => { this.resizeObserver = new ResizeObserver(entries=>{
const height = document.querySelector('.editor > .snippetBar').offsetHeight; const height = document.querySelector('.editor > .snippetBar').offsetHeight;
this.setState({ snippetBarHeight: height }); this.setState({ snippetBarHeight: height });
}); });
@@ -117,7 +117,7 @@ const Editor = createClass({
}, },
componentWillUnmount() { componentWillUnmount() {
if (this.resizeObserver) this.resizeObserver.disconnect(); if(this.resizeObserver) this.resizeObserver.disconnect();
}, },
handleControlKeys : function(e){ handleControlKeys : function(e){
@@ -156,21 +156,21 @@ const Editor = createClass({
this.setState({ this.setState({
view : newView view : newView
}, ()=>{ }, ()=>{
this.codeEditor.current?.codeMirror.focus(); this.codeEditor.current?.codeMirror?.focus();
}); });
}, },
highlightCustomMarkdown : function(){ highlightCustomMarkdown : function(){
if(!this.codeEditor.current) return; if(!this.codeEditor.current?.codeMirror) return;
if((this.state.view === 'text') ||(this.state.view === 'snippet')) { if((this.state.view === 'text') ||(this.state.view === 'snippet')) {
const codeMirror = this.codeEditor.current.codeMirror; const codeMirror = this.codeEditor.current.codeMirror;
codeMirror.operation(()=>{ // Batch CodeMirror styling codeMirror?.operation(()=>{ // Batch CodeMirror styling
const foldLines = []; const foldLines = [];
//reset custom text styles //reset custom text styles
const customHighlights = codeMirror.getAllMarks().filter((mark)=>{ const customHighlights = codeMirror?.getAllMarks().filter((mark)=>{
// Record details of folded sections // Record details of folded sections
if(mark.__isFold) { if(mark.__isFold) {
const fold = mark.find(); const fold = mark.find();
@@ -191,10 +191,10 @@ const Editor = createClass({
const textOrSnip = this.state.view === 'text'; const textOrSnip = this.state.view === 'text';
//reset custom line styles //reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background', 'pageLine'); codeMirror?.removeLineClass(lineNumber, 'background', 'pageLine');
codeMirror.removeLineClass(lineNumber, 'background', 'snippetLine'); codeMirror?.removeLineClass(lineNumber, 'background', 'snippetLine');
codeMirror.removeLineClass(lineNumber, 'text'); codeMirror?.removeLineClass(lineNumber, 'text');
codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash'); codeMirror?.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
// Don't process lines inside folded text // Don't process lines inside folded text
// If the current lineNumber is inside any folded marks, skip line styling // If the current lineNumber is inside any folded marks, skip line styling
@@ -210,19 +210,19 @@ const Editor = createClass({
else if(this.state.view !== 'text') userSnippetCount += 1; else if(this.state.view !== 'text') userSnippetCount += 1;
// add back the original class 'background' but also add the new class '.pageline' // add back the original class 'background' but also add the new class '.pageline'
codeMirror.addLineClass(lineNumber, 'background', tabHighlight); codeMirror?.addLineClass(lineNumber, 'background', tabHighlight);
const pageCountElement = Object.assign(document.createElement('span'), { const pageCountElement = Object.assign(document.createElement('span'), {
className : 'editor-page-count', className : 'editor-page-count',
textContent : textOrSnip ? editorPageCount : userSnippetCount textContent : textOrSnip ? editorPageCount : userSnippetCount
}); });
codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); codeMirror?.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
}; };
// New Codemirror styling for V3 renderer // New CodeMirror styling for V3 renderer
if(this.props.renderer === 'V3') { if(this.props.renderer === 'V3') {
if(line.match(/^\\column(?:break)?$/)){ if(line.match(/^\\column(?:break)?$/)){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit'); codeMirror?.addLineClass(lineNumber, 'text', 'columnSplit');
} }
// definition lists // definition lists
@@ -231,14 +231,14 @@ const Editor = createClass({
const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd; // the `d` flag, for match indices, throws an ESLint error. const regex = /^([^\n]*?:?\s?)(::[^\n]*)(?:\n|$)/ymd; // the `d` flag, for match indices, throws an ESLint error.
let match; let match;
while ((match = regex.exec(line)) != null){ while ((match = regex.exec(line)) != null){
codeMirror.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' }); codeMirror?.markText({ line: lineNumber, ch: match.indices[0][0] }, { line: lineNumber, ch: match.indices[0][1] }, { className: 'dl-highlight' });
codeMirror.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' }); codeMirror?.markText({ line: lineNumber, ch: match.indices[1][0] }, { line: lineNumber, ch: match.indices[1][1] }, { className: 'dt-highlight' });
codeMirror.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' }); codeMirror?.markText({ line: lineNumber, ch: match.indices[2][0] }, { line: lineNumber, ch: match.indices[2][1] }, { className: 'dd-highlight' });
const ddIndex = match.indices[2][0]; const ddIndex = match.indices[2][0];
const colons = /::/g; const colons = /::/g;
const colonMatches = colons.exec(match[2]); const colonMatches = colons.exec(match[2]);
if(colonMatches !== null){ if(colonMatches !== null){
codeMirror.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' }); codeMirror?.markText({ line: lineNumber, ch: colonMatches.index + ddIndex }, { line: lineNumber, ch: colonMatches.index + colonMatches[0].length + ddIndex }, { className: 'dl-colon-highlight' });
} }
} }
} }
@@ -255,7 +255,7 @@ const Editor = createClass({
const match = subRegex.exec(line) || superRegex.exec(line); const match = subRegex.exec(line) || superRegex.exec(line);
if(match) { if(match) {
isSuper = !subRegex.lastIndex; isSuper = !subRegex.lastIndex;
codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' }); codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: isSuper ? 'superscript' : 'subscript' });
} }
startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex)); startIndex = line.indexOf('^', Math.max(startIndex + 1, subRegex.lastIndex, superRegex.lastIndex));
} }
@@ -266,7 +266,7 @@ const Editor = createClass({
const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm; const regex = /(?:^|[^{\n])({(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\2})/gm;
let match; let match;
while ((match = regex.exec(line)) != null) { while ((match = regex.exec(line)) != null) {
codeMirror.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' }); codeMirror?.markText({ line: lineNumber, ch: line.indexOf(match[1]) }, { line: lineNumber, ch: line.indexOf(match[1]) + match[1].length }, { className: 'injection' });
} }
} }
// Highlight inline spans {{content}} // Highlight inline spans {{content}}
@@ -284,7 +284,7 @@ const Editor = createClass({
blockCount = 0; blockCount = 0;
continue; continue;
} }
codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' }); codeMirror?.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
} }
} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){ } else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
// Highlight block divs {{\n Content \n}} // Highlight block divs {{\n Content \n}}
@@ -293,7 +293,7 @@ const Editor = createClass({
const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/); const match = line.match(/^ *{{(?=((?:[:=](?:"[\w,\-()#%. ]*"|[\w\-()#%.]*)|[^"':={}\s]*)*))\1 *$|^ *}}$/);
if(match) if(match)
endCh = match.index+match[0].length; endCh = match.index+match[0].length;
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' }); codeMirror?.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
} }
// Emojis // Emojis
@@ -314,11 +314,11 @@ const Editor = createClass({
const endPos = { line: lineNumber, ch: match.index + match[0].length }; const endPos = { line: lineNumber, ch: match.index + match[0].length };
// Iterate over conflicting marks and clear them // Iterate over conflicting marks and clear them
const marks = codeMirror.findMarks(startPos, endPos); const marks = codeMirror?.findMarks(startPos, endPos);
marks.forEach(function(marker) { marks.forEach(function(marker) {
if(!marker.__isFold) marker.clear(); if(!marker.__isFold) marker.clear();
}); });
codeMirror.markText(startPos, endPos, { className: 'emoji' }); codeMirror?.markText(startPos, endPos, { className: 'emoji' });
} }
startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex)); startIndex = line.indexOf(':', Math.max(startIndex + 1, emojiRegex.lastIndex));
} }
@@ -337,7 +337,7 @@ const Editor = createClass({
const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0]; const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
const currentPos = brewRenderer.scrollTop; const currentPos = brewRenderer.scrollTop;
const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top; const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
let scrollingTimeout; let scrollingTimeout;
const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
@@ -378,44 +378,46 @@ const Editor = createClass({
const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit); const textString = this.props.brew.text.split(textSplit).slice(0, targetPage-1).join(textSplit);
const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1; const targetLine = textString.match('\n') ? textString.split('\n').length - 1 : -1;
let currentY = this.codeEditor.current.codeMirror.getScrollInfo().top; let currentY = this.codeEditor.current.codeMirror?.getScrollInfo().top;
let targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); let targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
let scrollingTimeout; let scrollingTimeout;
const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
scrollingTimeout = setTimeout(()=>{ scrollingTimeout = setTimeout(()=>{
isJumping = false; isJumping = false;
this.codeEditor.current.codeMirror.off('scroll', checkIfScrollComplete); this.codeEditor.current.codeMirror?.off('scroll', checkIfScrollComplete);
}, 150); // If 150 ms pass without a scroll event, assume scrolling is done }, 150); // If 150 ms pass without a scroll event, assume scrolling is done
}; };
isJumping = true; isJumping = true;
checkIfScrollComplete(); checkIfScrollComplete();
this.codeEditor.current.codeMirror.on('scroll', checkIfScrollComplete); if(this.codeEditor.current?.codeMirror) {
this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
}
if(smooth) { if(smooth) {
//Scroll 1/10 of the way every 10ms until 1px off. //Scroll 1/10 of the way every 10ms until 1px off.
const incrementalScroll = setInterval(()=>{ const incrementalScroll = setInterval(()=>{
currentY += (targetY - currentY) / 10; currentY += (targetY - currentY) / 10;
this.codeEditor.current.codeMirror.scrollTo(null, currentY); this.codeEditor.current.codeMirror?.scrollTo(null, currentY);
// Update target: target height is not accurate until within +-10 lines of the visible window // Update target: target height is not accurate until within +-10 lines of the visible window
if(Math.abs(targetY - currentY > 100)) if(Math.abs(targetY - currentY > 100))
targetY = this.codeEditor.current.codeMirror.heightAtLine(targetLine, 'local', true); targetY = this.codeEditor.current.codeMirror?.heightAtLine(targetLine, 'local', true);
// End when close enough // End when close enough
if(Math.abs(targetY - currentY) < 1) { if(Math.abs(targetY - currentY) < 1) {
this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
clearInterval(incrementalScroll); clearInterval(incrementalScroll);
} }
}, 10); }, 10);
} else { } else {
this.codeEditor.current.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference this.codeEditor.current.codeMirror?.scrollTo(null, targetY); // Scroll any remaining difference
this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 }); this.codeEditor.current.setCursorPosition({ line: targetLine + 1, ch: 0 });
this.codeEditor.current.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash'); this.codeEditor.current.codeMirror?.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
} }
}, },
@@ -545,4 +547,4 @@ const Editor = createClass({
} }
}); });
module.exports = Editor; export default Editor;

67
client/homebrew/editor/metadataEditor/metadataEditor.jsx
View File

@@ -1,19 +1,16 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
require('./metadataEditor.less'); import './metadataEditor.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
const Combobox = require('client/components/combobox.jsx'); import Combobox from '../../../components/combobox.jsx';
const TagInput = require('../tagInput/tagInput.jsx'); import TagInput from '../tagInput/tagInput.jsx';
import Themes from 'themes/themes.json';
import validations from './validations.js';
const Themes = require('themes/themes.json'); import homebreweryThumbnail from '../../thumbnail.png';
const validations = require('./validations.js');
const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
const homebreweryThumbnail = require('../../thumbnail.png');
const callIfExists = (val, fn, ...args)=>{ const callIfExists = (val, fn, ...args)=>{
if(val[fn]) { if(val[fn]) {
@@ -21,7 +18,7 @@ const callIfExists = (val, fn, ...args)=>{
} }
}; };
const MetadataEditor = createClass({ const MetadataEditor = createReactClass({
displayName : 'MetadataEditor', displayName : 'MetadataEditor',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -34,7 +31,6 @@ const MetadataEditor = createClass({
tags : [], tags : [],
published : false, published : false,
authors : [], authors : [],
systems : [],
renderer : 'legacy', renderer : 'legacy',
theme : '5ePHB', theme : '5ePHB',
lang : 'en' lang : 'en'
@@ -92,15 +88,6 @@ const MetadataEditor = createClass({
} }
}, },
handleSystem : function(system, e){
if(e.target.checked){
this.props.metadata.systems.push(system);
} else {
this.props.metadata.systems = _.without(this.props.metadata.systems, system);
}
this.props.onChange(this.props.metadata);
},
handleRenderer : function(renderer, e){ handleRenderer : function(renderer, e){
if(e.target.checked){ if(e.target.checked){
this.props.metadata.renderer = renderer; this.props.metadata.renderer = renderer;
@@ -156,18 +143,6 @@ const MetadataEditor = createClass({
}); });
}, },
renderSystems : function(){
return _.map(SYSTEMS, (val)=>{
return <label key={val}>
<input
type='checkbox'
checked={_.includes(this.props.metadata.systems, val)}
onChange={(e)=>this.handleSystem(val, e)} />
{val}
</label>;
});
},
renderPublish : function(){ renderPublish : function(){
if(this.props.metadata.published){ if(this.props.metadata.published){
return <button className='unpublish' onClick={()=>this.handlePublish(false)}> return <button className='unpublish' onClick={()=>this.handlePublish(false)}>
@@ -305,7 +280,7 @@ const MetadataEditor = createClass({
}, },
renderRenderOptions : function(){ renderRenderOptions : function(){
return <div className='field systems'> return <div className='field renderers'>
<label>Renderer</label> <label>Renderer</label>
<div className='value'> <div className='value'>
<label key='legacy'> <label key='legacy'>
@@ -364,19 +339,15 @@ const MetadataEditor = createClass({
{this.renderThumbnail()} {this.renderThumbnail()}
</div> </div>
<TagInput label='tags' valuePatterns={[/^(?:(?:group|meta|system|type):)?[A-Za-z0-9][A-Za-z0-9 \/.\-]{0,40}$/]} <TagInput
label='tags'
valuePatterns={/^\s*(?:(?:group|meta|system|type)\s*:\s*)?[A-Za-z0-9][A-Za-z0-9 \/\\.&_\-]{0,40}\s*$/}
placeholder='add tag' unique={true} placeholder='add tag' unique={true}
values={this.props.metadata.tags} values={this.props.metadata.tags}
smallText='You may start tags with "type", "system", "group" or "meta" followed by a colon ":", these will be colored in your userpage.'
onChange={(e)=>this.handleFieldChange('tags', e)} onChange={(e)=>this.handleFieldChange('tags', e)}
/> />
<div className='field systems'>
<label>systems</label>
<div className='value'>
{this.renderSystems()}
</div>
</div>
{this.renderLanguageDropdown()} {this.renderLanguageDropdown()}
{this.renderThemeDropdown()} {this.renderThemeDropdown()}
@@ -387,11 +358,13 @@ const MetadataEditor = createClass({
{this.renderAuthors()} {this.renderAuthors()}
<TagInput label='invited authors' valuePatterns={[/.+/]} <TagInput
label='invited authors'
valuePatterns={/.+/}
validators={[(v)=>!this.props.metadata.authors?.includes(v)]} validators={[(v)=>!this.props.metadata.authors?.includes(v)]}
placeholder='invite author' unique={true} placeholder='invite author' unique={true}
values={this.props.metadata.invitedAuthors} values={this.props.metadata.invitedAuthors}
notes={['Invited author usernames are case sensitive.', 'After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.']} smallText='Invited author usernames are case sensitive. After adding an invited author, send them the edit link. There, they can choose to accept or decline the invitation.'
onChange={(e)=>this.handleFieldChange('invitedAuthors', e)} onChange={(e)=>this.handleFieldChange('invitedAuthors', e)}
/> />
@@ -411,4 +384,4 @@ const MetadataEditor = createClass({
} }
}); });
module.exports = MetadataEditor; export default MetadataEditor;

7
client/homebrew/editor/metadataEditor/metadataEditor.less
View File

@@ -114,6 +114,11 @@
z-index : 200; z-index : 200;
max-width : 150px; max-width : 150px;
} }
&.tags .tagInput-dropdown {
z-index : 201;
max-width : 200px;
}
} }
@@ -129,7 +134,7 @@
background-color : #AAAAAA; background-color : #AAAAAA;
} }
.systems.field .value { .renderers.field .value {
label { label {
display : inline-flex; display : inline-flex;
align-items : center; align-items : center;

2
client/homebrew/editor/metadataEditor/validations.js
View File

@@ -1,4 +1,4 @@
module.exports = { export default {
title : [ title : [
(value)=>{ (value)=>{
return value?.length > 100 ? 'Max title length of 100 characters' : null; return value?.length > 100 ? 'Max title length of 100 characters' : null;

39
client/homebrew/editor/snippetbar/snippetbar.jsx
View File

@@ -1,29 +1,36 @@
/*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 350, "skipBlankLines": true, "skipComments": true}]*/
require('./snippetbar.less'); import './snippetbar.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash');
const cx = require('classnames'); import _ from 'lodash';
import cx from 'classnames';
import { loadHistory } from '../../utils/versionHistory.js'; import { loadHistory } from '../../utils/versionHistory.js';
import { brewSnippetsToJSON } from '../../../../shared/helpers.js'; import { brewSnippetsToJSON } from '../../../../shared/helpers.js';
//Import all themes import Legacy5ePHB from 'themes/Legacy/5ePHB/snippets.js';
const ThemeSnippets = {}; import V3_5ePHB from 'themes/V3/5ePHB/snippets.js';
ThemeSnippets['Legacy_5ePHB'] = require('themes/Legacy/5ePHB/snippets.js'); import V3_5eDMG from 'themes/V3/5eDMG/snippets.js';
ThemeSnippets['V3_5ePHB'] = require('themes/V3/5ePHB/snippets.js'); import V3_Journal from 'themes/V3/Journal/snippets.js';
ThemeSnippets['V3_5eDMG'] = require('themes/V3/5eDMG/snippets.js'); import V3_Blank from 'themes/V3/Blank/snippets.js';
ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js');
ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js');
const EditorThemes = require('build/homebrew/codeMirror/editorThemes.json'); const ThemeSnippets = {
Legacy_5ePHB : Legacy5ePHB,
V3_5ePHB : V3_5ePHB,
V3_5eDMG : V3_5eDMG,
V3_Journal : V3_Journal,
V3_Blank : V3_Blank,
};
import EditorThemes from 'build/homebrew/codeMirror/editorThemes.json';
const execute = function(val, props){ const execute = function(val, props){
if(_.isFunction(val)) return val(props); if(_.isFunction(val)) return val(props);
return val; return val;
}; };
const Snippetbar = createClass({ const Snippetbar = createReactClass({
displayName : 'SnippetBar', displayName : 'SnippetBar',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -281,9 +288,9 @@ const Snippetbar = createClass({
} }
}); });
module.exports = Snippetbar; export default Snippetbar;
const SnippetGroup = createClass({ const SnippetGroup = createReactClass({
displayName : 'SnippetGroup', displayName : 'SnippetGroup',
getDefaultProps : function() { getDefaultProps : function() {
return { return {

210
client/homebrew/editor/tagInput/curatedTagSuggestionList.js Normal file
View File

@@ -0,0 +1,210 @@
export default [
// ############################## Systems
// D&D
"system:D&D Original",
"system:D&D Basic",
"system:AD&D 1e",
"system:AD&D 2e",
"system:D&D 3e",
"system:D&D 3.5e",
"system:D&D 4e",
"system:D&D 5e",
"system:D&D 5e 2024",
"system:BD&D (B/X)",
"system:D&D Essentials",
// Other Famous RPGs
"system:Pathfinder 1e",
"system:Pathfinder 2e",
"system:Vampire: The Masquerade",
"system:Werewolf: The Apocalypse",
"system:Mage: The Ascension",
"system:Call of Cthulhu",
"system:Shadowrun",
"system:Star Wars RPG (D6/D20/Edge of the Empire)",
"system:Warhammer Fantasy Roleplay",
"system:Cyberpunk 2020",
"system:Blades in the Dark",
"system:Daggerheart",
"system:Draw Steel",
"system:Mutants and Masterminds",
// Meta
"meta:V3",
"meta:Legacy",
"meta:Template",
"meta:Theme",
"meta:free",
"meta:Character Sheet",
"meta:Documentation",
"meta:NPC",
"meta:Guide",
"meta:Resource",
"meta:Notes",
"meta:Example",
// Book type
"type:Campaign",
"type:Campaign Setting",
"type:Adventure",
"type:One-Shot",
"type:Setting",
"type:World",
"type:Lore",
"type:History",
"type:Dungeon Master",
"type:Encounter Pack",
"type:Encounter",
"type:Session Notes",
"type:reference",
"type:Handbook",
"type:Manual",
"type:Manuals",
"type:Compendium",
"type:Bestiary",
// ###################################### RPG Keywords
// Classes / Subclasses / Archetypes
"Class",
"Subclass",
"Archetype",
"Martial",
"Half-Caster",
"Full Caster",
"Artificer",
"Barbarian",
"Bard",
"Cleric",
"Druid",
"Fighter",
"Monk",
"Paladin",
"Rogue",
"Sorcerer",
"Warlock",
"Wizard",
// Races / Species / Lineages
"Race",
"Ancestry",
"Lineage",
"Aasimar",
"Beastfolk",
"Dragonborn",
"Dwarf",
"Elf",
"Goblin",
"Half-Elf",
"Half-Orc",
"Human",
"Kobold",
"Lizardfolk",
"Lycan",
"Orc",
"Tiefling",
"Vampire",
"Yuan-Ti",
// Magic / Spells / Items
"Magic",
"Magic Item",
"Magic Items",
"Wondrous Item",
"Magic Weapon",
"Artifact",
"Spell",
"Spells",
"Cantrip",
"Cantrips",
"Eldritch",
"Eldritch Invocation",
"Invocation",
"Invocations",
"Pact boon",
"Pact Boon",
"Spellcaster",
"Spellblade",
"Magical Tattoos",
"Enchantment",
"Enchanted",
"Attunement",
"Requires Attunement",
"Rune",
"Runes",
"Wand",
"Rod",
"Scroll",
"Potion",
"Potions",
"Item",
"Items",
"Bag of Holding",
// Monsters / Creatures / Enemies
"Monster",
"Creatures",
"Creature",
"Beast",
"Beasts",
"Humanoid",
"Undead",
"Fiend",
"Aberration",
"Ooze",
"Giant",
"Dragon",
"Monstrosity",
"Demon",
"Devil",
"Elemental",
"Construct",
"Constructs",
"Boss",
"BBEG",
// ############################# Media / Pop Culture
"One Piece",
"Dragon Ball",
"Dragon Ball Z",
"Naruto",
"Jujutsu Kaisen",
"Fairy Tail",
"Final Fantasy",
"Kingdom Hearts",
"Elder Scrolls",
"Skyrim",
"WoW",
"World of Warcraft",
"Marvel Comics",
"DC Comics",
"Pokemon",
"League of Legends",
"Runeterra",
"Arcane",
"Yu-Gi-Oh",
"Minecraft",
"Don't Starve",
"Witcher",
"Witcher 3",
"Cyberpunk",
"Cyberpunk 2077",
"Fallout",
"Divinity Original Sin 2",
"Fullmetal Alchemist",
"Fullmetal Alchemist Brotherhood",
"Lobotomy Corporation",
"Bloodborne",
"Dragonlance",
"Shackled City Adventure Path",
"Baldurs Gate 3",
"Library of Ruina",
"Radiant Citadel",
"Ravenloft",
"Forgotten Realms",
"Exandria",
"Critical Role",
"Star Wars",
"SW5e",
"Star Wars 5e",
];

252
client/homebrew/editor/tagInput/tagInput.jsx
View File

@@ -1,105 +1,213 @@
require('./tagInput.less'); import './tagInput.less';
const React = require('react'); import React, { useState, useEffect } from 'react';
const { useState, useEffect } = React; import Combobox from '../../../components/combobox.jsx';
const _ = require('lodash');
const TagInput = ({ unique = true, values = [], ...props })=>{ import tagSuggestionList from './curatedTagSuggestionList.js';
const [tempInputText, setTempInputText] = useState('');
const [tagList, setTagList] = useState(values.map((value)=>({ value, editing: false }))); const TagInput = ({ label, valuePatterns, values = [], unique = true, placeholder = '', smallText = '', onChange })=>{
const [tagList, setTagList] = useState(
values.map((value)=>({
value,
editing : false,
draft : '',
})),
);
useEffect(()=>{ useEffect(()=>{
handleChange(tagList.map((context)=>context.value)); const incoming = values || [];
const current = tagList.map((t)=>t.value);
const changed = incoming.length !== current.length || incoming.some((v, i)=>v !== current[i]);
if(changed) {
setTagList(
incoming.map((value)=>({
value,
editing : false,
})),
);
}
}, [values]);
useEffect(()=>{
onChange?.({
target : { value: tagList.map((t)=>t.value) },
});
}, [tagList]); }, [tagList]);
const handleChange = (value)=>{ // substrings to be normalized to the first value on the array
props.onChange({ const duplicateGroups = [
target : { value } ['5e 2024', '5.5e', '5e\'24', '5.24', '5e24', '5.5'],
}); ['5e', '5th Edition'],
}; ['Dungeons & Dragons', 'Dungeons and Dragons', 'Dungeons n dragons'],
['D&D', 'DnD', 'dnd', 'Dnd', 'dnD', 'd&d', 'd&D', 'D&d'],
['P2e', 'p2e', 'P2E', 'Pathfinder 2e'],
];
const handleInputKeyDown = ({ evt, value, index, options = {} })=>{ const normalizeValue = (input)=>{
if(_.includes(['Enter', ','], evt.key)) { const lowerInput = input.toLowerCase();
evt.preventDefault(); let normalizedTag = input;
submitTag(evt.target.value, value, index);
if(options.clear) { for (const group of duplicateGroups) {
setTempInputText(''); for (const tag of group) {
if(!tag) continue;
const index = lowerInput.indexOf(tag.toLowerCase());
if(index !== -1) {
normalizedTag = input.slice(0, index) + group[0] + input.slice(index + tag.length);
break;
}
} }
} }
if(normalizedTag.includes(':')) {
const [rawType, rawValue = ''] = normalizedTag.split(':');
const tagType = rawType.trim().toLowerCase();
const tagValue = rawValue.trim();
if(tagValue.length > 0) {
normalizedTag = `${tagType}:${tagValue[0].toUpperCase()}${tagValue.slice(1)}`;
}
//trims spaces around colon and capitalizes the first word after the colon
//this is preferred to users not understanding they can't put spaces in
}
return normalizedTag;
}; };
const submitTag = (newValue, originalValue, index)=>{ const submitTag = (newValue, index = null)=>{
setTagList((prevContext)=>{ const trimmed = newValue?.trim();
// remove existing tag if(!trimmed) return;
if(newValue === null){ if(!valuePatterns.test(trimmed)) return;
return [...prevContext].filter((context, i)=>i !== index);
const normalizedTag = normalizeValue(trimmed);
setTagList((prev)=>{
const existsIndex = prev.findIndex((t)=>t.value.toLowerCase() === normalizedTag.toLowerCase());
if(unique && existsIndex !== -1) return prev;
if(index !== null) {
return prev.map((t, i)=>(i === index ? { ...t, value: normalizedTag, editing: false } : t));
} }
// add new tag
if(originalValue === null){ return [...prev, { value: normalizedTag, editing: false }];
return [...prevContext, { value: newValue, editing: false }];
}
// update existing tag
return prevContext.map((context, i)=>{
if(i === index) {
return { ...context, value: newValue, editing: false };
}
return context;
});
}); });
}; };
const removeTag = (index)=>{
setTagList((prev)=>prev.filter((_, i)=>i !== index));
};
const editTag = (index)=>{ const editTag = (index)=>{
setTagList((prevContext)=>{ setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: true, draft: t.value } : t)));
return prevContext.map((context, i)=>{
if(i === index) {
return { ...context, editing: true };
}
return { ...context, editing: false };
});
});
}; };
const renderReadTag = (context, index)=>{ const stopEditing = (index)=>{
return ( setTagList((prev)=>prev.map((t, i)=>(i === index ? { ...t, editing: false, draft: '' } : t)));
<li key={index}
data-value={context.value}
className='tag'
onClick={()=>editTag(index)}>
{context.value}
<button onClick={(evt)=>{evt.stopPropagation(); submitTag(null, context.value, index);}}><i className='fa fa-times fa-fw'/></button>
</li>
);
}; };
const renderWriteTag = (context, index)=>{ const suggestionOptions = tagSuggestionList.map((tag)=>{
const tagType = tag.split(':');
let classes = 'item';
switch (tagType[0]) {
case 'type':
classes = 'item type';
break;
case 'group':
classes = 'item group';
break;
case 'meta':
classes = 'item meta';
break;
case 'system':
classes = 'item system';
break;
default:
classes = 'item';
break;
}
return ( return (
<input type='text' <div className={classes} key={`tag-${tag}`} value={tag} data={tag} title={tag}>
key={index} {tag}
defaultValue={context.value} </div>
onKeyDown={(evt)=>handleInputKeyDown({ evt, value: context.value, index: index })}
autoFocus
/>
); );
}; });
return ( return (
<div className='field'> <div className='field tags'>
<label>{props.label}</label> {label && <label>{label}</label>}
<div className='value'> <div className='value'>
<ul className='list'> <ul className='list'>
{tagList.map((context, index)=>{ return context.editing ? renderWriteTag(context, index) : renderReadTag(context, index); })} {tagList.map((t, i)=>t.editing ? (
<input
key={i}
type='text'
value={t.draft} // always use draft
pattern={valuePatterns.source}
onChange={(e)=>setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: e.target.value } : tag)),
)
}
onKeyDown={(e)=>{
if(e.key === 'Enter') {
e.preventDefault();
submitTag(t.draft, i); // submit draft
setTagList((prev)=>prev.map((tag, idx)=>(idx === i ? { ...tag, draft: '' } : tag)),
);
}
if(e.key === 'Escape') {
stopEditing(i);
e.target.blur();
}
}}
autoFocus
/>
) : (
<li key={i} className='tag' onClick={()=>editTag(i)}>
{t.value}
<button
type='button'
onClick={(e)=>{
e.stopPropagation();
removeTag(i);
}}>
<i className='fa fa-times fa-fw' />
</button>
</li>
),
)}
</ul> </ul>
<input <Combobox
type='text' trigger='click'
className='value' className='tagInput-dropdown'
placeholder={props.placeholder} default=''
value={tempInputText} placeholder={placeholder}
onChange={(e)=>setTempInputText(e.target.value)} options={label === 'tags' ? suggestionOptions : []}
onKeyDown={(evt)=>handleInputKeyDown({ evt, value: null, options: { clear: true } })} autoSuggest={
label === 'tags'
? {
suggestMethod : 'startsWith',
clearAutoSuggestOnClick : true,
filterOn : ['value', 'title'],
}
: { suggestMethod: 'includes', clearAutoSuggestOnClick: true, filterOn: [] }
}
valuePatterns={valuePatterns.source}
onSelect={(value)=>submitTag(value)}
onEntry={(e)=>{
if(e.key === 'Enter') {
console.log('submit');
e.preventDefault();
submitTag(e.target.value);
}
}}
/> />
{smallText.length !== 0 && <small>{smallText}</small>}
</div> </div>
</div> </div>
); );
}; };
module.exports = TagInput; export default TagInput;

22
client/homebrew/editor/tagInput/tagInput.less
View File

@@ -0,0 +1,22 @@
.list input {
border-radius: 5px;
}
.tagInput-dropdown {
.dropdown-options {
.item {
&.type {
background-color: #00800035;
}
&.group {
background-color: #50505035;
}
&.meta {
background-color: #00008035;
}
&.system {
background-color: #80000035;
}
}
}
}

1980
client/homebrew/editor/tagInput/tagSuggestionList.js Normal file
View File

File diff suppressed because it is too large Load Diff

2
client/homebrew/homebrew.jsx
View File

@@ -1,4 +1,4 @@
/* eslint-disable camelcase */
import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers import 'core-js/es/string/to-well-formed.js'; //Polyfill for older browsers
import './homebrew.less'; import './homebrew.less';
import React from 'react'; import React from 'react';

12
client/homebrew/navbar/account.navitem.jsx
View File

@@ -1,9 +1,9 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const Nav = require('client/homebrew/navbar/nav.jsx'); import request from 'superagent';
const request = require('superagent'); import Nav from './nav.jsx';
const Account = createClass({ const Account = createReactClass({
displayName : 'AccountNavItem', displayName : 'AccountNavItem',
getInitialState : function() { getInitialState : function() {
return { return {
@@ -111,4 +111,4 @@ const Account = createClass({
} }
}); });
module.exports = Account; export default Account;

8
client/homebrew/navbar/error-navitem.jsx
View File

@@ -1,6 +1,6 @@
require('./error-navitem.less'); import './error-navitem.less';
const React = require('react'); import React from 'react';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const ErrorNavItem = ({ error = '', clearError })=>{ const ErrorNavItem = ({ error = '', clearError })=>{
const response = error.response; const response = error.response;
@@ -144,4 +144,4 @@ const ErrorNavItem = ({ error = '', clearError })=>{
</Nav.item>; </Nav.item>;
}; };
module.exports = ErrorNavItem; export default ErrorNavItem;

8
client/homebrew/navbar/help.navitem.jsx
View File

@@ -1,9 +1,9 @@
const React = require('react'); import React from 'react';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
module.exports = function(props){ export default function(props){
return <Nav.dropdown> return <Nav.dropdown>
<Nav.item color='grey' icon='fas fa-question-circle'> <Nav.item color='grey' icon='fas fa-question-circle'>
need help? need help?

12
client/homebrew/navbar/metadata.navitem.jsx
View File

@@ -1,11 +1,11 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const Moment = require('moment'); import Moment from 'moment';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const MetadataNav = createClass({ const MetadataNav = createReactClass({
displayName : 'MetadataNav', displayName : 'MetadataNav',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -86,4 +86,4 @@ const MetadataNav = createClass({
}); });
module.exports = MetadataNav; export default MetadataNav;

21
client/homebrew/navbar/nav.jsx
View File

@@ -1,14 +1,13 @@
require('client/homebrew/navbar/navbar.less'); import './navbar.less';
const React = require('react'); import React, { useState, useRef, useEffect } from 'react';
const { useState, useRef, useEffect } = React; import createReactClass from 'create-react-class';
const createClass = require('create-react-class'); import _ from 'lodash';
const _ = require('lodash'); import cx from 'classnames';
const cx = require('classnames');
const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx'); import NaturalCritIcon from '../../components/svg/naturalcrit-d20.svg.jsx';
const Nav = { const Nav = {
base : createClass({ base : createReactClass({
displayName : 'Nav.base', displayName : 'Nav.base',
render : function(){ render : function(){
return <nav> return <nav>
@@ -25,7 +24,7 @@ const Nav = {
</a>; </a>;
}, },
section : createClass({ section : createReactClass({
displayName : 'Nav.section', displayName : 'Nav.section',
render : function(){ render : function(){
return <div className={`navSection ${this.props.className ?? ''}`}> return <div className={`navSection ${this.props.className ?? ''}`}>
@@ -34,7 +33,7 @@ const Nav = {
} }
}), }),
item : createClass({ item : createReactClass({
displayName : 'Nav.item', displayName : 'Nav.item',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -117,4 +116,4 @@ const Nav = {
}; };
module.exports = Nav; export default Nav;

14
client/homebrew/navbar/navbar.jsx
View File

@@ -1,11 +1,11 @@
require('./navbar.less'); import './navbar.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const PatreonNavItem = require('./patreon.navitem.jsx'); import PatreonNavItem from './patreon.navitem.jsx';
const Navbar = createClass({ const Navbar = createReactClass({
displayName : 'Navbar', displayName : 'Navbar',
getInitialState : function() { getInitialState : function() {
return { return {
@@ -49,4 +49,4 @@ const Navbar = createClass({
} }
}); });
module.exports = Navbar; export default Navbar;

10
client/homebrew/navbar/newbrew.navitem.jsx
View File

@@ -1,7 +1,7 @@
const React = require('react'); import React from 'react';
const _ = require('lodash'); import _ from 'lodash';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const { splitTextStyleAndMetadata } = require('../../../shared/helpers.js'); // Importing the function from helpers.js import { splitTextStyleAndMetadata } from '../../../shared/helpers.js';
const BREWKEY = 'HB_newPage_content'; const BREWKEY = 'HB_newPage_content';
const STYLEKEY = 'HB_newPage_style'; const STYLEKEY = 'HB_newPage_style';
@@ -100,4 +100,4 @@ const NewBrew = ()=>{
); );
}; };
module.exports = NewBrew; export default NewBrew;

6
client/homebrew/navbar/patreon.navitem.jsx
View File

@@ -1,7 +1,7 @@
const React = require('react'); import React from 'react';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
module.exports = function(props){ export default function(props){
return <Nav.item return <Nav.item
className='patreon' className='patreon'
newTab={true} newTab={true}

8
client/homebrew/navbar/print.navitem.jsx
View File

@@ -1,8 +1,8 @@
const React = require('react'); import React from 'react';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const { printCurrentBrew } = require('../../../shared/helpers.js'); import { printCurrentBrew } from '../../../shared/helpers.js';
module.exports = function(){ export default function(){
return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'> return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
get PDF get PDF
</Nav.item>; </Nav.item>;

14
client/homebrew/navbar/recent.navitem.jsx
View File

@@ -1,15 +1,15 @@
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
const Moment = require('moment'); import Moment from 'moment';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
const EDIT_KEY = 'HB_nav_recentlyEdited'; const EDIT_KEY = 'HB_nav_recentlyEdited';
const VIEW_KEY = 'HB_nav_recentlyViewed'; const VIEW_KEY = 'HB_nav_recentlyViewed';
const RecentItems = createClass({ const RecentItems = createReactClass({
DisplayName : 'RecentItems', DisplayName : 'RecentItems',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -175,7 +175,7 @@ const RecentItems = createClass({
}); });
module.exports = { export default {
edited : (props)=>{ edited : (props)=>{
return <RecentItems return <RecentItems

4
client/homebrew/navbar/share.navitem.jsx
View File

@@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import dedent from 'dedent-tabs'; import dedent from 'dedent';
import Nav from 'client/homebrew/navbar/nav.jsx'; import Nav from './nav.jsx';
const getShareId = (brew)=>( const getShareId = (brew)=>(
brew.googleId && !brew.stubbed brew.googleId && !brew.stubbed

6
client/homebrew/navbar/vault.navitem.jsx
View File

@@ -1,8 +1,8 @@
const React = require('react'); import React from 'react';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from './nav.jsx';
module.exports = function (props) { export default function (props) {
return ( return (
<Nav.item <Nav.item
color='purple' color='purple'

10
client/homebrew/pages/accountPage/accountPage.jsx
View File

@@ -1,7 +1,7 @@
const React = require('react'); import React from 'react';
const moment = require('moment'); import moment from 'moment';
const UIPage = require('../basePages/uiPage/uiPage.jsx'); import UIPage from '../basePages/uiPage/uiPage.jsx';
const NaturalCritIcon = require('client/components/svg/naturalcrit-d20.svg.jsx'); import NaturalCritIcon from '../../../components/svg/naturalcrit-d20.svg.jsx';
let SAVEKEY = ''; let SAVEKEY = '';
@@ -79,4 +79,4 @@ const AccountPage = (props)=>{
</UIPage>); </UIPage>);
}; };
module.exports = AccountPage; export default AccountPage;

15
client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
View File

@@ -1,12 +1,11 @@
require('./brewItem.less'); import './brewItem.less';
const React = require('react'); import React, { useCallback } from 'react';
const { useCallback } = React; import moment from 'moment';
const moment = require('moment');
import request from '../../../../utils/request-middleware.js'; import request from '../../../../utils/request-middleware.js';
const googleDriveIcon = require('../../../../googleDrive.svg'); import googleDriveIcon from '../../../../googleDrive.svg';
const homebreweryIcon = require('../../../../thumbnail.svg'); import homebreweryIcon from '../../../../thumbnail.svg';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const BrewItem = ({ const BrewItem = ({
brew = { brew = {
@@ -176,4 +175,4 @@ const BrewItem = ({
); );
}; };
module.exports = BrewItem; export default BrewItem;

16
client/homebrew/pages/basePages/listPage/listPage.jsx
View File

@@ -1,11 +1,11 @@
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
require('./listPage.less'); import './listPage.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const _ = require('lodash'); import _ from 'lodash';
const moment = require('moment'); import moment from 'moment';
const BrewItem = require('./brewItem/brewItem.jsx'); import BrewItem from './brewItem/brewItem.jsx';
const USERPAGE_SORT_DIR = 'HB_listPage_sortDir'; const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
const USERPAGE_SORT_TYPE = 'HB_listPage_sortType'; const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
@@ -14,7 +14,7 @@ const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
const DEFAULT_SORT_TYPE = 'alpha'; const DEFAULT_SORT_TYPE = 'alpha';
const DEFAULT_SORT_DIR = 'asc'; const DEFAULT_SORT_DIR = 'asc';
const ListPage = createClass({ const ListPage = createReactClass({
displayName : 'ListPage', displayName : 'ListPage',
getDefaultProps : function() { getDefaultProps : function() {
return { return {
@@ -279,4 +279,4 @@ const ListPage = createClass({
} }
}); });
module.exports = ListPage; export default ListPage;

23
client/homebrew/pages/basePages/uiPage/uiPage.jsx
View File

@@ -1,16 +1,17 @@
require('./uiPage.less'); import './uiPage.less';
const React = require('react'); import React from 'react';
const createClass = require('create-react-class'); import createReactClass from 'create-react-class';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from '../../../navbar/nav.jsx';
const Navbar = require('client/homebrew/navbar/navbar.jsx'); import Navbar from '../../../navbar/navbar.jsx';
const NewBrewItem = require('client/homebrew/navbar/newbrew.navitem.jsx'); import NewBrewItem from '../../../navbar/newbrew.navitem.jsx';
const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx'); import HelpNavItem from '../../../navbar/help.navitem.jsx';
const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both; import RecentNavItems from '../../../navbar/recent.navitem.jsx';
const Account = require('client/homebrew/navbar/account.navitem.jsx'); const { both: RecentNavItem } = RecentNavItems;
import Account from '../../../navbar/account.navitem.jsx';
const UIPage = createClass({ const UIPage = createReactClass({
displayName : 'UIPage', displayName : 'UIPage',
render : function(){ render : function(){
@@ -35,4 +36,4 @@ const UIPage = createClass({
} }
}); });
module.exports = UIPage; export default UIPage;

29
client/homebrew/pages/editPage/editPage.jsx
View File

@@ -4,25 +4,26 @@ import './editPage.less';
// Common imports // Common imports
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
import Markdown from 'markdown.js'; import Markdown from '../../../../shared/markdown.js';
import _ from 'lodash'; import _ from 'lodash';
import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js'; import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js'; import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
import SplitPane from 'client/components/splitPane/splitPane.jsx'; import SplitPane from '../../../components/splitPane/splitPane.jsx';
import Editor from '../../editor/editor.jsx'; import Editor from '../../editor/editor.jsx';
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
import Nav from 'client/homebrew/navbar/nav.jsx'; import Nav from '../../navbar/nav.jsx';
import Navbar from 'client/homebrew/navbar/navbar.jsx'; import Navbar from '../../navbar/navbar.jsx';
import NewBrewItem from 'client/homebrew/navbar/newbrew.navitem.jsx'; import NewBrewItem from '../../navbar/newbrew.navitem.jsx';
import AccountNavItem from 'client/homebrew/navbar/account.navitem.jsx'; import AccountNavItem from '../../navbar/account.navitem.jsx';
import ErrorNavItem from 'client/homebrew/navbar/error-navitem.jsx'; import ErrorNavItem from '../../navbar/error-navitem.jsx';
import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx'; import HelpNavItem from '../../navbar/help.navitem.jsx';
import VaultNavItem from 'client/homebrew/navbar/vault.navitem.jsx'; import VaultNavItem from '../../navbar/vault.navitem.jsx';
import PrintNavItem from 'client/homebrew/navbar/print.navitem.jsx'; import PrintNavItem from '../../navbar/print.navitem.jsx';
import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx'; import RecentNavItems from '../../navbar/recent.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems;
// Page specific imports // Page specific imports
import { Meta } from 'vitreum/headtags'; import { Meta } from 'vitreum/headtags';
@@ -30,7 +31,7 @@ import { md5 } from 'hash-wasm';
import { gzipSync, strToU8 } from 'fflate'; import { gzipSync, strToU8 } from 'fflate';
import { makePatches, stringifyPatches } from '@sanity/diff-match-patch'; import { makePatches, stringifyPatches } from '@sanity/diff-match-patch';
import ShareNavItem from 'client/homebrew/navbar/share.navitem.jsx'; import ShareNavItem from '../../navbar/share.navitem.jsx';
import LockNotification from './lockNotification/lockNotification.jsx'; import LockNotification from './lockNotification/lockNotification.jsx';
import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js'; import { updateHistory, versionHistoryGarbageCollection } from '../../utils/versionHistory.js';
import googleDriveIcon from '../../googleDrive.svg'; import googleDriveIcon from '../../googleDrive.svg';
@@ -216,7 +217,7 @@ const EditPage = (props)=>{
text : brew.text.normalize('NFC'), text : brew.text.normalize('NFC'),
pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1, pageCount : ((brew.renderer === 'legacy' ? brew.text.match(/\\page/g) : brew.text.match(/^\\page$/gm)) || []).length + 1,
patches : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))), patches : stringifyPatches(makePatches(encodeURI(lastSavedBrew.current.text.normalize('NFC')), encodeURI(brew.text.normalize('NFC')))),
hash : await md5(lastSavedBrew.current.text), hash : await md5(lastSavedBrew.current.text.normalize('NFC')),
textBin : undefined, textBin : undefined,
version : lastSavedBrew.current.version version : lastSavedBrew.current.version
}; };
@@ -415,4 +416,4 @@ const EditPage = (props)=>{
); );
}; };
module.exports = EditPage; export default EditPage;

2
client/homebrew/pages/editPage/lockNotification/lockNotification.jsx
View File

@@ -40,4 +40,4 @@ function LockNotification(props) {
</Dialog>; </Dialog>;
}; };
module.exports = LockNotification; export default LockNotification;

12
client/homebrew/pages/errorPage/errorPage.jsx
View File

@@ -1,8 +1,8 @@
require('./errorPage.less'); import './errorPage.less';
const React = require('react'); import React from 'react';
const UIPage = require('../basePages/uiPage/uiPage.jsx'); import UIPage from '../basePages/uiPage/uiPage.jsx';
import Markdown from '../../../../shared/markdown.js'; import Markdown from '../../../../shared/markdown.js';
const ErrorIndex = require('./errors/errorIndex.js'); import ErrorIndex from './errors/errorIndex.js';
const ErrorPage = ({ brew })=>{ const ErrorPage = ({ brew })=>{
// Retrieving the error text based on the brew's error code from ErrorIndex // Retrieving the error text based on the brew's error code from ErrorIndex
@@ -22,4 +22,4 @@ const ErrorPage = ({ brew })=>{
); );
}; };
module.exports = ErrorPage; export default ErrorPage;

4
client/homebrew/pages/errorPage/errors/errorIndex.js
View File

@@ -1,4 +1,4 @@
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const loginUrl = 'https://www.naturalcrit.com/login'; const loginUrl = 'https://www.naturalcrit.com/login';
@@ -268,4 +268,4 @@ const errorIndex = (props)=>{
}; };
}; };
module.exports = errorIndex; export default errorIndex;

26
client/homebrew/pages/homePage/homePage.jsx
View File

@@ -4,25 +4,27 @@ import './homePage.less';
// Common imports // Common imports
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
import Markdown from 'markdown.js'; import Markdown from '../../../../shared/markdown.js';
import _ from 'lodash'; import _ from 'lodash';
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js'; import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js'; import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
import SplitPane from 'client/components/splitPane/splitPane.jsx'; import SplitPane from '../../../components/splitPane/splitPane.jsx';
import Editor from '../../editor/editor.jsx'; import Editor from '../../editor/editor.jsx';
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
import Nav from 'client/homebrew/navbar/nav.jsx'; import Nav from '../../navbar/nav.jsx';
import Navbar from 'client/homebrew/navbar/navbar.jsx'; import Navbar from '../../navbar/navbar.jsx';
import NewBrewItem from 'client/homebrew/navbar/newbrew.navitem.jsx'; import NewBrewItem from '../../navbar/newbrew.navitem.jsx';
import AccountNavItem from 'client/homebrew/navbar/account.navitem.jsx'; import AccountNavItem from '../../navbar/account.navitem.jsx';
import ErrorNavItem from 'client/homebrew/navbar/error-navitem.jsx'; import ErrorNavItem from '../../navbar/error-navitem.jsx';
import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx'; import HelpNavItem from '../../navbar/help.navitem.jsx';
import VaultNavItem from 'client/homebrew/navbar/vault.navitem.jsx'; import VaultNavItem from '../../navbar/vault.navitem.jsx';
import PrintNavItem from 'client/homebrew/navbar/print.navitem.jsx'; import PrintNavItem from '../../navbar/print.navitem.jsx';
import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx'; import RecentNavItems from '../../navbar/recent.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems;
// Page specific imports // Page specific imports
import { Meta } from 'vitreum/headtags'; import { Meta } from 'vitreum/headtags';
@@ -230,4 +232,4 @@ const HomePage =(props)=>{
); );
}; };
module.exports = HomePage; export default HomePage;

25
client/homebrew/pages/newPage/newPage.jsx
View File

@@ -4,25 +4,26 @@ import './newPage.less';
// Common imports // Common imports
import React, { useState, useEffect, useRef } from 'react'; import React, { useState, useEffect, useRef } from 'react';
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
import Markdown from 'markdown.js'; import Markdown from '../../../../shared/markdown.js';
import _ from 'lodash'; import _ from 'lodash';
import { DEFAULT_BREW } from '../../../../server/brewDefaults.js'; import { DEFAULT_BREW } from '../../../../server/brewDefaults.js';
import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js'; import { printCurrentBrew, fetchThemeBundle, splitTextStyleAndMetadata } from '../../../../shared/helpers.js';
import SplitPane from 'client/components/splitPane/splitPane.jsx'; import SplitPane from '../../../components/splitPane/splitPane.jsx';
import Editor from '../../editor/editor.jsx'; import Editor from '../../editor/editor.jsx';
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx'; import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
import Nav from 'client/homebrew/navbar/nav.jsx'; import Nav from '../../navbar/nav.jsx';
import Navbar from 'client/homebrew/navbar/navbar.jsx'; import Navbar from '../../navbar/navbar.jsx';
import NewBrewItem from 'client/homebrew/navbar/newbrew.navitem.jsx'; import NewBrewItem from '../../navbar/newbrew.navitem.jsx';
import AccountNavItem from 'client/homebrew/navbar/account.navitem.jsx'; import AccountNavItem from '../../navbar/account.navitem.jsx';
import ErrorNavItem from 'client/homebrew/navbar/error-navitem.jsx'; import ErrorNavItem from '../../navbar/error-navitem.jsx';
import HelpNavItem from 'client/homebrew/navbar/help.navitem.jsx'; import HelpNavItem from '../../navbar/help.navitem.jsx';
import VaultNavItem from 'client/homebrew/navbar/vault.navitem.jsx'; import VaultNavItem from '../../navbar/vault.navitem.jsx';
import PrintNavItem from 'client/homebrew/navbar/print.navitem.jsx'; import PrintNavItem from '../../navbar/print.navitem.jsx';
import { both as RecentNavItem } from 'client/homebrew/navbar/recent.navitem.jsx'; import RecentNavItems from '../../navbar/recent.navitem.jsx';
const { both: RecentNavItem } = RecentNavItems;
// Page specific imports // Page specific imports
import { Meta } from 'vitreum/headtags'; import { Meta } from 'vitreum/headtags';
@@ -276,4 +277,4 @@ const NewPage = (props)=>{
); );
}; };
module.exports = NewPage; export default NewPage;

28
client/homebrew/pages/sharePage/sharePage.jsx
View File

@@ -1,18 +1,18 @@
require('./sharePage.less'); import './sharePage.less';
const React = require('react'); import React, { useState, useEffect, useCallback } from 'react';
const { useState, useEffect, useCallback } = React; import { Meta } from 'vitreum/headtags';
const { Meta } = require('vitreum/headtags');
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from '../../navbar/nav.jsx';
const Navbar = require('client/homebrew/navbar/navbar.jsx'); import Navbar from '../../navbar/navbar.jsx';
const MetadataNav = require('client/homebrew/navbar/metadata.navitem.jsx'); import MetadataNav from '../../navbar/metadata.navitem.jsx';
const PrintNavItem = require('client/homebrew/navbar/print.navitem.jsx'); import PrintNavItem from '../../navbar/print.navitem.jsx';
const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both; import RecentNavItems from '../../navbar/recent.navitem.jsx';
const Account = require('client/homebrew/navbar/account.navitem.jsx'); const { both: RecentNavItem } = RecentNavItems;
const BrewRenderer = require('../../brewRenderer/brewRenderer.jsx'); import Account from '../../navbar/account.navitem.jsx';
import BrewRenderer from '../../brewRenderer/brewRenderer.jsx';
const { DEFAULT_BREW_LOAD } = require('../../../../server/brewDefaults.js'); import { DEFAULT_BREW_LOAD } from '../../../../server/brewDefaults.js';
const { printCurrentBrew, fetchThemeBundle } = require('../../../../shared/helpers.js'); import { printCurrentBrew, fetchThemeBundle } from '../../../../shared/helpers.js';
const SharePage = (props)=>{ const SharePage = (props)=>{
const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props; const { brew = DEFAULT_BREW_LOAD, disableMeta = false } = props;
@@ -116,4 +116,4 @@ const SharePage = (props)=>{
); );
}; };
module.exports = SharePage; export default SharePage;

26
client/homebrew/pages/userPage/userPage.jsx
View File

@@ -1,17 +1,17 @@
const React = require('react'); import React, { useState } from 'react';
const { useState } = React; import _ from 'lodash';
const _ = require('lodash');
const ListPage = require('../basePages/listPage/listPage.jsx'); import ListPage from '../basePages/listPage/listPage.jsx';
const Nav = require('client/homebrew/navbar/nav.jsx'); import Nav from '../../navbar/nav.jsx';
const Navbar = require('client/homebrew/navbar/navbar.jsx'); import Navbar from '../../navbar/navbar.jsx';
const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both; import RecentNavItems from '../../navbar/recent.navitem.jsx';
const Account = require('client/homebrew/navbar/account.navitem.jsx'); const { both: RecentNavItem } = RecentNavItems;
const NewBrew = require('client/homebrew/navbar/newbrew.navitem.jsx'); import Account from '../../navbar/account.navitem.jsx';
const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx'); import NewBrew from '../../navbar/newbrew.navitem.jsx';
const ErrorNavItem = require('client/homebrew/navbar/error-navitem.jsx'); import HelpNavItem from '../../navbar/help.navitem.jsx';
const VaultNavitem = require('client/homebrew/navbar/vault.navitem.jsx'); import ErrorNavItem from '../../navbar/error-navitem.jsx';
import VaultNavitem from '../../navbar/vault.navitem.jsx';
const UserPage = (props)=>{ const UserPage = (props)=>{
props = { props = {
@@ -61,4 +61,4 @@ const UserPage = (props)=>{
); );
}; };
module.exports = UserPage; export default UserPage;

32
client/homebrew/pages/vaultPage/vaultPage.jsx
View File

@@ -1,19 +1,18 @@
/*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 400, "skipBlankLines": true, "skipComments": true}]*/
/*eslint max-params:["warn", { max: 10 }], */ /*eslint max-params:["warn", { max: 10 }], */
require('./vaultPage.less'); import './vaultPage.less';
import React, { useState, useEffect, useRef } from 'react';
const React = require('react'); import Nav from '../../navbar/nav.jsx';
const { useState, useEffect, useRef } = React; import Navbar from '../../navbar/navbar.jsx';
import RecentNavItems from '../../navbar/recent.navitem.jsx';
const Nav = require('client/homebrew/navbar/nav.jsx'); const { both: RecentNavItem } = RecentNavItems;
const Navbar = require('client/homebrew/navbar/navbar.jsx'); import Account from '../../navbar/account.navitem.jsx';
const RecentNavItem = require('client/homebrew/navbar/recent.navitem.jsx').both; import NewBrew from '../../navbar/newbrew.navitem.jsx';
const Account = require('client/homebrew/navbar/account.navitem.jsx'); import HelpNavItem from '../../navbar/help.navitem.jsx';
const NewBrew = require('client/homebrew/navbar/newbrew.navitem.jsx'); import BrewItem from '../basePages/listPage/brewItem/brewItem.jsx';
const HelpNavItem = require('client/homebrew/navbar/help.navitem.jsx'); import SplitPane from '../../../components/splitPane/splitPane.jsx';
const BrewItem = require('../basePages/listPage/brewItem/brewItem.jsx'); import ErrorIndex from '../errorPage/errors/errorIndex.js';
const SplitPane = require('client/components/splitPane/splitPane.jsx');
const ErrorIndex = require('../errorPage/errors/errorIndex.js');
import request from '../../utils/request-middleware.js'; import request from '../../utils/request-middleware.js';
@@ -101,7 +100,7 @@ const VaultPage = (props)=>{
const title = titleRef.current.value || ''; const title = titleRef.current.value || '';
const author = authorRef.current.value || ''; const author = authorRef.current.value || '';
const count = countRef.current.value || 10; const count = countRef.current.value || 20;
const v3 = v3Ref.current.checked != false; const v3 = v3Ref.current.checked != false;
const legacy = legacyRef.current.checked != false; const legacy = legacyRef.current.checked != false;
const sortOption = sort || 'title'; const sortOption = sort || 'title';
@@ -288,7 +287,8 @@ const VaultPage = (props)=>{
const renderPaginationControls = ()=>{ const renderPaginationControls = ()=>{
if(!totalBrews || totalBrews < 10) return null; if(!totalBrews || totalBrews < 10) return null;
const countInt = parseInt(brewCollection.length || 20);
const countInt = parseInt(countRef.current.value || 20);
const totalPages = Math.ceil(totalBrews / countInt); const totalPages = Math.ceil(totalBrews / countInt);
let startPage, endPage; let startPage, endPage;
@@ -429,4 +429,4 @@ const VaultPage = (props)=>{
); );
}; };
module.exports = VaultPage; export default VaultPage;

2
eslint.config.mjs
View File

@@ -32,7 +32,7 @@ export default [{
"max-depth" : ["warn", { max: 4 }], "max-depth" : ["warn", { max: 4 }],
"max-params" : ["warn", { max: 5 }], "max-params" : ["warn", { max: 5 }],
"no-restricted-syntax" : ["warn", "ClassDeclaration", "SwitchStatement"], "no-restricted-syntax" : ["warn", "ClassDeclaration", "SwitchStatement"],
"no-unused-vars" : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createClass" }], "no-unused-vars" : ["warn", { vars: "all", args: "none", varsIgnorePattern: "config|_|cx|createReactClass" }],
"react/jsx-uses-vars" : "warn", "react/jsx-uses-vars" : "warn",
/** Fixable **/ /** Fixable **/

3765
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -1,7 +1,7 @@
{ {
"name": "homebrewery", "name": "homebrewery",
"description": "Create authentic looking D&D homebrews using only markdown", "description": "Create authentic looking D&D homebrews using only markdown",
"version": "3.20.0", "version": "3.20.1",
"type": "module", "type": "module",
"engines": { "engines": {
"npm": "^10.8.x", "npm": "^10.8.x",
@@ -61,8 +61,12 @@
"server" "server"
], ],
"transformIgnorePatterns": [ "transformIgnorePatterns": [
"node_modules/(?!nanoid/).*" "node_modules/(?!(nanoid|@exodus/bytes|parse5|@asamuzakjp|@csstools)/)"
], ],
"transform": {
"^.+\\.[jt]s$": "babel-jest",
"^.+\\.mjs$": "babel-jest"
},
"coveragePathIgnorePatterns": [ "coveragePathIgnorePatterns": [
"build/*" "build/*"
], ],
@@ -85,13 +89,13 @@
] ]
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.28.4", "@babel/core": "^7.29.0",
"@babel/plugin-transform-runtime": "^7.28.3", "@babel/plugin-transform-runtime": "^7.29.0",
"@babel/preset-env": "^7.28.3", "@babel/preset-env": "^7.29.0",
"@babel/preset-react": "^7.28.5", "@babel/preset-react": "^7.28.5",
"@babel/runtime": "^7.28.4", "@babel/runtime": "^7.28.4",
"@dmsnell/diff-match-patch": "^1.1.0", "@dmsnell/diff-match-patch": "^1.1.0",
"@googleapis/drive": "^19.2.0", "@googleapis/drive": "^20.1.0",
"@sanity/diff-match-patch": "^3.2.0", "@sanity/diff-match-patch": "^3.2.0",
"body-parser": "^2.2.0", "body-parser": "^2.2.0",
"classnames": "^2.5.1", "classnames": "^2.5.1",
@@ -100,13 +104,13 @@
"core-js": "^3.47.0", "core-js": "^3.47.0",
"cors": "^2.8.5", "cors": "^2.8.5",
"create-react-class": "^15.7.0", "create-react-class": "^15.7.0",
"dedent-tabs": "^0.10.3", "dedent": "^1.7.1",
"expr-eval": "^2.0.2", "expr-eval": "^2.0.2",
"express": "^5.1.0", "express": "^5.1.0",
"express-async-handler": "^1.2.0", "express-async-handler": "^1.2.0",
"express-static-gzip": "3.0.0", "express-static-gzip": "3.0.0",
"fflate": "^0.8.2", "fflate": "^0.8.2",
"fs-extra": "11.3.2", "fs-extra": "^11.3.3",
"hash-wasm": "^4.12.0", "hash-wasm": "^4.12.0",
"idb-keyval": "^6.2.2", "idb-keyval": "^6.2.2",
"js-yaml": "^4.1.1", "js-yaml": "^4.1.1",
@@ -122,10 +126,10 @@
"marked-nonbreaking-spaces": "^1.0.1", "marked-nonbreaking-spaces": "^1.0.1",
"marked-smartypants-lite": "^1.0.3", "marked-smartypants-lite": "^1.0.3",
"marked-subsuper-text": "^1.0.4", "marked-subsuper-text": "^1.0.4",
"marked-variables": "^1.0.4", "marked-variables": "^1.0.5",
"markedLegacy": "npm:marked@^0.3.19", "markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.30.1", "moment": "^2.30.1",
"mongoose": "^8.20.0", "mongoose": "^9.2.1",
"nanoid": "5.1.6", "nanoid": "5.1.6",
"nconf": "^0.13.0", "nconf": "^0.13.0",
"react": "^18.3.1", "react": "^18.3.1",
@@ -140,6 +144,7 @@
}, },
"devDependencies": { "devDependencies": {
"@stylistic/stylelint-plugin": "^4.0.0", "@stylistic/stylelint-plugin": "^4.0.0",
"babel-jest": "^30.2.0",
"babel-plugin-transform-import-meta": "^2.3.3", "babel-plugin-transform-import-meta": "^2.3.3",
"eslint": "^9.39.1", "eslint": "^9.39.1",
"eslint-plugin-jest": "^29.1.0", "eslint-plugin-jest": "^29.1.0",
@@ -147,6 +152,7 @@
"globals": "^16.4.0", "globals": "^16.4.0",
"jest": "^30.2.0", "jest": "^30.2.0",
"jest-expect-message": "^1.1.3", "jest-expect-message": "^1.1.3",
"jsdom": "^28.1.0",
"jsdom-global": "^3.0.2", "jsdom-global": "^3.0.2",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"stylelint": "^16.25.0", "stylelint": "^16.25.0",

12
server/admin.api.spec.js
View File

@@ -1,4 +1,5 @@
/*eslint max-lines: ["warn", {"max": 1000, "skipBlankLines": true, "skipComments": true}]*/ /*eslint max-lines: ["warn", {"max": 1000, "skipBlankLines": true, "skipComments": true}]*/
import mongoose from 'mongoose';
import supertest from 'supertest'; import supertest from 'supertest';
import HBApp from './app.js'; import HBApp from './app.js';
import { model as NotificationModel } from './notifications.model.js'; import { model as NotificationModel } from './notifications.model.js';
@@ -8,8 +9,19 @@ import { model as HomebrewModel } from './homebrew.model.js';
// Mimic https responses to avoid being redirected all the time // Mimic https responses to avoid being redirected all the time
const app = supertest.agent(HBApp).set('X-Forwarded-Proto', 'https'); const app = supertest.agent(HBApp).set('X-Forwarded-Proto', 'https');
let dbState;
describe('Tests for admin api', ()=>{ describe('Tests for admin api', ()=>{
beforeEach(()=>{
// Mock DB ready (for dbCheck middleware)
dbState = mongoose.connection.readyState;
mongoose.connection.readyState = 1;
});
afterEach(()=>{ afterEach(()=>{
// Restore DB ready state
mongoose.connection.readyState = dbState;
jest.resetAllMocks(); jest.resetAllMocks();
}); });

6
shared/markdown.js
View File

@@ -8,9 +8,9 @@ import MarkedAlignedParagraphs from 'marked-alignment-paragraphs';
import MarkedNonbreakingSpaces from 'marked-nonbreaking-spaces'; import MarkedNonbreakingSpaces from 'marked-nonbreaking-spaces';
import MarkedSubSuperText from 'marked-subsuper-text'; import MarkedSubSuperText from 'marked-subsuper-text';
import { markedVariables, import { markedVariables,
setMarkedVariablePage, setMarkedVariablePage,
setMarkedVariable, setMarkedVariable,
getMarkedVariable } from 'marked-variables'; getMarkedVariable } from 'marked-variables';
import { markedSmartypantsLite as MarkedSmartypantsLite } from 'marked-smartypants-lite'; import { markedSmartypantsLite as MarkedSmartypantsLite } from 'marked-smartypants-lite';
import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id'; import { gfmHeadingId as MarkedGFMHeadingId, resetHeadings as MarkedGFMResetHeadingIDs } from 'marked-gfm-heading-id';
import { markedEmoji as MarkedEmojis } from 'marked-emoji'; import { markedEmoji as MarkedEmojis } from 'marked-emoji';

6
shared/markdownLegacy.js
View File

@@ -1,5 +1,5 @@
const _ = require('lodash'); import _ from 'lodash';
const Markdown = require('markedLegacy'); import Markdown from 'markedLegacy';
const renderer = new Markdown.Renderer(); const renderer = new Markdown.Renderer();
//Processes the markdown within an HTML block if it's just a class-wrapper //Processes the markdown within an HTML block if it's just a class-wrapper
@@ -103,7 +103,7 @@ const voidTags = new Set([
]); ]);
module.exports = { export default {
marked : Markdown, marked : Markdown,
render : (rawBrewText)=>{ render : (rawBrewText)=>{
return Markdown( return Markdown(

6
tests/html/safeHTML.test.js
View File

@@ -1,7 +1,5 @@
import globalJsdom from 'jsdom-global';
globalJsdom();
require('jsdom-global')();
import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML'; import { safeHTML } from '../../client/homebrew/brewRenderer/safeHTML';
test('Exit if no document', function() { test('Exit if no document', function() {

2
tests/markdown/emojis.test.js
View File

@@ -1,5 +1,5 @@
import Markdown from 'markdown.js'; import Markdown from 'markdown.js';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
// Marked.js adds line returns after closing tags on some default tokens. // Marked.js adds line returns after closing tags on some default tokens.
// This removes those line returns for comparison sake. // This removes those line returns for comparison sake.

2
tests/markdown/mustache-syntax.test.js
View File

@@ -1,6 +1,6 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
import Markdown from 'markdown.js'; import Markdown from 'markdown.js';
// Marked.js adds line returns after closing tags on some default tokens. // Marked.js adds line returns after closing tags on some default tokens.

2
tests/markdown/variables.test.js
View File

@@ -1,6 +1,6 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
import Markdown from 'markdown.js'; import Markdown from 'markdown.js';
// Marked.js adds line returns after closing tags on some default tokens. // Marked.js adds line returns after closing tags on some default tokens.

16
themes/Legacy/5ePHB/snippets.js
View File

@@ -1,14 +1,14 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
const MagicGen = require('./snippets/magic.gen.js'); import MagicGen from './snippets/magic.gen.js';
const ClassTableGen = require('./snippets/classtable.gen.js'); import ClassTableGen from './snippets/classtable.gen.js';
const MonsterBlockGen = require('./snippets/monsterblock.gen.js'); import MonsterBlockGen from './snippets/monsterblock.gen.js';
const ClassFeatureGen = require('./snippets/classfeature.gen.js'); import ClassFeatureGen from './snippets/classfeature.gen.js';
const CoverPageGen = require('./snippets/coverpage.gen.js'); import CoverPageGen from './snippets/coverpage.gen.js';
const TableOfContentsGen = require('./snippets/tableOfContents.gen.js'); import TableOfContentsGen from './snippets/tableOfContents.gen.js';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
module.exports = [ export default [
{ {
groupName : 'Text Editor', groupName : 'Text Editor',

4
themes/Legacy/5ePHB/snippets/classfeature.gen.js
View File

@@ -1,6 +1,6 @@
const _ = require('lodash'); import _ from 'lodash';
module.exports = function(classname){ export default function(classname){
classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher', classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']); 'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']);

4
themes/Legacy/5ePHB/snippets/classtable.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const features = [ const features = [
'Astrological Botany', 'Astrological Botany',
@@ -50,7 +50,7 @@ const getFeature = (level)=>{
return res.join(', '); return res.join(', ');
}; };
module.exports = { export default {
full : function(){ full : function(){
const classname = _.sample(classnames); const classname = _.sample(classnames);

4
themes/Legacy/5ePHB/snippets/coverpage.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const titles = [ const titles = [
'The Burning Gallows', 'The Burning Gallows',
@@ -98,7 +98,7 @@ const subtitles = [
]; ];
module.exports = ()=>{ export default ()=>{
return `<style> return `<style>
.phb#p1{ text-align:center; } .phb#p1{ text-align:center; }
.phb#p1:after{ display:none; } .phb#p1:after{ display:none; }

8
themes/Legacy/5ePHB/snippets/fullclass.gen.js
View File

@@ -1,10 +1,10 @@
const _ = require('lodash'); import _ from 'lodash';
const ClassFeatureGen = require('./classfeature.gen.js'); import ClassFeatureGen from './classfeature.gen.js';
const ClassTableGen = require('./classtable.gen.js'); import ClassTableGen from './classtable.gen.js';
module.exports = function(){ export default function(){
const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher', const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']); 'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']);

4
themes/Legacy/5ePHB/snippets/magic.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const spellNames = [ const spellNames = [
'Astral Rite of Acne', 'Astral Rite of Acne',
@@ -48,7 +48,7 @@ const spellNames = [
'Ultimate Ritual of Mouthwash', 'Ultimate Ritual of Mouthwash',
]; ];
module.exports = { export default {
spellList : function(){ spellList : function(){
const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level']; const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];

4
themes/Legacy/5ePHB/snippets/monsterblock.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const genList = function(list, max){ const genList = function(list, max){
return _.sampleSize(list, _.random(0, max)).join(', ') || 'None'; return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';
@@ -137,7 +137,7 @@ const genAction = function(){
}; };
module.exports = { export default {
full : function(){ full : function(){
return `${[ return `${[

4
themes/Legacy/5ePHB/snippets/tableOfContents.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const getTOC = (pages)=>{ const getTOC = (pages)=>{
const add1 = (title, page)=>{ const add1 = (title, page)=>{
@@ -47,7 +47,7 @@ const getTOC = (pages)=>{
return res; return res;
}; };
module.exports = function(props){ export default function(props){
const pages = props.brew.text.split('\\page'); const pages = props.brew.text.split('\\page');
const TOC = getTOC(pages); const TOC = getTOC(pages);
const markdown = _.reduce(TOC, (r, g1, idx1)=>{ const markdown = _.reduce(TOC, (r, g1, idx1)=>{

2
themes/V3/5eDMG/snippets.js
View File

@@ -1,4 +1,4 @@
module.exports = [ export default [
]; ];

21
themes/V3/5ePHB/snippets.js
View File

@@ -1,17 +1,14 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
import MagicGen from './snippets/magic.gen.js';
import ClassTableGen from './snippets/classtable.gen.js';
import MonsterBlockGen from './snippets/monsterblock.gen.js';
import scriptGen from './snippets/script.gen.js';
import ClassFeatureGen from './snippets/classfeature.gen.js';
import CoverPageGen from './snippets/coverpage.gen.js';
import QuoteGen from './snippets/quote.gen.js';
import dedent from 'dedent';
const MagicGen = require('./snippets/magic.gen.js'); export default [
const ClassTableGen = require('./snippets/classtable.gen.js');
const MonsterBlockGen = require('./snippets/monsterblock.gen.js');
const scriptGen = require('./snippets/script.gen.js');
const ClassFeatureGen = require('./snippets/classfeature.gen.js');
const CoverPageGen = require('./snippets/coverpage.gen.js');
const QuoteGen = require('./snippets/quote.gen.js');
const dedent = require('dedent-tabs').default;
module.exports = [
{ {
groupName : 'Style Editor', groupName : 'Style Editor',
icon : 'fas fa-pencil-alt', icon : 'fas fa-pencil-alt',

6
themes/V3/5ePHB/snippets/classfeature.gen.js
View File

@@ -1,7 +1,7 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
module.exports = function(classname){ export default function(classname){
classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher', classname = _.sample(['archivist', 'fancyman', 'linguist', 'fletcher',
'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']); 'notary', 'berserker-typist', 'fishmongerer', 'manicurist', 'haberdasher', 'concierge']);

6
themes/V3/5ePHB/snippets/classtable.gen.js
View File

@@ -1,5 +1,5 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const features = [ const features = [
'Astrological Botany', 'Biochemical Sorcery', 'Civil Divination', 'Astrological Botany', 'Biochemical Sorcery', 'Civil Divination',
@@ -18,7 +18,7 @@ const classnames = [
'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper' 'Haberdasher', 'Manicurist', 'Netrunner', 'Weirkeeper'
]; ];
module.exports = { export default {
non : function(snippetClasses){ non : function(snippetClasses){
return dedent` return dedent`
{{${snippetClasses} {{${snippetClasses}

6
themes/V3/5ePHB/snippets/coverpage.gen.js
View File

@@ -1,5 +1,5 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const titles = [ const titles = [
'The Burning Gallows', 'The Ring of Nenlast', 'The Burning Gallows', 'The Ring of Nenlast',
@@ -78,7 +78,7 @@ const coverText = [
'Enter a world of wonder and danger, where you can find allies and enemies among the various races and factions that inhabit it. You can choose to join or oppose any of them, or forge your own path. The game world is alive and responsive to your actions.' 'Enter a world of wonder and danger, where you can find allies and enemies among the various races and factions that inhabit it. You can choose to join or oppose any of them, or forge your own path. The game world is alive and responsive to your actions.'
]; ];
module.exports = { export default {
front : function() { front : function() {
return dedent` return dedent`

9
themes/V3/5ePHB/snippets/fullclass.gen.js
View File

@@ -1,10 +1,9 @@
const _ = require('lodash'); import _ from 'lodash';
const ClassFeatureGen = require('./classfeature.gen.js'); import ClassFeatureGen from './classfeature.gen.js';
import ClassTableGen from './classtable.gen.js';
const ClassTableGen = require('./classtable.gen.js'); export default function(){
module.exports = function(){
const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher', const classname = _.sample(['Archivist', 'Fancyman', 'Linguist', 'Fletcher',
'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']); 'Notary', 'Berserker-Typist', 'Fishmongerer', 'Manicurist', 'Haberdasher', 'Concierge']);

4
themes/V3/5ePHB/snippets/magic.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const spellNames = [ const spellNames = [
'Astral Rite of Acne', 'Astral Rite of Acne',
@@ -54,7 +54,7 @@ const itemNames = [
'Staff of Endless Confetti', 'Staff of Endless Confetti',
]; ];
module.exports = { export default {
spellList : function(){ spellList : function(){
const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level']; const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];

6
themes/V3/5ePHB/snippets/monsterblock.gen.js
View File

@@ -1,5 +1,5 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
const genList = function(list, max){ const genList = function(list, max){
return _.sampleSize(list, _.random(0, max)).join(', ') || 'None'; return _.sampleSize(list, _.random(0, max)).join(', ') || 'None';
@@ -152,7 +152,7 @@ const genAction = function(){
}; };
module.exports = { export default {
monster : function(classes, genLines){ monster : function(classes, genLines){
return dedent` return dedent`

4
themes/V3/5ePHB/snippets/quote.gen.js
View File

@@ -1,4 +1,4 @@
const _ = require('lodash'); import _ from 'lodash';
const quotes = [ const quotes = [
'The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn\'t help but feel a surge of excitement mixed with fear. This was no ordinary blade.', 'The sword glinted in the dim light, its edges keen and deadly. As the adventurer reached for it, he couldn\'t help but feel a surge of excitement mixed with fear. This was no ordinary blade.',
@@ -40,7 +40,7 @@ const books = [
'Frost and Fury', 'Frost and Fury',
]; ];
module.exports = ()=>{ export default ()=>{
return ` return `
{{quote {{quote
${_.sample(quotes)} ${_.sample(quotes)}

6
themes/V3/5ePHB/snippets/script.gen.js
View File

@@ -1,7 +1,7 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
module.exports = { export default {
dwarvish : ()=>{ dwarvish : ()=>{
return dedent `##### Dwarvish Runes: Sample Alphabet return dedent `##### Dwarvish Runes: Sample Alphabet
{{runeTable,wide,frame,font-family:Davek {{runeTable,wide,frame,font-family:Davek

4
themes/V3/5ePHB/snippets/watercolor.gen.js
View File

@@ -1,5 +1,5 @@
const _ = require('lodash'); import _ from 'lodash';
module.exports = ()=>{ export default ()=>{
return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`; return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
}; };

1
themes/V3/5ePHB/style.less
View File

@@ -615,6 +615,7 @@
text-align : center; text-align : center;
-webkit-text-stroke : 0.1cm black; -webkit-text-stroke : 0.1cm black;
paint-order : stroke; paint-order : stroke;
text-transform : none;
} }
.logo { .logo {
position : absolute; position : absolute;

98
themes/V3/Blank/snippets.js
View File

@@ -1,19 +1,18 @@
/* eslint-disable max-lines */ /* eslint-disable max-lines */
import dedent from 'dedent';
import WatercolorGen from './snippets/watercolor.gen.js';
import ImageMaskGen from './snippets/imageMask.gen.js';
import FooterGen from './snippets/footer.gen.js';
import LicenseGenWotC from './snippets/licenseWotC.gen.js';
import LicenseGenGNU from './snippets/licenseGNU.gen.js';
import LicenseGen from './snippets/license.gen.js';
import LicenseGenAelf from './snippets/licenseAELF.js';
import LicenseDTTRPGGCC from './snippets/licenseDTRPGCC.gen.js';
import LicenseMongoosePublishing from './snippets/licenseMongoose.gen.js';
import TableOfContentsGen from './snippets/tableOfContents.gen.js';
import indexGen from './snippets/index.gen.js';
const WatercolorGen = require('./snippets/watercolor.gen.js'); export default [
const ImageMaskGen = require('./snippets/imageMask.gen.js');
const FooterGen = require('./snippets/footer.gen.js');
const LicenseGenWotC = require('./snippets/licenseWotC.gen.js');
const LicenseGenGNU = require('./snippets/licenseGNU.gen.js');
const LicenseGen = require('./snippets/license.gen.js');
const LicenseGenAelf = require('./snippets/licenseAELF.js');
const LicenseDTTRPGGCC = require('./snippets/licenseDTRPGCC.gen.js');
const LicenseMongoosePublishing = require('./snippets/licenseMongoose.gen.js');
const dedent = require('dedent-tabs').default;
const TableOfContentsGen = require('./snippets/tableOfContents.gen.js');
const indexGen = require('./snippets/index.gen.js');
module.exports = [
{ {
groupName : 'Text Editor', groupName : 'Text Editor',
@@ -209,7 +208,7 @@ module.exports = [
view : 'text', view : 'text',
snippets : [ snippets : [
{ {
name : 'AELF', name : 'AELF',
subsnippets : [ subsnippets : [
{ {
name : 'Title Page Declaration', name : 'Title Page Declaration',
@@ -329,51 +328,51 @@ module.exports = [
] ]
}, },
{ {
name : 'DTRPG Community Content', name : 'DTRPG Community Content',
incon : 'fab fa-dtrpg', incon : 'fab fa-dtrpg',
subsnippets : [ subsnippets : [
{ {
name : "Chronicle System Guild Colophon", name : 'Chronicle System Guild Colophon',
gen : LicenseDTTRPGGCC.greenRoninChronicleSystemGuildColophon, gen : LicenseDTTRPGGCC.greenRoninChronicleSystemGuildColophon,
}, },
{ {
name : 'Green Ronin\'s Age Creator\'s Alliance', name : 'Green Ronin\'s Age Creator\'s Alliance',
subsnippets : [ subsnippets : [
{ {
name : "Required Text", name : 'Required Text',
subsnippets : [ subsnippets : [
{ {
name : "Colophon", name : 'Colophon',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceColophon, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceColophon,
}, },
{ {
name : "Cover", name : 'Cover',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceCover, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceCover,
}, },
] ]
}, },
{ {
name : "Logos", name : 'Logos',
subsnippets : [ subsnippets : [
{ {
name : "Age", name : 'Age',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceLogo, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceLogo,
}, },
{ {
name : "Blue Rose", name : 'Blue Rose',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceBlueRoseLogo, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceBlueRoseLogo,
}, },
{ {
name : "Fantasy Age Compatible", name : 'Fantasy Age Compatible',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceFantasyAgeCompatible, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceFantasyAgeCompatible,
}, },
{ {
name : "Modern AGE Compatible", name : 'Modern AGE Compatible',
gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceModernAGECompatible, gen : LicenseDTTRPGGCC.greenRoninAgeCreatorsAllianceModernAGECompatible,
}, },
] ]
@@ -382,30 +381,30 @@ module.exports = [
}, },
{ {
name : "Hero Kid\'s Creators Guild", name : 'Hero Kid\'s Creators Guild',
subsnippets : [ subsnippets : [
{ {
name: "Required Text", name : 'Required Text',
subsnippets : [ subsnippets : [
{ {
name : "heroForgeHeroKidsCreatorsGuildColophon", name : 'heroForgeHeroKidsCreatorsGuildColophon',
gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildColophon, gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildColophon,
}, },
{ {
name : "heroForgeHeroKidsCreatorsGuildSuperKidsColophon", name : 'heroForgeHeroKidsCreatorsGuildSuperKidsColophon',
gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsColophon, gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsColophon,
}, },
{ {
name : "heroForgeHeroKidsCreatorsGuildCover", name : 'heroForgeHeroKidsCreatorsGuildCover',
gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildCover, gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildCover,
}, },
{ {
name : "heroForgeHeroKidsCreatorsGuildSuperKidsCover", name : 'heroForgeHeroKidsCreatorsGuildSuperKidsCover',
gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsCover, gen : LicenseDTTRPGGCC.heroForgeHeroKidsCreatorsGuildSuperKidsCover,
}, },
] ]
@@ -414,33 +413,33 @@ module.exports = [
}, },
{ {
name : "Travellers' Aid Society", name : 'Travellers\' Aid Society',
subsnippets : [ subsnippets : [
{ {
name : "Legal Statement", name : 'Legal Statement',
gen : LicenseMongoosePublishing.TASLegal, gen : LicenseMongoosePublishing.TASLegal,
} }
] ]
}, },
{ {
name : "Super-Powered by M&M", name : 'Super-Powered by M&M',
subsnippets : [ subsnippets : [
{ {
name : "Required Text", name : 'Required Text',
subsnippets : [ subsnippets : [
{ {
name : "Colophon", name : 'Colophon',
gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMColophon, gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMColophon,
}, },
{ {
name : "Cover", name : 'Cover',
gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMCover, gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMCover,
}, },
{ {
name : "Section 15", name : 'Section 15',
gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMSection15, gen : LicenseDTTRPGGCC.greenRoninSuperPoweredMMSection15,
}, },
] ]
@@ -589,6 +588,21 @@ module.exports = [
}, },
{
name : 'True 20',
subsnippets : [
{
name : 'OGL 1.0 Section 15',
gen : LicenseGen.grTrue20Sec15,
},
{
name : 'True20 Logo',
gen : LicenseGen.grTrue20CompatLogo,
}
]
},
{ {
name : 'Wizards of the Coast', name : 'Wizards of the Coast',
icon : 'fab fa-wizards-of-the-coast', icon : 'fab fa-wizards-of-the-coast',

2
themes/V3/Blank/snippets/footer.gen.js
View File

@@ -1,6 +1,6 @@
import Markdown from '../../../../shared/markdown.js'; import Markdown from '../../../../shared/markdown.js';
module.exports = { export default {
createFooterFunc : function(headerSize=1){ createFooterFunc : function(headerSize=1){
return (props)=>{ return (props)=>{
const cursorPos = props.cursorPos; const cursorPos = props.cursorPos;

6
themes/V3/Blank/snippets/imageMask.gen.js
View File

@@ -1,7 +1,7 @@
const _ = require('lodash'); import _ from 'lodash';
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
module.exports = { export default {
center : ()=>{ center : ()=>{
return dedent` return dedent`
{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0 {{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0

4
themes/V3/Blank/snippets/index.gen.js
View File

@@ -1,6 +1,6 @@
const dedent = require('dedent-tabs').default; import dedent from 'dedent';
module.exports = ()=>{ export default ()=>{
return dedent` return dedent`
{{index,wide,columns:5; {{index,wide,columns:5;
##### Index ##### Index

50
themes/V3/Blank/snippets/license.gen.js
View File

File diff suppressed because one or more lines are too long

6
themes/V3/Blank/snippets/licenseAELF.js
View File

@@ -1,9 +1,9 @@
/* eslint-disable max-lines */
const dedent = require('dedent'); import dedent from 'dedent';
// AELF License // AELF License
module.exports = { export default {
aelfTitleNotice : function() { aelfTitleNotice : function() {
return `This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the views of Mythmere Games LLC any other contributor.`; return `This work includes AELF Open Gaming Content, which may only be used under the terms of the AELF Open License version 1.0a. This product is not endorsed or reviewed by Mythmere Games LLC or any other contributor of AELF Open Gaming Content and does not represent the views of Mythmere Games LLC any other contributor.`;
}, },

Some files were not shown because too many files have changed in this diff Show More