Merge branch 'master' into aarav_edit

1 files changed, 90 insertions, 145 deletions

diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index bef999e6d..dc23a695d 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable no-use-before-define */
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
 import { Property } from 'csstype';
@@ -14,14 +13,13 @@ import { EditorState, NodeSelection, Plugin, Selection, TextSelection, Transacti
 import { EditorView, NodeViewConstructor } from 'prosemirror-view';
 import * as React from 'react';
 import { BsMarkdownFill } from 'react-icons/bs';
-import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
+import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, ClientUtils, DivWidth, removeStyleSheet, returnFalse, returnZero, setupMoveUpEvents, simMouseEvent, smoothScroll, StopEvent } from '../../../../ClientUtils';
 import { DateField } from '../../../../fields/DateField';
 import { CreateLinkToActiveAudio, Doc, DocListCast, Field, FieldType, Opt, StrListCast } from '../../../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols';
 import { Id, ToString } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
-import { PrefetchProxy } from '../../../../fields/Proxy';
 import { RichTextField } from '../../../../fields/RichTextField';
 import { ComputedField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DateCast, DocCast, FieldValue, NumCast, RTFCast, ScriptCast, StrCast } from '../../../../fields/Types';
@@ -35,7 +33,6 @@ import { DocUtils } from '../../../documents/DocUtils';
 import { DictationManager } from '../../../util/DictationManager';
 import { DragManager } from '../../../util/DragManager';
 import { dropActionType } from '../../../util/DropActionTypes';
-import { MakeTemplate } from '../../../util/DropConverter';
 import { LinkManager } from '../../../util/LinkManager';
 import { RTFMarkup } from '../../../util/RTFMarkup';
 import { SnappingManager } from '../../../util/SnappingManager';
@@ -104,12 +101,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     public static LiveTextUndo: UndoManager.Batch | undefined; // undo batch when typing a new text note into a collection
 
     private static _nodeViews: (self: FormattedTextBox) => { [key: string]: NodeViewConstructor };
-    private static _globalHighlightsCache: string = '';
-    private static _globalHighlights = new ObservableSet<string>(['Audio Tags', 'Text from Others', 'Todo Items', 'Important Items', 'Disagree Items', 'Ignore Items']);
-    private static _highlightStyleSheet = addStyleSheet();
-    private static _bulletStyleSheet = addStyleSheet();
-    private static _userStyleSheet = addStyleSheet();
+    private _curHighlights = new ObservableSet<string>(['Audio Tags']);
+    private static _highlightStyleSheet = addStyleSheet().sheet;
+    private static _bulletStyleSheet = addStyleSheet().sheet;
+    private _userStyleSheetElement: HTMLStyleElement | undefined;
 
+    private _enteringStyle = false;
     private _oldWheel: HTMLDivElement | null = null;
     private _selectionHTML: string | undefined;
     private _sidebarRef = React.createRef<SidebarAnnos>();
@@ -217,9 +214,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     }
 
     getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const rootDoc = Doc.isTemplateDoc(this._props.docViewPath().lastElement()?.Document) ? this.Document : this.rootDoc;
-        if (!pinProps && this.EditorView?.state.selection.empty) return rootDoc;
-        const anchor = Docs.Create.ConfigDocument({ title: StrCast(rootDoc.title), annotationOn: rootDoc });
+        if (!pinProps && this.EditorView?.state.selection.empty) return this.rootDoc;
+        const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.rootDoc?.title), annotationOn: this.rootDoc });
         this.addDocument(anchor);
         this._finishingLink = true;
         this.makeLinkAnchor(anchor, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation);
@@ -248,7 +244,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     anchor.followLinkAudio = true;
                     let stopFunc: () => void = emptyFunction;
                     target.$mediaState = mediaState.Recording;
