basic tooltip plugin from prose-mirror example

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),

wax-prosemirror-plugins/index.js

+export { default as LinkToolTipPlugin } from "./src/LinkToolTipPlugin";

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": {}
 }

wax-prosemirror-plugins/src/LinkToolTipPlugin.js

+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;

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;
+}