diff --git a/editors/demo/src/NCBI/NCBI.js b/editors/demo/src/NCBI/NCBI.js index 77aabf3cde11807c985d9f18554a67a4f283f954..a32df6fabf62c37568affad0c2181c702a0f7b1f 100644 --- a/editors/demo/src/NCBI/NCBI.js +++ b/editors/demo/src/NCBI/NCBI.js @@ -7,27 +7,50 @@ import { NcbiLayout, NcbiMiniLayout } from './layout'; import { configTitle, configMini } from './config'; const Wrapper = styled.div` - padding: 50px; + display: flex; + flex-direction: row; + justify-content: center; + padding-top: 50px; + width: 100%; `; -const Divider = styled.div` - height: 50px; - width: 100%; +const FirstEditor = styled.div` + margin-right: 20px; +`; + +const SecondEditor = styled.div``; + +const TitleEditor = styled.div` + background: #fff; + height: 20px; + position: relative; + top: 2px; + width: 80px; `; const Ncbi = () => { return ( <> <Wrapper> - <Wax - config={configTitle} - autoFocus - value="This is a really really really long title that you cannot break into multiple lines" - layout={NcbiLayout} - /> - <Divider></Divider> - - <Wax config={configMini} autoFocus value="" layout={NcbiMiniLayout} /> + <FirstEditor> + <TitleEditor>Basic Editor</TitleEditor> + + <Wax + config={configMini} + autoFocus + value="" + layout={NcbiMiniLayout} + placeholder="Start Typing ..." + /> + </FirstEditor> + <SecondEditor> + <TitleEditor>Title Editor</TitleEditor> + <Wax + config={configTitle} + value="This is a really really really long title that you cannot break into multiple lines" + layout={NcbiLayout} + /> + </SecondEditor> </Wrapper> </> ); diff --git a/editors/demo/src/NCBI/layout/EditorMiniElements.js b/editors/demo/src/NCBI/layout/EditorMiniElements.js index b745fb41dd34541b490bc81c6a115fb37b571aed..acb543571742196b9c94b19c58664cdb7d7c6e10 100644 --- a/editors/demo/src/NCBI/layout/EditorMiniElements.js +++ b/editors/demo/src/NCBI/layout/EditorMiniElements.js @@ -60,4 +60,21 @@ export default css` sub { line-height: 0; } + + p { + line-height: 21px; + } + + /* placeholder */ + .empty-node::before { + color: #aaa; + float: left; + font-style: italic; + pointer-events: none; + height: 0; + } + + p.empty-node:first-child::before { + content: attr(data-content); + } `; diff --git a/editors/demo/src/NCBI/layout/NcbiLayout.js b/editors/demo/src/NCBI/layout/NcbiLayout.js index 61b7831d2717ebb864d5f3ec2e6c13fd1db42d83..061ccd11f29cedaf21bcc56ff1f1095bedbdf815 100644 --- a/editors/demo/src/NCBI/layout/NcbiLayout.js +++ b/editors/demo/src/NCBI/layout/NcbiLayout.js @@ -65,22 +65,11 @@ const EditorContainer = styled.div` } `; -const TitleEditor = styled.div` - background: #fff; - height: 20px; - left: 51px; - position: absolute; - top: 91px; - width: 80px; -`; - const TopBar = ComponentPlugin('topBar'); const WaxOverlays = ComponentPlugin('waxOverlays'); -console.log(cokoTheme); const NcbiLayout = ({ editor }) => ( <ThemeProvider theme={cokoTheme}> <Wrapper> - <TitleEditor>Title Editor</TitleEditor> <TopMenu> <TopBar /> </TopMenu>