diff options
Diffstat (limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')
| -rw-r--r-- | src/client/views/nodes/formattedText/RichTextMenu.tsx | 226 |
1 files changed, 85 insertions, 141 deletions
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx index ec9c1a15d..6108383c2 100644 --- a/src/client/views/nodes/formattedText/RichTextMenu.tsx +++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx @@ -23,10 +23,12 @@ import { FormattedTextBox } from './FormattedTextBox'; import { updateBullets } from './ProsemirrorExampleTransfer'; import './RichTextMenu.scss'; import { schema } from './schema_rts'; + const { toggleMark } = require('prosemirror-commands'); @observer export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { + // eslint-disable-next-line no-use-before-define static _instance: { menu: RichTextMenu | undefined } = observable({ menu: undefined }); static get Instance() { return RichTextMenu._instance?.menu; @@ -116,7 +118,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { componentDidMount() { this._disposer = reaction( () => SelectionManager.Views.slice(), - views => this.updateMenu(undefined, undefined, undefined, undefined) + () => this.updateMenu(undefined, undefined, undefined, undefined) ); } componentWillUnmount() { @@ -139,10 +141,10 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this.setActiveMarkButtons(this.getActiveMarksOnSelection()); const active = this.getActiveFontStylesOnSelection(); - const activeFamilies = active.activeFamilies; - const activeSizes = active.activeSizes; - const activeColors = active.activeColors; - const activeHighlights = active.activeHighlights; + const { activeFamilies } = active; + const { activeSizes } = active; + const { activeColors } = active; + const { activeHighlights } = active; const refDoc = SelectionManager.Views.lastElement()?.layoutDoc ?? Doc.UserDoc(); const refField = (pfx => (pfx ? pfx + '_' : ''))(SelectionManager.Views.lastElement()?.LayoutFieldKey); @@ -174,8 +176,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { dispatch(updateBullets(markup, state.schema)); } else { const state = this.view?.state; - const tr = this.view?.state.tr; - if (tr && state) { + if (state) { + const { tr } = state; if (dontToggle) { tr.addMark(state.selection.from, state.selection.to, mark); dispatch(tr.setSelection(new TextSelection(tr.doc.resolve(state.selection.from), tr.doc.resolve(state.selection.to)))); // bcz: need to redo the selection because ctrl-a selections disappear otherwise @@ -190,7 +192,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { // finds font sizes and families in selection getActiveAlignment() { if (this.view && this.TextView?._props.rootSelected?.()) { - const path = (this.view.state.selection.$from as any).path; + const { path } = this.view.state.selection.$from as any; for (let i = path.length - 3; i < path.length && i >= 0; i -= 3) { if (path[i]?.type === this.view.state.schema.nodes.paragraph || path[i]?.type === this.view.state.schema.nodes.heading) { return path[i].attrs.align || 'left'; @@ -222,24 +224,25 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const activeColors = new Set<string>(); const activeHighlights = new Set<string>(); if (this.view && this.TextView?._props.rootSelected?.()) { - const state = this.view.state; + const { state } = this.view; const pos = this.view.state.selection.$from; - var marks: Mark[] = [...(state.storedMarks ?? [])]; + let marks: Mark[] = [...(state.storedMarks ?? [])]; if (state.storedMarks !== null) { + /* empty */ } else if (state.selection.empty) { for (let i = 0; i <= pos.depth; i++) { marks = [...Array.from(pos.node(i).marks), ...this.view.state.selection.$anchor.marks(), ...marks]; } } else { - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + state.doc.nodesBetween(state.selection.from, state.selection.to, (node /* , pos, parent, index */) => { node.marks?.filter(mark => !mark.isInSet(marks)).map(mark => marks.push(mark)); }); } marks.forEach(m => { - m.type === state.schema.marks.pFontFamily && activeFamilies.add(m.attrs.family); - m.type === state.schema.marks.pFontColor && activeColors.add(m.attrs.color); + m.type === state.schema.marks.pFontFamily && activeFamilies.add(m.attrs.fontFamily); + m.type === state.schema.marks.pFontColor && activeColors.add(m.attrs.fontColor); m.type === state.schema.marks.pFontSize && activeSizes.add(m.attrs.fontSize); - m.type === state.schema.marks.marker && activeHighlights.add(String(m.attrs.highlight)); + m.type === state.schema.marks.pFontHighlight && activeHighlights.add(String(m.attrs.fontHigh)); }); } else if (SelectionManager.Views.some(dv => dv.ComponentView instanceof EquationBox)) { SelectionManager.Views.forEach(dv => StrCast(dv.Document._text_fontSize) && activeSizes.add(StrCast(dv.Document._text_fontSize))); @@ -254,26 +257,27 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return found; } - //finds all active marks on selection in given group + // finds all active marks on selection in given group getActiveMarksOnSelection() { if (!this.view || !this.TextView?._props.rootSelected?.()) return [] as MarkType[]; - const state = this.view.state; - var marks: Mark[] = [...(state.storedMarks ?? [])]; + const { state } = this.view; + let marks: Mark[] = [...(state.storedMarks ?? [])]; const pos = this.view.state.selection.$from; if (state.storedMarks !== null) { + /* empty */ } else if (state.selection.empty) { for (let i = 0; i <= pos.depth; i++) { marks = [...Array.from(pos.node(i).marks), ...this.view.state.selection.$anchor.marks(), ...marks]; } } else { - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + state.doc.nodesBetween(state.selection.from, state.selection.to, (node /* , pos, parent, index */) => { node.marks?.filter(mark => !mark.isInSet(marks)).map(mark => marks.push(mark)); }); } const markGroup = [schema.marks.noAutoLinkAnchor, schema.marks.strong, schema.marks.em, schema.marks.underline, schema.marks.strikethrough, schema.marks.superscript, schema.marks.subscript]; - return markGroup.filter(mark_type => { - const mark = state.schema.mark(mark_type); + return markGroup.filter(markType => { + const mark = state.schema.mark(markType); return mark.isInSet(marks); }); } @@ -291,7 +295,6 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { this._superscriptActive = false; activeMarks.forEach(mark => { - // prettier-ignore switch (mark.name) { case 'noAutoLinkAnchor': this._noLinkActive = true; break; case 'strong': this._boldActive = true; break; @@ -300,7 +303,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { case 'strikethrough': this._strikethroughActive = true; break; case 'subscript': this._subscriptActive = true; break; case 'superscript': this._superscriptActive = true; break; - } + default: + } // prettier-ignore }); } @@ -353,53 +357,22 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } }; - setFontSize = (fontSize: string) => { + setFontField = (value: string, fontField: 'fontSize' | 'fontFamily' | 'fontColor' | 'fontHighlight') => { if (this.view) { - if (this.view.state.selection.from === 1 && this.view.state.selection.empty && (!this.view.state.doc.nodeAt(1) || !this.view.state.doc.nodeAt(1)?.marks.some(m => m.type.name === fontSize))) { - this.TextView.dataDoc[this.TextView.fieldKey + '_fontSize'] = fontSize; + if (this.view.state.selection.from === 1 && this.view.state.selection.empty && (!this.view.state.doc.nodeAt(1) || !this.view.state.doc.nodeAt(1)?.marks.some(m => m.type.name === value))) { + this.TextView.dataDoc[this.TextView.fieldKey + `_${fontField}`] = value; this.view.focus(); } else { - const fmark = this.view.state.schema.marks.pFontSize.create({ fontSize }); + const attrs: { [key: string]: string } = {}; + attrs[fontField] = value; + const fmark = this.view?.state.schema.marks['pF' + fontField.substring(1)].create(attrs); this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); this.view.focus(); } - } else if (SelectionManager.Views.length) { - SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontSize'] = fontSize)); - } else Doc.UserDoc().fontSize = fontSize; - this.updateMenu(this.view, undefined, this.props, this.layoutDoc); - }; - - setFontFamily = (family: string) => { - if (this.view) { - const fmark = this.view.state.schema.marks.pFontFamily.create({ family }); - this.setMark(fmark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(fmark)), true); - this.view.focus(); - } else if (SelectionManager.Views.length) { - SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontFamily'] = family)); - } else Doc.UserDoc().fontFamily = family; + } else Doc.UserDoc()[fontField] = value; this.updateMenu(this.view, undefined, this.props, this.layoutDoc); }; - setHighlight(color: string) { - if (this.view) { - const highlightMark = this.view.state.schema.mark(this.view.state.schema.marks.marker, { highlight: color }); - this.setMark(highlightMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(highlightMark)), true); - this.view.focus(); - } else Doc.UserDoc()._fontHighlight = color; - this.updateMenu(this.view, undefined, this.props, this.layoutDoc); - } - - setColor(color: string) { - if (this.view) { - const colorMark = this.view.state.schema.mark(this.view.state.schema.marks.pFontColor, { color }); - this.setMark(colorMark, this.view.state, (tx: any) => this.view!.dispatch(tx.addStoredMark(colorMark)), true); - this.view.focus(); - } else if (SelectionManager.Views.length) { - SelectionManager.Views.forEach(dv => (dv.layoutDoc[dv.LayoutFieldKey + '_fontColor'] = color)); - } else Doc.UserDoc().fontColor = color; - this.updateMenu(this.view, undefined, this.props, this.layoutDoc); - } - // TODO: remove doesn't work // remove all node type and apply the passed-in one to the selected text changeListType = (mapStyle: string) => { @@ -407,7 +380,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const newMapStyle = active === mapStyle ? '' : mapStyle; if (!this.view || newMapStyle === '') return; - let inList = this.view.state.selection.$anchor.node(1).type === schema.nodes.ordered_list; + const inList = this.view.state.selection.$anchor.node(1).type === schema.nodes.ordered_list; const marks = this.view.state.storedMarks || (this.view.state.selection.$to.parentOffset && this.view.state.selection.$from.marks()); if (inList) { const tx2 = updateBullets(this.view.state.tr, schema, newMapStyle, this.view.state.doc.resolve(this.view.state.selection.$anchor.before(1) + 1).pos, this.view.state.doc.resolve(this.view.state.selection.$anchor.after(1)).pos); @@ -428,7 +401,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { insertSummarizer(state: EditorState, dispatch: any) { if (state.selection.empty) return false; const mark = state.schema.marks.summarize.create(); - const tr = state.tr; + const { tr } = state; tr.addMark(state.selection.from, state.selection.to, mark); const content = tr.selection.content(); const newNode = state.schema.nodes.summary.create({ visibility: false, text: content, textslice: content.toJSON() }); @@ -436,13 +409,13 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return true; } - vcenterToggle = (view: EditorView, dispatch: any) => { + vcenterToggle = () => { this.layoutDoc && (this.layoutDoc._layout_centered = !this.layoutDoc._layout_centered); }; align = (view: EditorView, dispatch: any, alignment: 'left' | 'right' | 'center') => { if (this.TextView?._props.rootSelected?.()) { - var tr = view.state.tr; - view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos, parent, index) => { + let { tr } = view.state; + view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos) => { if ([schema.nodes.paragraph, schema.nodes.heading].includes(node.type)) { tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, align: alignment }, node.marks); return false; @@ -455,56 +428,14 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } }; - insetParagraph(state: EditorState, dispatch: any) { - var tr = state.tr; - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { + paragraphSetup(state: EditorState, dispatch: any, field: 'inset' | 'indent', value?: 0 | 10 | -10) { + let { tr } = state; + state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos) => { if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { - const inset = (node.attrs.inset ? Number(node.attrs.inset) : 0) + 10; - tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, inset }, node.marks); - return false; - } - return true; - }); - dispatch?.(tr); - return true; - } - outsetParagraph(state: EditorState, dispatch: any) { - var tr = state.tr; - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { - if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { - const inset = Math.max(0, (node.attrs.inset ? Number(node.attrs.inset) : 0) - 10); - tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, inset }, node.marks); - return false; - } - return true; - }); - dispatch?.(tr); - return true; - } - - indentParagraph(state: EditorState, dispatch: any) { - var tr = state.tr; - const heading = false; - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { - if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { - const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; - const indent = !nodeval ? 25 : nodeval < 0 ? 0 : nodeval + 25; - tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, indent }, node.marks); - return false; - } - return true; - }); - !heading && dispatch?.(tr); - return true; - } - - hangingIndentParagraph(state: EditorState, dispatch: any) { - var tr = state.tr; - state.doc.nodesBetween(state.selection.from, state.selection.to, (node, pos, parent, index) => { - if (node.type === schema.nodes.paragraph || node.type === schema.nodes.heading) { - const nodeval = node.attrs.indent ? Number(node.attrs.indent) : undefined; - const indent = !nodeval ? -25 : nodeval > 0 ? 0 : nodeval - 10; - tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, indent }, node.marks); + const newValue = !value ? + (node.attrs[field] ? 0 : node.attrs[field] + 10) : + Math.max(0, value); // prettier-ignore + tr = tr.setNodeMarkup(pos, node.type, { ...node.attrs, ...(field === 'inset' ? { inset: newValue } : { indent: newValue }) }, node.marks); return false; } return true; @@ -514,7 +445,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } insertBlockquote(state: EditorState, dispatch: any) { - const path = (state.selection.$from as any).path; + const { path } = state.selection.$from as any; if (path.length > 6 && path[path.length - 6].type === schema.nodes.blockquote) { lift(state, dispatch); } else { @@ -547,13 +478,13 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { } @action - fillBrush(state: EditorState, dispatch: any) { + fillBrush() { if (!this.view) return; if (!Array.from(this.brushMarks.keys()).length) { - const selected_marks = this.getMarksInSelection(this.view.state); - if (selected_marks.size >= 0) { - this.brushMarks = selected_marks; + const selectedMarks = this.getMarksInSelection(this.view.state); + if (selectedMarks.size >= 0) { + this.brushMarks = selectedMarks; } } else { const { from, to, $from } = this.view.state.selection; @@ -597,9 +528,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { const button = ( <Tooltip title={<div className="dash-tooltip">set hyperlink</div>} placement="bottom"> - <button className="antimodeMenu-button color-preview-button"> - <FontAwesomeIcon icon="link" size="lg" /> - </button> + { + // eslint-disable-next-line jsx-a11y/control-has-associated-label + <button type="button" className="antimodeMenu-button color-preview-button"> + <FontAwesomeIcon icon="link" size="lg" /> + </button> + } </Tooltip> ); @@ -607,21 +541,22 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { <div className="dropdown link-menu"> <p>Linked to:</p> <input value={link} ref={this._linkToRef} placeholder="Enter URL" onChange={onLinkChange} /> - <button className="make-button" onPointerDown={e => this.makeLinkToURL(link, 'add:right')}> + <button type="button" className="make-button" onPointerDown={() => this.makeLinkToURL(link)}> Apply hyperlink </button> <div className="divider" /> - <button className="remove-button" onPointerDown={e => this.deleteLink()}> + <button type="button" className="remove-button" onPointerDown={() => this.deleteLink()}> Remove link </button> </div> ); - return <ButtonDropdown view={this.view} key={'link button'} button={button} dropdownContent={dropdownContent} openDropdownOnButton={true} link={true} />; + // eslint-disable-next-line no-use-before-define + return <ButtonDropdown view={this.view} key="link button" button={button} dropdownContent={dropdownContent} openDropdownOnButton link />; } async getTextLinkTargetTitle() { - if (!this.view) return; + if (!this.view) return undefined; const node = this.view.state.selection.$from.nodeAfter; const link = node && node.marks.find(m => m.type.name === 'link'); @@ -633,15 +568,15 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { if (linkclicked) { const linkDoc = await DocServer.GetRefField(linkclicked); if (linkDoc instanceof Doc) { - const link_anchor_1 = await Cast(linkDoc.link_anchor_1, Doc); - const link_anchor_2 = await Cast(linkDoc.link_anchor_2, Doc); + const linkAnchor1 = await Cast(linkDoc.link_anchor_1, Doc); + const linkAnchor2 = await Cast(linkDoc.link_anchor_2, Doc); const currentDoc = SelectionManager.Docs.lastElement(); - if (currentDoc && link_anchor_1 && link_anchor_2) { - if (Doc.AreProtosEqual(currentDoc, link_anchor_1)) { - return StrCast(link_anchor_2.title); + if (currentDoc && linkAnchor1 && linkAnchor2) { + if (Doc.AreProtosEqual(currentDoc, linkAnchor1)) { + return StrCast(linkAnchor2.title); } - if (Doc.AreProtosEqual(currentDoc, link_anchor_2)) { - return StrCast(link_anchor_1.title); + if (Doc.AreProtosEqual(currentDoc, linkAnchor2)) { + return StrCast(linkAnchor1.title); } } } @@ -653,11 +588,12 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> { return link.attrs.title; } } + return undefined; } // TODO: should check for valid URL @undoBatch - makeLinkToURL = (target: string, lcoation: string) => { + makeLinkToURL = (target: string) => { ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, 'onRadd:rightight', target, target); }; @@ -736,7 +672,11 @@ export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps render() { return ( - <div className="button-dropdown-wrapper" ref={node => (this.ref = node)}> + <div + className="button-dropdown-wrapper" + ref={node => { + this.ref = node; + }}> {!this._props.pdf ? ( <div className="antimodeMenu-button dropdown-button-combined" onPointerDown={this._props.openDropdownOnButton ? this.onDropdownClick : undefined}> {this._props.button} @@ -747,9 +687,12 @@ export class ButtonDropdown extends ObservableReactComponent<ButtonDropdownProps ) : ( <> {this._props.button} - <button className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}> - <FontAwesomeIcon icon="caret-down" size="sm" /> - </button> + { + // eslint-disable-next-line jsx-a11y/control-has-associated-label + <button type="button" className="dropdown-button antimodeMenu-button" key="antimodebutton" onPointerDown={this.onDropdownClick}> + <FontAwesomeIcon icon="caret-down" size="sm" /> + </button> + } </> )} {this.showDropdown ? this._props.dropdownContent : null} @@ -762,10 +705,11 @@ interface RichTextMenuPluginProps { editorProps: any; } export class RichTextMenuPlugin extends React.Component<RichTextMenuPluginProps> { - render() { - return null; - } + // eslint-disable-next-line react/no-unused-class-component-methods update(view: EditorView, lastState: EditorState | undefined) { RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps, (view as any).TextView?.layoutDoc); } + render() { + return null; + } } |