-                    DictationManager.recordAudioAnnotation(target, Doc.LayoutFieldKey(target), stop => { stopFunc = stop }); // prettier-ignore
+                    DictationManager.recordAudioAnnotation(target, Doc.LayoutDataKey(target), stop => { stopFunc = stop }); // prettier-ignore
 
                     const reactionDisposer = reaction(
                         () => target.mediaState,
@@ -430,8 +426,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const oldAutoLinks = Doc.Links(this.Document).filter(
             link => 
                 ((!Doc.isTemplateForField(this.Document) &&
-                    (!Doc.isTemplateForField(DocCast(link.link_anchor_1)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_1), this.Document)) &&
-                    (!Doc.isTemplateForField(DocCast(link.link_anchor_2)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_2), this.Document))) ||
+                    ((DocCast(link.link_anchor_1) && !Doc.isTemplateForField(DocCast(link.link_anchor_1)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_1), this.Document)) &&
+                    ((DocCast(link.link_anchor_2) && !Doc.isTemplateForField(DocCast(link.link_anchor_2)!)) || !Doc.AreProtosEqual(DocCast(link.link_anchor_2), this.Document))) ||
                  (Doc.isTemplateForField(this.Document) && (link.link_anchor_1 === this.Document || link.link_anchor_2 === this.Document))) &&
                 link.link_relationship === LinkManager.AutoKeywords
         ); // prettier-ignore
@@ -453,18 +449,18 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     updateTitle = () => {
         const title = StrCast(this.dataDoc.title, Cast(this.dataDoc.title, RichTextField, null)?.Text);
         if (
-            !this._props.dontRegisterView && // (this.Document.isTemplateForField === "text" || !this.Document.isTemplateForField) && // only update the title if the data document's data field is changing
+            !this._props.dontRegisterView && // only update the title if the data document's data field is changing
             title.startsWith('-') &&
             this.EditorView &&
             !this.dataDoc.title_custom &&
-            (Doc.LayoutFieldKey(this.Document) === this.fieldKey || this.fieldKey === 'text')
+            (Doc.LayoutDataKey(this.Document) === this.fieldKey || this.fieldKey === 'text')
         ) {
             let node = this.EditorView.state.doc;
             while (node.firstChild && node.firstChild.type.name !== 'text') node = node.firstChild;
             const str = node.textContent;
             const prefix = '-';
 
-            const cfield = ComputedField.WithoutComputed(() => FieldValue(this.dataDoc.title));
+            const cfield = ComputedField.DisableCompute(() => FieldValue(this.dataDoc.title));
             if (!(cfield instanceof ComputedField)) {
                 this.dataDoc.title = (prefix + str.substring(0, Math.min(40, str.length)) + (str.length > 40 ? '...' : '')).trim();
             }
@@ -591,7 +587,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
         const dragData = de.complete.docDragData;
         if (dragData) {
-            const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc.proto), this.fieldKey) ? DocCast(this.layoutDoc.proto) : this.dataDoc;
+            const layoutProto = DocCast(this.layoutDoc.proto);
+            const dataDoc = layoutProto && Doc.IsDelegateField(layoutProto, this.fieldKey) ? layoutProto : this.dataDoc;
             const effectiveAcl = GetEffectiveAcl(dataDoc);
             const draggedDoc = dragData.droppedDocuments.lastElement();
             let added: Opt<boolean>;
@@ -599,7 +596,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             if ([AclEdit, AclAdmin, AclSelfEdit].includes(effectiveAcl) && !dragData.draggedDocuments.includes(this.Document)) {
                 // replace text contents when dragging with Alt
                 if (de.altKey) {
-                    const fieldKey = Doc.LayoutFieldKey(draggedDoc);
+                    const fieldKey = Doc.LayoutDataKey(draggedDoc);
                     if (draggedDoc[fieldKey] instanceof RichTextField && !Doc.AreProtosEqual(draggedDoc, this.Document)) {
                         Doc.GetProto(this.dataDoc)[this.fieldKey] = Field.Copy(draggedDoc[fieldKey]);
                     }
@@ -699,45 +696,33 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
     }
 
     updateHighlights = (highlights: string[]) => {
-        if (Array.from(highlights).join('') === FormattedTextBox._globalHighlightsCache) return;
-        setTimeout(() => {
-            FormattedTextBox._globalHighlightsCache = Array.from(highlights).join('');
-        });
-        clearStyleSheetRules(FormattedTextBox._userStyleSheet);
-        if (!highlights.includes('Audio Tags')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'audiotag', { display: 'none' }, '');
-        }
-        if (highlights.includes('Text from Others')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-remote', { background: 'yellow' });
-        }
-        if (highlights.includes('My Text')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + ClientUtils.CurrentUserEmail().replace(/\./g, '').replace(/@/g, ''), { background: 'moccasin' });
-        }
-        if (highlights.includes('Todo Items')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-todo', { outline: 'black solid 1px' });
-        }
-        if (highlights.includes('Important Items')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-important', { 'font-size': 'larger' });
-        }
-        if (highlights.includes('Bold Text')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner .ProseMirror strong > span', { 'font-size': 'large' }, '');
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, '.formattedTextBox-inner .ProseMirror :not(strong > span)', { 'font-size': '0px' }, '');
-        }
-        if (highlights.includes('Disagree Items')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-disagree', { 'text-decoration': 'line-through' });
-        }
-        if (highlights.includes('Ignore Items')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UT-ignore', { 'font-size': '1' });
-        }
+        const userStyleSheet = () => {
+            if (!this._userStyleSheetElement) {
+                this._userStyleSheetElement = addStyleSheet();
+            }
+            return this._userStyleSheetElement.sheet;
+        };
+        const viewId = this.DocumentView?.().ViewGuid ?? 1;
+        const userId = ClientUtils.CurrentUserEmail().replace(/\./g, '').replace('@', ''); // must match marks_rts -> user_mark's uid
+        highlights.filter(f => f !== 'Audio Tags').length && clearStyleSheetRules(userStyleSheet());
+        if (!highlights.includes('Audio Tags'))      addStyleSheetRule(userStyleSheet(), `#${viewId} .audiotag`,     { display:           'none' }, ''); // prettier-ignore
+        if (highlights.includes('Text from Others')) addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-remote`,    { background:        'yellow' }, ''); // prettier-ignore
+        if (highlights.includes('My Text'))          addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-${userId}`, { background:        'moccasin' }, ''); // prettier-ignore
+        if (highlights.includes('Todo Items'))       addStyleSheetRule(userStyleSheet(), `#${viewId} .UT-todo`,      { outline:           'black solid 1px' }, ''); // prettier-ignore
+        if (highlights.includes('Important Items'))  addStyleSheetRule(userStyleSheet(), `#${viewId} .UT-important`, { 'font-size':       'larger' }, ''); // prettier-ignore
+        if (highlights.includes('Disagree Items'))   addStyleSheetRule(userStyleSheet(), `#${viewId} .UT-disagree`,  { 'text-decoration': 'line-through' }, ''); // prettier-ignore
+        if (highlights.includes('Ignore Items'))     addStyleSheetRule(userStyleSheet(), `#${viewId} .UT-ignore`,    { 'font-size':       '1' }, ''); // prettier-ignore
+        if (highlights.includes('Bold Text')) {      addStyleSheetRule(userStyleSheet(), `#${viewId} .formattedTextBox-inner .ProseMirror p:not(:has(strong))`,         { 'font-size': '0px' }, '');
+                                                     addStyleSheetRule(userStyleSheet(), `#${viewId} .formattedTextBox-inner .ProseMirror p:not(:has(strong)) ::after`, { content: '...', 'font-size': '5px' }, '')} // prettier-ignore
         if (highlights.includes('By Recent Minute')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + ClientUtils.CurrentUserEmail().replace('.', '').replace('@', ''), { opacity: '0.1' });
