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 ![](/assets/naturalCritLogoRed.svg)}} + {{logo ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoRed.svg)}} # ${_.sample(titles)} ## ${_.sample(subtitles)} @@ -96,7 +96,7 @@ export default { ${_.sample(footnote)} }} - ![background image](https://i.imgur.com/IwHRrbF.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/demontemple.jpg){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 - ![background image](https://i.imgur.com/IsfUnFR.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/mountaincottage.jpg){position:absolute,bottom:0,left:0,height:100%} }} - {{logo ![](/assets/naturalCritLogoRed.svg)}} + {{logo ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoRed.svg)}} \page`; }, @@ -126,7 +126,7 @@ export default { ## ${_.sample(subtitles)} {{imageMaskEdge${_.random(1, 8)},--offset:10cm,--rotation:180 - ![Background image](https://i.imgur.com/9TU96xY.jpg){position:absolute,bottom:0,left:0,height:100%} + ![Background image](https://homebrewery.naturalcrit.com/assets/nightchapel.jpg){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! - ![background image](https://i.imgur.com/MJ4YHu7.jpg){position:absolute,bottom:0,left:0,height:100%} + ![background image](https://homebrewery.naturalcrit.com/assets/shopvials.jpg){position:absolute,bottom:0,left:0,height:100%} {{logo - ![](/assets/naturalCritLogoWhite.svg) + ![](https://homebrewery.naturalcrit.com/assets/naturalCritLogoWhite.svg) 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` - ![cat warrior](https://s-media-cache-ak0.pinimg.com/736x/4a/81/79/4a8179462cfdf39054a418efd4cb743e.jpg) {width:325px,mix-blend-mode:multiply}` + ![cat warrior](https://homebrewery.naturalcrit.com/assets/catwarrior.jpg) {width:325px,mix-blend-mode:multiply}` }, { name : 'Image Wrap Left', icon : 'fac image-wrap-left', gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-right:-3cm,wrapLeft}` + ![homebrewery_mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {width:280px,margin-right:-3cm,wrapLeft}` }, { name : 'Image Wrap Right', icon : 'fac image-wrap-right', gen : dedent` - ![homebrewery_mug](http://i.imgur.com/hMna6G0.png) {width:280px,margin-left:-3cm,wrapRight}` + ![homebrewery_mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {width:280px,margin-left:-3cm,wrapRight}` }, { name : 'Background Image', icon : 'fas fa-tree', gen : dedent` - ![homebrew mug](http://i.imgur.com/hMna6G0.png) {position:absolute,top:50px,right:30px,width:280px}` + ![homebrew mug](https://homebrewery.naturalcrit.com/assets/homebrewerymug.png) {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 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} + ![](https://homebrewery.naturalcrit.com/assets/dragoninflight.jpg){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 - ![](https://i.imgur.com/GZfjDWV.png){height:100%} + ![](https://homebrewery.naturalcrit.com/assets/dragoninflight.jpg){height:100%} }}