f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00
Code Wiki Activity

Merge branch 'master' into pr/1759

Browse Source
This commit is contained in:
Trevor Buckner
2021-12-09 22:16:56 -05:00
parent fec6aacee5 f6eab47ab8
commit 6be4fcefdb
22 changed files with 2226 additions and 1671 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Dockerfile
View File

@@ -1,4 +1,5 @@
FROM node:14.15
FROM node:16.11-alpine
RUN apk --no-cache add git
ENV NODE_ENV=docker

82
changelog.md
View File

@@ -3,11 +3,12 @@ h5 {
font-size: .35cm !important;
}
.taskList li {
list-style-type : none;
.page ul ul {
margin-left: 0px;
}
.taskList li input {
list-style-type : none;
margin-left : -0.52cm;
transform: translateY(.05cm);
filter: brightness(1.1) drop-shadow(1px 2px 1px #222);
@@ -31,9 +32,84 @@ pre {
```
## changelog
To see 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).
### Tuesday 07/12/2021 - v3.0.5
{{taskList
* [x] Fixed paragraph spacing for **note** and **descriptive** boxes in V3.
Fixes issues: [#1836](https://github.com/naturalcrit/homebrewery/issues/1836)
* [x] Added a whole bunch of hotkeys:
* Page Break `CTRL + ENTER`
* Column Break `CTRL + SHIFT + ENTER`
* Bulleted Lists `CTRL + L`
* Numbered Lists `CTRL + SHIFT + L`
* Headers `CTRL + SHIFT + (1-6)`
* Underline `CTRL + U`
* Link `CTRL + K`
* Non-breaking space (\ ) `CTRL + .`
* Add Horizontal Space `CTRL + SHIFT + .`
* Remove Horizontal Space `CTRL + SHIFT + ,`
* Curly Span `CTRL + M`
* Curly Div `CTRL + SHIFT + M`
* [x] Fixed page numbers in the editor panel getting scrambled when scrolling up and down.
* [x] Faster swapping between tabs on long brews.
* [x] Better error messages for common issue with Google Drive credentials expiring.
}}
### Wednesday 17/11/2021 - v3.0.4
{{taskList
* [x] Fixed incorrect sorting of Google brews by page count and views on the user page.
Fixes issues: [#1793](https://github.com/naturalcrit/homebrewery/issues/1793)
* [x] Added code folding! Only on a page-level for now. Hotkeys `CTRL + [` and `CTRL + ]` to fold/unfold all pages. (Thanks jeddai, new contributor!)
Fixes issues: [#629](https://github.com/naturalcrit/homebrewery/issues/629)
* [x] Fixed rendering issues due to the latest Chrome update to version 96. (Also thanks to jeddai!)
Fixes issues: [#1828](https://github.com/naturalcrit/homebrewery/issues/1828)
}}
### Wednesday 27/10/2021 - v3.0.3
{{taskList
* [x] Moved **Post To Reddit** button from {{fa,fa-info-circle}} **Properties** menu to the **SHARE** {{fa,fa-share-alt}} button as a dropdown.
* [x] Added a **Copy URL** button to the **SHARE** {{fa,fa-share-alt}} button as a dropdown.
* [x] Fixed pages being printed directly from `/new` not recognizing the V3 renderer.
Fixes issues: [#1702](https://github.com/naturalcrit/homebrewery/issues/1702)
* [x] Updated links to [r/UnearthedArcana](https://www.reddit.com/r/UnearthedArcana/) on home page.
Fixes issues: [#1744](https://github.com/naturalcrit/homebrewery/issues/1744)
* [x] Added a [FAQ page](https://homebrewery.naturalcrit.com/faq).
Fixes issues: [#810](https://github.com/naturalcrit/homebrewery/issues/810)
* [x] Added {{fa,fa-undo}} **Undo** and {{fa,fa-redo}} **Redo** buttons to the snippet bar.
* [x] Switching between the {{fa,fa-beer}} **Brew** and {{fa,fa-paint-brush}} **Style** tabs no longer loses your scroll position or undo history.
Fixes issues: [#1735](https://github.com/naturalcrit/homebrewery/issues/1735)
* [x] Divider bar between editor and preview panels can no longer be dragged off the edge of the screen.
Fixes issues: [#1674](https://github.com/naturalcrit/homebrewery/issues/1674)
}}
### Wednesday 06/10/2021 - v3.0.2
{{taskList
* [x] Fixed V3 **EDITOR → QR Code** snippet not working on `/new` (unsaved) pages.

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

@@ -1,3 +1,4 @@
/*eslint max-lines: ["warn", {"max": 300, "skipBlankLines": true, "skipComments": true}]*/
require('./editor.less');
const React = require('react');
const createClass = require('create-react-class');
@@ -59,6 +60,10 @@ const Editor = createClass({
window.removeEventListener('resize', this.updateEditorSize);
},
componentDidUpdate : function() {
this.highlightCustomMarkdown();
},
updateEditorSize : function() {
if(this.refs.codeEditor) {
let paneHeight = this.refs.main.parentNode.clientHeight;
@@ -102,67 +107,69 @@ const Editor = createClass({
if(this.state.view === 'text') {
const codeMirror = this.refs.codeEditor.codeMirror;
//reset custom text styles
const customHighlights = codeMirror.getAllMarks();
for (let i=0;i<customHighlights.length;i++) customHighlights[i].clear();
codeMirror.operation(()=>{ // Batch CodeMirror styling
//reset custom text styles
const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
let editorPageCount = 2; // start page count from page 2
//reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background');
codeMirror.removeLineClass(lineNumber, 'text');
_.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
// Legacy Codemirror styling
if(this.props.renderer == 'legacy') {
if(line.includes('\\page')){
//reset custom line styles
codeMirror.removeLineClass(lineNumber, 'background');
codeMirror.removeLineClass(lineNumber, 'text');
// Styling for \page breaks
if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
(this.props.renderer == 'V3' && line.match(/^\\page$/))) {
// add back the original class 'background' but also add the new class '.pageline'
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
r.push(lineNumber);
}
}
const pageCountElement = Object.assign(document.createElement('span'), {
className : 'editor-page-count',
textContent : editorPageCount
});
codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
// New Codemirror styling for V3 renderer
if(this.props.renderer == 'V3') {
if(line.match(/^\\page$/)){
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
r.push(lineNumber);
}
editorPageCount += 1;
};
if(line.match(/^\\column$/)){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
r.push(lineNumber);
}
// Highlight inline spans {{content}}
if(line.includes('{{') && line.includes('}}')){
const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
let match;
let blockCount = 0;
while ((match = regex.exec(line)) != null) {
if(match[0].startsWith('{')) {
blockCount += 1;
} else {
blockCount -= 1;
}
if(blockCount < 0) {
blockCount = 0;
continue;
}
codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
// New Codemirror styling for V3 renderer
if(this.props.renderer == 'V3') {
if(line.match(/^\\column$/)){
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
}
} else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
// Highlight block divs {{\n Content \n}}
let endCh = line.length+1;
const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
if(match)
endCh = match.index+match[0].length;
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
// Highlight inline spans {{content}}
if(line.includes('{{') && line.includes('}}')){
const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
let match;
let blockCount = 0;
while ((match = regex.exec(line)) != null) {
if(match[0].startsWith('{')) {
blockCount += 1;
} else {
blockCount -= 1;
}
if(blockCount < 0) {
blockCount = 0;
continue;
}
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('}}')){
// Highlight block divs {{\n Content \n}}
let endCh = line.length+1;
const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
if(match)
endCh = match.index+match[0].length;
codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
}
}
}
return r;
}, []);
return lineNumbers;
});
});
}
},
@@ -176,30 +183,60 @@ const Editor = createClass({
this.refs.codeEditor?.updateSize();
},
//Called by CodeEditor after document switch, so Snippetbar can refresh UndoHistory
rerenderParent : function (){
this.forceUpdate();
},
renderEditor : function(){
if(this.isText()){
return <CodeEditor key='text'
ref='codeEditor'
language='gfm'
value={this.props.brew.text}
onChange={this.props.onTextChange} />;
return <>
<CodeEditor key='codeEditor'
ref='codeEditor'
language='gfm'
view={this.state.view}
value={this.props.brew.text}
onChange={this.props.onTextChange}
rerenderParent={this.rerenderParent} />
</>;
}
if(this.isStyle()){
return <CodeEditor key='style'
ref='codeEditor'
language='css'
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
onChange={this.props.onStyleChange} />;
return <>
<CodeEditor key='codeEditor'
ref='codeEditor'
language='css'
view={this.state.view}
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
onChange={this.props.onStyleChange}
rerenderParent={this.rerenderParent} />
</>;
}
if(this.isMeta()){
return <MetadataEditor
metadata={this.props.brew}
onChange={this.props.onMetaChange} />;
return <>
<CodeEditor key='codeEditor'
view={this.state.view}
style={{ display: 'none' }}
rerenderParent={this.rerenderParent} />
<MetadataEditor
metadata={this.props.brew}
onChange={this.props.onMetaChange} />
</>;
}
},
redo : function(){
return this.refs.codeEditor?.redo();
},
historySize : function(){
return this.refs.codeEditor?.historySize();
},
undo : function(){
return this.refs.codeEditor?.undo();
},
render : function(){
this.highlightCustomMarkdown();
return (
<div className='editor' ref='main'>
<SnippetBar
@@ -208,7 +245,10 @@ const Editor = createClass({
onViewChange={this.handleViewChange}
onInject={this.handleInject}
showEditButtons={this.props.showEditButtons}
renderer={this.props.renderer} />
renderer={this.props.renderer}
undo={this.undo}
redo={this.redo}
historySize={this.historySize()} />
{this.renderEditor()}
</div>

24
client/homebrew/editor/editor.less
View File

@@ -5,17 +5,13 @@
.codeEditor{
height : 100%;
counter-reset : page;
counter-increment : page;
.pageLine{
background : #33333328;
border-top : #339 solid 1px;
&:after{
content : counter(page);
counter-increment : page;
float : right;
color : gray;
}
}
.editor-page-count{
color : grey;
float : right;
}
.columnSplit{
font-style : italic;
@@ -50,4 +46,16 @@
.tooltipLeft("Jump to brew page");
}
.editorToolbar{
position: absolute;
top: 5px;
left: 50%;
color: black;
font-size: 13px;
z-index: 9;
span {
padding: 2px 5px;
}
}
}

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

@@ -22,7 +22,10 @@ const Snippetbar = createClass({
onInject : ()=>{},
onToggle : ()=>{},
showEditButtons : true,
renderer : 'legacy'
renderer : 'legacy',
undo : ()=>{},
redo : ()=>{},
historySize : ()=>{}
};
},
@@ -60,6 +63,15 @@ const Snippetbar = createClass({
if(!this.props.showEditButtons) return;
return <div className='editors'>
<div className={`editorTool undo ${this.props.historySize.undo ? 'active' : ''}`}
onClick={this.props.undo} >
<i className='fas fa-undo' />
</div>
<div className={`editorTool redo ${this.props.historySize.redo ? 'active' : ''}`}
onClick={this.props.redo} >
<i className='fas fa-redo' />
</div>
<div className='divider'></div>
<div className={cx('text', { selected: this.props.view === 'text' })}
onClick={()=>this.props.onViewChange('text')}>
<i className='fa fa-beer' />

25
client/homebrew/editor/snippetbar/snippetbar.less
View File

@@ -10,7 +10,7 @@
top : 0px;
right : 0px;
height : @menuHeight;
width : 90px;
width : 125px;
justify-content : space-between;
&>div{
height : @menuHeight;
@@ -30,6 +30,29 @@
&.meta{
.tooltipLeft('Properties');
}
&.undo{
.tooltipLeft('Undo');
font-size : 0.75em;
color : grey;
&.active{
color : black;
}
}
&.redo{
.tooltipLeft('Redo');
font-size : 0.75em;
color : grey;
&.active{
color : black;
}
}
&.divider {
background: linear-gradient(#000, #000) no-repeat center/1px 100%;
width: 5px;
&:hover{
background-color: inherit;
}
}
}
}
.snippetBarButton{

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

@@ -349,14 +349,14 @@ const EditPage = createClass({
</Nav.item>;
}
if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer' onClick={this.clearErrors}>
Looks like your Google credentials have
expired! Visit the log in page to sign out
and sign back in with Google
to save this to Google Drive!
expired! Visit our log in page to sign out
and sign back in with Google,
then try saving again!
<a target='_blank' rel='noopener noreferrer'
href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
<div className='confirm'>

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

@@ -45,47 +45,44 @@ const NewPage = createClass({
},
getInitialState : function() {
const brew = this.props.brew;
if(typeof window !== 'undefined') { //Load from localStorage if in client browser
const brewStorage = localStorage.getItem(BREWKEY);
const styleStorage = localStorage.getItem(STYLEKEY);
const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
if(!brew.text || !brew.style){
brew.text = brew.text || (brewStorage ?? '');
brew.style = brew.style || (styleStorage ?? undefined);
// brew.title = metaStorage?.title || this.state.brew.title;
// brew.description = metaStorage?.description || this.state.brew.description;
brew.renderer = metaStorage?.renderer || brew.renderer;
}
}
return {
brew : {
text : this.props.brew.text || '',
style : this.props.brew.style || undefined,
text : brew.text || '',
style : brew.style || undefined,
gDrive : false,
title : this.props.brew.title || '',
description : this.props.brew.description || '',
tags : this.props.brew.tags || '',
title : brew.title || '',
description : brew.description || '',
tags : brew.tags || '',
published : false,
authors : [],
systems : this.props.brew.systems || [],
renderer : this.props.brew.renderer || 'legacy'
systems : brew.systems || [],
renderer : brew.renderer || 'legacy'
},
isSaving : false,
saveGoogle : (global.account && global.account.googleId ? true : false),
errors : null,
htmlErrors : Markdown.validate(this.props.brew.text)
htmlErrors : Markdown.validate(brew.text)
};
},
componentDidMount : function() {
const brewStorage = localStorage.getItem(BREWKEY);
const styleStorage = localStorage.getItem(STYLEKEY);
const metaStorage = JSON.parse(localStorage.getItem(METAKEY));
const brew = this.state.brew;
if(!this.state.brew.text || !this.state.brew.style){
brew.text = this.state.brew.text || (brewStorage ?? '');
brew.style = this.state.brew.style || (styleStorage ?? undefined);
// brew.title = metaStorage?.title || this.state.brew.title;
// brew.description = metaStorage?.description || this.state.brew.description;
brew.renderer = metaStorage?.renderer || this.state.brew.renderer;
}
this.setState((prevState)=>({
brew : brew,
htmlErrors : Markdown.validate(prevState.brew.text)
}));
document.addEventListener('keydown', this.handleControlKeys);
},
componentWillUnmount : function() {
@@ -229,14 +226,14 @@ const NewPage = createClass({
</Nav.item>;
}
if(this.state.errors.status == '403' && this.state.errors.response.body.errors[0].reason == 'insufficientPermissions'){
if(this.state.errors.response.req.url.match(/^\/api\/.*Google.*$/m)){
return <Nav.item className='save error' icon='fas fa-exclamation-triangle'>
Oops!
<div className='errorContainer' onClick={this.clearErrors}>
Looks like your Google credentials have
expired! Visit the log in page to sign out
and sign back in with Google
to save this to Google Drive!
expired! Visit our log in page to sign out
and sign back in with Google,
then try saving again!
<a target='_blank' rel='noopener noreferrer'
href={`https://www.naturalcrit.com/login?redirect=${this.state.url}`}>
<div className='confirm'>

3
config/default.json
View File

@@ -2,5 +2,6 @@
"host" : "homebrewery.local.naturalcrit.com:8000",
"naturalcrit_url" : "local.naturalcrit.com:8010",
"secret" : "secret",
"web_port" : 8000
"web_port" : 8000,
"enable_v3" : true
}

3072
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

27
package.json
View File

@@ -1,7 +1,7 @@
{
"name": "homebrewery",
"description": "Create authentic looking D&D homebrews using only markdown",
"version": "3.0.2",
"version": "3.0.5",
"engines": {
"node": "16.11.x"
},
@@ -40,28 +40,29 @@
]
},
"dependencies": {
"@babel/core": "^7.15.8",
"@babel/plugin-transform-runtime": "^7.15.8",
"@babel/preset-env": "^7.15.8",
"@babel/preset-react": "^7.14.5",
"@babel/core": "^7.16.0",
"@babel/plugin-transform-runtime": "^7.16.4",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"body-parser": "^1.19.0",
"classnames": "^2.3.1",
"codemirror": "^5.63.3",
"cookie-parser": "^1.4.5",
"codemirror": "^5.64.0",
"cookie-parser": "^1.4.6",
"create-react-class": "^15.7.0",
"dedent-tabs": "^0.10.1",
"express": "^4.17.1",
"express-async-handler": "^1.1.4",
"express-async-handler": "^1.2.0",
"express-static-gzip": "2.1.1",
"fs-extra": "10.0.0",
"googleapis": "88.2.0",
"googleapis": "92.0.0",
"js-yaml": "^4.1.0",
"jwt-simple": "^0.5.6",
"less": "^3.13.1",
"lodash": "^4.17.21",
"marked": "3.0.7",
"marked": "3.0.8",
"markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.29.1",
"mongoose": "^6.0.11",
"mongoose": "^6.0.15",
"nanoid": "3.1.30",
"nconf": "^0.11.3",
"prop-types": "15.7.2",
@@ -75,8 +76,8 @@
"vitreum": "git+https://git@github.com/calculuschild/vitreum.git"
},
"devDependencies": {
"eslint": "^8.0.1",
"eslint-plugin-react": "^7.26.1",
"eslint": "^8.4.1",
"eslint-plugin-react": "^7.27.1",
"pico-check": "^2.1.3"
}
}

2
scripts/project.json
View File

@@ -12,6 +12,8 @@
"codemirror/mode/gfm/gfm.js",
"codemirror/mode/css/css.js",
"codemirror/mode/javascript/javascript.js",
"codemirror/addon/fold/foldcode.js",
"codemirror/addon/fold/foldgutter.js",
"moment",
"superagent",
"marked"

18
server.js
View File

@@ -2,6 +2,7 @@
const _ = require('lodash');
const jwt = require('jwt-simple');
const express = require('express');
const yaml = require('js-yaml');
const app = express();
const homebrewApi = require('./server/homebrew.api.js');
@@ -32,7 +33,7 @@ const getBrewFromId = asyncHandler(async (id, accessType)=>{
if(accessType == 'raw') {
return brew;
}
splitTextAndStyle(brew);
splitTextStyleAndMetadata(brew);
return brew;
});
@@ -45,8 +46,15 @@ const sanitizeBrew = (brew, full=false)=>{
return brew;
};
const splitTextAndStyle = (brew)=>{
const splitTextStyleAndMetadata = (brew)=>{
brew.text = brew.text.replaceAll('\r\n', '\n');
if(brew.text.startsWith('```metadata')) {
const index = brew.text.indexOf('```\n\n');
const metadataSection = brew.text.slice(12, index - 1);
const metadata = yaml.load(metadataSection);
Object.assign(brew, _.pick(metadata, ['title', 'description', 'tags', 'systems', 'renderer']));
brew.text = brew.text.slice(index + 5);
}
if(brew.text.startsWith('```css')) {
const index = brew.text.indexOf('```\n\n');
brew.style = brew.text.slice(7, index - 1);
@@ -128,7 +136,7 @@ app.get('/v3_preview', async (req, res, next)=>{
text : welcomeTextV3,
renderer : 'V3'
};
splitTextAndStyle(brew);
splitTextStyleAndMetadata(brew);
req.brew = brew;
return next();
});
@@ -140,7 +148,7 @@ app.get('/changelog', async (req, res, next)=>{
text : changelogText,
renderer : 'V3'
};
splitTextAndStyle(brew);
splitTextStyleAndMetadata(brew);
req.brew = brew;
return next();
});
@@ -152,7 +160,7 @@ app.get('/faq', async (req, res, next)=>{
text : faqText,
renderer : 'V3'
};
splitTextAndStyle(brew);
splitTextStyleAndMetadata(brew);
req.brew = brew;
return next();
});

4
server/googleActions.js
View File

@@ -120,10 +120,10 @@ GoogleActions = {
updatedAt : file.modifiedTime,
gDrive : true,
googleId : file.id,
pageCount : file.properties.pageCount,
pageCount : parseInt(file.properties.pageCount),
title : file.properties.title,
description : file.description,
views : file.properties.views,
views : parseInt(file.properties.views),
tags : '',
published : file.properties.published ? file.properties.published == 'true' : false,
authors : [req.account.username], //TODO: properly save and load authors to google drive

37
server/homebrew.api.js
View File

@@ -4,6 +4,7 @@ const router = require('express').Router();
const zlib = require('zlib');
const GoogleActions = require('./googleActions.js');
const Markdown = require('../shared/naturalcrit/markdown.js');
const yaml = require('js-yaml');
// const getTopBrews = (cb) => {
// HomebrewModel.find().sort({ views: -1 }).limit(5).exec(function(err, brews) {
@@ -11,6 +12,22 @@ const Markdown = require('../shared/naturalcrit/markdown.js');
// });
// };
const mergeBrewText = (brew)=>{
let text = brew.text;
if(brew.style !== undefined) {
text = `\`\`\`css\n` +
`${brew.style || ''}\n` +
`\`\`\`\n\n` +
`${text}`;
}
const metadata = _.pick(brew, ['title', 'description', 'tags', 'systems', 'renderer']);
text = `\`\`\`metadata\n` +
`${yaml.dump(metadata)}\n` +
`\`\`\`\n\n` +
`${text}`;
return text;
};
const MAX_TITLE_LENGTH = 100;
const getGoodBrewTitle = (text)=>{
@@ -28,16 +45,6 @@ const excludePropsFromUpdate = (brew)=>{
return brew;
};
const mergeBrewText = (text, style)=>{
if(typeof style !== 'undefined') {
text = `\`\`\`css\n` +
`${style}\n` +
`\`\`\`\n\n` +
`${text}`;
}
return text;
};
const newBrew = (req, res)=>{
const brew = req.body;
@@ -46,7 +53,7 @@ const newBrew = (req, res)=>{
}
brew.authors = (req.account) ? [req.account.username] : [];
brew.text = mergeBrewText(brew.text, brew.style);
brew.text = mergeBrewText(brew);
delete brew.editId;
delete brew.shareId;
@@ -75,7 +82,7 @@ const updateBrew = (req, res)=>{
.then((brew)=>{
const updateBrew = excludePropsFromUpdate(req.body);
brew = _.merge(brew, updateBrew);
brew.text = mergeBrewText(brew.text, brew.style);
brew.text = mergeBrewText(brew);
// Compress brew text to binary before saving
brew.textBin = zlib.deflateRawSync(brew.text);
@@ -143,7 +150,7 @@ const newGoogleBrew = async (req, res, next)=>{
}
brew.authors = (req.account) ? [req.account.username] : [];
brew.text = mergeBrewText(brew.text, brew.style);
brew.text = mergeBrewText(brew);
delete brew.editId;
delete brew.shareId;
@@ -165,13 +172,13 @@ const updateGoogleBrew = async (req, res, next)=>{
try { oAuth2Client = GoogleActions.authCheck(req.account, res); } catch (err) { return res.status(err.status).send(err.message); }
const brew = excludePropsFromUpdate(req.body);
brew.text = mergeBrewText(brew.text, brew.style);
brew.text = mergeBrewText(brew);
try {
const updatedBrew = await GoogleActions.updateGoogleBrew(oAuth2Client, brew);
return res.status(200).send(updatedBrew);
} catch (err) {
return res.status(err.response.status).send(err);
return res.status(err.response?.status || 500).send(err);
}
};

267
shared/naturalcrit/codeEditor/codeEditor.jsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable max-lines */
require('./codeEditor.less');
const React = require('react');
const createClass = require('create-react-class');
@@ -13,6 +14,13 @@ if(typeof navigator !== 'undefined'){
require('codemirror/mode/gfm/gfm.js'); //Github flavoured markdown
require('codemirror/mode/css/css.js');
require('codemirror/mode/javascript/javascript.js');
//Addons
require('codemirror/addon/fold/foldcode.js');
require('codemirror/addon/fold/foldgutter.js');
const foldCode = require('./fold-code');
foldCode.registerHomebreweryHelper(CodeMirror);
}
const CodeEditor = createClass({
@@ -25,37 +33,116 @@ const CodeEditor = createClass({
};
},
getInitialState : function() {
return {
docs : {}
};
},
componentDidMount : function() {
this.buildEditor();
const newDoc = CodeMirror.Doc(this.props.value, this.props.language);
this.codeMirror.swapDoc(newDoc);
},
componentDidUpdate : function(prevProps) {
if(prevProps.language !== this.props.language){ //rebuild editor when switching tabs
this.buildEditor();
}
if(this.codeMirror && this.codeMirror.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
if(prevProps.view !== this.props.view){ //view changed; swap documents
let newDoc;
if(!this.state.docs[this.props.view]) {
newDoc = CodeMirror.Doc(this.props.value, this.props.language);
} else {
newDoc = this.state.docs[this.props.view];
}
const oldDoc = { [prevProps.view]: this.codeMirror.swapDoc(newDoc) };
this.setState((prevState)=>({
docs : _.merge({}, prevState.docs, oldDoc)
}));
this.props.rerenderParent();
} else if(this.codeMirror?.getValue() != this.props.value) { //update editor contents if brew.text is changed from outside
this.codeMirror.setValue(this.props.value);
}
},
buildEditor : function() {
this.codeMirror = CodeMirror(this.refs.editor, {
value : this.props.value,
lineNumbers : true,
lineWrapping : this.props.wrap,
mode : this.props.language, //TODO: CSS MODE DOESN'T SEEM TO LOAD PROPERLY
indentWithTabs : true,
tabSize : 2,
extraKeys : {
'Ctrl-B' : this.makeBold,
'Cmd-B' : this.makeBold,
'Ctrl-I' : this.makeItalic,
'Cmd-I' : this.makeItalic,
'Ctrl-M' : this.makeSpan,
'Cmd-M' : this.makeSpan,
'Ctrl-/' : this.makeComment,
'Cmd-/' : this.makeComment
}
lineNumbers : true,
lineWrapping : this.props.wrap,
indentWithTabs : true,
tabSize : 2,
historyEventDelay : 250,
extraKeys : {
'Ctrl-B' : this.makeBold,
'Cmd-B' : this.makeBold,
'Ctrl-I' : this.makeItalic,
'Cmd-I' : this.makeItalic,
'Ctrl-U' : this.makeUnderline,
'Cmd-U' : this.makeUnderline,
'Ctrl-.' : this.makeNbsp,
'Cmd-.' : this.makeNbsp,
'Shift-Ctrl-.' : this.makeSpace,
'Shift-Cmd-.' : this.makeSpace,
'Shift-Ctrl-,' : this.removeSpace,
'Shift-Cmd-,' : this.removeSpace,
'Ctrl-M' : this.makeSpan,
'Cmd-M' : this.makeSpan,
'Shift-Ctrl-M' : this.makeDiv,
'Shift-Cmd-M' : this.makeDiv,
'Ctrl-/' : this.makeComment,
'Cmd-/' : this.makeComment,
'Ctrl-K' : this.makeLink,
'Cmd-K' : this.makeLink,
'Ctrl-L' : ()=>this.makeList('UL'),
'Cmd-L' : ()=>this.makeList('UL'),
'Shift-Ctrl-L' : ()=>this.makeList('OL'),
'Shift-Cmd-L' : ()=>this.makeList('OL'),
'Shift-Ctrl-1' : ()=>this.makeHeader(1),
'Shift-Ctrl-2' : ()=>this.makeHeader(2),
'Shift-Ctrl-3' : ()=>this.makeHeader(3),
'Shift-Ctrl-4' : ()=>this.makeHeader(4),
'Shift-Ctrl-5' : ()=>this.makeHeader(5),
'Shift-Ctrl-6' : ()=>this.makeHeader(6),
'Shift-Cmd-1' : ()=>this.makeHeader(1),
'Shift-Cmd-2' : ()=>this.makeHeader(2),
'Shift-Cmd-3' : ()=>this.makeHeader(3),
'Shift-Cmd-4' : ()=>this.makeHeader(4),
'Shift-Cmd-5' : ()=>this.makeHeader(5),
'Shift-Cmd-6' : ()=>this.makeHeader(6),
'Shift-Ctrl-Enter' : this.newColumn,
'Shift-Cmd-Enter' : this.newColumn,
'Ctrl-Enter' : this.newPage,
'Cmd-Enter' : this.newPage,
'Ctrl-[' : this.foldAllCode,
'Cmd-[' : this.foldAllCode,
'Ctrl-]' : this.unfoldAllCode,
'Cmd-]' : this.unfoldAllCode
},
foldGutter : true,
foldOptions : {
scanUp : true,
rangeFinder : CodeMirror.fold.homebrewery,
widget : (from, to)=>{
let text = '';
let currentLine = from.line;
const maxLength = 50;
while (currentLine <= to.line && text.length <= maxLength) {
text += this.codeMirror.getLine(currentLine);
if(currentLine < to.line)
text += ' ';
currentLine += 1;
}
text = text.trim();
if(text.length > maxLength)
text = `${text.substr(0, maxLength)}...`;
return `\u21A4 ${text} \u21A6`;
}
},
gutters : ['CodeMirror-linenumbers', 'CodeMirror-foldgutter']
});
// Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works.
@@ -63,6 +150,14 @@ const CodeEditor = createClass({
this.updateSize();
},
makeHeader : function (number) {
const selection = this.codeMirror.getSelection();
const header = Array(number).fill('#').join('');
this.codeMirror.replaceSelection(`${header} ${selection}`, 'around');
const cursor = this.codeMirror.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch + selection.length + number + 1 });
},
makeBold : function() {
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
@@ -73,14 +168,55 @@ const CodeEditor = createClass({
},
makeItalic : function() {
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '_' && selection.slice(-1) === '_';
this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `_${selection}_`, 'around');
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
this.codeMirror.replaceSelection(t ? selection.slice(1, -1) : `*${selection}*`, 'around');
if(selection.length === 0){
const cursor = this.codeMirror.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 1 });
}
},
makeNbsp : function() {
this.codeMirror.replaceSelection('&nbsp;', 'end');
},
makeSpace : function() {
const selection = this.codeMirror.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){
const percent = parseInt(selection.slice(8, -4)) + 10;
this.codeMirror.replaceSelection(percent < 90 ? `{{width:${percent}% }}` : '{{width:100% }}', 'around');
} else {
this.codeMirror.replaceSelection(`{{width:10% }}`, 'around');
}
},
removeSpace : function() {
const selection = this.codeMirror.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){
const percent = parseInt(selection.slice(8, -4)) - 10;
this.codeMirror.replaceSelection(percent > 10 ? `{{width:${percent}% }}` : '', 'around');
}
},
newColumn : function() {
this.codeMirror.replaceSelection('\n\\column\n\n', 'end');
},
newPage : function() {
this.codeMirror.replaceSelection('\n\\page\n\n', 'end');
},
makeUnderline : function() {
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');
if(selection.length === 0){
const cursor = this.codeMirror.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
}
},
makeSpan : function() {
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
this.codeMirror.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
@@ -90,15 +226,83 @@ const CodeEditor = createClass({
}
},
makeComment : function() {
const selection = this.codeMirror.getSelection(), t = selection.slice(0, 4) === '<!--' && selection.slice(-3) === '-->';
this.codeMirror.replaceSelection(t ? selection.slice(4, -3) : `<!-- ${selection} -->`, 'around');
makeDiv : function() {
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');
if(selection.length === 0){
const cursor = this.codeMirror.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - 4 });
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
}
},
makeComment : function() {
let regex;
let cursorPos;
let newComment;
const selection = this.codeMirror.getSelection();
if(this.props.language === 'gfm'){
regex = /^\s*(<!--\s?)(.*?)(\s?-->)\s*$/gs;
cursorPos = 4;
newComment = `<!-- ${selection} -->`;
} else {
regex = /^\s*(\/\*\s?)(.*?)(\s?\*\/)\s*$/gs;
cursorPos = 3;
newComment = `/* ${selection} */`;
}
this.codeMirror.replaceSelection(regex.test(selection) == true ? selection.replace(regex, '$2') : newComment, 'around');
if(selection.length === 0){
const cursor = this.codeMirror.getCursor();
this.codeMirror.setCursor({ line: cursor.line, ch: cursor.ch - cursorPos });
};
},
makeLink : function() {
const isLink = /^\[(.*)\]\((.*)\)$/;
const selection = this.codeMirror.getSelection().trim();
let match;
if(match = isLink.exec(selection)){
const altText = match[1];
const url = match[2];
this.codeMirror.replaceSelection(`${altText} ${url}`);
const cursor = this.codeMirror.getCursor();
this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - url.length }, { line: cursor.line, ch: cursor.ch });
} else {
this.codeMirror.replaceSelection(`[${selection || 'alt text'}](url)`);
const cursor = this.codeMirror.getCursor();
this.codeMirror.setSelection({ line: cursor.line, ch: cursor.ch - 4 }, { line: cursor.line, ch: cursor.ch - 1 });
}
},
makeList : function(listType) {
const selectionStart = this.codeMirror.getCursor('from'), selectionEnd = this.codeMirror.getCursor('to');
this.codeMirror.setSelection(
{ line: selectionStart.line, ch: 0 },
{ line: selectionEnd.line, ch: this.codeMirror.getLine(selectionEnd.line).length }
);
const newSelection = this.codeMirror.getSelection();
const regex = /^\d+\.\s|^-\s/gm;
if(newSelection.match(regex) != null){ // if selection IS A LIST
this.codeMirror.replaceSelection(newSelection.replace(regex, ''), 'around');
} else { // if selection IS NOT A LIST
listType == 'UL' ? this.codeMirror.replaceSelection(newSelection.replace(/^/gm, `- `), 'around') :
this.codeMirror.replaceSelection(newSelection.replace(/^/gm, (()=>{
let n = 1;
return ()=>{
return `${n++}. `;
};
})()), 'around');
}
},
foldAllCode : function() {
this.codeMirror.execCommand('foldAll');
},
unfoldAllCode : function() {
this.codeMirror.execCommand('unfoldAll');
},
//=-- Externally used -==//
setCursorPosition : function(line, char){
setTimeout(()=>{
@@ -112,10 +316,19 @@ const CodeEditor = createClass({
updateSize : function(){
this.codeMirror.refresh();
},
redo : function(){
return this.codeMirror.redo();
},
undo : function(){
return this.codeMirror.undo();
},
historySize : function(){
return this.codeMirror.doc.historySize();
},
//----------------------//
render : function(){
return <div className='codeEditor' ref='editor' />;
return <div className='codeEditor' ref='editor' style={this.props.style}/>;
}
});

7
shared/naturalcrit/codeEditor/codeEditor.less
View File

@@ -1,5 +1,10 @@
@import (less) 'codemirror/lib/codemirror.css';
@import (less) 'codemirror/addon/fold/foldgutter.css';
.codeEditor{
.CodeMirror-foldmarker {
font-family: inherit;
text-shadow: none;
font-weight: 600;
}
}

26
shared/naturalcrit/codeEditor/fold-code.js Normal file
View File

@@ -0,0 +1,26 @@
module.exports = {
registerHomebreweryHelper : function(CodeMirror) {
CodeMirror.registerHelper('fold', 'homebrewery', function(cm, start) {
const matcher = /^\\page.*/;
const prevLine = cm.getLine(start.line - 1);
if(start.line === cm.firstLine() || prevLine.match(matcher)) {
const lastLineNo = cm.lastLine();
let end = start.line;
while (end < lastLineNo) {
if(cm.getLine(end + 1).match(matcher))
break;
++end;
}
return {
from : CodeMirror.Pos(start.line, 0),
to : CodeMirror.Pos(end, cm.getLine(end).length)
};
}
return null;
});
}
};

6
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -40,8 +40,12 @@ const SplitPane = createClass({
},
handleMove : function(e){
if(!this.state.isDragging) return;
const minWidth = 1;
const maxWidth = window.innerWidth - 13;
const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX));
this.setState({
size : e.pageX
size : newSize
});
},
/*

3
shared/naturalcrit/splitPane/splitPane.less
View File

@@ -28,5 +28,8 @@
color : #666;
}
}
&:hover{
background-color: #999;
}
}
}

20
themes/5ePhb.style.less
View File

@@ -79,7 +79,7 @@ body {
p{
overflow-wrap : break-word; //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
display : block;
line-height : 1.3em;
line-height : 1.25em;
&+* {
margin-top : 0.325cm;
}
@@ -90,14 +90,14 @@ body {
ul{
margin-bottom : 0.8em;
padding-left : 1.4em;
line-height : 1.3em;
line-height : 1.25em;
list-style-position : outside;
list-style-type : disc;
}
ol{
margin-bottom : 0.8em;
padding-left : 1.4em;
line-height : 1.3em;
line-height : 1.25em;
list-style-position : outside;
list-style-type : decimal;
}
@@ -162,17 +162,20 @@ body {
//margin-top : 0px; //Font is misaligned. Shift up slightly
//margin-bottom : 0.05cm;
font-size : 0.75cm;
line-height : 0.988em; //Font is misaligned. Shift up slightly
}
h3{
//margin-top : -0.1cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.1cm;
font-size : 0.575cm;
border-bottom : 2px solid @headerUnderline;
line-height : 0.995em; //Font is misaligned. Shift up slightly
}
h4{
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
//margin-bottom : 0.02cm;
font-size : 0.458cm;
line-height : 0.971em; //Font is misaligned. Shift up slightly
}
h5{
//margin-top : -0.02cm; //Font is misaligned. Shift up slightly
@@ -180,6 +183,7 @@ body {
font-family : ScalySansSmallCapsRemake;
font-size : 0.423cm;
font-weight : 900;
line-height : 0.951em; //Font is misaligned. Shift up slightly
& + * {
margin-top : 0.2cm;
}
@@ -238,9 +242,6 @@ body {
display : block;
padding-bottom : 0px;
}
p + p {
padding-top : .8em;
}
:last-child {
margin-bottom : 0;
}
@@ -271,9 +272,6 @@ body {
padding-bottom : 0px;
line-height : 1.5em;
}
p + p {
padding-top : .8em;
}
:last-child {
margin-bottom : 0;
}
@@ -582,7 +580,7 @@ body {
}
p, ul{
font-size : 0.352cm;
line-height : 1.3em;
line-height : 1.265em;
}
ul{
margin-bottom : 0.5em;
@@ -742,7 +740,7 @@ body {
// *****************************/
.page {
dl {
line-height : 1.3em;
line-height : 1.25em;
padding-left : 1em;
white-space : pre-line;
& + * {

16
themes/5ePhbLegacy.style.less
View File

@@ -63,7 +63,7 @@ body {
// *****************************/
p{
padding-bottom : 0.8em;
line-height : 1.3em;
line-height : 1.269em;
&+p{
margin-top : -0.8em;
}
@@ -71,14 +71,14 @@ body {
ul{
margin-bottom : 0.8em;
padding-left : 1.4em;
line-height : 1.3em;
line-height : 1.269em;
list-style-position : outside;
list-style-type : disc;
}
ol{
margin-bottom : 0.8em;
padding-left : 1.4em;
line-height : 1.3em;
line-height : 1.269em;
list-style-position : outside;
list-style-type : decimal;
}
@@ -126,7 +126,7 @@ body {
font-family : Solberry;
font-size : 10em;
color : #222;
line-height : 0.8em;
line-height : 0.795em;
}
}
h2{
@@ -191,7 +191,7 @@ body {
box-shadow : 1px 4px 14px #888;
p, ul{
font-size : 0.352cm;
line-height : 1.1em;
line-height : 1.083em;
}
}
//If a note starts a column, give it space at the top to render border
@@ -371,7 +371,7 @@ body {
}
p, ul{
font-size : 0.352cm;
line-height : 1.3em;
line-height : 1.263em;
}
ul{
margin-bottom : 0.5em;
@@ -425,7 +425,7 @@ body {
p{
display : block;
padding-bottom : 0px;
line-height : 1.5em;
line-height : 1.47em;
}
p + p {
padding-top : .8em;
@@ -457,7 +457,7 @@ body {
p, p + p {
margin : unset;
text-indent : unset;
line-height : 1em;
line-height : 0.941em;
}
h5 {
font-size : 1.3em;