+            addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-${userId}`, { opacity: '0.1' }, '');
             const min = Math.round(Date.now() / 1000 / 60);
-            numberRange(10).map(i => addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-min-' + (min - i), { opacity: ((10 - i - 1) / 10).toString() }));
+            numberRange(10).map(i => addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-min-` + (min - i), { opacity: ((10 - i - 1) / 10).toString() }, ''));
         }
         if (highlights.includes('By Recent Hour')) {
-            addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-' + ClientUtils.CurrentUserEmail().replace('.', '').replace('@', ''), { opacity: '0.1' });
+            addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-${userId}`, { opacity: '0.1' }, '');
             const hr = Math.round(Date.now() / 1000 / 60 / 60);
-            numberRange(10).map(i => addStyleSheetRule(FormattedTextBox._userStyleSheet, 'UM-hr-' + (hr - i), { opacity: ((10 - i - 1) / 10).toString() }));
+            numberRange(10).map(i => addStyleSheetRule(userStyleSheet(), `#${viewId} .UM-hr-` + (hr - i), { opacity: ((10 - i - 1) / 10).toString() }, ''));
         }
         this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css changes happen outside of react/mobx.  so we need to set a flag that will notify anyone interested in layout changes triggered by css changes (eg., CollectionLinkView)
     };
