many changes to add typing in place of 'any's etc

12 files changed, 283 insertions, 215 deletions

diff --git a/src/client/views/nodes/formattedText/DashDocCommentView.tsx b/src/client/views/nodes/formattedText/DashDocCommentView.tsx
index 3ec49fa27..0304ddc86 100644
--- a/src/client/views/nodes/formattedText/DashDocCommentView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocCommentView.tsx
@@ -5,18 +5,20 @@ import { IReactionDisposer, computed, reaction } from 'mobx';
 import { Doc } from '../../../../fields/Doc';
 import { DocServer } from '../../../DocServer';
 import { NumCast } from '../../../../fields/Types';
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
 
 interface IDashDocCommentViewInternal {
     docId: string;
-    view: any;
-    getPos: any;
+    view: EditorView;
+    getPos: () => number;
     setHeight: (height: number) => void;
 }
 
 export class DashDocCommentViewInternal extends React.Component<IDashDocCommentViewInternal> {
     _reactionDisposer: IReactionDisposer | undefined;
 
-    constructor(props: any) {
+    constructor(props: IDashDocCommentViewInternal) {
         super(props);
         this.onPointerLeaveCollapsed = this.onPointerLeaveCollapsed.bind(this);
         this.onPointerEnterCollapsed = this.onPointerEnterCollapsed.bind(this);
@@ -43,19 +45,19 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV
         return DocServer.GetRefField(this.props.docId);
     }
 
-    onPointerLeaveCollapsed = (e: any) => {
+    onPointerLeaveCollapsed = (e: React.PointerEvent) => {
         this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowUnhighlight());
         e.preventDefault();
         e.stopPropagation();
     };
 
-    onPointerEnterCollapsed = (e: any) => {
+    onPointerEnterCollapsed = (e: React.PointerEvent) => {
         this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc, false));
         e.preventDefault();
         e.stopPropagation();
     };
 
-    onPointerUpCollapsed = (e: any) => {
+    onPointerUpCollapsed = (e: React.PointerEvent) => {
         const target = this.targetNode();
 
         if (target) {
@@ -65,7 +67,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV
             setTimeout(() => {
                 expand && this._dashDoc.then(async dashDoc => dashDoc instanceof Doc && Doc.linkFollowHighlight(dashDoc));
                 try {
-                    this.props.view.dispatch(this.props.view.state.tr.setSelection(TextSelection.create(this.props.view.state.tr.doc, this.props.getPos() + (expand ? 2 : 1))));
+                    this.props.view.dispatch(this.props.view.state.tr.setSelection(TextSelection.create(this.props.view.state.tr.doc, (this.props.getPos() ?? 0) + (expand ? 2 : 1))));
                 } catch (err) {
                     /* empty */
                 }
@@ -74,7 +76,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV
         e.stopPropagation();
     };
 
-    onPointerDownCollapsed = (e: any) => {
+    onPointerDownCollapsed = (e: React.PointerEvent) => {
         e.stopPropagation();
     };
 
@@ -84,7 +86,7 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV
         for (let i = this.props.getPos() + 1; i < state.doc.content.size; i++) {
             const m = state.doc.nodeAt(i);
             if (m && m.type === state.schema.nodes.dashDoc && m.attrs.docId === this.props.docId) {
-                return { node: m, pos: i, hidden: m.attrs.hidden } as { node: any; pos: number; hidden: boolean };
+                return { node: m, pos: i, hidden: m.attrs.hidden } as { node: Node; pos: number; hidden: boolean };
             }
         }
 
@@ -119,10 +121,10 @@ export class DashDocCommentViewInternal extends React.Component<IDashDocCommentV
 // the comment can be toggled on/off with the '<-' text anchor.
 export class DashDocCommentView {
     dom: HTMLDivElement; // container for label and value
-    root: any;
-    node: any;
+    root: ReactDOM.Root;
+    node: Node;
 
-    constructor(node: any, view: any, getPos: any) {
+    constructor(node: Node, view: EditorView, getPos: () => number | undefined) {
         this.node = node;
         this.dom = document.createElement('div');
         this.dom.style.width = node.attrs.width;
@@ -130,22 +132,22 @@ export class DashDocCommentView {
         this.dom.style.fontWeight = 'bold';
         this.dom.style.position = 'relative';
         this.dom.style.display = 'inline-block';
-        this.dom.onkeypress = function (e: any) {
+        this.dom.onkeypress = function (e) {
             e.stopPropagation();
         };
-        this.dom.onkeydown = function (e: any) {
+        this.dom.onkeydown = function (e) {
             e.stopPropagation();
         };
-        this.dom.onkeyup = function (e: any) {
+        this.dom.onkeyup = function (e) {
             e.stopPropagation();
         };
-        this.dom.onmousedown = function (e: any) {
+        this.dom.onmousedown = function (e) {
             e.stopPropagation();
         };
 
+        const getPosition = () => getPos() ?? 0;
         this.root = ReactDOM.createRoot(this.dom);
-        this.root.render(<DashDocCommentViewInternal view={view} getPos={getPos} setHeight={this.setHeight} docId={node.attrs.docId} />);
-        (this as any).dom = this.dom;
+        this.root.render(<DashDocCommentViewInternal view={view} getPos={getPosition} setHeight={this.setHeight} docId={node.attrs.docId} />);
     }
 
     setHeight = (hgt: number) => {
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 93371685d..e7f2cdba8 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { NodeSelection } from 'prosemirror-state';
@@ -16,6 +15,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocumentView } from '../DocumentView';
 import { FocusViewOptions } from '../FocusViewOptions';
 import { FormattedTextBox } from './FormattedTextBox';
+import { EditorView } from 'prosemirror-view';
+import { Node } from 'prosemirror-model';
 
 const horizPadding = 3; // horizontal padding to container to allow cursor to show up on either side.
 interface IDashDocViewInternal {
@@ -26,9 +27,9 @@ interface IDashDocViewInternal {
     height: string;
     hidden: boolean;
     fieldKey: string;
-    view: any;
-    node: any;
-    getPos: any;
+    view: EditorView;
+    node: Node;
+    getPos: () => number;
 }
 
 @observer
@@ -109,7 +110,7 @@ export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewIn
     };
     outerFocus = (target: Doc, options: FocusViewOptions) => this._textBox.focus(target, options); // ideally, this would scroll to show the focus target
 
-    onKeyDown = (e: any) => {
+    onKeyDown = (e: React.KeyboardEvent) => {
         e.stopPropagation();
         if (e.key === 'Tab' || e.key === 'Enter') {
             e.preventDefault();
@@ -176,29 +177,31 @@ export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewIn
 
 export class DashDocView {
     dom: HTMLSpanElement; // container for label and value
-    root: any;
+    root: ReactDOM.Root;
 
-    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
+    constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) {
         this.dom = document.createElement('span');
         this.dom.style.position = 'relative';
         this.dom.style.textIndent = '0';
         this.dom.style.width = (+node.attrs.width.toString().replace('px', '') + horizPadding).toString();
         this.dom.style.height = node.attrs.height;
         this.dom.style.display = node.attrs.hidden ? 'none' : 'inline-block';
-        (this.dom.style as any).float = node.attrs.float;
-        this.dom.onkeypress = function (e: any) {
+        this.dom.style.float = node.attrs.float;
+        this.dom.onkeypress = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
-        this.dom.onkeydown = function (e: any) {
+        this.dom.onkeydown = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
-        this.dom.onkeyup = function (e: any) {
+        this.dom.onkeyup = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
-        this.dom.onmousedown = function (e: any) {
+        this.dom.onmousedown = function (e: MouseEvent) {
             e.stopPropagation();
         };
 
+        const getPosition = () => getPos() ?? 0;
+
         this.root = ReactDOM.createRoot(this.dom);
         this.root.render(
             <DashDocViewInternal
@@ -211,7 +214,7 @@ export class DashDocView {
                 tbox={tbox}
                 view={view}
                 node={node}
-                getPos={getPos}
+                getPos={getPosition}
             />
         );
     }
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index 9903d0e8a..f0313fba4 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
@@ -26,6 +23,8 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { OpenWhere } from '../OpenWhere';
 import './DashFieldView.scss';
 import { FormattedTextBox } from './FormattedTextBox';
+import { Node } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
 
 @observer
 export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -34,7 +33,7 @@ export class DashFieldViewMenu extends AntimodeMenu<AntimodeMenuProps> {
     static createFieldView: (e: React.MouseEvent) => void = emptyFunction;
     static toggleFieldHide: () => void = emptyFunction;
     static toggleValueHide: () => void = emptyFunction;
-    constructor(props: any) {
+    constructor(props: AntimodeMenuProps) {
         super(props);
         DashFieldViewMenu.Instance = this;
     }
@@ -100,8 +99,8 @@ interface IDashFieldViewInternal {
     height: number;
     editable: boolean;
     nodeSelected: () => boolean;
-    node: any;
-    getPos: any;
+    node: Node;
+    getPos: () => number;
     unclickable: () => boolean;
 }
 
@@ -274,7 +273,9 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     <select className="dashFieldView-select" tabIndex={-1} defaultValue={this._dashDoc && Field.toKeyValueString(this._dashDoc, this._fieldKey)} onChange={this.selectVal}>
                         <option value="-unset-">-unset-</option>
                         {this.values.map(val => (
-                            <option value={val.value}>{val.label}</option>
+                            <option key={val.value} value={val.value}>
+                                {val.label}
+                            </option>
                         ))}
                     </select>
                 )}
@@ -284,16 +285,17 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
 }
 export class DashFieldView {
     dom: HTMLDivElement; // container for label and value
-    root: any;
-    node: any;
+    root: ReactDOM.Root;
+    node: Node;
     tbox: FormattedTextBox;
-    getpos: any;
+    getpos: () => number | undefined;
     @observable _nodeSelected = false;
     NodeSelected = () => this._nodeSelected;
 
-    unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some((m: any) => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview);
-    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
+    unclickable = () => !this.tbox._props.rootSelected?.() && this.node.marks.some(m => m.type === this.tbox.EditorView?.state.schema.marks.linkAnchor && m.attrs.noPreview);
+    constructor(node: Node, view: EditorView, getPos: () => number | undefined, tbox: FormattedTextBox) {
         makeObservable(this);
+        const getPosition = () => getPos() ?? 0;
         this.node = node;
         this.tbox = tbox;
         this.getpos = getPos;
@@ -312,7 +314,7 @@ export class DashFieldView {
                 const editor = tbox.EditorView;
                 if (editor) {
                     const { state } = editor;
-                    for (let i = this.getpos() + 1; i < state.doc.content.size; i++) {
+                    for (let i = getPosition() + 1; i < state.doc.content.size; i++) {
                         if (state.doc.nodeAt(i)?.type.name === state.schema.nodes.dashField.name) {
                             editor.dispatch(state.tr.setSelection(new NodeSelection(state.doc.resolve(i))));
                             return;
@@ -321,10 +323,10 @@ export class DashFieldView {
                 }
             }
         };
-        this.dom.onkeyup = function (e: any) {
+        this.dom.onkeyup = function (e: KeyboardEvent) {
             e.stopPropagation();
         };
-        this.dom.onmousedown = function (e: any) {
+        this.dom.onmousedown = function (e: MouseEvent) {
             e.stopPropagation();
         };
 
@@ -333,7 +335,7 @@ export class DashFieldView {
             <DashFieldViewInternal
                 node={node}
                 unclickable={this.unclickable}
-                getPos={getPos}
+                getPos={getPosition}
                 fieldKey={node.attrs.fieldKey}
                 docId={node.attrs.docId}
                 width={node.attrs.width}
diff --git a/src/client/views/nodes/formattedText/EquationEditor.tsx b/src/client/views/nodes/formattedText/EquationEditor.tsx
index d9b1a2cf8..8bb4a0a26 100644
--- a/src/client/views/nodes/formattedText/EquationEditor.tsx
+++ b/src/client/views/nodes/formattedText/EquationEditor.tsx
@@ -3,15 +3,12 @@ import React, { Component, createRef } from 'react';
 
 // Import JQuery, required for the functioning of the equation editor
 import $ from 'jquery';
-
 import './EquationEditor.scss';
 
-// @ts-ignore
-window.jQuery = $;
-
-// @ts-ignore
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).jQuery = $;
 require('mathquill/build/mathquill');
-
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 (window as any).MathQuill = (window as any).MathQuill.getInterface(1);
 
 type EquationEditorProps = {
@@ -36,17 +33,18 @@ type EquationEditorProps = {
  * @extends {Component<EquationEditorProps>}
  */
 class EquationEditor extends Component<EquationEditorProps> {
-    element: any;
+    element: React.RefObject<HTMLSpanElement>;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     mathField: any;
     ignoreEditEvents: number;
 
     // Element needs to be in the class format and thus requires a constructor. The steps that are run
     // in the constructor is to make sure that React can succesfully communicate with the equation
     // editor.
-    constructor(props: any) {
+    constructor(props: EquationEditorProps) {
         super(props);
 
-        this.element = createRef();
+        this.element = createRef<HTMLSpanElement>();
         this.mathField = null;
 
         // MathJax apparently fire 2 edit events on startup.
@@ -74,6 +72,7 @@ class EquationEditor extends Component<EquationEditorProps> {
             autoOperatorNames,
         };
 
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         this.mathField = (window as any).MathQuill.MathField(this.element.current, config);
         this.mathField.latex(value || '');
     }
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index 5167c8f2a..4d0e9efee 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -1,15 +1,16 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import { IReactionDisposer } from 'mobx';
 import { observer } from 'mobx-react';
+import { Node } from 'prosemirror-model';
 import { TextSelection } from 'prosemirror-state';
+import { EditorView } from 'prosemirror-view';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { Doc } from '../../../../fields/Doc';
+import { DocData } from '../../../../fields/DocSymbols';
 import { StrCast } from '../../../../fields/Types';
 import './DashFieldView.scss';
 import EquationEditor from './EquationEditor';
 import { FormattedTextBox } from './FormattedTextBox';
-import { DocData } from '../../../../fields/DocSymbols';
 
 interface IEquationViewInternal {
     fieldKey: string;
@@ -27,7 +28,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
     _fieldKey: string;
     _ref: React.RefObject<EquationEditor> = React.createRef();
 
-    constructor(props: any) {
+    constructor(props: IEquationViewInternal) {
         super(props);
         this._fieldKey = props.fieldKey;
         this._textBoxDoc = props.tbox.Document;
@@ -63,7 +64,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
                 <EquationEditor
                     ref={this._ref}
                     value={StrCast(this._textBoxDoc[DocData][this._fieldKey])}
-                    onChange={(str: any) => {
+                    onChange={str => {
                         this._textBoxDoc[DocData][this._fieldKey] = str;
                     }}
                     autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
@@ -77,25 +78,27 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
 
 export class EquationView {
     dom: HTMLDivElement; // container for label and value
-    root: any;
+    root: ReactDOM.Root;
     tbox: FormattedTextBox;
-    view: any;
-    constructor(node: any, view: any, getPos: any, tbox: FormattedTextBox) {
+    view: EditorView;
+    _editor: EquationEditor | undefined;
+    getPos: () => number;
+    constructor(node: Node, view: EditorView, getPos: () => number, tbox: FormattedTextBox) {
         this.tbox = tbox;
         this.view = view;
+        this.getPos = getPos;
         this.dom = document.createElement('div');
         this.dom.style.width = node.attrs.width;
         this.dom.style.height = node.attrs.height;
         this.dom.style.position = 'relative';
         this.dom.style.display = 'inline-block';
-        this.dom.onmousedown = function (e: any) {
+        this.dom.onmousedown = (e: MouseEvent) => {
             e.stopPropagation();
         };
 
         this.root = ReactDOM.createRoot(this.dom);
         this.root.render(<EquationViewInternal fieldKey={node.attrs.fieldKey} width={node.attrs.width} height={node.attrs.height} getPos={getPos} setEditor={this.setEditor} tbox={tbox} />);
     }
-    _editor: EquationEditor | undefined;
     setEditor = (editor?: EquationEditor) => {
         this._editor = editor;
     };
@@ -106,6 +109,7 @@ export class EquationView {
         this._editor?.mathField.focus();
     }
     selectNode() {
+        this.view.dispatch(this.view.state.tr.setSelection(new TextSelection(this.view.state.doc.resolve(this.getPos()))));
         this.tbox._applyingChange = this.tbox.fieldKey; // setting focus will make prosemirror lose focus, which will cause it to change its selection to a text selection, which causes this view to get rebuilt but it's no longer node selected, so the equationview won't have focus
         setTimeout(() => {
             this._editor?.mathField.focus();
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 39e237986..c8b25e184 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -96,7 +96,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     private _sidebarTagRef = React.createRef<React.Component>();
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _scrollRef: HTMLDivElement | null = null;
-    private _editorView: Opt<EditorView & { TextView?: FormattedTextBox|undefined}>;
+    private _editorView: Opt<EditorView & { TextView?: FormattedTextBox | undefined }>;
     public _applyingChange: string = '';
     private _inDrop = false;
     private _finishingLink = false;
@@ -113,7 +113,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     private _forceUncollapse = true; // if the cursor doesn't move between clicks, then the selection will disappear for some reason.  This flags the 2nd click as happening on a selection which allows bullet points to toggle
     private _break = true;
     public ProseRef?: HTMLDivElement;
-    set _recordingDictation(value) { !this.dataDoc[`${this.fieldKey}_recordingSource`] && (this.dataDoc.mediaState = value ? mediaState.Recording : undefined); }
+    set _recordingDictation(value) {
+        !this.dataDoc[`${this.fieldKey}_recordingSource`] && (this.dataDoc.mediaState = value ? mediaState.Recording : undefined);
+    }
     @computed get _recordingDictation()        { return this.dataDoc?.mediaState === mediaState.Recording; } // prettier-ignore
     @computed get allSidebarDocs()             { return DocListCast(this.dataDoc[this.SidebarKey]); } // prettier-ignore
     @computed get noSidebar()                  { return this.DocumentView?.()._props.hideDecorationTitle || this._props.noSidebar || this.Document._layout_noSidebar; } // prettier-ignore
@@ -128,20 +130,26 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     @computed get config() {
         this._keymap = buildKeymap(schema, this._props);
         this._rules = new RichTextRules(this.Document, this);
-        return { schema,
-                 plugins: [
-                    inputRules(this._rules.inpRules),
-                    this.richTextMenuPlugin(),
-                    history(),
-                    keymap(this._keymap),
-                    keymap(baseKeymap),
-                    new Plugin({ props: { attributes: { class: 'ProseMirror-example-setup-style' } } }),
-                    new Plugin({ view: () => new FormattedTextBoxComment() }),
-                ] };
+        return {
+            schema,
+            plugins: [
+                inputRules(this._rules.inpRules),
+                this.richTextMenuPlugin(),
+                history(),
+                keymap(this._keymap),
+                keymap(baseKeymap),
+                new Plugin({ props: { attributes: { class: 'ProseMirror-example-setup-style' } } }),
+                new Plugin({ view: () => new FormattedTextBoxComment() }),
+            ],
+        };
     }
 
-    public get EditorView() { return this._editorView; }
-    public get SidebarKey() { return this.fieldKey + '_sidebar'; }
+    public get EditorView() {
+        return this._editorView;
+    }
+    public get SidebarKey() {
+        return this.fieldKey + '_sidebar';
+    }
     public makeAIFlashcards: () => void = unimplementedFunction;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
@@ -777,7 +785,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
 
-        let target:Element|HTMLElement|null = e.target as HTMLElement; // hrefs are stored on the database of the <a> node that wraps the hyerlink <span>
+        let target: Element | HTMLElement | null = e.target as HTMLElement; // hrefs are stored on the database of the <a> node that wraps the hyerlink <span>
         while (target && (!(target instanceof HTMLElement) || !target.dataset?.targethrefs)) target = target.parentElement;
         const editor = this._editorView;
         if (editor && target && !(e.nativeEvent instanceof simMouseEvent ? e.nativeEvent.dash : false)) {
@@ -789,10 +797,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 .lastElement()
                 .replace(Doc.localServerPath(), '')
                 .split('?')[0];
-            const deleteMarkups = undoBatch(() => {
+            const deleteMarkups = undoable(() => {
                 const { selection } = editor.state;
                 editor.dispatch(editor.state.tr.removeMark(selection.from, selection.to, editor.state.schema.marks.linkAnchor));
-            });
+            }, 'delete markups');
             e.persist();
             anchorDoc &&
                 DocServer.GetRefField(anchorDoc).then(
@@ -816,21 +824,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const changeItems: ContextMenuProps[] = [];
         changeItems.push({
             description: 'plain',
-            event: undoBatch(() => {
+            event: undoable(() => {
                 Doc.setNativeView(this.Document);
                 this.layoutDoc.layout_autoHeightMargins = undefined;
-            }),
+            }, 'set plain view'),
             icon: 'eye',
         });
         changeItems.push({
             description: 'metadata',
-            event: undoBatch(() => {
+            event: undoable(() => {
                 this.dataDoc.layout_meta = Cast(Doc.UserDoc().emptyHeader, Doc, null)?.layout;
                 this.Document.layout_fieldKey = 'layout_meta';
                 setTimeout(() => {
                     this.layoutDoc._header_height = this.layoutDoc._layout_autoHeightMargins = 50;
                 }, 50);
-            }),
+            }, 'set metadata view'),
             icon: 'eye',
         });
         const noteTypesDoc = Cast(Doc.UserDoc().template_notes, Doc, null);
@@ -838,11 +846,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             const icon: IconProp = StrCast(note.icon) as IconProp;
             changeItems.push({
                 description: StrCast(note.title),
-                event: undoBatch(() => {
-                    this.layoutDoc.layout_autoHeightMargins = undefined;
-                    Doc.setNativeView(this.Document);
-                    DocUtils.makeCustomViewClicked(this.Document, Docs.Create.TreeDocument, StrCast(note.title), note);
-                }),
+                event: undoable(
+                    () => {
+                        this.layoutDoc.layout_autoHeightMargins = undefined;
+                        Doc.setNativeView(this.Document);
+                        DocUtils.makeCustomViewClicked(this.Document, Docs.Create.TreeDocument, StrCast(note.title), note);
+                    },
+                    `set ${StrCast(note.title)} view}`
+                ),
                 icon: icon,
             });
         });
@@ -1229,9 +1240,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 const protoData = DocCast(this.dataDoc.proto)?.[this.fieldKey];
                 const dataData = this.dataDoc[this.fieldKey];
                 const layoutData = Doc.AreProtosEqual(this.layoutDoc, this.dataDoc) ? undefined : this.layoutDoc[this.fieldKey];
-                const dataTime = dataData ? DateCast(this.dataDoc[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0;
-                const layoutTime = layoutData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? DateCast(DocCast(this.layoutDoc)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0;
-                const protoTime = protoData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? DateCast(DocCast(this.dataDoc.proto)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0 : 0;
+                const dataTime = dataData ? (DateCast(this.dataDoc[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0;
+                const layoutTime = layoutData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? (DateCast(DocCast(this.layoutDoc)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0;
+                const protoTime = protoData && this.dataDoc[this.fieldKey + '_autoUpdate'] ? (DateCast(DocCast(this.dataDoc.proto)[this.fieldKey + '_modificationDate'])?.date.getTime() ?? 0) : 0;
                 const recentData = dataTime >= layoutTime ? (protoTime >= dataTime ? protoData : dataData) : layoutTime >= protoTime ? layoutData : protoData;
                 const whichData = recentData ?? (this.layoutDoc.isTemplateDoc ? layoutData : protoData) ?? protoData;
                 return !whichData ? undefined : { data: RTFCast(whichData), str: Field.toString(DocCast(whichData) ?? StrCast(whichData)) };
@@ -1370,11 +1381,13 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     }
 
     richTextMenuPlugin() {
-        return new Plugin({view : action((newView: EditorView) => {
+        return new Plugin({
+            view: action((newView: EditorView) => {
                 this._props.rootSelected?.() && RichTextMenu.Instance && (RichTextMenu.Instance.view = newView);
                 return new RichTextMenuPlugin({ editorProps: this._props });
-            })});
-    };
+            }),
+        });
+    }
     _didScroll = false;
     _scrollStopper: undefined | (() => void);
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -1509,7 +1522,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             e.preventDefault();
             e.stopPropagation();
             const timecode = Number(target.dataset?.timecode);
-            DocServer.GetRefField(target.dataset?.audioid || "").then(anchor => {
+            DocServer.GetRefField(target.dataset?.audioid || '').then(anchor => {
                 if (anchor instanceof Doc) {
                     // const timecode = NumCast(anchor.timecodeToShow, 0);
                     const audiodoc = anchor.annotationOn as Doc;
@@ -1549,8 +1562,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const state = this.EditorView?.state;
         if (state && this.ProseRef?.children[0].className.includes('-focused') && this._props.isContentActive() && !e.button) {
             if (!state.selection.empty && !(state.selection instanceof NodeSelection)) this.setupAnchorMenu();
-            let clickTarget:HTMLElement|Element|null = e.target as HTMLElement; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span>
-            for (let target:HTMLElement|Element|null = clickTarget as HTMLElement; target instanceof HTMLElement && !target.dataset?.targethrefs; target = target.parentElement);
+            let clickTarget: HTMLElement | Element | null = e.target as HTMLElement; // hrefs are stored on the dataset of the <a> node that wraps the hyerlink <span>
+            for (let target: HTMLElement | Element | null = clickTarget as HTMLElement; target instanceof HTMLElement && !target.dataset?.targethrefs; target = target.parentElement);
             while (clickTarget instanceof HTMLElement && !clickTarget.dataset?.targethrefs) clickTarget = clickTarget.parentElement;
             const dataset = clickTarget instanceof HTMLElement ? clickTarget?.dataset : undefined;
             FormattedTextBoxComment.update(this, this.EditorView!, undefined, dataset?.targethrefs, dataset?.linkdoc, dataset?.nopreview === 'true');
@@ -1588,7 +1601,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     onClick = (e: React.MouseEvent): void => {
         if (!this._props.isContentActive()) return;
         const editorView = this._editorView;
-        const editorRoot = editorView?.root instanceof Document ?editorView.root : undefined;
+        const editorRoot = editorView?.root instanceof Document ? editorView.root : undefined;
         if (editorView && (!this._forceUncollapse || editorRoot?.getSelection()?.isCollapsed)) {
             // this is a hack to allow the cursor to be placed at the end of a document when the document ends in an inline dash comment.  Apparently Chrome on Windows has a bug/feature which breaks this when clicking after the end of the text.
             const pcords = editorView.posAtCoords({ left: e.clientX, top: e.clientY });
@@ -1834,7 +1847,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         TraceMobx();
         const annotated = DocListCast(this.dataDoc[this.SidebarKey]).filter(d => d?.author).length;
         const color = !annotated ? Colors.WHITE : Colors.BLACK;
-        const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')) as string;
+        const backgroundColor = !annotated ? (this.sidebarWidth() ? Colors.MEDIUM_BLUE : Colors.BLACK) : (this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.WidgetColor + (annotated ? ':annotated' : '')) as string);
 
         return !annotated && (!this._props.isContentActive() || SnappingManager.IsDragging || Doc.ActiveTool !== InkTool.None) ? null : (
             <div
@@ -1981,7 +1994,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     @computed get fontColor() {  return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontColor) as string; } // prettier-ignore
     @computed get fontSize()  {  return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontSize) as string; } // prettier-ignore
     @computed get fontFamily() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontFamily) as string; } // prettier-ignore
-    @computed get fontWeight() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontWeight) as string;  }// prettier-ignore
+    @computed get fontWeight() { return this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.FontWeight) as string;  } // prettier-ignore
     render() {
         TraceMobx();
         const scale = this._props.NativeDimScaling?.() || 1;
diff --git a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
index 37a96fc37..6c0eac103 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBoxComment.tsx
@@ -61,8 +61,8 @@ export class FormattedTextBoxComment {
             tooltip.style.display = 'none';
             tooltip.appendChild(tooltipText);
             tooltip.onpointerdown = (e: PointerEvent) => {
-                const { textBox, startUserMarkRegion, endUserMarkRegion, userMark } = FormattedTextBoxComment;
-                false && startUserMarkRegion !== undefined && textBox?.adoptAnnotation(startUserMarkRegion, endUserMarkRegion, userMark);
+                // const { textBox, startUserMarkRegion, endUserMarkRegion, userMark } = FormattedTextBoxComment;
+                // startUserMarkRegion !== undefined && textBox?.adoptAnnotation(startUserMarkRegion, endUserMarkRegion, userMark);
                 e.stopPropagation();
                 e.preventDefault();
             };
diff --git a/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts b/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts
index 8799964b3..d41938698 100644
--- a/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts
+++ b/src/client/views/nodes/formattedText/ParagraphNodeSpec.ts
@@ -1,18 +1,18 @@
-import { Node, DOMOutputSpec } from 'prosemirror-model';
+import { Node, DOMOutputSpec, AttributeSpec, TagParseRule } from 'prosemirror-model';
 import clamp from '../../../util/clamp';
 import convertToCSSPTValue from '../../../util/convertToCSSPTValue';
 import toCSSLineSpacing from '../../../util/toCSSLineSpacing';
 
 // import type { NodeSpec } from './Types';
 type NodeSpec = {
-    attrs?: { [key: string]: any };
+    attrs?: { [key: string]: AttributeSpec };
     content?: string;
     draggable?: boolean;
     group?: string;
     inline?: boolean;
     name?: string;
-    parseDOM?: Array<any>;
-    toDOM?: (node: any) => DOMOutputSpec;
+    parseDOM?: Array<TagParseRule>;
+    toDOM?: (node: Node) => DOMOutputSpec;
 };
 
 // This assumes that every 36pt maps to one indent level.
@@ -30,7 +30,7 @@ function convertMarginLeftToIndentValue(marginLeft: string): number {
     return clamp(MIN_INDENT_LEVEL, Math.floor(ptValue / INDENT_MARGIN_PT_SIZE), MAX_INDENT_LEVEL);
 }
 
-function getAttrs(dom: HTMLElement): Object {
+export function getAttrs(dom: HTMLElement): object {
     const { lineHeight, textAlign, marginLeft, paddingTop, paddingBottom } = dom.style;
 
     let align = dom.getAttribute('align') || textAlign || '';
@@ -50,9 +50,31 @@ function getAttrs(dom: HTMLElement): Object {
     return { align, indent, lineSpacing, paddingTop, paddingBottom, id };
 }
 
-function toDOM(node: Node): DOMOutputSpec {
+export function getHeadingAttrs(dom: HTMLElement): { align?: string; indent?: number; lineSpacing?: string; paddingTop?: string; paddingBottom?: string; id: string; level?: number } {
+    const { lineHeight, textAlign, marginLeft, paddingTop, paddingBottom } = dom.style;
+
+    let align = dom.getAttribute('align') || textAlign || '';
+    align = ALIGN_PATTERN.test(align) ? align : '';
+
+    let indent = parseInt(dom.getAttribute(ATTRIBUTE_INDENT) || '', 10);
+
+    if (!indent && marginLeft) {
+        indent = convertMarginLeftToIndentValue(marginLeft);
+    }
+
+    indent = indent || MIN_INDENT_LEVEL;
+
+    const lineSpacing = lineHeight ? toCSSLineSpacing(lineHeight) : undefined;
+
+    const level = Number(dom.nodeName.substring(1)) || 1;
+
+    const id = dom.getAttribute('id') || '';
+    return { align, indent, lineSpacing, paddingTop, paddingBottom, id, level };
+}
+
+export function toDOM(node: Node): DOMOutputSpec {
     const { align, indent, inset, lineSpacing, paddingTop, paddingBottom, id } = node.attrs;
-    const attrs: { [key: string]: any } | null = {};
+    const attrs: { [key: string]: unknown } | null = {};
 
     let style = '';
     if (align && align !== 'left') {
diff --git a/src/client/views/nodes/formattedText/RichTextMenu.tsx b/src/client/views/nodes/formattedText/RichTextMenu.tsx
index 247b7c097..738f6d699 100644
--- a/src/client/views/nodes/formattedText/RichTextMenu.tsx
+++ b/src/client/views/nodes/formattedText/RichTextMenu.tsx
@@ -1,8 +1,8 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, IReactionDisposer, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, IReactionDisposer, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { lift, wrapIn } from 'prosemirror-commands';
+import { lift, toggleMark, wrapIn } from 'prosemirror-commands';
 import { Mark, MarkType } from 'prosemirror-model';
 import { wrapInList } from 'prosemirror-schema-list';
 import { EditorState, NodeSelection, TextSelection, Transaction } from 'prosemirror-state';
@@ -22,8 +22,6 @@ 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
@@ -35,8 +33,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     private _linkToRef = React.createRef<HTMLInputElement>();
 
     layoutDoc: Doc | undefined;
-    @observable public view?: EditorView & { TextView ?: FormattedTextBox } = undefined;
-    public editorProps: FieldViewProps | AntimodeMenuProps |undefined;
+    @observable public view?: EditorView & { TextView?: FormattedTextBox } = undefined;
+    public editorProps: FieldViewProps | AntimodeMenuProps | undefined;
 
     public _brushMap: Map<string, Set<Mark>> = new Map();
 
@@ -124,7 +122,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     }
 
     @action
-    public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: FormattedTextBoxProps|AntimodeMenuProps|undefined, layoutDoc: Doc | undefined) {
+    public updateMenu(view: EditorView | undefined, lastState: EditorState | undefined, props: FormattedTextBoxProps | AntimodeMenuProps | undefined, layoutDoc: Doc | undefined) {
         if (this._linkToRef.current?.getBoundingClientRect().width) {
             return;
         }
@@ -158,7 +156,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         this.getTextLinkTargetTitle().then(targetTitle => this.setCurrentLink(targetTitle));
     }
 
-    setMark = (mark: Mark, state: EditorState, dispatch: (tr:Transaction) => void, dontToggle: boolean = false) => {
+    setMark = (mark: Mark, state: EditorState, dispatch: (tr: Transaction) => void, dontToggle: boolean = false) => {
         if (mark) {
             const newPos = state.selection.$anchor.node()?.type === schema.nodes.ordered_list ? state.selection.from : state.selection.from;
             const node = (state.selection as NodeSelection).node ?? (newPos >= 0 ? state.doc.nodeAt(newPos) : undefined);
@@ -177,7 +175,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                     toggleMark(mark.type, mark.attrs)(state, dispatch);
                 }
             }
-        //    this.updateMenu(this.view, undefined, undefined, this.layoutDoc);
+            //    this.updateMenu(this.view, undefined, undefined, this.layoutDoc);
         }
     };
 
@@ -193,7 +191,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             }
         }
         return 'left';
-    }
+    };
 
     // finds font sizes and families in selection
     getActiveListStyle = () => {
@@ -208,7 +206,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             }
         }
         return '';
-    }
+    };
 
     // finds font sizes and families in selection
     getActiveFontStylesOnSelection() {
@@ -365,7 +363,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
             this.view.focus();
         } else {
             Doc.UserDoc()[fontField] = value;
-           // this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+            // this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
         }
     };
 
@@ -391,10 +389,10 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
                 this.view!.dispatch(tx3);
             });
         this.view.focus();
-       // this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
+        // this.updateMenu(this.view, undefined, this.props, this.layoutDoc);
     };
 
-    insertSummarizer(state: EditorState, dispatch: (tr:Transaction) => void) {
+    insertSummarizer(state: EditorState, dispatch: (tr: Transaction) => void) {
         if (state.selection.empty) return false;
         const mark = state.schema.marks.summarize.create();
         const { tr } = state;
@@ -408,7 +406,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
     vcenterToggle = () => {
         this.layoutDoc && (this.layoutDoc._layout_centered = !this.layoutDoc._layout_centered);
     };
-    align = (view: EditorView, dispatch: (tr:Transaction) => void, alignment: 'left' | 'right' | 'center') => {
+    align = (view: EditorView, dispatch: (tr: Transaction) => void, alignment: 'left' | 'right' | 'center') => {
         if (this.TextView?._props.rootSelected?.()) {
             let { tr } = view.state;
             view.state.doc.nodesBetween(view.state.selection.from, view.state.selection.to, (node, pos) => {
@@ -424,7 +422,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         }
     };
 
-    paragraphSetup(state: EditorState, dispatch: (tr:Transaction) => void, field: 'inset' | 'indent', value?: 0 | 10 | -10) {
+    paragraphSetup(state: EditorState, dispatch: (tr: Transaction) => void, 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) {
@@ -440,8 +438,8 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         return true;
     }
 
-    insertBlockquote(state: EditorState, dispatch: (tr:Transaction) => void) {
-        const node = state.selection.$from.depth ? state.selection.$from.node(state.selection.$from.depth-1): undefined;
+    insertBlockquote(state: EditorState, dispatch: (tr: Transaction) => void) {
+        const node = state.selection.$from.depth ? state.selection.$from.node(state.selection.$from.depth - 1) : undefined;
         if (node?.type === schema.nodes.blockquote) {
             lift(state, dispatch);
         } else {
@@ -450,7 +448,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         return true;
     }
 
-    insertHorizontalRule(state: EditorState, dispatch: (tr:Transaction) => void) {
+    insertHorizontalRule(state: EditorState, dispatch: (tr: Transaction) => void) {
         dispatch(state.tr.replaceSelectionWith(state.schema.nodes.horizontal_rule.create()).scrollIntoView());
         return true;
     }
@@ -516,7 +514,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         const onLinkChange = (e: React.ChangeEvent<HTMLInputElement>) => {
             this.TextView?.endUndoTypingBatch();
             UndoManager.RunInBatch(() => this.setCurrentLink(e.target.value), 'link change');
-        }
+        };
 
         const link = this.currentLink ? this.currentLink : '';
 
@@ -595,7 +593,7 @@ export class RichTextMenu extends AntimodeMenu<AntimodeMenuProps> {
         if (this.view) {
             const linkAnchor = this.view.state.selection.$from.nodeAfter?.marks.find(m => m.type === this.view!.state.schema.marks.linkAnchor);
             if (linkAnchor) {
-                const allAnchors = (linkAnchor.attrs.allAnchors as { href: string; title: string; linkId: string; targetId: string; }[]).slice();
+                const allAnchors = (linkAnchor.attrs.allAnchors as { href: string; title: string; linkId: string; targetId: string }[]).slice();
                 this.TextView?.RemoveAnchorFromSelection(allAnchors);
                 // bcz: Argh ... this will remove the link from the document even it's anchored somewhere else in the text which happens if only part of the anchor text was selected.
                 allAnchors
@@ -698,7 +696,7 @@ interface RichTextMenuPluginProps {
 }
 export class RichTextMenuPlugin extends React.Component<RichTextMenuPluginProps> {
     // eslint-disable-next-line react/no-unused-class-component-methods
-    update(view: EditorView & {TextView ?: FormattedTextBox}, lastState: EditorState | undefined) {
+    update(view: EditorView & { TextView?: FormattedTextBox }, lastState: EditorState | undefined) {
         RichTextMenu.Instance?.updateMenu(view, lastState, this.props.editorProps, view.TextView?.layoutDoc);
     }
     render() {
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index bf11dfe62..39f589b1e 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -1,4 +1,5 @@
 import { ellipsis, emDash, InputRule, smartQuotes, textblockTypeInputRule } from 'prosemirror-inputrules';
+import { NodeType } from 'prosemirror-model';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { ClientUtils } from '../../../../ClientUtils';
 import { Doc, DocListCast, FieldResult, StrListCast } from '../../../../fields/Doc';
@@ -6,7 +7,7 @@ import { DocData } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { List } from '../../../../fields/List';
 import { NumCast, StrCast } from '../../../../fields/Types';
-import { Utils } from '../../../../Utils';
+import { emptyFunction, Utils } from '../../../../Utils';
 import { Docs } from '../../../documents/Documents';
 import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { DocUtils } from '../../../documents/DocUtils';
@@ -35,13 +36,7 @@ export class RichTextRules {
             wrappingInputRule(/%>$/, schema.nodes.blockquote),
 
             // 1. create numerical ordered list
-            wrappingInputRule(
-                /^1\.\s$/,
-                schema.nodes.ordered_list,
-                () => ({ mapStyle: 'decimal', bulletStyle: 1 }),
-                (match: any, node: any) => node.childCount + node.attrs.order === +match[1],
-                ((type: any) => ({ type: type, attrs: { mapStyle: 'decimal', bulletStyle: 1 } })) as any
-            ),
+            wrappingInputRule(/^1\.\s$/, schema.nodes.ordered_list, () => ({ mapStyle: 'decimal', bulletStyle: 1 }), emptyFunction, ((type: unknown) => ({ type, attrs: { mapStyle: 'decimal', bulletStyle: 1 } })) as unknown as null),
 
             // A. create alphabetical ordered list
             wrappingInputRule(
@@ -49,9 +44,8 @@ export class RichTextRules {
                 schema.nodes.ordered_list,
                 // match => {
                 () => ({ mapStyle: 'multi', bulletStyle: 1 }),
-                // return ({ order: +match[1] })
-                (match: any, node: any) => node.childCount + node.attrs.order === +match[1],
-                ((type: any) => ({ type: type, attrs: { mapStyle: 'multi', bulletStyle: 1 } })) as any
+                emptyFunction,
+                ((type: NodeType) => ({ type, attrs: { mapStyle: 'multi', bulletStyle: 1 } })) as unknown as null
             ),
 
             // * + - create bullet list
@@ -60,8 +54,8 @@ export class RichTextRules {
                 schema.nodes.ordered_list,
                 // match => {
                 () => ({ mapStyle: 'bullet' }), //  ({ order: +match[1] })
-                (match: any, node: any) => node.childCount + node.attrs.order === +match[1],
-                ((type: any) => ({ type: type, attrs: { mapStyle: 'bullet' } })) as any
+                emptyFunction,
+                ((type: NodeType) => ({ type: type, attrs: { mapStyle: 'bullet' } })) as unknown as null
             ),
 
             // ``` create code block
@@ -93,7 +87,7 @@ export class RichTextRules {
                     const textDoc = this.Document[DocData];
                     const numInlines = NumCast(textDoc.inlineTextCount);
                     textDoc.inlineTextCount = numInlines + 1;
-                    const node = (state.doc.resolve(start) as any).nodeAfter;
+                    const node = state.doc.resolve(start).nodeAfter;
                     const newNode = schema.nodes.dashComment.create({ docId: doc[Id], reflow: false });
                     const dashDoc = schema.nodes.dashDoc.create({ width: 75, height: 35, title: 'dashDoc', docId: doc[Id], float: 'right' });
                     const sm = state.storedMarks || undefined;
@@ -137,7 +131,7 @@ export class RichTextRules {
                 textDocInline.proto = textDoc; // make the annotation inherit from the outer text doc so that it can resolve any nested field references, e.g., [[field]]
                 textDoc[inlineLayoutKey] = FormattedTextBox.LayoutString(inlineFieldKey); // create a layout string for the layout key that will render the annotation text
                 textDoc[inlineFieldKey] = ''; // set a default value for the annotation
-                const node = (state.doc.resolve(start) as any).nodeAfter;
+                const node = state.doc.resolve(start).nodeAfter;
                 const newNode = schema.nodes.dashComment.create({ docId: textDocInline[Id], reflow: true });
                 const dashDoc = schema.nodes.dashDoc.create({ width: 75, height: 35, title: 'dashDoc', docId: textDocInline[Id], float: 'right' });
                 const sm = state.storedMarks || undefined;
@@ -154,8 +148,8 @@ export class RichTextRules {
             // set the First-line indent node type for the selection's paragraph (assumes % was used to initiate an EnteringStyle mode)
             new InputRule(/(%d|d)$/, (state, match, start, end) => {
                 if (!match[0].startsWith('%') && !this.EnteringStyle) return null;
-                const pos = state.doc.resolve(start) as any;
-                for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) {
+                const pos = state.doc.resolve(start);
+                for (let depth = pos.depth; depth >= 0; depth--) {
                     const node = pos.node(depth);
                     if (node.type === schema.nodes.paragraph) {
                         const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, indent: node.attrs.indent === 25 ? undefined : 25 });
@@ -169,8 +163,8 @@ export class RichTextRules {
             // set the Hanging indent node type for the current selection's paragraph (assumes % was used to initiate an EnteringStyle mode)
             new InputRule(/(%h|h)$/, (state, match, start, end) => {
                 if (!match[0].startsWith('%') && !this.EnteringStyle) return null;
-                const pos = state.doc.resolve(start) as any;
-                for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) {
+                const pos = state.doc.resolve(start);
+                for (let depth = pos.depth; depth >= 0; depth--) {
                     const node = pos.node(depth);
                     if (node.type === schema.nodes.paragraph) {
                         const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, indent: node.attrs.indent === -25 ? undefined : -25 });
@@ -184,12 +178,12 @@ export class RichTextRules {
             // set the Quoted indent node type for the current selection's paragraph (assumes % was used to initiate an EnteringStyle mode)
             new InputRule(/(%q|q)$/, (state, match, start, end) => {
                 if (!match[0].startsWith('%') && !this.EnteringStyle) return null;
-                const pos = state.doc.resolve(start) as any;
+                const pos = state.doc.resolve(start);
                 if (state.selection instanceof NodeSelection && state.selection.node.type === schema.nodes.ordered_list) {
                     const { node } = state.selection;
                     return state.tr.setNodeMarkup(pos.pos, node.type, { ...node.attrs, indent: node.attrs.indent === 30 ? undefined : 30 });
                 }
-                for (let depth = pos.path.length / 3 - 1; depth >= 0; depth--) {
+                for (let depth = pos.depth; depth >= 0; depth--) {
                     const node = pos.node(depth);
                     if (node.type === schema.nodes.paragraph) {
                         const replaced = state.tr.setNodeMarkup(pos.pos - pos.parentOffset - 1, node.type, { ...node.attrs, inset: node.attrs.inset === 30 ? undefined : 30 });
@@ -202,9 +196,9 @@ export class RichTextRules {
 
             // center justify text
             new InputRule(/%\^/, (state, match, start, end) => {
-                const resolved = state.doc.resolve(start) as any;
+                const resolved = state.doc.resolve(start);
                 if (resolved?.parent.type.name === 'paragraph') {
-                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'center' }, resolved.parent.marks);
+                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'center' }, resolved.parent.marks);
                 }
                 const node = resolved.nodeAfter;
                 const sm = state.storedMarks || undefined;
@@ -214,9 +208,9 @@ export class RichTextRules {
 
             // left justify text
             new InputRule(/%\[/, (state, match, start, end) => {
-                const resolved = state.doc.resolve(start) as any;
+                const resolved = state.doc.resolve(start);
                 if (resolved?.parent.type.name === 'paragraph') {
-                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'left' }, resolved.parent.marks);
+                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'left' }, resolved.parent.marks);
                 }
                 const node = resolved.nodeAfter;
                 const sm = state.storedMarks || undefined;
@@ -226,9 +220,9 @@ export class RichTextRules {
 
             // right justify text
             new InputRule(/%\]/, (state, match, start, end) => {
-                const resolved = state.doc.resolve(start) as any;
+                const resolved = state.doc.resolve(start);
                 if (resolved?.parent.type.name === 'paragraph') {
-                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.path[resolved.path.length - 4], schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'right' }, resolved.parent.marks);
+                    return state.tr.deleteRange(start, end).setNodeMarkup(resolved.start() - 1, schema.nodes.paragraph, { ...resolved.parent.attrs, align: 'right' }, resolved.parent.marks);
                 }
                 const node = resolved.nodeAfter;
                 const sm = state.storedMarks || undefined;
@@ -426,9 +420,9 @@ export class RichTextRules {
                 if (state.selection.to === state.selection.from || !this.EnteringStyle) return null;
 
                 const tag = match[0] === 't' ? 'todo' : match[0] === 'i' ? 'ignore' : match[0] === 'x' ? 'disagree' : match[0] === '!' ? 'important' : '??';
-                const node = (state.doc.resolve(start) as any).nodeAfter;
+                const node = state.doc.resolve(start).nodeAfter;
 
-                if (node?.marks.findIndex((m: any) => m.type === schema.marks.user_tag) !== -1) return state.tr.removeMark(start, end, schema.marks.user_tag);
+                if (node?.marks.findIndex(m => m.type === schema.marks.user_tag) !== -1) return state.tr.removeMark(start, end, schema.marks.user_tag);
                 return node
                     ? state.tr
                           .removeMark(start, end, schema.marks.user_mark)
@@ -438,7 +432,7 @@ export class RichTextRules {
             }),
 
             new InputRule(/%\(/, (state, match, start, end) => {
-                const node = (state.doc.resolve(start) as any).nodeAfter;
+                const node = state.doc.resolve(start).nodeAfter;
                 const sm = state.storedMarks?.slice() || [];
                 const mark = state.schema.marks.summarizeInclusive.create();
 
@@ -447,7 +441,7 @@ export class RichTextRules {
                 const content = selected.selection.content();
                 const replaced = node ? selected.replaceRangeWith(start, end, schema.nodes.summary.create({ visibility: true, text: content, textslice: content.toJSON() })) : state.tr;
 
-                return replaced.setSelection(new TextSelection(replaced.doc.resolve(end))).setStoredMarks([...node.marks, ...sm]);
+                return replaced.setSelection(new TextSelection(replaced.doc.resolve(end))).setStoredMarks([...(node?.marks ?? []), ...sm]);
             }),
 
             new InputRule(/%\)/, (state, match, start, end) => state.tr.deleteRange(start, end).removeStoredMark(state.schema.marks.summarizeInclusive.create())),
diff --git a/src/client/views/nodes/formattedText/marks_rts.ts b/src/client/views/nodes/formattedText/marks_rts.ts
index 6e1f325cf..ba8e4faed 100644
--- a/src/client/views/nodes/formattedText/marks_rts.ts
+++ b/src/client/views/nodes/formattedText/marks_rts.ts
@@ -34,14 +34,14 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'a[href]',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         title: dom.getAttribute('title'),
                     };
                 },
             },
         ],
-        toDOM(node: any) {
+        toDOM: node => {
             const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), '');
             const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), '');
             return ['a', { id: Utils.GenerateGuid(), class: anchorids, 'data-targethrefs': targethrefs, /* 'data-noPreview': 'true', */ 'data-linkdoc': node.attrs.linkDoc, title: node.attrs.title, style: `background: lightBlue` }, 0];
@@ -53,7 +53,7 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'div',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         noAutoLink: dom.getAttribute('data-noAutoLink'),
                     };
@@ -80,7 +80,7 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'a[href]',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         title: dom.getAttribute('title'),
                         noPreview: dom.getAttribute('noPreview'),
@@ -88,7 +88,7 @@ export const marks: { [index: string]: MarkSpec } = {
                 },
             },
         ],
-        toDOM(node: any) {
+        toDOM: node => {
             const targethrefs = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.href : item.href), '');
             const anchorids = node.attrs.allAnchors.reduce((p: string, item: { href: string; title: string; anchorId: string }) => (p ? p + ' ' + item.anchorId : item.anchorId), '');
             return node.attrs.docref && node.attrs.title
@@ -117,7 +117,7 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return { fontSize: dom.style.fontSize ? dom.style.fontSize.toString() : '' };
                 },
             },
@@ -131,7 +131,7 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     const cstyle = getComputedStyle(dom);
                     if (cstyle.font) {
                         if (cstyle.font.indexOf('Times New Roman') !== -1) return { fontFamily: 'Times New Roman' };
@@ -154,7 +154,7 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return { color: dom.getAttribute('color') };
                 },
             },
@@ -170,12 +170,12 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return { fontHighlight: dom.getAttribute('background-color') };
                 },
             },
         ],
-        toDOM(node: any) {
+        toDOM: node => {
             return node.attrs.fontHighlight ? ['span', { style: 'background-color:' + node.attrs.fontHighlight }] : ['span', { style: 'background-color: transparent' }];
         },
     },
@@ -224,7 +224,7 @@ export const marks: { [index: string]: MarkSpec } = {
         attrs: {
             bulletType: { default: 'decimal' },
         },
-        toDOM(node: any) {
+        toDOM: node => {
             return [
                 'span',
                 {
@@ -238,11 +238,11 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs: (p: any) => {
+                getAttrs: p => {
                     if (typeof p !== 'string') {
                         const style = getComputedStyle(p);
                         if (style.textDecoration === 'underline') return null;
-                        if (p.parentElement.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement.outerHTML.indexOf('text-decoration-style: solid') !== -1) {
+                        if (p.parentElement?.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement?.outerHTML.indexOf('text-decoration-style: solid') !== -1) {
                             return null;
                         }
                     }
@@ -266,11 +266,11 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs: (p: any) => {
+                getAttrs: p => {
                     if (typeof p !== 'string') {
                         const style = getComputedStyle(p);
                         if (style.textDecoration === 'underline') return null;
-                        if (p.parentElement.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement.outerHTML.indexOf('text-decoration-style: dotted') !== -1) {
+                        if (p.parentElement?.outerHTML.indexOf('text-decoration: underline') !== -1 && p.parentElement?.outerHTML.indexOf('text-decoration-style: dotted') !== -1) {
                             return null;
                         }
                     }
@@ -292,10 +292,10 @@ export const marks: { [index: string]: MarkSpec } = {
         parseDOM: [
             {
                 tag: 'span',
-                getAttrs: (p: any) => {
+                getAttrs: p => {
                     if (typeof p !== 'string') {
                         const style = getComputedStyle(p);
-                        if (style.textDecoration === 'underline' || p.parentElement.outerHTML.indexOf('text-decoration-style:line') !== -1) {
+                        if (style.textDecoration === 'underline' || p.parentElement?.outerHTML.indexOf('text-decoration-style:line') !== -1) {
                             return null;
                         }
                     }
@@ -317,7 +317,7 @@ export const marks: { [index: string]: MarkSpec } = {
             selected: { default: false },
         },
         parseDOM: [{ style: 'background: yellow' }],
-        toDOM(node: any) {
+        toDOM: node => {
             return ['span', { style: `background: ${node.attrs.selected ? 'orange' : 'yellow'}` }];
         },
     },
@@ -330,7 +330,7 @@ export const marks: { [index: string]: MarkSpec } = {
         },
         excludes: 'user_mark',
         group: 'inline',
-        toDOM(node: any) {
+        toDOM: node => {
             const uid = node.attrs.userid.replace(/\./g, '').replace(/@/g, '');
             const min = Math.round(node.attrs.modified / 60);
             const hr = Math.round(min / 60);
@@ -348,7 +348,7 @@ export const marks: { [index: string]: MarkSpec } = {
         },
         group: 'inline',
         inclusive: false,
-        toDOM(node: any) {
+        toDOM: node => {
             const uid = node.attrs.userid.replace('.', '').replace('@', '');
             return ['span', { class: 'UT-' + uid + ' UT-' + node.attrs.tag }, 0];
         },
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 5bf942218..02ded3103 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -1,6 +1,6 @@
 import { DOMOutputSpec, Node, NodeSpec } from 'prosemirror-model';
 import { listItem, orderedList } from 'prosemirror-schema-list';
-import { ParagraphNodeSpec, toParagraphDOM, getParagraphNodeAttrs } from './ParagraphNodeSpec';
+import { ParagraphNodeSpec, toParagraphDOM, getHeadingAttrs } from './ParagraphNodeSpec';
 import { DocServer } from '../../../DocServer';
 import { Doc, Field, FieldType } from '../../../../fields/Doc';
 import { schema } from './schema_rts';
@@ -53,7 +53,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         parseDOM: [
             {
                 tag: 'audiotag',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         timeCode: dom.getAttribute('data-timecode'),
                         audioId: dom.getAttribute('data-audioid'),
@@ -123,24 +123,57 @@ export const nodes: { [index: string]: NodeSpec } = {
             level: { default: 1 },
         },
         parseDOM: [
-            { tag: 'h1', attrs: { level: 1 } },
-            { tag: 'h2', attrs: { level: 2 } },
-            { tag: 'h3', attrs: { level: 3 } },
-            { tag: 'h4', attrs: { level: 4 } },
-            { tag: 'h5', attrs: { level: 5 } },
-            { tag: 'h6', attrs: { level: 6 } },
+            {
+                tag: 'h1',
+                attrs: { level: 1 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
+            {
+                tag: 'h2',
+                attrs: { level: 2 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
+            {
+                tag: 'h3',
+                attrs: { level: 3 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
+            {
+                tag: 'h4',
+                attrs: { level: 4 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
+            {
+                tag: 'h5',
+                attrs: { level: 5 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
+            {
+                tag: 'h6',
+                attrs: { level: 6 },
+                getAttrs(dom) {
+                    return getHeadingAttrs(dom);
+                },
+            },
         ],
         toDOM(node) {
-            const dom = toParagraphDOM(node) as any;
-            dom[0] = `h${node.attrs.level || 1}`;
+            const dom = toParagraphDOM(node);
+            if (dom instanceof Array) {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (dom as any)[0] = `h${node.attrs.level || 1}`; // [0] is readonly so cast away to any
+            }
             return dom;
         },
-        getAttrs(dom: any) {
-            const attrs = getParagraphNodeAttrs(dom) as any;
-            const level = Number(dom.nodeName.substring(1)) || 1;
-            attrs.level = level;
-            return attrs;
-        },
     },
 
     // :: NodeSpec A code listing. Disallows marks or non-text inline
@@ -221,7 +254,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         parseDOM: [
             {
                 tag: 'img[src]',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         src: dom.getAttribute('src'),
                         title: dom.getAttribute('title'),
@@ -300,7 +333,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         parseDOM: [
             {
                 tag: 'video[src]',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         src: dom.getAttribute('src'),
                         title: dom.getAttribute('title'),
@@ -341,33 +374,31 @@ export const nodes: { [index: string]: NodeSpec } = {
         parseDOM: [
             {
                 tag: 'ul',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         bulletStyle: dom.getAttribute('data-bulletStyle'),
                         mapStyle: dom.getAttribute('data-mapStyle'),
                         fontColor: dom.style.color,
-                        fontSize: dom.style['font-size'],
-                        fontFamily: dom.style['font-family'],
-                        indent: dom.style['margin-left'],
+                        fontSize: dom.style.fontSize,
+                        fontFamily: dom.style.fontFamily,
+                        indent: dom.style.marginLeft,
                     };
                 },
             },
             {
                 style: 'list-style-type=disc',
-                getAttrs() {
-                    return { mapStyle: 'bullet' };
-                },
+                getAttrs: () => ({ mapStyle: 'bullet' }),
             },
             {
                 tag: 'ol',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return {
                         bulletStyle: dom.getAttribute('data-bulletStyle'),
                         mapStyle: dom.getAttribute('data-mapStyle'),
                         fontColor: dom.style.color,
-                        fontSize: dom.style['font-size'],
-                        fontFamily: dom.style['font-family'],
-                        indent: dom.style['margin-left'],
+                        fontSize: dom.style.fontSize,
+                        fontFamily: dom.style.fontFamily,
+                        indent: dom.style.marginLeft,
                     };
                 },
             },
@@ -416,7 +447,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         parseDOM: [
             {
                 tag: 'li',
-                getAttrs(dom: any) {
+                getAttrs: dom => {
                     return { mapStyle: dom.getAttribute('data-mapStyle'), bulletStyle: dom.getAttribute('data-bulletStyle') };
                 },
             },