From 34f96cb1fe36cc5448d2cd42c4b208751cdb3403 Mon Sep 17 00:00:00 2001 From: vellichora Date: Tue, 7 Jan 2020 09:13:43 -0500 Subject: integrated link button on richtextmenu --- src/client/util/RichTextMenu.scss | 10 ++++-- src/client/util/RichTextMenu.tsx | 69 +++++++++++++++++++++++++-------------- 2 files changed, 51 insertions(+), 28 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextMenu.scss b/src/client/util/RichTextMenu.scss index 9c5c55b62..f7414cc7f 100644 --- a/src/client/util/RichTextMenu.scss +++ b/src/client/util/RichTextMenu.scss @@ -4,9 +4,9 @@ position: relative; .dropdown-button { - width: 20px; - padding-left: 7px; - padding-right: 7px; + width: 15px; + padding-left: 5px; + padding-right: 5px; } .dropdown { @@ -21,4 +21,8 @@ min-width: 150px; padding: 5px; } + + input { + color: black; + } } \ No newline at end of file diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx index 12bd3348f..b6b2c53ff 100644 --- a/src/client/util/RichTextMenu.tsx +++ b/src/client/util/RichTextMenu.tsx @@ -12,12 +12,16 @@ import { faBold, faItalic, faUnderline, faStrikethrough, faSubscript, faSuperscr import { MenuItem, Dropdown } from "prosemirror-menu"; import { updateBullets } from "./ProsemirrorExampleTransfer"; import { FieldViewProps } from "../views/nodes/FieldView"; -import { NumCast } from "../../new_fields/Types"; +import { NumCast, Cast, StrCast } from "../../new_fields/Types"; import { FormattedTextBoxProps } from "../views/nodes/FormattedTextBox"; -import { unimplementedFunction } from "../../Utils"; +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, faUnderline, faStrikethrough, faSuperscript, faSubscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink); @@ -81,6 +85,10 @@ export default class RichTextMenu extends AntimodeMenu { // this._linkDropdownDom && this.tooltip.replaceChild(newLinkDropdowndom, this._linkDropdownDom); // this._linkDropdownDom = newLinkDropdowndom; + // const targetTitle = await this.getTextLinkTargetTitle(); + // // console.log(targetTitle); + // this.setCurrentLink(targetTitle); + // update active font family and size const active = this.getActiveFontStylesOnSelection(); const activeFamilies = active && active.get("families"); @@ -89,6 +97,9 @@ export default class RichTextMenu extends AntimodeMenu { this.activeFontFamily = !activeFamilies || activeFamilies.length === 0 ? "default" : activeFamilies.length === 1 ? String(activeFamilies[0]) : "various"; this.activeFontSize = !activeSizes || activeSizes.length === 0 ? "default" : activeSizes.length === 1 ? String(activeSizes[0]) + "pt" : "various"; + const targetTitle = await this.getTextLinkTargetTitle(); + this.setCurrentLink(targetTitle); + // this.update_mark_doms(); } @@ -274,7 +285,7 @@ export default class RichTextMenu extends AntimodeMenu { return true; } - @action + @action toggleBrushDropdown() { this.showBrushDropdown = !this.showBrushDropdown; } createBrushButton() { @@ -308,13 +319,13 @@ export default class RichTextMenu extends AntimodeMenu {
- {this.showBrushDropdown ? + {this.showBrushDropdown ? (

{label}

{/* */} -
) - : <> } +
) + : <>} ); } @@ -396,13 +407,13 @@ export default class RichTextMenu extends AntimodeMenu {
- {this.showColorDropdown ? + {this.showColorDropdown ? (
{colors.map(color => { - return ; + if (color) return ; })} -
) - : <> } +
) + : <>} ); } @@ -458,13 +469,13 @@ export default class RichTextMenu extends AntimodeMenu {
- {this.showHighlightDropdown ? + {this.showHighlightDropdown ? (
{colors.map(color => { - return ; + if (color) return ; })} -
) - : <> } +
) + : <>} ); } @@ -489,27 +500,30 @@ export default class RichTextMenu extends AntimodeMenu { self.setCurrentLink(e.target.value); } - const targetTitle = await this.getTextLinkTargetTitle(); - console.log(targetTitle); - // this.setCurrentLink(targetTitle); + // const targetTitle = this.getTextLinkTargetTitle(); + console.log("link curr is ", this.currentLink); + // // this.setCurrentLink(targetTitle); + const link = this.currentLink ? this.currentLink : ""; return (
- {this.showLinkDropdown ? + {this.showLinkDropdown ? (

Linked to:

- {/* - - */} -
) - : <> } + + + +
) + : <>} ); } 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) { @@ -542,7 +556,10 @@ export default class RichTextMenu extends AntimodeMenu { } } + // 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)); @@ -552,8 +569,10 @@ export default class RichTextMenu extends AntimodeMenu { } 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 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) { @@ -562,7 +581,7 @@ export default class RichTextMenu extends AntimodeMenu { 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)); + this.view!.dispatch(this.view!.state.tr.removeMark(this.view!.state.selection.from, this.view!.state.selection.to, this.view!.state.schema.marks.link)); } }); } -- cgit v1.2.3-70-g09d2