{
- if(line.indexOf('\\page') !== -1) r++;
+ if(
+ (this.props.renderer == 'legacy' && line.indexOf('\\page') !== -1)
+ ||
+ (this.props.renderer == 'V3' && line.match(/^\\page$/))
+ ) r++;
return r;
}, 1);
},
@@ -107,73 +119,143 @@ const Editor = createClass({
if(this.state.view === 'text') {
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
{ // Batch CodeMirror styling
+ //reset custom text styles
+ const customHighlights = codeMirror.getAllMarks().filter((mark)=>!mark.__isFold); //Don't undo code folding
+ for (let i=customHighlights.length - 1;i>=0;i--) customHighlights[i].clear();
- const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
+ let editorPageCount = 2; // start page count from page 2
- //reset custom line styles
- codeMirror.removeLineClass(lineNumber, 'background');
- codeMirror.removeLineClass(lineNumber, 'text');
+ _.forEach(this.props.brew.text.split('\n'), (line, lineNumber)=>{
- // Legacy Codemirror styling
- if(this.props.renderer == 'legacy') {
- if(line.includes('\\page')){
+ //reset custom line styles
+ codeMirror.removeLineClass(lineNumber, 'background', 'pageLine');
+ codeMirror.removeLineClass(lineNumber, 'text');
+ codeMirror.removeLineClass(lineNumber, 'wrap', 'sourceMoveFlash');
+
+ // Styling for \page breaks
+ if((this.props.renderer == 'legacy' && line.includes('\\page')) ||
+ (this.props.renderer == 'V3' && line.match(/^\\page$/))) {
+
+ // add back the original class 'background' but also add the new class '.pageline'
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
- r.push(lineNumber);
- }
- }
+ const pageCountElement = Object.assign(document.createElement('span'), {
+ className : 'editor-page-count',
+ textContent : editorPageCount
+ });
+ codeMirror.setBookmark({ line: lineNumber, ch: line.length }, pageCountElement);
- // New Codemirror styling for V3 renderer
- if(this.props.renderer == 'V3') {
- if(line.match(/^\\page$/)){
- codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
- r.push(lineNumber);
- }
+ editorPageCount += 1;
+ };
- if(line.match(/^\\column$/)){
- codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
- r.push(lineNumber);
- }
-
- // Highlight inline spans {{content}}
- if(line.includes('{{') && line.includes('}}')){
- const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
- let match;
- let blockCount = 0;
- while ((match = regex.exec(line)) != null) {
- if(match[0].startsWith('{')) {
- blockCount += 1;
- } else {
- blockCount -= 1;
- }
- if(blockCount < 0) {
- blockCount = 0;
- continue;
- }
- codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+ // New Codemirror styling for V3 renderer
+ if(this.props.renderer == 'V3') {
+ if(line.match(/^\\column$/)){
+ codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
}
- } else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
- // Highlight block divs {{\n Content \n}}
- let endCh = line.length+1;
- const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
- if(match)
- endCh = match.index+match[0].length;
- codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+ // Highlight inline spans {{content}}
+ if(line.includes('{{') && line.includes('}}')){
+ const regex = /{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])*\s*|}}/g;
+ let match;
+ let blockCount = 0;
+ while ((match = regex.exec(line)) != null) {
+ if(match[0].startsWith('{')) {
+ blockCount += 1;
+ } else {
+ blockCount -= 1;
+ }
+ if(blockCount < 0) {
+ blockCount = 0;
+ continue;
+ }
+ codeMirror.markText({ line: lineNumber, ch: match.index }, { line: lineNumber, ch: match.index + match[0].length }, { className: 'inline-block' });
+ }
+ } else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
+ // Highlight block divs {{\n Content \n}}
+ let endCh = line.length+1;
+
+ const match = line.match(/^ *{{(?::(?:"[\w,\-()#%. ]*"|[\w\,\-()#%.]*)|[^"'{}\s])* *$|^ *}}$/);
+ if(match)
+ endCh = match.index+match[0].length;
+ codeMirror.markText({ line: lineNumber, ch: 0 }, { line: lineNumber, ch: endCh }, { className: 'block' });
+ }
}
- }
-
- return r;
- }, []);
- return lineNumbers;
+ });
+ });
}
},
- brewJump : function(){
- const currentPage = this.getCurrentPage();
- window.location.hash = `p${currentPage}`;
+ brewJump : function(targetPage=this.getCurrentPage()){
+ if(!window) return;
+ // console.log(`Scroll to: p${targetPage}`);
+ const brewRenderer = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer')[0];
+ const currentPos = brewRenderer.scrollTop;
+ const targetPos = window.frames['BrewRenderer'].contentDocument.getElementById(`p${targetPage}`).getBoundingClientRect().top;
+ const interimPos = targetPos >= 0 ? -30 : 30;
+
+ const bounceDelay = 100;
+ const scrollDelay = 500;
+
+ if(!this.throttleBrewMove) {
+ this.throttleBrewMove = _.throttle((currentPos, interimPos, targetPos)=>{
+ brewRenderer.scrollTo({ top: currentPos + interimPos, behavior: 'smooth' });
+ setTimeout(()=>{
+ brewRenderer.scrollTo({ top: currentPos + targetPos, behavior: 'smooth', block: 'start' });
+ }, bounceDelay);
+ }, scrollDelay, { leading: true, trailing: false });
+ };
+ this.throttleBrewMove(currentPos, interimPos, targetPos);
+
+ // const hashPage = (page != 1) ? `p${page}` : '';
+ // window.location.hash = hashPage;
+ },
+
+ sourceJump : function(targetLine=null){
+ if(this.isText()) {
+ if(targetLine == null) {
+ targetLine = 0;
+
+ const pageCollection = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('page');
+ const brewRendererHeight = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0).getBoundingClientRect().height;
+
+ let currentPage = 1;
+ for (const page of pageCollection) {
+ if(page.getBoundingClientRect().bottom > (brewRendererHeight / 2)) {
+ currentPage = parseInt(page.id.slice(1)) || 1;
+ break;
+ }
+ }
+
+ const textSplit = this.props.renderer == 'V3' ? /^\\page$/gm : /\\page/;
+ const textString = this.props.brew.text.split(textSplit).slice(0, currentPage-1).join(textSplit);
+ const textPosition = textString.length;
+ const lineCount = textString.match('\n') ? textString.slice(0, textPosition).split('\n').length : 0;
+
+ targetLine = lineCount - 1; //Scroll to `\page`, which is one line back.
+
+ let currentY = this.refs.codeEditor.codeMirror.getScrollInfo().top;
+ let targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+ //Scroll 1/10 of the way every 10ms until 1px off.
+ const incrementalScroll = setInterval(()=>{
+ currentY += (targetY - currentY) / 10;
+ this.refs.codeEditor.codeMirror.scrollTo(null, currentY);
+
+ // Update target: target height is not accurate until within +-10 lines of the visible window
+ if(Math.abs(targetY - currentY > 100))
+ targetY = this.refs.codeEditor.codeMirror.heightAtLine(targetLine, 'local', true);
+
+ // End when close enough
+ if(Math.abs(targetY - currentY) < 1) {
+ this.refs.codeEditor.codeMirror.scrollTo(null, targetY); // Scroll any remaining difference
+ this.refs.codeEditor.setCursorPosition({ line: targetLine + 1, ch: 0 });
+ this.refs.codeEditor.codeMirror.addLineClass(targetLine + 1, 'wrap', 'sourceMoveFlash');
+ clearInterval(incrementalScroll);
+ }
+ }, 10);
+ }
+ }
},
//Called when there are changes to the editor's dimensions
@@ -206,6 +288,7 @@ const Editor = createClass({
view={this.state.view}
value={this.props.brew.style ?? DEFAULT_STYLE_TEXT}
onChange={this.props.onStyleChange}
+ enableFolding={false}
rerenderParent={this.rerenderParent} />
;
}
diff --git a/client/homebrew/editor/editor.less b/client/homebrew/editor/editor.less
index 8633e4eb3..810ee1710 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;
+ float : right;
}
.columnSplit{
font-style : italic;
diff --git a/client/homebrew/editor/metadataEditor/metadataEditor.jsx b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
index 48092318a..f3b5419e5 100644
--- a/client/homebrew/editor/metadataEditor/metadataEditor.jsx
+++ b/client/homebrew/editor/metadataEditor/metadataEditor.jsx
@@ -8,7 +8,10 @@ const request = require('superagent');
const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
+const homebreweryThumbnail = require('../../thumbnail.png');
+
const MetadataEditor = createClass({
+ displayName : 'MetadataEditor',
getDefaultProps : function() {
return {
metadata : {
@@ -57,6 +60,23 @@ const MetadataEditor = createClass({
}
},
+ getInitialState : function(){
+ return {
+ showThumbnail : true
+ };
+ },
+
+ toggleThumbnailDisplay : function(){
+ this.setState({
+ showThumbnail : !this.state.showThumbnail
+ });
+ },
+
+ renderThumbnail : function(){
+ if(!this.state.showThumbnail) return;
+ return 
;
+ },
+
handleFieldChange : function(name, e){
this.props.onChange(_.merge({}, this.props.metadata, {
[name] : e.target.value
@@ -91,7 +111,7 @@ const MetadataEditor = createClass({
if(!confirm('Are you REALLY sure? You will lose editor access to this document.')) return;
}
- request.delete(`/api/${this.props.metadata.editId}`)
+ request.delete(`/api/${this.props.metadata.googleId ?? ''}${this.props.metadata.editId}`)
.send()
.end(function(err, res){
window.location.href = '/';
@@ -256,6 +276,18 @@ const MetadataEditor = createClass({