remove all classNames and creare EditoriaLayout

editors/editoria/src/Editoria.js

-import React, { Component } from "react";
+import React, { Fragment, Component } from "react";
 import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
 
 import { Wax } from "wax-prosemirror-core";
-import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+import { EditoriaLayout } from "wax-prosemirror-layouts";
 import { cokoTheme } from "wax-prosemirror-themes";
 
-import "wax-prosemirror-layouts/layouts/editoria-layout.css";
-import "wax-prosemirror-layouts/vars/wax-editoria-vars.css";
-
 import { schema, keys, plugins, rules } from "./EditorConfig";
 
 import text from "./text";
@@ -55,14 +52,12 @@ const user = {
 class Editoria extends Component {
   render() {
     return (
-      <React.Fragment>
+      <Fragment>
         <GlobalStyle />
         <StyledWax
           options={options}
           autoFocus
           placeholder="Type Something..."
-          theme="editoria"
-          layout="editoria"
           fileUpload={file => renderImage(file)}
           debug
           value=""
@@ -70,17 +65,11 @@ class Editoria extends Component {
         >
           {({ editor, view, ...props }) => (
             <ThemeProvider theme={cokoTheme}>
-              <React.Fragment>
-                <MainMenuBar view={view} {...props} />
-                <div className="wax-surface-container">
-                  <SideMenuBar view={view} {...props} />
-                  {editor}
-                </div>
-              </React.Fragment>
+              <EditoriaLayout editor={editor} view={view} {...props} />
             </ThemeProvider>
           )}
         </StyledWax>
-      </React.Fragment>
+      </Fragment>
     );
   }
 }

wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js

@@ -27,9 +27,9 @@ const MainMenuBar = ({
   className,
   fileUpload
 }) => (
-  <div className={`${className} main-menu-container`}>
-    <div className="main-menu-inner">
-      <div className="main-menu">
+  <div>
+    <div>
+      <div>
         {
           <span>
             {map(setMenuItems(MainMenuBarItems, menuItems), item =>

wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js

@@ -27,9 +27,9 @@ const SideMenuBar = ({
   className,
   fileUpload
 }) => (
-  <div className={`${className} side-menu-container`}>
-    <div className="side-menu-inner">
-      <div className="side-menu">
+  <div>
+    <div>
+      <div>
         {
           <span>
             {map(setMenuItems(SideMenuItems, menuItems), item =>

wax-prosemirror-core/src/Wax.js

-import React, { Component } from "react";
+import React, { Fragment, Component } from "react";
 import debounce from "lodash/debounce";
 
 import { DOMParser, DOMSerializer } from "prosemirror-model";
@@ -46,8 +46,8 @@ class Wax extends Component {
     const editorContent = value ? value : "";
 
     const finalPlugins = defaultPlugins.concat([
-      placeholder({ content: this.props.placeholder }), 
-      WaxKeys, 
+      placeholder({ content: this.props.placeholder }),
+      WaxKeys,
       WaxRules
     ]);
     if (plugins) finalPlugins.push(...plugins);
@@ -89,22 +89,18 @@ class Wax extends Component {
     } = this.props;
 
     const defaultRender = ({ editor, state, dispatch, fileUpload }) => (
-      <React.Fragment>{editor}</React.Fragment>
+      <Fragment>{editor}</Fragment>
     );
 
     const WaxRender = children ? children : defaultRender;
-    const WaxLayout = layout
-      ? `wax-container wax-l-${layout}`
-      : "wax-container";
     return (
-      <div className={`${WaxLayout} ${className}`}>
+      <div className={`${className}`}>
         <WaxView
           autoFocus={autoFocus}
           readonly={readonly}
           options={this.WaxOptions}
           placeholder={placeholder}
           fileUpload={fileUpload}
-          theme={theme}
           onBlur={onBlur || (value => true)}
           onChange={this.onChange || (value => true)}
           debug={debug}

wax-prosemirror-core/src/WaxView.js

@@ -105,12 +105,7 @@ class WaxView extends Component {
   };
 
   render() {
-    const { theme } = this.props;
-    const WaxTheme = theme
-      ? `wax-surface-scroll wax-t-${theme}`
-      : "wax-surface-scroll";
-
-    const editor = <div ref={this.editorRef} className={WaxTheme} />;
+    const editor = <div ref={this.editorRef} />;
     return this.props.children({
       view: this.view,
       fileUpload: this.uploadImage,

wax-prosemirror-layouts/index.js

+export { default as EditoriaLayout } from "./src/layouts/EditoriaLayout";

wax-prosemirror-layouts/layouts/editoria-layout.css

-.wax-l-editoria {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  font-family: var(--wax-font-family);
-}
-
-.wax-l-editoria .main-menu-container {
-  background: #fff;
-  height: 52px;
-  line-height: 32px;
-  position: relative;
-  user-select: none;
-  /*background: rgba(0, 0, 0, 0.01);*/
-}
-
-.wax-l-editoria .main-menu-inner {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-  background: transparent;
-  z-index: 9999;
-}
-
-.wax-l-editoria .main-menu {
-  background: #fff;
-  padding: 2px 2px 2px 0;
-  position: relative;
-  background: transparent;
-}
-
-.wax-l-editoria .main-menu button {
-  background: transparent;
-}
-
-.wax-l-editoria .side-menu-container {
-  display: flex;
-  width: 12%;
-  height: 98%;
-  /*background: rgba(0, 0, 0, 0.01);*/
-}
-
-.wax-l-editoria .side-menu-inner {
-  display: flex;
-  width: 100%;
-}
-
-.wax-l-editoria .side-menu {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-  margin-top: 15px;
-}
-.wax-l-editoria .side-menu button {
-  display: flex;
-  margin-left: 5%;
-  flex-direction: column;
-  width: 90%;
-  background: transparent;
-}
-
-.wax-l-editoria .wax-surface-container {
-  flex: 1;
-  position: relative;
-  z-index: 1;
-}
-
-.wax-l-editoria .wax-surface-scroll {
-  bottom: 0;
-  left: 0;
-  overflow: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  box-sizing: border-box;
-  padding: 0;
-  margin-left: 14%;
-  padding: 2px;
-}
-.wax-l-editoria .wax-surface-scroll .ProseMirror {
-  -moz-box-shadow: 0 0 3px #ccc;
-  -webkit-box-shadow: 0 0 3px #ccc;
-  box-shadow: 0 0 3px #ccc;
-  width: 65%;
-  min-height: 90%;
-  padding: 40px;
-}

wax-prosemirror-layouts/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.2",
   "description": "Wax prosemirror layouts",
   "license": "MIT",
-  "main": "",
+  "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   }

wax-prosemirror-layouts/src/layouts/EditoriaLayout.js

+import styled from "styled-components";
+import React, { Fragment } from "react";
+
+import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
+
+const WaxSurfaceContainer = styled.div`
+  flex: 1;
+  position: relative;
+  z-index: 1;
+`;
+
+const EditoriaLayout = ({ editor, view, ...props }) => (
+  <Fragment>
+    <MainMenuBar view={view} {...props} />
+    <WaxSurfaceContainer>
+      <SideMenuBar view={view} {...props} />
+      {editor}
+    </WaxSurfaceContainer>
+  </Fragment>
+);
+
+export default EditoriaLayout;

wax-prosemirror-layouts/vars/wax-editoria-vars.css

-:root {
-  --wax-font-family: "Arial";
-  --wax-font-size: 13px;
-  --wax-link-color: rgb(0, 0, 238);
-  --wax-overlay-radius: 3px;
-  --wax-overlay-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
-}

wax-prosemirror-themes/src/default-theme.css

-.wax-t-default {
-  background: #fff;
-}
-
-.wax-t-default .ProseMirror:focus {
-  outline: none;
-}
-
-/* placeholder */
-.wax-t-default .empty-node::before {
-  color: #aaa;
-  float: left;
-  font-style: italic;
-  pointer-events: none;
-  height: 0;
-}
-
-.wax-t-default p.empty-node:first-child::before {
-  content: attr(data-content);
-}

wax-prosemirror-themes/src/editoria-theme.css

-.wax-t-editoria hr {
-  padding: 2px 10px;
-  border: none;
-  margin: 1em 0;
-}
-
-.wax-t-editoria hr:after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: silver;
-  line-height: 2px;
-}
-
-.wax-t-editoria ul,
-.wax-t-editoria ol {
-  padding-left: 30px;
-}
-
-.wax-t-editoria blockquote {
-  padding-left: 1em;
-  border-left: 3px solid #eee;
-  margin-left: 0;
-  margin-right: 0;
-}
-
-.wax-t-editoria img {
-  cursor: default;
-}
-
-.wax-t-editoria sup,
-.wax-t-editoria sub {
-  line-height: 0;
-}
-
-.wax-t-editoria .ProseMirror:focus {
-  outline: none;
-}
-
-/* Tables */
-
-.wax-t-editoria table {
-  border-collapse: initial;
-  border-spacing: 0;
-  border-width: 0 thin thin 0;
-  border: 1px solid #eee;
-  table-layout: fixed;
-  width: 100%;
-  margin: 0;
-  overflow: hidden;
-  page-break-inside: avoid;
-}
-
-.wax-t-editoria th,
-.wax-t-editoria td {
-  border: 1px solid #eee;
-  /*width: 200px;*/
-  padding: 2px 5px;
-  vertical-align: top;
-  box-sizing: border-box;
-  position: relative;
-}
-
-.wax-t-editoria .tableWrapper {
-  overflow-x: auto;
-}
-
-.wax-t-editoria .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: 0;
-  bottom: 0;
-  width: 4px;
-  z-index: 20;
-  background-color: #adf;
-  pointer-events: none;
-}
-.wax-t-editoria .ProseMirror.resize-cursor.resize-cursor {
-  cursor: ew-resize;
-  cursor: col-resize;
-}
-/* Give selected cells a blue overlay */
-.wax-t-editoria .selectedCell:after {
-  z-index: 2;
-  position: absolute;
-  content: "";
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  background: rgba(200, 200, 255, 0.4);
-  pointer-events: none;
-}
-
-/* placeholder */
-.wax-t-editoria .empty-node::before {
-  color: #aaa;
-  float: left;
-  font-style: italic;
-  pointer-events: none;
-  height: 0;
-}
-
-.wax-t-editoria p.empty-node:first-child::before {
-  content: attr(data-content);
-}
-
-/* invisible characters */
-.invisible {
-  pointer-events: none;
-  user-select: none;
-}
-
-.invisible:before {
-  caret-color: inherit;
-  color: gray;
-  display: inline-block;
-  font-weight: 400;
-  font-style: normal;
-  line-height: 1em;
-  width: 0;
-}
-
-.invisible--space:before {
-  content: "·";
-}
-
-.invisible--break:before {
-  content: "¬";
-}
-
-.invisible--par:after {
-  content: "¶";
-}
-
-/*LinkToolTip */
-.tooltip {
-  position: absolute;
-  pointer-events: none;
-  z-index: 20;
-  background: white;
-  border: 1px solid silver;
-  border-radius: 2px;
-  padding: 2px 10px;
-  margin-bottom: 7px;
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-}
-.tooltip:before {
-  content: "";
-  height: 0;
-  width: 0;
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  bottom: -6px;
-  border: 5px solid transparent;
-  border-bottom-width: 0;
-  border-top-color: silver;
-}
-.tooltip:after {
-  content: "";
-  height: 0;
-  width: 0;
-  position: absolute;
-  left: 50%;
-  margin-left: -5px;
-  bottom: -4.5px;
-  border: 5px solid transparent;
-  border-bottom-width: 0;
-  border-top-color: white;
-}
-
-span.deletion {
-  text-decoration: line-through;
-  color: red;
-}
-
-span.insertion {
-  color: blue;
-}
-
-.selected-insertion,
-.selected-deletion,
-.selected-format-change,
-.selected-block-change {
-  background-color: #fffacf;
-}
-
-.format-change {
-  border-bottom: 2px solid blue;
-}
-
-[data-track] {
-  position: relative;
-}
-
-[data-track]::before {
-  content: "";
-  position: absolute;
-  border-left: 2px solid blue;
-  left: -10px;
-  height: 100%;
-}
-
-li[data-track]::before,
-li [data-track]::before {
-  left: -5px;
-}

wax-prosemirror-themes/themes/coko-theme/index.js

-/* eslint-disable import/extensions */
-// import "typeface-fira-sans-condensed";
-// import "typeface-vollkorn";
-
-const cokoTheme = {
-  /* Colors */
-  colorBackground: "white",
-  colorPrimary: "#0B65CB",
-  colorSecondary: "#E7E7E7",
-  colorFurniture: "#CCC",
-  colorBorder: "#AAA",
-  colorBackgroundHue: "#F1F1F1",
-  colorSuccess: "#008800",
-  colorError: "#FF2D1A",
-  colorText: "#111",
-  colorTextReverse: "#FFF",
-  colorTextPlaceholder: "#595959",
-  colorWarning: "#ffc107",
-
-  /* Text variables */
-
-  // fonts
-  fontInterface: "'Fira Sans Condensed'",
-  fontHeading: "'Fira Sans Condensed'",
-  fontReading: "'Vollkorn'",
-  fontWriting: "'Cokourier Prime Sans'",
-
-  // font sizes
-  fontSizeBase: "16px",
-  fontSizeBaseSmall: "14px",
-  fontSizeHeading1: "40px",
-  fontSizeHeading2: "36px",
-  fontSizeHeading3: "28px",
-  fontSizeHeading4: "24px",
-  fontSizeHeading5: "20px",
-  fontSizeHeading6: "16px",
-
-  // line heights
-  lineHeightBase: "24px",
-  lineHeightBaseSmall: "16px",
-  lineHeightHeading1: "48px",
-  lineHeightHeading2: "40px",
-  lineHeightHeading3: "32px",
-  lineHeightHeading4: "32px",
-  lineHeightHeading5: "24px",
-  lineHeightHeading6: "24px",
-
-  /* Spacing */
-  gridUnit: "8px",
-
-  /* Border */
-  borderRadius: "0",
-  borderWidth: "1px",
-  borderStyle: "solid",
-
-  /* Shadow (for tooltip) */
-  boxShadow: "0 2px 4px 0 rgba(51, 51, 51, 0.3)",
-
-  /* Transition */
-  transitionDuration: "0.2s",
-  transitionTimingFunction: "ease",
-  transitionDelay: "0",
-  /* Breakpoints */
-  breakpoints: [480, 768, 1000, 1272]
-};
-
-export default cokoTheme;