1 files changed, 46 insertions, 15 deletions

diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 913472aa0..82e9d1bac 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -1,23 +1,29 @@
 import { action, IReactionDisposer, reaction } from "mobx";
-import { baseKeymap } from "prosemirror-commands";
+import { Dropdown, DropdownSubmenu, MenuItem } from "prosemirror-menu";
+import { baseKeymap, lift } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
 import { EditorState, Transaction, NodeSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { schema } from "./RichTextSchema";
-import { Schema, NodeType } from "prosemirror-model"
-import React = require("react")
+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 } from 'prosemirror-schema-list'
-import { faListUl } from '@fortawesome/free-solid-svg-icons';
+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"
 
 //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc.
 export class TooltipTextMenu {
 
     private tooltip: HTMLElement;
+    private num_icons = 0;
 
     constructor(view: EditorView) {
         this.tooltip = document.createElement("div");
@@ -37,20 +43,29 @@ export class TooltipTextMenu {
             { 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") },
+            { command: toggleMark(schema.marks.timesNewRoman), dom: this.icon("x", "TNR") },
+            { command: lift, dom: this.icon("<", "lift") },
         ]
-        items.forEach(({ dom }) => this.tooltip.appendChild(dom));
+        //add menu items
+        items.forEach(({ dom, command }) => {
+            this.tooltip.appendChild(dom);
+        });
+
+        //add dropdowns
 
         //pointer down handler to activate button effects
         this.tooltip.addEventListener("pointerdown", e => {
             e.preventDefault();
             view.focus();
+            //update view of icons
+            this.num_icons = 0;
             items.forEach(({ command, dom }) => {
-                if (dom.contains(e.target as Node)) {
+                if (e.srcElement && dom.contains(e.srcElement as Node)) {
+                    //let active = command(view.state, view.dispatch, view);
                     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"
+                    //dom.style.display = active ? "" : "none";
                 }
             })
         })
@@ -88,9 +103,24 @@ export class TooltipTextMenu {
     //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);
+        //let icon = document.createElement("FontAwesomeIcon");
+        //icon.className = "menuicon";
+        //icon.style.color = "white";
+        //span.appendChild(<i style={{ color: "white" }} icon="list-ul" size="lg" />);
+        let i = document.createElement("i");
+        i.className = "fa falist-ul";
+        span.appendChild(i);
+        //span.appendChild(icon);
+        //return liftItem.spec.icon.sty
+
+        //let sym = document.createElementNS(SVG, "symbol")
+        // sym.id = name
+        //sym.style.color = "white";
+        //width then height
+        //sym.setAttribute("viewBox", "0 0 " + 1024 + " " + 1024);
+        //let path = sym.appendChild(document.createElementNS(SVG, "path"));
+        //path.setAttribute("d", "M219 310v329q0 7-5 12t-12 5q-8 0-13-5l-164-164q-5-5-5-13t5-13l164-164q5-5 13-5 7 0 12 5t5 12zM1024 749v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12zM1024 530v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 310v109q0 7-5 12t-12 5h-621q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h621q7 0 12 5t5 12zM1024 91v109q0 7-5 12t-12 5h-987q-7 0-12-5t-5-12v-109q0-7 5-12t12-5h987q7 0 12 5t5 12z");
+        //span.appendChild(sym);
         return span;
     }
 
@@ -125,13 +155,14 @@ export class TooltipTextMenu {
         // 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 width = Math.abs(start.left - end.left) / 2;
+        let width = 8 * 16 + 15;
         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.width = width + "px";
         this.tooltip.style.bottom = (box.bottom - start.top) + "px";
     }
 
     destroy() { this.tooltip.remove() }
-}
\ No newline at end of file
+}