diff options
Diffstat (limited to 'src/client/util/TooltipTextMenu.tsx')
-rw-r--r-- | src/client/util/TooltipTextMenu.tsx | 42 |
1 files changed, 39 insertions, 3 deletions
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; |