f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-27 11:43:09 +00:00
Code Wiki Activity

Merge branch 'editor-widgets' of https://github.com/naturalcrit/homebrewery into editor-widgets

Browse Source
This commit is contained in:
Trevor Buckner
2023-07-16 01:53:24 -04:00
parent 314275122d e6055bd417
commit c113b8dd1f
34 changed files with 1461 additions and 1152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.eslintrc.js
View File

@@ -15,7 +15,7 @@ module.exports = {
rules : { rules : {
/** Errors **/ /** Errors **/
'camelcase' : ['error', { properties: 'never' }], 'camelcase' : ['error', { properties: 'never' }],
'func-style' : ['error', 'expression', { allowArrowFunctions: true }], //'func-style' : ['error', 'expression', { allowArrowFunctions: true }],
'no-array-constructor' : 'error', 'no-array-constructor' : 'error',
'no-iterator' : 'error', 'no-iterator' : 'error',
'no-nested-ternary' : 'error', 'no-nested-ternary' : 'error',

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

@@ -108,6 +108,12 @@ const BrewRenderer = createClass({
return false; return false;
}, },
sanitizeScriptTags : function(content) {
return content
.replace(/<script/ig, '&lt;script')
.replace(/<\/script>/ig, '&lt;/script&gt;');
},
renderPageInfo : function(){ renderPageInfo : function(){
return <div className='pageInfo' ref='main'> return <div className='pageInfo' ref='main'>
<div> <div>
@@ -135,18 +141,20 @@ const BrewRenderer = createClass({
renderStyle : function() { renderStyle : function() {
if(!this.props.style) return; if(!this.props.style) return;
//return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.props.style}\n} </style>` }} />; const cleanStyle = this.sanitizeScriptTags(this.props.style);
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>\n${this.props.style}\n</style>` }} />; //return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style>@layer styleTab {\n${this.sanitizeScriptTags(this.props.style)}\n} </style>` }} />;
return <div style={{ display: 'none' }} dangerouslySetInnerHTML={{ __html: `<style> ${cleanStyle} </style>` }} />;
}, },
renderPage : function(pageText, index){ renderPage : function(pageText, index){
const cleanPageText = this.sanitizeScriptTags(pageText);
if(this.props.renderer == 'legacy') if(this.props.renderer == 'legacy')
return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />; return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(cleanPageText) }} key={index} />;
else { else {
pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear) pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
return ( return (
<div className='page' id={`p${index + 1}`} key={index} > <div className='page' id={`p${index + 1}`} key={index} >
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} /> <div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(cleanPageText) }} />
</div> </div>
); );
} }
@@ -185,6 +193,12 @@ const BrewRenderer = createClass({
}, 100); }, 100);
}, },
emitClick : function(){
// console.log('iFrame clicked');
if(!window || !document) return;
document.dispatchEvent(new MouseEvent('click'));
},
render : function(){ render : function(){
//render in iFrame so broken code doesn't crash the site. //render in iFrame so broken code doesn't crash the site.
//Also render dummy page while iframe is mounting. //Also render dummy page while iframe is mounting.
@@ -203,7 +217,9 @@ const BrewRenderer = createClass({
<Frame id='BrewRenderer' initialContent={this.state.initialContent} <Frame id='BrewRenderer' initialContent={this.state.initialContent}
style={{ width: '100%', height: '100%', visibility: this.state.visibility }} style={{ width: '100%', height: '100%', visibility: this.state.visibility }}
contentDidMount={this.frameDidMount}> contentDidMount={this.frameDidMount}
onClick={()=>{this.emitClick();}}
>
<div className={'brewRenderer'} <div className={'brewRenderer'}
onScroll={this.handleScroll} onScroll={this.handleScroll}
style={{ height: this.state.height }}> style={{ height: this.state.height }}>

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

@@ -323,7 +323,8 @@ const Editor = createClass({
theme={this.props.brew.theme} theme={this.props.brew.theme}
undo={this.undo} undo={this.undo}
redo={this.redo} redo={this.redo}
historySize={this.historySize()} /> historySize={this.historySize()}
cursorPos={this.refs.codeEditor?.getCursorPosition() || {}} />
{this.renderEditor()} {this.renderEditor()}
</div> </div>

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

@@ -15,8 +15,8 @@ ThemeSnippets['V3_5eDMG'] = require('themes/V3/5eDMG/snippets.js');
ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js'); ThemeSnippets['V3_Journal'] = require('themes/V3/Journal/snippets.js');
ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js'); ThemeSnippets['V3_Blank'] = require('themes/V3/Blank/snippets.js');
const execute = function(val, brew){ const execute = function(val, props){
if(_.isFunction(val)) return val(brew); if(_.isFunction(val)) return val(props);
return val; return val;
}; };
@@ -33,7 +33,8 @@ const Snippetbar = createClass({
renderer : 'legacy', renderer : 'legacy',
undo : ()=>{}, undo : ()=>{},
redo : ()=>{}, redo : ()=>{},
historySize : ()=>{} historySize : ()=>{},
cursorPos : {}
}; };
}, },
@@ -105,6 +106,7 @@ const Snippetbar = createClass({
snippets={snippetGroup.snippets} snippets={snippetGroup.snippets}
key={snippetGroup.groupName} key={snippetGroup.groupName}
onSnippetClick={this.handleSnippetClick} onSnippetClick={this.handleSnippetClick}
cursorPos={this.props.cursorPos}
/>; />;
}); });
}, },
@@ -165,7 +167,7 @@ const SnippetGroup = createClass({
}, },
handleSnippetClick : function(e, snippet){ handleSnippetClick : function(e, snippet){
e.stopPropagation(); e.stopPropagation();
this.props.onSnippetClick(execute(snippet.gen, this.props.brew)); this.props.onSnippetClick(execute(snippet.gen, this.props));
}, },
renderSnippets : function(snippets){ renderSnippets : function(snippets){
return _.map(snippets, (snippet)=>{ return _.map(snippets, (snippet)=>{

124
client/homebrew/navbar/navbar.less
View File

@@ -81,20 +81,70 @@
color : pink; color : pink;
} }
} }
.recent.navItem { .recent.navDropdownContainer {
position : relative; position : relative;
.dropdown { .navDropdown .navItem {
position : absolute;
z-index : 10000;
top : 28px;
left : 0;
overflow : hidden auto; overflow : hidden auto;
width : 100%;
max-height : ~"calc(100vh - 28px)"; max-height : ~"calc(100vh - 28px)";
scrollbar-color : #666 #333; scrollbar-color : #666 #333;
scrollbar-width : thin; scrollbar-width : thin;
h4 {
font-size : 0.8em;
#backgroundColorsHover;
.animate(background-color);
position : relative;
display : block;
overflow : clip;
box-sizing : border-box;
padding : 8px 5px 13px;
text-decoration : none;
color : white;
border-top : 1px solid #888;
background-color : #333;
.clear {
position : absolute;
top : 50%;
right : 0;
display : none;
width : 20px;
height : 100%;
transform : translateY(-50%);
opacity : 70%;
border-radius : 3px;
background-color : #333;
&:hover {
opacity : 100%;
}
i {
font-size : 10px;
width : 100%;
height : 100%;
margin : 0;
text-align : center;
}
}
&:hover {
background-color : @blue;
.clear {
display : grid;
place-content : center;
}
}
.title {
display : inline-block;
overflow : hidden;
width : 100%;
white-space : nowrap;
text-overflow : ellipsis;
}
.time {
font-size : 0.7em;
position : absolute;
right : 2px;
bottom : 2px;
color : #888;
}
&.header {
display : block; display : block;
box-sizing : border-box; box-sizing : border-box;
padding : 5px 0; padding : 5px 0;
@@ -109,62 +159,6 @@
background-color : darken(@purple, 30%); background-color : darken(@purple, 30%);
} }
} }
.item {
#backgroundColorsHover;
.animate(background-color);
position : relative;
display : block;
overflow : clip;
box-sizing : border-box;
padding : 8px 5px 13px;
text-decoration : none;
color : white;
border-top : 1px solid #888;
background-color : #333;
.clear {
position : absolute;
top : 50%;
right : 0;
display : none;
width : 20px;
height : 100%;
transform : translateY(-50%);
opacity : 70%;
border-radius : 3px;
background-color : #333;
&:hover {
opacity : 100%;
}
i {
font-size : 10px;
width : 100%;
height : 100%;
margin : 0;
text-align : center;
}
}
&:hover {
background-color : @blue;
.clear {
display : grid;
place-content : center;
}
}
.title {
display : inline-block;
overflow : hidden;
width : 100%;
white-space : nowrap;
text-overflow : ellipsis;
}
.time {
font-size : 0.7em;
position : absolute;
right : 2px;
bottom : 2px;
color : #888;
}
}
} }
} }
.metadata.navItem { .metadata.navItem {

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

@@ -121,6 +121,7 @@ const RecentItems = createClass({
removeItem : function(url, evt){ removeItem : function(url, evt){
evt.preventDefault(); evt.preventDefault();
evt.stopPropagation();
let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]'); let edited = JSON.parse(localStorage.getItem(EDIT_KEY) || '[]');
let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]'); let viewed = JSON.parse(localStorage.getItem(VIEW_KEY) || '[]');
@@ -139,11 +140,11 @@ const RecentItems = createClass({
}, },
renderDropdown : function(){ renderDropdown : function(){
if(!this.state.showDropdown) return null; // if(!this.state.showDropdown) return null;
const makeItems = (brews)=>{ const makeItems = (brews)=>{
return _.map(brews, (brew, i)=>{ return _.map(brews, (brew, i)=>{
return <a href={brew.url} className='item' key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}> return <a className='navItem' href={brew.url} key={`${brew.id}-${i}`} target='_blank' rel='noopener noreferrer' title={brew.title || '[ no title ]'}>
<span className='title'>{brew.title || '[ no title ]'}</span> <span className='title'>{brew.title || '[ no title ]'}</span>
<span className='time'>{Moment(brew.ts).fromNow()}</span> <span className='time'>{Moment(brew.ts).fromNow()}</span>
<div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div> <div className='clear' title='Remove from Recents' onClick={(e)=>{this.removeItem(`${brew.url}`, e);}}><i className='fas fa-times'></i></div>
@@ -151,25 +152,25 @@ const RecentItems = createClass({
}); });
}; };
return <div className='dropdown'> return <>
{(this.props.showEdit && this.props.showView) ? {(this.props.showEdit && this.props.showView) ?
<h4>edited</h4> : null } <Nav.item className='header'>edited</Nav.item> : null }
{this.props.showEdit ? {this.props.showEdit ?
makeItems(this.state.edit) : null } makeItems(this.state.edit) : null }
{(this.props.showEdit && this.props.showView) ? {(this.props.showEdit && this.props.showView) ?
<h4>viewed</h4> : null } <Nav.item className='header'>viewed</Nav.item> : null }
{this.props.showView ? {this.props.showView ?
makeItems(this.state.view) : null } makeItems(this.state.view) : null }
</div>; </>;
}, },
render : function(){ render : function(){
return <Nav.item icon='fas fa-history' color='grey' className='recent' return <Nav.dropdown className='recent'>
onMouseEnter={()=>this.handleDropdown(true)} <Nav.item icon='fas fa-history' color='grey' >
onMouseLeave={()=>this.handleDropdown(false)}> {this.props.text}
{this.props.text} </Nav.item>
{this.renderDropdown()} {this.renderDropdown()}
</Nav.item>; </Nav.dropdown>;
} }
}); });

1445
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

26
package.json
View File

@@ -78,9 +78,9 @@
] ]
}, },
"dependencies": { "dependencies": {
"@babel/core": "^7.22.5", "@babel/core": "^7.22.8",
"@babel/plugin-transform-runtime": "^7.22.5", "@babel/plugin-transform-runtime": "^7.22.7",
"@babel/preset-env": "^7.22.5", "@babel/preset-env": "^7.22.7",
"@babel/preset-react": "^7.22.5", "@babel/preset-react": "^7.22.5",
"@googleapis/drive": "^5.1.0", "@googleapis/drive": "^5.1.0",
"body-parser": "^1.20.2", "body-parser": "^1.20.2",
@@ -97,18 +97,18 @@
"jwt-simple": "^0.5.6", "jwt-simple": "^0.5.6",
"less": "^3.13.1", "less": "^3.13.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"marked": "5.1.0", "marked": "5.1.1",
"marked-extended-tables": "^1.0.6", "marked-extended-tables": "^1.0.6",
"marked-gfm-heading-id": "^3.0.4", "marked-gfm-heading-id": "^3.0.4",
"marked-smartypants-lite": "^1.0.0", "marked-smartypants-lite": "^1.0.0",
"markedLegacy": "npm:marked@^0.3.19", "markedLegacy": "npm:marked@^0.3.19",
"moment": "^2.29.4", "moment": "^2.29.4",
"mongoose": "^7.3.1", "mongoose": "^7.3.2",
"nanoid": "3.3.4", "nanoid": "3.3.4",
"nconf": "^0.12.0", "nconf": "^0.12.0",
"npm": "^9.7.2", "npm": "^9.8.0",
"react": "^17.0.2", "react": "^18.2.0",
"react-dom": "^17.0.2", "react-dom": "^18.2.0",
"react-frame-component": "^4.1.3", "react-frame-component": "^4.1.3",
"react-router-dom": "6.14.1", "react-router-dom": "6.14.1",
"sanitize-filename": "1.6.3", "sanitize-filename": "1.6.3",
@@ -119,13 +119,13 @@
"eslint": "^8.44.0", "eslint": "^8.44.0",
"eslint-plugin-jest": "^27.2.2", "eslint-plugin-jest": "^27.2.2",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"jest": "^29.5.0", "jest": "^29.6.1",
"jest-expect-message": "^1.1.3", "jest-expect-message": "^1.1.3",
"postcss-less": "^6.0.0", "postcss-less": "^6.0.0",
"stylelint": "^15.9.0", "stylelint": "^15.10.1",
"stylelint-config-recess-order": "^4.2.0", "stylelint-config-recess-order": "^4.3.0",
"stylelint-config-recommended": "^12.0.0", "stylelint-config-recommended": "^13.0.0",
"stylelint-stylistic": "^0.4.2", "stylelint-stylistic": "^0.4.3",
"supertest": "^6.3.3" "supertest": "^6.3.3"
} }
} }

