diff options
Diffstat (limited to 'src/client/util/TooltipTextMenu.tsx')
| -rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 158 |
1 files changed, 86 insertions, 72 deletions
diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index a96615488..3e804651c 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -1,58 +1,37 @@ -import { action, IReactionDisposer, reaction } from "mobx"; -import { Dropdown, DropdownSubmenu, MenuItem, MenuItemSpec, renderGrouped, icons, } from "prosemirror-menu"; //no import css -import { baseKeymap, lift, deleteSelection } from "prosemirror-commands"; -import { history, redo, undo } from "prosemirror-history"; -import { keymap } from "prosemirror-keymap"; -import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state"; +import { action } from "mobx"; +import { Dropdown, MenuItem, icons, } from "prosemirror-menu"; //no import css +import { EditorState, NodeSelection, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; import { Schema, NodeType, MarkType, Mark, ResolvedPos } from "prosemirror-model"; -import { Node as ProsNode } from "prosemirror-model" -import React = require("react"); +import { Node as ProsNode } from "prosemirror-model"; import "./TooltipTextMenu.scss"; -const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); +const { toggleMark, setBlockType } = require("prosemirror-commands"); import { library } from '@fortawesome/fontawesome-svg-core'; -import { wrapInList, bulletList, liftListItem, listItem, } from 'prosemirror-schema-list'; -import { liftTarget, RemoveMarkStep, AddMarkStep } from 'prosemirror-transform'; -import { - faListUl, faGrinTongueSquint, -} from '@fortawesome/free-solid-svg-icons'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { wrapInList, liftListItem, } from 'prosemirror-schema-list'; +import { faListUl } from '@fortawesome/free-solid-svg-icons'; import { FieldViewProps } from "../views/nodes/FieldView"; -import { throwStatement } from "babel-types"; const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js"); -import { View } from "@react-pdf/renderer"; import { DragManager } from "./DragManager"; import { Doc, Opt, Field } from "../../new_fields/Doc"; import { DocServer } from "../DocServer"; -import { CollectionFreeFormDocumentView } from "../views/nodes/CollectionFreeFormDocumentView"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { DocumentManager } from "./DocumentManager"; import { Id } from "../../new_fields/FieldSymbols"; -import { Utils } from "../../Utils"; import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; -import { text } from "body-parser"; -import { type } from "os"; -// import { wrap } from "module"; - -const SVG = "http://www.w3.org/2000/svg"; //appears above a selection of text in a RichTextBox to give user options such as Bold, Italics, etc. export class TooltipTextMenu { public tooltip: HTMLElement; - private num_icons = 0; private view: EditorView; private fontStyles: MarkType[]; private fontSizes: MarkType[]; private listTypes: NodeType[]; private editorProps: FieldViewProps & FormattedTextBoxProps; - private state: EditorState; private fontSizeToNum: Map<MarkType, number>; private fontStylesToName: Map<MarkType, string>; private listTypeToIcon: Map<NodeType, string>; - private fontSizeIndicator: HTMLSpanElement = document.createElement("span"); - private link: HTMLAnchorElement; private linkEditor?: HTMLDivElement; private linkText?: HTMLDivElement; @@ -68,11 +47,11 @@ export class TooltipTextMenu { constructor(view: EditorView, editorProps: FieldViewProps & FormattedTextBoxProps) { this.view = view; - this.state = view.state; this.editorProps = editorProps; this.tooltip = document.createElement("div"); this.tooltip.className = "tooltipMenu"; + this.dragElement(this.tooltip); // this.createCollapse(); // if (this._collapseBtn) { // this.tooltip.appendChild(this._collapseBtn.render(this.view).dom); @@ -110,6 +89,7 @@ export class TooltipTextMenu { }); }); + this.updateLinkMenu(); //list of font styles this.fontStylesToName = new Map(); @@ -128,11 +108,14 @@ export class TooltipTextMenu { this.fontSizeToNum.set(schema.marks.p12, 12); this.fontSizeToNum.set(schema.marks.p14, 14); this.fontSizeToNum.set(schema.marks.p16, 16); + this.fontSizeToNum.set(schema.marks.p18, 18); + this.fontSizeToNum.set(schema.marks.p20, 20); this.fontSizeToNum.set(schema.marks.p24, 24); this.fontSizeToNum.set(schema.marks.p32, 32); this.fontSizeToNum.set(schema.marks.p48, 48); this.fontSizeToNum.set(schema.marks.p72, 72); - //this.fontSizeToNum.set(schema.marks.pFontSize,schema.marks.pFontSize.) + this.fontSizeToNum.set(schema.marks.pFontSize, 10); + this.fontSizeToNum.set(schema.marks.pFontSize, 10); this.fontSizes = Array.from(this.fontSizeToNum.keys()); //list types @@ -141,12 +124,7 @@ export class TooltipTextMenu { this.listTypeToIcon.set(schema.nodes.ordered_list, "1)"); this.listTypes = Array.from(this.listTypeToIcon.keys()); - this.link = document.createElement("a"); - this.link.target = "_blank"; - this.link.style.color = "white"; - //this.tooltip.appendChild(this.link); - - this.tooltip.appendChild(this.createLink().render(this.view).dom); + // this.tooltip.appendChild(this.createLink().render(this.view).dom); this.tooltip.appendChild(this.createStar().render(this.view).dom); @@ -211,6 +189,7 @@ export class TooltipTextMenu { updateLinkMenu() { if (!this.linkEditor || !this.linkText) { this.linkEditor = document.createElement("div"); + this.linkEditor.className = "ProseMirror-icon menuicon"; this.linkEditor.style.color = "black"; this.linkText = document.createElement("div"); this.linkText.style.cssFloat = "left"; @@ -240,7 +219,7 @@ export class TooltipTextMenu { if (DocumentManager.Instance.getDocumentView(f)) { DocumentManager.Instance.getDocumentView(f)!.props.focus(f, false); } - else if (CollectionDockingView.Instance) CollectionDockingView.Instance.AddRightSplit(f, f); + else if (CollectionDockingView.Instance) CollectionDockingView.Instance.AddRightSplit(f, undefined); } })); } @@ -251,29 +230,31 @@ export class TooltipTextMenu { }; this.linkDrag = document.createElement("img"); this.linkDrag.src = "https://seogurusnyc.com/wp-content/uploads/2016/12/link-1.png"; - this.linkDrag.style.width = "20px"; - this.linkDrag.style.height = "20px"; + this.linkDrag.style.width = "15px"; + this.linkDrag.style.height = "15px"; + this.linkDrag.title = "Drag to create link"; this.linkDrag.style.color = "black"; this.linkDrag.style.background = "black"; this.linkDrag.style.cssFloat = "left"; this.linkDrag.onpointerdown = (e: PointerEvent) => { let dragData = new DragManager.LinkDragData(this.editorProps.Document); dragData.dontClearTextBox = true; + e.stopPropagation(); DragManager.StartLinkDrag(this.linkDrag!, dragData, e.clientX, e.clientY, { handlers: { dragComplete: action(() => { let m = dragData.droppedDocuments; - this.makeLink(DocServer.prepend("/doc/" + m[0][Id])); + m.length && this.makeLink(DocServer.prepend("/doc/" + m[0][Id])); }), }, hideSource: false }); }; - // this.linkEditor.appendChild(this.linkDrag); + this.linkEditor.appendChild(this.linkDrag); // this.linkEditor.appendChild(this.linkText); // this.linkEditor.appendChild(linkBtn); - //this.tooltip.appendChild(this.linkEditor); + this.tooltip.appendChild(this.linkEditor); } let node = this.view.state.selection.$from.nodeAfter; @@ -287,7 +268,48 @@ export class TooltipTextMenu { e.preventDefault(); } }; - this.tooltip.appendChild(this.linkEditor); + // this.tooltip.appendChild(this.linkEditor); + } + + dragElement(elmnt: HTMLElement) { + var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; + if (elmnt) { + // if present, the header is where you move the DIV from: + elmnt.onpointerdown = dragMouseDown; + } + const self = this; + + function dragMouseDown(e: PointerEvent) { + e = e || window.event; + //e.preventDefault(); + // get the mouse cursor position at startup: + pos3 = e.clientX; + pos4 = e.clientY; + document.onpointerup = closeDragElement; + // call a function whenever the cursor moves: + document.onpointermove = elementDrag; + } + + function elementDrag(e: PointerEvent) { + e = e || window.event; + //e.preventDefault(); + // calculate the new cursor position: + pos1 = pos3 - e.clientX; + pos2 = pos4 - e.clientY; + pos3 = e.clientX; + pos4 = e.clientY; + // set the element's new position: + elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; + elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; + } + + function closeDragElement() { + // stop moving when mouse button is released: + document.onpointerup = null; + document.onpointermove = null; + //self.highlightSearchTerms(self.state, ["hello"]); + //FormattedTextBox.Instance.unhighlightSearchTerms(); + } } makeLink = (target: string) => { @@ -333,7 +355,7 @@ export class TooltipTextMenu { //for a specific grouping of marks (passed in), remove all and apply the passed-in one to the selected text changeToMarkInGroup = (markType: MarkType, view: EditorView, fontMarks: MarkType[]) => { - let { empty, $cursor, ranges } = view.state.selection as TextSelection; + let { $cursor, ranges } = view.state.selection as TextSelection; let state = view.state; let dispatch = view.dispatch; @@ -345,13 +367,12 @@ export class TooltipTextMenu { dispatch(state.tr.removeStoredMark(type)); } } else { - let has = false, tr = state.tr; + let has = false; for (let i = 0; !has && i < ranges.length; i++) { let { $from, $to } = ranges[i]; has = state.doc.rangeHasMark($from.pos, $to.pos, type); } for (let i of ranges) { - let { $from, $to } = i; if (has) { toggleMark(type)(view.state, view.dispatch, view); } @@ -373,7 +394,7 @@ export class TooltipTextMenu { } //remove all node typeand apply the passed-in one to the selected text - changeToNodeType(nodeType: NodeType | undefined, view: EditorView, allNodes: NodeType[]) { + changeToNodeType(nodeType: NodeType | undefined, view: EditorView) { //remove old liftListItem(schema.nodes.list_item)(view.state, view.dispatch); if (nodeType) { //add new @@ -390,7 +411,7 @@ export class TooltipTextMenu { execEvent: "", class: "menuicon", css: css, - enable(state) { return true; }, + enable() { return true; }, run() { changeToMarkInGroup(markType, view, groupMarks); } @@ -405,7 +426,7 @@ export class TooltipTextMenu { css: "color:white;", class: "summarize", execEvent: "", - run: (state, dispatch, view) => { + run: (state, dispatch) => { TooltipTextMenu.insertStar(state, dispatch); } @@ -420,7 +441,7 @@ export class TooltipTextMenu { execEvent: "", css: "color:white;", class: "summarize", - run: (state, dispatch, view) => { + run: () => { this.collapseToolTip(); } }); @@ -465,16 +486,24 @@ export class TooltipTextMenu { enable(state) { return !state.selection.empty; }, run: (state, dispatch, view) => { // to remove link + let curLink = ""; if (this.markActive(state, markType)) { - toggleMark(markType)(state, dispatch); - return true; + + let { from, $from, to, empty } = state.selection; + let node = state.doc.nodeAt(from); + node && node.marks.map(m => { + m.type === markType && (curLink = m.attrs.href); + }); + //toggleMark(markType)(state, dispatch); + //return true; } // to create link openPrompt({ title: "Create a link", fields: { href: new TextField({ - label: "Link target", + value: curLink, + label: "Link Target", required: true }), title: new TextField({ label: "Title" }) @@ -499,7 +528,7 @@ export class TooltipTextMenu { execEvent: "", class: "menuicon", css: css, - enable(state) { return true; }, + enable() { return true; }, run() { changeToNodeInGroup(nodeType, view, groupNodes); } @@ -586,17 +615,6 @@ export class TooltipTextMenu { //return; } - //let linksInSelection = this.activeMarksOnSelection([schema.marks.link]); - // if (linksInSelection.length > 0) { - // let attributes = this.getMarksInSelection(this.view.state, [schema.marks.link])[0].attrs; - // this.link.href = attributes.href; - // this.link.textContent = attributes.title; - // this.link.style.visibility = "visible"; - // } else this.link.style.visibility = "hidden"; - - // Otherwise, reposition it and update its content - //this.tooltip.style.display = ""; - let { from, to } = state.selection; //UPDATE LIST ITEM DROPDOWN @@ -635,23 +653,21 @@ export class TooltipTextMenu { } } this.view.dispatch(this.view.state.tr.setStoredMarks(this._activeMarks)); - this.updateLinkMenu(); } //finds all active marks on selection in given group activeMarksOnSelection(markGroup: MarkType[]) { //current selection - let { empty, $cursor, ranges } = this.view.state.selection as TextSelection; + let { empty, ranges } = this.view.state.selection as TextSelection; let state = this.view.state; let dispatch = this.view.dispatch; let activeMarks: MarkType[]; if (!empty) { activeMarks = markGroup.filter(mark => { if (dispatch) { - let has = false, tr = state.tr; + let has = false; for (let i = 0; !has && i < ranges.length; i++) { let { $from, $to } = ranges[i]; - let hasmark: boolean = state.doc.rangeHasMark($from.pos, $to.pos, mark); return state.doc.rangeHasMark($from.pos, $to.pos, mark); } } @@ -662,9 +678,7 @@ export class TooltipTextMenu { const pos = this.view.state.selection.$from; const ref_node: ProsNode = this.reference_node(pos); if (ref_node !== null && ref_node !== this.view.state.doc) { - let text_node_type: NodeType; if (ref_node.isText) { - text_node_type = ref_node.type; } else { return []; @@ -699,7 +713,7 @@ export class TooltipTextMenu { 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, pos: number, parent: ProsNode, index: number) => { + this.view.state.doc.nodesBetween(i, pos.pos, (node: ProsNode) => { if (node.isLeaf && !skip) { ref_node = node; skip = true; |