From e5edb3309d8517c0d4fffedbedc72b75a81fa9d8 Mon Sep 17 00:00:00 2001
From: chris <kokosias@yahoo.gr>
Date: Sat, 11 May 2019 00:58:34 +0300
Subject: [PATCH] basic tooltip plugin from prose-mirror example
---
editors/editoria/src/Editoria.js | 3 +-
wax-prosemirror-plugins/index.js | 1 +
wax-prosemirror-plugins/package.json | 5 +-
.../src/LinkToolTipPlugin.js | 57 +++++++++++++++++++
.../themes/editoria-theme.css | 38 +++++++++++++
5 files changed, 102 insertions(+), 2 deletions(-)
create mode 100644 wax-prosemirror-plugins/src/LinkToolTipPlugin.js
diff --git a/editors/editoria/src/Editoria.js b/editors/editoria/src/Editoria.js
index 0e39ef219..86d20e335 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 e69de29bb..41815bdc3 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 45c3e6c7b..aa47a7f08 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 000000000..ddb779189
--- /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 95b447684..9d0195b18 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;
+}
--
GitLab