mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-02 04:12:47 +00:00
Add toggle for Page Shadows
Reworks the pagesStyles to a broader object previewStyles. This new object has this structure:
```
{
targetElement : { cssProperty: value }
}
```
This commit is contained in:
@@ -37,7 +37,7 @@ const BrewPage = (props)=>{
|
||||
...props
|
||||
};
|
||||
const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
|
||||
return <div className={props.className} id={`p${props.index + 1}`} >
|
||||
return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
|
||||
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
|
||||
</div>;
|
||||
};
|
||||
@@ -67,7 +67,7 @@ const BrewRenderer = (props)=>{
|
||||
isMounted : false,
|
||||
visibility : 'hidden',
|
||||
zoom : 100,
|
||||
pagesStyle : null
|
||||
previewStyles : {}
|
||||
});
|
||||
|
||||
const mainRef = useRef(null);
|
||||
@@ -118,7 +118,7 @@ const BrewRenderer = (props)=>{
|
||||
} else {
|
||||
pageText += `\n\n \n\\column\n `; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
|
||||
const html = Markdown.render(pageText, index);
|
||||
return <BrewPage className='page' index={index} key={index} contents={html} />;
|
||||
return <BrewPage className='page' index={index} key={index} contents={html} style={ state.previewStyles['.page']} />;
|
||||
}
|
||||
};
|
||||
|
||||
@@ -177,7 +177,7 @@ const BrewRenderer = (props)=>{
|
||||
const handleStyle = (newStyle)=>{
|
||||
setState((prevState)=>({
|
||||
...prevState,
|
||||
pagesStyle : { ...prevState.pagesStyle, ...newStyle },
|
||||
previewStyles : { ...prevState.previewStyles, ...newStyle },
|
||||
}));
|
||||
};
|
||||
|
||||
@@ -223,7 +223,8 @@ const BrewRenderer = (props)=>{
|
||||
&&
|
||||
<>
|
||||
{renderStyle()}
|
||||
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.pagesStyle }}>
|
||||
{console.log(state.previewStyles)}
|
||||
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.previewStyles['.pages'] }}>
|
||||
{renderPages()}
|
||||
</div>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user