diff options
author | Geireann Lindfield Roberts <60007097+geireann@users.noreply.github.com> | 2022-07-06 16:02:25 -0700 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-07-06 16:02:25 -0700 |
commit | a9f704fbd5676bb9a8adf4c4f7ea61bf9b3f7603 (patch) | |
tree | dbfeadbc48f25964fab8581e7c862bf0e734bcf0 /src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | |
parent | 85e290ee7a666412570f2bae43a9b62d35b425f2 (diff) | |
parent | 023b00927522279dfb87adbaeac6f312f3c6162a (diff) |
Merge pull request #95 from brown-dash/geireann-eslint-prettier
integrating eslint prettier
Diffstat (limited to 'src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx')
-rw-r--r-- | src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx | 107 |
1 files changed, 63 insertions, 44 deletions
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx index 3e673c0b2..bdf59863b 100644 --- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx +++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx @@ -1,18 +1,25 @@ -import { Mark, ResolvedPos } from "prosemirror-model"; -import { EditorState } from "prosemirror-state"; -import { EditorView } from "prosemirror-view"; -import { Doc } from "../../../../fields/Doc"; -import { DocServer } from "../../../DocServer"; -import { LinkDocPreview } from "../LinkDocPreview"; -import { FormattedTextBox } from "./FormattedTextBox"; +import { Mark, ResolvedPos } from 'prosemirror-model'; +import { EditorState } from 'prosemirror-state'; +import { EditorView } from 'prosemirror-view'; +import { Doc } from '../../../../fields/Doc'; +import { DocServer } from '../../../DocServer'; +import { LinkDocPreview } from '../LinkDocPreview'; +import { FormattedTextBox } from './FormattedTextBox'; import './FormattedTextBoxComment.scss'; -import { schema } from "./schema_rts"; +import { schema } from './schema_rts'; -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.autoLinkAnchor || m.type === schema.marks.linkAnchor); } -export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: Mark[]) => Mark | undefined) { - let before = 0, nbef = rpos.nodeBefore; +export function findOtherUserMark(marks: readonly Mark[]): Mark | undefined { + return marks.find(m => m.attrs.userid && m.attrs.userid !== Doc.CurrentUserEmail); +} +export function findUserMark(marks: readonly Mark[]): Mark | undefined { + return marks.find(m => m.attrs.userid); +} +export function findLinkMark(marks: readonly Mark[]): Mark | undefined { + return marks.find(m => m.type === schema.marks.autoLinkAnchor || m.type === schema.marks.linkAnchor); +} +export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: readonly Mark[]) => Mark | undefined) { + let before = 0, + nbef = rpos.nodeBefore; while (nbef && finder(nbef.marks)) { before += nbef.nodeSize; rpos = view.state.doc.resolve(rpos.pos - nbef.nodeSize); @@ -20,8 +27,9 @@ export function findStartOfMark(rpos: ResolvedPos, view: EditorView, finder: (ma } return before; } -export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: Mark[]) => Mark | undefined) { - let after = 0, naft = rpos.nodeAfter; +export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (marks: readonly Mark[]) => Mark | undefined) { + let after = 0, + naft = rpos.nodeAfter; while (naft && finder(naft.marks)) { after += naft.nodeSize; rpos = view.state.doc.resolve(rpos.pos + naft.nodeSize); @@ -32,7 +40,7 @@ export function findEndOfMark(rpos: ResolvedPos, view: EditorView, finder: (mark // this view appears when clicking on text that has a hyperlink which is configured to show a preview of its target. // this will also display metadata information about text when the view is configured to display things like other people who authored text. -// +// export class FormattedTextBoxComment { static tooltip: HTMLElement; static tooltipText: HTMLElement; @@ -43,11 +51,11 @@ export class FormattedTextBoxComment { constructor(view: any) { if (!FormattedTextBoxComment.tooltip) { - 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"; + 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; @@ -55,38 +63,47 @@ export class FormattedTextBoxComment { e.stopPropagation(); e.preventDefault(); }; - document.getElementById("root")?.appendChild(tooltip); + document.getElementById('root')?.appendChild(tooltip); } } public static Hide() { FormattedTextBoxComment.textBox = undefined; - FormattedTextBoxComment.tooltip.style.display = "none"; + FormattedTextBoxComment.tooltip.style.display = 'none'; } public static saveMarkRegion(textBox: any, start: number, end: number, mark: Mark) { FormattedTextBoxComment.textBox = textBox; FormattedTextBoxComment.startUserMarkRegion = start; FormattedTextBoxComment.endUserMarkRegion = end; FormattedTextBoxComment.userMark = mark; - FormattedTextBoxComment.tooltip.style.display = ""; + FormattedTextBoxComment.tooltip.style.display = ''; } static showCommentbox(view: EditorView, nbef: number) { const state = view.state; // These are in screen coordinates - const start = view.coordsAtPos(state.selection.from - nbef), end = view.coordsAtPos(state.selection.from - nbef); + 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(); + 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 = ""; + FormattedTextBoxComment.tooltip.style.left = left - box.left + 'px'; + FormattedTextBoxComment.tooltip.style.bottom = box.bottom - start.top + 'px'; + FormattedTextBoxComment.tooltip.style.display = ''; } - static update(textBox: FormattedTextBox, view: EditorView, lastState?: EditorState, hrefs: string = "", linkDoc: string = "") { + static update(textBox: FormattedTextBox, view: EditorView, lastState?: EditorState, hrefs: string = '', linkDoc: string = '') { FormattedTextBoxComment.textBox = textBox; - if ((hrefs || !lastState?.doc.eq(view.state.doc) || !lastState?.selection.eq(view.state.selection))) { - FormattedTextBoxComment.setupPreview(view, textBox, hrefs?.trim().split(" ").filter(h => h), linkDoc); + if (hrefs || !lastState?.doc.eq(view.state.doc) || !lastState?.selection.eq(view.state.selection)) { + FormattedTextBoxComment.setupPreview( + view, + textBox, + hrefs + ?.trim() + .split(' ') + .filter(h => h), + linkDoc + ); } } @@ -104,25 +121,27 @@ export class FormattedTextBoxComment { 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.tooltipText.textContent = mark.attrs.userid + ' on ' + new Date(mark.attrs.modified * 1000).toLocaleString(); 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. + // 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 (state.selection.$from && hrefs?.length) { const nbef = findStartOfMark(state.selection.$from, view, findLinkMark); const naft = findEndOfMark(state.selection.$from, view, findLinkMark) || nbef; - nbef && naft && LinkDocPreview.SetLinkInfo({ - docProps: textBox.props, - linkSrc: textBox.rootDoc, - linkDoc: linkDoc ? DocServer.GetCachedRefField(linkDoc) as Doc : undefined, - location: ((pos) => [pos.left, pos.top + 25])(view.coordsAtPos(state.selection.from - Math.max(0, nbef - 1))), - hrefs, - showHeader: true - }); + nbef && + naft && + LinkDocPreview.SetLinkInfo({ + docProps: textBox.props, + linkSrc: textBox.rootDoc, + linkDoc: linkDoc ? (DocServer.GetCachedRefField(linkDoc) as Doc) : undefined, + location: (pos => [pos.left, pos.top + 25])(view.coordsAtPos(state.selection.from - Math.max(0, nbef - 1))), + hrefs, + showHeader: true, + }); } } - destroy() { } -}
\ No newline at end of file + destroy() {} +} |