diff --git a/editors/editoria/src/EditorConfig.js b/editors/editoria/src/EditorConfig.js
index 1d0e2400863c6d7de810bd603f1e8574f7fa4bd9..f4e5282627d8d07fc5072ee3f9aa3ca263c673f3 100644
--- a/editors/editoria/src/EditorConfig.js
+++ b/editors/editoria/src/EditorConfig.js
@@ -27,7 +27,11 @@ import invisibles, {
} from "@guardian/prosemirror-invisibles";
import { CreateSchema, CreateShortCuts } from "wax-prosemirror-core";
-import { LinkToolTipPlugin, TrackChangePlugin } from "wax-prosemirror-plugins";
+import {
+ LinkToolTipPlugin,
+ FindAndReplacePlugin,
+ TrackChangePlugin
+} from "wax-prosemirror-plugins";
import { tableNodes, columnResizing, tableEditing } from "prosemirror-tables";
import { EditoriaSchema } from "wax-prosemirror-schema";
@@ -76,7 +80,8 @@ const plugins = [
columnResizing(),
tableEditing(),
TrackChangePlugin({ options: {} }),
- invisibles([hardBreak()])
+ invisibles([hardBreak()]),
+ FindAndReplacePlugin
];
// Add Rules
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 44604454877091be1b7300ed8aee77feefcb9547..9853e7f3710bda566c5fc34dcf27f86c2eee6027 100644
--- a/editors/editoria/src/Editoria.js
+++ b/editors/editoria/src/Editoria.js
@@ -1,7 +1,7 @@
import React, { Fragment, Component } from "react";
import styled, { createGlobalStyle, ThemeProvider } from "styled-components";
-import { Wax } from "wax-prosemirror-core";
+import { Wax, setLayout } from "wax-prosemirror-core";
import { EditoriaLayout } from "wax-prosemirror-layouts";
import { schema, keys, plugins, rules } from "./EditorConfig";
@@ -27,7 +27,7 @@ const GlobalStyle = createGlobalStyle`
}
`;
-const StyledWax = styled(Wax)`
+const StyledWax = styled(setLayout("EditoriaLayout"))`
.wax-surface-scroll {
height: ${props => (props.debug ? "50vh" : "100%")};
}
@@ -60,11 +60,7 @@ class Editoria extends Component {
fileUpload={file => renderImage(file)}
value=""
user={user}
- >
- {({ editor, view, ...props }) => (
- <EditoriaLayout editor={editor} view={view} {...props} />
- )}
- </StyledWax>
+ />
</Fragment>
);
}
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index c40a956b813ed0b8e7f67e17479b67c26f3b7bdb..b16364719ff33a5fb3ec1714930555fd31e27555 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -1,3 +1,4 @@
export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
export { default as InfoArea } from "./src/components/infoArea/InfoArea";
+export { default as componentPlugin } from "./src/components/componentPlugin";
diff --git a/wax-prosemirror-components/src/components/componentPlugin.js b/wax-prosemirror-components/src/components/componentPlugin.js
new file mode 100644
index 0000000000000000000000000000000000000000..4d9febf9998a558834abb19da39ea0870605273b
--- /dev/null
+++ b/wax-prosemirror-components/src/components/componentPlugin.js
@@ -0,0 +1,26 @@
+import React from "react";
+import WaxContext from "wax-prosemirror-core/src/helpers/WaxContext";
+
+const ComponentPlugin = renderArea => props => (
+ <WaxContext.Consumer>
+ {context => {
+ const { state = { plugins: [] } } = context.view;
+ const pluginComponent = state.plugins.map(plugin => {
+ if (
+ state[plugin.key] &&
+ state[plugin.key].renderArea === renderArea &&
+ state[plugin.key].component
+ ) {
+ const Component = state[plugin.key].component;
+ return <Component key={plugin.key} state={state} />;
+ }
+
+ return null;
+ });
+
+ return pluginComponent;
+ }}
+ </WaxContext.Consumer>
+);
+
+export default ComponentPlugin;
diff --git a/wax-prosemirror-core/index.js b/wax-prosemirror-core/index.js
index 6f7daa4c928567033c1ef6e58e32b0aac3f64974..a9e4bb31a3aa3226b33695a0c10c481d355ed442 100644
--- a/wax-prosemirror-core/index.js
+++ b/wax-prosemirror-core/index.js
@@ -1,5 +1,5 @@
export { default as Wax } from "./src/Wax";
export { default as CreateSchema } from "./src/config/classes/CreateSchema";
-export {
- default as CreateShortCuts
-} from "./src/config/classes/CreateShortCuts";
+export { default as setLayout } from "./src/helpers/setLayout";
+export { default as CreateShortCuts } from "./src/config/classes/CreateShortCuts";
+export { default as WaxContext } from "./src/helpers/WaxContext";
diff --git a/wax-prosemirror-core/src/Wax.js b/wax-prosemirror-core/src/Wax.js
index 10306578d5a983a0c9e13abb78704ec15de3d177..e1657c505a885956b50b1cc8701de8719c5a2912 100644
--- a/wax-prosemirror-core/src/Wax.js
+++ b/wax-prosemirror-core/src/Wax.js
@@ -1,9 +1,11 @@
-import React, { Fragment, Component } from "react";
+import React, { Component } from "react";
import debounce from "lodash/debounce";
import styled from "styled-components";
import { DOMParser, DOMSerializer } from "prosemirror-model";
+import { DefaultLayout } from "wax-prosemirror-layouts";
+import WaxContext from "./helpers/WaxContext";
import WaxView from "./WaxView";
import defaultPlugins from "./config/defaultPlugins";
import placeholder from "./config/plugins/placeholder";
@@ -92,14 +94,12 @@ class Wax extends Component {
theme,
debug,
TrackChange,
- user
+ user,
+ Layout
} = this.props;
- const defaultRender = ({ editor, state, dispatch, fileUpload }) => (
- <Fragment>{editor}</Fragment>
- );
+ const WaxRender = Layout ? Layout : DefaultLayout;
- const WaxRender = children ? children : defaultRender;
return (
<LayoutWrapper className={`${className}`}>
<WaxView
@@ -114,7 +114,11 @@ class Wax extends Component {
TrackChange={TrackChange}
user={user}
>
- {WaxRender}
+ {({ view, editor }) => (
+ <WaxContext.Provider value={{ view }}>
+ <WaxRender editor={editor} />
+ </WaxContext.Provider>
+ )}
</WaxView>
</LayoutWrapper>
);
diff --git a/wax-prosemirror-core/src/helpers/WaxContext.js b/wax-prosemirror-core/src/helpers/WaxContext.js
new file mode 100644
index 0000000000000000000000000000000000000000..5daedc2350508bcc53fcf4a955d802fac97bcb12
--- /dev/null
+++ b/wax-prosemirror-core/src/helpers/WaxContext.js
@@ -0,0 +1,5 @@
+import React from "react";
+
+const WaxContext = React.createContext();
+
+export default WaxContext;
diff --git a/wax-prosemirror-core/src/helpers/setLayout.js b/wax-prosemirror-core/src/helpers/setLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..e3559ec81ed038df6418233a6491929d7b11ce32
--- /dev/null
+++ b/wax-prosemirror-core/src/helpers/setLayout.js
@@ -0,0 +1,9 @@
+import React from "react";
+import * as layouts from "wax-prosemirror-layouts";
+import Wax from "../Wax";
+
+const setLayout = layout => props => {
+ console.log(layouts, layouts[layout]);
+ return <Wax {...props} Layout={layouts[layout]} />;
+};
+export default setLayout;
diff --git a/wax-prosemirror-layouts/index.js b/wax-prosemirror-layouts/index.js
index c48bf92d52569f9696a1c5f88dbf4805f7469279..6ea69e16ea2c99700e74539eb2310489deb0ecbf 100644
--- a/wax-prosemirror-layouts/index.js
+++ b/wax-prosemirror-layouts/index.js
@@ -1 +1,2 @@
export { default as EditoriaLayout } from "./src/layouts/EditoriaLayout";
+export { default as DefaultLayout } from "./src/layouts/DefaultLayout";
diff --git a/wax-prosemirror-layouts/src/layouts/ComponentPlugins.js b/wax-prosemirror-layouts/src/layouts/ComponentPlugins.js
deleted file mode 100644
index c0d0fe33312fff12d8c4c671629a52ad80daa027..0000000000000000000000000000000000000000
--- a/wax-prosemirror-layouts/src/layouts/ComponentPlugins.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React from "react";
-const ComponentPlugin = props => {
- const { state } = props;
- const pluginComponent = state.plugins.map(plugin => {
- if (state[plugin.key] && state[plugin.key].component) {
- const Component = state[plugin.key].component;
- return <Component {...props} />;
- }
- return null;
- });
-
- console.log(pluginComponent);
- return pluginComponent[11];
-};
-
-export default ComponentPlugin;
diff --git a/wax-prosemirror-layouts/src/layouts/DefaultLayout.js b/wax-prosemirror-layouts/src/layouts/DefaultLayout.js
new file mode 100644
index 0000000000000000000000000000000000000000..7eb3ae47691c990f78bd140ba0610dd216d6bcfd
--- /dev/null
+++ b/wax-prosemirror-layouts/src/layouts/DefaultLayout.js
@@ -0,0 +1,5 @@
+import React, { Fragment } from "react";
+
+const DefaultLayout = ({ editor }) => <Fragment>{editor}</Fragment>;
+
+export default DefaultLayout;
diff --git a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
index c632c186cc740c172530e45c706087ea3c5633ec..8383ffb15da4122cc5a19aa4d7aace97a9c099c5 100644
--- a/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
+++ b/wax-prosemirror-layouts/src/layouts/EditoriaLayout.js
@@ -1,9 +1,13 @@
+import React from "react";
import styled, { ThemeProvider } from "styled-components";
-import React, { Fragment } from "react";
-import { MainMenuBar, SideMenuBar, InfoArea } from "wax-prosemirror-components";
+import {
+ MainMenuBar,
+ SideMenuBar,
+ InfoArea,
+ componentPlugin
+} from "wax-prosemirror-components";
import EditorElements from "./EditorElements";
import { cokoTheme } from "wax-prosemirror-themes";
-import ComponentPlugins from "./ComponentPlugins";
const LayoutWrapper = styled.div`
display: flex;
@@ -34,20 +38,25 @@ const WaxSurfaceScroll = styled.div`
${EditorElements};
`;
-const CommentsContainer = styled.div``;
-const NotesContainer = styled.div``;
+const LeftSideBar = componentPlugin("leftSideBar");
+const RightSideBar = componentPlugin("rightSideBar");
+const TopBar = componentPlugin("topBar");
+const BottomBar = componentPlugin("bottomBar");
+const EditorTools = componentPlugin("editorTools");
const EditoriaLayout = ({ editor, view, ...props }) => (
<ThemeProvider theme={cokoTheme}>
<LayoutWrapper>
- <MainMenuBar view={view} {...props} />
+ <TopBar />
<WaxSurfaceContainer>
- <SideMenuBar view={view} {...props} />
+ <LeftSideBar />
<WaxSurfaceScroll className="wax-surface-scroll">
{editor}
- <ComponentPlugins state={view.state} />
+ <EditorTools />
</WaxSurfaceScroll>
+ <RightSideBar />
</WaxSurfaceContainer>
+ <BottomBar />
<InfoArea />
</LayoutWrapper>
</ThemeProvider>
diff --git a/wax-prosemirror-plugins/src/FindAndReplacePlugin.js b/wax-prosemirror-plugins/src/FindAndReplacePlugin.js
index d12bfff66114cae1400cd33832d528bf1e946ece..51c3870ce1b7e71ae749c6ea0fb80c41f6038c19 100644
--- a/wax-prosemirror-plugins/src/FindAndReplacePlugin.js
+++ b/wax-prosemirror-plugins/src/FindAndReplacePlugin.js
@@ -5,7 +5,7 @@ import { TextSelection } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
const Component = ({ state }) => {
- return <div>{state.selection.from}</div>;
+ return <div>11111{state.selection.from}</div>;
};
const findNodesWithSameMark = (doc, from, to, markType) => {
@@ -76,14 +76,15 @@ const findNodesWithSameMark = (doc, from, to, markType) => {
};
const WithStatePlugin = Component => ({ state }) => {
- const { doc, selection, schema } = state;
- const markType = schema.marks.strong;
- if (!markType) {
- return null;
- }
- const { from, to } = selection;
- const result = findNodesWithSameMark(doc, from, to, markType);
- return result ? <Component state={state} /> : null;
+ // const { doc, selection, schema } = state;
+ // const markType = schema.marks.strong;
+ // if (!markType) {
+ // return null;
+ // }
+ // const { from, to } = selection;
+ // const result = findNodesWithSameMark(doc, from, to, markType);
+ //return result ? <Component state={state} /> : null;
+ return <Component state={state} />;
};
export const FindAndReplaceKey = new PluginKey("findandreplace");
@@ -92,7 +93,10 @@ const FindAndReplacePlugin = new Plugin({
key: FindAndReplaceKey,
state: {
init() {
- return { show: false, component: WithStatePLugin(Component) };
+ return {
+ renderArea: "leftSideBar",
+ component: WithStatePlugin(Component)
+ };
},
apply(tr, oldState, newState) {
return this.getState(newState);
@@ -101,40 +105,3 @@ const FindAndReplacePlugin = new Plugin({
});
export default FindAndReplacePlugin;
-
-const ToolBarPlugin = new Plugin({
- key: FindAndReplaceKey,
- state: {
- init() {
- return { component: WithStatePlugin(Component) };
- },
- apply(tr, oldState, newState) {
- return this.getState(newState);
- }
- }
-});
-
-const LinkPlugin = new Plugin({
- key: FindAndReplaceKey,
- state: {
- init() {
- return { items };
- },
- apply(tr, oldState, newState) {
- return this.getState(newState);
- }
- }
-});
-
-ToolBar(Plugin) = RenderReactComponentPlugin(
- Component,
- RenderArea,
- ShowHideCommand
-);
-
-Component;
-RenderArea;
-ShowHideCommand;
-Position;
-items;
-ItemCommands;