Merge pull request #44 from browngraphicslab/improveText

tooltip text editor

8 files changed, 459 insertions, 3 deletions

diff --git a/package-lock.json b/package-lock.json
index acb9d4099..2431af561 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -24,6 +24,21 @@
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.15.tgz",
       "integrity": "sha512-ATBRyKJw1d2ko+0DWN9+BXau0EK3I/Q6pPzPv3LhJD7r052YFAkAdfb1Bd7ZqhBsJrdse/S7jKxWUOZ61qBD4g=="
     },
+    "@fortawesome/fontawesome-free-solid": {
+      "version": "5.0.13",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free-solid/-/fontawesome-free-solid-5.0.13.tgz",
+      "integrity": "sha512-b+krVnqkdDt52Yfev0x0ZZgtxBQsLw00Zfa3uaVWIDzpNZVtrEXuxldUSUaN/ihgGhSNi8VpvDAdNPVgCKOSxw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.1.7"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.1.7",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.1.7.tgz",
+          "integrity": "sha512-ego8jRVSHfq/iq4KRZJKQeUAdi3ZjGNrqw4oPN3fNdvTBnLCSntwVCnc37bsAJP9UB8MhrTfPnZYxkv2vpS4pg=="
+        }
+      }
+    },
     "@fortawesome/fontawesome-svg-core": {
       "version": "1.2.15",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.15.tgz",
@@ -330,6 +345,16 @@
         "@types/prosemirror-model": "*"
       }
     },
+    "@types/prosemirror-schema-list": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/prosemirror-schema-list/-/prosemirror-schema-list-1.0.1.tgz",
+      "integrity": "sha512-+iUYq+pj2wVHSThj0MjNDzkkGwq8aDQ6j0UJK8a0cNCL8v44Ftcx1noGPtBIEUJgitH960VnfBNoTWfQoQZfRA==",
+      "requires": {
+        "@types/orderedmap": "*",
+        "@types/prosemirror-model": "*",
+        "@types/prosemirror-state": "*"
+      }
+    },
     "@types/prosemirror-state": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@types/prosemirror-state/-/prosemirror-state-1.2.1.tgz",
diff --git a/package.json b/package.json
index abde11de0..18d82b9b1 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "webpack-hot-middleware": "^2.24.3"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-free-solid": "^5.0.13",
     "@fortawesome/fontawesome-svg-core": "^1.2.15",
     "@fortawesome/free-solid-svg-icons": "^5.7.2",
     "@fortawesome/react-fontawesome": "^0.1.4",
@@ -55,6 +56,7 @@
     "@types/prosemirror-keymap": "^1.0.1",
     "@types/prosemirror-model": "^1.7.0",
     "@types/prosemirror-schema-basic": "^1.0.1",
+    "@types/prosemirror-schema-list": "^1.0.1",
     "@types/prosemirror-state": "^1.2.1",
     "@types/prosemirror-transform": "^1.1.0",
     "@types/prosemirror-view": "^1.3.0",
@@ -100,6 +102,7 @@
     "prosemirror-keymap": "^1.0.1",
     "prosemirror-model": "^1.7.0",
     "prosemirror-schema-basic": "^1.0.0",
