styling

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>
     </>
   );

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);
+  }
 `;

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>