1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
import { action, IReactionDisposer, reaction } from "mobx";
import { baseKeymap } from "prosemirror-commands";
import { history, redo, undo } from "prosemirror-history";
import { keymap } from "prosemirror-keymap";
const { exampleSetup } = require("prosemirror-example-setup")
import { EditorState, Transaction, } from "prosemirror-state";
import { EditorView } from "prosemirror-view";
import { schema } from "./RichTextSchema";
import React = require("react")
import "./TooltipTextMenu.scss";
const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
import { library } from '@fortawesome/fontawesome-svg-core'
import { wrapInList, bulletList } from 'prosemirror-schema-list'
import {
faListUl,
} from '@fortawesome/free-solid-svg-icons';
export class TooltipTextMenu {
private tooltip: HTMLElement;
constructor(view: EditorView) {
this.tooltip = document.createElement("div");
this.tooltip.className = "tooltipMenu";
//add the div which is the tooltip
view.dom.parentNode!.appendChild(this.tooltip);
//add additional icons
library.add(faListUl);
//add the buttons to the tooltip
let items = [
{ command: toggleMark(schema.marks.strong), dom: this.icon("B", "strong") },
{ command: toggleMark(schema.marks.em), dom: this.icon("i", "em") },
{ command: toggleMark(schema.marks.underline), dom: this.icon("U", "underline") },
{ command: toggleMark(schema.marks.strikethrough), dom: this.icon("S", "strikethrough") },
{ command: toggleMark(schema.marks.superscript), dom: this.icon("s", "superscript") },
{ command: toggleMark(schema.marks.subscript), dom: this.icon("s", "subscript") },
{ command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") }
]
items.forEach(({ dom }) => this.tooltip.appendChild(dom));
//pointer down handler to activate button effects
this.tooltip.addEventListener("pointerdown", e => {
e.preventDefault();
view.focus();
items.forEach(({ command, dom }) => {
if (dom.contains(e.srcElement)) {
command(view.state, view.dispatch, view)
}
})
})
this.update(view, undefined);
}
// Helper function to create menu icons
icon(text: string, name: string) {
let span = document.createElement("span");
span.className = "menuicon " + name;
span.title = name;
span.textContent = text;
return span;
}
blockActive(view: EditorView) {
const { $from, to } = view.state.selection
return to <= $from.end() && $from.parent.hasMarkup(schema.nodes.bulletList);
}
//this doesn't currently work but hopefully will soon
unorderedListIcon(): HTMLSpanElement {
let span = document.createElement("span");
let icon = document.createElement("FontAwesomeIcon");
icon.className = "menuicon fa fa-smile-o";
span.appendChild(icon);
return span;
}
// Create an icon for a heading at the given level
heading(level: number) {
return {
command: setBlockType(schema.nodes.heading, { level }),
dom: this.icon("H" + level, "heading")
}
}
//updates the tooltip menu when the selection changes
update(view: EditorView, lastState: EditorState | undefined) {
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
//check this - tranform
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"
let width = Math.abs(start.left - end.left) / 2;
let mid = Math.min(start.left, end.left) + width;
//THIS WIDTH IS 15 * NUMBER OF ICONS + 15
this.tooltip.style.width = 120 + "px";
this.tooltip.style.bottom = (box.bottom - start.top) + "px";
}
destroy() { this.tooltip.remove() }
}
|
