preliminary linking navigation

2 files changed, 55 insertions, 8 deletions

diff --git a/src/client/util/ProsemirrorCopy/prompt.js b/src/client/util/ProsemirrorCopy/prompt.js
index 35dd7b872..b9068195f 100644
--- a/src/client/util/ProsemirrorCopy/prompt.js
+++ b/src/client/util/ProsemirrorCopy/prompt.js
@@ -3,6 +3,9 @@ const prefix = "ProseMirror-prompt"
 export function openPrompt(options) {
     let wrapper = document.body.appendChild(document.createElement("div"))
     wrapper.className = prefix
+    wrapper.style.zIndex = 1000;
+    wrapper.style.width = 250;
+    wrapper.style.textAlign = "center";
 
     let mouseOutside = e => { if (!wrapper.contains(e.target)) close() }
     setTimeout(() => window.addEventListener("mousedown", mouseOutside), 50)
@@ -25,19 +28,24 @@ export function openPrompt(options) {
     cancelButton.addEventListener("click", close)
 
     let form = wrapper.appendChild(document.createElement("form"))
-    if (options.title) form.appendChild(document.createElement("h5")).textContent = options.title
+    let title = document.createElement("h5")
+    title.style.marginBottom = 15
+    title.style.marginTop = 10
+    if (options.title) form.appendChild(title).textContent = options.title
     domFields.forEach(field => {
         form.appendChild(document.createElement("div")).appendChild(field)
     })
-    let buttons = form.appendChild(document.createElement("div"))
-    buttons.className = prefix + "-buttons"
+    let b = document.createElement("div");
+    b.style.marginTop = 15;
+    let buttons = form.appendChild(b)
+    // buttons.className = prefix + "-buttons"
     buttons.appendChild(submitButton)
     buttons.appendChild(document.createTextNode(" "))
     buttons.appendChild(cancelButton)
 
     let box = wrapper.getBoundingClientRect()
-    wrapper.style.top = ((window.innerHeight - box.height) / 2) + "px"
-    wrapper.style.left = ((window.innerWidth - box.width) / 2) + "px"
+    wrapper.style.top = options.flyout_top + "px"
+    wrapper.style.left = options.flyout_left + "px"
 
     let submit = () => {
         let params = getValues(options.fields, domFields)
@@ -145,6 +153,9 @@ export class TextField extends Field {
         input.placeholder = this.options.label
         input.value = this.options.value || ""
         input.autocomplete = "off"
+        input.style.marginBottom = 4
+        input.style.border = "1px solid black"
+        input.style.padding = "4px 4px"
         return input
     }
 }
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index d81679ef3..c861083ce 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -6,18 +6,20 @@ import { keymap } from "prosemirror-keymap";
 import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import { schema } from "./RichTextSchema";
-import { Schema, NodeType, MarkType } from "prosemirror-model";
+import { Schema, NodeType, MarkType, Mark } 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,
+    faListUl, faGrinTongueSquint,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { FieldViewProps } from "../views/nodes/FieldView";
 import { throwStatement } from "babel-types";
+import { KeyStore } from "../../fields/KeyStore";
+import { NumberField } from "../../fields/NumberField";
 const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js");
 
 const SVG = "http://www.w3.org/2000/svg";
@@ -35,6 +37,7 @@ export class TooltipTextMenu {
     private fontSizeToNum: Map<MarkType, number>;
     private fontStylesToName: Map<MarkType, string>;
     private fontSizeIndicator: HTMLSpanElement = document.createElement("span");
+    private link: HTMLAnchorElement;
 
     constructor(view: EditorView, editorProps: FieldViewProps) {
         this.view = view;
@@ -96,6 +99,15 @@ export class TooltipTextMenu {
 
         this.addFontDropdowns();
 
+        let target = "https://www.google.com";
+
+        this.link = document.createElement("a");
+        this.link.href = target;
+        this.link.textContent = target;
+        this.link.target = "_blank";
+        this.link.style.color = "white";
+        this.tooltip.appendChild(this.link);
+
         this.update(view, undefined);
     }
 
@@ -207,7 +219,9 @@ export class TooltipTextMenu {
                     callback(attrs: any) {
                         toggleMark(markType, attrs)(view.state, view.dispatch);
                         view.focus();
-                    }
+                    },
+                    flyout_top: 0,
+                    flyout_left: 0
                 });
             }
         });
@@ -266,6 +280,20 @@ export class TooltipTextMenu {
         };
     }
 
+    getMarksInSelection(state: EditorState<any>, targets: MarkType<any>[]) {
+        let found: Mark<any>[] = [];
+        let { from, to } = state.selection as TextSelection;
+        state.doc.nodesBetween(from, to, (node) => {
+            let marks = node.marks;
+            if (marks) {
+                marks.forEach(m => {
+                    if (targets.includes(m.type)) found.push(m);
+                });
+            }
+        });
+        return found;
+    }
+
     //updates the tooltip menu when the selection changes
     update(view: EditorView, lastState: EditorState | undefined) {
         let state = view.state;
@@ -279,6 +307,14 @@ export class TooltipTextMenu {
             return;
         }
 
+        let linksInSelection = this.activeMarksOnSelection([schema.marks.link]);
+        if (linksInSelection.length > 0) {
+            let attributes = this.getMarksInSelection(this.view.state, [schema.marks.link])[0].attrs;
+            this.link.href = attributes.href;
+            this.link.textContent = attributes.title;
+            this.link.style.visibility = "visible"
+        } else this.link.style.visibility = "hidden"
+
         // Otherwise, reposition it and update its content
         this.tooltip.style.display = "";
         let { from, to } = state.selection;