@@ -855,57 +840,21 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             return;
         }
 
-        const changeItems: ContextMenuProps[] = [];
-        changeItems.push({
-            description: 'plain',
-            event: undoable(() => {
-                Doc.setNativeView(this.Document);
-                this.layoutDoc.layout_autoHeightMargins = undefined;
-            }, 'set plain view'),
-            icon: 'eye',
-        });
-        changeItems.push({
-            description: 'metadata',
-            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);
-        DocListCast(noteTypesDoc?.data).forEach(note => {
-            const icon: IconProp = StrCast(note.icon) as IconProp;
-            changeItems.push({
-                description: StrCast(note.title),
-                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,
-            });
-        });
         const highlighting: ContextMenuProps[] = [];
         const noviceHighlighting = ['Audio Tags', 'My Text', 'Text from Others', 'Bold Text'];
         const expertHighlighting = [...noviceHighlighting, 'Important Items', 'Ignore Items', 'Disagree Items', 'By Recent Minute', 'By Recent Hour'];
         (Doc.noviceMode ? noviceHighlighting : expertHighlighting).forEach(option =>
             highlighting.push({
-                description: (!FormattedTextBox._globalHighlights.has(option) ? 'Highlight ' : 'Unhighlight ') + option,
+                description: (!this._curHighlights.has(option) ? 'Highlight ' : 'Unhighlight ') + option,
                 event: action(() => {
                     e.stopPropagation();
-                    if (!FormattedTextBox._globalHighlights.has(option)) {
-                        FormattedTextBox._globalHighlights.add(option);
+                    if (!this._curHighlights.has(option)) {
+                        this._curHighlights.add(option);
                     } else {
-                        FormattedTextBox._globalHighlights.delete(option);
+                        this._curHighlights.delete(option);
                     }
                 }),
-                icon: !FormattedTextBox._globalHighlights.has(option) ? 'highlighter' : 'remove-format',
+                icon: !this._curHighlights.has(option) ? 'highlighter' : 'remove-format',
             })
         );
         const appearance = cm.findByDescription('Appearance...');
@@ -952,20 +901,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 icon: 'expand-arrows-alt',
             });
 
-        appearanceItems.push({ description: 'Change Style...', noexpand: true, subitems: changeItems, icon: 'external-link-alt' });
-
-        !Doc.noviceMode &&
-            appearanceItems.push({
-                description: 'Make Default Layout',
-                event: () => {
-                    if (!this.layoutDoc.isTemplateDoc) {
-                        MakeTemplate(this.Document);
-                    }
-                    Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.Document);
-                    Doc.AddDocToList(Cast(Doc.UserDoc().template_notes, Doc, null), 'data', this.Document);
-                },
-                icon: 'eye',
-            });
         !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'eye' });
 
         const options = cm.findByDescription('Options...');
@@ -988,14 +923,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 },
                 icon: !this.Document._createDocOnCR ? 'grip-lines' : 'bars',
             });
