aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/nodes/FormattedTextBoxComment.tsx
diff options
context:
space:
mode:
authorkimdahey <claire_kim1@brown.edu>2019-09-10 19:16:59 -0400
committerkimdahey <claire_kim1@brown.edu>2019-09-10 19:16:59 -0400
commit66d510b95c7e70049df6208dbe91ff4600058b27 (patch)
tree8cb061c2dc7b116c0ef4b8bf402c2928388260a3 /src/client/views/nodes/FormattedTextBoxComment.tsx
parent9b2562906bf3b87f18854dcaab9ad12b19dc3fce (diff)
parentec62b213439ab49134fa2dbbdf38a6d1ef5737cd (diff)
pulled from master
Diffstat (limited to 'src/client/views/nodes/FormattedTextBoxComment.tsx')
-rw-r--r--src/client/views/nodes/FormattedTextBoxComment.tsx104
1 files changed, 73 insertions, 31 deletions
diff --git a/src/client/views/nodes/FormattedTextBoxComment.tsx b/src/client/views/nodes/FormattedTextBoxComment.tsx
index 9123f8aed..2d2fff06d 100644
--- a/src/client/views/nodes/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/FormattedTextBoxComment.tsx
@@ -1,18 +1,25 @@
-import { Plugin, EditorState } from "prosemirror-state"
-import './FormattedTextBoxComment.scss'
+import { Plugin, EditorState } from "prosemirror-state";
+import './FormattedTextBoxComment.scss';
import { ResolvedPos, Mark } from "prosemirror-model";
import { EditorView } from "prosemirror-view";
import { Doc } from "../../../new_fields/Doc";
+import { schema } from "../../util/RichTextSchema";
+import { DocServer } from "../../DocServer";
+import { Utils } from "../../../Utils";
+import { StrCast } from "../../../new_fields/Types";
-export let selectionSizePlugin = new Plugin({
- view(editorView) { return new SelectionSizeTooltip(editorView); }
-})
+export let formattedTextBoxCommentPlugin = new Plugin({
+ view(editorView) { return new FormattedTextBoxComment(editorView); }
+});
export function findOtherUserMark(marks: Mark[]): Mark | undefined {
return marks.find(m => m.attrs.userid && m.attrs.userid !== Doc.CurrentUserEmail);
}
export function findUserMark(marks: Mark[]): Mark | undefined {
return marks.find(m => m.attrs.userid);
}
+export function findLinkMark(marks: Mark[]): Mark | undefined {
+ return marks.find(m => m.type === schema.marks.link);
+}
export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: Mark[]) => Mark | undefined) {
let before = 0;
let nbef = rpos.nodeBefore;
@@ -35,7 +42,7 @@ export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (mark
}
-export class SelectionSizeTooltip {
+export class FormattedTextBoxComment {
static tooltip: HTMLElement;
static tooltipText: HTMLElement;
static start: number;
@@ -44,39 +51,39 @@ export class SelectionSizeTooltip {
static opened: boolean;
static textBox: any;
constructor(view: any) {
- if (!SelectionSizeTooltip.tooltip) {
+ if (!FormattedTextBoxComment.tooltip) {
const root = document.getElementById("root");
let input = document.createElement("input");
input.type = "checkbox";
- SelectionSizeTooltip.tooltip = document.createElement("div");
- SelectionSizeTooltip.tooltipText = document.createElement("div");
- SelectionSizeTooltip.tooltip.appendChild(SelectionSizeTooltip.tooltipText);
- SelectionSizeTooltip.tooltip.className = "FormattedTextBox-tooltip";
- SelectionSizeTooltip.tooltip.style.pointerEvents = "all";
- SelectionSizeTooltip.tooltip.appendChild(input);
- SelectionSizeTooltip.tooltip.onpointerdown = (e: PointerEvent) => {
+ FormattedTextBoxComment.tooltip = document.createElement("div");
+ FormattedTextBoxComment.tooltipText = document.createElement("div");
+ FormattedTextBoxComment.tooltip.appendChild(FormattedTextBoxComment.tooltipText);
+ FormattedTextBoxComment.tooltip.className = "FormattedTextBox-tooltip";
+ FormattedTextBoxComment.tooltip.style.pointerEvents = "all";
+ FormattedTextBoxComment.tooltip.appendChild(input);
+ FormattedTextBoxComment.tooltip.onpointerdown = (e: PointerEvent) => {
let keep = e.target && (e.target as any).type === "checkbox";
- SelectionSizeTooltip.opened = keep || !SelectionSizeTooltip.opened;
- SelectionSizeTooltip.textBox.setAnnotation(
- SelectionSizeTooltip.start, SelectionSizeTooltip.end, SelectionSizeTooltip.mark,
- SelectionSizeTooltip.opened, keep);
+ FormattedTextBoxComment.opened = keep || !FormattedTextBoxComment.opened;
+ FormattedTextBoxComment.textBox && FormattedTextBoxComment.textBox.setAnnotation(
+ FormattedTextBoxComment.start, FormattedTextBoxComment.end, FormattedTextBoxComment.mark,
+ FormattedTextBoxComment.opened, keep);
};
- root && root.appendChild(SelectionSizeTooltip.tooltip);
+ root && root.appendChild(FormattedTextBoxComment.tooltip);
}
this.update(view, undefined);
}
public static Hide() {
- SelectionSizeTooltip.textBox = undefined;
- SelectionSizeTooltip.tooltip && (SelectionSizeTooltip.tooltip.style.display = "none");
+ FormattedTextBoxComment.textBox = undefined;
+ FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "none");
}
public static SetState(textBox: any, opened: boolean, start: number, end: number, mark: Mark) {
- SelectionSizeTooltip.textBox = textBox;
- SelectionSizeTooltip.start = start;
- SelectionSizeTooltip.end = end;
- SelectionSizeTooltip.mark = mark;
- SelectionSizeTooltip.opened = opened;
- SelectionSizeTooltip.textBox && SelectionSizeTooltip.tooltip && (SelectionSizeTooltip.tooltip.style.display = "");
+ FormattedTextBoxComment.textBox = textBox;
+ FormattedTextBoxComment.start = start;
+ FormattedTextBoxComment.end = end;
+ FormattedTextBoxComment.mark = mark;
+ FormattedTextBoxComment.opened = opened;
+ FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = "");
}
update(view: EditorView, lastState?: EditorState) {
@@ -85,13 +92,46 @@ export class SelectionSizeTooltip {
if (lastState && lastState.doc.eq(state.doc) &&
lastState.selection.eq(state.selection)) return;
+ let set = "none";
if (state.selection.$from) {
let nbef = findStartOfMark(state.selection.$from, view, findOtherUserMark);
let naft = findEndOfMark(state.selection.$from, view, findOtherUserMark);
+ const spos = state.selection.$from.pos - nbef;
+ const epos = state.selection.$from.pos + naft;
let child = state.selection.$from.nodeBefore;
let mark = child && findOtherUserMark(child.marks);
+ let noselection = view.state.selection.$from === view.state.selection.$to;
+ if (mark && child && (nbef || naft) && (!mark.attrs.opened || noselection)) {
+ FormattedTextBoxComment.SetState(this, mark.attrs.opened, spos, epos, mark);
+ }
+ if (mark && child && nbef && naft) {
+ FormattedTextBoxComment.tooltipText.textContent = mark.attrs.userid + " " + mark.attrs.modified;
+ // These are in screen coordinates
+ // let start = view.coordsAtPos(state.selection.from), end = view.coordsAtPos(state.selection.to);
+ let 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
+ let box = (document.getElementById("main-div") as any).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);
+ FormattedTextBoxComment.tooltip.style.left = (left - box.left) + "px";
+ FormattedTextBoxComment.tooltip.style.bottom = (box.bottom - start.top) + "px";
+ set = "";
+ }
+ }
+ if (set === "none" && state.selection.$from) {
+ FormattedTextBoxComment.textBox = undefined;
+ let nbef = findStartOfMark(state.selection.$from, view, findLinkMark);
+ let naft = findEndOfMark(state.selection.$from, view, findLinkMark);
+ let child = state.selection.$from.nodeBefore;
+ let mark = child && findLinkMark(child.marks);
if (mark && child && nbef && naft) {
- SelectionSizeTooltip.tooltipText.textContent = mark.attrs.userid + " " + mark.attrs.modified;
+ FormattedTextBoxComment.tooltipText.textContent = "link : " + (mark.attrs.title || mark.attrs.href);
+ if (mark.attrs.href.indexOf(Utils.prepend("/doc/")) === 0) {
+ let docTarget = mark.attrs.href.replace(Utils.prepend("/doc/"), "").split("?")[0];
+ docTarget && DocServer.GetRefField(docTarget).then(linkDoc =>
+ (linkDoc as Doc) && (FormattedTextBoxComment.tooltipText.textContent = "link :" + StrCast((linkDoc as Doc).title)));
+ }
// These are in screen coordinates
// let start = view.coordsAtPos(state.selection.from), end = view.coordsAtPos(state.selection.to);
let start = view.coordsAtPos(state.selection.from - nbef), end = view.coordsAtPos(state.selection.from - nbef);
@@ -100,11 +140,13 @@ export class SelectionSizeTooltip {
// 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);
- SelectionSizeTooltip.tooltip.style.left = (left - box.left) + "px";
- SelectionSizeTooltip.tooltip.style.bottom = (box.bottom - start.top) + "px";
+ FormattedTextBoxComment.tooltip.style.left = (left - box.left) + "px";
+ FormattedTextBoxComment.tooltip.style.bottom = (box.bottom - start.top) + "px";
+ set = "";
}
}
+ FormattedTextBoxComment.tooltip && (FormattedTextBoxComment.tooltip.style.display = set);
}
- destroy() { SelectionSizeTooltip.tooltip.style.display = "none" }
+ destroy() { FormattedTextBoxComment.tooltip.style.display = "none"; }
}