From 939e18624af4252551f38c43335ee8ef0acd144c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 21 Apr 2024 19:03:49 -0400
Subject: more lint cleanup

---
 .../views/nodes/formattedText/RichTextMenu.tsx     | 226 ++++++++-------------
 1 file changed, 85 insertions(+), 141 deletions(-)

(limited to 'src/client/views/nodes/formattedText/RichTextMenu.tsx')

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;
+    }
 }
-- 
cgit v1.2.3-70-g09d2