-        !Doc.noviceMode &&
-            optionItems.push({
-                description: `${this.Document._layout_autoHeight ? 'Lock' : 'Auto'} Height`,
-                event: () => {
-                    this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight;
-                },
-                icon: this.Document._layout_autoHeight ? 'lock' : 'unlock',
-            });
         optionItems.push({
             description: this.Document.savedAsSticker ? 'Sticker Saved!' : 'Save to Stickers',
             event: action(undoable(async () => await StickerPalette.addToPalette(this.Document), 'save to palette')),
@@ -1076,16 +1003,16 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 const link = CreateLinkToActiveAudio(textanchorFunc, false).lastElement();
                 if (link) {
                     link.$isDictation = true;
-                    const audioanchor = Cast(link.link_anchor_2, Doc, null);
-                    const textanchor = Cast(link.link_anchor_1, Doc, null);
+                    const audioanchor = DocCast(link.link_anchor_2);
+                    const textanchor = DocCast(link.link_anchor_1);
                     if (audioanchor) {
                         audioanchor.backgroundColor = 'tan';
                         const audiotag = this.EditorView.state.schema.nodes.audiotag.create({
                             timeCode: NumCast(audioanchor._timecodeToShow),
                             audioId: audioanchor[Id],
-                            textId: textanchor[Id],
+                            textId: textanchor?.[Id] ?? '',
                         });
-                        textanchor.$title = 'dictation:' + audiotag.attrs.timeCode;
+                        textanchor && (textanchor.$title = 'dictation:' + audiotag.attrs.timeCode);
                         const tr = this.EditorView.state.tr.insert(this.EditorView.state.doc.content.size, audiotag);
                         const tr2 = tr.setSelection(TextSelection.create(tr.doc, tr.doc.content.size));
                         this.EditorView.dispatch(tr.setSelection(TextSelection.create(tr2.doc, tr2.doc.content.size)));
@@ -1220,11 +1147,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
 
     // if the scroll height has changed and we're in layout_autoHeight mode, then we need to update the textHeight component of the doc.
     // Since we also monitor all component height changes, this will update the document's height.
-    resetNativeHeight = (scrollHeight: number) => {
-        const nh = this.layoutDoc.isTemplateForField ? 0 : NumCast(this.layoutDoc._nativeHeight);
+    resetNativeHeight = action((scrollHeight: number) => {
         this.layoutDoc['_' + this.fieldKey + '_height'] = scrollHeight;
-        if (nh) this.layoutDoc._nativeHeight = scrollHeight;
-    };
+        if (!this.layoutDoc.isTemplateForField) this.layoutDoc._nativeHeight = scrollHeight;
+    });
 
     addPlugin = (plugin: Plugin) => {
         const editorView = this.EditorView;
@@ -1252,15 +1178,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             () => ({ autoHeight: this.layout_autoHeight, fontSize: this.fontSize, css: this.Document[DocCss], xMargin: this.Document.xMargin, yMargin: this.Document.yMargin }),
             autoHeight => setTimeout(() => autoHeight && this.tryUpdateScrollHeight())
         );
-        this._disposers.highlights = reaction(
-            () => Array.from(FormattedTextBox._globalHighlights).slice(),
-            highlights => this.updateHighlights(highlights),
-            { fireImmediately: true }
-        );
-        this._disposers.width = reaction(
-            () => this._props.PanelWidth(),
-            () => this.tryUpdateScrollHeight()
-        );
+        this._disposers.highlights = reaction(() => Array.from(this._curHighlights).slice(), this.updateHighlights, { fireImmediately: true });
+        this._disposers.width = reaction(this._props.PanelWidth, this.tryUpdateScrollHeight);
         this._disposers.scrollHeight = reaction(
             () => ({ scrollHeight: this.scrollHeight, layoutAutoHeight: this.layout_autoHeight, width: NumCast(this.layoutDoc._width) }),
             ({ width, scrollHeight, layoutAutoHeight }) => width && layoutAutoHeight && this.resetNativeHeight(scrollHeight),
@@ -1272,7 +1191,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             ({ border, sidebarHeight, textHeight, layoutAutoHeight, marginsHeight }) => {
                 const newHeight = this.contentScaling * (marginsHeight + Math.max(sidebarHeight, textHeight));
                 if (
-                    (!Array.from(FormattedTextBox._globalHighlights).includes('Bold Text') || this._props.isSelected()) && //
+                    (!Array.from(this._curHighlights).includes('Bold Text') || this._props.isSelected()) && //
                     layoutAutoHeight &&
                     newHeight &&
                     (newHeight !== this.layoutDoc.height || border < NumCast(this.layoutDoc.height)) &&
@@ -1281,7 +1200,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     this._props.setHeight?.(newHeight);
                 }
             },
-            { fireImmediately: !Array.from(FormattedTextBox._globalHighlights).includes('Bold Text') }
+            { fireImmediately: !Array.from(this._curHighlights).includes('Bold Text') }
         );
         this._disposers.links = reaction(
             () => Doc.Links(this.dataDoc), // if a link is deleted, then remove all hyperlinks that reference it from the text's marks
@@ -1296,8 +1215,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 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 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)) };
@@ -1336,7 +1255,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                     });
                 }
                 this.prepareForTyping();
