diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/util/ProsemirrorCopy/prompt.js | 21 | ||||
| -rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 42 |
2 files changed, 55 insertions, 8 deletions
diff --git a/src/client/util/ProsemirrorCopy/prompt.js b/src/client/util/ProsemirrorCopy/prompt.js index 35dd7b872..b9068195f 100644 --- a/src/client/util/ProsemirrorCopy/prompt.js +++ b/src/client/util/ProsemirrorCopy/prompt.js @@ -3,6 +3,9 @@ const prefix = "ProseMirror-prompt" export function openPrompt(options) { let wrapper = document.body.appendChild(document.createElement("div")) wrapper.className = prefix + wrapper.style.zIndex = 1000; + wrapper.style.width = 250; + wrapper.style.textAlign = "center"; let mouseOutside = e => { if (!wrapper.contains(e.target)) close() } setTimeout(() => window.addEventListener("mousedown", mouseOutside), 50) @@ -25,19 +28,24 @@ export function openPrompt(options) { cancelButton.addEventListener("click", close) let form = wrapper.appendChild(document.createElement("form")) - if (options.title) form.appendChild(document.createElement("h5")).textContent = options.title + let title = document.createElement("h5") + title.style.marginBottom = 15 + title.style.marginTop = 10 + if (options.title) form.appendChild(title).textContent = options.title domFields.forEach(field => { form.appendChild(document.createElement("div")).appendChild(field) }) - let buttons = form.appendChild(document.createElement("div")) - buttons.className = prefix + "-buttons" + let b = document.createElement("div"); + b.style.marginTop = 15; + let buttons = form.appendChild(b) + // buttons.className = prefix + "-buttons" buttons.appendChild(submitButton) buttons.appendChild(document.createTextNode(" ")) buttons.appendChild(cancelButton) let box = wrapper.getBoundingClientRect() - wrapper.style.top = ((window.innerHeight - box.height) / 2) + "px" - wrapper.style.left = ((window.innerWidth - box.width) / 2) + "px" + wrapper.style.top = options.flyout_top + "px" + wrapper.style.left = options.flyout_left + "px" let submit = () => { let params = getValues(options.fields, domFields) @@ -145,6 +153,9 @@ export class TextField extends Field { input.placeholder = this.options.label input.value = this.options.value || "" input.autocomplete = "off" + input.style.marginBottom = 4 + input.style.border = "1px solid black" + input.style.padding = "4px 4px" return input } } diff --git a/src/client/util/TooltipTextMenu.tsx b/src/client/util/TooltipTextMenu.tsx index d81679ef3..c861083ce 100644 --- a/src/client/util/TooltipTextMenu.tsx +++ b/src/client/util/TooltipTextMenu.tsx @@ -6,18 +6,20 @@ import { keymap } from "prosemirror-keymap"; import { EditorState, Transaction, NodeSelection, TextSelection } from "prosemirror-state"; import { EditorView } from "prosemirror-view"; import { schema } from "./RichTextSchema"; -import { Schema, NodeType, MarkType } from "prosemirror-model"; +import { Schema, NodeType, MarkType, Mark } from "prosemirror-model"; import React = require("react"); import "./TooltipTextMenu.scss"; const { toggleMark, setBlockType, wrapIn } = require("prosemirror-commands"); import { library } from '@fortawesome/fontawesome-svg-core'; import { wrapInList, bulletList, liftListItem, listItem } from 'prosemirror-schema-list'; import { - faListUl, + faListUl, faGrinTongueSquint, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FieldViewProps } from "../views/nodes/FieldView"; import { throwStatement } from "babel-types"; +import { KeyStore } from "../../fields/KeyStore"; +import { NumberField } from "../../fields/NumberField"; const { openPrompt, TextField } = require("./ProsemirrorCopy/prompt.js"); const SVG = "http://www.w3.org/2000/svg"; @@ -35,6 +37,7 @@ export class TooltipTextMenu { private fontSizeToNum: Map<MarkType, number>; private fontStylesToName: Map<MarkType, string>; private fontSizeIndicator: HTMLSpanElement = document.createElement("span"); + private link: HTMLAnchorElement; constructor(view: EditorView, editorProps: FieldViewProps) { this.view = view; @@ -96,6 +99,15 @@ export class TooltipTextMenu { this.addFontDropdowns(); + let target = "https://www.google.com"; + + this.link = document.createElement("a"); + this.link.href = target; + this.link.textContent = target; + this.link.target = "_blank"; + this.link.style.color = "white"; + this.tooltip.appendChild(this.link); + this.update(view, undefined); } @@ -207,7 +219,9 @@ export class TooltipTextMenu { callback(attrs: any) { toggleMark(markType, attrs)(view.state, view.dispatch); view.focus(); - } + }, + flyout_top: 0, + flyout_left: 0 }); } }); @@ -266,6 +280,20 @@ export class TooltipTextMenu { }; } + getMarksInSelection(state: EditorState<any>, targets: MarkType<any>[]) { + let found: Mark<any>[] = []; + let { from, to } = state.selection as TextSelection; + state.doc.nodesBetween(from, to, (node) => { + let marks = node.marks; + if (marks) { + marks.forEach(m => { + if (targets.includes(m.type)) found.push(m); + }); + } + }); + return found; + } + //updates the tooltip menu when the selection changes update(view: EditorView, lastState: EditorState | undefined) { let state = view.state; @@ -279,6 +307,14 @@ 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; |