richtexteditor menuicon styling

3 files changed, 153 insertions, 273 deletions

diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
index 6bafdbbfd..11c937471 100644
--- a/src/client/util/TooltipTextMenu.scss
+++ b/src/client/util/TooltipTextMenu.scss
@@ -55,12 +55,6 @@
     }
 }
 
-// .ProseMirror-menu-submenu {
-//     display: none;
-//     min-width: 4em;
-//     left: 100%;
-//     top: -3px;
-// }
 
 .ProseMirror-menu-submenu-label:after {
     content: "";
@@ -72,34 +66,6 @@
     right: 4px;
     top: calc(50% - 4px);
 }
-
-
-  
-//   .ProseMirror-menu-active {
-//     background: #eee;
-//     border-radius: 4px;
-//   }
-  
-//   .ProseMirror-menu-disabled {
-//     opacity: .3;
-//   }
-  
-  
-// .ProseMirror-menubar {
-//     border-top-left-radius: inherit;
-//     border-top-right-radius: inherit;
-//     position: relative;
-//     min-height: 1em;
-//     color: white;
-//     padding: 10px 10px;
-//     top: 0; left: 0; right: 0;
-//     border-bottom: 1px solid silver;
-//     background:$dark-color;
-//     z-index: 10;
-//     -moz-box-sizing: border-box;
-//     box-sizing: border-box;
-//     overflow: visible;
-// }
   
   .ProseMirror-icon {
     display: inline-block;
@@ -121,74 +87,6 @@
         vertical-align: text-top;
       }  
   }
-  
-//   .ProseMirror ul, .ProseMirror ol {
-//     padding-left: 30px;
-//   }
-  
-//   .ProseMirror blockquote {
-//     padding-left: 1em;
-//     border-left: 3px solid #eee;
-//     margin-left: 0; margin-right: 0;
-//   }
-  
-//   .ProseMirror-example-setup-style img {
-//     cursor: default;
-//   }
-  
-//   .ProseMirror-prompt {
-//     background: white;
-//     padding: 5px 10px 5px 15px;
-//     border: 1px solid silver;
-//     position: fixed;
-//     border-radius: 3px;
-//     z-index: 11;
-//     box-shadow: -.5px 2px 5px white(255, 255, 255, 0.2);
-//   }
-  
-//   .ProseMirror-prompt h5 {
-//     margin: 0;
-//     font-weight: normal;
-//     font-size: 100%;
-//     color: #444;
-//   }
-  
-//   .ProseMirror-prompt input[type="text"],
-//   .ProseMirror-prompt textarea {
-//     background: white;
-//     border: none;
-//     outline: none;
-//   }
-  
-//   .ProseMirror-prompt input[type="text"] {
-//     padding: 0 4px;
-//   }
-  
-//   .ProseMirror-prompt-close {
-//     position: absolute;
-//     left: 2px; top: 1px;
-//     color: #666;
-//     border: none; background: transparent; padding: 0;
-//   }
-  
-//   .ProseMirror-prompt-close:after {
-//     content: "✕";
-//     font-size: 12px;
-//   }
-  
-//   .ProseMirror-invalid {
-//     background: #ffc;
-//     border: 1px solid #cc7;
-//     border-radius: 4px;
-//     padding: 5px 10px;
-//     position: absolute;
-//     min-width: 10em;
-//   }
-  
-//   .ProseMirror-prompt-buttons {
-//     margin-top: 5px;
-//     display: none;
-//   }
 
 .wrapper {
     position: absolute;
@@ -224,36 +122,6 @@
     }
 }
 
