From 579010cc792ce961618406886961d257be2c74db Mon Sep 17 00:00:00 2001 From: Fawn Date: Thu, 9 Jan 2020 18:13:28 -0500 Subject: condensed the link button and made buttons dark when they are active in the selection --- src/client/util/RichTextMenu.scss | 10 ++++++ src/client/util/RichTextMenu.tsx | 67 +++++++++++++++++++++++++++++++------- src/client/views/AntimodeMenu.scss | 4 +++ 3 files changed, 69 insertions(+), 12 deletions(-) (limited to 'src') diff --git a/src/client/util/RichTextMenu.scss b/src/client/util/RichTextMenu.scss index 6383e0b7b..43cc23ecd 100644 --- a/src/client/util/RichTextMenu.scss +++ b/src/client/util/RichTextMenu.scss @@ -9,6 +9,16 @@ 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; diff --git a/src/client/util/RichTextMenu.tsx b/src/client/util/RichTextMenu.tsx index a5de8d7a9..ec79fbf85 100644 --- a/src/client/util/RichTextMenu.tsx +++ b/src/client/util/RichTextMenu.tsx @@ -8,7 +8,7 @@ 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, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller } from "@fortawesome/free-solid-svg-icons"; +import { faBold, faItalic, faUnderline, faStrikethrough, faSubscript, faSuperscript, faIndent, faEyeDropper, faCaretDown, faPalette, faHighlighter, faLink, faPaintRoller, faSleigh } from "@fortawesome/free-solid-svg-icons"; import { MenuItem, Dropdown } from "prosemirror-menu"; import { updateBullets } from "./ProsemirrorExampleTransfer"; import { FieldViewProps } from "../views/nodes/FieldView"; @@ -40,6 +40,13 @@ export default class RichTextMenu extends AntimodeMenu { private fontColors: (string | undefined)[]; private highlightColors: (string | undefined)[]; + @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 = ""; @@ -148,6 +155,9 @@ export default class RichTextMenu extends AntimodeMenu { // 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.getMarksInSelection(this.view.state); + this.setActiveMarkButtons(activeMarks); // update active font family and size const active = this.getActiveFontStylesOnSelection(); @@ -208,14 +218,37 @@ export default class RichTextMenu extends AntimodeMenu { getMarksInSelection(state: EditorState) { const found = new Set(); const { from, to } = state.selection as TextSelection; + console.log(to - from, state.tr.storedMarks); state.doc.nodesBetween(from, to, (node) => node.marks.forEach(m => found.add(m))); + if (to - from === 0) { state.storedMarks && state.storedMarks.forEach(m => found.add(m)); } return found; } destroy() { } - createButton(faIcon: string, title: string, command?: any, onclick?: any) { + @action + setActiveMarkButtons(activeMarks: Set) { + this.boldActive = false; + this.italicsActive = false; + this.underlineActive = false; + this.strikethroughActive = false; + this.subscriptActive = false; + this.superscriptActive = false; + + activeMarks.forEach(mark => { + switch (mark.type.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(); @@ -226,7 +259,7 @@ export default class RichTextMenu extends AntimodeMenu { } return ( - ); @@ -528,7 +561,7 @@ export default class RichTextMenu extends AntimodeMenu { const link = this.currentLink ? this.currentLink : ""; - const button = ; + const button = const dropdownContent =
@@ -678,12 +711,12 @@ export default class RichTextMenu extends AntimodeMenu { render() { const row1 =
{[ - this.createButton("bold", "Bold", toggleMark(schema.marks.strong)), - this.createButton("italic", "Italic", toggleMark(schema.marks.em)), - this.createButton("underline", "Underline", toggleMark(schema.marks.underline)), - this.createButton("strikethrough", "Strikethrough", toggleMark(schema.marks.strikethrough)), - this.createButton("superscript", "Superscript", toggleMark(schema.marks.superscript)), - this.createButton("subscript", "Subscript", toggleMark(schema.marks.subscript)), + 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(), @@ -761,8 +794,18 @@ class ButtonDropdown extends React.Component { render() { return (
this.ref = node}> - {this.props.openDropdownOnButton ?
{this.props.button}
: this.props.button} - + {this.props.openDropdownOnButton ? + : + <> + {this.props.button} + + } + {this.showDropdown ? this.props.dropdownContent : <>}
); diff --git a/src/client/views/AntimodeMenu.scss b/src/client/views/AntimodeMenu.scss index f78b1dbfb..d4a76ee17 100644 --- a/src/client/views/AntimodeMenu.scss +++ b/src/client/views/AntimodeMenu.scss @@ -21,6 +21,10 @@ background-color: transparent; width: 35px; height: 35px; + + &.active { + background-color: #121212; + } } .antimodeMenu-button:hover { -- cgit v1.2.3-70-g09d2