+    "prosemirror-schema-list": "^1.0.2",
     "prosemirror-state": "^1.2.2",
     "prosemirror-transform": "^1.1.3",
     "prosemirror-view": "^1.7.1",
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
new file mode 100644
index 000000000..abf448c9f
--- /dev/null
+++ b/src/client/util/RichTextSchema.tsx
@@ -0,0 +1,223 @@
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Schema, NodeSpec, MarkSpec, DOMOutputSpecArray } from "prosemirror-model"
+import { joinUp, lift, setBlockType, toggleMark, wrapIn } from 'prosemirror-commands'
+import { redo, undo } from 'prosemirror-history'
+import { orderedList, bulletList, listItem } from 'prosemirror-schema-list'
+
+const pDOM: DOMOutputSpecArray = ["p", 0], blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0], hrDOM: DOMOutputSpecArray = ["hr"],
+  preDOM: DOMOutputSpecArray = ["pre", ["code", 0]], brDOM: DOMOutputSpecArray = ["br"], ulDOM: DOMOutputSpecArray = ["ul", 0]
+
+// :: Object
+// [Specs](#model.NodeSpec) for the nodes defined in this schema.
+export const nodes: { [index: string]: NodeSpec } = {
+  // :: NodeSpec The top level document node.
+  doc: {
+    content: "block+"
+  },
+
+  // :: NodeSpec A plain paragraph textblock. Represented in the DOM
+  // as a `<p>` element.
+  paragraph: {
+    content: "inline*",
+    group: "block",
+    parseDOM: [{ tag: "p" }],
+    toDOM() { return pDOM }
+  },
+
+  // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks.
+  blockquote: {
+    content: "block+",
+    group: "block",
+    defining: true,
+    parseDOM: [{ tag: "blockquote" }],
+    toDOM() { return blockquoteDOM }
+  },
+
+  // :: NodeSpec A horizontal rule (`<hr>`).
+  horizontal_rule: {
+    group: "block",
+    parseDOM: [{ tag: "hr" }],
+    toDOM() { return hrDOM }
+  },
+
+  // :: NodeSpec A heading textblock, with a `level` attribute that
+  // should hold the number 1 to 6. Parsed and serialized as `<h1>` to
+  // `<h6>` elements.
+  heading: {
+    attrs: { level: { default: 1 } },
+    content: "inline*",
+    group: "block",
+    defining: true,
+    parseDOM: [{ tag: "h1", attrs: { level: 1 } },
+    { tag: "h2", attrs: { level: 2 } },
+    { tag: "h3", attrs: { level: 3 } },
+    { tag: "h4", attrs: { level: 4 } },
+    { tag: "h5", attrs: { level: 5 } },
+    { tag: "h6", attrs: { level: 6 } }],
+    toDOM(node: any) { return ["h" + node.attrs.level, 0] }
+  },
+
+  // :: NodeSpec A code listing. Disallows marks or non-text inline
+  // nodes by default. Represented as a `<pre>` element with a
+  // `<code>` element inside of it.
+  code_block: {
+    content: "text*",
+    marks: "",
+    group: "block",
+    code: true,
+    defining: true,
+    parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
+    toDOM() { return preDOM }
+  },
+
+  // :: NodeSpec The text node.
+  text: {
+    group: "inline"
+  },
+
+  // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
+  // `alt`, and `href` attributes. The latter two default to the empty
+  // string.
+  image: {
+    inline: true,
+    attrs: {
+      src: {},
+      alt: { default: null },
+      title: { default: null }
+    },
+    group: "inline",
+    draggable: true,
+    parseDOM: [{
+      tag: "img[src]", getAttrs(dom: any) {
+        return {
+          src: dom.getAttribute("src"),
+          title: dom.getAttribute("title"),
+          alt: dom.getAttribute("alt")
+        }
+      }
+    }],
+    toDOM(node: any) { return ["img", node.attrs] }
+  },
+
+  // :: NodeSpec A hard line break, represented in the DOM as `<br>`.
+  hard_break: {
+    inline: true,
+    group: "inline",
+    selectable: false,
+    parseDOM: [{ tag: "br" }],
+    toDOM() { return brDOM }
+  },
+
+  ordered_list: {
+    ...orderedList,
+    content: 'list_item+',
+    group: 'block'
+  },
+  bullet_list: {
+    content: 'list_item+',
+    group: 'block',
+    parseDOM: [{ tag: "ul" }, { style: "list-style-type=disc;" }],
+    toDOM() { return ulDOM }
+  },
+  list_item: {
+    ...listItem,
+    content: 'paragraph block*'
+  }
+}
+
+const emDOM: DOMOutputSpecArray = ["em", 0];
+const strongDOM: DOMOutputSpecArray = ["strong", 0];
+const codeDOM: DOMOutputSpecArray = ["code", 0];
+const underlineDOM: DOMOutputSpecArray = ["underline", 0];
+
+// :: Object [Specs](#model.MarkSpec) for the marks in the schema.
+export const marks: { [index: string]: MarkSpec } = {
+  // :: MarkSpec A link. Has `href` and `title` attributes. `title`
+  // defaults to the empty string. Rendered and parsed as an `<a>`
+  // element.
+  link: {
+    attrs: {
+      href: {},
+      title: { default: null }
+    },
+    inclusive: false,
+    parseDOM: [{
+      tag: "a[href]", getAttrs(dom: any) {
+        return { href: dom.getAttribute("href"), title: dom.getAttribute("title") }
+      }
+    }],
+    toDOM(node: any) { return ["a", node.attrs, 0] }
+  },
+
+  // :: MarkSpec An emphasis mark. Rendered as an `<em>` element.
+  // Has parse rules that also match `<i>` and `font-style: italic`.
+  em: {
+    parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style=italic" }],
+    toDOM() { return emDOM }
+  },
+
+  // :: MarkSpec A strong mark. Rendered as `<strong>`, parse rules
+  // also match `<b>` and `font-weight: bold`.
+  strong: {
+    parseDOM: [{ tag: "strong" },
+    { tag: "b" },
+    { style: "font-weight" }],
+    toDOM() { return strongDOM }
+  },
+
+  underline: {
+    parseDOM: [
+      { tag: 'u' },
+      { style: 'text-decoration=underline' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration:underline'
+    }]
+  },
+
+  strikethrough: {
+    parseDOM: [
+      { tag: 'strike' },
+      { style: 'text-decoration=line-through' },
+      { style: 'text-decoration-line=line-through' }
+    ],
+    toDOM: () => ['span', {
+      style: 'text-decoration-line:line-through'
+    }]
+  },
+
+  subscript: {
+    excludes: 'superscript',
+    parseDOM: [
+      { tag: 'sub' },
+      { style: 'vertical-align=sub' }
+    ],
+    toDOM: () => ['sub']
+  },
+
+  superscript: {
+    excludes: 'subscript',
+    parseDOM: [
+      { tag: 'sup' },
+      { style: 'vertical-align=super' }
+    ],
+    toDOM: () => ['sup']
+  },
+
+
+  // :: MarkSpec Code font mark. Represented as a `<code>` element.
+  code: {
+    parseDOM: [{ tag: "code" }],
+    toDOM() { return codeDOM }
+  }
+}
+
+// :: Schema
+// This schema rougly corresponds to the document schema used by
+// [CommonMark](http://commonmark.org/), minus the list elements,
+// which are defined in the [`prosemirror-schema-list`](#schema-list)
+// module.
+//
+// To reuse elements from this schema, extend or read from its
+// `spec.nodes` and `spec.marks` [properties](#model.Schema.spec).
+export const schema = new Schema({ nodes, marks })
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
new file mode 100644
index 000000000..fa43f5326
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.scss
@@ -0,0 +1,54 @@
+
+.tooltipMenu {
+    position: absolute;
+    z-index: 20;
+    background: rgb(19, 18, 18);
+    border: 1px solid silver;
+    border-radius: 4px;
+    padding: 2px 10px;
+    margin-bottom: 7px;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.tooltipMenu: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;
+  }
+  .tooltipMenu: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: black;
+  }
+
+  .menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    //color: rgb(19, 18, 18);
+    color: white;
+    line-height: 1;
+    padding: 0px 2px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 10px;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
+  .underline {text-decoration: underline}
+  .superscript {vertical-align:super}
+  .subscript { vertical-align:sub }
+  .strikethrough {text-decoration-line:line-through}
\ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
new file mode 100644
index 000000000..3b87fe9de
--- /dev/null
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -0,0 +1,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() }
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentView.scss b/src/client/views/nodes/DocumentView.scss
index 8e2ebd690..ab913897b 100644
--- a/src/client/views/nodes/DocumentView.scss
+++ b/src/client/views/nodes/DocumentView.scss
@@ -1,7 +1,7 @@
 .documentView-node {
     position: absolute;
     background: #cdcdcd;
-    overflow: hidden;
+    //overflow: hidden;
     &.minimized {
         width: 30px;
         height: 30px;
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 21bd43b6e..cddbef6be 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -17,4 +17,18 @@
     overflow-x: hidden;
     color: initial;
     height: 100%;
-}
\ No newline at end of file
+}
+
+.menuicon {
+    display: inline-block;
+    border-right: 1px solid rgba(0, 0, 0, 0.2);
+    color: #888;
+    line-height: 1;
+    padding: 0 7px;
+    margin: 1px;
+    cursor: pointer;
+    text-align: center;
+    min-width: 1.4em;
+  }
+  .strong, .heading { font-weight: bold; }
+  .em { font-style: italic; }
\ No newline at end of file
diff --git a/src/client/views/nodes/FormattedTextBox.tsx b/src/client/views/nodes/FormattedTextBox.tsx
index 04eb2052d..a6cee9957 100644
--- a/src/client/views/nodes/FormattedTextBox.tsx
+++ b/src/client/views/nodes/FormattedTextBox.tsx
@@ -2,7 +2,7 @@ import { action, IReactionDisposer, reaction } from "mobx";
 import { baseKeymap } from "prosemirror-commands";
 import { history, redo, undo } from "prosemirror-history";
 import { keymap } from "prosemirror-keymap";
