fixes for removing individual overlapping textanchors in a textBox. Hopefully near final cleanup of linkDocPreview and FormattedTextComment

4 files changed, 58 insertions, 73 deletions

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index fece45e18..2434bee40 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -177,6 +177,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
             });
             if (allFoundLinkAnchors.length) {
                 this._editorView.dispatch(removeMarkWithAttrs(state.tr, 0, state.doc.nodeSize - 2, state.schema.marks.linkAnchor, { allAnchors: allFoundLinkAnchors }));
+
+                this.setupEditor(this.config, this.fieldKey);
             }
         }
     }
@@ -186,6 +188,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
         const state = this._editorView?.state;
         if (state && this._editorView) {
             this._editorView.dispatch(removeMarkWithAttrs(state.tr, state.selection.from, state.selection.to, state.schema.marks.link, { allAnchors }));
+            this.setupEditor(this.config, this.fieldKey);
         }
     }
 
@@ -1233,7 +1236,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
                 clipboardTextSerializer: this.clipboardTextSerializer,
                 handlePaste: this.handlePaste,
             });
-            // !Doc.UserDoc().noviceMode && applyDevTools.applyDevTools(this._editorView);
             const startupText = !rtfField && this._editorView && Field.toString(this.dataDoc[fieldKey] as Field);
             if (startupText) {
                 const { state: { tr }, dispatch } = this._editorView;
@@ -1376,6 +1378,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
     onFocused = (e: React.FocusEvent): void => {
         FormattedTextBox.FocusedBox = this;
         this.tryUpdateHeight();
+        //applyDevTools.applyDevTools(this._editorView);
 
         // see if we need to preserve the insertion point
         const prosediv = this.ProseRef?.children?.[0] as any;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index e4a1e0f1b..89df5e246 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -1,9 +1,7 @@
 import { Mark, ResolvedPos } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
-import { Doc, DocListCast } from "../../../../fields/Doc";
-import { Utils } from "../../../../Utils";
-import { DocServer } from "../../../DocServer";
+import { Doc } from "../../../../fields/Doc";
 import { LinkDocPreview } from "../LinkDocPreview";
 import { FormattedTextBox } from "./FormattedTextBox";
 import './FormattedTextBoxComment.scss';
@@ -37,54 +35,51 @@ export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (mark
 export class FormattedTextBoxComment {
     static tooltip: HTMLElement;
     static tooltipText: HTMLElement;
-    static start: number;
-    static end: number;
-    static mark: Mark;
+    static startUserMarkRegion: number;
+    static endUserMarkRegion: number;
+    static userMark: Mark;
     static textBox: FormattedTextBox | undefined;
 
     constructor(view: any) {
         if (!FormattedTextBoxComment.tooltip) {
-            FormattedTextBoxComment.tooltip = document.createElement("div");
-            FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip";
-            FormattedTextBoxComment.tooltip.style.display = "none";
-            FormattedTextBoxComment.tooltipText = document.createElement("div");
-            FormattedTextBoxComment.tooltipText.className = "FormattedTextBox-tooltipText";
-            FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText);
-            FormattedTextBoxComment.tooltip.onpointerdown = (e: PointerEvent) => {
-                const textBox = FormattedTextBoxComment.textBox;
-                false && FormattedTextBoxComment.start !== undefined && textBox?.adoptAnnotation(
-                    FormattedTextBoxComment.start, FormattedTextBoxComment.end, FormattedTextBoxComment.mark);
+            const tooltip = FormattedTextBoxComment.tooltip = document.createElement("div");
+            const tooltipText = FormattedTextBoxComment.tooltipText = document.createElement("div");
+            tooltip.className = "FormattedTextBox-tooltip";
+            tooltipText.className = "FormattedTextBox-tooltipText";
+            tooltip.style.display = "none";
+            tooltip.appendChild(tooltipText);
+            tooltip.onpointerdown = (e: PointerEvent) => {
+                const { textBox, startUserMarkRegion, endUserMarkRegion, userMark } = FormattedTextBoxComment;
+                false && startUserMarkRegion !== undefined && textBox?.adoptAnnotation(startUserMarkRegion, endUserMarkRegion, userMark);
                 e.stopPropagation();
                 e.preventDefault();
             };
-            document.getElementById("root")?.appendChild(FormattedTextBoxComment.tooltip);
+            document.getElementById("root")?.appendChild(tooltip);
         }
     }
     public static Hide() {
         FormattedTextBoxComment.textBox = undefined;
         FormattedTextBoxComment.tooltip.style.display = "none";
     }
-    public static SetState(textBox: any, start: number, end: number, mark: Mark) {
+    public static saveMarkRegion(textBox: any, start: number, end: number, mark: Mark) {
         FormattedTextBoxComment.textBox = textBox;
-        FormattedTextBoxComment.start = start;
-        FormattedTextBoxComment.end = end;
-        FormattedTextBoxComment.mark = mark;
+        FormattedTextBoxComment.startUserMarkRegion = start;
+        FormattedTextBoxComment.endUserMarkRegion = end;
+        FormattedTextBoxComment.userMark = mark;
         FormattedTextBoxComment.tooltip.style.display = "";
     }
 
-    static showCommentbox(set: string, view: EditorView, nbef: number) {
+    static showCommentbox(view: EditorView, nbef: number) {
         const state = view.state;
-        if (set !== "none") {
-            // These are in screen coordinates
-            const start = view.coordsAtPos(state.selection.from - nbef), end = view.coordsAtPos(state.selection.from - nbef);
-            // The box in which the tooltip is positioned, to use as base
-            const box = (document.getElementsByClassName("mainView-container") as any)[0].getBoundingClientRect();
-            // Find a center-ish x position from the selection endpoints (when crossing lines, end may be more to the left)
-            const left = Math.max((start.left + end.left) / 2, start.left + 3);
-            FormattedTextBoxComment.tooltip.style.left = (left - box.left) + "px";
-            FormattedTextBoxComment.tooltip.style.bottom = (box.bottom - start.top) + "px";
-        }
-        FormattedTextBoxComment.tooltip.style.display = set;
+        // These are in screen coordinates
+        const start = view.coordsAtPos(state.selection.from - nbef), end = view.coordsAtPos(state.selection.from - nbef);
+        // The box in which the tooltip is positioned, to use as base
+        const box = (document.getElementsByClassName("mainView-container") as any)[0].getBoundingClientRect();
+        // Find a center-ish x position from the selection endpoints (when crossing lines, end may be more to the left)
+        const left = Math.max((start.left + end.left) / 2, start.left + 3);
+        FormattedTextBoxComment.tooltip.style.left = (left - box.left) + "px";
+        FormattedTextBoxComment.tooltip.style.bottom = (box.bottom - start.top) + "px";
+        FormattedTextBoxComment.tooltip.style.display = "";
     }
 
     static update(view: EditorView, lastState?: EditorState, hrefs: string = "") {
@@ -96,7 +91,6 @@ export class FormattedTextBoxComment {
     static setupPreview(view: EditorView, textBox: FormattedTextBox, hrefs?: string[]) {
         const state = view.state;
         // this section checks to see if the insertion point is over text entered by a different user.  If so, it sets ths comment text to indicate the user and the modification date
-        var hide = true;
         if (state.selection.$from) {
             const nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark);
             const naft = findEndOfMark(state.selection.$from, view, findOtherUserMark);
@@ -105,43 +99,26 @@ export class FormattedTextBoxComment {
             state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any, pos: number, parent: any) => !child && node.marks.length && (child = node));
             const mark = child && findOtherUserMark(child.marks);
             if (mark && child && (nbef || naft) && (!mark.attrs.opened || noselection)) {
-                FormattedTextBoxComment.SetState(textBox, state.selection.$from.pos - nbef, state.selection.$from.pos + naft, mark);
+                FormattedTextBoxComment.saveMarkRegion(textBox, state.selection.$from.pos - nbef, state.selection.$from.pos + naft, mark);
             }
             if (mark && child && ((nbef && naft) || !noselection)) {
                 FormattedTextBoxComment.tooltipText.textContent = mark.attrs.userid + " on " + (new Date(mark.attrs.modified * 1000)).toLocaleString();
-                FormattedTextBoxComment.showCommentbox("", view, nbef);
-                hide = false;
-            }
+                FormattedTextBoxComment.showCommentbox(view, nbef);
+            } else FormattedTextBoxComment.Hide();
         }
+
         // this checks if the selection is a hyperlink.  If so, it displays the target doc's text for internal links, and the url of the target for external links. 
-        if (hide && state.selection.$from) {
+        if (state.selection.$from && hrefs) {
             const nbef = findStartOfMark(state.selection.$from, view, findLinkMark);
             const naft = findEndOfMark(state.selection.$from, view, findLinkMark) || nbef;
-            let child: any = null;
-            state.doc.nodesBetween(state.selection.from, state.selection.to, (node: any) => !child && node.marks.length && (child = node));
-            child = child || (nbef && state.selection.$from.nodeBefore);
-            const mark = child ? findLinkMark(child.marks) : undefined;
-            const href = (!mark?.attrs.docref || naft === nbef) && mark?.attrs.allAnchors.find((item: { href: string }) => item.href)?.href;
-            if ((href && child && nbef && naft && mark?.attrs.showPreview)) {
-                const showPreview = (link?: Doc) => {
-                    return LinkDocPreview.SetLinkInfo({
-                        docprops: textBox.props.docViewPath.lastElement().props,
-                        linkSrc: textBox.props.Document,
-                        linkDoc: link,
-                        location: ((pos) => [pos.left, pos.top + 25])(view.coordsAtPos(state.selection.from - nbef)),
-                        hrefs,
-                        showHeader: true
-                    });
-                }
-                const anchorDoc = href.indexOf(Utils.prepend("/doc/")) === 0 ? href.replace(Utils.prepend("/doc/"), "").split("?")[0] : undefined;
-                if (anchorDoc) {
-                    DocServer.GetRefField(anchorDoc).then(anchor => anchor instanceof Doc && showPreview(DocListCast(anchor.links)[0]));
-                } else if (hrefs?.length) {
-                    showPreview()
-                }
-            }
+            nbef && naft && LinkDocPreview.SetLinkInfo({
+                docProps: textBox.props,
+                linkSrc: textBox.rootDoc,
+                location: ((pos) => [pos.left, pos.top + 25])(view.coordsAtPos(state.selection.from - nbef)),
+                hrefs,
+                showHeader: true
+            });
         }
-        if (hide) FormattedTextBoxComment.Hide();
     }
 
     destroy() { }
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index aceba0387..655ee7e44 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -23,7 +23,6 @@ export const marks: { [index: string]: MarkSpec } = {
     linkAnchor: {
         attrs: {
             allAnchors: { default: [] as { href: string, title: string, anchorId: string }[] },
-            showPreview: { default: true },
             location: { default: null },
             title: { default: null },
             docref: { default: false } // flags whether the linked text comes from a document within Dash.  If so, an attribution label is appended after the text
@@ -32,8 +31,8 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [{
             tag: "a[href]", getAttrs(dom: any) {
                 return {
-                    allAnchors: [{ href: dom.getAttribute("shref"), title: dom.getAttribute("title"), anchorId: dom.getAttribute("class") }],
                     location: dom.getAttribute("location"),
+                    title: dom.getAttribute("title")
                 };
             }
         }],
@@ -47,7 +46,7 @@ export const marks: { [index: string]: MarkSpec } = {
                     href: node.attrs.allAnchors[0].href,
                 }, node.attrs.title], ["br"]] :
                 //node.attrs.allLinks.length === 1 ?
-                ["a", { ...node.attrs, class: anchorids, "data-targethrefs": targethrefs, title: node.attrs.title, href: node.attrs.allAnchors[0]?.href, style: `text-decoration: "underline"` }, 0];
+                ["a", { class: anchorids, "data-targethrefs": targethrefs, title: node.attrs.title, location: node.attrs.location, style: `text-decoration: underline` }, 0];
             // ["div", { class: "prosemirror-anchor" },
             //     ["span", { class: "prosemirror-linkBtn" },
             //         ["a", { ...node.attrs, class: linkids, "data-targetids": targetids, title: `${node.attrs.title}` }, 0],
diff --git a/src/client/views/nodes/formattedText/prosemirrorPatches.js b/src/client/views/nodes/formattedText/prosemirrorPatches.js
index 746c93868..5bc323a4d 100644
--- a/src/client/views/nodes/formattedText/prosemirrorPatches.js
+++ b/src/client/views/nodes/formattedText/prosemirrorPatches.js
@@ -143,17 +143,21 @@ function wrappingInputRule(regexp, nodeType, getAttrs, joinPredicate, customWith
 // :: ([Mark]) → ?Mark
 // Tests whether there is a mark of this type in the given set.
 function isInSetWithAttrs(mark, set, attrs) {
+    var markAllAnchors = attrs.allAnchors !== undefined ? Array.from(attrs.allAnchors.map(al => al.anchorId)) : [];
     for (var i = 0; i < set.length; i++) {
         if (set[i].type == mark) {
-            if (Array.from(Object.keys(attrs)).reduce((p, akey) => {
+            return Array.from(Object.keys(attrs)).reduce((p, akey) => {
                 if (p && JSON.stringify(set[i].attrs[akey]) === JSON.stringify(attrs[akey])) return true;
-                set[i].attrs.allLinks = Array.from(set[i].attrs.allLinks).filter(a => !Array.from(attrs.allLinks.map(al => al.targetId)).includes(a.targetId) || !Array.from(attrs.allLinks.map(al => al.linkId).includes(a.linkId)))
+                // bcz: hack to allow special case of anchors in Dash to be removed from a mark which has multiple
+                if (set[i].attrs.allAnchors !== undefined) {
+                    set[i].attrs.allAnchors = set[i].attrs.allAnchors.filter(a => !markAllAnchors.includes(a.anchorId));
+                    if (set[i].attrs.allAnchors.length) return undefined;
+                }
                 return false;
-            }, true)) {
-                return set[i];
-            }
+            }, true);
         }
     }
+    return undefined;
 };
 
 // :: (number, number, ?union<Mark, MarkType>) → this
@@ -170,7 +174,9 @@ function removeMarkWithAttrs(tr, from, to, mark, attrs) {
         step++;
         var toRemove = null;
         if (mark) {
-            if (isInSetWithAttrs(mark, node.marks, attrs)) { toRemove = [mark]; }
+            const inset = isInSetWithAttrs(mark, node.marks, attrs);
+            if (inset === true) { toRemove = [mark]; }
+            // if (inset === undefined) { console.log("lightened")  } // anchorids were removed from the mark, but the mark wasn't removed since there are still anchorsids left
         } else {
             toRemove = node.marks;
         }