-                if (FormattedTextBox._globalHighlights.has('Bold Text')) {
+                if (this._curHighlights.has('Bold Text')) {
                     this.layoutDoc[DocCss] = this.layoutDoc[DocCss] + 1; // css change happens outside of mobx/react, so this will notify anyone interested in the layout that it has changed
                 }
                 if (((RichTextMenu.Instance?.view === this.EditorView && this.EditorView) || this.isLabel) && !selected) {
@@ -1393,7 +1312,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             // } catch (err) {
             //     console.log('Drop failed', err);
             // }
-            this.addDocument?.(DocCast(this.Document.image));
+            DocCast(this.Document.image) && this.addDocument?.(DocCast(this.Document.image)!);
         }
 
         //if (this.Document.image) this.addDocument?.(DocCast(this.Document.image));
@@ -1506,8 +1425,15 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         const rtfField = Cast((!curText && this.layoutDoc[this.fieldKey]) || this.dataDoc[fieldKey], RichTextField);
         if (this.ProseRef) {
             this.EditorView?.destroy();
+            const edState = () => {
+                try {
+                    return rtfField?.Data ? EditorState.fromJSON(config, JSON.parse(rtfField.Data)) : EditorState.create(config);
+                } catch {
+                    return EditorState.create(config);
+                }
+            };
             this._editorView = new EditorView(this.ProseRef, {
-                state: rtfField?.Data ? EditorState.fromJSON(config, JSON.parse(rtfField.Data)) : EditorState.create(config),
+                state: edState(),
                 handleScrollToSelection: this.scrollToSelection,
                 dispatchTransaction: this.dispatchTransaction,
                 nodeViews: FormattedTextBox._nodeViews(this),
@@ -1519,7 +1445,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             (this.EditorView as unknown as { scrollToSelection: unknown }).scrollToSelection = this.scrollToSelection;
             const { state } = this._editorView;
             if (!rtfField) {
-                const dataDoc = Doc.IsDelegateField(DocCast(this.layoutDoc.proto), this.fieldKey) ? DocCast(this.layoutDoc.proto) : this.dataDoc;
+                const layoutProto = DocCast(this.layoutDoc.proto);
+                const dataDoc = layoutProto && Doc.IsDelegateField(layoutProto, this.fieldKey) ? layoutProto : this.dataDoc;
                 const startupText = Field.toString(dataDoc[fieldKey] as FieldType);
                 const textAlign = StrCast(this.dataDoc[this.fieldKey + '_align'], StrCast(Doc.UserDoc().textAlign)) || 'left';
                 if (textAlign !== 'left') {
@@ -1581,6 +1508,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         if (this.recordingDictation) {
             this.recordingDictation = !this.recordingDictation;
         }
+        removeStyleSheet(this._userStyleSheetElement);
         Object.values(this._disposers).forEach(disposer => disposer?.());
         this.endUndoTypingBatch();
         FormattedTextBox.LiveTextUndo?.end();
@@ -1827,13 +1755,30 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
         }
         const { state } = _editorView;
         if (!state.selection.empty && e.key === '%') {
-            this._rules!.EnteringStyle = true;
+            this._enteringStyle = true;
             StopEvent(e);
             return;
         }
+        if (this._enteringStyle && 'tix!'.includes(e.key)) {
+            const tag = e.key === 't' ? 'todo' : e.key === 'i' ? 'ignore' : e.key === 'x' ? 'disagree' : e.key === '!' ? 'important' : '??';
+            const node = state.selection.$from.nodeAfter;
+            const start = state.selection.from;
+            const end = state.selection.to;
+
+            if (node) {
+                StopEvent(e);
+                _editorView.dispatch(
+                    state.tr
+                        .removeMark(start, end, schema.marks.user_mark)
+                        .addMark(start, end, schema.marks.user_mark.create({ userid: ClientUtils.CurrentUserEmail(), modified: Math.floor(Date.now() / 1000) }))
+                        .addMark(start, end, schema.marks.user_tag.create({ userid: ClientUtils.CurrentUserEmail(), tag, modified: Math.round(Date.now() / 1000 / 60) }))
+                );
+                return;
+            }
+        }
 
-        if (state.selection.empty || !this._rules!.EnteringStyle) {
-            this._rules!.EnteringStyle = false;
+        if (state.selection.empty || !this._enteringStyle) {
+            this._enteringStyle = false;
         }
         for (let i = state.selection.from; i <= state.selection.to; i++) {
             const node = state.doc.resolve(i);