-// .tooltipExtras {
-//     position: absolute;
-//     z-index: 20000;
-//     background: #121721;
-//     border: 1px solid silver;
-//     border-radius: 15px;
-//     //height: 60px;
-//     //padding: 2px 10px;
-//     //margin-top: 100px;
-//     //-webkit-transform: translateX(-50%);
-//     //transform: translateX(-50%);
-//     transform: translateY(-115px);
-//     pointer-events: all;
-//     height: 25px;
-//     width:fit-content;
-//     .ProseMirror-example-setup-style hr {
-//       padding: 2px 10px;
-//       border: none;
-//       margin: 1em 0;
-//     }
-    
-//     .ProseMirror-example-setup-style hr:after {
-//       content: "";
-//       display: block;
-//       height: 1px;
-//       background-color: silver;
-//       line-height: 2px;
-//     }
-// }
-
 #link-drag {
     background-color: #323232;
 }
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx
index 6070d2ef4..d0bb753ba 100644
--- a/src/client/util/TooltipTextMenu.tsx
+++ b/src/client/util/TooltipTextMenu.tsx
@@ -154,10 +154,10 @@ export class TooltipTextMenu {
 
         // link menu
         this.updateLinkMenu();
-        let dropdown = await this.createLinkDropdown();
-        let newLinkDropdowndom = dropdown.render(this.view).dom;
-        this._linkDropdownDom && this.tooltip.replaceChild(newLinkDropdowndom, this._linkDropdownDom);
-        this._linkDropdownDom = newLinkDropdowndom;
+        // let dropdown = await this.createLinkDropdown();
+        // let newLinkDropdowndom = dropdown.render(this.view).dom;
+        // this._linkDropdownDom && this.tooltip.replaceChild(newLinkDropdowndom, this._linkDropdownDom);
+        // this._linkDropdownDom = newLinkDropdowndom;
 
         // list of font styles
         this.initFontStyles();
@@ -302,13 +302,24 @@ export class TooltipTextMenu {
         if (!this.linkEditor || !this.linkText) {
             this.linkEditor = document.createElement("div");
             this.linkEditor.className = "ProseMirror-icon menuicon";
-            this.linkDrag = document.createElement("img");
-            this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png";
-            this.linkDrag.style.width = "13px";
-            this.linkDrag.style.height = "13px";
-            this.linkDrag.title = "Drag to create link";
-            this.linkDrag.id = "link-drag";
-            this.linkDrag.onpointerdown = (e: PointerEvent) => {
+            this.linkEditor.style.color = "black";
+            this.linkText = document.createElement("div");
+            this.linkText.style.cssFloat = "left";
+            this.linkText.style.marginRight = "5px";
+            this.linkText.style.marginLeft = "5px";
+            this.linkText.setAttribute("contenteditable", "true");
+            this.linkText.style.whiteSpace = "nowrap";
+            this.linkText.style.width = "150px";
+            this.linkText.style.overflow = "hidden";
+            this.linkText.style.color = "white";
+            this.linkText.onpointerdown = (e: PointerEvent) => { e.stopPropagation(); };
+            let linkBtn = document.createElement("div");
+            linkBtn.textContent = ">>";
+            linkBtn.style.width = "10px";
+            linkBtn.style.height = "10px";
+            linkBtn.style.color = "white";
+            linkBtn.style.cssFloat = "left";
+            linkBtn.onpointerdown = (e: PointerEvent) => {
                 let node = this.view.state.selection.$from.nodeAfter;
                 let link = node && node.marks.find(m => m.type.name === "link");
                 if (link) {
@@ -329,136 +340,137 @@ export class TooltipTextMenu {
                     e.preventDefault();
                 }
             };
+            this.linkDrag = document.createElement("img");
+            this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png";
+            this.linkDrag.style.width = "15px";
+            this.linkDrag.style.height = "15px";
+            this.linkDrag.title = "Drag to create link";
+            this.linkDrag.style.color = "black";
+            this.linkDrag.style.background = "black";
+            this.linkDrag.style.cssFloat = "left";
+            this.linkDrag.onpointerdown = (e: PointerEvent) => {
+                if (!this.editorProps) return;
+                let dragData = new DragManager.LinkDragData(this.editorProps.Document);
+                dragData.dontClearTextBox = true;
+                // hack to get source context -sy
+                let docView = DocumentManager.Instance.getDocumentView(this.editorProps.Document);
+                e.stopPropagation();
+                let ctrlKey = e.ctrlKey;
+                DragManager.StartLinkDrag(this.linkDrag!, dragData, e.clientX, e.clientY,
+                    {
+                        handlers: {
+                            dragComplete: action(() => {
+                                if (dragData.linkDocument) {
+                                    let linkDoc = dragData.linkDocument;
+                                    let proto = Doc.GetProto(linkDoc);
+                                    if (proto && docView) {
+                                        proto.sourceContext = docView.props.ContainingCollectionDoc;
+                                    }
+                                    let text = this.makeLink(linkDoc, ctrlKey ? "onRight" : "inTab");
+                                    if (linkDoc instanceof Doc && linkDoc.anchor2 instanceof Doc) {
+                                        proto.title = text === "" ? proto.title : text + " to " + linkDoc.anchor2.title; // TODODO open to more descriptive descriptions of following in text link
+                                    }
+                                }
+                            }),
+                        },
+                        hideSource: false
+                    });
+                e.stopPropagation();
+                e.preventDefault();
+            };
             this.linkEditor.appendChild(this.linkDrag);
             this.tooltip.appendChild(this.linkEditor);
         }
 
-        // let node = this.view.state.selection.$from.nodeAfter;
-        // let link = node && node.marks.find(m => m.type.name === "link");
-        // this.linkText.textContent = link ? link.attrs.href : "-empty-";
-
-        // this.linkText.onkeydown = (e: KeyboardEvent) => {
-        //     if (e.key === "Enter") {
-        //         // this.makeLink(this.linkText!.textContent!);
-        //         e.stopPropagation();
-        //         e.preventDefault();
-        //     }
-        // };
-        // // this.tooltip.appendChild(this.linkEditor);
-    }
-
-    async getTextLinkTargetTitle() {
         let node = this.view.state.selection.$from.nodeAfter;
         let link = node && node.marks.find(m => m.type.name === "link");
-        if (link) {
-            let href = link.attrs.href;
-            if (href) {
-                if (href.indexOf(Utils.prepend("/doc/")) === 0) {
-                    const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
-                    if (linkclicked) {
-                        let linkDoc = await DocServer.GetRefField(linkclicked);
-                        if (linkDoc instanceof Doc) {
-                            let anchor1 = await Cast(linkDoc.anchor1, Doc);
-                            let anchor2 = await Cast(linkDoc.anchor2, Doc);
-                            let currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document;
-                            if (currentDoc && anchor1 && anchor2) {
-                                if (Doc.AreProtosEqual(currentDoc, anchor1)) return StrCast(anchor2.title);
-                                if (Doc.AreProtosEqual(currentDoc, anchor2)) return StrCast(anchor2.title);
-                            }
-                        }
-                    }
-                } else {
-                    return href;
-                }
-            }
-        }
-    }
-
-    async createLinkDropdown() {
-        let targetTitle = await this.getTextLinkTargetTitle();
-        let input = document.createElement("input");
+        this.linkText.textContent = link ? link.attrs.href : "-empty-";
 
-        // menu item for input for hyperlink url 
-        // TODO: integrate search to allow users to search for a doc to link to
-        let linkInfo = new MenuItem({
-            title: "",
-            execEvent: "",
-            class: "button-setting-disabled",
-            css: "",
-            render() {
-                let p = document.createElement("p");
-                p.textContent = "Linked to:";
-
-                input.type = "text";
-                input.placeholder = "Enter URL";
-                if (targetTitle) input.value = targetTitle;
-                input.onclick = (e: MouseEvent) => {
-                    input.select();
-                    input.focus();
-                };
-
-                let div = document.createElement("div");
-                div.appendChild(p);
-                div.appendChild(input);
-                return div;
-            },
-            enable() { return false; },
-            run(p1, p2, p3, event) {
-                event.stopPropagation();
-            }
-        });
-
-        // menu item to update/apply the hyperlink to the selected text
-        let linkApply = new MenuItem({
-            title: "",
-            execEvent: "",
-            class: "",
-            css: "",
-            render() {
-                let button = document.createElement("button");
-                button.className = "link-url-button";
-                button.textContent = "Apply hyperlink";
-                return button;
-            },
-            enable() { return false; },
-            run: (state, dispatch, view, event) => {
-                event.stopPropagation();
-                this.makeLink(input.value, "onRight");
-            }
-        });
-
-        // menu item to remove the link
-        // TODO: allow this to be undoable
-        let self = this;
-        let deleteLink = new MenuItem({
-            title: "Delete link",
-            execEvent: "",
-            class: "separated-button",
-            css: "",
-            render() {
-                let button = document.createElement("button");
-                button.textContent = "Remove link";
-
-                let wrapper = document.createElement("div");
-                wrapper.appendChild(button);
-                return wrapper;
-            },
-            enable() { return true; },
-            async run() {
-                self.deleteLink();
-                // update link dropdown
-                let dropdown = await self.createLinkDropdown();
-                let newLinkDropdowndom = dropdown.render(self.view).dom;
-                self._linkDropdownDom && self.tooltip.replaceChild(newLinkDropdowndom, self._linkDropdownDom);
-                self._linkDropdownDom = newLinkDropdowndom;
+        this.linkText.onkeydown = (e: KeyboardEvent) => {
+            if (e.key === "Enter") {
+                // this.makeLink(this.linkText!.textContent!);
+                e.stopPropagation();
+                e.preventDefault();
             }
-        });
+        };
+        // this.tooltip.appendChild(this.linkEditor);
+    }
 
+    // updateLinkMenu() {
+    //     if (!this.linkEditor || !this.linkText) {
+    //         this.linkEditor = document.createElement("div");
+    //         this.linkEditor.className = "ProseMirror-icon menuicon";
+    //         this.linkDrag = document.createElement("img");
+    //         this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png";
+    //         this.linkDrag.style.width = "13px";
+    //         this.linkDrag.style.height = "13px";
+    //         this.linkDrag.title = "Drag to create link";
+    //         this.linkDrag.id = "link-drag";
+    //         this.linkDrag.onpointerdown = (e: PointerEvent) => {
+    //             let node = this.view.state.selection.$from.nodeAfter;
+    //             let link = node && node.marks.find(m => m.type.name === "link");
+    //             if (link) {
+    //                 let href: string = link.attrs.href;
+    //                 if (href.indexOf(Utils.prepend("/doc/")) === 0) {
+    //                     let docid = href.replace(Utils.prepend("/doc/"), "");
+    //                     DocServer.GetRefField(docid).then(action((f: Opt<Field>) => {
+    //                         if (f instanceof Doc) {
+    //                             if (DocumentManager.Instance.getDocumentView(f)) {
+    //                                 DocumentManager.Instance.getDocumentView(f)!.props.focus(f, false);
+    //                             }
+    //                             else this.editorProps && this.editorProps.addDocTab(f, undefined, "onRight");
+    //                         }
+    //                     }));
+    //                 }
+    //                 // TODO This should have an else to handle external links
+    //                 e.stopPropagation();
+    //                 e.preventDefault();
+    //             }
+    //         };
+    //         this.linkEditor.appendChild(this.linkDrag);
+    //         this.tooltip.appendChild(this.linkEditor);
+    //     }
 
-        let linkDropdown = new Dropdown(targetTitle ? [linkInfo, linkApply, deleteLink] : [linkInfo, linkApply], { class: "buttonSettings-dropdown" }) as MenuItem;
-        return linkDropdown;
-    }
+    //     // let node = this.view.state.selection.$from.nodeAfter;
+    //     // let link = node && node.marks.find(m => m.type.name === "link");
+    //     // this.linkText.textContent = link ? link.attrs.href : "-empty-";
+
+    //     // this.linkText.onkeydown = (e: KeyboardEvent) => {
+    //     //     if (e.key === "Enter") {
+    //     //         // this.makeLink(this.linkText!.textContent!);
+    //     //         e.stopPropagation();
+    //     //         e.preventDefault();
+    //     //     }
+    //     // };
+    //     // // this.tooltip.appendChild(this.linkEditor);
+    // }
 
+    // async getTextLinkTargetTitle() {
+    //     let node = this.view.state.selection.$from.nodeAfter;
+    //     let link = node && node.marks.find(m => m.type.name === "link");
+    //     if (link) {
+    //         let href = link.attrs.href;
+    //         if (href) {
+    //             if (href.indexOf(Utils.prepend("/doc/")) === 0) {
+    //                 const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
+    //                 if (linkclicked) {
+    //                     let linkDoc = await DocServer.GetRefField(linkclicked);
+    //                     if (linkDoc instanceof Doc) {
+    //                         let anchor1 = await Cast(linkDoc.anchor1, Doc);
+    //                         let anchor2 = await Cast(linkDoc.anchor2, Doc);
+    //                         let currentDoc = SelectionManager.SelectedDocuments().length && SelectionManager.SelectedDocuments()[0].props.Document;
+    //                         if (currentDoc && anchor1 && anchor2) {
+    //                             if (Doc.AreProtosEqual(currentDoc, anchor1)) return StrCast(anchor2.title);
+    //                             if (Doc.AreProtosEqual(currentDoc, anchor2)) return StrCast(anchor2.title);
+    //                         }
+    //                     }
+    //                 }
+    //             } else {
+    //                 return href;
+    //             }
+    //         }
+    //     }
+    // }
 
     dragElement(elmnt: HTMLElement) {
         var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
diff --git a/src/client/views/nodes/FormattedTextBox.scss b/src/client/views/nodes/FormattedTextBox.scss
index 29e8b14a8..f92ccf9f5 100644
--- a/src/client/views/nodes/FormattedTextBox.scss
+++ b/src/client/views/nodes/FormattedTextBox.scss
@@ -46,17 +46,17 @@
     height: 100%;
 }
 
-.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;
-}
+// .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 {