From 625076796632d33ecb7c7b2ec34f1e083874192d Mon Sep 17 00:00:00 2001
From: Giannis Kopanas <jkopanas@gmail.com>
Date: Sun, 17 Nov 2019 15:16:19 +0200
Subject: [PATCH] fix(template): React Context , new Layout access plugins
---
editors/editoria/src/EditorConfig.js | 9 ++-
editors/editoria/src/Editoria.js | 10 +--
wax-prosemirror-components/index.js | 1 +
.../src/components/componentPlugin.js | 26 ++++++++
wax-prosemirror-core/index.js | 6 +-
wax-prosemirror-core/src/Wax.js | 18 +++---
.../src/helpers/WaxContext.js | 5 ++
wax-prosemirror-core/src/helpers/setLayout.js | 9 +++
wax-prosemirror-layouts/index.js | 1 +
.../src/layouts/ComponentPlugins.js | 16 -----
.../src/layouts/DefaultLayout.js | 5 ++
.../src/layouts/EditoriaLayout.js | 25 +++++---
.../src/FindAndReplacePlugin.js | 61 +++++--------------
13 files changed, 102 insertions(+), 90 deletions(-)
create mode 100644 wax-prosemirror-components/src/components/componentPlugin.js
create mode 100644 wax-prosemirror-core/src/helpers/WaxContext.js
create mode 100644 wax-prosemirror-core/src/helpers/setLayout.js
delete mode 100644 wax-prosemirror-layouts/src/layouts/ComponentPlugins.js
create mode 100644 wax-prosemirror-layouts/src/layouts/DefaultLayout.js
diff --git a/editors/editoria/src/EditorConfig.js b/editors/editoria/src/EditorConfig.js
index 1d0e24008..f4e528262 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 446044548..9853e7f37 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 c40a956b8..b16364719 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 000000000..4d9febf99
--- /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 6f7daa4c9..a9e4bb31a 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 10306578d..e1657c505 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 000000000..5daedc235
--- /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 000000000..e3559ec81
--- /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 c48bf92d5..6ea69e16e 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 c0d0fe333..000000000
--- 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 000000000..7eb3ae476
--- /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 c632c186c..8383ffb15 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 d12bfff66..51c3870ce 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;
--
GitLab