diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index ba2af0646bce7990cb77827b30e455ed74401df4..7dd2c2bf7c9c6b848fef125f2c76d9904ac15c15 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,13 +1,10 @@
-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>
);
}
}
diff --git a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js b/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
index 030726a4b7d61f37175f0ae49e1386dfbcf3b224..6bc776470bc944e0815eef9dc1f6064dccbd2f50 100644
--- a/wax-prosemirror-components/src/mainMenuBar/MainMenuBar.js
+++ b/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 =>
diff --git a/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js b/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js
index dbe3a39b9cbcd5031927751ec3ef9aebba4081ab..7e2acf749e1688a79de18d6deec0015b884f0058 100644
--- a/wax-prosemirror-components/src/sideMenuBar/SideMenuBar.js
+++ b/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 =>
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index eb4584c46282620eb6ac87670e25fecfdc654fa2..b6ff5fa9f2be359c97e9d8358ccad931f0d0494f 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -1,4 +1,4 @@
-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}
diff --git a/wax-prosemirror-core/src/WaxView.js b/wax-prosemirror-core/src/WaxView.js
index 8e1d166d628aa3bd14e5f0cf917ff4ca828cb69e..1aef6190d2edc6b8880c565968891e79a90e0228 100644
--- a/wax-prosemirror-core/src/WaxView.js
+++ b/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,
diff --git a/wax-prosemirror-layouts/index.js b/wax-prosemirror-layouts/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..c48bf92d52569f9696a1c5f88dbf4805f7469279
--- /dev/null
+++ b/wax-prosemirror-layouts/index.js
@@ -0,0 +1 @@
+export { default as EditoriaLayout } from "./src/layouts/EditoriaLayout";
diff --git a/wax-prosemirror-layouts/layouts/default-layout.css b/wax-prosemirror-layouts/layouts/default-layout.css
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/wax-prosemirror-layouts/layouts/editoria-layout.css b/wax-prosemirror-layouts/layouts/editoria-layout.css
deleted file mode 100644
index 25ce9adba7426e4b1de1533ae8c4284f088b4593..0000000000000000000000000000000000000000
--- a/wax-prosemirror-layouts/layouts/editoria-layout.css
+++ /dev/null
@@ -1,93 +0,0 @@
-.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;
-}
diff --git a/wax-prosemirror-layouts/package.json b/wax-prosemirror-layouts/package.json
index a7e227aa2860bbeef7d1197aab2caea2872dcfed..eadd0ca4b7cf824ff9af4f94129e7c49fe6d2309 100644
--- a/wax-prosemirror-layouts/package.json
+++ b/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"
}
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..55dbff4a456b9a3dc08af396e740f1d23d881d57
--- /dev/null
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -0,0 +1,22 @@
+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;
diff --git a/wax-prosemirror-layouts/vars/wax-editoria-vars.css b/wax-prosemirror-layouts/vars/wax-editoria-vars.css
deleted file mode 100644
index 83abacf49c3525dffb6046ee1bbe90a53ef95091..0000000000000000000000000000000000000000
--- a/wax-prosemirror-layouts/vars/wax-editoria-vars.css
+++ /dev/null
@@ -1,7 +0,0 @@
-: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);
-}
diff --git a/wax-prosemirror-themes/src/default-theme.css b/wax-prosemirror-themes/src/default-theme.css
deleted file mode 100644
index c690a3699dfd5cd6827a8e8f4099c4d27a2f511d..0000000000000000000000000000000000000000
--- a/wax-prosemirror-themes/src/default-theme.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.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);
-}
diff --git a/wax-prosemirror-themes/src/editoria-theme.css b/wax-prosemirror-themes/src/editoria-theme.css
deleted file mode 100644
index c1992777e67c17942d60b754d776b81e2fc6a5e5..0000000000000000000000000000000000000000
--- a/wax-prosemirror-themes/src/editoria-theme.css
+++ /dev/null
@@ -1,209 +0,0 @@
-.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;
-}
diff --git a/wax-prosemirror-themes/themes/coko-theme/index.js b/wax-prosemirror-themes/themes/coko-theme/index.js
deleted file mode 100644
index 724eeaaef7c3bfb07d3f86756b10710cc5ee9a35..0000000000000000000000000000000000000000
--- a/wax-prosemirror-themes/themes/coko-theme/index.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/* 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;