-import { schema } from "prosemirror-schema-basic";
+import { schema } from "../../util/RichTextSchema";
 import { EditorState, Transaction, } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { Opt, FieldWaiting } from "../../../fields/Field";
@@ -10,6 +10,9 @@ import "./FormattedTextBox.scss";
 import React = require("react")
 import { RichTextField } from "../../../fields/RichTextField";
 import { FieldViewProps, FieldView } from "./FieldView";
+import { Plugin } from 'prosemirror-state'
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { TooltipTextMenu } from "../../util/TooltipTextMenu"
 import { ContextMenu } from "../../views/ContextMenu";
 
 
@@ -61,6 +64,7 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
                 history(),
                 keymap({ "Mod-z": undo, "Mod-y": redo }),
                 keymap(baseKeymap),
+                this.tooltipMenuPlugin()
             ]
         };
 
@@ -139,6 +143,14 @@ export class FormattedTextBox extends React.Component<FieldViewProps> {
         e.stopPropagation();
     }
 
+    tooltipMenuPlugin() {
+        return new Plugin({
+            view(_editorView) {
+                return new TooltipTextMenu(_editorView)
+            }
+        })
+    }
+
     render() {
         return (<div className="formattedTextBox-cont"
             onPointerDown={this.onPointerDown}