Commit 8ca68685 authored by chris's avatar chris

add gurdian invisible characters

parent 7e7bae1e
...@@ -3,16 +3,17 @@ ...@@ -3,16 +3,17 @@
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"dependencies": { "dependencies": {
"@guardian/prosemirror-invisibles": "^1.2.0",
"prosemirror-schema-list": "^1.0.0",
"prosemirror-tables": "^0.7.10",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6", "react-dom": "^16.8.6",
"styled-components": "^4.2.0", "styled-components": "^4.2.0",
"wax-prosemirror-components": "0.0.1",
"wax-prosemirror-core": "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-layouts": "0.0.1",
"wax-prosemirror-components": "0.0.1", "wax-prosemirror-schema": "0.0.1",
"prosemirror-tables": "^0.7.10", "wax-prosemirror-themes": "0.0.1"
"prosemirror-schema-list": "^1.0.0"
}, },
"scripts": { "scripts": {
"start": "react-app-rewired start", "start": "react-app-rewired start",
...@@ -23,7 +24,12 @@ ...@@ -23,7 +24,12 @@
"eslintConfig": { "eslintConfig": {
"extends": "react-app" "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": { "devDependencies": {
"react-app-rewired": "^2.1.1", "react-app-rewired": "^2.1.1",
"react-scripts": "3.0.1" "react-scripts": "3.0.1"
......
...@@ -18,6 +18,11 @@ import { ...@@ -18,6 +18,11 @@ import {
} from "prosemirror-tables"; } from "prosemirror-tables";
import { emDash, ellipsis } from "prosemirror-inputrules"; import { emDash, ellipsis } from "prosemirror-inputrules";
import invisibles, {
space,
hardBreak,
paragraph
} from "@guardian/prosemirror-invisibles";
import { Wax, CreateSchema, CreateShortCuts } from "wax-prosemirror-core"; import { Wax, CreateSchema, CreateShortCuts } from "wax-prosemirror-core";
import { EditoriaSchema } from "wax-prosemirror-schema"; import { EditoriaSchema } from "wax-prosemirror-schema";
...@@ -51,7 +56,12 @@ const extraNodes = { ...@@ -51,7 +56,12 @@ const extraNodes = {
EditoriaSchema.nodes = { ...EditoriaSchema.nodes, ...extraNodes }; EditoriaSchema.nodes = { ...EditoriaSchema.nodes, ...extraNodes };
const schema = new CreateSchema(EditoriaSchema); const schema = new CreateSchema(EditoriaSchema);
const plugins = [columnResizing(), tableEditing(), LinkToolTipPlugin]; const plugins = [
columnResizing(),
tableEditing(),
LinkToolTipPlugin,
invisibles([hardBreak()])
];
const shortCuts = { const shortCuts = {
Tab: goToNextCell(1), Tab: goToNextCell(1),
...@@ -101,7 +111,6 @@ class Editoria extends Component { ...@@ -101,7 +111,6 @@ class Editoria extends Component {
placeholder="Type Something..." placeholder="Type Something..."
theme="editoria" theme="editoria"
layout="editoria" layout="editoria"
debug
value="<p>hello</p> value="<p>hello</p>
<ul><li>listItem 1</li><li>listItem 2</li><li>listItem 3</li></ul> <ul><li>listItem 1</li><li>listItem 2</li><li>listItem 3</li></ul>
<table> <table>
......
...@@ -6,19 +6,23 @@ ...@@ -6,19 +6,23 @@
.wax-l-editoria .main-menu-container { .wax-l-editoria .main-menu-container {
background: #fff; background: #fff;
height: 36px; height: 52px;
line-height: 32px; line-height: 32px;
position: relative; position: relative;
user-select: none; user-select: none;
/*background: rgba(0, 0, 0, 0.01);*/
} }
.wax-l-editoria .main-menu-inner { .wax-l-editoria .main-menu-inner {
display: flex; display: flex;
align-items: center;
justify-content: center;
flex-direction: column; flex-direction: column;
left: 0; left: 0;
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
background: transparent;
z-index: 9999; z-index: 9999;
} }
...@@ -26,13 +30,18 @@ ...@@ -26,13 +30,18 @@
background: #fff; background: #fff;
padding: 2px 2px 2px 0; padding: 2px 2px 2px 0;
position: relative; position: relative;
background: transparent;
}
.wax-l-editoria .main-menu button {
background: transparent;
} }
.wax-l-editoria .side-menu-container { .wax-l-editoria .side-menu-container {
display: flex; display: flex;
width: 10%; width: 10%;
height: 98%; 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 { .wax-l-editoria .side-menu-inner {
...@@ -44,7 +53,6 @@ ...@@ -44,7 +53,6 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
margin-top: 15px; margin-top: 15px;
} }
...@@ -53,6 +61,7 @@ ...@@ -53,6 +61,7 @@
margin-left: 5%; margin-left: 5%;
flex-direction: column; flex-direction: column;
width: 90%; width: 90%;
background: transparent;
} }
.wax-l-editoria .wax-surface-container { .wax-l-editoria .wax-surface-container {
...@@ -71,4 +80,13 @@ ...@@ -71,4 +80,13 @@
box-sizing: border-box; box-sizing: border-box;
padding: 0; padding: 0;
margin-left: 12%; margin-left: 12%;
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;
} }
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
.wax-t-editoria table { .wax-t-editoria table {
border-spacing: 0px; border-spacing: 0px;
table-layout: fixed; table-layout: fixed;
width: 50%; width: 100%;
overflow: hidden; overflow: hidden;
} }
...@@ -99,6 +99,34 @@ ...@@ -99,6 +99,34 @@
content: attr(data-content); 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 */ /*LinkToolTip */
.tooltip { .tooltip {
position: absolute; 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