diff --git a/client/components/codeEditor/codeEditor.jsx b/client/components/codeEditor/codeEditor.jsx
index 3ec986689..cd140ad07 100644
--- a/client/components/codeEditor/codeEditor.jsx
+++ b/client/components/codeEditor/codeEditor.jsx
@@ -12,6 +12,7 @@ const CodeEditor = createReactClass({
getDefaultProps : function() {
return {
language : '',
+ tab : 'brewText',
value : '',
wrap : true,
onChange : ()=>{},
@@ -186,6 +187,22 @@ const CodeEditor = createReactClass({
this.updateSize();
},
+ // Use for GFM tabs that use common hot-keys
+ isGFM : function() {
+ if((this.isGFM()) || (this.props.tab === 'brewSnippets')) return true;
+ return false;
+ },
+
+ isBrewText : function() {
+ if(this.isGFM()) return true;
+ return false;
+ },
+
+ isBrewSnippets : function() {
+ if(this.props.tab === 'brewSnippets') return true;
+ return false;
+ },
+
indent : function () {
const cm = this.codeMirror;
if(cm.somethingSelected()) {
@@ -200,6 +217,7 @@ const CodeEditor = createReactClass({
},
makeHeader : function (number) {
+ if(!this.isGFM()) return;
const selection = this.codeMirror?.getSelection();
const header = Array(number).fill('#').join('');
this.codeMirror?.replaceSelection(`${header} ${selection}`, 'around');
@@ -208,6 +226,7 @@ const CodeEditor = createReactClass({
},
makeBold : function() {
+ if(!this.isGFM()) return;
const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '**' && selection.slice(-2) === '**';
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `**${selection}**`, 'around');
if(selection.length === 0){
@@ -217,7 +236,8 @@ const CodeEditor = createReactClass({
},
makeItalic : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '*' && selection.slice(-1) === '*';
+ if(!this.isGFM()) return;
+ 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();
@@ -226,7 +246,8 @@ const CodeEditor = createReactClass({
},
makeSuper : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 1) === '^' && selection.slice(-1) === '^';
+ if(!this.isGFM()) return;
+ 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();
@@ -235,7 +256,8 @@ const CodeEditor = createReactClass({
},
makeSub : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
+ if(!this.isGFM()) return;
+ const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '^^' && selection.slice(-2) === '^^';
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `^^${selection}^^`, 'around');
if(selection.length === 0){
const cursor = this.codeMirror?.getCursor();
@@ -245,10 +267,12 @@ const CodeEditor = createReactClass({
makeNbsp : function() {
+ if(!this.isGFM()) return;
this.codeMirror?.replaceSelection(' ', 'end');
},
makeSpace : function() {
+ if(!this.isGFM()) return;
const selection = this.codeMirror?.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){
@@ -260,6 +284,7 @@ const CodeEditor = createReactClass({
},
removeSpace : function() {
+ if(!this.isGFM()) return;
const selection = this.codeMirror?.getSelection();
const t = selection.slice(0, 8) === '{{width:' && selection.slice(0 -4) === '% }}';
if(t){
@@ -269,10 +294,12 @@ const CodeEditor = createReactClass({
},
newColumn : function() {
+ if(!this.isGFM()) return;
this.codeMirror?.replaceSelection('\n\\column\n\n', 'end');
},
newPage : function() {
+ if(!this.isGFM()) return;
this.codeMirror?.replaceSelection('\n\\page\n\n', 'end');
},
@@ -286,7 +313,8 @@ const CodeEditor = createReactClass({
},
makeUnderline : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === '';
+ if(!this.isGFM()) return;
+ const selection = this.codeMirror.getSelection(), t = selection.slice(0, 3) === '' && selection.slice(-4) === '';
this.codeMirror?.replaceSelection(t ? selection.slice(3, -4) : `${selection}`, 'around');
if(selection.length === 0){
const cursor = this.codeMirror?.getCursor();
@@ -295,7 +323,8 @@ const CodeEditor = createReactClass({
},
makeSpan : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+ if(!this.isGFM()) return;
+ const selection = this.codeMirror.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
this.codeMirror?.replaceSelection(t ? selection.slice(2, -2) : `{{ ${selection}}}`, 'around');
if(selection.length === 0){
const cursor = this.codeMirror?.getCursor();
@@ -304,7 +333,8 @@ const CodeEditor = createReactClass({
},
makeDiv : function() {
- const selection = this.codeMirror?.getSelection(), t = selection.slice(0, 2) === '{{' && selection.slice(-2) === '}}';
+ if(!this.isGFM()) return;
+ 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();
@@ -317,7 +347,7 @@ const CodeEditor = createReactClass({
let cursorPos;
let newComment;
const selection = this.codeMirror?.getSelection();
- if(this.props.language === 'gfm'){
+ if(this.isGFM()){
regex = /^\s*()\s*$/gs;
cursorPos = 4;
newComment = ``;
@@ -334,6 +364,7 @@ const CodeEditor = createReactClass({
},
makeLink : function() {
+ if(!this.isGFM()) return;
const isLink = /^\[(.*)\]\((.*)\)$/;
const selection = this.codeMirror?.getSelection().trim();
let match;
@@ -351,7 +382,8 @@ const CodeEditor = createReactClass({
},
makeList : function(listType) {
- const selectionStart = this.codeMirror?.getCursor('from'), selectionEnd = this.codeMirror?.getCursor('to');
+ if(!this.isGFM()) return;
+ 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 }
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 6970c78e3..9707fe84f 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -86,9 +86,9 @@ const Editor = createReactClass({
});
}
const snippetBar = document.querySelector('.editor > .snippetBar');
- if (!snippetBar) return;
+ if(!snippetBar) return;
- this.resizeObserver = new ResizeObserver(entries => {
+ this.resizeObserver = new ResizeObserver(entries=>{
const height = document.querySelector('.editor > .snippetBar').offsetHeight;
this.setState({ snippetBarHeight: height });
});
@@ -117,7 +117,7 @@ const Editor = createReactClass({
},
componentWillUnmount() {
- if (this.resizeObserver) this.resizeObserver.disconnect();
+ if(this.resizeObserver) this.resizeObserver.disconnect();
},
handleControlKeys : function(e){
@@ -337,7 +337,7 @@ const Editor = createReactClass({
const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
const currentPos = brewRenderer.scrollTop;
const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
-
+
let scrollingTimeout;
const checkIfScrollComplete = ()=>{ // Prevent interrupting a scroll in progress if user clicks multiple times
clearTimeout(scrollingTimeout); // Reset the timer every time a scroll event occurs
@@ -392,7 +392,7 @@ const Editor = createReactClass({
isJumping = true;
checkIfScrollComplete();
- if (this.codeEditor.current?.codeMirror) {
+ if(this.codeEditor.current?.codeMirror) {
this.codeEditor.current.codeMirror?.on('scroll', checkIfScrollComplete);
}
@@ -442,6 +442,7 @@ const Editor = createReactClass({
',
'Credit: Kyounghwan Kim'
].join('\n')
@@ -50,7 +50,7 @@ export default [
icon : 'fas fa-tree',
gen : [
'
'
].join('\n')
},
diff --git a/themes/V3/5ePHB/snippets/coverpage.gen.js b/themes/V3/5ePHB/snippets/coverpage.gen.js
index 9a0adaaa7..96fc91cbd 100644
--- a/themes/V3/5ePHB/snippets/coverpage.gen.js
+++ b/themes/V3/5ePHB/snippets/coverpage.gen.js
@@ -84,7 +84,7 @@ export default {
return dedent`
{{frontCover}}
- {{logo }}
+ {{logo }}
# ${_.sample(titles)}
## ${_.sample(subtitles)}
@@ -96,7 +96,7 @@ export default {
${_.sample(footnote)}
}}
- {position:absolute,bottom:0,left:0,height:100%}
+ {position:absolute,bottom:0,left:0,height:100%}
\page`;
},
@@ -110,10 +110,10 @@ export default {
___
{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0
- {position:absolute,bottom:0,left:0,height:100%}
+ {position:absolute,bottom:0,left:0,height:100%}
}}
- {{logo }}
+ {{logo }}
\page`;
},
@@ -126,7 +126,7 @@ export default {
## ${_.sample(subtitles)}
{{imageMaskEdge${_.random(1, 8)},--offset:10cm,--rotation:180
- {position:absolute,bottom:0,left:0,height:100%}
+ {position:absolute,bottom:0,left:0,height:100%}
}}
\page`;
@@ -143,10 +143,10 @@ export default {
For use with any fantasy roleplaying ruleset. Play the best game of your life!
- {position:absolute,bottom:0,left:0,height:100%}
+ {position:absolute,bottom:0,left:0,height:100%}
{{logo
- 
+ 
Homebrewery.Naturalcrit.com
}}`;
diff --git a/themes/V3/Blank/snippets.js b/themes/V3/Blank/snippets.js
index 1f44e95e1..0b61c0fd6 100644
--- a/themes/V3/Blank/snippets.js
+++ b/themes/V3/Blank/snippets.js
@@ -645,25 +645,25 @@ export default [
name : 'Image',
icon : 'fas fa-image',
gen : dedent`
-  {width:325px,mix-blend-mode:multiply}`
+  {width:325px,mix-blend-mode:multiply}`
},
{
name : 'Image Wrap Left',
icon : 'fac image-wrap-left',
gen : dedent`
-  {width:280px,margin-right:-3cm,wrapLeft}`
+  {width:280px,margin-right:-3cm,wrapLeft}`
},
{
name : 'Image Wrap Right',
icon : 'fac image-wrap-right',
gen : dedent`
-  {width:280px,margin-left:-3cm,wrapRight}`
+  {width:280px,margin-left:-3cm,wrapRight}`
},
{
name : 'Background Image',
icon : 'fas fa-tree',
gen : dedent`
-  {position:absolute,top:50px,right:30px,width:280px}`
+  {position:absolute,top:50px,right:30px,width:280px}`
},
{
name : 'Watercolor Splatter',
diff --git a/themes/V3/Blank/snippets/imageMask.gen.js b/themes/V3/Blank/snippets/imageMask.gen.js
index d84568f35..670d2de98 100644
--- a/themes/V3/Blank/snippets/imageMask.gen.js
+++ b/themes/V3/Blank/snippets/imageMask.gen.js
@@ -5,7 +5,7 @@ export default {
center : ()=>{
return dedent`
{{imageMaskCenter${_.random(1, 16)},--offsetX:0%,--offsetY:0%,--rotation:0
- {height:100%}
+ {height:100%}
}}
\n\n`;
@@ -32,7 +32,7 @@ export default {
const offsetY = (y == 'top' ? '50%' : '-50%');
return dedent`
{{imageMaskCorner${_.random(1, 37)},--offsetX:${offsetX},--offsetY:${offsetY},--rotation:0
- {height:100%}
+ {height:100%}
}}