Commit 91841a5e authored by Christos's avatar Christos

Merge branch 'develop' into 'master'

Develop

See merge request !12
parents a9c6b003 11497587
......@@ -5,7 +5,6 @@
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0",
"wax-prosemirror-core": "0.0.1",
"wax-prosemirror-schema": "0.0.1",
......@@ -24,6 +23,7 @@
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
"devDependencies": {
"react-app-rewired": "^2.1.1"
"react-app-rewired": "^2.1.1",
"react-scripts": "3.0.1"
}
}
......@@ -5,13 +5,14 @@
"dependencies": {
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-scripts": "3.0.0",
"styled-components": "^4.2.0",
"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-components": "0.0.1"
"wax-prosemirror-components": "0.0.1",
"prosemirror-tables": "^0.7.10",
"prosemirror-schema-list": "^1.0.0"
},
"scripts": {
"start": "react-app-rewired start",
......@@ -24,6 +25,7 @@
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
"devDependencies": {
"react-app-rewired": "^2.1.1"
"react-app-rewired": "^2.1.1",
"react-scripts": "3.0.1"
}
}
import React, { Component } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { orderedList, bulletList, listItem } from "prosemirror-schema-list";
import {
tableNodes,
columnResizing,
tableEditing,
goToNextCell
} from "prosemirror-tables";
import { Wax, CreateSchema } from "wax-prosemirror-core";
import { EditoriaSchema } from "wax-prosemirror-schema";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
import "wax-prosemirror-layouts/layouts/editoria-layout.css";
import "wax-prosemirror-themes/themes/editoria-theme.css";
const plugins = [];
const extraNodes = {
ordered_list: {
...orderedList,
content: "list_item+",
group: "block"
},
bullet_list: {
...bulletList,
content: "list_item+",
group: "block"
},
list_item: {
...listItem,
content: "paragraph block*",
group: "block"
},
...tableNodes({
tableGroup: "block",
cellContent: "block+"
})
};
EditoriaSchema.nodes = { ...EditoriaSchema.nodes, ...extraNodes };
const plugins = [columnResizing(), tableEditing()];
const keys = {};
const options = {
schema: new CreateSchema(EditoriaSchema)
schema: new CreateSchema(EditoriaSchema),
plugins
};
const GlobalStyle = createGlobalStyle`
......@@ -41,6 +73,14 @@ class Editoria extends Component {
placeholder="Type Something..."
theme="editoria"
layout="editoria"
debug
value="<p>hello</p>
<ul><li>listItem 1</li><li>listItem 2</li><li>listItem 3</li></ul>
<table>
<tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th></tr>
<tr><td>Jill</td><td>Smith</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>"
renderLayout={({ editor, ...props }) => (
<React.Fragment>
<MainMenuBar {...props} />
......
......@@ -18,7 +18,7 @@
"clean:root": "rm -rf node_modules",
"reset": "yarn clean && yarn",
"build": "lerna run build --concurrency=1 --stream",
"editoria": "cd editors/editoria && yarn start",
"editoria": "cd editors/editoria && yarn start",
"default": "cd editors/default && yarn start"
},
"dependencies": {},
......
......@@ -5,10 +5,16 @@ import Dropdown from "react-dropdown";
import "react-dropdown/style.css";
const DropdownStyled = styled(Dropdown)`
display: ${props => (props.select ? "inline-flex" : "none")};
display: inline-flex;
cursor: not-allowed;
opacity: ${props => (props.select ? 1 : 0.4)};
pointer-events: ${props => (props.select ? "default" : "none")};
.Dropdown-control {
border: none;
}
.Dropdown-arrow {
top: 21px;
}
`;
const dropDownOptions = [
......
......@@ -4,7 +4,8 @@ import classnames from "classnames";
import classes from "./Button.module.css";
const ButtonStyled = styled.button`
display: ${props => (props.select ? "inline" : "none")};
opacity: ${props => (props.select ? 1 : 0.4)};
pointer-events: ${props => (props.select ? "default" : "none")};
`;
const Button = ({ dispatch, state, item }) => (
......
......@@ -19,4 +19,5 @@
.button:disabled {
color: #ccc;
pointer-events: none;
}
......@@ -81,15 +81,6 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
headings: {
title: "Change to heading level 1",
content: icons.heading,
// active: blockActive(schema.nodes.heading, { level: 1 }),
// enable: setBlockType(schema.nodes.heading, { level: 1 }),
run: option => true,
select: state => true,
menu: props => <HeadingsDropDown key={uuid()} {...props} />
},
em: {
title: "Toggle emphasis",
content: icons.em,
......@@ -127,19 +118,6 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
source: {
title: "Toggle Source",
content: icons.source,
active: state => {
return markActive(state.config.schema.marks.source)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.source)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
small_caps: {
title: "Toggle Small Caps",
content: icons.small_caps,
......@@ -223,19 +201,6 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
codeBlock: {
title: "Change to code block",
content: icons.code_block,
// active: blockActive(schema.nodes.code_block),
// enable: setBlockType(schema.nodes.code_block),
run(state, dispatch) {
wrapIn(state.config.schema.nodes.codeBlock)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
blockquote: {
title: "Wrap in block quote",
content: icons.blockquote,
......@@ -293,5 +258,39 @@ 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));
},
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} />
}
};
import React from "react";
import { forEach, map } from "lodash";
import SideMenuItems from "./SideMenuItems";
const filtered = (menu, menuItems) =>
Object.keys(menu)
.filter(key => menuItems.includes(key))
.reduce((obj, key) => {
obj[key] = menu[key];
return obj;
}, {});
const setMenuItems = (menu, menuItems) => {
let items = menuItems;
if (menuItems.length === 0) {
forEach(menu, (key, index) => {
items.push(index);
});
}
return filtered(menu, items);
};
const SideMenuBar = ({
menuItems = [],
children,
state,
dispatch,
className,
fileUpload
}) => (
<div className={`${className} side-menu-container`}>
<div className="side-menu-inner">
<div className="side-menu">
{
<span>
{map(setMenuItems(SideMenuItems, menuItems), item =>
item.menu({ state, dispatch, item, fileUpload })
)}
</span>
}
</div>
</div>
</div>
);
export default SideMenuBar;
......@@ -10,8 +10,6 @@ const blockActive = (type, attrs = {}) => state => {
if (node) {
return node.hasMarkup(type, attrs);
}
console.log("type", $from.end());
// console.log(to <= $from.end() && $from.parent.hasMarkup(type, attrs));
return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
};
......@@ -20,10 +18,9 @@ export default {
title: "Change to General Text",
// content: icons.paragraph,
content: "General Text",
active: state => {
return blockActive(state.config.schema.nodes.paragraph)(state);
enable: state => {
return setBlockType(state.config.schema.nodes.paragraph)(state);
},
// enable: setBlockType(schema.nodes.paragraph),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.paragraph)(state, dispatch);
},
......@@ -34,8 +31,8 @@ export default {
subtitle: {
title: "Change to Subtilte",
content: "Subtilte",
active: state => {
return blockActive(state.config.schema.nodes.subtitle)(state);
enable: state => {
return setBlockType(state.config.schema.nodes.subtitle)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.subtitle)(state, dispatch);
......@@ -46,12 +43,11 @@ export default {
heading1: {
title: "Change to heading level 1",
content: "Heading 1",
active: state => {
return blockActive(state.config.schema.nodes.heading, { level: 1 })(
enable: state => {
return setBlockType(state.config.schema.nodes.heading, { level: 1 })(
state
);
},
// enable: setBlockType(schema.nodes.heading, { level: 1 }),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.heading, { level: 1 })(
state,
......@@ -64,12 +60,11 @@ export default {
heading2: {
title: "Change to heading level 2",
content: "Heading 2",
active: state => {
return blockActive(state.config.schema.nodes.heading, { level: 2 })(
enable: state => {
return setBlockType(state.config.schema.nodes.heading, { level: 2 })(
state
);
},
// enable: setBlockType(schema.nodes.heading, { level: 2 }),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.heading, { level: 2 })(
state,
......@@ -82,12 +77,11 @@ export default {
heading3: {
title: "Change to heading level 3",
content: "Heading 3",
active: state => {
return blockActive(state.config.schema.nodes.heading, { level: 3 })(
enable: state => {
return setBlockType(state.config.schema.nodes.heading, { level: 3 })(
state
);
},
// enable: setBlockType(schema.nodes.heading, { level: 3 }),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.heading, { level: 3 })(
state,
......
......@@ -21,10 +21,8 @@
"prosemirror-inputrules": "^1.0.1",
"prosemirror-keymap": "^1.0.1",
"prosemirror-model": "^1.7.0",
"prosemirror-schema-list": "^1.0.0",
"prosemirror-transform": "^1.1.3",
"prosemirror-state": "^1.2.2",
"prosemirror-tables": "^0.7.10",
"prosemirror-view": "^1.8.9",
"prosemirror-dev-tools": "^2.1.1"
},
......
......@@ -41,9 +41,9 @@ class Wax extends Component {
: new WaxKeys({ schema: schema, shortCuts: {} });
const editorContent = value ? value : "";
// TO DO Find a way to start plugins with options
defaultPlugins.push(
...[placeholder({ content: this.props.placeholder }), keys]
...[placeholder({ content: this.props.placeholder }), ...plugins, keys]
);
this.WaxOptions = {
......@@ -82,8 +82,6 @@ class Wax extends Component {
<React.Fragment>{editor}</React.Fragment>
);
console.log(className);
const WaxRender = renderLayout ? renderLayout : defaultRender;
const WaxLayout = layout
? `wax-container wax-l-${layout}`
......
......@@ -24,9 +24,6 @@
.wax-l-editoria .main-menu {
background: #fff;
/*box-shadow: 0 1px 3px rgba(0, 0, 0, 0.26);*/
/*box-sizing: border-box;*/
overflow: hidden;
padding: 2px 2px 2px 0;
position: relative;
}
......
......@@ -58,7 +58,7 @@ const EditoriaSchema = {
}
},
heading: {
attrs: { class: { default: "ct" }, level: { default: 1 } },
attrs: { level: { default: 1 } },
content: "inline*",
group: "block",
defining: true,
......@@ -71,11 +71,7 @@ const EditoriaSchema = {
{ tag: "h6", attrs: { level: 6 } }
],
toDOM(node) {
if (node.attrs.level === 1) {
return ["h" + node.attrs.level, node.attrs, 0];
} else {
return ["h" + node.attrs.level, 0];
}
return ["h" + node.attrs.level, 0];
}
}
},
......
......@@ -2,51 +2,6 @@
background: #fff;
}
.wax-t-default hr {
padding: 2px 10px;
border: none;
margin: 1em 0;
}
.wax-t-default hr:after {
content: "";
display: block;
height: 1px;
background-color: silver;
line-height: 2px;
}
.wax-t-default ul,
.wax-t-default ol {
padding-left: 30px;
}
.wax-t-default blockquote {
padding-left: 1em;
border-left: 3px solid #eee;
margin-left: 0;
margin-right: 0;
}
.wax-t-default img {
cursor: default;
}
.wax-t-default table {
border-spacing: 0px;
}
.wax-t-default th,
.wax-t-default td {
border: 1px solid #eee;
padding: 2px 5px;
}
.wax-t-default sup,
.wax-t-default sub {
line-height: 0;
}
.wax-t-default .ProseMirror:focus {
outline: none;
}
......
......@@ -28,23 +28,62 @@
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-spacing: 0px;
table-layout: fixed;
width: 50%;
overflow: hidden;
}
.wax-t-editoria th,
.wax-t-editoria td {
border: 1px solid #eee;
padding: 2px 5px;
vertical-align: top;
box-sizing: border-box;
position: relative;
}
.wax-t-editoria sup,
.wax-t-editoria sub {
line-height: 0;
.wax-t-editoria .tableWrapper {
overflow-x: auto;
}
.wax-t-editoria .ProseMirror:focus {
outline: none;
.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 */
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment