mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-04 14:42:40 +00:00
Fix /page not working in legacy mode. (#1233)
* Fix brew styles overwriting each other. * Word wrapping, start fixing spacing on Title letter * Fix \page in legacy brews when not at line start
This commit is contained in:
@@ -20,15 +20,17 @@ const BrewRenderer = createClass({
|
|||||||
getDefaultProps : function() {
|
getDefaultProps : function() {
|
||||||
return {
|
return {
|
||||||
text : '',
|
text : '',
|
||||||
renderer : '',
|
renderer : 'legacy',
|
||||||
errors : []
|
errors : []
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getInitialState : function() {
|
getInitialState : function() {
|
||||||
const pages = this.props.text.split(/^\\page/gm);
|
let pages;
|
||||||
let renderer = 'legacy';
|
if(this.props.renderer == 'legacy') {
|
||||||
if(this.props.renderer)
|
pages = this.props.text.split('\\page');
|
||||||
renderer = this.props.renderer;
|
} else {
|
||||||
|
pages = this.props.text.split(/^\\page/gm);
|
||||||
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
viewablePageNumber : 0,
|
viewablePageNumber : 0,
|
||||||
@@ -38,7 +40,6 @@ const BrewRenderer = createClass({
|
|||||||
pages : pages,
|
pages : pages,
|
||||||
usePPR : pages.length >= PPR_THRESHOLD,
|
usePPR : pages.length >= PPR_THRESHOLD,
|
||||||
visibility : 'hidden',
|
visibility : 'hidden',
|
||||||
renderer : renderer,
|
|
||||||
initialContent : `<!DOCTYPE html><html><head>
|
initialContent : `<!DOCTYPE html><html><head>
|
||||||
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
|
<link href="//use.fontawesome.com/releases/v5.15.1/css/all.css" rel="stylesheet" />
|
||||||
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
|
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700" rel="stylesheet" type="text/css" />
|
||||||
@@ -54,12 +55,19 @@ const BrewRenderer = createClass({
|
|||||||
window.removeEventListener('resize', this.updateSize);
|
window.removeEventListener('resize', this.updateSize);
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps : function(nextProps) {
|
componentDidUpdate : function(prevProps) {
|
||||||
const pages = nextProps.text.split(/^\\page/gm);
|
if(prevProps.text !== this.props.text) {
|
||||||
this.setState({
|
let pages;
|
||||||
pages : pages,
|
if(this.props.renderer == 'legacy') {
|
||||||
usePPR : pages.length >= PPR_THRESHOLD
|
pages = this.props.text.split('\\page');
|
||||||
});
|
} else {
|
||||||
|
pages = this.props.text.split(/^\\page/gm);
|
||||||
|
}
|
||||||
|
this.setState({
|
||||||
|
pages : pages,
|
||||||
|
usePPR : pages.length >= PPR_THRESHOLD
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
updateSize : function() {
|
updateSize : function() {
|
||||||
@@ -114,7 +122,7 @@ const BrewRenderer = createClass({
|
|||||||
},
|
},
|
||||||
|
|
||||||
renderPage : function(pageText, index){
|
renderPage : function(pageText, index){
|
||||||
if(this.state.renderer == 'legacy')
|
if(this.props.renderer == 'legacy')
|
||||||
return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
|
return <div className='phb' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
|
||||||
else
|
else
|
||||||
return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
|
return <div className='phb3' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
|
||||||
|
|||||||
@@ -24,7 +24,7 @@ const Editor = createClass({
|
|||||||
metadata : {},
|
metadata : {},
|
||||||
onMetadataChange : ()=>{},
|
onMetadataChange : ()=>{},
|
||||||
showMetaButton : true,
|
showMetaButton : true,
|
||||||
renderer : ''
|
renderer : 'legacy'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
getInitialState : function() {
|
getInitialState : function() {
|
||||||
@@ -93,13 +93,21 @@ const Editor = createClass({
|
|||||||
codeMirror.removeLineClass(lineNumber, 'background');
|
codeMirror.removeLineClass(lineNumber, 'background');
|
||||||
codeMirror.removeLineClass(lineNumber, 'text');
|
codeMirror.removeLineClass(lineNumber, 'text');
|
||||||
|
|
||||||
if(line.startsWith('\\page')){
|
// Legacy Codemirror styling
|
||||||
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
|
if(this.props.renderer == 'legacy') {
|
||||||
r.push(lineNumber);
|
if(line.includes('\\page')){
|
||||||
|
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
|
||||||
|
r.push(lineNumber);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// New Codemirror styling for V3 renderer
|
// New Codemirror styling for V3 renderer
|
||||||
if(this.props.renderer == 'V3') {
|
if(this.props.renderer == 'V3') {
|
||||||
|
if(line.startsWith('\\page')){
|
||||||
|
codeMirror.addLineClass(lineNumber, 'background', 'pageLine');
|
||||||
|
r.push(lineNumber);
|
||||||
|
}
|
||||||
|
|
||||||
if(line.startsWith('\\column')){
|
if(line.startsWith('\\column')){
|
||||||
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
|
codeMirror.addLineClass(lineNumber, 'text', 'columnSplit');
|
||||||
r.push(lineNumber);
|
r.push(lineNumber);
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
@import (less) './client/homebrew/phbStyle/phb.fonts.css';
|
@import (less) './client/homebrew/phbStyle/phb.fonts.css';
|
||||||
@import (less) './client/homebrew/phbStyle/phb.assets.less';
|
@import (less) './client/homebrew/phbStyle/phb.assets.less';
|
||||||
@import (less) './client/homebrew/phbStyle/phb.depricated.less';
|
|
||||||
//Colors
|
//Colors
|
||||||
@background : #EEE5CE;
|
@background : #EEE5CE;
|
||||||
@noteGreen : #e0e5c1;
|
@noteGreen : #e0e5c1;
|
||||||
@@ -17,12 +17,11 @@ body {
|
|||||||
}
|
}
|
||||||
.useSansSerif(){
|
.useSansSerif(){
|
||||||
font-family : ScalySans;
|
font-family : ScalySans;
|
||||||
|
font-size : 10pt;
|
||||||
em{
|
em{
|
||||||
font-family : ScalySans;
|
|
||||||
font-style : italic;
|
font-style : italic;
|
||||||
}
|
}
|
||||||
strong{
|
strong{
|
||||||
font-family : ScalySans;
|
|
||||||
font-weight : 800;
|
font-weight : 800;
|
||||||
letter-spacing : -0.02em;
|
letter-spacing : -0.02em;
|
||||||
}
|
}
|
||||||
@@ -48,8 +47,7 @@ body {
|
|||||||
overflow : hidden;
|
overflow : hidden;
|
||||||
height : 279.4mm;
|
height : 279.4mm;
|
||||||
width : 215.9mm;
|
width : 215.9mm;
|
||||||
padding : 1.0cm 1.7cm;
|
padding : 1.0cm 1.7cm, 1.5cm;
|
||||||
padding-bottom : 1.5cm;
|
|
||||||
background-color : @background;
|
background-color : @background;
|
||||||
background-image : @backgroundImage;
|
background-image : @backgroundImage;
|
||||||
font-family : BookSanity;
|
font-family : BookSanity;
|
||||||
@@ -61,6 +59,7 @@ body {
|
|||||||
// * BASE
|
// * BASE
|
||||||
// *****************************/
|
// *****************************/
|
||||||
p{
|
p{
|
||||||
|
overflow-wrap : break-word;
|
||||||
padding-bottom : 0.8em;
|
padding-bottom : 0.8em;
|
||||||
line-height : 1.3em;
|
line-height : 1.3em;
|
||||||
&+p{
|
&+p{
|
||||||
@@ -123,9 +122,20 @@ body {
|
|||||||
&+p::first-letter{
|
&+p::first-letter{
|
||||||
float : left;
|
float : left;
|
||||||
font-family : Solberry;
|
font-family : Solberry;
|
||||||
font-size : 10em;
|
|
||||||
color : #222;
|
|
||||||
line-height : 0.8em;
|
line-height : 0.8em;
|
||||||
|
font-size: 3.1cm;
|
||||||
|
padding-top: 4px;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
margin-top: -6px;
|
||||||
|
margin-left: -6px;
|
||||||
|
background-image: linear-gradient(-45deg, #322814, #998250, #322814);
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: rgba(0, 0, 0, 0);
|
||||||
|
}
|
||||||
|
&+p::first-line{
|
||||||
|
font-size : .385cm;
|
||||||
|
font-variant : small-caps;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h2{
|
h2{
|
||||||
|
|||||||
@@ -61,9 +61,9 @@ const CodeEditor = createClass({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
componentWillReceiveProps : function(nextProps){
|
componentDidUpdate : function(prevProps) {
|
||||||
if(this.codeMirror && nextProps.value !== undefined && this.codeMirror.getValue() != nextProps.value) {
|
if(this.codeMirror && this.props.value !== undefined && this.codeMirror.getValue() != this.props.value) {
|
||||||
this.codeMirror.setValue(nextProps.value);
|
this.codeMirror.setValue(this.props.value);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user