12
scripts/buildHomebrew.js
View File

@@ -135,12 +135,12 @@ fs.emptyDirSync('./build');
})().catch(console.error); })().catch(console.error);
//In development set up a watch server and livereload //In development, set up LiveReload (refreshes browser), and Nodemon (restarts server)
if(isDev){ if(isDev){
livereload('./build'); livereload('./build'); // Install the Chrome extension LiveReload to automatically refresh the browser
watchFile('./server.js', { // Rebuild when change detected to this file or any nested directory from here watchFile('./server.js', { // Restart server when change detected to this file or any nested directory from here
ignore : ['./build'], // Ignore ./build or it will rebuild again ignore : ['./build', './client', './themes'], // Ignore folders that are not running server code / avoids unneeded restarts
ext : 'less', // Other extensions to watch (only .js/.json/.jsx by default) ext : 'js json' // Extensions to watch (only .js/.json by default)
//watch: ['./client', './server', './themes'], // Watch additional folders if you want //watch : ['./server', './themes'], // Watch additional folders if needed
}); });
} }

4
server/app.js
View File

@@ -324,8 +324,8 @@ app.get('/share/:id', asyncHandler(getBrew('share')), asyncHandler(async (req, r
}; };
if(req.params.id.length > 12 && !brew._id) { if(req.params.id.length > 12 && !brew._id) {
const googleId = req.params.id.slice(0, -12); const googleId = brew.googleId;
const shareId = req.params.id.slice(-12); const shareId = brew.shareId;
await GoogleActions.increaseView(googleId, shareId, 'share', brew) await GoogleActions.increaseView(googleId, shareId, 'share', brew)
.catch((err)=>{next(err);}); .catch((err)=>{next(err);});
} else { } else {

8
server/googleActions.js
View File

@@ -100,12 +100,12 @@ const GoogleActions = {
const drive = googleDrive.drive({ version: 'v3', auth }); const drive = googleDrive.drive({ version: 'v3', auth });
const fileList = []; const fileList = [];
let NextPageToken = ""; let NextPageToken = '';
do { do {
const obj = await drive.files.list({ const obj = await drive.files.list({
pageSize : 1000, pageSize : 1000,
pageToken : NextPageToken || "", pageToken : NextPageToken || '',
fields : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)', fields : 'nextPageToken, files(id, name, description, createdTime, modifiedTime, properties)',
q : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false' q : 'mimeType != \'application/vnd.google-apps.folder\' and trashed = false'
}) })
@@ -243,9 +243,9 @@ const GoogleActions = {
if(obj) { if(obj) {
if(accessType == 'edit' && obj.data.properties.editId != accessId){ if(accessType == 'edit' && obj.data.properties.editId != accessId){
throw ('Edit ID does not match'); throw ({ message: 'Edit ID does not match' });
} else if(accessType == 'share' && obj.data.properties.shareId != accessId){ } else if(accessType == 'share' && obj.data.properties.shareId != accessId){
throw ('Share ID does not match'); throw ({ message: 'Share ID does not match' });
} }
const file = await drive.files.get({ const file = await drive.files.get({

9
server/homebrew.api.js
View File

@@ -27,8 +27,13 @@ const api = {
// If the id is longer than 12, then it's a google id + the edit id. This splits the longer id up. // If the id is longer than 12, then it's a google id + the edit id. This splits the longer id up.
if(id.length > 12) { if(id.length > 12) {
googleId = id.slice(0, -12); if(id.length >= (33 + 12)) { // googleId is minimum 33 chars (may increase)
id = id.slice(-12); googleId = id.slice(0, -12); // current editId is 12 chars
} else { // old editIds used to be 10 chars;
googleId = id.slice(0, -10); // if total string is too short, must be old brew
console.log('Old brew, using 10-char Id');
}
id = id.slice(googleId.length);
} }
return { id, googleId }; return { id, googleId };
}, },

17
server/homebrew.api.spec.js
View File

@@ -111,15 +111,26 @@ describe('Tests for api', ()=>{
expect(googleId).toEqual('12345'); expect(googleId).toEqual('12345');
}); });
it('should return id and google id from params', ()=>{ it('should return 12-char id and google id from params', ()=>{
const { id, googleId } = api.getId({ const { id, googleId } = api.getId({
params : { params : {
id : '123456789012abcdefghijkl' id : '123456789012345678901234567890123abcdefghijkl'
} }
}); });
expect(googleId).toEqual('123456789012345678901234567890123');
expect(id).toEqual('abcdefghijkl'); expect(id).toEqual('abcdefghijkl');
expect(googleId).toEqual('123456789012'); });
it('should return 10-char id and google id from params', ()=>{
const { id, googleId } = api.getId({
params : {
id : '123456789012345678901234567890123abcdefghij'
}
});
expect(googleId).toEqual('123456789012345678901234567890123');
expect(id).toEqual('abcdefghij');
}); });
}); });

36
shared/naturalcrit/codeEditor/code-mirror.js Normal file
View File

@@ -0,0 +1,36 @@
let CodeMirror;
if(typeof navigator !== 'undefined'){
CodeMirror = require('codemirror');
//Language Modes
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');
const foldCode = require('./helpers/fold-code');
foldCode.registerHomebreweryHelper(CodeMirror);
}
module.exports = CodeMirror;

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

@@ -5,43 +5,8 @@ const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
const cx = require('classnames'); const cx = require('classnames');
const closeTag = require('./helpers/close-tag'); const closeTag = require('./helpers/close-tag');
const { WIDGET_TYPE, FIELD_TYPE } = require('./helpers/widget-elements/constants');
const Hints = require('./helpers/widget-elements/hints/hints.jsx'); const Hints = require('./helpers/widget-elements/hints/hints.jsx');
const CodeMirror = require('./code-mirror.js');
let CodeMirror;
if(typeof navigator !== 'undefined'){
CodeMirror = require('codemirror');
//Language Modes
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');
const foldCode = require('./helpers/fold-code');
foldCode.registerHomebreweryHelper(CodeMirror);
}
const themeWidgets = require('../../../themes/V3/5ePHB/widgets'); const themeWidgets = require('../../../themes/V3/5ePHB/widgets');
@@ -62,7 +27,7 @@ const CodeEditor = createClass({
return { return {
docs : {}, docs : {},
widgetUtils : {}, widgetUtils : {},
widgets : [], widgets : {},
hints : [], hints : [],
hintsField : undefined, hintsField : undefined,
}; };
@@ -182,7 +147,7 @@ const CodeEditor = createClass({
closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror); closeTag.autoCloseCurlyBraces(CodeMirror, this.codeMirror);
this.setState({ this.setState({
widgetUtils : require('./helpers/widgets')(CodeMirror, themeWidgets, this.codeMirror, (hints, field)=>{ widgetUtils : require('./helpers/widgets')(themeWidgets, this.codeMirror, (hints, field)=>{
this.setState({ this.setState({
hints, hints,
hintsField : field hintsField : field
@@ -196,6 +161,26 @@ const CodeEditor = createClass({
this.state.widgetUtils.updateWidgetGutter(); this.state.widgetUtils.updateWidgetGutter();
}); });
this.codeMirror.on('cursorActivity', (cm)=>{
const { line } = cm.getCursor();
for (const key in this.state.widgets) {
if(key != line) {
this.state.widgets[key]?.clear();
}
}
const { widgets } = this.codeMirror.lineInfo(line);
if(!widgets) {
const widget = this.state.widgetUtils.updateLineWidgets(line);
if(widget) {
this.setState({
widgets : {
[line] : widget
}
});
}
}
});
this.updateSize(); this.updateSize();
this.codeMirror.on('gutterClick', (cm, n)=>{ this.codeMirror.on('gutterClick', (cm, n)=>{
@@ -206,9 +191,13 @@ const CodeEditor = createClass({
const widget = this.state.widgetUtils.updateLineWidgets(n); const widget = this.state.widgetUtils.updateLineWidgets(n);
if(widget) { if(widget) {
this.setState({ this.setState({
widgets : [...this.state.widgets, widget] widgets : { ...this.state.widgets, [n]: widget }
}); });
} }
} else {
for (const widget of widgets) {
widget.clear();
}
} }
} }
}); });
@@ -443,17 +432,6 @@ const CodeEditor = createClass({
} }
}; };
}, },
handleMouseDown : function(e) {
// Close open widgets if click outside of a widget
if(!e.target.matches('.CodeMirror-linewidget *')) {
for (const widget of this.state.widgets) {
widget.clear();
}
this.setState({
widgets : []
});
}
},
keyDown : function(e) { keyDown : function(e) {
if(this.hintsRef.current) { if(this.hintsRef.current) {
this.hintsRef.current.keyDown(e); this.hintsRef.current.keyDown(e);
@@ -464,7 +442,7 @@ const CodeEditor = createClass({
render : function(){ render : function(){
const { hints, hintsField } = this.state; const { hints, hintsField } = this.state;
return <React.Fragment> return <React.Fragment>
<div className='codeEditor' ref='editor' style={this.props.style} onMouseDown={this.handleMouseDown} onKeyDown={this.keyDown}/> <div className='codeEditor' ref='editor' style={this.props.style} onKeyDown={this.keyDown}/>
<Hints ref={this.hintsRef} hints={hints} field={hintsField}/> <Hints ref={this.hintsRef} hints={hints} field={hintsField}/>
</React.Fragment>; </React.Fragment>;
} }

43
shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.jsx Normal file
View File

@@ -0,0 +1,43 @@
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
require('./checkbox.less');
const CodeMirror = require('../../../code-mirror.js');
const Checkbox = createClass({
getDefaultProps : function() {
return {
value : '',
prefix : '',
cm : {},
n : -1
};
},
handleChange : function (e) {
const { cm, n, value, prefix } = this.props;
const { text } = cm.lineInfo(n);
const updatedPrefix = `{{${prefix}`;
if(e.target?.checked)
cm.replaceRange(`,${value}`, CodeMirror.Pos(n, updatedPrefix.length), CodeMirror.Pos(n, updatedPrefix.length), '+insert');
else {
const start = text.indexOf(`,${value}`);
if(start > -1)
cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + value.length + 1), '-delete');
}
},
render : function() {
const { cm, n, value, prefix } = this.props;
const { text } = cm.lineInfo(n);
const id = [prefix, value, n].join('-');
return <React.Fragment>
<div className='widget-checkbox'>
<input type='checkbox' id={id} onChange={this.handleChange} checked={_.includes(text, `,${value}`)}/>
<label htmlFor={id}>{_.startCase(value)}</label>
</div>
</React.Fragment>;
}
});
module.exports = Checkbox;

7
shared/naturalcrit/codeEditor/helpers/widget-elements/checkbox/checkbox.less Normal file
View File

@@ -0,0 +1,7 @@
.widget-checkbox {
display: inline-block;
flex: 0 0 auto;
background-color: #ddd;
border-radius: 10px;
padding: 4px 2px;
}

23
shared/naturalcrit/codeEditor/helpers/widget-elements/constants.js
View File

@@ -5,26 +5,27 @@ export const HINT_TYPE = {
NUMBER_SUFFIX : 1 NUMBER_SUFFIX : 1
}; };
export const WIDGET_TYPE = { export const SNIPPET_TYPE = {
SNIPPET : 0, BLOCK : 0,
INLINE_SNIPPET : 1, INLINE : 1,
IMAGE : 2, INJECTOR : 2,
}; };
export const FIELD_TYPE = { export const FIELD_TYPE = {
STYLE : 0 TEXT : 0,
CHECKBOX : 1
}; };
export const PATTERNS = { export const PATTERNS = {
widget : { snippet : {
[WIDGET_TYPE.SNIPPET] : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`), [SNIPPET_TYPE.BLOCK] : (name)=>new RegExp(`^{{${name}(?:[^a-zA-Z].*)?`),
[WIDGET_TYPE.INLINE_SNIPPET] : (name)=>new RegExp(`{{${name}`), [SNIPPET_TYPE.INLINE] : (name)=>new RegExp(`{{${name}`),
[WIDGET_TYPE.IMAGE] : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`), [SNIPPET_TYPE.INJECTOR] : ()=>new RegExp(`^\\!\\[(?:[a-zA-Z -]+)?\\]\\(.*\\).*{[a-zA-Z0-9:, "'-]+}$`),
}, },
field : { field : {
[FIELD_TYPE.STYLE] : (name)=>new RegExp(`[{,;](${name}):("[^},;"]*"|[^},;]*)`), [FIELD_TYPE.TEXT] : (name)=>new RegExp(`[{,;](${name}):([^};,"\\(]*\\((?!,)[^};"\\)]*\\)|"[^},;"]*"|[^},;]*)`),
}, },
collectStyles : new RegExp(`(?:([a-zA-Z-]+):)+`, 'g'), collectStyles : new RegExp(`(?:([a-zA-Z-]+):(?!\\/))+`, 'g'),
}; };
export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`); export const NUMBER_PATTERN = new RegExp(`([^-\\d]*)([-\\d]+)(${UNITS.join('|')})?(.*)`);

19
shared/naturalcrit/codeEditor/helpers/widget-elements/hints/hints.jsx
View File

@@ -1,7 +1,5 @@
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom');
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash');
const { NUMBER_PATTERN } = require('../constants'); const { NUMBER_PATTERN } = require('../constants');
const Hints = createClass({ const Hints = createClass({
@@ -42,24 +40,23 @@ const Hints = createClass({
} }
}, },
componentDidMount : function() { componentDidMount : function() {},
},
keyDown : function(e) { keyDown : function(e) {
const { code } = e; const { code } = e;
const { activeHint } = this.state; const { activeHint } = this.state;
const { hints, field } = this.props; const { hints, field } = this.props;
const match = field.state.value.match(NUMBER_PATTERN); const match = field?.state?.value?.match(NUMBER_PATTERN);
if(code === 'ArrowDown') { if(code === 'ArrowDown') {
e.preventDefault(); e.preventDefault();
if(!match) { if(!match || !match?.at(3)) {
this.setState({ this.setState({
activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1 activeHint : activeHint === hints.length - 1 ? 0 : activeHint + 1
}); });
} }
} else if(code === 'ArrowUp') { } else if(code === 'ArrowUp') {
e.preventDefault(); e.preventDefault();
if(!match) { if(!match || !match?.at(3)) {
this.setState({ this.setState({
activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1 activeHint : activeHint === 0 ? hints.length - 1 : activeHint - 1
}); });
@@ -79,7 +76,8 @@ const Hints = createClass({
const { activeHint } = this.state; const { activeHint } = this.state;
const { hints, field } = this.props; const { hints, field } = this.props;
if(!field) return null; if(!field) return null;
const bounds = field.fieldRef[field.state.id].current?.getBoundingClientRect(); const bounds = field.fieldRef[field.state.id]?.current?.getBoundingClientRect();
if(!bounds) return null;
const hintElements = hints const hintElements = hints
.filter((h)=>h.hint !== field.state.value) .filter((h)=>h.hint !== field.state.value)
@@ -88,6 +86,7 @@ const Hints = createClass({
if(activeHint === i) { if(activeHint === i) {
className += ' CodeMirror-hint-active'; className += ' CodeMirror-hint-active';
return <li key={i} return <li key={i}
role={'option'}
className={className} className={className}
onMouseDown={(e)=>field.hintSelected(h, e)} onMouseDown={(e)=>field.hintSelected(h, e)}
ref={this.activeHintRef}> ref={this.activeHintRef}>
@@ -95,6 +94,7 @@ const Hints = createClass({
</li>; </li>;
} }
return <li key={i} return <li key={i}
role={'option'}
className={className} className={className}
onMouseDown={(e)=>field.hintSelected(h, e)}> onMouseDown={(e)=>field.hintSelected(h, e)}>
{h.hint} {h.hint}
@@ -104,7 +104,7 @@ const Hints = createClass({
let style = { let style = {
display : 'none' display : 'none'
}; };
if(hintElements.length > 1) { if(hintElements.length > 0) {
style = { style = {
...style, ...style,
display : 'block', display : 'block',
@@ -118,7 +118,6 @@ const Hints = createClass({
aria-expanded={true} aria-expanded={true}
className={'CodeMirror-hints default'} className={'CodeMirror-hints default'}
style={style} style={style}
onKeyDown={this.keyDown}
ref={this.hintsRef}> ref={this.hintsRef}>
{hintElements} {hintElements}
</ul> </ul>

122
shared/naturalcrit/codeEditor/helpers/widget-elements/index.js
View File

@@ -1,119 +1,7 @@
const React = require('react'); const Text = require('./text/text.jsx');
const _ = require('lodash'); const Checkbox = require('./checkbox/checkbox.jsx');
const Field = require('./field/field.jsx');
const { PATTERNS, UNITS, HINT_TYPE } = require('./constants');
// See https://codemirror.net/5/addon/hint/css-hint.js for code reference module.exports = {
const pseudoClasses = { 'active' : 1, 'after' : 1, 'before' : 1, 'checked' : 1, 'default' : 1, Text : Text,
'disabled' : 1, 'empty' : 1, 'enabled' : 1, 'first-child' : 1, 'first-letter' : 1, Checkbox : Checkbox,
'first-line' : 1, 'first-of-type' : 1, 'focus' : 1, 'hover' : 1, 'in-range' : 1,
'indeterminate' : 1, 'invalid' : 1, 'lang' : 1, 'last-child' : 1, 'last-of-type' : 1,
'link' : 1, 'not' : 1, 'nth-child' : 1, 'nth-last-child' : 1, 'nth-last-of-type' : 1,
'nth-of-type' : 1, 'only-of-type' : 1, 'only-child' : 1, 'optional' : 1, 'out-of-range' : 1,
'placeholder' : 1, 'read-only' : 1, 'read-write' : 1, 'required' : 1, 'root' : 1,
'selection' : 1, 'target' : 1, 'valid' : 1, 'visited' : 1
};
module.exports = function(CodeMirror, setHints) {
const spec = CodeMirror.resolveMode('text/css');
const headless = CodeMirror(()=>{});
const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
const getStyleHints = (field, value)=>{
const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
headless.swapDoc(tempDoc);
const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
const token = headless.getTokenAt(pos);
const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
if(inner.mode.name !== 'css') return;
if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
to : CodeMirror.Pos(pos.line, token.end) };
let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
if(/[^\w$_-]/.test(word)) {
word = ''; start = end = pos.ch;
}
let result = [];
const add = (keywords)=>{
for (const name in keywords)
if(!word || name.lastIndexOf(word, 0) === 0)
result.push(name);
};
const st = inner.state.state;
if(st === 'pseudo' || token.type === 'variable-3') {
add(pseudoClasses);
} else if(st === 'block' || st === 'maybeprop') {
add(spec.propertyKeywords);
} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
add(spec.valueKeywords);
add(spec.colorKeywords);
} else if(st === 'media' || st === 'media_parens') {
add(spec.mediaTypes);
add(spec.mediaFeatures);
}
result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
.filter((h)=>CSS.supports(field.name, h.hint));
const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
result.push(...UNITS
.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
);
}
return result;
};
return {
// checkbox widget
cClass : function(cm, n, prefix, cClass) {
const { text } = cm.lineInfo(n);
const id = _.kebabCase(prefix + '-' + cClass + '-' + n);
prefix = `{{${prefix}`;
const handleChange = (e)=>{
if(e.target?.checked)
cm.replaceRange(`,${cClass}`, CodeMirror.Pos(n, prefix.length), CodeMirror.Pos(n, prefix.length), '+insert');
else {
const start = text.indexOf(`,${cClass}`);
if(start > -1)
cm.replaceRange('', CodeMirror.Pos(n, start), CodeMirror.Pos(n, start + cClass.length + 1), '-delete');
else
e.target.checked = true;
}
};
return <React.Fragment key={id}>
<input type='checkbox' id={id} onChange={handleChange} checked={_.includes(text, `,${cClass}`)}/>
<label htmlFor={id}>{_.startCase(cClass)}</label>
</React.Fragment>;
},
field : function(cm, n, field) {
const { text } = cm.lineInfo(n);
const pattern = PATTERNS.field[field.type](field.name);
const [_, __, value] = text.match(pattern) ?? [];
const inputChange = (e)=>{
const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
let index = text.indexOf(`${label}:${current}`);
let value = e.target.value;
if(index === -1) {
index = text.length;
value = `,${field.name}:${value}`;
} else {
index = index + 1 + field.name.length;
}
cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
};
return <React.Fragment key={`${field.name}-${n}`}>
<Field field={field} value={value} n={n} onChange={inputChange} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>
</React.Fragment>;
}
};
}; };

161
shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.jsx Normal file
View File

@@ -0,0 +1,161 @@
require('./text.less');
const React = require('react');
const createClass = require('create-react-class');
const _ = require('lodash');
const { NUMBER_PATTERN, HINT_TYPE, PATTERNS } = require('../constants');
const CodeMirror = require('../../../code-mirror.js');
const DEFAULT_WIDTH = '30px';
const STYLE_FN = (value)=>({
width : `calc(${value?.length ?? 0}ch + ${value?.length ? `${DEFAULT_WIDTH} / 2` : DEFAULT_WIDTH})`
});
const Text = createClass({
fieldRef : {},
getDefaultProps : function() {
return {
field : {},
text : '',
n : 0,
setHints : ()=>{},
onChange : ()=>{},
getStyleHints : ()=>{}
};
},
getInitialState : function() {
return {
value : '',
style : STYLE_FN(),
id : ''
};
},
componentDidUpdate : function({ text }, { value }) {
if(this.props.text !== text) {
const { field, n } = this.props;
const pattern = PATTERNS.field[field.type](field.name);
const [_, __, value] = this.props.text.match(pattern) ?? [];
this.setState({
value : value,
style : STYLE_FN(value),
id : `${field?.name}-${n}`
});
}
if(this.state.value !== value) {
const { field } = this.props;
this.props.setHints(this, this.props.getStyleHints(field, field.hints ? this.state.value : []));
}
},
componentDidMount : function() {
const { field, text, n } = this.props;
const id = `${field?.name}-${n}`;
const pattern = PATTERNS.field[field.type](field.name);
const [_, __, value] = text.match(pattern) ?? [];
this.setState({
value : value,
style : STYLE_FN(value),
id
});
this.fieldRef[id] = React.createRef();
},
componentWillUnmount : function() {
this.fieldRef = undefined;
this.fieldRef = {};
this.fieldRef[this.state.id]?.remove();
},
setFocus : function(e) {
const { type } = e;
const { field } = this.props;
this.props.setHints(this, type === 'focus' && field.hints ? this.props.getStyleHints(field, this.state.value) : []);
},
hintSelected : function(h, e) {
let value;
if(h.type === HINT_TYPE.VALUE) {
value = h.hint;
} else if(h.type === HINT_TYPE.NUMBER_SUFFIX) {
const match = this.state.value.match(NUMBER_PATTERN);
let suffix = match?.at(4) ?? '';
for (const char of h.hint) {
if(suffix.at(0) === char) {
suffix = suffix.slice(1);
}
}
value = `${match?.at(1) ?? ''}${match?.at(2) ?? ''}${h.hint}${suffix}`;
}
this.onChange({
target : {
value
}
});
},
keyDown : function(e) {
const { code } = e;
const { field } = this.props;
const { value } = this.state;
const match = value?.match(NUMBER_PATTERN);
if(code === 'ArrowDown') {
if(match && match[3] && CSS.supports(field.name, value)) {
e.preventDefault();
this.onChange({
target : {
value : `${match.at(1) ?? ''}${Number(match[2]) - field.increment}${match[3]}${match.at(4) ?? ''}`
}
});
}
} else if(code === 'ArrowUp') {
if(match && match[3] && CSS.supports(field.name, value)) {
e.preventDefault();
this.onChange({
target : {
value : `${match.at(1) ?? ''}${Number(match[2]) + field.increment}${match[3]}${match.at(4) ?? ''}`
}
});
}
}
},
onChange : function (e){
const { cm, text, field, n } = this.props;
const pattern = PATTERNS.field[field.type](field.name);
const [_, label, current] = text.match(pattern) ?? [null, field.name, ''];
let index = text.indexOf(`${label}:${current}`);
let value = e.target.value;
if(index === -1) {
index = text.length;
value = `,${field.name}:${value}`;
} else {
index = index + 1 + field.name.length;
}
cm.replaceRange(value, CodeMirror.Pos(n, index), CodeMirror.Pos(n, index + current.length), '+insert');
this.setState({
value : e.target.value,
style : STYLE_FN(e.target.value)
});
},
render : function() {
const { value, id, style } = this.state;
const { field } = this.props;
return <React.Fragment>
<div className='widget-field'>
<label htmlFor={id}>{field.name}:</label>
<input id={id} type='text' value={value}
style={style}
ref={this.fieldRef[id]}
onChange={this.onChange}
onFocus={this.setFocus}
onBlur={this.setFocus}
onKeyDown={this.keyDown}/>
</div>
</React.Fragment>;
}
});
module.exports = Text;

37
shared/naturalcrit/codeEditor/helpers/widget-elements/text/text.less Normal file
View File

@@ -0,0 +1,37 @@
.widget-field {
display: inline-block;
flex: 0 0 auto;
background-color: #ddd;
border-radius: 10px;
padding: 4px 2px;
>label {
display: inline;
width: 50px;
margin: 0 0;
}
>input {
background-color: #ddd;
border: none;
}
>.hints {
position: relative;
left: 30px;
max-height: 100px;
overflow-y: scroll;
background-color: white;
>.hint {
margin: 0 0;
padding: 2px;
cursor: default;
&:hover,
&.active {
background-color: rgba(0, 0, 0, 0.1);
}
}
}
}

132
shared/naturalcrit/codeEditor/helpers/widgets.js
View File

@@ -1,38 +1,111 @@
const React = require('react'); const React = require('react');
const ReactDOM = require('react-dom'); const ReactDOM = require('react-dom');
const { PATTERNS, FIELD_TYPE } = require('./widget-elements/constants'); const { PATTERNS, FIELD_TYPE, HINT_TYPE, UNITS } = require('./widget-elements/constants');
require('./widget-elements/hints/hints.jsx'); require('./widget-elements/hints/hints.jsx');
const { Text, Checkbox } = require('./widget-elements');
const CodeMirror = require('../code-mirror.js');
module.exports = function(CodeMirror, widgets, cm, setHints) { // See https://codemirror.net/5/addon/hint/css-hint.js for code reference
const hintsEl = document.createElement('ul'); const pseudoClasses = { 'active' : 1, 'after' : 1, 'before' : 1, 'checked' : 1, 'default' : 1,
hintsEl.id = 'hints'; 'disabled' : 1, 'empty' : 1, 'enabled' : 1, 'first-child' : 1, 'first-letter' : 1,
hintsEl.role = 'listbox'; 'first-line' : 1, 'first-of-type' : 1, 'focus' : 1, 'hover' : 1, 'in-range' : 1,
hintsEl.ariaExpanded = 'true'; 'indeterminate' : 1, 'invalid' : 1, 'lang' : 1, 'last-child' : 1, 'last-of-type' : 1,
hintsEl.className = 'CodeMirror-hints default'; 'link' : 1, 'not' : 1, 'nth-child' : 1, 'nth-last-child' : 1, 'nth-last-of-type' : 1,
hintsEl.style = 'display: none;'; 'nth-of-type' : 1, 'only-of-type' : 1, 'only-child' : 1, 'optional' : 1, 'out-of-range' : 1,
document.body.append(hintsEl); 'placeholder' : 1, 'read-only' : 1, 'read-write' : 1, 'required' : 1, 'root' : 1,
'selection' : 1, 'target' : 1, 'valid' : 1, 'visited' : 1
};
const genKey = (...args)=>args.join('-');
module.exports = function(widgets, cm, setHints) {
const spec = CodeMirror.resolveMode('text/css');
const headless = CodeMirror(()=>{});
const makeTempCSSDoc = (value)=>CodeMirror.Doc(`.selector {\n${value}\n}`, 'text/css');
// See https://codemirror.net/5/addon/hint/css-hint.js for code reference
const getStyleHints = (field, value)=>{
const tempDoc = makeTempCSSDoc(`${field.name}:${value?.replaceAll(`'"`, '') ?? ''}`);
headless.swapDoc(tempDoc);
const pos = CodeMirror.Pos(1, field.name.length + 1 + (value?.length ?? 0), false);
const token = headless.getTokenAt(pos);
const inner = CodeMirror.innerMode(tempDoc.getMode(), token?.state);
if(inner.mode.name !== 'css') return;
if(token.type === 'keyword' && '!important'.indexOf(token.string) === 0)
return { list : ['!important'], from : CodeMirror.Pos(pos.line, token.start),
to : CodeMirror.Pos(pos.line, token.end) };
let start = token.start, end = pos.ch, word = token.string.slice(0, end - start);
if(/[^\w$_-]/.test(word)) {
word = ''; start = end = pos.ch;
}
let result = [];
const add = (keywords)=>{
for (const name in keywords)
if(!word || name.lastIndexOf(word, 0) === 0)
result.push(name);
};
const st = inner.state.state;
if(st === 'pseudo' || token.type === 'variable-3') {
add(pseudoClasses);
} else if(st === 'block' || st === 'maybeprop') {
add(spec.propertyKeywords);
} else if(st === 'prop' || st === 'parens' || st === 'at' || st === 'params') {
add(spec.valueKeywords);
add(spec.colorKeywords);
} else if(st === 'media' || st === 'media_parens') {
add(spec.mediaTypes);
add(spec.mediaFeatures);
}
result = result.map((h)=>({ hint: h, type: HINT_TYPE.VALUE }))
.filter((h)=>CSS.supports(field.name, h.hint) && h.hint.includes(value ?? ''));
const numberSuffix = word.slice(-4).replaceAll(/\d/g, '');
if(token.type === 'number' && !UNITS.includes(numberSuffix)) {
result.push(...UNITS
.filter((u)=>u.includes(numberSuffix) && CSS.supports(field.name, `${value.replaceAll(/\D/g, '') ?? ''}${u}`))
.map((u)=>({ hint: u, type: HINT_TYPE.NUMBER_SUFFIX }))
);
}
return result;
};
const { cClass, field } = require('./widget-elements')(CodeMirror, setHints);
const widgetOptions = widgets.map((widget)=>({ const widgetOptions = widgets.map((widget)=>({
name : widget.name, name : widget.name,
pattern : PATTERNS.widget[widget.type](widget.name), pattern : PATTERNS.snippet[widget.type](widget.name),
createWidget : (n, node)=>{ renderWidget : (n, node)=>{
const parent = document.createElement('div'); const parent = document.createElement('div');
const classes = (widget.classes || []).map((c, i)=>cClass(cm, n, `${widget.name}`, c)); const textFieldNames = (widget.fields || []).filter((f)=>f.type === FIELD_TYPE.TEXT).map((f)=>f.name);
const fieldNames = (widget.fields || []).map((f)=>f.name);
const fields = (widget.fields || []).map((f, i)=>field(cm, n, f)).filter((f)=>!!f);
const { text } = cm.lineInfo(n); const { text } = cm.lineInfo(n);
const fields = (widget.fields || []).map((field)=>{
if(field.type === FIELD_TYPE.CHECKBOX) {
return <Checkbox key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} n={n} prefix={widget.name} value={field.name}/>;
} else if(field.type === FIELD_TYPE.TEXT) {
return <Text key={genKey(widget.name, n, field.name)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
} else {
return null;
}
}).filter(Boolean);
const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{ const styles = [...text.matchAll(PATTERNS.collectStyles)].map(([_, style])=>{
if(fieldNames.includes(style)) return false; if(textFieldNames.includes(style)) return false;
return field(cm, n, { const field = {
name : style, name : style,
type : FIELD_TYPE.STYLE, type : FIELD_TYPE.TEXT,
increment : 5 increment : 5,
}); hints : true,
}).filter((s)=>!!s); };
return <Text key={genKey(widget.name, n, style)} cm={cm} CodeMirror={CodeMirror} field={field} n={n} text={text} setHints={(f, h)=>setHints(h, f)} getStyleHints={getStyleHints}/>;
}).filter(Boolean);
ReactDOM.render(<React.Fragment> ReactDOM.render(<React.Fragment>
{classes}
{fields} {fields}
{styles} {styles}
</React.Fragment>, node || parent); </React.Fragment>, node || parent);
@@ -41,16 +114,16 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
} }
})); }));
const updateLineWidgets = (n, remove)=>{ const updateLineWidgets = (n)=>{
const { text, widgets } = cm.lineInfo(n); const { text, widgets } = cm.lineInfo(n);
const widgetOption = widgetOptions.find((option)=>!!text.match(option.pattern)); const widgetOption = widgetOptions.find((option)=>!!text.match(option.pattern));
if(!widgetOption) return; if(!widgetOption) return;
if(!!widgets) { if(!!widgets) {
for (const widget of widgets) { for (const widget of widgets) {
widgetOption.createWidget(n, widget.node); widgetOption.renderWidget(n, widget.node);
} }
} else { } else {
return cm.addLineWidget(n, widgetOption.createWidget(n), { return cm.addLineWidget(n, widgetOption.renderWidget(n), {
above : false, above : false,
coverGutter : false, coverGutter : false,
noHScroll : true, noHScroll : true,
@@ -60,7 +133,7 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
}; };
return { return {
removeLineWidgets : (widget)=>{ removeLineWidget : (widget)=>{
cm.removeLineWidget(widget); cm.removeLineWidget(widget);
}, },
updateLineWidgets, updateLineWidgets,
@@ -75,9 +148,12 @@ module.exports = function(CodeMirror, widgets, cm, setHints) {
updateWidgetGutter : ()=>{ updateWidgetGutter : ()=>{
cm.operation(()=>{ cm.operation(()=>{
for (let i = 0; i < cm.lineCount(); i++) { for (let i = 0; i < cm.lineCount(); i++) {
const line = cm.getLine(i); const { text, widgets } = cm.lineInfo(i);
if(widgetOptions.some((option)=>line.match(option.pattern))) { if(widgetOptions.some((option)=>text.match(option.pattern))) {
if(widgets) {
continue;
}
const optionsMarker = document.createElement('div'); const optionsMarker = document.createElement('div');
optionsMarker.style.color = '#822'; optionsMarker.style.color = '#822';
optionsMarker.style.cursor = 'pointer'; optionsMarker.style.cursor = 'pointer';

8
shared/naturalcrit/markdown.js
View File

@@ -313,12 +313,6 @@ const escape = function (html, encode) {
return html; return html;
}; };
const sanatizeScriptTags = (content)=>{
return content
.replace(/<script/ig, '&lt;script')
.replace(/<\/script>/ig, '&lt;/script&gt;');
};
const tagTypes = ['div', 'span', 'a']; const tagTypes = ['div', 'span', 'a'];
const tagRegex = new RegExp(`(${ const tagRegex = new RegExp(`(${
_.map(tagTypes, (type)=>{ _.map(tagTypes, (type)=>{
@@ -349,7 +343,7 @@ module.exports = {
render : (rawBrewText)=>{ render : (rawBrewText)=>{
rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`) rawBrewText = rawBrewText.replace(/^\\column$/gm, `\n<div class='columnSplit'></div>\n`)
.replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`); .replace(/^(:+)$/gm, (match)=>`${`<div class='blank'></div>`.repeat(match.length)}\n`);
return Marked.parse(sanatizeScriptTags(rawBrewText)); return Marked.parse(rawBrewText);
}, },
validate : (rawBrewText)=>{ validate : (rawBrewText)=>{

8
shared/naturalcrit/markdownLegacy.js
View File

@@ -90,12 +90,6 @@ const escape = function (html, encode) {
return html; return html;
}; };
const sanatizeScriptTags = (content)=>{
return content
.replace(/<script/ig, '&lt;script')
.replace(/<\/script>/ig, '&lt;/script&gt;');
};
const tagTypes = ['div', 'span', 'a']; const tagTypes = ['div', 'span', 'a'];
const tagRegex = new RegExp(`(${ const tagRegex = new RegExp(`(${
_.map(tagTypes, (type)=>{ _.map(tagTypes, (type)=>{
@@ -113,7 +107,7 @@ module.exports = {
marked : Markdown, marked : Markdown,
render : (rawBrewText)=>{ render : (rawBrewText)=>{
return Markdown( return Markdown(
sanatizeScriptTags(rawBrewText), rawBrewText,
{ renderer: renderer } { renderer: renderer }
); );
}, },

98
shared/naturalcrit/nav/nav.jsx
View File

@@ -1,5 +1,6 @@
require('./nav.less'); require('./nav.less');
const React = require('react'); const React = require('react');
const { useState, useRef, useEffect } = React;
const createClass = require('create-react-class'); const createClass = require('create-react-class');
const _ = require('lodash'); const _ = require('lodash');
const cx = require('classnames'); const cx = require('classnames');
@@ -71,64 +72,49 @@ const Nav = {
} }
}), }),
dropdown : createClass({ dropdown : function dropdown(props) {
displayName : 'Nav.dropdown', props = Object.assign({}, props, {
getDefaultProps : function() { trigger : 'hover click'
return { });
trigger : 'hover'
};
},
getInitialState : function() {
return {
showDropdown : false
};
},
componentDidMount : function() {
if(this.props.trigger == 'click')
document.addEventListener('click', this.handleClickOutside);
},
componentWillUnmount : function() {
if(this.props.trigger == 'click')
document.removeEventListener('click', this.handleClickOutside);
},
handleClickOutside : function(e){
// Close dropdown when clicked outside
if(this.refs.dropdown && !this.refs.dropdown.contains(e.target)) {
this.handleDropdown(false);
}
},
handleDropdown : function(show){
this.setState({
showDropdown : show
});
},
renderDropdown : function(dropdownChildren){
if(!this.state.showDropdown) return null;
return ( const myRef = useRef(null);
<div className='navDropdown'> const [showDropdown, setShowDropdown] = useState(false);
{dropdownChildren}
</div> useEffect(()=>{
); document.addEventListener('click', handleClickOutside);
}, return ()=>{
render : function () { document.removeEventListener('click', handleClickOutside);
const dropdownChildren = React.Children.map(this.props.children, (child, i)=>{ };
// Ignore the first child }, []);
if(i < 1) return;
return child; function handleClickOutside(e) {
}); // Close dropdown when clicked outside
return ( if(!myRef.current?.contains(e.target)) {
<div className={`navDropdownContainer ${this.props.className}`} handleDropdown(false);
ref='dropdown' }
onMouseEnter={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(true);} : undefined}
onClick= {this.props.trigger == 'click' ? ()=>{this.handleDropdown(true);} : undefined}
onMouseLeave={this.props.trigger == 'hover' ? ()=>{this.handleDropdown(false);} : undefined}>
{this.props.children[0] || this.props.children /*children is not an array when only one child*/}
{this.renderDropdown(dropdownChildren)}
</div>
);
} }
})
function handleDropdown(show) {
setShowDropdown(show ?? !showDropdown);
}
const dropdownChildren = React.Children.map(props.children, (child, i)=>{
if(i < 1) return;
return child;
});
return (
<div className={`navDropdownContainer ${props.className}`}
ref={myRef}
onMouseEnter = { props.trigger.includes('hover') ? ()=>handleDropdown(true) : undefined }
onMouseLeave = { props.trigger.includes('hover') ? ()=>handleDropdown(false) : undefined }
onClick = { props.trigger.includes('click') ? ()=>handleDropdown(true) : undefined }
>
{props.children[0] || props.children /*children is not an array when only one child*/}
{showDropdown && <div className='navDropdown'>{dropdownChildren}</div>}
</div>
);
}
}; };

2
shared/naturalcrit/nav/nav.less
View File

@@ -79,6 +79,8 @@ nav{
left : 0px; left : 0px;
z-index : 10000; z-index : 10000;
width : 100%; width : 100%;
overflow : hidden auto;
max-height : calc(100vh - 28px);
.navItem{ .navItem{
animation-name: glideDropDown; animation-name: glideDropDown;
animation-duration: 0.4s; animation-duration: 0.4s;

6
tests/markdown/basic.test.js
View File

@@ -2,12 +2,6 @@
const Markdown = require('naturalcrit/markdown.js'); const Markdown = require('naturalcrit/markdown.js');
test('Escapes <script> tag', function() {
const source = '<script></script>';
const rendered = Markdown.render(source);
expect(rendered).toMatch('<p>&lt;script>&lt;/script&gt;</p>\n');
});
test('Processes the markdown within an HTML block if its just a class wrapper', function() { test('Processes the markdown within an HTML block if its just a class wrapper', function() {
const source = '<div>*Bold text*</div>'; const source = '<div>*Bold text*</div>';
const rendered = Markdown.render(source); const rendered = Markdown.render(source);

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

@@ -47,8 +47,8 @@ const getTOC = (pages)=>{
return res; return res;
}; };
module.exports = function(brew){ module.exports = function(props){
const pages = 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)=>{
r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`); r.push(`- **[${idx1 + 1} ${g1.title}](#p${g1.page})**`);

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

@@ -19,16 +19,6 @@ module.exports = [
icon : 'fas fa-pencil-alt', icon : 'fas fa-pencil-alt',
view : 'text', view : 'text',
snippets : [ snippets : [
{
name : 'Page Number',
icon : 'fas fa-bookmark',
gen : '{{pageNumber 1}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
},
{
name : 'Auto-incrementing Page Number',
icon : 'fas fa-sort-numeric-down',
gen : '{{pageNumber,auto}}\n{{footnote PART 1 | SECTION NAME}}\n\n'
},
{ {
name : 'Table of Contents', name : 'Table of Contents',
icon : 'fas fa-book', icon : 'fas fa-book',

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

@@ -48,8 +48,8 @@ const getTOC = (pages)=>{
return res; return res;
}; };
module.exports = function(brew){ module.exports = function(props){
const pages = 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)=>{
if(g1.title !== null) { if(g1.title !== null) {

37
themes/V3/5ePHB/widgets.js
View File

@@ -1,24 +1,39 @@
const { WIDGET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants'); const { SNIPPET_TYPE, FIELD_TYPE } = require('../../../shared/naturalcrit/codeEditor/helpers/widget-elements/constants');
module.exports = [{ module.exports = [{
name : 'monster', name : 'monster',
type : WIDGET_TYPE.SNIPPET, type : SNIPPET_TYPE.BLOCK,
classes : ['frame', 'wide'] fields : [{
name : 'frame',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'wide',
type : FIELD_TYPE.CHECKBOX
}]
}, { }, {
name : 'classTable', name : 'classTable',
type : WIDGET_TYPE.SNIPPET, type : SNIPPET_TYPE.BLOCK,
classes : ['frame', 'decoration', 'wide'] fields : [{
name : 'frame',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'decoration',
type : FIELD_TYPE.CHECKBOX
}, {
name : 'wide',
type : FIELD_TYPE.CHECKBOX
}]
}, { }, {
name : 'image', name : 'image',
type : WIDGET_TYPE.IMAGE, type : SNIPPET_TYPE.INJECTOR,
fields : [] fields : []
}, { }, {
name : 'artist', name : 'artist',
type : WIDGET_TYPE.SNIPPET, type : SNIPPET_TYPE.BLOCK,
fields : [{ fields : [{
name : 'top', name : 'top',
type : FIELD_TYPE.STYLE, type : FIELD_TYPE.TEXT,
increment : 5, increment : 5,
lineBreak : true hints : true
}] }]
}]; }];

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

@@ -2,6 +2,7 @@
const WatercolorGen = require('./snippets/watercolor.gen.js'); const WatercolorGen = require('./snippets/watercolor.gen.js');
const ImageMaskGen = require('./snippets/imageMask.gen.js'); const ImageMaskGen = require('./snippets/imageMask.gen.js');
const FooterGen = require('./snippets/footer.gen.js');
const dedent = require('dedent-tabs').default; const dedent = require('dedent-tabs').default;
module.exports = [ module.exports = [
@@ -21,6 +22,53 @@ module.exports = [
icon : 'fas fa-file-alt', icon : 'fas fa-file-alt',
gen : '\n\\page\n' gen : '\n\\page\n'
}, },
{
name : 'Page Number',
icon : 'fas fa-bookmark',
gen : '{{pageNumber 1}}\n'
},
{
name : 'Auto-incrementing Page Number',
icon : 'fas fa-sort-numeric-down',
gen : '{{pageNumber,auto}}\n'
},
{
name : 'Footer',
icon : 'fas fa-shoe-prints',
gen : FooterGen.createFooterFunc(),
subsnippets : [
{
name : 'Footer from H1',
icon : 'fas fa-dice-one',
gen : FooterGen.createFooterFunc(1)
},
{
name : 'Footer from H2',
icon : 'fas fa-dice-two',
gen : FooterGen.createFooterFunc(2)
},
{
name : 'Footer from H3',
icon : 'fas fa-dice-three',
gen : FooterGen.createFooterFunc(3)
},
{
name : 'Footer from H4',
icon : 'fas fa-dice-four',
gen : FooterGen.createFooterFunc(4)
},
{
name : 'Footer from H5',
icon : 'fas fa-dice-five',
gen : FooterGen.createFooterFunc(5)
},
{
name : 'Footer from H6',
icon : 'fas fa-dice-six',
gen : FooterGen.createFooterFunc(6)
}
]
},
{ {
name : 'Vertical Spacing', name : 'Vertical Spacing',
icon : 'fas fa-arrows-alt-v', icon : 'fas fa-arrows-alt-v',

17
themes/V3/Blank/snippets/footer.gen.js Normal file
View File

@@ -0,0 +1,17 @@
const Markdown = require('../../../../shared/naturalcrit/markdown.js');
module.exports = {
createFooterFunc : function(headerSize=1){
return (props)=>{
const cursorPos = props.cursorPos;
const markdownText = props.brew.text.split('\n').slice(0, cursorPos.line).join('\n');
const markdownTokens = Markdown.marked.lexer(markdownText);
const headerToken = markdownTokens.findLast((lexerToken)=>{ return lexerToken.type === 'heading' && lexerToken.depth === headerSize; });
const headerText = headerToken?.tokens.map((token)=>{ return token.text; }).join('');
const outputText = headerText || 'PART 1 | SECTION NAME';
return `\n{{footnote ${outputText}}}\n`;
};
}
};