From 1fb63f8be3b608f301152bdc97716c78af174533 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Sat, 6 Nov 2021 22:28:12 -0500 Subject: [PATCH 01/14] initial commit to add programmatic page counts in editor update element classname to be more descriptive, remove some commented code. --- client/homebrew/editor/editor.jsx | 50 ++++++++++++++++++++++++++++++ client/homebrew/editor/editor.less | 12 +++---- 2 files changed, 54 insertions(+), 8 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 77001435d..40a58ea83 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -52,6 +52,7 @@ const Editor = createClass({ componentDidMount : function() { this.updateEditorSize(); + this.addEditorPageNumbers(); this.highlightCustomMarkdown(); window.addEventListener('resize', this.updateEditorSize); }, @@ -61,6 +62,7 @@ const Editor = createClass({ }, componentDidUpdate : function() { + this.addEditorPageNumbers(); this.highlightCustomMarkdown(); }, @@ -102,6 +104,53 @@ const Editor = createClass({ }, 1); }, + addEditorPageNumbers : function(){ + if(!this.refs.codeEditor) return; + if(this.state.view === 'text') { + let editorPageCount = 2; // start counting from page 2 + const codeMirror = this.refs.codeEditor.codeMirror; + + const pageCountWidgets = document.getElementsByClassName('editor-page'); + + for(let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove(); + + + console.log(editorPageCount); + + const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{ + if(this.props.renderer == 'legacy') { + if(line.includes('\\page')) { + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement); + testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px'; + testElement.style.left = 'unset'; + editorPageCount = editorPageCount + 1; + r.push(lineNumber); + } + } + + if(this.props.renderer == 'V3') { + if(line.match(/^\\page$/)){ + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement); + testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px'; + testElement.style.left = 'unset'; + editorPageCount = editorPageCount + 1; + r.push(lineNumber); + } + } + return r; + }, []); + return lineNumbers; + } + }, + highlightCustomMarkdown : function(){ if(!this.refs.codeEditor) return; if(this.state.view === 'text') { @@ -111,6 +160,7 @@ const Editor = createClass({ const customHighlights = codeMirror.getAllMarks(); for (let i=0;i{ //reset custom line styles diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 8633e4eb3..439e1f482 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -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; + right : 12px; } .columnSplit{ font-style : italic; From 9141b93a6b8b02181f5d324712d7785e71528218 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Sun, 7 Nov 2021 16:47:54 -0600 Subject: [PATCH 02/14] fix pageCountWidgets to get elements by correct class name --- client/homebrew/editor/editor.jsx | 23 ++++++++++------------- 1 file changed, 10 insertions(+), 13 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 40a58ea83..006955fc2 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -107,39 +107,36 @@ const Editor = createClass({ addEditorPageNumbers : function(){ if(!this.refs.codeEditor) return; if(this.state.view === 'text') { - let editorPageCount = 2; // start counting from page 2 const codeMirror = this.refs.codeEditor.codeMirror; - const pageCountWidgets = document.getElementsByClassName('editor-page'); - - for(let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove(); + const pageCountWidgets = document.getElementsByClassName('editor-page-count'); + for (let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove(); - - console.log(editorPageCount); + let editorPageCount = 2; // start counting from page 2 const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{ if(this.props.renderer == 'legacy') { if(line.includes('\\page')) { const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', + className : 'editor-page-count', textContent : editorPageCount }); - codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement); - testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px'; + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; testElement.style.left = 'unset'; editorPageCount = editorPageCount + 1; r.push(lineNumber); } } - + if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', + className : 'editor-page-count', textContent : editorPageCount }); - codeMirror.addWidget({ line: lineNumber, ch: 0}, testElement); - testElement.style.top = parseInt(testElement.style.top) - 12.5 + 'px'; + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; testElement.style.left = 'unset'; editorPageCount = editorPageCount + 1; r.push(lineNumber); From c3e24ef4c597f332b86d5470ac9e909b83aa7220 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 8 Nov 2021 08:59:30 -0600 Subject: [PATCH 03/14] replace _.reduce() with _.forEach() --- client/homebrew/editor/editor.jsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 006955fc2..96c3ce786 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -114,7 +114,7 @@ const Editor = createClass({ let editorPageCount = 2; // start counting from page 2 - const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{ + _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ if(this.props.renderer == 'legacy') { if(line.includes('\\page')) { const testElement = Object.assign(document.createElement('div'), { @@ -125,7 +125,6 @@ const Editor = createClass({ testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; testElement.style.left = 'unset'; editorPageCount = editorPageCount + 1; - r.push(lineNumber); } } @@ -139,12 +138,9 @@ const Editor = createClass({ testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; testElement.style.left = 'unset'; editorPageCount = editorPageCount + 1; - r.push(lineNumber); } } - return r; - }, []); - return lineNumbers; + }, []) } }, From 403e5050e85473229c6b7569c569f4a64d20110e Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 8 Nov 2021 09:05:08 -0600 Subject: [PATCH 04/14] adjust position from `right` to accommodate scrollbar --- client/homebrew/editor/editor.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 439e1f482..61f9279cb 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -11,7 +11,7 @@ } .editor-page-count{ color : grey; - right : 12px; + right : 15px; } .columnSplit{ font-style : italic; From 796bd220007e28cc7e35bec0d4172eff7f3d1d16 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 8 Nov 2021 09:07:59 -0600 Subject: [PATCH 05/14] circleCI update --- client/homebrew/editor/editor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 96c3ce786..73a5a0d51 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -140,7 +140,7 @@ const Editor = createClass({ editorPageCount = editorPageCount + 1; } } - }, []) + }, []); } }, From 3e54f6e6e1e0622dd1ef2061f026cb10104d6aee Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Mon, 8 Nov 2021 10:49:41 -0600 Subject: [PATCH 06/14] remove collection array from _.forEach() function Co-authored-by: Trevor Buckner --- client/homebrew/editor/editor.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 73a5a0d51..a882863d1 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -140,7 +140,7 @@ const Editor = createClass({ editorPageCount = editorPageCount + 1; } } - }, []); + }); } }, From 9f05aae876d2d7fad4495faa1f1d889c0679db72 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Wed, 10 Nov 2021 11:17:45 -0600 Subject: [PATCH 07/14] remove `left` property entirely and set height to cm.defaultTextHeight --- client/homebrew/editor/editor.jsx | 7 ++++--- client/homebrew/editor/editor.less | 2 +- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index a882863d1..7879b8797 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -122,8 +122,9 @@ const Editor = createClass({ textContent : editorPageCount }); codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; - testElement.style.left = 'unset'; + // testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; + testElement.style.top = `${parseInt(testElement.style.top) - cm.defaultTextHeight()}px`; + testElement.style.left = null; editorPageCount = editorPageCount + 1; } } @@ -136,7 +137,7 @@ const Editor = createClass({ }); codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; - testElement.style.left = 'unset'; + testElement.style.left = null; editorPageCount = editorPageCount + 1; } } diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index 61f9279cb..d20cfd86e 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -11,7 +11,7 @@ } .editor-page-count{ color : grey; - right : 15px; + right : 15px; // needs to be enough to push past scrollbar. } .columnSplit{ font-style : italic; From 8b13528661fe6e74c63ec954834700416caf0e64 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Wed, 17 Nov 2021 09:47:51 -0600 Subject: [PATCH 08/14] add check for change to current viewport --- client/homebrew/editor/editor.jsx | 40 ++++++++++++-------- shared/naturalcrit/codeEditor/codeEditor.jsx | 1 + 2 files changed, 26 insertions(+), 15 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 7879b8797..ef96e64c8 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -114,30 +114,40 @@ const Editor = createClass({ let editorPageCount = 2; // start counting from page 2 + // get top and bottom line numbers currently in editor viewport + const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); + const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, "window"); + const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, "window"); + _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ if(this.props.renderer == 'legacy') { if(line.includes('\\page')) { - const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - // testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; - testElement.style.top = `${parseInt(testElement.style.top) - cm.defaultTextHeight()}px`; - testElement.style.left = null; + // add a check here to see if in current viewport, then create widget if true + if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; + testElement.style.left = null; + } + // end createWidget process editorPageCount = editorPageCount + 1; } } if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ - const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - testElement.style.top = `${parseInt(testElement.style.top) - 12.5}px`; - testElement.style.left = null; + if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; + testElement.style.left = null; + } editorPageCount = editorPageCount + 1; } } diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 621e24f77..8b9c372b6 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -80,6 +80,7 @@ const CodeEditor = createClass({ // Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works. this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());}); + this.codeMirror.on('viewportChange', _.debounce((cm)=>{this.props.onChange(cm.getValue());},200)); this.updateSize(); }, From f0608441fcc5736e75c84adc3b97ca7f9741ba45 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Wed, 17 Nov 2021 09:58:31 -0600 Subject: [PATCH 09/14] fix circleCI errors --- client/homebrew/editor/editor.jsx | 4 ++-- shared/naturalcrit/codeEditor/codeEditor.jsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index ef96e64c8..7b31ca75e 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -116,8 +116,8 @@ const Editor = createClass({ // get top and bottom line numbers currently in editor viewport const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); - const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, "window"); - const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, "window"); + const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window'); + const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window'); _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ if(this.props.renderer == 'legacy') { diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index 8b9c372b6..9b202cedc 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -80,7 +80,7 @@ const CodeEditor = createClass({ // Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works. this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());}); - this.codeMirror.on('viewportChange', _.debounce((cm)=>{this.props.onChange(cm.getValue());},200)); + this.codeMirror.on('viewportChange', _.debounce((cm)=>{this.props.onChange(cm.getValue());}, 200)); this.updateSize(); }, From f72d8f0ef006f8e8d2c16190e3394efd73caf51f Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Wed, 17 Nov 2021 10:47:16 -0600 Subject: [PATCH 10/14] merge pageNumber() into customHighlight() --- client/homebrew/editor/editor.jsx | 103 ++++++++++++------------------ 1 file changed, 41 insertions(+), 62 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 7b31ca75e..2ce86c3b7 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -52,7 +52,6 @@ const Editor = createClass({ componentDidMount : function() { this.updateEditorSize(); - this.addEditorPageNumbers(); this.highlightCustomMarkdown(); window.addEventListener('resize', this.updateEditorSize); }, @@ -62,7 +61,6 @@ const Editor = createClass({ }, componentDidUpdate : function() { - this.addEditorPageNumbers(); this.highlightCustomMarkdown(); }, @@ -104,57 +102,6 @@ const Editor = createClass({ }, 1); }, - addEditorPageNumbers : function(){ - if(!this.refs.codeEditor) return; - if(this.state.view === 'text') { - const codeMirror = this.refs.codeEditor.codeMirror; - - const pageCountWidgets = document.getElementsByClassName('editor-page-count'); - for (let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove(); - - let editorPageCount = 2; // start counting from page 2 - - // get top and bottom line numbers currently in editor viewport - const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); - const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window'); - const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window'); - - _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ - if(this.props.renderer == 'legacy') { - if(line.includes('\\page')) { - // add a check here to see if in current viewport, then create widget if true - if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ - const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; - testElement.style.left = null; - } - // end createWidget process - editorPageCount = editorPageCount + 1; - } - } - - if(this.props.renderer == 'V3') { - if(line.match(/^\\page$/)){ - if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ - const testElement = Object.assign(document.createElement('div'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; - testElement.style.left = null; - } - editorPageCount = editorPageCount + 1; - } - } - }); - } - }, - highlightCustomMarkdown : function(){ if(!this.refs.codeEditor) return; if(this.state.view === 'text') { @@ -164,8 +111,18 @@ const Editor = createClass({ const customHighlights = codeMirror.getAllMarks(); for (let i=0;i=0;x--) pageCountWidgets[x].remove(); - const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{ + let editorPageCount = 2; // start page count from page 2 + + // get top and bottom line numbers currently in editor viewport + const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); + const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window'); + const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window'); + + _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ //reset custom line styles codeMirror.removeLineClass(lineNumber, 'background'); @@ -174,21 +131,46 @@ const Editor = createClass({ // Legacy Codemirror styling if(this.props.renderer == 'legacy') { if(line.includes('\\page')){ + // add back the original class 'background' but also add the new class '.pageline' codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - r.push(lineNumber); - } + // add a check here to see if in current viewport, then create widget if true + if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + // addWidget() sets an inline style for 'top' and 'left' by default; the below overrides or removes the default values + testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; + testElement.style.left = null; + } + // end createWidget process + editorPageCount = editorPageCount + 1; + }; + } // New Codemirror styling for V3 renderer if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ + // add back the original class 'background' but also add the new class '.pageline' codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - r.push(lineNumber); + // add a check here to see if in current viewport, then create widget if true + if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ + const testElement = Object.assign(document.createElement('div'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); + // addWidget() sets an inline style for 'top' and 'left' by default; the below overrides or removes the default values + testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; + testElement.style.left = null; + } + editorPageCount = editorPageCount + 1; } if(line.match(/^\\column$/)){ codeMirror.addLineClass(lineNumber, 'text', 'columnSplit'); - r.push(lineNumber); } // Highlight inline spans {{content}} @@ -218,10 +200,7 @@ const Editor = createClass({ codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' }); } } - - return r; - }, []); - return lineNumbers; + }); } }, From 372d33271de5d653aa9cc6a83bb4a1cdd6c325d7 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Sun, 21 Nov 2021 15:17:23 -0600 Subject: [PATCH 11/14] Change widgets to bookmarks for page counters --- client/homebrew/editor/editor.jsx | 37 +++++++++++------------------- client/homebrew/editor/editor.less | 2 +- 2 files changed, 15 insertions(+), 24 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 3201b8c79..f2428e906 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -105,22 +105,20 @@ const Editor = createClass({ highlightCustomMarkdown : function(){ if(!this.refs.codeEditor) return; if(this.state.view === 'text') { + console.log('change'); const codeMirror = this.refs.codeEditor.codeMirror; //reset custom text styles const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding - for (let i=0;i=0;i--) customHighlights[i].clear(); - // remove all widgets (page numbers in Editor) - const pageCountWidgets = document.getElementsByClassName('editor-page-count'); - for (let x=pageCountWidgets.length - 1;x>=0;x--) pageCountWidgets[x].remove(); let editorPageCount = 2; // start page count from page 2 // get top and bottom line numbers currently in editor viewport const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); - const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window'); - const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window'); + const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window') - 50; + const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window') + 50; _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ @@ -131,20 +129,16 @@ const Editor = createClass({ // Legacy Codemirror styling if(this.props.renderer == 'legacy') { if(line.includes('\\page')){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - // add a check here to see if in current viewport, then create widget if true + // add a check here to see if in current viewport if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ - const testElement = Object.assign(document.createElement('div'), { + // add back the original class 'background' but also add the new class '.pageline' + codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); + const pageCountElement = Object.assign(document.createElement('span'), { className : 'editor-page-count', textContent : editorPageCount }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - // addWidget() sets an inline style for 'top' and 'left' by default; the below overrides or removes the default values - testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; - testElement.style.left = null; + codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); } - // end createWidget process editorPageCount = editorPageCount + 1; }; @@ -153,18 +147,15 @@ const Editor = createClass({ // New Codemirror styling for V3 renderer if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - // add a check here to see if in current viewport, then create widget if true + // add a check here to see if in current viewport, if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ - const testElement = Object.assign(document.createElement('div'), { + // add back the original class 'background' but also add the new class '.pageline' + codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); + const pageCountElement = Object.assign(document.createElement('span'), { className : 'editor-page-count', textContent : editorPageCount }); - codeMirror.addWidget({ line: lineNumber, ch: 0 }, testElement); - // addWidget() sets an inline style for 'top' and 'left' by default; the below overrides or removes the default values - testElement.style.top = `${parseInt(testElement.style.top) - codeMirror.defaultTextHeight()}px`; - testElement.style.left = null; + codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); } editorPageCount = editorPageCount + 1; } diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index d20cfd86e..ffdcdd856 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -11,7 +11,7 @@ } .editor-page-count{ color : grey; - right : 15px; // needs to be enough to push past scrollbar. + float: right; } .columnSplit{ font-style : italic; From 5cd45a1413656855fe9fb07347ecaa68e43e0516 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Fri, 3 Dec 2021 20:20:40 -0600 Subject: [PATCH 12/14] remove "in viewport" requirement for markdown highlight/pg numbers --- client/homebrew/editor/editor.jsx | 31 +++++++------------- shared/naturalcrit/codeEditor/codeEditor.jsx | 1 - 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index f2428e906..49649bf1d 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -115,11 +115,6 @@ const Editor = createClass({ let editorPageCount = 2; // start page count from page 2 - // get top and bottom line numbers currently in editor viewport - const viewportRect = codeMirror.getWrapperElement().getBoundingClientRect(); - const topVisibleLine = codeMirror.lineAtHeight(viewportRect.top, 'window') - 50; - const bottomVisibleLine = codeMirror.lineAtHeight(viewportRect.bottom, 'window') + 50; - _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ //reset custom line styles @@ -129,17 +124,15 @@ const Editor = createClass({ // Legacy Codemirror styling if(this.props.renderer == 'legacy') { if(line.includes('\\page')){ - // add a check here to see if in current viewport - if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - const pageCountElement = Object.assign(document.createElement('span'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - } - editorPageCount = editorPageCount + 1; + // add back the original class 'background' but also add the new class '.pageline' + codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); + const pageCountElement = Object.assign(document.createElement('span'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); + + editorPageCount += 1; }; } @@ -147,8 +140,6 @@ const Editor = createClass({ // New Codemirror styling for V3 renderer if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ - // add a check here to see if in current viewport, - if(lineNumber > topVisibleLine && lineNumber < bottomVisibleLine){ // add back the original class 'background' but also add the new class '.pageline' codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); const pageCountElement = Object.assign(document.createElement('span'), { @@ -156,8 +147,8 @@ const Editor = createClass({ textContent : editorPageCount }); codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - } - editorPageCount = editorPageCount + 1; + + editorPageCount += 1; } if(line.match(/^\\column$/)){ diff --git a/shared/naturalcrit/codeEditor/codeEditor.jsx b/shared/naturalcrit/codeEditor/codeEditor.jsx index a23603908..01eca0114 100644 --- a/shared/naturalcrit/codeEditor/codeEditor.jsx +++ b/shared/naturalcrit/codeEditor/codeEditor.jsx @@ -114,7 +114,6 @@ const CodeEditor = createClass({ // Note: codeMirror passes a copy of itself in this callback. cm === this.codeMirror. Either one works. this.codeMirror.on('change', (cm)=>{this.props.onChange(cm.getValue());}); - this.codeMirror.on('viewportChange', _.debounce((cm)=>{this.props.onChange(cm.getValue());}, 200)); this.updateSize(); }, From dcf4fe10cd091f6d44f97380300d61f5276cee58 Mon Sep 17 00:00:00 2001 From: Gazook89 <58999374+Gazook89@users.noreply.github.com> Date: Fri, 3 Dec 2021 20:25:04 -0600 Subject: [PATCH 13/14] lint --- client/homebrew/editor/editor.jsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 49649bf1d..35da6e3bb 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -131,7 +131,7 @@ const Editor = createClass({ textContent : editorPageCount }); codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - + editorPageCount += 1; }; @@ -140,14 +140,14 @@ const Editor = createClass({ // New Codemirror styling for V3 renderer if(this.props.renderer == 'V3') { if(line.match(/^\\page$/)){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - const pageCountElement = Object.assign(document.createElement('span'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - + // add back the original class 'background' but also add the new class '.pageline' + codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); + const pageCountElement = Object.assign(document.createElement('span'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); + editorPageCount += 1; } From 8acd42fcbef632dd2fbc0cdb68983205d3e31628 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Mon, 6 Dec 2021 15:36:41 -0500 Subject: [PATCH 14/14] Small cleanup. Reduce redundant code. --- client/homebrew/editor/editor.jsx | 39 +++++++++--------------------- client/homebrew/editor/editor.less | 2 +- 2 files changed, 13 insertions(+), 28 deletions(-) diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx index 35da6e3bb..3822c0b99 100644 --- a/client/homebrew/editor/editor.jsx +++ b/client/homebrew/editor/editor.jsx @@ -105,14 +105,12 @@ const Editor = createClass({ highlightCustomMarkdown : function(){ if(!this.refs.codeEditor) return; if(this.state.view === 'text') { - console.log('change'); const codeMirror = this.refs.codeEditor.codeMirror; //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(); - let editorPageCount = 2; // start page count from page 2 _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{ @@ -121,36 +119,23 @@ const Editor = createClass({ codeMirror.removeLineClass(lineNumber, 'background'); codeMirror.removeLineClass(lineNumber, 'text'); - // Legacy Codemirror styling - if(this.props.renderer == 'legacy') { - if(line.includes('\\page')){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - const pageCountElement = Object.assign(document.createElement('span'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); + // Styling for \page breaks + if((this.props.renderer == 'legacy' && line.includes('\\page')) || + (this.props.renderer == 'V3' && line.match(/^\\page$/))) { - editorPageCount += 1; - }; + // add back the original class 'background' but also add the new class '.pageline' + codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); + const pageCountElement = Object.assign(document.createElement('span'), { + className : 'editor-page-count', + textContent : editorPageCount + }); + codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - } + editorPageCount += 1; + }; // New Codemirror styling for V3 renderer if(this.props.renderer == 'V3') { - if(line.match(/^\\page$/)){ - // add back the original class 'background' but also add the new class '.pageline' - codeMirror.addLineClass(lineNumber, 'background', 'pageLine'); - const pageCountElement = Object.assign(document.createElement('span'), { - className : 'editor-page-count', - textContent : editorPageCount - }); - codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement); - - editorPageCount += 1; - } - if(line.match(/^\\column$/)){ codeMirror.addLineClass(lineNumber, 'text', 'columnSplit'); } diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less index ffdcdd856..810ee1710 100644 --- a/client/homebrew/editor/editor.less +++ b/client/homebrew/editor/editor.less @@ -11,7 +11,7 @@ } .editor-page-count{ color : grey; - float: right; + float : right; } .columnSplit{ font-style : italic;