Merge branch 'master' of github-tsch-brown:browngraphicslab/Dash-Web into propsRefactor

1 files changed, 113 insertions, 115 deletions

diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 2a613ba8b..913472aa0 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -11,129 +11,127 @@ 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';
+import { faListUl } from '@fortawesome/free-solid-svg-icons';
 
 
 //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
 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") },
-      //this doesn't work currently - look into notion of active block
-      { 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)) {
-          let active = command(view.state, view.dispatch, view);
-          //uncomment this if we want the bullet button to disappear if current selection is bulleted
-          // dom.style.display = active ? "" : "none"
+    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") },
+            //this doesn't work currently - look into notion of active block
+            { 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.target as Node)) {
+                    let active = command(view.state, view.dispatch, view);
+                    //uncomment this if we want the bullet button to disappear if current selection is bulleted
+                    // dom.style.display = active ? "" : "none"
+                }
+            })
+        })
+
+        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;
+    }
+
+    //adapted this method - use it to check if block has a tag (ie bulleting)
+    blockActive(type: NodeType<Schema<string, string>>, state: EditorState) {
+        let attrs = {};
+
+        if (state.selection instanceof NodeSelection) {
+            const sel: NodeSelection = state.selection;
+            let $from = sel.$from;
+            let to = sel.to;
+            let node = sel.node;
+
+            if (node) {
+                return node.hasMarkup(type, attrs);
+            }
+
+            return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
         }
-      })
-    })
-
-    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;
-  }
-
-  //adapted this method - use it to check if block has a tag (ie bulleting)
-  blockActive(type: NodeType<Schema<string, string>>, state: EditorState) {
-    let attrs = {};
-
-    if (state.selection instanceof NodeSelection) {
-      const sel: NodeSelection = state.selection;
-      let $from = sel.$from;
-      let to = sel.to;
-      let node = sel.node;
-
-      if (node) {
-        return node.hasMarkup(type, attrs);
-      }
-
-      return to <= $from.end() && $from.parent.hasMarkup(type, attrs);
     }
-  }
-
-  //this doesn't currently work but could be used to use icons for buttons
-  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")
+
+    //this doesn't currently work but could be used to use icons for buttons
+    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
+
+    //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
+        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 = 122 + "px";
+        this.tooltip.style.bottom = (box.bottom - start.top) + "px";
     }
 
-    // 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)
-    // 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 = 122 + "px";
-    this.tooltip.style.bottom = (box.bottom - start.top) + "px";
-  }
-
-  destroy() { this.tooltip.remove() }
+    destroy() { this.tooltip.remove() }
 }
\ No newline at end of file