diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js index 0e39ef219a1853a19402854cd6033699a41f7d97..86d20e335273e9271c11ac73f091f8f01f792164 100644 --- a/editors/editoria/src/Editoria.js +++ b/editors/editoria/src/Editoria.js @@ -19,6 +19,7 @@ import { 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 +49,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), diff --git a/wax-prosemirror-plugins/index.js b/wax-prosemirror-plugins/index.js index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..41815bdc33a32cbb66b39c72fa35733058a73227 100644 --- a/wax-prosemirror-plugins/index.js +++ b/wax-prosemirror-plugins/index.js @@ -0,0 +1 @@ +export { default as LinkToolTipPlugin } from "./src/LinkToolTipPlugin"; diff --git a/wax-prosemirror-plugins/package.json b/wax-prosemirror-plugins/package.json index 45c3e6c7ba3e6b642d9bdd9d6d77ff6253f87a4c..aa47a7f087199ac6038f5eacb71d60d891899d1e 100644 --- a/wax-prosemirror-plugins/package.json +++ b/wax-prosemirror-plugins/package.json @@ -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": {} } diff --git a/wax-prosemirror-plugins/src/LinkToolTipPlugin.js b/wax-prosemirror-plugins/src/LinkToolTipPlugin.js new file mode 100644 index 0000000000000000000000000000000000000000..ddb77918944a0e356f8cfd16b4300750e59c8a3e --- /dev/null +++ b/wax-prosemirror-plugins/src/LinkToolTipPlugin.js @@ -0,0 +1,57 @@ +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; diff --git a/wax-prosemirror-themes/themes/editoria-theme.css b/wax-prosemirror-themes/themes/editoria-theme.css index 95b4476841cfc91830dac6ccf2258fa3ae0f9ce1..9d0195b18824cb20a6ab3b3cec5dcffc1e261758 100644 --- a/wax-prosemirror-themes/themes/editoria-theme.css +++ b/wax-prosemirror-themes/themes/editoria-theme.css @@ -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; +}