aboutsummaryrefslogtreecommitdiff
path: root/src/client/util/TooltipTextMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util/TooltipTextMenu.tsx')
-rw-r--r--src/client/util/TooltipTextMenu.tsx40
1 files changed, 19 insertions, 21 deletions
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 82e9d1bac..48f835a0f 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -10,14 +10,12 @@ import { Schema, NodeType } from "prosemirror-model";
import React = require("react");
import "./TooltipTextMenu.scss";
const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands");
-import { library } from '@fortawesome/fontawesome-svg-core'
-import { wrapInList, bulletList, liftListItem, listItem } from 'prosemirror-schema-list'
-import {
- faListUl,
-} from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { wrapInList, bulletList, liftListItem, listItem } from 'prosemirror-schema-list';
+import { faListUl } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-const SVG = "http://www.w3.org/2000/svg"
+const SVG = "http://www.w3.org/2000/svg";
//appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
export class TooltipTextMenu {
@@ -46,7 +44,7 @@ export class TooltipTextMenu {
{ command: wrapInList(schema.nodes.bullet_list), dom: this.icon(":", "bullets") },
{ command: toggleMark(schema.marks.timesNewRoman), dom: this.icon("x", "TNR") },
{ command: lift, dom: this.icon("<", "lift") },
- ]
+ ];
//add menu items
items.forEach(({ dom, command }) => {
this.tooltip.appendChild(dom);
@@ -67,8 +65,8 @@ export class TooltipTextMenu {
//uncomment this if we want the bullet button to disappear if current selection is bulleted
//dom.style.display = active ? "" : "none";
}
- })
- })
+ });
+ });
this.update(view, undefined);
}
@@ -129,32 +127,32 @@ export class TooltipTextMenu {
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
+ 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
+ lastState.selection.eq(state.selection)) return;
// Hide the tooltip if the selection is empty
if (state.selection.empty) {
- this.tooltip.style.display = "none"
- return
+ this.tooltip.style.display = "none";
+ return;
}
// Otherwise, reposition it and update its content
- this.tooltip.style.display = ""
- let { from, to } = state.selection
- let start = view.coordsAtPos(from), end = view.coordsAtPos(to)
+ this.tooltip.style.display = "";
+ let { from, to } = state.selection;
+ 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()
+ 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 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 width = 8 * 16 + 15;
let mid = Math.min(start.left, end.left) + width;
@@ -164,5 +162,5 @@ export class TooltipTextMenu {
this.tooltip.style.bottom = (box.bottom - start.top) + "px";
}
- destroy() { this.tooltip.remove() }
+ destroy() { this.tooltip.remove(); }
}