aboutsummaryrefslogtreecommitdiff
path: root/src/client/util
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/util')
-rw-r--r--src/client/util/ParagraphNodeSpec.ts143
-rw-r--r--src/client/util/ProsemirrorExampleTransfer.ts241
-rw-r--r--src/client/util/RichTextMenu.scss121
-rw-r--r--src/client/util/RichTextMenu.tsx875
-rw-r--r--src/client/util/RichTextRules.ts6
-rw-r--r--src/client/util/RichTextSchema.tsx1263
-rw-r--r--src/client/util/TooltipTextMenu.scss372
-rw-r--r--src/client/util/prosemirrorPatches.js139
8 files changed, 3 insertions, 3157 deletions
diff --git a/src/client/util/ParagraphNodeSpec.ts b/src/client/util/ParagraphNodeSpec.ts
deleted file mode 100644
index 0a3b68217..000000000
--- a/src/client/util/ParagraphNodeSpec.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-import clamp from './clamp';
-import convertToCSSPTValue from './convertToCSSPTValue';
-import toCSSLineSpacing from './toCSSLineSpacing';
-import { Node, DOMOutputSpec } from 'prosemirror-model';
-
-//import type { NodeSpec } from './Types';
-type NodeSpec = {
- attrs?: { [key: string]: any },
- content?: string,
- draggable?: boolean,
- group?: string,
- inline?: boolean,
- name?: string,
- parseDOM?: Array<any>,
- toDOM?: (node: any) => DOMOutputSpec,
-};
-
-// This assumes that every 36pt maps to one indent level.
-export const INDENT_MARGIN_PT_SIZE = 36;
-export const MIN_INDENT_LEVEL = 0;
-export const MAX_INDENT_LEVEL = 7;
-export const ATTRIBUTE_INDENT = 'data-indent';
-
-export const EMPTY_CSS_VALUE = new Set(['', '0%', '0pt', '0px']);
-
-const ALIGN_PATTERN = /(left|right|center|justify)/;
-
-// https://github.com/ProseMirror/prosemirror-schema-basic/blob/master/src/schema-basic.js
-// :: NodeSpec A plain paragraph textblock. Represented in the DOM
-// as a `<p>` element.
-const ParagraphNodeSpec: NodeSpec = {
- attrs: {
- align: { default: null },
- color: { default: null },
- id: { default: null },
- indent: { default: null },
- inset: { default: null },
- lineSpacing: { default: null },
- // TODO: Add UI to let user edit / clear padding.
- paddingBottom: { default: null },
- // TODO: Add UI to let user edit / clear padding.
- paddingTop: { default: null },
- },
- content: 'inline*',
- group: 'block',
- parseDOM: [{ tag: 'p', getAttrs }],
- toDOM,
-};
-
-function getAttrs(dom: HTMLElement): Object {
- const {
- lineHeight,
- textAlign,
- marginLeft,
- paddingTop,
- paddingBottom,
- } = dom.style;
-
- let align = dom.getAttribute('align') || textAlign || '';
- align = ALIGN_PATTERN.test(align) ? align : "";
-
- let indent = parseInt(dom.getAttribute(ATTRIBUTE_INDENT) || "", 10);
-
- if (!indent && marginLeft) {
- indent = convertMarginLeftToIndentValue(marginLeft);
- }
-
- indent = indent || MIN_INDENT_LEVEL;
-
- const lineSpacing = lineHeight ? toCSSLineSpacing(lineHeight) : null;
-
- const id = dom.getAttribute('id') || '';
- return { align, indent, lineSpacing, paddingTop, paddingBottom, id };
-}
-
-function toDOM(node: Node): DOMOutputSpec {
- const {
- align,
- indent,
- inset,
- lineSpacing,
- paddingTop,
- paddingBottom,
- id,
- } = node.attrs;
- const attrs: { [key: string]: any } | null = {};
-
- let style = '';
- if (align && align !== 'left') {
- style += `text-align: ${align};`;
- }
-
- if (lineSpacing) {
- const cssLineSpacing = toCSSLineSpacing(lineSpacing);
- style +=
- `line-height: ${cssLineSpacing};` +
- // This creates the local css variable `--czi-content-line-height`
- // that its children may apply.
- `--czi-content-line-height: ${cssLineSpacing}`;
- }
-
- if (paddingTop && !EMPTY_CSS_VALUE.has(paddingTop)) {
- style += `padding-top: ${paddingTop};`;
- }
-
- if (paddingBottom && !EMPTY_CSS_VALUE.has(paddingBottom)) {
- style += `padding-bottom: ${paddingBottom};`;
- }
-
- if (indent) {
- style += `text-indent: ${indent}; padding-left: ${indent < 0 ? -indent : undefined};`;
- }
-
- if (inset) {
- style += `margin-left: ${inset}; margin-right: ${inset};`;
- }
-
- style && (attrs.style = style);
-
- if (indent) {
- attrs[ATTRIBUTE_INDENT] = String(indent);
- }
-
- if (id) {
- attrs.id = id;
- }
-
- return ['p', attrs, 0];
-}
-
-export const toParagraphDOM = toDOM;
-export const getParagraphNodeAttrs = getAttrs;
-
-export function convertMarginLeftToIndentValue(marginLeft: string): number {
- const ptValue = convertToCSSPTValue(marginLeft);
- return clamp(
- MIN_INDENT_LEVEL,
- Math.floor(ptValue / INDENT_MARGIN_PT_SIZE),
- MAX_INDENT_LEVEL
- );
-}
-
-export default ParagraphNodeSpec; \ No newline at end of file
diff --git a/src/client/util/ProsemirrorExampleTransfer.ts b/src/client/util/ProsemirrorExampleTransfer.ts
deleted file mode 100644
index 356f20ce6..000000000
--- a/src/client/util/ProsemirrorExampleTransfer.ts
+++ /dev/null
@@ -1,241 +0,0 @@
-import { chainCommands, exitCode, joinDown, joinUp, lift, selectParentNode, setBlockType, splitBlockKeepMarks, toggleMark, wrapIn } from "prosemirror-commands";
-import { redo, undo } from "prosemirror-history";
-import { undoInputRule } from "prosemirror-inputrules";
-import { Schema } from "prosemirror-model";
-import { liftListItem, sinkListItem } from "./prosemirrorPatches.js";
-import { splitListItem, wrapInList, } from "prosemirror-schema-list";
-import { EditorState, Transaction, TextSelection } from "prosemirror-state";
-import { SelectionManager } from "./SelectionManager";
-import { Docs } from "../documents/Documents";
-import { NumCast, BoolCast, Cast, StrCast } from "../../new_fields/Types";
-import { Doc } from "../../new_fields/Doc";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { Id } from "../../new_fields/FieldSymbols";
-
-const mac = typeof navigator !== "undefined" ? /Mac/.test(navigator.platform) : false;
-
-export type KeyMap = { [key: string]: any };
-
-export let updateBullets = (tx2: Transaction, schema: Schema, mapStyle?: string) => {
- let fontSize: number | undefined = undefined;
- tx2.doc.descendants((node: any, offset: any, index: any) => {
- if (node.type === schema.nodes.ordered_list || node.type === schema.nodes.list_item) {
- const path = (tx2.doc.resolve(offset) as any).path;
- let depth = Array.from(path).reduce((p: number, c: any) => p + (c.hasOwnProperty("type") && c.type === schema.nodes.ordered_list ? 1 : 0), 0);
- if (node.type === schema.nodes.ordered_list) depth++;
- fontSize = depth === 1 && node.attrs.setFontSize ? Number(node.attrs.setFontSize) : fontSize;
- const fsize = fontSize && node.type === schema.nodes.ordered_list ? Math.max(6, fontSize - (depth - 1) * 4) : undefined;
- tx2.setNodeMarkup(offset, node.type, { ...node.attrs, mapStyle: mapStyle ? mapStyle : node.attrs.mapStyle, bulletStyle: depth, inheritedFontSize: fsize }, node.marks);
- }
- });
- return tx2;
-};
-export default function buildKeymap<S extends Schema<any>>(schema: S, props: any, mapKeys?: KeyMap): KeyMap {
- const keys: { [key: string]: any } = {};
-
- function bind(key: string, cmd: any) {
- if (mapKeys) {
- const mapped = mapKeys[key];
- if (mapped === false) return;
- if (mapped) key = mapped;
- }
- keys[key] = cmd;
- }
-
- bind("Mod-z", undo);
- bind("Shift-Mod-z", redo);
- bind("Backspace", undoInputRule);
-
- !mac && bind("Mod-y", redo);
-
- bind("Alt-ArrowUp", joinUp);
- bind("Alt-ArrowDown", joinDown);
- bind("Mod-BracketLeft", lift);
- bind("Escape", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- dispatch(state.tr.setSelection(TextSelection.create(state.doc, state.selection.from, state.selection.from)));
- (document.activeElement as any).blur?.();
- SelectionManager.DeselectAll();
- });
-
- bind("Mod-b", toggleMark(schema.marks.strong));
- bind("Mod-B", toggleMark(schema.marks.strong));
-
- bind("Mod-e", toggleMark(schema.marks.em));
- bind("Mod-E", toggleMark(schema.marks.em));
-
- bind("Mod-u", toggleMark(schema.marks.underline));
- bind("Mod-U", toggleMark(schema.marks.underline));
-
- bind("Mod-`", toggleMark(schema.marks.code));
-
- bind("Ctrl-.", wrapInList(schema.nodes.bullet_list));
-
- bind("Ctrl-n", wrapInList(schema.nodes.ordered_list));
-
- bind("Ctrl->", wrapIn(schema.nodes.blockquote));
-
- // bind("^", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- // let newNode = schema.nodes.footnote.create({});
- // if (dispatch && state.selection.from === state.selection.to) {
- // let tr = state.tr;
- // tr.replaceSelectionWith(newNode); // replace insertion with a footnote.
- // dispatch(tr.setSelection(new NodeSelection( // select the footnote node to open its display
- // tr.doc.resolve( // get the location of the footnote node by subtracting the nodesize of the footnote from the current insertion point anchor (which will be immediately after the footnote node)
- // tr.selection.anchor - tr.selection.$anchor.nodeBefore!.nodeSize))));
- // return true;
- // }
- // return false;
- // });
-
-
- const cmd = chainCommands(exitCode, (state, dispatch) => {
- if (dispatch) {
- dispatch(state.tr.replaceSelectionWith(schema.nodes.hard_break.create()).scrollIntoView());
- return true;
- }
- return false;
- });
- bind("Mod-Enter", cmd);
- bind("Shift-Enter", cmd);
- mac && bind("Ctrl-Enter", cmd);
-
-
- bind("Shift-Ctrl-0", setBlockType(schema.nodes.paragraph));
-
- bind("Shift-Ctrl-\\", setBlockType(schema.nodes.code_block));
-
- for (let i = 1; i <= 6; i++) {
- bind("Shift-Ctrl-" + i, setBlockType(schema.nodes.heading, { level: i }));
- }
-
- const hr = schema.nodes.horizontal_rule;
- bind("Mod-_", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- dispatch(state.tr.replaceSelectionWith(hr.create()).scrollIntoView());
- return true;
- });
-
- bind("Tab", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- const ref = state.selection;
- const range = ref.$from.blockRange(ref.$to);
- const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
- if (!sinkListItem(schema.nodes.list_item)(state, (tx2: Transaction) => {
- const tx3 = updateBullets(tx2, schema);
- marks && tx3.ensureMarks([...marks]);
- marks && tx3.setStoredMarks([...marks]);
- dispatch(tx3);
- })) { // couldn't sink into an existing list, so wrap in a new one
- const newstate = state.applyTransaction(state.tr.setSelection(TextSelection.create(state.doc, range!.start, range!.end)));
- if (!wrapInList(schema.nodes.ordered_list)(newstate.state, (tx2: Transaction) => {
- const tx3 = updateBullets(tx2, schema);
- // when promoting to a list, assume list will format things so don't copy the stored marks.
- marks && tx3.ensureMarks([...marks]);
- marks && tx3.setStoredMarks([...marks]);
- dispatch(tx3);
- })) {
- console.log("bullet promote fail");
- }
- }
- });
-
- bind("Shift-Tab", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
-
- if (!liftListItem(schema.nodes.list_item)(state.tr, (tx2: Transaction) => {
- const tx3 = updateBullets(tx2, schema);
- marks && tx3.ensureMarks([...marks]);
- marks && tx3.setStoredMarks([...marks]);
- dispatch(tx3);
- })) {
- console.log("bullet demote fail");
- }
- });
- bind("Ctrl-Enter", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- const layoutDoc = props.Document;
- const originalDoc = layoutDoc.rootDocument || layoutDoc;
- if (originalDoc instanceof Doc) {
- const layoutKey = StrCast(originalDoc.layoutKey);
- const newDoc = Docs.Create.TextDocument("", {
- layout: Cast(originalDoc.layout, Doc, null) || FormattedTextBox.DefaultLayout,
- layoutKey,
- _singleLine: BoolCast(originalDoc._singleLine),
- x: NumCast(originalDoc.x), y: NumCast(originalDoc.y) + NumCast(originalDoc._height) + 10, _width: NumCast(layoutDoc._width), _height: NumCast(layoutDoc._height)
- });
- if (layoutKey !== "layout" && originalDoc[layoutKey] instanceof Doc) {
- newDoc[layoutKey] = originalDoc[layoutKey];
- }
- FormattedTextBox.SelectOnLoad = newDoc[Id];
- props.addDocument(newDoc);
- }
- });
-
- const splitMetadata = (marks: any, tx: Transaction) => {
- marks && tx.ensureMarks(marks.filter((val: any) => val.type !== schema.marks.metadata && val.type !== schema.marks.metadataKey && val.type !== schema.marks.metadataVal));
- marks && tx.setStoredMarks(marks.filter((val: any) => val.type !== schema.marks.metadata && val.type !== schema.marks.metadataKey && val.type !== schema.marks.metadataVal));
- return tx;
- };
- const addTextOnRight = (force: boolean) => {
- const layoutDoc = props.Document;
- const originalDoc = layoutDoc.rootDocument || layoutDoc;
- if (force || props.Document._singleLine) {
- const layoutKey = StrCast(originalDoc.layoutKey);
- const newDoc = Docs.Create.TextDocument("", {
- layout: Cast(originalDoc.layout, Doc, null) || FormattedTextBox.DefaultLayout,
- layoutKey,
- _singleLine: BoolCast(originalDoc._singleLine),
- x: NumCast(originalDoc.x) + NumCast(originalDoc._width) + 10, y: NumCast(originalDoc.y), _width: NumCast(layoutDoc._width), _height: NumCast(layoutDoc._height)
- });
- if (layoutKey !== "layout" && originalDoc[layoutKey] instanceof Doc) {
- newDoc[layoutKey] = originalDoc[layoutKey];
- }
- FormattedTextBox.SelectOnLoad = newDoc[Id];
- props.addDocument(newDoc);
- return true;
- }
- return false;
- };
- bind("Alt-Enter", (state: EditorState<S>, dispatch: (tx: Transaction<Schema<any, any>>) => void) => {
- return addTextOnRight(true);
- });
- bind("Enter", (state: EditorState<S>, dispatch: (tx: Transaction<Schema<any, any>>) => void) => {
- if (addTextOnRight(false)) return true;
- const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
- if (!splitListItem(schema.nodes.list_item)(state, dispatch)) {
- if (!splitBlockKeepMarks(state, (tx3: Transaction) => {
- splitMetadata(marks, tx3);
- if (!liftListItem(schema.nodes.list_item)(tx3, dispatch as ((tx: Transaction<Schema<any, any>>) => void))) {
- dispatch(tx3);
- }
- })) {
- return false;
- }
- }
- return true;
- });
- bind("Space", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- const marks = state.storedMarks || (state.selection.$to.parentOffset && state.selection.$from.marks());
- dispatch(splitMetadata(marks, state.tr));
- return false;
- });
- bind(":", (state: EditorState<S>, dispatch: (tx: Transaction<S>) => void) => {
- const range = state.selection.$from.blockRange(state.selection.$to, (node: any) => {
- return !node.marks || !node.marks.find((m: any) => m.type === schema.marks.metadata);
- });
- const path = (state.doc.resolve(state.selection.from - 1) as any).path;
- const spaceSeparator = path[path.length - 3].childCount > 1 ? 0 : -1;
- const anchor = range!.end - path[path.length - 3].lastChild.nodeSize + spaceSeparator;
- if (anchor >= 0) {
- const textsel = TextSelection.create(state.doc, anchor, range!.end);
- const text = range ? state.doc.textBetween(textsel.from, textsel.to) : "";
- let whitespace = text.length - 1;
- for (; whitespace >= 0 && text[whitespace] !== " "; whitespace--) { }
- if (text.endsWith(":")) {
- dispatch(state.tr.addMark(textsel.from + whitespace + 1, textsel.to, schema.marks.metadata.create() as any).
- addMark(textsel.from + whitespace + 1, textsel.to - 2, schema.marks.metadataKey.create() as any));
- }
- }
- return false;
- });
-
-
- return keys;
-}
diff --git a/src/client/util/RichTextMenu.scss b/src/client/util/RichTextMenu.scss
deleted file mode 100644
index 43cc23ecd..000000000
--- a/src/client/util/RichTextMenu.scss
+++ /dev/null
@@ -1,121 +0,0 @@
-@import "../views/globalCssVariables";
-
-.button-dropdown-wrapper {
- position: relative;
-
- .dropdown-button {
- width: 15px;
- padding-left: 5px;
- padding-right: 5px;
- }
-
- .dropdown-button-combined {
- width: 50px;
- display: flex;
- justify-content: space-between;
-
- svg:nth-child(2) {
- margin-top: 2px;
- }
- }
-
- .dropdown {
- position: absolute;
- top: 35px;
- left: 0;
- background-color: #323232;
- color: $light-color-secondary;
- border: 1px solid #4d4d4d;
- border-radius: 0 6px 6px 6px;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
- min-width: 150px;
- padding: 5px;
- font-size: 12px;
- z-index: 10001;
-
- button {
- background-color: #323232;
- border: 1px solid black;
- border-radius: 1px;
- padding: 6px;
- margin: 5px 0;
- font-size: 10px;
-
- &:hover {
- background-color: black;
- }
-
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- input {
- color: black;
- }
-}
-
-.link-menu {
- .divider {
- background-color: white;
- height: 1px;
- width: 100%;
- }
-}
-
-.color-preview-button {
- .color-preview {
- width: 100%;
- height: 3px;
- margin-top: 3px;
- }
-}
-
-.color-wrapper {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
-
- button.color-button {
- width: 20px;
- height: 20px;
- border-radius: 15px !important;
- margin: 3px;
- border: 2px solid transparent !important;
- padding: 3px;
-
- &.active {
- border: 2px solid white !important;
- }
- }
-}
-
-select {
- background-color: #323232;
- color: white;
- border: 1px solid black;
- // border-top: none;
- // border-bottom: none;
- font-size: 12px;
- height: 100%;
- margin-right: 3px;
-
- &:focus,
- &:hover {
- background-color: black;
- }
-
- &::-ms-expand {
- color: white;
- }
-}
-
-.row-2 {
- display: flex;
- justify-content: space-between;
-
- >div {
- display: flex;
- }
-} \ No newline at end of file
diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx
deleted file mode 100644
index 4a9a4c10f..000000000
--- a/src/client/util/RichTextMenu.tsx
+++ /dev/null
@@ -1,875 +0,0 @@
-import React = require("react");
-import AntimodeMenu from "../views/AntimodeMenu";
-import { observable, action, } from "mobx";
-import { observer } from "mobx-react";
-import { Mark, MarkType, Node as ProsNode, NodeType, ResolvedPos, Schema } from "prosemirror-model";
-import { schema } from "./RichTextSchema";
-import { EditorView } from "prosemirror-view";
-import { EditorState, NodeSelection, TextSelection } from "prosemirror-state";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { IconProp, library } from '@fortawesome/fontawesome-svg-core';
-import { faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller, faSleigh } from "@fortawesome/free-solid-svg-icons";
-import { updateBullets } from "./ProsemirrorExampleTransfer";
-import { FieldViewProps } from "../views/nodes/FieldView";
-import { Cast, StrCast } from "../../new_fields/Types";
-import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox";
-import { unimplementedFunction, Utils } from "../../Utils";
-import { wrapInList } from "prosemirror-schema-list";
-import { PastelSchemaPalette, DarkPastelSchemaPalette } from '../../new_fields/SchemaHeaderField';
-import "./RichTextMenu.scss";
-import { DocServer } from "../DocServer";
-import { Doc } from "../../new_fields/Doc";
-import { SelectionManager } from "./SelectionManager";
-import { LinkManager } from "./LinkManager";
-const { toggleMark, setBlockType } = require("prosemirror-commands");
-
-library.add(faBold, faItalic, faChevronLeft, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller);
-
-@observer
-export default class RichTextMenu extends AntimodeMenu {
- static Instance: RichTextMenu;
- public overMenu: boolean = false; // kind of hacky way to prevent selects not being selectable
-
- private view?: EditorView;
- public editorProps: FieldViewProps & FormattedTextBoxProps | undefined;
-
- public _brushMap: Map<string, Set<Mark>> = new Map();
- private fontSizeOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[];
- private fontFamilyOptions: { mark: Mark | null, title: string, label: string, command: any, hidden?: boolean, style?: {} }[];
- private listTypeOptions: { node: NodeType | any | null, title: string, label: string, command: any, style?: {} }[];
- private fontColors: (string | undefined)[];
- private highlightColors: (string | undefined)[];
-
- @observable private collapsed: boolean = false;
- @observable private boldActive: boolean = false;
- @observable private italicsActive: boolean = false;
- @observable private underlineActive: boolean = false;
- @observable private strikethroughActive: boolean = false;
- @observable private subscriptActive: boolean = false;
- @observable private superscriptActive: boolean = false;
-
- @observable private activeFontSize: string = "";
- @observable private activeFontFamily: string = "";
- @observable private activeListType: string = "";
-
- @observable private brushIsEmpty: boolean = true;
- @observable private brushMarks: Set<Mark> = new Set();
- @observable private showBrushDropdown: boolean = false;
-
- @observable private activeFontColor: string = "black";
- @observable private showColorDropdown: boolean = false;
-
- @observable private activeHighlightColor: string = "transparent";
- @observable private showHighlightDropdown: boolean = false;
-
- @observable private currentLink: string | undefined = "";
- @observable private showLinkDropdown: boolean = false;
-
- constructor(props: Readonly<{}>) {
- super(props);
- RichTextMenu.Instance = this;
- this._canFade = false;
-
- this.fontSizeOptions = [
- { mark: schema.marks.pFontSize.create({ fontSize: 7 }), title: "Set font size", label: "7pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 8 }), title: "Set font size", label: "8pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 9 }), title: "Set font size", label: "9pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 10 }), title: "Set font size", label: "10pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 12 }), title: "Set font size", label: "12pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 14 }), title: "Set font size", label: "14pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 16 }), title: "Set font size", label: "16pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 18 }), title: "Set font size", label: "18pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 20 }), title: "Set font size", label: "20pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 24 }), title: "Set font size", label: "24pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 32 }), title: "Set font size", label: "32pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 48 }), title: "Set font size", label: "48pt", command: this.changeFontSize },
- { mark: schema.marks.pFontSize.create({ fontSize: 72 }), title: "Set font size", label: "72pt", command: this.changeFontSize },
- { mark: null, title: "", label: "various", command: unimplementedFunction, hidden: true },
- { mark: null, title: "", label: "13pt", command: unimplementedFunction, hidden: true }, // this is here because the default size is 13, but there is no actual 13pt option
- ];
-
- this.fontFamilyOptions = [
- { mark: schema.marks.pFontFamily.create({ family: "Times New Roman" }), title: "Set font family", label: "Times New Roman", command: this.changeFontFamily, style: { fontFamily: "Times New Roman" } },
- { mark: schema.marks.pFontFamily.create({ family: "Arial" }), title: "Set font family", label: "Arial", command: this.changeFontFamily, style: { fontFamily: "Arial" } },
- { mark: schema.marks.pFontFamily.create({ family: "Georgia" }), title: "Set font family", label: "Georgia", command: this.changeFontFamily, style: { fontFamily: "Georgia" } },
- { mark: schema.marks.pFontFamily.create({ family: "Comic Sans MS" }), title: "Set font family", label: "Comic Sans MS", command: this.changeFontFamily, style: { fontFamily: "Comic Sans MS" } },
- { mark: schema.marks.pFontFamily.create({ family: "Tahoma" }), title: "Set font family", label: "Tahoma", command: this.changeFontFamily, style: { fontFamily: "Tahoma" } },
- { mark: schema.marks.pFontFamily.create({ family: "Impact" }), title: "Set font family", label: "Impact", command: this.changeFontFamily, style: { fontFamily: "Impact" } },
- { mark: schema.marks.pFontFamily.create({ family: "Crimson Text" }), title: "Set font family", label: "Crimson Text", command: this.changeFontFamily, style: { fontFamily: "Crimson Text" } },
- { mark: null, title: "", label: "various", command: unimplementedFunction, hidden: true },
- // { mark: null, title: "", label: "default", command: unimplementedFunction, hidden: true },
- ];
-
- this.listTypeOptions = [
- { node: schema.nodes.ordered_list.create({ mapStyle: "bullet" }), title: "Set list type", label: ":", command: this.changeListType },
- { node: schema.nodes.ordered_list.create({ mapStyle: "decimal" }), title: "Set list type", label: "1.1", command: this.changeListType },
- { node: schema.nodes.ordered_list.create({ mapStyle: "multi" }), title: "Set list type", label: "1.A", command: this.changeListType },
- { node: undefined, title: "Set list type", label: "Remove", command: this.changeListType },
- ];
-
- this.fontColors = [
- DarkPastelSchemaPalette.get("pink2"),
- DarkPastelSchemaPalette.get("purple4"),
- DarkPastelSchemaPalette.get("bluegreen1"),
- DarkPastelSchemaPalette.get("yellow4"),
- DarkPastelSchemaPalette.get("red2"),
- DarkPastelSchemaPalette.get("bluegreen7"),
- DarkPastelSchemaPalette.get("bluegreen5"),
- DarkPastelSchemaPalette.get("orange1"),
- "#757472",
- "#000"
- ];
-
- this.highlightColors = [
- PastelSchemaPalette.get("pink2"),
- PastelSchemaPalette.get("purple4"),
- PastelSchemaPalette.get("bluegreen1"),
- PastelSchemaPalette.get("yellow4"),
- PastelSchemaPalette.get("red2"),
- PastelSchemaPalette.get("bluegreen7"),
- PastelSchemaPalette.get("bluegreen5"),
- PastelSchemaPalette.get("orange1"),
- "white",
- "transparent"
- ];
- }
-
- @action
- changeView(view: EditorView) {
- this.view = view;
- }
-
- update(view: EditorView, lastState: EditorState | undefined) {
- this.updateFromDash(view, lastState, this.editorProps);
- }
-
-
- public MakeLinkToSelection = (linkDocId: string, title: string, location: string, targetDocId: string): string => {
- if (this.view) {
- const link = this.view.state.schema.marks.link.create({ href: Utils.prepend("/doc/" + linkDocId), title: title, location: location, linkId: linkDocId, targetId: targetDocId });
- this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link).
- addMark(this.view.state.selection.from, this.view.state.selection.to, link));
- return this.view.state.selection.$from.nodeAfter?.text || "";
- }
- return "";
- }
-
- @action
- public async updateFromDash(view: EditorView, lastState: EditorState | undefined, props: any) {
- if (!view) {
- console.log("no editor? why?");
- return;
- }
- this.view = view;
- const state = view.state;
- props && (this.editorProps = props);
-
- // Don't do anything if the document/selection didn't change
- if (lastState && lastState.doc.eq(state.doc) && lastState.selection.eq(state.selection)) return;
-
- // update active marks
- const activeMarks = this.getActiveMarksOnSelection();
- this.setActiveMarkButtons(activeMarks);
-
- // update active font family and size
- const active = this.getActiveFontStylesOnSelection();
- const activeFamilies = active && active.get("families");
- const activeSizes = active && active.get("sizes");
-
- this.activeFontFamily = !activeFamilies || activeFamilies.length === 0 ? "Arial" : activeFamilies.length === 1 ? String(activeFamilies[0]) : "various";
- this.activeFontSize = !activeSizes || activeSizes.length === 0 ? "13pt" : activeSizes.length === 1 ? String(activeSizes[0]) + "pt" : "various";
-
- // update link in current selection
- const targetTitle = await this.getTextLinkTargetTitle();
- this.setCurrentLink(targetTitle);
- }
-
- setMark = (mark: Mark, state: EditorState<any>, dispatch: any) => {
- if (mark) {
- const node = (state.selection as NodeSelection).node;
- if (node?.type === schema.nodes.ordered_list) {
- let attrs = node.attrs;
- if (mark.type === schema.marks.pFontFamily) attrs = { ...attrs, setFontFamily: mark.attrs.family };
- if (mark.type === schema.marks.pFontSize) attrs = { ...attrs, setFontSize: mark.attrs.fontSize };
- if (mark.type === schema.marks.pFontColor) attrs = { ...attrs, setFontColor: mark.attrs.color };
- const tr = updateBullets(state.tr.setNodeMarkup(state.selection.from, node.type, attrs), state.schema);
- dispatch(tr.setSelection(new NodeSelection(tr.doc.resolve(state.selection.from))));
- } else {
- toggleMark(mark.type, mark.attrs)(state, (tx: any) => {
- const { from, $from, to, empty } = tx.selection;
- if (!tx.doc.rangeHasMark(from, to, mark.type)) {
- toggleMark(mark.type, mark.attrs)({ tr: tx, doc: tx.doc, selection: tx.selection, storedMarks: tx.storedMarks }, dispatch);
- } else dispatch(tx);
- });
- }
- }
- }
-
- // finds font sizes and families in selection
- getActiveFontStylesOnSelection() {
- if (!this.view) return;
-
- const activeFamilies: string[] = [];
- const activeSizes: string[] = [];
- const state = this.view.state;
- const pos = this.view.state.selection.$from;
- const ref_node = this.reference_node(pos);
- if (ref_node && ref_node !== this.view.state.doc && ref_node.isText) {
- ref_node.marks.forEach(m => {
- m.type === state.schema.marks.pFontFamily && activeFamilies.push(m.attrs.family);
- m.type === state.schema.marks.pFontSize && activeSizes.push(String(m.attrs.fontSize) + "pt");
- });
- }
-
- const styles = new Map<String, String[]>();
- styles.set("families", activeFamilies);
- styles.set("sizes", activeSizes);
- return styles;
- }
-
- getMarksInSelection(state: EditorState<any>) {
- const found = new Set<Mark>();
- const { from, to } = state.selection as TextSelection;
- state.doc.nodesBetween(from, to, (node) => node.marks.forEach(m => found.add(m)));
- return found;
- }
-
- //finds all active marks on selection in given group
- getActiveMarksOnSelection() {
- if (!this.view) return;
-
- const markGroup = [schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript];
- if (this.view.state.storedMarks) return this.view.state.storedMarks.map(mark => mark.type);
- //current selection
- const { empty, ranges, $to } = this.view.state.selection as TextSelection;
- const state = this.view.state;
- let activeMarks: MarkType[] = [];
- if (!empty) {
- activeMarks = markGroup.filter(mark => {
- const has = false;
- for (let i = 0; !has && i < ranges.length; i++) {
- return state.doc.rangeHasMark(ranges[i].$from.pos, ranges[i].$to.pos, mark);
- }
- return false;
- });
- }
- else {
- const pos = this.view.state.selection.$from;
- const ref_node: ProsNode | null = this.reference_node(pos);
- if (ref_node !== null && ref_node !== this.view.state.doc) {
- if (ref_node.isText) {
- }
- else {
- return [];
- }
- activeMarks = markGroup.filter(mark_type => {
- if (mark_type === state.schema.marks.pFontSize) {
- return ref_node.marks.some(m => m.type.name === state.schema.marks.pFontSize.name);
- }
- const mark = state.schema.mark(mark_type);
- return ref_node.marks.includes(mark);
- });
- }
- }
- return activeMarks;
- }
-
- destroy() {
- this.fadeOut(true);
- }
-
- @action
- setActiveMarkButtons(activeMarks: MarkType[] | undefined) {
- if (!activeMarks) return;
-
- this.boldActive = false;
- this.italicsActive = false;
- this.underlineActive = false;
- this.strikethroughActive = false;
- this.subscriptActive = false;
- this.superscriptActive = false;
-
- activeMarks.forEach(mark => {
- switch (mark.name) {
- case "strong": this.boldActive = true; break;
- case "em": this.italicsActive = true; break;
- case "underline": this.underlineActive = true; break;
- case "strikethrough": this.strikethroughActive = true; break;
- case "subscript": this.subscriptActive = true; break;
- case "superscript": this.superscriptActive = true; break;
- }
- });
- }
-
- createButton(faIcon: string, title: string, isActive: boolean = false, command?: any, onclick?: any) {
- const self = this;
- function onClick(e: React.PointerEvent) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.view && command && command(self.view.state, self.view.dispatch, self.view);
- self.view && onclick && onclick(self.view.state, self.view.dispatch, self.view);
- self.setActiveMarkButtons(self.getActiveMarksOnSelection());
- }
-
- return (
- <button className={"antimodeMenu-button" + (isActive ? " active" : "")} key={title} title={title} onPointerDown={onClick}>
- <FontAwesomeIcon icon={faIcon as IconProp} size="lg" />
- </button>
- );
- }
-
- createMarksDropdown(activeOption: string, options: { mark: Mark | null, title: string, label: string, command: (mark: Mark, view: EditorView) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element {
- const items = options.map(({ title, label, hidden, style }) => {
- if (hidden) {
- return label === activeOption ?
- <option value={label} title={title} key={label} style={style ? style : {}} selected hidden>{label}</option> :
- <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>;
- }
- return label === activeOption ?
- <option value={label} title={title} key={label} style={style ? style : {}} selected>{label}</option> :
- <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>;
- });
-
- const self = this;
- function onChange(e: React.ChangeEvent<HTMLSelectElement>) {
- e.stopPropagation();
- e.preventDefault();
- options.forEach(({ label, mark, command }) => {
- if (e.target.value === label) {
- self.view && mark && command(mark, self.view);
- }
- });
- }
- return <select onChange={onChange} key={key}>{items}</select>;
- }
-
- createNodesDropdown(activeOption: string, options: { node: NodeType | any | null, title: string, label: string, command: (node: NodeType | any) => void, hidden?: boolean, style?: {} }[], key: string): JSX.Element {
- const items = options.map(({ title, label, hidden, style }) => {
- if (hidden) {
- return label === activeOption ?
- <option value={label} title={title} key={label} style={style ? style : {}} selected hidden>{label}</option> :
- <option value={label} title={title} key={label} style={style ? style : {}} hidden>{label}</option>;
- }
- return label === activeOption ?
- <option value={label} title={title} key={label} style={style ? style : {}} selected>{label}</option> :
- <option value={label} title={title} key={label} style={style ? style : {}}>{label}</option>;
- });
-
- const self = this;
- function onChange(val: string) {
- options.forEach(({ label, node, command }) => {
- if (val === label) {
- self.view && node && command(node);
- }
- });
- }
- return <select onChange={e => onChange(e.target.value)} key={key}>{items}</select>;
- }
-
- changeFontSize = (mark: Mark, view: EditorView) => {
- this.setMark(view.state.schema.marks.pFontSize.create({ fontSize: mark.attrs.fontSize }), view.state, view.dispatch);
- }
-
- changeFontFamily = (mark: Mark, view: EditorView) => {
- this.setMark(view.state.schema.marks.pFontFamily.create({ family: mark.attrs.family }), view.state, view.dispatch);
- }
-
- // TODO: remove doesn't work
- //remove all node type and apply the passed-in one to the selected text
- changeListType = (nodeType: NodeType | undefined) => {
- if (!this.view) return;
-
- if (nodeType === schema.nodes.bullet_list) {
- wrapInList(nodeType)(this.view.state, this.view.dispatch);
- } else {
- const marks = this.view.state.storedMarks || (this.view.state.selection.$to.parentOffset && this.view.state.selection.$from.marks());
- if (!wrapInList(schema.nodes.ordered_list)(this.view.state, (tx2: any) => {
- const tx3 = updateBullets(tx2, schema, nodeType && (nodeType as any).attrs.mapStyle);
- marks && tx3.ensureMarks([...marks]);
- marks && tx3.setStoredMarks([...marks]);
-
- this.view!.dispatch(tx2);
- })) {
- const tx2 = this.view.state.tr;
- const tx3 = updateBullets(tx2, schema, nodeType && (nodeType as any).attrs.mapStyle);
- marks && tx3.ensureMarks([...marks]);
- marks && tx3.setStoredMarks([...marks]);
-
- this.view.dispatch(tx3);
- }
- }
- }
-
- insertSummarizer(state: EditorState<any>, dispatch: any) {
- if (state.selection.empty) return false;
- const mark = state.schema.marks.summarize.create();
- const tr = state.tr;
- tr.addMark(state.selection.from, state.selection.to, mark);
- const content = tr.selection.content();
- const newNode = state.schema.nodes.summary.create({ visibility: false, text: content, textslice: content.toJSON() });
- dispatch && dispatch(tr.replaceSelectionWith(newNode).removeMark(tr.selection.from - 1, tr.selection.from, mark));
- return true;
- }
-
- @action toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; }
-
- // todo: add brushes to brushMap to save with a style name
- onBrushNameKeyPress = (e: React.KeyboardEvent) => {
- if (e.key === "Enter") {
- RichTextMenu.Instance.brushMarks && RichTextMenu.Instance._brushMap.set(this._brushNameRef.current!.value, RichTextMenu.Instance.brushMarks);
- this._brushNameRef.current!.style.background = "lightGray";
- }
- }
- _brushNameRef = React.createRef<HTMLInputElement>();
-
- createBrushButton() {
- const self = this;
- function onBrushClick(e: React.PointerEvent) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.view && self.fillBrush(self.view.state, self.view.dispatch);
- }
-
- let label = "Stored marks: ";
- if (this.brushMarks && this.brushMarks.size > 0) {
- this.brushMarks.forEach((mark: Mark) => {
- const markType = mark.type;
- label += markType.name;
- label += ", ";
- });
- label = label.substring(0, label.length - 2);
- } else {
- label = "No marks are currently stored";
- }
-
- const button =
- <button className="antimodeMenu-button" title="" onPointerDown={onBrushClick} style={this.brushMarks?.size > 0 ? { backgroundColor: "121212" } : {}}>
- <FontAwesomeIcon icon="paint-roller" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.brushMarks?.size > 0 ? 45 : 0}deg)` }} />
- </button>;
-
- const dropdownContent =
- <div className="dropdown">
- <p>{label}</p>
- <button onPointerDown={this.clearBrush}>Clear brush</button>
- <input placeholder="-brush name-" ref={this._brushNameRef} onKeyPress={this.onBrushNameKeyPress}></input>
- </div>;
-
- return (
- <ButtonDropdown view={this.view} key={"brush dropdown"} button={button} dropdownContent={dropdownContent} />
- );
- }
-
- @action
- clearBrush() {
- RichTextMenu.Instance.brushIsEmpty = true;
- RichTextMenu.Instance.brushMarks = new Set();
- }
-
- @action
- fillBrush(state: EditorState<any>, dispatch: any) {
- if (!this.view) return;
-
- if (this.brushIsEmpty) {
- const selected_marks = this.getMarksInSelection(this.view.state);
- if (selected_marks.size >= 0) {
- this.brushMarks = selected_marks;
- this.brushIsEmpty = !this.brushIsEmpty;
- }
- }
- else {
- const { from, to, $from } = this.view.state.selection;
- if (!this.view.state.selection.empty && $from && $from.nodeAfter) {
- if (this.brushMarks && to - from > 0) {
- this.view.dispatch(this.view.state.tr.removeMark(from, to));
- Array.from(this.brushMarks).filter(m => m.type !== schema.marks.user_mark).forEach((mark: Mark) => {
- this.setMark(mark, this.view!.state, this.view!.dispatch);
- });
- }
- }
- else {
- this.brushIsEmpty = !this.brushIsEmpty;
- }
- }
- }
-
- @action toggleColorDropdown() { this.showColorDropdown = !this.showColorDropdown; }
- @action setActiveColor(color: string) { this.activeFontColor = color; }
-
- createColorButton() {
- const self = this;
- function onColorClick(e: React.PointerEvent) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch);
- }
- function changeColor(e: React.PointerEvent, color: string) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.setActiveColor(color);
- self.view && self.insertColor(self.activeFontColor, self.view.state, self.view.dispatch);
- }
-
- const button =
- <button className="antimodeMenu-button color-preview-button" title="" onPointerDown={onColorClick}>
- <FontAwesomeIcon icon="palette" size="lg" />
- <div className="color-preview" style={{ backgroundColor: this.activeFontColor }}></div>
- </button>;
-
- const dropdownContent =
- <div className="dropdown" >
- <p>Change font color:</p>
- <div className="color-wrapper">
- {this.fontColors.map(color => {
- if (color) {
- return this.activeFontColor === color ?
- <button className="color-button active" key={"active" + color} style={{ backgroundColor: color }} onPointerDown={e => changeColor(e, color)}></button> :
- <button className="color-button" key={"other" + color} style={{ backgroundColor: color }} onPointerDown={e => changeColor(e, color)}></button>;
- }
- })}
- </div>
- </div>;
-
- return (
- <ButtonDropdown view={this.view} key={"color dropdown"} button={button} dropdownContent={dropdownContent} />
- );
- }
-
- public insertColor(color: String, state: EditorState<any>, dispatch: any) {
- const colorMark = state.schema.mark(state.schema.marks.pFontColor, { color: color });
- if (state.selection.empty) {
- dispatch(state.tr.addStoredMark(colorMark));
- return false;
- }
- this.setMark(colorMark, state, dispatch);
- }
-
- @action toggleHighlightDropdown() { this.showHighlightDropdown = !this.showHighlightDropdown; }
- @action setActiveHighlight(color: string) { this.activeHighlightColor = color; }
-
- createHighlighterButton() {
- const self = this;
- function onHighlightClick(e: React.PointerEvent) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch);
- }
- function changeHighlight(e: React.PointerEvent, color: string) {
- e.preventDefault();
- e.stopPropagation();
- self.view && self.view.focus();
- self.setActiveHighlight(color);
- self.view && self.insertHighlight(self.activeHighlightColor, self.view.state, self.view.dispatch);
- }
-
- const button =
- <button className="antimodeMenu-button color-preview-button" title="" key="highilghter-button" onPointerDown={onHighlightClick}>
- <FontAwesomeIcon icon="highlighter" size="lg" />
- <div className="color-preview" style={{ backgroundColor: this.activeHighlightColor }}></div>
- </button>;
-
- const dropdownContent =
- <div className="dropdown">
- <p>Change highlight color:</p>
- <div className="color-wrapper">
- {this.highlightColors.map(color => {
- if (color) {
- return this.activeHighlightColor === color ?
- <button className="color-button active" key={`active ${color}`} style={{ backgroundColor: color }} onPointerDown={e => changeHighlight(e, color)}>{color === "transparent" ? "X" : ""}</button> :
- <button className="color-button" key={`inactive ${color}`} style={{ backgroundColor: color }} onPointerDown={e => changeHighlight(e, color)}>{color === "transparent" ? "X" : ""}</button>;
- }
- })}
- </div>
- </div>;
-
- return (
- <ButtonDropdown view={this.view} key={"highlighter"} button={button} dropdownContent={dropdownContent} />
- );
- }
-
- insertHighlight(color: String, state: EditorState<any>, dispatch: any) {
- if (state.selection.empty) return false;
- toggleMark(state.schema.marks.marker, { highlight: color })(state, dispatch);
- }
-
- @action toggleLinkDropdown() { this.showLinkDropdown = !this.showLinkDropdown; }
- @action setCurrentLink(link: string) { this.currentLink = link; }
-
- createLinkButton() {
- const self = this;
-
- function onLinkChange(e: React.ChangeEvent<HTMLInputElement>) {
- self.setCurrentLink(e.target.value);
- }
-
- const link = this.currentLink ? this.currentLink : "";
-
- const button = <FontAwesomeIcon icon="link" size="lg" />;
-
- const dropdownContent =
- <div className="dropdown link-menu">
- <p>Linked to:</p>
- <input value={link} placeholder="Enter URL" onChange={onLinkChange} />
- <button className="make-button" onPointerDown={e => this.makeLinkToURL(link, "onRight")}>Apply hyperlink</button>
- <div className="divider"></div>
- <button className="remove-button" onPointerDown={e => this.deleteLink()}>Remove link</button>
- </div>;
-
- return (
- <ButtonDropdown view={this.view} key={"link button"} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} />
- );
- }
-
- async getTextLinkTargetTitle() {
- if (!this.view) return;
-
- const node = this.view.state.selection.$from.nodeAfter;
- const link = node && node.marks.find(m => m.type.name === "link");
- if (link) {
- const href = link.attrs.href;
- if (href) {
- if (href.indexOf(Utils.prepend("/doc/")) === 0) {
- const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
- if (linkclicked) {
- const linkDoc = await DocServer.GetRefField(linkclicked);
- if (linkDoc instanceof Doc) {
- const anchor1 = await Cast(linkDoc.anchor1, Doc);
- const anchor2 = await Cast(linkDoc.anchor2, Doc);
- const 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(anchor1.title);
- }
- }
- }
- }
- } else {
- return href;
- }
- } else {
- return link.attrs.title;
- }
- }
- }
-
- // TODO: should check for valid URL
- makeLinkToURL = (target: String, lcoation: string) => {
- if (!this.view) return;
-
- let node = this.view.state.selection.$from.nodeAfter;
- let link = this.view.state.schema.mark(this.view.state.schema.marks.link, { href: target, location: location });
- this.view.dispatch(this.view.state.tr.removeMark(this.view.state.selection.from, this.view.state.selection.to, this.view.state.schema.marks.link));
- this.view.dispatch(this.view.state.tr.addMark(this.view.state.selection.from, this.view.state.selection.to, link));
- node = this.view.state.selection.$from.nodeAfter;
- link = node && node.marks.find(m => m.type.name === "link");
- }
-
- deleteLink = () => {
- if (!this.view) return;
-
- const node = this.view.state.selection.$from.nodeAfter;
- const link = node && node.marks.find(m => m.type === this.view!.state.schema.marks.link);
- const href = link!.attrs.href;
- if (href) {
- if (href.indexOf(Utils.prepend("/doc/")) === 0) {
- const linkclicked = href.replace(Utils.prepend("/doc/"), "").split("?")[0];
- if (linkclicked) {
- DocServer.GetRefField(linkclicked).then(async linkDoc => {
- if (linkDoc instanceof Doc) {
- LinkManager.Instance.deleteLink(linkDoc);
- this.view!.dispatch(this.view!.state.tr.removeMark(this.view!.state.selection.from, this.view!.state.selection.to, this.view!.state.schema.marks.link));
- }
- });
- }
- } else {
- if (node) {
- const { tr, schema, selection } = this.view.state;
- const extension = this.linkExtend(selection.$anchor, href);
- this.view.dispatch(tr.removeMark(extension.from, extension.to, schema.marks.link));
- }
- }
- }
- }
-
- linkExtend($start: ResolvedPos, href: string) {
- const mark = this.view!.state.schema.marks.link;
-
- let startIndex = $start.index();
- let endIndex = $start.indexAfter();
-
- while (startIndex > 0 && $start.parent.child(startIndex - 1).marks.filter(m => m.type === mark && m.attrs.href === href).length) startIndex--;
- while (endIndex < $start.parent.childCount && $start.parent.child(endIndex).marks.filter(m => m.type === mark && m.attrs.href === href).length) endIndex++;
-
- let startPos = $start.start();
- let endPos = startPos;
- for (let i = 0; i < endIndex; i++) {
- const size = $start.parent.child(i).nodeSize;
- if (i < startIndex) startPos += size;
- endPos += size;
- }
- return { from: startPos, to: endPos };
- }
-
- reference_node(pos: ResolvedPos<any>): ProsNode | null {
- if (!this.view) return null;
-
- let ref_node: ProsNode = this.view.state.doc;
- if (pos.nodeBefore !== null && pos.nodeBefore !== undefined) {
- ref_node = pos.nodeBefore;
- }
- else if (pos.nodeAfter !== null && pos.nodeAfter !== undefined) {
- ref_node = pos.nodeAfter;
- }
- else if (pos.pos > 0) {
- let skip = false;
- for (let i: number = pos.pos - 1; i > 0; i--) {
- this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode) => {
- if (node.isLeaf && !skip) {
- ref_node = node;
- skip = true;
- }
-
- });
- }
- }
- if (!ref_node.isLeaf && ref_node.childCount > 0) {
- ref_node = ref_node.child(0);
- }
- return ref_node;
- }
-
- @action onPointerEnter(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = true; }
- @action onPointerLeave(e: React.PointerEvent) { RichTextMenu.Instance.overMenu = false; }
-
- @action
- toggleMenuPin = (e: React.MouseEvent) => {
- this.Pinned = !this.Pinned;
- if (!this.Pinned) {
- this.fadeOut(true);
- }
- }
-
- @action
- protected toggleCollapse = (e: React.MouseEvent) => {
- this.collapsed = !this.collapsed;
- setTimeout(() => {
- const x = Math.min(this._left, window.innerWidth - RichTextMenu.Instance.width);
- RichTextMenu.Instance.jumpTo(x, this._top);
- }, 0);
- }
-
- render() {
-
- const row1 = <div className="antimodeMenu-row" key="row1" style={{ display: this.collapsed ? "none" : undefined }}>{[
- this.createButton("bold", "Bold", this.boldActive, toggleMark(schema.marks.strong)),
- this.createButton("italic", "Italic", this.italicsActive, toggleMark(schema.marks.em)),
- this.createButton("underline", "Underline", this.underlineActive, toggleMark(schema.marks.underline)),
- this.createButton("strikethrough", "Strikethrough", this.strikethroughActive, toggleMark(schema.marks.strikethrough)),
- this.createButton("superscript", "Superscript", this.superscriptActive, toggleMark(schema.marks.superscript)),
- this.createButton("subscript", "Subscript", this.subscriptActive, toggleMark(schema.marks.subscript)),
- this.createColorButton(),
- this.createHighlighterButton(),
- this.createLinkButton(),
- this.createBrushButton(),
- this.createButton("indent", "Summarize", undefined, this.insertSummarizer),
- ]}</div>;
-
- const row2 = <div className="antimodeMenu-row row-2" key="antimodemenu row2">
- <div key="row" style={{ display: this.collapsed ? "none" : undefined }}>
- {[this.createMarksDropdown(this.activeFontSize, this.fontSizeOptions, "font size"),
- this.createMarksDropdown(this.activeFontFamily, this.fontFamilyOptions, "font family"),
- this.createNodesDropdown(this.activeListType, this.listTypeOptions, "nodes")]}
- </div>
- <div key="button">
- <div key="collapser">
- <button className="antimodeMenu-button" key="collapse menu" title="Collapse menu" onClick={this.toggleCollapse} style={{ backgroundColor: this.collapsed ? "#121212" : "", width: 25 }}>
- <FontAwesomeIcon icon="chevron-left" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.3s", transform: `rotate(${this.collapsed ? 180 : 0}deg)` }} />
- </button>
- </div>
- <button className="antimodeMenu-button" key="pin menu" title="Pin menu" onClick={this.toggleMenuPin} style={{ backgroundColor: this.Pinned ? "#121212" : "", display: this.collapsed ? "none" : undefined }}>
- <FontAwesomeIcon icon="thumbtack" size="lg" style={{ transitionProperty: "transform", transitionDuration: "0.1s", transform: `rotate(${this.Pinned ? 45 : 0}deg)` }} />
- </button>
- {this.getDragger()}
- </div>
- </div>;
-
- return (
- <div className="richTextMenu" onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
- {this.getElementWithRows([row1, row2], 2, false)}
- </div>
- );
- }
-}
-
-interface ButtonDropdownProps {
- view?: EditorView;
- button: JSX.Element;
- dropdownContent: JSX.Element;
- openDropdownOnButton?: boolean;
-}
-
-@observer
-class ButtonDropdown extends React.Component<ButtonDropdownProps> {
-
- @observable private showDropdown: boolean = false;
- private ref: HTMLDivElement | null = null;
-
- componentDidMount() {
- document.addEventListener("pointerdown", this.onBlur);
- }
-
- componentWillUnmount() {
- document.removeEventListener("pointerdown", this.onBlur);
- }
-
- @action
- setShowDropdown(show: boolean) {
- this.showDropdown = show;
- }
- @action
- toggleDropdown() {
- this.showDropdown = !this.showDropdown;
- }
-
- onDropdownClick = (e: React.PointerEvent) => {
- e.preventDefault();
- e.stopPropagation();
- this.props.view && this.props.view.focus();
- this.toggleDropdown();
- }
-
- onBlur = (e: PointerEvent) => {
- setTimeout(() => {
- if (this.ref !== null && !this.ref.contains(e.target as Node)) {
- this.setShowDropdown(false);
- }
- }, 0);
- }
-
- render() {
- return (
- <div className="button-dropdown-wrapper" ref={node => this.ref = node}>
- {this.props.openDropdownOnButton ?
- <button className="antimodeMenu-button dropdown-button-combined" onPointerDown={this.onDropdownClick}>
- {this.props.button}
- <FontAwesomeIcon icon="caret-down" size="sm" />
- </button> :
- <>
- {this.props.button}
- <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}>
- <FontAwesomeIcon icon="caret-down" size="sm" />
- </button>
- </>}
-
- {this.showDropdown ? this.props.dropdownContent : (null)}
- </div>
- );
- }
-} \ No newline at end of file
diff --git a/src/client/util/RichTextRules.ts b/src/client/util/RichTextRules.ts
index 8b11be6fb..7ce6bbf85 100644
--- a/src/client/util/RichTextRules.ts
+++ b/src/client/util/RichTextRules.ts
@@ -7,10 +7,10 @@ import { Cast, NumCast } from "../../new_fields/Types";
import { returnFalse, Utils } from "../../Utils";
import { DocServer } from "../DocServer";
import { Docs, DocUtils } from "../documents/Documents";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
+import { FormattedTextBox } from "../views/nodes/formattedText/FormattedTextBox";
import { wrappingInputRule } from "./prosemirrorPatches";
-import RichTextMenu from "./RichTextMenu";
-import { schema } from "./RichTextSchema";
+import RichTextMenu from "../views/nodes/formattedText/RichTextMenu";
+import { schema } from "./schema_rts";
export class RichTextRules {
public Document: Doc;
diff --git a/src/client/util/RichTextSchema.tsx b/src/client/util/RichTextSchema.tsx
deleted file mode 100644
index d5dd05aa4..000000000
--- a/src/client/util/RichTextSchema.tsx
+++ /dev/null
@@ -1,1263 +0,0 @@
-import { IReactionDisposer, observable, reaction, runInAction } from "mobx";
-import { baseKeymap, toggleMark } from "prosemirror-commands";
-import { redo, undo } from "prosemirror-history";
-import { keymap } from "prosemirror-keymap";
-import { DOMOutputSpecArray, Fragment, MarkSpec, Node, NodeSpec, Schema, Slice } from "prosemirror-model";
-import { bulletList, listItem, orderedList } from 'prosemirror-schema-list';
-import { EditorState, NodeSelection, Plugin, TextSelection } from "prosemirror-state";
-import { StepMap } from "prosemirror-transform";
-import { EditorView } from "prosemirror-view";
-import * as ReactDOM from 'react-dom';
-import { Doc, DocListCast, Field, HeightSym, WidthSym } from "../../new_fields/Doc";
-import { Id } from "../../new_fields/FieldSymbols";
-import { List } from "../../new_fields/List";
-import { ObjectField } from "../../new_fields/ObjectField";
-import { listSpec } from "../../new_fields/Schema";
-import { SchemaHeaderField } from "../../new_fields/SchemaHeaderField";
-import { ComputedField } from "../../new_fields/ScriptField";
-import { BoolCast, Cast, NumCast, StrCast, FieldValue } from "../../new_fields/Types";
-import { emptyFunction, returnEmptyString, returnFalse, returnOne, Utils, returnZero } from "../../Utils";
-import { DocServer } from "../DocServer";
-import { Docs } from "../documents/Documents";
-import { CollectionViewType } from "../views/collections/CollectionView";
-import { DocumentView } from "../views/nodes/DocumentView";
-import { FormattedTextBox } from "../views/nodes/FormattedTextBox";
-import { DocumentManager } from "./DocumentManager";
-import ParagraphNodeSpec from "./ParagraphNodeSpec";
-import { Transform } from "./Transform";
-import React = require("react");
-
-const
- blockquoteDOM: DOMOutputSpecArray = ["blockquote", 0],
- hrDOM: DOMOutputSpecArray = ["hr"],
- preDOM: DOMOutputSpecArray = ["pre", ["code", 0]],
- brDOM: DOMOutputSpecArray = ["br"],
- ulDOM: DOMOutputSpecArray = ["ul", 0];
-
-// :: Object
-// [Specs](#model.NodeSpec) for the nodes defined in this schema.
-export const nodes: { [index: string]: NodeSpec } = {
- // :: NodeSpec The top level document node.
- doc: {
- content: "block+"
- },
-
- footnote: {
- group: "inline",
- content: "inline*",
- inline: true,
- attrs: {
- visibility: { default: false }
- },
- // This makes the view treat the node as a leaf, even though it
- // technically has content
- atom: true,
- toDOM: () => ["footnote", 0],
- parseDOM: [{ tag: "footnote" }]
- },
-
- paragraph: ParagraphNodeSpec,
-
- // :: NodeSpec A blockquote (`<blockquote>`) wrapping one or more blocks.
- blockquote: {
- content: "block+",
- group: "block",
- defining: true,
- parseDOM: [{ tag: "blockquote" }],
- toDOM() { return blockquoteDOM; }
- },
-
- // :: NodeSpec A horizontal rule (`<hr>`).
- horizontal_rule: {
- group: "block",
- parseDOM: [{ tag: "hr" }],
- toDOM() { return hrDOM; }
- },
-
- // :: NodeSpec A heading textblock, with a `level` attribute that
- // should hold the number 1 to 6. Parsed and serialized as `<h1>` to
- // `<h6>` elements.
- heading: {
- attrs: { level: { default: 1 } },
- content: "inline*",
- group: "block",
- defining: true,
- parseDOM: [{ tag: "h1", attrs: { level: 1 } },
- { tag: "h2", attrs: { level: 2 } },
- { tag: "h3", attrs: { level: 3 } },
- { tag: "h4", attrs: { level: 4 } },
- { tag: "h5", attrs: { level: 5 } },
- { tag: "h6", attrs: { level: 6 } }],
- toDOM(node: any) { return ["h" + node.attrs.level, 0]; }
- },
-
- // :: NodeSpec A code listing. Disallows marks or non-text inline
- // nodes by default. Represented as a `<pre>` element with a
- // `<code>` element inside of it.
- code_block: {
- content: "text*",
- marks: "",
- group: "block",
- code: true,
- defining: true,
- parseDOM: [{ tag: "pre", preserveWhitespace: "full" }],
- toDOM() { return preDOM; }
- },
-
- // :: NodeSpec The text node.
- text: {
- group: "inline"
- },
-
- dashComment: {
- attrs: {
- docid: { default: "" },
- },
- inline: true,
- group: "inline",
- toDOM(node) {
- const attrs = { style: `width: 40px` };
- return ["span", { ...node.attrs, ...attrs }, "←"];
- },
- },
-
- summary: {
- inline: true,
- attrs: {
- visibility: { default: false },
- text: { default: undefined },
- textslice: { default: undefined },
- },
- group: "inline",
- toDOM(node) {
- const attrs = { style: `width: 40px` };
- return ["span", { ...node.attrs, ...attrs }];
- },
- },
-
- // :: NodeSpec An inline image (`<img>`) node. Supports `src`,
- // `alt`, and `href` attributes. The latter two default to the empty
- // string.
- image: {
- inline: true,
- attrs: {
- src: {},
- agnostic: { default: null },
- width: { default: 100 },
- alt: { default: null },
- title: { default: null },
- float: { default: "left" },
- location: { default: "onRight" },
- docid: { default: "" }
- },
- group: "inline",
- draggable: true,
- parseDOM: [{
- tag: "img[src]", getAttrs(dom: any) {
- return {
- src: dom.getAttribute("src"),
- title: dom.getAttribute("title"),
- alt: dom.getAttribute("alt"),
- width: Math.min(100, Number(dom.getAttribute("width"))),
- };
- }
- }],
- // TODO if we don't define toDom, dragging the image crashes. Why?
- toDOM(node) {
- const attrs = { style: `width: ${node.attrs.width}` };
- return ["img", { ...node.attrs, ...attrs }];
- }
- },
-
- dashDoc: {
- inline: true,
- attrs: {
- width: { default: 200 },
- height: { default: 100 },
- title: { default: null },
- float: { default: "right" },
- location: { default: "onRight" },
- hidden: { default: false },
- fieldKey: { default: "" },
- docid: { default: "" },
- alias: { default: "" }
- },
- group: "inline",
- draggable: false,
- toDOM(node) {
- const attrs = { style: `width: ${node.attrs.width}, height: ${node.attrs.height}` };
- return ["div", { ...node.attrs, ...attrs }];
- }
- },
-
- dashField: {
- inline: true,
- attrs: {
- fieldKey: { default: "" },
- docid: { default: "" }
- },
- group: "inline",
- draggable: false,
- toDOM(node) {
- const attrs = { style: `width: ${node.attrs.width}, height: ${node.attrs.height}` };
- return ["div", { ...node.attrs, ...attrs }];
- }
- },
-
- video: {
- inline: true,
- attrs: {
- src: {},
- width: { default: "100px" },
- alt: { default: null },
- title: { default: null }
- },
- group: "inline",
- draggable: true,
- parseDOM: [{
- tag: "video[src]", getAttrs(dom: any) {
- return {
- src: dom.getAttribute("src"),
- title: dom.getAttribute("title"),
- alt: dom.getAttribute("alt"),
- width: Math.min(100, Number(dom.getAttribute("width"))),
- };
- }
- }],
- toDOM(node) {
- const attrs = { style: `width: ${node.attrs.width}` };
- return ["video", { ...node.attrs, ...attrs }];
- }
- },
-
- // :: NodeSpec A hard line break, represented in the DOM as `<br>`.
- hard_break: {
- inline: true,
- group: "inline",
- selectable: false,
- parseDOM: [{ tag: "br" }],
- toDOM() { return brDOM; }
- },
-
- ordered_list: {
- ...orderedList,
- content: 'list_item+',
- group: 'block',
- attrs: {
- bulletStyle: { default: 0 },
- mapStyle: { default: "decimal" },
- setFontSize: { default: undefined },
- setFontFamily: { default: "inherit" },
- setFontColor: { default: "inherit" },
- inheritedFontSize: { default: undefined },
- visibility: { default: true },
- indent: { default: undefined }
- },
- toDOM(node: Node<any>) {
- if (node.attrs.mapStyle === "bullet") return ['ul', 0];
- const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : "";
- const fsize = node.attrs.setFontSize ? node.attrs.setFontSize : node.attrs.inheritedFontSize;
- const ffam = node.attrs.setFontFamily;
- const color = node.attrs.setFontColor;
- return node.attrs.visibility ?
- ['ol', { class: `${map}-ol`, style: `list-style: none; font-size: ${fsize}; font-family: ${ffam}; color:${color}; margin-left: ${node.attrs.indent}` }, 0] :
- ['ol', { class: `${map}-ol`, style: `list-style: none;` }];
- }
- },
-
- bullet_list: {
- ...bulletList,
- content: 'list_item+',
- group: 'block',
- // parseDOM: [{ tag: "ul" }, { style: 'list-style-type=disc' }],
- toDOM(node: Node<any>) {
- return ['ul', 0];
- }
- },
-
- list_item: {
- attrs: {
- bulletStyle: { default: 0 },
- mapStyle: { default: "decimal" },
- visibility: { default: true }
- },
- ...listItem,
- content: 'paragraph block*',
- toDOM(node: any) {
- const map = node.attrs.bulletStyle ? node.attrs.mapStyle + node.attrs.bulletStyle : "";
- return node.attrs.visibility ? ["li", { class: `${map}` }, 0] : ["li", { class: `${map}` }, "..."];
- //return ["li", { class: `${map}` }, 0];
- }
- },
-};
-
-const emDOM: DOMOutputSpecArray = ["em", 0];
-const strongDOM: DOMOutputSpecArray = ["strong", 0];
-const codeDOM: DOMOutputSpecArray = ["code", 0];
-
-// :: Object [Specs](#model.MarkSpec) for the marks in the schema.
-export const marks: { [index: string]: MarkSpec } = {
- // :: MarkSpec A link. Has `href` and `title` attributes. `title`
- // defaults to the empty string. Rendered and parsed as an `<a>`
- // element.
- link: {
- attrs: {
- href: {},
- targetId: { default: "" },
- linkId: { default: "" },
- 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
- },
- inclusive: false,
- parseDOM: [{
- tag: "a[href]", getAttrs(dom: any) {
- return { href: dom.getAttribute("href"), location: dom.getAttribute("location"), title: dom.getAttribute("title"), targetId: dom.getAttribute("id") };
- }
- }],
- toDOM(node: any) {
- return node.attrs.docref && node.attrs.title ?
- ["div", ["span", `"`], ["span", 0], ["span", `"`], ["br"], ["a", { ...node.attrs, class: "prosemirror-attribution", title: `${node.attrs.title}` }, node.attrs.title], ["br"]] :
- ["a", { ...node.attrs, id: node.attrs.linkId + node.attrs.targetId, title: `${node.attrs.title}` }, 0];
- }
- },
-
-
- // :: MarkSpec Coloring on text. Has `color` attribute that defined the color of the marked text.
- pFontColor: {
- attrs: {
- color: { default: "#000" }
- },
- inclusive: true,
- parseDOM: [{
- tag: "span", getAttrs(dom: any) {
- return { color: dom.getAttribute("color") };
- }
- }],
- toDOM(node: any) {
- return node.attrs.color ? ['span', { style: 'color:' + node.attrs.color }] : ['span', 0];
- }
- },
-
- marker: {
- attrs: {
- highlight: { default: "transparent" }
- },
- inclusive: true,
- parseDOM: [{
- tag: "span", getAttrs(dom: any) {
- return { highlight: dom.getAttribute("backgroundColor") };
- }
- }],
- toDOM(node: any) {
- return node.attrs.highlight ? ['span', { style: 'background-color:' + node.attrs.highlight }] : ['span', { style: 'background-color: transparent' }];
- }
- },
-
- // :: MarkSpec An emphasis mark. Rendered as an `<em>` element.
- // Has parse rules that also match `<i>` and `font-style: italic`.
- em: {
- parseDOM: [{ tag: "i" }, { tag: "em" }, { style: "font-style: italic" }],
- toDOM() { return emDOM; }
- },
-
- // :: MarkSpec A strong mark. Rendered as `<strong>`, parse rules
- // also match `<b>` and `font-weight: bold`.
- strong: {
- parseDOM: [{ tag: "strong" },
- { tag: "b" },
- { style: "font-weight" }],
- toDOM() { return strongDOM; }
- },
-
- strikethrough: {
- parseDOM: [
- { tag: 'strike' },
- { style: 'text-decoration=line-through' },
- { style: 'text-decoration-line=line-through' }
- ],
- toDOM: () => ['span', {
- style: 'text-decoration-line:line-through'
- }]
- },
-
- subscript: {
- excludes: 'superscript',
- parseDOM: [
- { tag: 'sub' },
- { style: 'vertical-align=sub' }
- ],
- toDOM: () => ['sub']
- },
-
- superscript: {
- excludes: 'subscript',
- parseDOM: [
- { tag: 'sup' },
- { style: 'vertical-align=super' }
- ],
- toDOM: () => ['sup']
- },
-
- mbulletType: {
- attrs: {
- bulletType: { default: "decimal" }
- },
- toDOM(node: any) {
- return ['span', {
- style: `background: ${node.attrs.bulletType === "decimal" ? "yellow" : node.attrs.bulletType === "upper-alpha" ? "blue" : "green"}`
- }];
- }
- },
-
- metadata: {
- toDOM() {
- return ['span', { style: 'font-size:75%; background:rgba(100, 100, 100, 0.2); ' }];
- }
- },
- metadataKey: {
- toDOM() {
- return ['span', { style: 'font-style:italic; ' }];
- }
- },
- metadataVal: {
- toDOM() {
- return ['span'];
- }
- },
-
- summarizeInclusive: {
- parseDOM: [
- {
- tag: "span",
- getAttrs: (p: any) => {
- if (typeof (p) !== "string") {
- const style = getComputedStyle(p);
- if (style.textDecoration === "underline") return null;
- if (p.parentElement.outerHTML.indexOf("text-decoration: underline") !== -1 &&
- p.parentElement.outerHTML.indexOf("text-decoration-style: solid") !== -1) {
- return null;
- }
- }
- return false;
- }
- },
- ],
- inclusive: true,
- toDOM() {
- return ['span', {
- style: 'text-decoration: underline; text-decoration-style: solid; text-decoration-color: rgba(204, 206, 210, 0.92)'
- }];
- }
- },
-
- summarize: {
- inclusive: false,
- parseDOM: [
- {
- tag: "span",
- getAttrs: (p: any) => {
- if (typeof (p) !== "string") {
- const style = getComputedStyle(p);
- if (style.textDecoration === "underline") return null;
- if (p.parentElement.outerHTML.indexOf("text-decoration: underline") !== -1 &&
- p.parentElement.outerHTML.indexOf("text-decoration-style: dotted") !== -1) {
- return null;
- }
- }
- return false;
- }
- },
- ],
- toDOM() {
- return ['span', {
- style: 'text-decoration: underline; text-decoration-style: dotted; text-decoration-color: rgba(204, 206, 210, 0.92)'
- }];
- }
- },
-
- underline: {
- parseDOM: [
- {
- tag: "span",
- getAttrs: (p: any) => {
- if (typeof (p) !== "string") {
- const style = getComputedStyle(p);
- if (style.textDecoration === "underline" || p.parentElement.outerHTML.indexOf("text-decoration-style:line") !== -1) {
- return null;
- }
- }
- return false;
- }
- }
- // { style: "text-decoration=underline" }
- ],
- toDOM: () => ['span', {
- style: 'text-decoration:underline;text-decoration-style:line'
- }]
- },
-
- search_highlight: {
- attrs: {
- selected: { default: false }
- },
- parseDOM: [{ style: 'background: yellow' }],
- toDOM(node: any) {
- return ['span', {
- style: `background: ${node.attrs.selected ? "orange" : "yellow"}`
- }];
- }
- },
-
- // the id of the user who entered the text
- user_mark: {
- attrs: {
- userid: { default: "" },
- modified: { default: "when?" }, // 1 second intervals since 1970
- },
- group: "inline",
- toDOM(node: any) {
- const uid = node.attrs.userid.replace(".", "").replace("@", "");
- const min = Math.round(node.attrs.modified / 12);
- const hr = Math.round(min / 60);
- const day = Math.round(hr / 60 / 24);
- const remote = node.attrs.userid !== Doc.CurrentUserEmail ? " UM-remote" : "";
- return ['span', { class: "UM-" + uid + remote + " UM-min-" + min + " UM-hr-" + hr + " UM-day-" + day }, 0];
- }
- },
- // the id of the user who entered the text
- user_tag: {
- attrs: {
- userid: { default: "" },
- modified: { default: "when?" }, // 1 second intervals since 1970
- tag: { default: "" }
- },
- group: "inline",
- inclusive: false,
- toDOM(node: any) {
- const uid = node.attrs.userid.replace(".", "").replace("@", "");
- return ['span', { class: "userTag-" + uid + " userTag-" + node.attrs.tag }, 0];
- }
- },
-
-
- // :: MarkSpec Code font mark. Represented as a `<code>` element.
- code: {
- parseDOM: [{ tag: "code" }],
- toDOM() { return codeDOM; }
- },
-
- /* FONTS */
- pFontFamily: {
- attrs: {
- family: { default: "Crimson Text" },
- },
- parseDOM: [{
- tag: "span", getAttrs(dom: any) {
- const cstyle = getComputedStyle(dom);
- if (cstyle.font) {
- if (cstyle.font.indexOf("Times New Roman") !== -1) return { family: "Times New Roman" };
- if (cstyle.font.indexOf("Arial") !== -1) return { family: "Arial" };
- if (cstyle.font.indexOf("Georgia") !== -1) return { family: "Georgia" };
- if (cstyle.font.indexOf("Comic Sans") !== -1) return { family: "Comic Sans MS" };
- if (cstyle.font.indexOf("Tahoma") !== -1) return { family: "Tahoma" };
- if (cstyle.font.indexOf("Crimson") !== -1) return { family: "Crimson Text" };
- }
- }
- }],
- toDOM: (node) => ['span', {
- style: `font-family: "${node.attrs.family}";`
- }]
- },
-
- /** FONT SIZES */
- pFontSize: {
- attrs: {
- fontSize: { default: 10 }
- },
- parseDOM: [{ style: 'font-size: 10px;' }],
- toDOM: (node) => ['span', {
- style: `font-size: ${node.attrs.fontSize}px;`
- }]
- },
-};
-
-export class ImageResizeView {
- _handle: HTMLElement;
- _img: HTMLElement;
- _outer: HTMLElement;
- constructor(node: any, view: any, getPos: any, addDocTab: any) {
- this._handle = document.createElement("span");
- this._img = document.createElement("img");
- this._outer = document.createElement("span");
- this._outer.style.position = "relative";
- this._outer.style.width = node.attrs.width;
- this._outer.style.height = node.attrs.height;
- this._outer.style.display = "inline-block";
- this._outer.style.overflow = "hidden";
- (this._outer.style as any).float = node.attrs.float;
-
- this._img.setAttribute("src", node.attrs.src);
- this._img.style.width = "100%";
- this._handle.style.position = "absolute";
- this._handle.style.width = "20px";
- this._handle.style.height = "20px";
- this._handle.style.backgroundColor = "blue";
- this._handle.style.borderRadius = "15px";
- this._handle.style.display = "none";
- this._handle.style.bottom = "-10px";
- this._handle.style.right = "-10px";
- const self = this;
- this._img.onclick = function (e: any) {
- e.stopPropagation();
- e.preventDefault();
- if (view.state.selection.node && view.state.selection.node.type !== view.state.schema.nodes.image) {
- view.dispatch(view.state.tr.setSelection(new NodeSelection(view.state.doc.resolve(view.state.selection.from - 2))));
- }
- };
- this._img.onpointerdown = function (e: any) {
- if (e.ctrlKey) {
- e.preventDefault();
- e.stopPropagation();
- DocServer.GetRefField(node.attrs.docid).then(async linkDoc =>
- (linkDoc instanceof Doc) &&
- DocumentManager.Instance.FollowLink(linkDoc, view.state.schema.Document,
- document => addDocTab(document, node.attrs.location ? node.attrs.location : "inTab"), false));
- }
- };
- this._handle.onpointerdown = function (e: any) {
- e.preventDefault();
- e.stopPropagation();
- const wid = Number(getComputedStyle(self._img).width.replace(/px/, ""));
- const hgt = Number(getComputedStyle(self._img).height.replace(/px/, ""));
- const startX = e.pageX;
- const startWidth = parseFloat(node.attrs.width);
- const onpointermove = (e: any) => {
- const currentX = e.pageX;
- const diffInPx = currentX - startX;
- self._outer.style.width = `${startWidth + diffInPx}`;
- self._outer.style.height = `${(startWidth + diffInPx) * hgt / wid}`;
- };
-
- const onpointerup = () => {
- document.removeEventListener("pointermove", onpointermove);
- document.removeEventListener("pointerup", onpointerup);
- const pos = view.state.selection.from;
- view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, { ...node.attrs, width: self._outer.style.width, height: self._outer.style.height }));
- view.dispatch(view.state.tr.setSelection(new NodeSelection(view.state.doc.resolve(pos))));
- };
-
- document.addEventListener("pointermove", onpointermove);
- document.addEventListener("pointerup", onpointerup);
- };
-
- this._outer.appendChild(this._img);
- this._outer.appendChild(this._handle);
- (this as any).dom = this._outer;
- }
-
- selectNode() {
- this._img.classList.add("ProseMirror-selectednode");
-
- this._handle.style.display = "";
- }
-
- deselectNode() {
- this._img.classList.remove("ProseMirror-selectednode");
-
- this._handle.style.display = "none";
- }
-}
-
-
-export class DashDocCommentView {
- _collapsed: HTMLElement;
- _view: any;
- constructor(node: any, view: any, getPos: any) {
- this._collapsed = document.createElement("span");
- this._collapsed.className = "formattedTextBox-inlineComment";
- this._collapsed.id = "DashDocCommentView-" + node.attrs.docid;
- this._view = view;
- const targetNode = () => { // search forward in the prosemirror doc for the attached dashDocNode that is the target of the comment anchor
- for (let i = getPos() + 1; i < view.state.doc.content.size; i++) {
- const m = view.state.doc.nodeAt(i);
- if (m && m.type === view.state.schema.nodes.dashDoc && m.attrs.docid === node.attrs.docid) {
- return { node: m, pos: i, hidden: m.attrs.hidden } as { node: any, pos: number, hidden: boolean };
- }
- }
- const dashDoc = view.state.schema.nodes.dashDoc.create({ width: 75, height: 35, title: "dashDoc", docid: node.attrs.docid, float: "right" });
- view.dispatch(view.state.tr.insert(getPos() + 1, dashDoc));
- setTimeout(() => { try { view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.tr.doc, getPos() + 2))); } catch (e) { } }, 0);
- return undefined;
- };
- this._collapsed.onpointerdown = (e: any) => {
- e.stopPropagation();
- };
- this._collapsed.onpointerup = (e: any) => {
- const target = targetNode();
- if (target) {
- const expand = target.hidden;
- const tr = view.state.tr.setNodeMarkup(target.pos, undefined, { ...target.node.attrs, hidden: target.node.attrs.hidden ? false : true });
- view.dispatch(tr.setSelection(TextSelection.create(tr.doc, getPos() + (expand ? 2 : 1)))); // update the attrs
- setTimeout(() => {
- expand && DocServer.GetRefField(node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc));
- try { view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.tr.doc, getPos() + (expand ? 2 : 1)))); } catch (e) { }
- }, 0);
- }
- e.stopPropagation();
- };
- this._collapsed.onpointerenter = (e: any) => {
- DocServer.GetRefField(node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc, false));
- e.preventDefault();
- e.stopPropagation();
- };
- this._collapsed.onpointerleave = (e: any) => {
- DocServer.GetRefField(node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowUnhighlight());
- e.preventDefault();
- e.stopPropagation();
- };
- (this as any).dom = this._collapsed;
- }
- selectNode() { }
-}
-
-export class DashDocView {
- _dashSpan: HTMLDivElement;
- _outer: HTMLElement;
- _dashDoc: Doc | undefined;
- _reactionDisposer: IReactionDisposer | undefined;
- _renderDisposer: IReactionDisposer | undefined;
- _textBox: FormattedTextBox;
-
- getDocTransform = () => {
- const { scale, translateX, translateY } = Utils.GetScreenTransform(this._outer);
- return new Transform(-translateX, -translateY, 1).scale(1 / this.contentScaling() / scale);
- }
- contentScaling = () => NumCast(this._dashDoc!._nativeWidth) > 0 ? this._dashDoc![WidthSym]() / NumCast(this._dashDoc!._nativeWidth) : 1;
- outerFocus = (target: Doc) => this._textBox.props.focus(this._textBox.props.Document); // ideally, this would scroll to show the focus target
- constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
- this._textBox = tbox;
- this._dashSpan = document.createElement("div");
- this._outer = document.createElement("span");
- this._outer.style.position = "relative";
- this._outer.style.textIndent = "0";
- this._outer.style.border = "1px solid " + StrCast(tbox.layoutDoc.color, (Cast(Doc.UserDoc().activeWorkspace, Doc, null).darkScheme ? "dimGray" : "lightGray"));
- this._outer.style.width = node.attrs.width;
- this._outer.style.height = node.attrs.height;
- this._outer.style.display = node.attrs.hidden ? "none" : "inline-block";
- // this._outer.style.overflow = "hidden"; // bcz: not sure if this is needed. if it's used, then the doc doesn't highlight when you hover over a docComment
- (this._outer.style as any).float = node.attrs.float;
-
- this._dashSpan.style.width = node.attrs.width;
- this._dashSpan.style.height = node.attrs.height;
- this._dashSpan.style.position = "absolute";
- this._dashSpan.style.display = "inline-block";
- this._dashSpan.onpointerleave = () => {
- const ele = document.getElementById("DashDocCommentView-" + node.attrs.docid);
- if (ele) {
- (ele as HTMLDivElement).style.backgroundColor = "";
- }
- };
- this._dashSpan.onpointerenter = () => {
- const ele = document.getElementById("DashDocCommentView-" + node.attrs.docid);
- if (ele) {
- (ele as HTMLDivElement).style.backgroundColor = "orange";
- }
- };
- const removeDoc = () => {
- const pos = getPos();
- const ns = new NodeSelection(view.state.doc.resolve(pos));
- view.dispatch(view.state.tr.setSelection(ns).deleteSelection());
- return true;
- };
- const alias = node.attrs.alias;
-
- const docid = node.attrs.docid || tbox.props.Document[Id];// tbox.props.DataDoc?.[Id] || tbox.dataDoc?.[Id];
- DocServer.GetRefField(docid + alias).then(async dashDoc => {
- if (!(dashDoc instanceof Doc)) {
- alias && DocServer.GetRefField(docid).then(async dashDocBase => {
- if (dashDocBase instanceof Doc) {
- const aliasedDoc = Doc.MakeAlias(dashDocBase, docid + alias);
- aliasedDoc.layoutKey = "layout";
- node.attrs.fieldKey && Doc.makeCustomViewClicked(aliasedDoc, Docs.Create.StackingDocument, node.attrs.fieldKey, undefined);
- self.doRender(aliasedDoc, removeDoc, node, view, getPos);
- }
- });
- } else {
- self.doRender(dashDoc, removeDoc, node, view, getPos);
- }
- });
- const self = this;
- this._dashSpan.onkeydown = function (e: any) {
- e.stopPropagation();
- if (e.key === "Tab" || e.key === "Enter") {
- e.preventDefault();
- }
- };
- this._dashSpan.onkeypress = function (e: any) { e.stopPropagation(); };
- this._dashSpan.onwheel = function (e: any) { e.preventDefault(); };
- this._dashSpan.onkeyup = function (e: any) { e.stopPropagation(); };
- this._outer.appendChild(this._dashSpan);
- (this as any).dom = this._outer;
- }
- doRender(dashDoc: Doc, removeDoc: any, node: any, view: any, getPos: any) {
- this._dashDoc = dashDoc;
- const self = this;
- const dashLayoutDoc = Doc.Layout(dashDoc);
- const finalLayout = node.attrs.docid ? dashDoc : Doc.expandTemplateLayout(dashLayoutDoc, dashDoc, node.attrs.fieldKey);
- if (!finalLayout) setTimeout(() => self.doRender(dashDoc, removeDoc, node, view, getPos), 0);
- else {
- this._reactionDisposer?.();
- this._reactionDisposer = reaction(() => ({ dim: [finalLayout[WidthSym](), finalLayout[HeightSym]()], color: finalLayout.color }), ({ dim, color }) => {
- this._dashSpan.style.width = this._outer.style.width = Math.max(20, dim[0]) + "px";
- this._dashSpan.style.height = this._outer.style.height = Math.max(20, dim[1]) + "px";
- this._outer.style.border = "1px solid " + StrCast(finalLayout.color, (Cast(Doc.UserDoc().activeWorkspace, Doc, null).darkScheme ? "dimGray" : "lightGray"));
- }, { fireImmediately: true });
- const doReactRender = (finalLayout: Doc, resolvedDataDoc: Doc) => {
- ReactDOM.unmountComponentAtNode(this._dashSpan);
- ReactDOM.render(<DocumentView
- Document={finalLayout}
- DataDoc={resolvedDataDoc}
- LibraryPath={this._textBox.props.LibraryPath}
- fitToBox={BoolCast(dashDoc._fitToBox)}
- addDocument={returnFalse}
- rootSelected={this._textBox.props.isSelected}
- removeDocument={removeDoc}
- ScreenToLocalTransform={this.getDocTransform}
- addDocTab={this._textBox.props.addDocTab}
- pinToPres={returnFalse}
- renderDepth={self._textBox.props.renderDepth + 1}
- NativeHeight={returnZero}
- NativeWidth={returnZero}
- PanelWidth={finalLayout[WidthSym]}
- PanelHeight={finalLayout[HeightSym]}
- focus={this.outerFocus}
- backgroundColor={returnEmptyString}
- parentActive={returnFalse}
- whenActiveChanged={returnFalse}
- bringToFront={emptyFunction}
- dontRegisterView={false}
- ContainingCollectionView={this._textBox.props.ContainingCollectionView}
- ContainingCollectionDoc={this._textBox.props.ContainingCollectionDoc}
- ContentScaling={this.contentScaling}
- />, this._dashSpan);
- if (node.attrs.width !== dashDoc._width + "px" || node.attrs.height !== dashDoc._height + "px") {
- try { // bcz: an exception will be thrown if two aliases are open at the same time when a doc view comment is made
- view.dispatch(view.state.tr.setNodeMarkup(getPos(), null, { ...node.attrs, width: dashDoc._width + "px", height: dashDoc._height + "px" }));
- } catch (e) {
- console.log(e);
- }
- }
- };
- this._renderDisposer?.();
- this._renderDisposer = reaction(() => {
- // if (!Doc.AreProtosEqual(finalLayout, dashDoc)) {
- // finalLayout.rootDocument = dashDoc.aliasOf; // bcz: check on this ... why is it here?
- // }
- const layoutKey = StrCast(finalLayout.layoutKey);
- const finalKey = layoutKey && StrCast(finalLayout[layoutKey]).split("'")?.[1];
- if (finalLayout !== dashDoc && finalKey) {
- const finalLayoutField = finalLayout[finalKey];
- if (finalLayoutField instanceof ObjectField) {
- finalLayout[finalKey + "-textTemplate"] = ComputedField.MakeFunction(`copyField(this.${finalKey})`, { this: Doc.name });
- }
- }
- return { finalLayout, resolvedDataDoc: Cast(finalLayout.resolvedDataDoc, Doc, null) };
- },
- (res) => doReactRender(res.finalLayout, res.resolvedDataDoc),
- { fireImmediately: true });
- }
- }
- destroy() {
- ReactDOM.unmountComponentAtNode(this._dashSpan);
- this._reactionDisposer?.();
- }
-}
-
-
-export class DashFieldView {
- _fieldWrapper: HTMLDivElement; // container for label and value
- _labelSpan: HTMLSpanElement; // field label
- _fieldSpan: HTMLSpanElement; // field value
- _fieldCheck: HTMLInputElement;
- _enumerables: HTMLDivElement; // field value
- _reactionDisposer: IReactionDisposer | undefined;
- _textBoxDoc: Doc;
- @observable _dashDoc: Doc | undefined;
- _fieldKey: string;
- _options: Doc[] = [];
-
- constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
- this._fieldKey = node.attrs.fieldKey;
- this._textBoxDoc = tbox.props.Document;
- this._fieldWrapper = document.createElement("p");
- this._fieldWrapper.style.width = node.attrs.width;
- this._fieldWrapper.style.height = node.attrs.height;
- this._fieldWrapper.style.fontWeight = "bold";
- this._fieldWrapper.style.position = "relative";
- this._fieldWrapper.style.display = "inline-block";
-
- const self = this;
- this._enumerables = document.createElement("div");
- this._enumerables.style.width = "10px";
- this._enumerables.style.height = "10px";
- this._enumerables.style.position = "relative";
- this._enumerables.style.display = "none";
-
- this._enumerables.onpointerdown = async (e) => {
- e.stopPropagation();
- const collview = await Doc.addFieldEnumerations(self._textBoxDoc, self._fieldKey, [{ title: self._fieldSpan.innerText }]);
- collview instanceof Doc && tbox.props.addDocTab(collview, "onRight");
- };
- const updateText = (forceMatch: boolean) => {
- self._enumerables.style.display = "none";
- const newText = self._fieldSpan.innerText.startsWith(":=") || self._fieldSpan.innerText.startsWith("=:=") ? ":=-computed-" : self._fieldSpan.innerText;
-
- // look for a document whose id === the fieldKey being displayed. If there's a match, then that document
- // holds the different enumerated values for the field in the titles of its collected documents.
- // if there's a partial match from the start of the input text, complete the text --- TODO: make this an auto suggest box and select from a drop down.
- DocServer.GetRefField(self._fieldKey).then(options => {
- let modText = "";
- (options instanceof Doc) && DocListCast(options.data).forEach(opt => (forceMatch ? StrCast(opt.title).startsWith(newText) : StrCast(opt.title) === newText) && (modText = StrCast(opt.title)));
- if (modText) {
- self._fieldSpan.innerHTML = self._dashDoc![self._fieldKey] = modText;
- Doc.addFieldEnumerations(self._textBoxDoc, self._fieldKey, []);
- } // if the text starts with a ':=' then treat it as an expression by making a computed field from its value storing it in the key
- else if (self._fieldSpan.innerText.startsWith(":=")) {
- self._dashDoc![self._fieldKey] = ComputedField.MakeFunction(self._fieldSpan.innerText.substring(2));
- } else if (self._fieldSpan.innerText.startsWith("=:=")) {
- Doc.Layout(tbox.props.Document)[self._fieldKey] = ComputedField.MakeFunction(self._fieldSpan.innerText.substring(3));
- } else {
- self._dashDoc![self._fieldKey] = newText;
- }
- });
- };
-
-
- this._fieldCheck = document.createElement("input");
- this._fieldCheck.id = Utils.GenerateGuid();
- this._fieldCheck.type = "checkbox";
- this._fieldCheck.style.position = "relative";
- this._fieldCheck.style.display = "none";
- this._fieldCheck.style.minWidth = "12px";
- this._fieldCheck.style.backgroundColor = "rgba(155, 155, 155, 0.24)";
- this._fieldCheck.onchange = function (e: any) {
- self._dashDoc![self._fieldKey] = e.target.checked;
- };
-
- this._fieldSpan = document.createElement("span");
- this._fieldSpan.id = Utils.GenerateGuid();
- this._fieldSpan.contentEditable = "true";
- this._fieldSpan.style.position = "relative";
- this._fieldSpan.style.display = "none";
- this._fieldSpan.style.minWidth = "12px";
- this._fieldSpan.style.fontSize = "large";
- this._fieldSpan.onkeypress = function (e: any) { e.stopPropagation(); };
- this._fieldSpan.onkeyup = function (e: any) { e.stopPropagation(); };
- this._fieldSpan.onmousedown = function (e: any) { e.stopPropagation(); self._enumerables.style.display = "inline-block"; };
- this._fieldSpan.onblur = function (e: any) { updateText(false); };
-
- const setDashDoc = (doc: Doc) => {
- self._dashDoc = doc;
- if (self._options?.length && !self._dashDoc[self._fieldKey]) {
- self._dashDoc[self._fieldKey] = StrCast(self._options[0].title);
- }
- this._labelSpan.innerHTML = `${self._fieldKey}: `;
- const fieldVal = Cast(this._dashDoc?.[self._fieldKey], "boolean", null);
- this._fieldCheck.style.display = (fieldVal === true || fieldVal === false) ? "inline-block" : "none";
- this._fieldSpan.style.display = !(fieldVal === true || fieldVal === false) ? StrCast(this._dashDoc?.[self._fieldKey]) ? "" : "inline-block" : "none";
- };
- this._fieldSpan.onkeydown = function (e: any) {
- e.stopPropagation();
- if ((e.key === "a" && e.ctrlKey) || (e.key === "a" && e.metaKey)) {
- if (window.getSelection) {
- const range = document.createRange();
- range.selectNodeContents(self._fieldSpan);
- window.getSelection()!.removeAllRanges();
- window.getSelection()!.addRange(range);
- }
- e.preventDefault();
- }
- if (e.key === "Enter") {
- e.preventDefault();
- e.ctrlKey && Doc.addFieldEnumerations(self._textBoxDoc, self._fieldKey, [{ title: self._fieldSpan.innerText }]);
- updateText(true);
- }
- };
-
- this._labelSpan = document.createElement("span");
- this._labelSpan.style.position = "relative";
- this._labelSpan.style.fontSize = "small";
- this._labelSpan.title = "click to see related tags";
- this._labelSpan.style.fontSize = "x-small";
- this._labelSpan.onpointerdown = function (e: any) {
- e.stopPropagation();
- let container = tbox.props.ContainingCollectionView;
- while (container?.props.Document.isTemplateForField || container?.props.Document.isTemplateDoc) {
- container = container.props.ContainingCollectionView;
- }
- if (container) {
- const alias = Doc.MakeAlias(container.props.Document);
- alias.viewType = CollectionViewType.Time;
- let list = Cast(alias.schemaColumns, listSpec(SchemaHeaderField));
- if (!list) {
- alias.schemaColumns = list = new List<SchemaHeaderField>();
- }
- list.map(c => c.heading).indexOf(self._fieldKey) === -1 && list.push(new SchemaHeaderField(self._fieldKey, "#f1efeb"));
- list.map(c => c.heading).indexOf("text") === -1 && list.push(new SchemaHeaderField("text", "#f1efeb"));
- alias._pivotField = self._fieldKey;
- tbox.props.addDocTab(alias, "onRight");
- }
- };
- this._labelSpan.innerHTML = `${self._fieldKey}: `;
- if (node.attrs.docid) {
- DocServer.GetRefField(node.attrs.docid).then(async dashDoc => dashDoc instanceof Doc && runInAction(() => setDashDoc(dashDoc)));
- } else {
- setDashDoc(tbox.props.DataDoc || tbox.dataDoc);
- }
- this._reactionDisposer?.();
- this._reactionDisposer = reaction(() => { // this reaction will update the displayed text whenever the document's fieldKey's value changes
- const dashVal = this._dashDoc?.[self._fieldKey];
- return StrCast(dashVal).startsWith(":=") || dashVal === "" ? Doc.Layout(tbox.props.Document)[self._fieldKey] : dashVal;
- }, fval => {
- const boolVal = Cast(fval, "boolean", null);
- if (boolVal === true || boolVal === false) {
- this._fieldCheck.checked = boolVal;
- } else {
- this._fieldSpan.innerHTML = Field.toString(fval as Field) || "";
- }
- this._fieldCheck.style.display = (boolVal === true || boolVal === false) ? "inline-block" : "none";
- this._fieldSpan.style.display = !(fval === true || fval === false) ? (StrCast(fval) ? "" : "inline-block") : "none";
- }, { fireImmediately: true });
-
- this._fieldWrapper.appendChild(this._labelSpan);
- this._fieldWrapper.appendChild(this._fieldCheck);
- this._fieldWrapper.appendChild(this._fieldSpan);
- this._fieldWrapper.appendChild(this._enumerables);
- (this as any).dom = this._fieldWrapper;
- //updateText(false);
- }
- destroy() {
- this._reactionDisposer?.();
- }
- selectNode() { }
-}
-
-export class OrderedListView {
- update(node: any) {
- return false; // if attr's of an ordered_list (e.g., bulletStyle) change, return false forces the dom node to be recreated which is necessary for the bullet labels to update
- }
-}
-
-export class FootnoteView {
- innerView: any;
- outerView: any;
- node: any;
- dom: any;
- getPos: any;
-
- constructor(node: any, view: any, getPos: any) {
- // We'll need these later
- this.node = node;
- this.outerView = view;
- this.getPos = getPos;
-
- // The node's representation in the editor (empty, for now)
- this.dom = document.createElement("footnote");
- this.dom.addEventListener("pointerup", this.toggle, true);
- // These are used when the footnote is selected
- this.innerView = null;
- }
- selectNode() {
- const attrs = { ...this.node.attrs };
- attrs.visibility = true;
- this.dom.classList.add("ProseMirror-selectednode");
- if (!this.innerView) this.open();
- }
-
- deselectNode() {
- const attrs = { ...this.node.attrs };
- attrs.visibility = false;
- this.dom.classList.remove("ProseMirror-selectednode");
- if (this.innerView) this.close();
- }
- open() {
- // Append a tooltip to the outer node
- const tooltip = this.dom.appendChild(document.createElement("div"));
- tooltip.className = "footnote-tooltip";
- // And put a sub-ProseMirror into that
- this.innerView = new EditorView(tooltip, {
- // You can use any node as an editor document
- state: EditorState.create({
- doc: this.node,
- plugins: [keymap(baseKeymap),
- keymap({
- "Mod-z": () => undo(this.outerView.state, this.outerView.dispatch),
- "Mod-y": () => redo(this.outerView.state, this.outerView.dispatch),
- "Mod-b": toggleMark(schema.marks.strong)
- }),
- // new Plugin({
- // view(newView) {
- // // TODO -- make this work with RichTextMenu
- // // return FormattedTextBox.getToolTip(newView);
- // }
- // })
- ],
-
- }),
- // This is the magic part
- dispatchTransaction: this.dispatchInner.bind(this),
- handleDOMEvents: {
- pointerdown: ((view: any, e: PointerEvent) => {
- // Kludge to prevent issues due to the fact that the whole
- // footnote is node-selected (and thus DOM-selected) when
- // the parent editor is focused.
- e.stopPropagation();
- document.addEventListener("pointerup", this.ignore, true);
- if (this.outerView.hasFocus()) this.innerView.focus();
- }) as any
- }
-
- });
- setTimeout(() => this.innerView && this.innerView.docView.setSelection(0, 0, this.innerView.root, true), 0);
- }
-
- ignore = (e: PointerEvent) => {
- e.stopPropagation();
- document.removeEventListener("pointerup", this.ignore, true);
- }
-
- toggle = () => {
- if (this.innerView) this.close();
- else {
- this.open();
- }
- }
- close() {
- this.innerView && this.innerView.destroy();
- this.innerView = null;
- this.dom.textContent = "";
- }
- dispatchInner(tr: any) {
- const { state, transactions } = this.innerView.state.applyTransaction(tr);
- this.innerView.updateState(state);
-
- if (!tr.getMeta("fromOutside")) {
- const outerTr = this.outerView.state.tr, offsetMap = StepMap.offset(this.getPos() + 1);
- for (const transaction of transactions) {
- const steps = transaction.steps;
- for (const step of steps) {
- outerTr.step(step.map(offsetMap));
- }
- }
- if (outerTr.docChanged) this.outerView.dispatch(outerTr);
- }
- }
- update(node: any) {
- if (!node.sameMarkup(this.node)) return false;
- this.node = node;
- if (this.innerView) {
- const state = this.innerView.state;
- const start = node.content.findDiffStart(state.doc.content);
- if (start !== null) {
- let { a: endA, b: endB } = node.content.findDiffEnd(state.doc.content);
- const overlap = start - Math.min(endA, endB);
- if (overlap > 0) { endA += overlap; endB += overlap; }
- this.innerView.dispatch(
- state.tr
- .replace(start, endB, node.slice(start, endA))
- .setMeta("fromOutside", true));
- }
- }
- return true;
- }
-
- destroy() {
- if (this.innerView) this.close();
- }
-
- stopEvent(event: any) {
- return this.innerView && this.innerView.dom.contains(event.target);
- }
-
- ignoreMutation() { return true; }
-}
-
-export class SummaryView {
- _collapsed: HTMLElement;
- _view: any;
- constructor(node: any, view: any, getPos: any) {
- this._collapsed = document.createElement("span");
- this._collapsed.className = this.className(node.attrs.visibility);
- this._view = view;
- const js = node.toJSON;
- node.toJSON = function () {
- return js.apply(this, arguments);
- };
-
- this._collapsed.onpointerdown = (e: any) => {
- const visible = !node.attrs.visibility;
- const attrs = { ...node.attrs, visibility: visible };
- let textSelection = TextSelection.create(view.state.doc, getPos() + 1);
- if (!visible) { // update summarized text and save in attrs
- textSelection = this.updateSummarizedText(getPos() + 1);
- attrs.text = textSelection.content();
- attrs.textslice = attrs.text.toJSON();
- }
- view.dispatch(view.state.tr.
- setSelection(textSelection). // select the current summarized text (or where it will be if its collapsed)
- replaceSelection(!visible ? new Slice(Fragment.fromArray([]), 0, 0) : node.attrs.text). // collapse/expand it
- setNodeMarkup(getPos(), undefined, attrs)); // update the attrs
- e.preventDefault();
- e.stopPropagation();
- this._collapsed.className = this.className(visible);
- };
- (this as any).dom = this._collapsed;
- }
- selectNode() { }
-
- deselectNode() { }
-
- className = (visible: boolean) => "formattedTextBox-summarizer" + (visible ? "" : "-collapsed");
-
- updateSummarizedText(start?: any) {
- const mtype = this._view.state.schema.marks.summarize;
- const mtypeInc = this._view.state.schema.marks.summarizeInclusive;
- let endPos = start;
-
- const visited = new Set();
- for (let i: number = start + 1; i < this._view.state.doc.nodeSize - 1; i++) {
- let skip = false;
- this._view.state.doc.nodesBetween(start, i, (node: Node, pos: number, parent: Node, index: number) => {
- if (node.isLeaf && !visited.has(node) && !skip) {
- if (node.marks.find((m: any) => m.type === mtype || m.type === mtypeInc)) {
- visited.add(node);
- endPos = i + node.nodeSize - 1;
- }
- else skip = true;
- }
- });
- }
- return TextSelection.create(this._view.state.doc, start, endPos);
- }
-}
-// :: Schema
-// This schema rougly corresponds to the document schema used by
-// [CommonMark](http://commonmark.org/), minus the list elements,
-// which are defined in the [`prosemirror-schema-list`](#schema-list)
-// module.
-//
-// To reuse elements from this schema, extend or read from its
-// `spec.nodes` and `spec.marks` [properties](#model.Schema.spec).
-export const schema = new Schema({ nodes, marks });
-
-const fromJson = schema.nodeFromJSON;
-
-schema.nodeFromJSON = (json: any) => {
- const node = fromJson(json);
- if (json.type === schema.nodes.summary.name) {
- node.attrs.text = Slice.fromJSON(schema, node.attrs.textslice);
- }
- return node;
-}; \ No newline at end of file
diff --git a/src/client/util/TooltipTextMenu.scss b/src/client/util/TooltipTextMenu.scss
deleted file mode 100644
index e2149e9c1..000000000
--- a/src/client/util/TooltipTextMenu.scss
+++ /dev/null
@@ -1,372 +0,0 @@
-@import "../views/globalCssVariables";
-.ProseMirror-menu-dropdown-wrap {
- display: inline-block;
- position: relative;
-}
-
-.ProseMirror-menu-dropdown {
- vertical-align: 1px;
- cursor: pointer;
- position: relative;
- padding: 0 15px 0 4px;
- background: white;
- border-radius: 2px;
- text-align: left;
- font-size: 12px;
- white-space: nowrap;
- margin-right: 4px;
-
- &:after {
- content: "";
- border-left: 4px solid transparent;
- border-right: 4px solid transparent;
- border-top: 4px solid currentColor;
- opacity: .6;
- position: absolute;
- right: 4px;
- top: calc(50% - 2px);
- }
-}
-
-.ProseMirror-menu-submenu-wrap {
- position: relative;
- margin-right: -4px;
-}
-
-.ProseMirror-menu-dropdown-menu,
-.ProseMirror-menu-submenu {
- font-size: 12px;
- background: white;
- border: 1px solid rgb(223, 223, 223);
- min-width: 40px;
- z-index: 50000;
- position: absolute;
- box-sizing: content-box;
-
- .ProseMirror-menu-dropdown-item {
- cursor: pointer;
- z-index: 100000;
- text-align: left;
- padding: 3px;
-
- &:hover {
- background-color: $light-color-secondary;
- }
- }
-}
-
-
-.ProseMirror-menu-submenu-label:after {
- content: "";
- border-top: 4px solid transparent;
- border-bottom: 4px solid transparent;
- border-left: 4px solid currentColor;
- opacity: .6;
- position: absolute;
- right: 4px;
- top: calc(50% - 4px);
-}
-
- .ProseMirror-icon {
- display: inline-block;
- // line-height: .8;
- // vertical-align: -2px; /* Compensate for padding */
- // padding: 2px 8px;
- cursor: pointer;
-
- &.ProseMirror-menu-disabled {
- cursor: default;
- }
-
- svg {
- fill:white;
- height: 1em;
- }
-
- span {
- vertical-align: text-top;
- }
- }
-
-.wrapper {
- position: absolute;
- pointer-events: all;
- display: flex;
- align-items: center;
- transform: translateY(-85px);
-
- height: 35px;
- background: #323232;
- border-radius: 6px;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
-
-}
-
-.tooltipMenu, .basic-tools {
- z-index: 20000;
- pointer-events: all;
- padding: 3px;
- padding-bottom: 5px;
- display: flex;
- align-items: center;
-
- .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;
- }
-}
-
-.menuicon {
- width: 25px;
- height: 25px;
- cursor: pointer;
- text-align: center;
- line-height: 25px;
- margin: 0 2px;
- border-radius: 3px;
-
- &:hover {
- background-color: black;
-
- #link-drag {
- background-color: black;
- }
- }
-
- &> * {
- margin-top: 50%;
- margin-left: 50%;
- transform: translate(-50%, -50%);
- }
-
- svg {
- fill: white;
- width: 18px;
- height: 18px;
- }
-}
-
-.menuicon-active {
- width: 25px;
- height: 25px;
- cursor: pointer;
- text-align: center;
- line-height: 25px;
- margin: 0 2px;
- border-radius: 3px;
-
- &:hover {
- background-color: black;
- }
-
- &> * {
- margin-top: 50%;
- margin-left: 50%;
- transform: translate(-50%, -50%);
- }
-
- svg {
- fill: greenyellow;
- width: 18px;
- height: 18px;
- }
-}
-
-#colorPicker {
- position: relative;
-
- svg {
- width: 18px;
- height: 18px;
- // margin-top: 11px;
- }
-
- .buttonColor {
- position: absolute;
- top: 24px;
- left: 1px;
- width: 24px;
- height: 4px;
- margin-top: 0;
- }
-}
-
-#link-drag {
- background-color: #323232;
-}
-
-.underline svg {
- margin-top: 13px;
-}
-
- .font-size-indicator {
- font-size: 12px;
- padding-right: 0px;
- }
- .summarize{
- color: white;
- height: 20px;
- text-align: center;
- }
-
-
-.brush{
- display: inline-block;
- width: 1em;
- height: 1em;
- stroke-width: 0;
- stroke: currentColor;
- fill: currentColor;
- margin-right: 15px;
-}
-
-.brush-active{
- display: inline-block;
- width: 1em;
- height: 1em;
- stroke-width: 3;
- fill: greenyellow;
- margin-right: 15px;
-}
-
-.dragger-wrapper {
- color: #eee;
- height: 22px;
- padding: 0 5px;
- box-sizing: content-box;
- cursor: grab;
-
- .dragger {
- width: 18px;
- height: 100%;
- display: flex;
- justify-content: space-evenly;
- }
-
- .dragger-line {
- width: 2px;
- height: 100%;
- background-color: black;
- }
-}
-
-.button-dropdown-wrapper {
- display: flex;
- align-content: center;
-
- &:hover {
- background-color: black;
- }
-}
-
-.buttonSettings-dropdown {
-
- &.ProseMirror-menu-dropdown {
- width: 10px;
- height: 25px;
- margin: 0;
- padding: 0 2px;
- background-color: #323232;
- text-align: center;
-
- &:after {
- border-top: 4px solid white;
- right: 2px;
- }
-
- &:hover {
- background-color: black;
- }
- }
-
- &.ProseMirror-menu-dropdown-menu {
- min-width: 150px;
- left: -27px;
- top: 31px;
- background-color: #323232;
- border: 1px solid #4d4d4d;
- color: $light-color-secondary;
- // border: none;
- // border: 1px solid $light-color-secondary;
- border-radius: 0 6px 6px 6px;
- padding: 3px;
- box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
-
- .ProseMirror-menu-dropdown-item{
- cursor: default;
-
- &:last-child {
- border-bottom: none;
- }
-
- &:hover {
- background-color: #323232;
- }
-
- .button-setting, .button-setting-disabled {
- padding: 2px;
- border-radius: 2px;
- }
-
- .button-setting:hover {
- cursor: pointer;
- background-color: black;
- }
-
- .separated-button {
- border-top: 1px solid $light-color-secondary;
- padding-top: 6px;
- }
-
- input {
- color: black;
- border: none;
- border-radius: 1px;
- padding: 3px;
- }
-
- button {
- padding: 6px;
- background-color: #323232;
- border: 1px solid black;
- border-radius: 1px;
-
- &:hover {
- background-color: black;
- }
- }
- }
-
-
- }
-}
-
-.colorPicker-wrapper {
- display: flex;
- flex-wrap: wrap;
- justify-content: space-between;
- margin-top: 3px;
- margin-left: -3px;
- width: calc(100% + 6px);
-}
-
-button.colorPicker {
- width: 20px;
- height: 20px;
- border-radius: 15px !important;
- margin: 3px;
- border: none !important;
-
- &.active {
- border: 2px solid white !important;
- }
-}
diff --git a/src/client/util/prosemirrorPatches.js b/src/client/util/prosemirrorPatches.js
deleted file mode 100644
index 269423482..000000000
--- a/src/client/util/prosemirrorPatches.js
+++ /dev/null
@@ -1,139 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var prosemirrorInputRules = require('prosemirror-inputrules');
-var prosemirrorTransform = require('prosemirror-transform');
-var prosemirrorModel = require('prosemirror-model');
-
-exports.liftListItem = liftListItem;
-exports.sinkListItem = sinkListItem;
-exports.wrappingInputRule = wrappingInputRule;
-// :: (NodeType) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool
-// Create a command to lift the list item around the selection up into
-// a wrapping list.
-function liftListItem(itemType) {
- return function (tx, dispatch) {
- var ref = tx.selection;
- var $from = ref.$from;
- var $to = ref.$to;
- var range = $from.blockRange($to, function (node) { return node.childCount && node.firstChild.type == itemType; });
- if (!range) { return false }
- if (!dispatch) { return true }
- if ($from.node(range.depth - 1).type == itemType) // Inside a parent list
- { return liftToOuterList(tx, dispatch, itemType, range) }
- else // Outer list node
- { return liftOutOfList(tx, dispatch, range) }
- }
-}
-
-function liftToOuterList(tr, dispatch, itemType, range) {
- var end = range.end, endOfList = range.$to.end(range.depth);
- if (end < endOfList) {
- // There are siblings after the lifted items, which must become
- // children of the last item
- tr.step(new prosemirrorTransform.ReplaceAroundStep(end - 1, endOfList, end, endOfList,
- new prosemirrorModel.Slice(prosemirrorModel.Fragment.from(itemType.create(null, range.parent.copy())), 1, 0), 1, true));
- range = new prosemirrorModel.NodeRange(tr.doc.resolve(range.$from.pos), tr.doc.resolve(endOfList), range.depth);
- }
- dispatch(tr.lift(range, prosemirrorTransform.liftTarget(range)).scrollIntoView());
- return true
-}
-
-function liftOutOfList(tr, dispatch, range) {
- var list = range.parent;
- // Merge the list items into a single big item
- for (var pos = range.end, i = range.endIndex - 1, e = range.startIndex; i > e; i--) {
- pos -= list.child(i).nodeSize;
- tr.delete(pos - 1, pos + 1);
- }
- var $start = tr.doc.resolve(range.start), item = $start.nodeAfter;
- var atStart = range.startIndex == 0, atEnd = range.endIndex == list.childCount;
- var parent = $start.node(-1), indexBefore = $start.index(-1);
- if (!parent.canReplace(indexBefore + (atStart ? 0 : 1), indexBefore + 1,
- item.content.append(atEnd ? prosemirrorModel.Fragment.empty : prosemirrorModel.Fragment.from(list)))) { return false }
- var start = $start.pos, end = start + item.nodeSize;
- // Strip off the surrounding list. At the sides where we're not at
- // the end of the list, the existing list is closed. At sides where
- // this is the end, it is overwritten to its end.
- tr.step(new prosemirrorTransform.ReplaceAroundStep(start - (atStart ? 1 : 0), end + (atEnd ? 1 : 0), start + 1, end - 1,
- new prosemirrorModel.Slice((atStart ? prosemirrorModel.Fragment.empty : prosemirrorModel.Fragment.from(list.copy(prosemirrorModel.Fragment.empty)))
- .append(atEnd ? prosemirrorModel.Fragment.empty : prosemirrorModel.Fragment.from(list.copy(prosemirrorModel.Fragment.empty))),
- atStart ? 0 : 1, atEnd ? 0 : 1), atStart ? 0 : 1));
- dispatch(tr.scrollIntoView());
- return true
-}
-
-// :: (NodeType) → (state: EditorState, dispatch: ?(tr: Transaction)) → bool
-// Create a command to sink the list item around the selection down
-// into an inner list.
-function sinkListItem(itemType) {
- return function (state, dispatch) {
- var ref = state.selection;
- var $from = ref.$from;
- var $to = ref.$to;
- var range = $from.blockRange($to, function (node) { return node.childCount && node.firstChild.type == itemType; });
- if (!range) { return false }
- var startIndex = range.startIndex;
- if (startIndex == 0) { return false }
- var parent = range.parent, nodeBefore = parent.child(startIndex - 1);
- if (nodeBefore.type != itemType) { return false; }
-
- if (dispatch) {
- var nestedBefore = nodeBefore.lastChild && nodeBefore.lastChild.type == parent.type;
- var inner = prosemirrorModel.Fragment.from(nestedBefore ? itemType.create() : null);
- let slice = new prosemirrorModel.Slice(prosemirrorModel.Fragment.from(itemType.create(null, prosemirrorModel.Fragment.from(parent.type.create({ ...parent.attrs, fontSize: parent.attrs.fontSize ? parent.attrs.fontSize - 4 : undefined }, inner)))),
- nestedBefore ? 3 : 1, 0);
- var before = range.start, after = range.end;
- dispatch(state.tr.step(new prosemirrorTransform.ReplaceAroundStep(before - (nestedBefore ? 3 : 1), after,
- before, after, slice, 1, true))
- .scrollIntoView());
- }
- return true
- }
-}
-
-function findWrappingOutside(range, type) {
- var parent = range.parent;
- var startIndex = range.startIndex;
- var endIndex = range.endIndex;
- var around = parent.contentMatchAt(startIndex).findWrapping(type);
- if (!around) { return null }
- var outer = around.length ? around[0] : type;
- return parent.canReplaceWith(startIndex, endIndex, outer) ? around : null
-}
-
-function findWrappingInside(range, type) {
- var parent = range.parent;
- var startIndex = range.startIndex;
- var endIndex = range.endIndex;
- var inner = parent.child(startIndex);
- var inside = type.contentMatch.findWrapping(inner.type);
- if (!inside) { return null }
- var lastType = inside.length ? inside[inside.length - 1] : type;
- var innerMatch = lastType.contentMatch;
- for (var i = startIndex; innerMatch && i < endIndex; i++) { innerMatch = innerMatch.matchType(parent.child(i).type); }
- if (!innerMatch || !innerMatch.validEnd) { return null }
- return inside
-}
-function findWrapping(range, nodeType, attrs, innerRange, customWithAttrs = null) {
- if (innerRange === void 0) innerRange = range;
- let withAttrs = (type) => ({ type: type, attrs: null });
- var around = findWrappingOutside(range, nodeType);
- var inner = around && findWrappingInside(innerRange, nodeType);
- if (!inner) { return null }
- return around.map(withAttrs).concat({ type: nodeType, attrs: attrs }).concat(inner.map(customWithAttrs ? customWithAttrs : withAttrs))
-}
-function wrappingInputRule(regexp, nodeType, getAttrs, joinPredicate, customWithAttrs = null) {
- return new prosemirrorInputRules.InputRule(regexp, function (state, match, start, end) {
- var attrs = getAttrs instanceof Function ? getAttrs(match) : getAttrs;
- var tr = state.tr.delete(start, end);
- var $start = tr.doc.resolve(start), range = $start.blockRange(), wrapping = range && findWrapping(range, nodeType, attrs, undefined, customWithAttrs);
- if (!wrapping) { return null }
- tr.wrap(range, wrapping);
- var before = tr.doc.resolve(start - 1).nodeBefore;
- if (before && before.type == nodeType && prosemirrorTransform.canJoin(tr.doc, start - 1) &&
- (!joinPredicate || joinPredicate(match, before))) { tr.join(start - 1); }
- return tr
- })
-} \ No newline at end of file
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 05:19:29 +0000