Commit ef6f9271 authored by Christos's avatar Christos

Merge branch 'develop' into 'master'

Develop

See merge request !16
parents 1a0e61b3 549f6666
......@@ -3,16 +3,17 @@
"version": "0.0.1",
"private": true,
"dependencies": {
"@guardian/prosemirror-invisibles": "^1.2.0",
"prosemirror-schema-list": "^1.0.0",
"prosemirror-tables": "^0.7.10",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"styled-components": "^4.2.0",
"wax-prosemirror-components": "0.0.1",
"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",
"prosemirror-tables": "^0.7.10",
"prosemirror-schema-list": "^1.0.0"
"wax-prosemirror-schema": "0.0.1",
"wax-prosemirror-themes": "0.0.1"
},
"scripts": {
"start": "react-app-rewired start",
......@@ -23,7 +24,12 @@
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"],
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"react-app-rewired": "^2.1.1",
"react-scripts": "3.0.1"
......
......@@ -18,12 +18,18 @@ import {
} from "prosemirror-tables";
import { emDash, ellipsis } from "prosemirror-inputrules";
import invisibles, {
space,
hardBreak,
paragraph
} from "@guardian/prosemirror-invisibles";
import { Wax, CreateSchema, CreateShortCuts } from "wax-prosemirror-core";
import { EditoriaSchema } from "wax-prosemirror-schema";
import { LinkToolTipPlugin } from "wax-prosemirror-plugins";
import { MainMenuBar, SideMenuBar } from "wax-prosemirror-components";
import "wax-prosemirror-layouts/layouts/editoria-layout.css";
import "wax-prosemirror-layouts/vars/wax-editoria-vars.css";
import "wax-prosemirror-themes/themes/editoria-theme.css";
const extraNodes = {
......@@ -51,7 +57,12 @@ const extraNodes = {
EditoriaSchema.nodes = { ...EditoriaSchema.nodes, ...extraNodes };
const schema = new CreateSchema(EditoriaSchema);
const plugins = [columnResizing(), tableEditing(), LinkToolTipPlugin];
const plugins = [
columnResizing(),
tableEditing(),
LinkToolTipPlugin,
invisibles([hardBreak()])
];
const shortCuts = {
Tab: goToNextCell(1),
......@@ -101,7 +112,6 @@ 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>
......
export { default as MainMenuBar } from "./src/mainMenuBar/MainMenuBar";
export { default as SideMenuBar } from "./src/sideMenuBar/SideMenuBar";
export { default as LinkToolTip } from "./src/linkToolTip/LinkToolTip";
import React, { Component } from "react";
import { EditorView } from "prosemirror-view";
import "./linktooltip.css";
class LinkToolTip extends React.Component {
render() {
const { href, onEdit, onRemove } = this.props;
return (
<div className="wax-link-tooltip">
<div className="wax-link-tooltip-body">
<div className="wax-link-tooltip-row">Link tooltip</div>
</div>
</div>
);
}
}
export default LinkToolTip;
/*@import "./wax-custom-button.css";*/
.wax-link-tooltip {
display: flex;
justify-content: center;
left: -150px;
pointer-events: none;
position: absolute;
top: -70px;
width: 400px;
}
.wax-link-tooltip .wax-custom-button {
margin: 0 3px;
}
.wax-link-tooltip-href {
border: none;
color: var(--wax-link-color);
display: inline-block;
flex: 1;
margin: 0 6px 0 0;
max-width: 200px;
overflow: hidden;
padding: 6px 0;
position: relative;
text-overflow: ellipsis;
vertical-align: middle;
white-space: nowrap;
z-index: 2;
}
.wax-link-tooltip-row {
direction: row;
display: flex;
}
.wax-link-tooltip-body {
background: #fff;
border-radius: var(--wax-overlay-radius);
box-shadow: var(--wax-overlay-shadow);
box-sizing: border-box;
display: inline-block;
font-family: var(--wax-font-family);
font-size: var(--wax-font-size);
max-width: 400px;
padding: 10px;
pointer-events: auto;
}
.wax-link-tooltip-body::after {
background-color: #fff;
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.26);
content: "";
height: 20px;
left: 35%;
position: absolute;
top: 37px;
width: 20px;
transform: rotate(45deg);
z-index: 1;
}
......@@ -14,15 +14,14 @@ const blockActive = (type, attrs = {}) => state => {
};
export default {
plain: {
title: "Change to General Text",
// content: icons.paragraph,
content: "General Text",
title: {
title: "Change to Title",
content: "Title",
enable: state => {
return setBlockType(state.config.schema.nodes.paragraph)(state);
return setBlockType(state.config.schema.nodes.title)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.paragraph)(state, dispatch);
setBlockType(state.config.schema.nodes.title)(state, dispatch);
},
select: state => true,
......@@ -40,6 +39,56 @@ export default {
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
author: {
title: "Change to Author",
content: "Author",
enable: state => {
return setBlockType(state.config.schema.nodes.author)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.author)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
epigraphPoetry: {
title: "Change to Epigraph Poetry",
content: "Epigraph Poetry",
enable: state => {
return setBlockType(state.config.schema.nodes.epigraphPoetry)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.epigraphPoetry)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
epigraphProse: {
title: "Change to Epigraph Prose",
content: "Epigraph Prose",
enable: state => {
return setBlockType(state.config.schema.nodes.epigraphProse)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.epigraphProse)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
plain: {
title: "Change to General Text",
// content: icons.paragraph,
content: "General Text",
enable: state => {
return setBlockType(state.config.schema.nodes.paragraph)(state);
},
run(state, dispatch) {
setBlockType(state.config.schema.nodes.paragraph)(state, dispatch);
},
select: state => true,
menu: props => <Button key={uuid()} {...props} />
},
heading1: {
title: "Change to heading level 1",
content: "Heading 1",
......
......@@ -7,7 +7,7 @@ import {
class CreateRules {
constructor(config) {
this.allRules = this.allRules.bind(this);
this.rules = config.rules;
this.schema = config.schema;
return inputRules(this.allRules(this.rules));
}
......
......@@ -2,23 +2,28 @@
display: flex;
flex-direction: column;
height: 100%;
font-family: var(--wax-font-family);
}
.wax-l-editoria .main-menu-container {
background: #fff;
height: 36px;
height: 52px;
line-height: 32px;
position: relative;
user-select: none;
/*background: rgba(0, 0, 0, 0.01);*/
}
.wax-l-editoria .main-menu-inner {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
left: 0;
position: absolute;
right: 0;
top: 0;
background: transparent;
z-index: 9999;
}
......@@ -26,13 +31,18 @@
background: #fff;
padding: 2px 2px 2px 0;
position: relative;
background: transparent;
}
.wax-l-editoria .main-menu button {
background: transparent;
}
.wax-l-editoria .side-menu-container {
display: flex;
width: 10%;
width: 12%;
height: 98%;
border-right: 1px solid rgba(0, 0, 0, 0.26);
/*background: rgba(0, 0, 0, 0.01);*/
}
.wax-l-editoria .side-menu-inner {
......@@ -44,7 +54,6 @@
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: 15px;
}
......@@ -53,6 +62,7 @@
margin-left: 5%;
flex-direction: column;
width: 90%;
background: transparent;
}
.wax-l-editoria .wax-surface-container {
......@@ -70,5 +80,14 @@
top: 0;
box-sizing: border-box;
padding: 0;
margin-left: 12%;
margin-left: 14%;
padding: 2px;
}
.wax-l-editoria .wax-surface-scroll .ProseMirror {
-moz-box-shadow: 0 0 3px #ccc;
-webkit-box-shadow: 0 0 3px #ccc;
box-shadow: 0 0 3px #ccc;
width: 65%;
min-height: 90%;
padding: 40px;
}
:root {
--wax-font-family: "Arial";
--wax-font-size: 13px;
--wax-link-color: rgb(0, 0, 238);
--wax-overlay-radius: 3px;
--wax-overlay-shadow: 0 1px 2px rgba(0, 0, 0, 0.46);
}
......@@ -35,6 +35,182 @@ const EditoriaSchema = {
return pDOM;
}
},
author: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "author" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
epigraphProse: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "epigraph-prose" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
epigraphPoetry: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "epigraph-poetry" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
sourceNote: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "source-note" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
paragraphCont: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "paragraph-cont" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
extractProse: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "extract-prose" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
extractPoetry: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "extract-poetry" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
title: {
content: "inline*",
group: "block",
priority: 0,
defining: true,
attrs: {
class: { default: "title" }
},
parseDOM: [
{
tag: "p",
getAttrs(dom) {
return {
class: dom.getAttribute("class")
};
}
}
],
toDOM(node) {
return ["p", node.attrs, 0];
}
},
subtitle: {
content: "inline*",
group: "block",
......@@ -78,24 +254,28 @@ const EditoriaSchema = {
marks: {
link: {
attrs: {
href: {},
href: { default: null },
rel: { default: "" },
target: { default: "blank" },
title: { default: null }
},
inclusive: false,
parseDOM: [
{
tag: "a[href]",
getAttrs(dom) {
getAttrs: dom => {
const href = dom.getAttribute("href");
const target = href && href.indexOf("#") === 0 ? "" : "blank";
return {
href: dom.getAttribute("href"),
title: dom.getAttribute("title")
title: dom.getAttribute("title"),
target
};
}
}
],
toDOM(node) {
let { href, title } = node.attrs;
return ["a", { href, title }, 0];
return ["a", node.attrs, 0];
}
},
em: {
......
......@@ -40,15 +40,21 @@
/* Tables */
.wax-t-editoria table {
border-spacing: 0px;
border-collapse: initial;
border-spacing: 0;
border-width: 0 thin thin 0;
border: 1px solid #eee;
table-layout: fixed;
width: 50%;
width: 100%;
margin: 0;
overflow: hidden;
page-break-inside: avoid;
}
.wax-t-editoria th,
.wax-t-editoria td {
border: 1px solid #eee;
/*width: 200px;*/
padding: 2px 5px;
vertical-align: top;
box-sizing: border-box;
......@@ -99,6 +105,34 @@
content: attr(data-content);
}
/* invisible characters */
.invisible {
pointer-events: none;
user-select: none;
}
.invisible:before {
caret-color: inherit;
color: gray;
display: inline-block;
font-weight: 400;
font-style: normal;
line-height: 1em;
width: 0;
}
.invisible--space:before {
content: "·";
}
.invisible--break:before {
content: "¬";
}
.invisible--par:after {
content: "¶";
}
/*LinkToolTip */
.tooltip {
position: absolute;
......
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