Commit 1a0e61b3 authored by Christos's avatar Christos

Merge branch 'develop' into 'master'

Develop

See merge request !15
parents 1a9bbbcc 7e7bae1e
......@@ -17,8 +17,11 @@ import {
goToNextCell
} from "prosemirror-tables";
import { emDash, ellipsis } from "prosemirror-inputrules";
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-themes/themes/editoria-theme.css";
......@@ -48,7 +51,7 @@ const extraNodes = {
EditoriaSchema.nodes = { ...EditoriaSchema.nodes, ...extraNodes };
const schema = new CreateSchema(EditoriaSchema);
const plugins = [columnResizing(), tableEditing()];
const plugins = [columnResizing(), tableEditing(), LinkToolTipPlugin];
const shortCuts = {
Tab: goToNextCell(1),
......@@ -60,12 +63,14 @@ const shortCuts = {
"Shift-Ctrl-9": wrapInList(schema.nodes.ordered_list)
};
const keys = new CreateShortCuts({ schema: schema, shortCuts: shortCuts });
const keys = new CreateShortCuts({ schema, shortCuts });
const rules = [emDash, ellipsis];
const options = {
schema,
plugins,
keys
keys,
rules
};
const GlobalStyle = createGlobalStyle`
......
......@@ -8,6 +8,7 @@ import defaultPlugins from "./config/defaultPlugins";
import placeholder from "./config/plugins/placeholder";
import CreateShortCuts from "./config/classes/CreateShortCuts";
import CreateRules from "./config/classes/CreateRules";
const parser = schema => {
const parser = DOMParser.fromSchema(schema);
......@@ -32,20 +33,24 @@ const serializer = schema => {
class Wax extends Component {
componentWillMount() {
const { value, onChange, options } = this.props;
const { schema, plugins } = options;
const { schema, plugins, keys, rules } = options;
const WaxOnchange = onChange ? onChange : value => true;
const keys =
const WaxKeys =
options && options.keys
? options.keys
: new CreateShortCuts({ schema: schema, shortCuts: {} });
const WaxRules = new CreateRules({ schema: schema, rules: rules });
const editorContent = value ? value : "";
defaultPlugins.push(
...[placeholder({ content: this.props.placeholder }), ...plugins, keys]
...[placeholder({ content: this.props.placeholder }), WaxKeys, WaxRules]
);
if (plugins) defaultPlugins.push(...plugins);
this.WaxOptions = {
schema,
plugins: defaultPlugins
......
import {
inputRules,
wrappingInputRule,
textblockTypeInputRule,
smartQuotes
} from "prosemirror-inputrules";
class CreateRules {
constructor(config) {
this.allRules = this.allRules.bind(this);
this.schema = config.schema;
return inputRules(this.allRules(this.rules));
}
allRules(rules = []) {
return {
rules: [
...smartQuotes,
...rules,
// > blockquote
wrappingInputRule(/^\s*>\s$/, this.schema.nodes.blockquote),
// 1. ordered list
wrappingInputRule(
/^(\d+)\.\s$/,
this.schema.nodes.ordered_list,
match => ({ order: +match[1] }),
(match, node) => node.childCount + node.attrs.order === +match[1]
),
// * bullet list
wrappingInputRule(/^\s*([-+*])\s$/, this.schema.nodes.bullet_list),
// ``` code block
textblockTypeInputRule(/^```$/, this.schema.nodes.code_block),
// # heading
textblockTypeInputRule(
new RegExp("^(#{1,6})\\s$"),
this.schema.nodes.heading,
match => ({ level: match[1].length })
)
]
};
}
}
export default CreateRules;
......@@ -4,12 +4,4 @@ import { gapCursor } from "prosemirror-gapcursor";
import "prosemirror-gapcursor/style/gapcursor.css";
import placeholderPlugin from "./plugins/placeholderPlugin";
// import rules from "./rules";
export default [
// rules,
dropCursor(),
gapCursor(),
history(),
placeholderPlugin
];
export default [dropCursor(), gapCursor(), history(), placeholderPlugin];
import {
inputRules,
wrappingInputRule,
textblockTypeInputRule,
smartQuotes,
emDash,
ellipsis
} from "prosemirror-inputrules";
// import WaxSchema from "./classes/WaxSchema";
// const schema = WaxSchema();
export default inputRules({
rules: [
...smartQuotes,
ellipsis,
emDash,
// > blockquote
wrappingInputRule(/^\s*>\s$/, schema.nodes.blockquote),
// 1. ordered list
wrappingInputRule(
/^(\d+)\.\s$/,
schema.nodes.ordered_list,
match => ({ order: +match[1] }),
(match, node) => node.childCount + node.attrs.order === +match[1]
),
// * bullet list
wrappingInputRule(/^\s*([-+*])\s$/, schema.nodes.bullet_list),
// ``` code block
textblockTypeInputRule(/^```$/, schema.nodes.code_block),
// # heading
textblockTypeInputRule(
new RegExp("^(#{1,6})\\s$"),
schema.nodes.heading,
match => ({ level: match[1].length })
)
]
});
export { default as LinkToolTipPlugin } from "./src/LinkToolTipPlugin";
......@@ -8,6 +8,9 @@
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {},
"dependencies": {
"prosemirror-state": "^1.2.2",
"prosemirror-view": "^1.8.9"
},
"devDependencies": {}
}
import { EditorState, Plugin } from "prosemirror-state";
import { TextSelection } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
const LinkToolTipPlugin = new Plugin({
view(editorView) {
return new LinkToolTip(editorView);
}
});
class LinkToolTip {
constructor(view) {
this.tooltip = document.createElement("div");
this.tooltip.className = "tooltip";
view.dom.parentNode.appendChild(this.tooltip);
this.update(view, null);
}
update(view, lastState) {
let state = view.state;
// Don't do anything if the document/selection didn't change
if (
lastState &&
lastState.doc.eq(state.doc) &&
lastState.selection.eq(state.selection)
)
return;
// Hide the tooltip if the selection is empty
if (state.selection.empty) {
this.tooltip.style.display = "none";
return;
}
// Otherwise, reposition it and update its content
this.tooltip.style.display = "";
let { from, to } = state.selection;
// These are in screen coordinates
let start = view.coordsAtPos(from),
end = view.coordsAtPos(to);
// The box in which the tooltip is positioned, to use as base
let box = this.tooltip.offsetParent.getBoundingClientRect();
// Find a center-ish x position from the selection endpoints (when
// crossing lines, end may be more to the left)
let left = Math.max((start.left + end.left) / 2, start.left + 3);
this.tooltip.style.left = left - box.left + "px";
this.tooltip.style.bottom = box.bottom - start.top + "px";
this.tooltip.textContent = to - from;
}
destroy() {
this.tooltip.remove();
}
}
export default LinkToolTipPlugin;
......@@ -98,3 +98,41 @@
.wax-t-editoria p.empty-node:first-child::before {
content: attr(data-content);
}
/*LinkToolTip */
.tooltip {
position: absolute;
pointer-events: none;
z-index: 20;
background: white;
border: 1px solid silver;
border-radius: 2px;
padding: 2px 10px;
margin-bottom: 7px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.tooltip:before {
content: "";
height: 0;
width: 0;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -6px;
border: 5px solid transparent;
border-bottom-width: 0;
border-top-color: silver;
}
.tooltip:after {
content: "";
height: 0;
width: 0;
position: absolute;
left: 50%;
margin-left: -5px;
bottom: -4.5px;
border: 5px solid transparent;
border-bottom-width: 0;
border-top-color: white;
}
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