Commit a9c6b003 authored by Christos's avatar Christos

Merge branch 'develop' into 'master'

Develop

See merge request !11
parents 5b797e83 63aa2880
......@@ -2,7 +2,7 @@ import React, { Component } from "react";
import styled, { createGlobalStyle } from "styled-components";
import { Wax, CreateSchema } from "wax-prosemirror-core";
import { EditoriaSchema } from "wax-prosemirror-schema";
import { MainMenuBar } from "wax-prosemirror-components";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
import "wax-prosemirror-layouts/layouts/editoria-layout.css";
import "wax-prosemirror-themes/themes/editoria-theme.css";
......@@ -44,7 +44,10 @@ class Editoria extends Component {
renderLayout={({ editor, ...props }) => (
<React.Fragment>
<MainMenuBar {...props} />
<div className="wax-surface-container">{editor}</div>
<div className="wax-surface-container">
<SideMenuBar {...props} />
{editor}
</div>
</React.Fragment>
)}
/>
......
export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
......@@ -3,16 +3,10 @@ import styled from "styled-components";
import classnames from "classnames";
import classes from "./Button.module.css";
console.log(classes);
const ButtonStyled = styled.button`
display: ${props => (props.select ? "inline" : "none")};
`;
const checkActive = (item, state) => {
console.log(item.active(state));
return item.active(state);
};
const Button = ({ dispatch, state, item }) => (
<ButtonStyled
type="button"
......
......@@ -90,21 +90,6 @@ export default {
select: state => true,
menu: props => <HeadingsDropDown key={uuid()} {...props} />
},
plain: {
title: "Change to General Text",
// content: icons.paragraph,
content: "General Text",
// active: blockActive(schema.nodes.paragraph),
// enable: setBlockType(schema.nodes.paragraph),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.paragraph)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
em: {
title: "Toggle emphasis",
content: icons.em,
......@@ -145,7 +130,9 @@ export default {
source: {
title: "Toggle Source",
content: icons.source,
// active: markActive(schema.marks.code),
active: state => {
return markActive(state.config.schema.marks.source)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.source)(state, dispatch);
},
......@@ -156,7 +143,9 @@ export default {
small_caps: {
title: "Toggle Small Caps",
content: icons.small_caps,
// active: markActive(schema.marks.code),
active: state => {
return markActive(state.config.schema.marks.small_caps)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.small_caps)(state, dispatch);
},
......@@ -167,9 +156,9 @@ export default {
subscript: {
title: "Toggle subscript",
content: icons.subscript,
// active: state => {
// return markActive(state.config.schema.marks.subscript)(state);
// },
active: state => {
return markActive(state.config.schema.marks.subscript)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.subscript)(state, dispatch);
},
......@@ -179,7 +168,9 @@ export default {
superscript: {
title: "Toggle superscript",
content: icons.superscript,
// active: markActive(schema.marks.superscript),
active: state => {
return markActive(state.config.schema.marks.superscript)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.superscript)(state, dispatch);
},
......@@ -189,7 +180,9 @@ export default {
underline: {
title: "Toggle underline",
content: icons.underline,
// active: markActive(schema.marks.underline),
active: state => {
return markActive(state.config.schema.marks.underline)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.underline)(state, dispatch);
},
......@@ -200,7 +193,9 @@ export default {
strikethrough: {
title: "Toggle strikethrough",
content: icons.strikethrough,
// active: markActive(schema.marks.strikethrough),
active: state => {
return markActive(state.config.schema.marks.strikethrough)(state);
},
run(state, dispatch) {
toggleMark(state.config.schema.marks.strikethrough)(state, dispatch);
},
......@@ -210,7 +205,9 @@ export default {
link: {
title: "Add or remove link",
content: icons.link,
// active: markActive(schema.marks.link),
active: state => {
return markActive(state.config.schema.marks.link)(state);
},
enable: state => !state.selection.empty,
run(state, dispatch) {
if (markActive(state.config.schema.marks.link)(state)) {
......
import React from "react";
import { forEach, map } from "lodash";
// import classes from "./MenuBar.css";
import SideMenuItems from "./SideMenuItems";
const filtered = (menu, menuItems) =>
......@@ -29,12 +28,12 @@ const SideMenuBar = ({
className,
fileUpload
}) => (
<div className={`${className} main-menu-container`}>
<div className="main-menu-inner">
<div className="main-menu">
<div className={`${className} side-menu-container`}>
<div className="side-menu-inner">
<div className="side-menu">
{
<span className={classes.group}>
{map(setMenuItems(menu, menuItems), item =>
<span>
{map(setMenuItems(SideMenuItems, menuItems), item =>
item.menu({ state, dispatch, item, fileUpload })
)}
</span>
......
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;
import React from "react";
import { v4 as uuid } from "uuid";
import { setBlockType } from "prosemirror-commands";
import Button from "../components/button/Button";
const blockActive = (type, attrs = {}) => state => {
const { $from, to, node } = state.selection;
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);
};
export default {
plain: {
title: "Change to General Text",
// content: icons.paragraph,
content: "General Text",
active: state => {
return blockActive(state.config.schema.nodes.paragraph)(state);
},
// enable: setBlockType(schema.nodes.paragraph),
run(state, dispatch) {
setBlockType(state.config.schema.nodes.paragraph)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
subtitle: {
title: "Change to Subtilte",
content: "Subtilte",
active: state => {
return blockActive(state.config.schema.nodes.subtitle)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.subtitle)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
heading1: {
title: "Change to heading level 1",
content: "Heading 1",
active: state => {
return blockActive(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,
dispatch
);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
heading2: {
title: "Change to heading level 2",
content: "Heading 2",
active: state => {
return blockActive(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,
dispatch
);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
heading3: {
title: "Change to heading level 3",
content: "Heading 3",
active: state => {
return blockActive(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,
dispatch
);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
}
};
......@@ -31,6 +31,33 @@
position: relative;
}
.wax-l-editoria .side-menu-container {
display: flex;
width: 10%;
height: 98%;
border-right: 1px solid rgba(0, 0, 0, 0.26);
}
.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%;
}
.wax-l-editoria .wax-surface-container {
flex: 1;
position: relative;
......@@ -46,5 +73,5 @@
top: 0;
box-sizing: border-box;
padding: 0;
margin-left: 20px;
margin-left: 12%;
}
......@@ -34,6 +34,49 @@ const EditoriaSchema = {
toDOM() {
return pDOM;
}
},
subtitle: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "cst" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
heading: {
attrs: { class: { default: "ct" }, level: { default: 1 } },
content: "inline*",
group: "block",
defining: true,
parseDOM: [
{ tag: "h1", attrs: { level: 1 } },
{ tag: "h2", attrs: { level: 2 } },
{ tag: "h3", attrs: { level: 3 } },
{ tag: "h4", attrs: { level: 4 } },
{ tag: "h5", attrs: { level: 5 } },
{ 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];
}
}
}
},
marks: {
......@@ -86,6 +129,61 @@ const EditoriaSchema = {
toDOM() {
return codeDOM;
}
},
subscript: {
excludes: "superscript",
parseDOM: [{ tag: "sub" }, { style: "vertical-align=sub" }],
toDOM: () => ["sub"]
},
superscript: {
excludes: "subscript",
parseDOM: [{ tag: "sup" }, { style: "vertical-align=super" }],
toDOM: () => ["sup"]
},
strikethrough: {
parseDOM: [
{ tag: "strike" },
{ style: "text-decoration:line-through" },
{ style: "text-decoration-line:line-through" }
],
toDOM: () => [
"span",
{
style: "text-decoration-line:line-through"
}
]
},
underline: {
parseDOM: [{ tag: "u" }, { style: "text-decoration:underline" }],
toDOM: () => [
"span",
{
style: "text-decoration:underline"
}
]
},
small_caps: {
attrs: {
class: { default: "small-caps" }
},
inclusive: false,
parseDOM: [
{
tag: "span",
getAttrs(dom) {
return { class: dom.getAttribute("class") };
}
}
],
toDOM(node) {
return ["span", node.attrs, 0];
}
},
source: {
parseDOM: [{ tag: "cite" }],
toDOM() {
return ["cite", 0];
}
}
}
};
......
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