From b52abfd5e379e44896243526f5600b4a335c5dcd Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Fri, 19 Apr 2019 16:13:52 +0300
Subject: [PATCH] wax-prosemirror-components in progress
---
.directory | 5 +-
editors/default/package.json | 3 +-
editors/default/src/Default.js | 22 ++
.../{menu => components}/HeadingsDropDown.js | 0
.../{menu => components}/ImageUpload.js | 0
.../{menu => components}/TableDropDown.js | 0
.../{menu => components/button}/Button.js | 2 +-
.../button/button.css} | 7 -
.../{ => icons}/icons.js | 0
wax-prosemirror-components/index.js | 1 +
.../{menu => mainMenuBar}/MainMenuBar.js | 4 +-
.../mainMenuBar/MenuBar.css | 6 +
.../{ => mainMenuBar}/menu.js | 240 +-----------------
13 files changed, 42 insertions(+), 248 deletions(-)
rename wax-prosemirror-components/{menu => components}/HeadingsDropDown.js (100%)
rename wax-prosemirror-components/{menu => components}/ImageUpload.js (100%)
rename wax-prosemirror-components/{menu => components}/TableDropDown.js (100%)
rename wax-prosemirror-components/{menu => components/button}/Button.js (93%)
rename wax-prosemirror-components/{menu/MenuBar.css => components/button/button.css} (76%)
rename wax-prosemirror-components/{ => icons}/icons.js (100%)
rename wax-prosemirror-components/{menu => mainMenuBar}/MainMenuBar.js (89%)
create mode 100644 wax-prosemirror-components/mainMenuBar/MenuBar.css
rename wax-prosemirror-components/{ => mainMenuBar}/menu.js (52%)
diff --git a/.directory b/.directory
index a60bc5dc8..0f5e88684 100644
--- a/.directory
+++ b/.directory
@@ -1,6 +1,3 @@
[Dolphin]
-Timestamp=2019,4,9,16,57,35
+Timestamp=2019,4,18,13,0,59
Version=3
-
-[Settings]
-HiddenFilesShown=true
diff --git a/editors/default/package.json b/editors/default/package.json
index c6d39e458..53882e300 100644
--- a/editors/default/package.json
+++ b/editors/default/package.json
@@ -9,7 +9,8 @@
"wax-prosemirror-core": "0.0.1",
"wax-prosemirror-schema": "0.0.1",
"wax-prosemirror-themes": "0.0.1",
- "wax-prosemirror-layouts": "0.0.1"
+ "wax-prosemirror-layouts": "0.0.1",
+ "wax-prosemirror-components": "0.0.1"
},
"scripts": {
"start": "react-app-rewired start",
diff --git a/editors/default/src/Default.js b/editors/default/src/Default.js
index 7289f7c1a..ab2c49246 100644
--- a/editors/default/src/Default.js
+++ b/editors/default/src/Default.js
@@ -1,6 +1,9 @@
import React, { Component } from "react";
+import styled from "styled-components";
+
import { Wax, createSchema } from "wax-prosemirror-core";
import { defaultSchema } from "wax-prosemirror-schema";
+import { MainMenuBar } from "wax-prosemirror-components";
import "wax-prosemirror-layouts/defaultLayout.css";
import "wax-prosemirror-themes/defaultTheme.css";
@@ -11,6 +14,19 @@ const options = {
schema: new createSchema(defaultSchema)
};
+const MainEditor = styled.div`
+ ${"" /* style override*/};
+`;
+
+const menuItems = [
+ "undo",
+ "redo",
+ "strong",
+ "image",
+ "table",
+ "tableDropDownOptions"
+];
+
class Default extends Component {
render() {
return (
@@ -21,6 +37,12 @@ class Default extends Component {
theme="default"
layout="default"
debug
+ renderLayout={({ editor, ...props }) => (
+ <React.Fragment>
+ <MainMenuBar menuItems={menuItems} {...props} />
+ <MainEditor className="main-editor">{editor}</MainEditor>
+ </React.Fragment>
+ )}
/>
);
}
diff --git a/wax-prosemirror-components/menu/HeadingsDropDown.js b/wax-prosemirror-components/components/HeadingsDropDown.js
similarity index 100%
rename from wax-prosemirror-components/menu/HeadingsDropDown.js
rename to wax-prosemirror-components/components/HeadingsDropDown.js
diff --git a/wax-prosemirror-components/menu/ImageUpload.js b/wax-prosemirror-components/components/ImageUpload.js
similarity index 100%
rename from wax-prosemirror-components/menu/ImageUpload.js
rename to wax-prosemirror-components/components/ImageUpload.js
diff --git a/wax-prosemirror-components/menu/TableDropDown.js b/wax-prosemirror-components/components/TableDropDown.js
similarity index 100%
rename from wax-prosemirror-components/menu/TableDropDown.js
rename to wax-prosemirror-components/components/TableDropDown.js
diff --git a/wax-prosemirror-components/menu/Button.js b/wax-prosemirror-components/components/button/Button.js
similarity index 93%
rename from wax-prosemirror-components/menu/Button.js
rename to wax-prosemirror-components/components/button/Button.js
index ea014794a..de880ccd8 100644
--- a/wax-prosemirror-components/menu/Button.js
+++ b/wax-prosemirror-components/components/button/Button.js
@@ -1,7 +1,7 @@
import React from "react";
import styled from "styled-components";
import classnames from "classnames";
-import classes from "../../css/MenuBar.css";
+import classes from "./button.css";
const ButtonStyled = styled.button`
display: ${props => (props.select ? "inline" : "none")};
diff --git a/wax-prosemirror-components/menu/MenuBar.css b/wax-prosemirror-components/components/button/button.css
similarity index 76%
rename from wax-prosemirror-components/menu/MenuBar.css
rename to wax-prosemirror-components/components/button/button.css
index 216538ea6..9f6b6ef1b 100644
--- a/wax-prosemirror-components/menu/MenuBar.css
+++ b/wax-prosemirror-components/components/button/button.css
@@ -1,10 +1,3 @@
-.main-toolbar {
- position: fixed;
- display: flex;
- margin: 0;
- z-index: 999;
-}
-
button {
background: #fff;
border: none;
diff --git a/wax-prosemirror-components/icons.js b/wax-prosemirror-components/icons/icons.js
similarity index 100%
rename from wax-prosemirror-components/icons.js
rename to wax-prosemirror-components/icons/icons.js
diff --git a/wax-prosemirror-components/index.js b/wax-prosemirror-components/index.js
index e69de29bb..6bdee14c2 100644
--- a/wax-prosemirror-components/index.js
+++ b/wax-prosemirror-components/index.js
@@ -0,0 +1 @@
+export { default as MainMenuBar } from "./mainMenuBar/MainMenuBar";
diff --git a/wax-prosemirror-components/menu/MainMenuBar.js b/wax-prosemirror-components/mainMenuBar/MainMenuBar.js
similarity index 89%
rename from wax-prosemirror-components/menu/MainMenuBar.js
rename to wax-prosemirror-components/mainMenuBar/MainMenuBar.js
index ad8102fdb..b828b56be 100644
--- a/wax-prosemirror-components/menu/MainMenuBar.js
+++ b/wax-prosemirror-components/mainMenuBar/MainMenuBar.js
@@ -1,7 +1,7 @@
import React from "react";
import map from "lodash/map";
-import classes from "../../css/MenuBar.css";
-import menu from "../../config/menu";
+import classes from "./MenuBar.css";
+import menu from "./menu";
const filtered = (menu, menuItems) =>
Object.keys(menu)
diff --git a/wax-prosemirror-components/mainMenuBar/MenuBar.css b/wax-prosemirror-components/mainMenuBar/MenuBar.css
new file mode 100644
index 000000000..9ba4c92ba
--- /dev/null
+++ b/wax-prosemirror-components/mainMenuBar/MenuBar.css
@@ -0,0 +1,6 @@
+.main-toolbar {
+ position: fixed;
+ display: flex;
+ margin: 0;
+ z-index: 999;
+}
diff --git a/wax-prosemirror-components/menu.js b/wax-prosemirror-components/mainMenuBar/menu.js
similarity index 52%
rename from wax-prosemirror-components/menu.js
rename to wax-prosemirror-components/mainMenuBar/menu.js
index 05632479e..f8ee629e9 100644
--- a/wax-prosemirror-components/menu.js
+++ b/wax-prosemirror-components/mainMenuBar/menu.js
@@ -15,12 +15,12 @@ import { addColumnBefore } from "prosemirror-tables";
import { redo, undo } from "prosemirror-history";
import { wrapInList } from "prosemirror-schema-list";
-import icons from "./icons";
+import icons from "../icons/icons";
//Components
-import Button from "../components/menu/Button";
-import TableDropDown from "../components/menu/TableDropDown";
-import ImageUpload from "../components/menu/ImageUpload";
-import HeadingsDropDown from "../components/menu/HeadingsDropDown";
+import Button from "../components/button/Button";
+import TableDropDown from "../components/TableDropDown";
+import ImageUpload from "../components/ImageUpload";
+import HeadingsDropDown from "../components/HeadingsDropDown";
const markActive = type => state => {
const { from, $from, to, empty } = state.selection;
@@ -90,94 +90,7 @@ export default {
select: state => true,
menu: props => <HeadingsDropDown key={uuid()} {...props} />
},
- heading1: {
- title: "Change to Title",
- content: "Title",
- // active: blockActive(schema.nodes.heading, { level: 1 }),
- // enable: setBlockType(schema.nodes.heading, { level: 1 }),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.heading, { level: 1 })(
- state,
- dispatch
- );
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- subtitle: {
- title: "Change to Subtilte",
- content: "Subtilte",
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.subtitle)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- epigraph: {
- title: "Change to Epigraph",
- content: "Epigraph",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.epigraph)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- heading2: {
- title: "Change to heading level 1",
- content: "Heading 1",
- // active: blockActive(schema.nodes.heading, { level: 1 }),
- // enable: setBlockType(schema.nodes.heading, { level: 1 }),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.heading, { level: 2 })(
- state,
- dispatch
- );
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- heading3: {
- title: "Change to heading level 2",
- content: "Heading 2",
- // active: blockActive(schema.nodes.heading, { level: 1 }),
- // enable: setBlockType(schema.nodes.heading, { level: 1 }),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.heading, { level: 3 })(
- state,
- dispatch
- );
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- heading4: {
- title: "Change to heading level 3",
- content: "Heading 3",
- // active: blockActive(schema.nodes.heading, { level: 1 }),
- // enable: setBlockType(schema.nodes.heading, { level: 1 }),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.heading, { level: 3 })(
- state,
- dispatch
- );
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- heading5: {
- title: "Change to heading level 4",
- content: "Heading 4",
- // active: blockActive(schema.nodes.heading, { level: 1 }),
- // enable: setBlockType(schema.nodes.heading, { level: 1 }),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.heading, { level: 4 })(
- state,
- dispatch
- );
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
+
plain: {
title: "Change to General Text",
// content: icons.paragraph,
@@ -191,86 +104,7 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
- imageTitle: {
- title: "Change to Image Title",
- // content: icons.paragraph,
- content: "Image Title",
- // active: blockActive(schema.nodes.paragraph),
- // enable: setBlockType(schema.nodes.paragraph),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.figureTitle)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- imageCaption: {
- title: "Change to Image Caption",
- // content: icons.paragraph,
- content: "Image Caption",
- // active: blockActive(schema.nodes.paragraph),
- // enable: setBlockType(schema.nodes.paragraph),
- run(state, dispatch) {
- setBlockType(state.config.schema.nodes.figureCaption)(state, dispatch);
- },
-
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- quote: {
- title: "Change to Quote",
- content: "Quote",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.quote)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- special: {
- title: "Change to Special",
- content: "Special",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.special)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- important: {
- title: "Change to Important",
- content: "Important",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.important)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- recommended: {
- title: "Change to Recommended",
- content: "Recommended",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.recommended)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- caution: {
- title: "Change to Caution",
- content: "Caution",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.caution)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- tip: {
- title: "Change to tip",
- content: "Tip",
- run(state, dispatch) {
- wrapIn(state.config.schema.nodes.tip)(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
em: {
title: "Toggle emphasis",
content: icons.em,
@@ -396,17 +230,7 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
- footnote: {
- title: "Insert footnote",
- content: icons.footnote,
- // enable: canInsert(schema.nodes.footnote),
- select: state => true,
- run: (state, dispatch) => {
- const footnote = state.config.schema.nodes.footnote.create();
- dispatch(state.tr.replaceSelectionWith(footnote));
- },
- menu: props => <Button key={uuid()} {...props} />
- },
+
blockquote: {
title: "Wrap in block quote",
content: icons.blockquote,
@@ -464,55 +288,5 @@ export default {
select: state => true,
run: option => true,
menu: props => <ImageUpload key={uuid()} {...props} />
- },
-
- table: {
- title: "Insert table",
- content: icons.table,
- // enable: canInsert(schema.nodes.table),
- run: (state, dispatch) => {
- // const { from } = state.selection
- let rowCount = window && window.prompt("How many rows?", 2);
- let colCount = window && window.prompt("How many columns?", 2);
-
- const cells = [];
- while (colCount--) {
- cells.push(state.config.schema.nodes.table_cell.createAndFill());
- }
-
- const rows = [];
- while (rowCount--) {
- rows.push(
- state.config.schema.nodes.table_row.createAndFill(null, cells)
- );
- }
-
- const table = state.config.schema.nodes.table.createAndFill(null, rows);
- dispatch(state.tr.replaceSelectionWith(table));
-
- // const tr = state.tr.replaceSelectionWith(table)
- // tr.setSelection(Selection.near(tr.doc.resolve(from)))
- // dispatch(tr.scrollIntoView())
- // view.focus()
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
- },
- tableDropDownOptions: {
- content: "table",
- run: option => true,
- title: "Select Options",
- select: state => addColumnBefore(state),
- menu: props => <TableDropDown key={uuid()} {...props} />
- },
- selectParentNode: {
- title: "Toggle strong",
- content: "FindP",
- // active: markActive(schema.marks.strong),
- run(state, dispatch) {
- selectParentNode(state, dispatch);
- },
- select: state => true,
- menu: props => <Button key={uuid()} {...props} />
}
};
--
GitLab