${this.props.style} ` }} />
+
+ {/* Render pages from Markdown tab */}
{this.state.isMounted
? this.renderPages()
: null}
diff --git a/client/homebrew/editor/editor.jsx b/client/homebrew/editor/editor.jsx
index 8fdab0854..7cbd6bb20 100644
--- a/client/homebrew/editor/editor.jsx
+++ b/client/homebrew/editor/editor.jsx
@@ -19,57 +19,62 @@ const Editor = createClass({
getDefaultProps : function() {
return {
brew : {
- text : ''
+ text : '',
+ style : ''
},
- onChange : ()=>{},
- onMetadataChange : ()=>{},
- showMetaButton : true,
- renderer : 'legacy'
+ onTextChange : ()=>{},
+ onStyleChange : ()=>{},
+ onMetaChange : ()=>{},
+
+ renderer : 'legacy'
};
},
getInitialState : function() {
return {
- showMetadataEditor : false
+ view : 'text' //'text', 'style', 'meta'
};
},
- cursorPosition : {
- line : 0,
- ch : 0
- },
+
+ isText : function() {return this.state.view == 'text';},
+ isStyle : function() {return this.state.view == 'style';},
+ isMeta : function() {return this.state.view == 'meta';},
componentDidMount : function() {
this.updateEditorSize();
this.highlightCustomMarkdown();
window.addEventListener('resize', this.updateEditorSize);
},
+
componentWillUnmount : function() {
window.removeEventListener('resize', this.updateEditorSize);
},
updateEditorSize : function() {
- let paneHeight = this.refs.main.parentNode.clientHeight;
- paneHeight -= SNIPPETBAR_HEIGHT + 1;
- this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+ if(this.refs.codeEditor) {
+ let paneHeight = this.refs.main.parentNode.clientHeight;
+ paneHeight -= SNIPPETBAR_HEIGHT + 1;
+ this.refs.codeEditor.codeMirror.setSize(null, paneHeight);
+ }
},
- handleTextChange : function(text){
- this.props.onChange(text);
- },
- handleCursorActivty : function(curpos){
- this.cursorPosition = curpos;
- },
handleInject : function(injectText){
- const lines = this.props.brew.text.split('\n');
- lines[this.cursorPosition.line] = splice(lines[this.cursorPosition.line], this.cursorPosition.ch, injectText);
+ const text = (this.isText() ? this.props.brew.text : this.props.brew.style);
- this.handleTextChange(lines.join('\n'));
- this.refs.codeEditor.setCursorPosition(this.cursorPosition.line + injectText.split('\n').length, this.cursorPosition.ch + injectText.length);
+ const lines = text.split('\n');
+ const cursorPos = this.refs.codeEditor.getCursorPosition();
+ lines[cursorPos.line] = splice(lines[cursorPos.line], cursorPos.ch, injectText);
+
+ this.refs.codeEditor.setCursorPosition(cursorPos.line + injectText.split('\n').length, cursorPos.ch + injectText.length);
+
+ if(this.isText()) this.props.onTextChange(lines.join('\n'));
+ if(this.isStyle()) this.props.onStyleChange(lines.join('\n'));
},
- handgleToggle : function(){
+
+ handleViewChange : function(newView){
this.setState({
- showMetadataEditor : !this.state.showMetadataEditor
- });
+ view : newView
+ }, this.updateEditorSize); //TODO: not sure if updateeditorsize needed
},
getCurrentPage : function(){
@@ -82,72 +87,73 @@ const Editor = createClass({
highlightCustomMarkdown : function(){
if(!this.refs.codeEditor) return;
- const codeMirror = this.refs.codeEditor.codeMirror;
+ if(this.state.view === 'text') {
+ const codeMirror = this.refs.codeEditor.codeMirror;
- //reset custom text styles
- const customHighlights = codeMirror.getAllMarks();
- for (let i=0;i
{
+ const lineNumbers = _.reduce(this.props.brew.text.split('\n'), (r, line, lineNumber)=>{
- //reset custom line styles
- codeMirror.removeLineClass(lineNumber, 'background');
- codeMirror.removeLineClass(lineNumber, 'text');
+ //reset custom line styles
+ codeMirror.removeLineClass(lineNumber, 'background');
+ codeMirror.removeLineClass(lineNumber, 'text');
- // Legacy Codemirror styling
- if(this.props.renderer == 'legacy') {
- if(line.includes('\\page')){
- codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
- r.push(lineNumber);
- }
- }
-
- // New Codemirror styling for V3 renderer
- if(this.props.renderer == 'V3') {
- if(line.startsWith('\\page')){
- codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
- r.push(lineNumber);
- }
-
- if(line.match(/^\\column$/)){
- codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
- r.push(lineNumber);
- }
-
- // Highlight inline spans {{content}}
- if(line.includes('{{') && line.includes('}}')){
- const regex = /{{(?:="[\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' });
+ // Legacy Codemirror styling
+ if(this.props.renderer == 'legacy') {
+ if(line.includes('\\page')){
+ codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
+ r.push(lineNumber);
}
- } else if(line.trimLeft().startsWith('{{') || line.trimLeft().startsWith('}}')){
- // Highlight block divs {{\n Content \n}}
- let endCh = line.length+1;
-
- const match = line.match(/^ *{{(?:="[\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;
+ // New Codemirror styling for V3 renderer
+ if(this.props.renderer == 'V3') {
+ if(line.startsWith('\\page')){
+ codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
+ r.push(lineNumber);
+ }
+
+ if(line.match(/^\\column$/)){
+ codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
+ r.push(lineNumber);
+ }
+
+ // Highlight inline spans {{content}}
+ if(line.includes('{{') && line.includes('}}')){
+ const regex = /{{(?:="[\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,\-. ]*"|[^"'\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}`;
@@ -158,12 +164,26 @@ const Editor = createClass({
this.refs.codeEditor.updateSize();
},
- renderMetadataEditor : function(){
- if(!this.state.showMetadataEditor) return;
- return ;
+ renderEditor : function(){
+ if(this.isText()){
+ return ;
+ }
+ if(this.isStyle()){
+ return ;
+ }
+ if(this.isMeta()){
+ return ;
+ }
},
render : function(){
@@ -172,25 +192,13 @@ const Editor = createClass({
- {this.renderMetadataEditor()}
-
- {/*
-
-
-
- */}
+ {this.renderEditor()}
);
}
diff --git a/client/homebrew/editor/snippetbar/snippetbar.jsx b/client/homebrew/editor/snippetbar/snippetbar.jsx
index c42e899d9..0c054b12b 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.jsx
+++ b/client/homebrew/editor/snippetbar/snippetbar.jsx
@@ -16,12 +16,13 @@ const execute = function(val, brew){
const Snippetbar = createClass({
getDefaultProps : function() {
return {
- brew : {},
- onInject : ()=>{},
- onToggle : ()=>{},
- showmeta : false,
- showMetaButton : true,
- renderer : ''
+ brew : {},
+ view : 'text',
+ onViewChange : ()=>{},
+ onInject : ()=>{},
+ onToggle : ()=>{},
+ showEditButtons : true,
+ renderer : 'legacy'
};
},
@@ -36,12 +37,16 @@ const Snippetbar = createClass({
},
renderSnippetGroups : function(){
- if(this.props.renderer == 'V3')
- Snippets = SnippetsV3;
- else
- Snippets = SnippetsLegacy;
+ let snippets = [];
- return _.map(Snippets, (snippetGroup)=>{
+ if(this.props.view === 'text') {
+ if(this.props.renderer === 'V3')
+ snippets = SnippetsV3;
+ else
+ snippets = SnippetsLegacy;
+ }
+
+ return _.map(snippets, (snippetGroup)=>{
return
-
- Properties
+ renderEditorButtons : function(){
+ if(!this.props.showEditButtons) return;
+
+ return
+
this.props.onViewChange('text')}>
+
+
+
this.props.onViewChange('style')}>
+
+
+
this.props.onViewChange('meta')}>
+
+
{this.renderSnippetGroups()}
- {this.renderMetadataButton()}
+ {this.renderEditorButtons()}
;
}
});
diff --git a/client/homebrew/editor/snippetbar/snippetbar.less b/client/homebrew/editor/snippetbar/snippetbar.less
index e84d373b5..ae8962501 100644
--- a/client/homebrew/editor/snippetbar/snippetbar.less
+++ b/client/homebrew/editor/snippetbar/snippetbar.less
@@ -1,12 +1,40 @@
.snippetBar{
- @height : 25px;
+ @menuHeight : 25px;
position : relative;
- height : @height;
+ height : @menuHeight;
background-color : #ddd;
+ .editors{
+ position : absolute;
+ display : flex;
+ top : 0px;
+ right : 0px;
+ height : @menuHeight;
+ width : 90px;
+ justify-content : space-between;
+ &>div{
+ height : @menuHeight;
+ width : @menuHeight;
+ cursor : pointer;
+ line-height : @menuHeight;
+ text-align : center;
+ &:hover,&.selected{
+ background-color : #999;
+ }
+ &.text{
+ .tooltipLeft('Brew Editor');
+ }
+ &.style{
+ .tooltipLeft('Style Editor');
+ }
+ &.meta{
+ .tooltipLeft('Properties');
+ }
+ }
+ }
.snippetBarButton{
- height : @height;
- line-height : @height;
+ height : @menuHeight;
+ line-height : @menuHeight;
display : inline-block;
padding : 0px 5px;
font-weight : 800;
diff --git a/client/homebrew/editor/snippetbar/snippets/snippets.js b/client/homebrew/editor/snippetbar/snippets/snippets.js
index 99fe62572..f72817c7a 100644
--- a/client/homebrew/editor/snippetbar/snippets/snippets.js
+++ b/client/homebrew/editor/snippetbar/snippets/snippets.js
@@ -66,7 +66,7 @@ module.exports = [
{
name : 'Auto-incrementing Page Number',
icon : 'fas fa-sort-numeric-down',
- gen : '{{\npageNumber,auto\n}}\n\n'
+ gen : '{{pageNumber,auto\n}}\n\n'
},
{
name : 'Link to page',
diff --git a/client/homebrew/homebrew.jsx b/client/homebrew/homebrew.jsx
index ee6949ea0..94131b1dd 100644
--- a/client/homebrew/homebrew.jsx
+++ b/client/homebrew/homebrew.jsx
@@ -35,7 +35,6 @@ const Homebrew = createClass({
global.account = this.props.account;
global.version = this.props.version;
global.enable_v3 = this.props.enable_v3;
-
},
render : function (){
return (
@@ -45,7 +44,7 @@ const Homebrew = createClass({
}/>
}/>
}/>
-
+ }/>
}/>
} />
} />
diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx
index b60a318be..8b712e055 100644
--- a/client/homebrew/pages/editPage/editPage.jsx
+++ b/client/homebrew/pages/editPage/editPage.jsx
@@ -31,6 +31,7 @@ const EditPage = createClass({
return {
brew : {
text : '',
+ style : '',
shareId : null,
editId : null,
createdAt : null,
@@ -106,17 +107,8 @@ const EditPage = createClass({
this.refs.editor.update();
},
- handleMetadataChange : function(metadata){
- this.setState((prevState)=>({
- brew : _.merge({}, prevState.brew, metadata),
- isPending : true,
- }), ()=>this.trySave());
-
- },
-
handleTextChange : function(text){
-
- //If there are errors, run the validator on everychange to give quick feedback
+ //If there are errors, run the validator on every change to give quick feedback
let htmlErrors = this.state.htmlErrors;
if(htmlErrors.length) htmlErrors = Markdown.validate(text);
@@ -127,6 +119,21 @@ const EditPage = createClass({
}), ()=>this.trySave());
},
+ handleStyleChange : function(style){
+ this.setState((prevState)=>({
+ brew : _.merge({}, prevState.brew, { style: style }),
+ isPending : true
+ }), ()=>this.trySave());
+ },
+
+ handleMetaChange : function(metadata){
+ this.setState((prevState)=>({
+ brew : _.merge({}, prevState.brew, metadata),
+ isPending : true,
+ }), ()=>this.trySave());
+
+ },
+
hasChanges : function(){
return !_.isEqual(this.state.brew, this.savedBrew);
},
@@ -141,7 +148,6 @@ const EditPage = createClass({
},
handleGoogleClick : function(){
- console.log('handlegoogleclick');
if(!global.account?.googleId) {
this.setState({
alertLoginToTransfer : true
@@ -409,11 +415,12 @@ const EditPage = createClass({
-
+