Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into filters

12 files changed, 123 insertions, 50 deletions

diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index d4f6c076a..83022a759 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -759,7 +759,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
     screenToLocal = () => this.props.ScreenToLocalTransform().translate(0, -this.headerMargin);
     contentScaling = () => this.ContentScale;
     onClickFunc = () => this.onClickHandler;
-    setHeight = (height: number) => this.rootDoc._height = height;
+    setHeight = (height: number) => this.layoutDoc._height = height;
     setContentView = (view: { getAnchor?: () => Doc, forward?: () => boolean, back?: () => boolean }) => this._componentView = view;
     @observable contentsActive: () => boolean = returnFalse;
     @action setContentsActive = (setActive: () => boolean) => this.contentsActive = setActive;
@@ -1019,7 +1019,7 @@ export class DocumentView extends React.Component<DocumentViewProps> {
     @computed get nativeScaling() {
         if (this.shouldNotScale()) return 1;
         const minTextScale = this.Document.type === DocumentType.RTF ? 0.1 : 0;
-        if (this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth) {
+        if (this.layoutDoc._fitWidth || this.props.PanelHeight() / this.effectiveNativeHeight > this.props.PanelWidth() / this.effectiveNativeWidth) {
             return Math.max(minTextScale, this.props.PanelWidth() / this.effectiveNativeWidth);  // width-limited or fitWidth
         }
         return Math.max(minTextScale, this.props.PanelHeight() / this.effectiveNativeHeight); // height-limited or unscaled
diff --git a/src/client/views/nodes/EquationBox.tsx b/src/client/views/nodes/EquationBox.tsx
index f49405d02..9111cb418 100644
--- a/src/client/views/nodes/EquationBox.tsx
+++ b/src/client/views/nodes/EquationBox.tsx
@@ -32,6 +32,12 @@ export class EquationBox extends ViewBoxBaseComponent<FieldViewProps, EquationDo
             this._ref.current!.mathField.focus();
             this._ref.current!.mathField.select();
         }
+        reaction(() => StrCast(this.dataDoc.text),
+            text => {
+                if (text && text !== this._ref.current!.mathField.latex()) {
+                    this._ref.current!.mathField.latex(text);
+                }
+            });
         reaction(() => this.props.isSelected(),
             selected => {
                 if (this._ref.current) {
diff --git a/src/client/views/nodes/FunctionPlotBox.tsx b/src/client/views/nodes/FunctionPlotBox.tsx
index f35677014..e8bec9676 100644
--- a/src/client/views/nodes/FunctionPlotBox.tsx
+++ b/src/client/views/nodes/FunctionPlotBox.tsx
@@ -33,7 +33,7 @@ export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps, Equati
     }
     componentDidMount() {
         this.props.setContentView?.(this);
-        reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.dataDoc.xRange, this.dataDoc.yRange],
+        reaction(() => [DocListCast(this.dataDoc.data).lastElement()?.text, this.layoutDoc.width, this.layoutDoc.height, this.dataDoc.xRange, this.dataDoc.yRange],
             () => this.createGraph());
     }
     getAnchor = () => {
@@ -57,7 +57,6 @@ export class FunctionPlotBox extends ViewBoxBaseComponent<FieldViewProps, Equati
         const width = this.props.PanelWidth();
         const height = this.props.PanelHeight();
         const fn = StrCast(DocListCast(this.dataDoc.data).lastElement()?.text, "x^2").replace(/\\frac\{(.*)\}\{(.*)\}/, "($1/$2)");
-        console.log("Graphing:" + fn);
         try {
             this._plot = functionPlot({
                 target: "#" + this._plotEle.id,
diff --git a/src/client/views/nodes/ImageBox.scss b/src/client/views/nodes/ImageBox.scss
index 6d60c70bf..2536dbe16 100644
--- a/src/client/views/nodes/ImageBox.scss
+++ b/src/client/views/nodes/ImageBox.scss
@@ -101,7 +101,7 @@
     margin: 0 auto;
     display: flex;
     height: 100%;
-    overflow: hidden;
+    overflow: auto;
 
     .imageBox-fadeBlocker {
         width: 100%;
diff --git a/src/client/views/nodes/LinkDocPreview.scss b/src/client/views/nodes/LinkDocPreview.scss
index b7aeaa072..06ae466f0 100644
--- a/src/client/views/nodes/LinkDocPreview.scss
+++ b/src/client/views/nodes/LinkDocPreview.scss
@@ -10,7 +10,6 @@
     z-index: 2004;
     .linkDocPreview-inner {
         background-color: white;
-        border: 8px solid white;
         width: 100%;
         height: 100%;
         pointer-events: none;
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 716810536..3fe164f8a 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -109,8 +109,20 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
             this.props.docProps?.addDocTab(Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _width: 200, _height: 400, useCors: true }), "add:right");
         }
     }
-    width = () => Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225));
-    height = () => Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
+    width = () => {
+        if (!this._targetDoc) return 225;
+        if (this._targetDoc[WidthSym]() < this._targetDoc?.[HeightSym]()) {
+            return Math.min(225, this._targetDoc[HeightSym]()) * this._targetDoc[WidthSym]() / this._targetDoc[HeightSym]();
+        }
+        return Math.min(225, NumCast(this._targetDoc?.[WidthSym](), 225));
+    }
+    height = () => {
+        if (!this._targetDoc) return 225;
+        if (this._targetDoc[WidthSym]() > this._targetDoc?.[HeightSym]()) {
+            return Math.min(225, this._targetDoc[WidthSym]()) * this._targetDoc[HeightSym]() / this._targetDoc[WidthSym]();
+        }
+        return Math.min(225, NumCast(this._targetDoc?.[HeightSym](), 225));
+    }
     @computed get previewHeader() {
         return !this._linkDoc || !this._targetDoc || !this._linkSrc ? (null) :
             <div className="linkDocPreview-info" ref={this._infoRef}>
@@ -177,8 +189,9 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
     }
 
     render() {
+        const borders = 16; // 8px border on each side
         return <div className="linkDocPreview" onPointerDown={this.followLink}
-            style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + 16 }}>
+            style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
             {this.docPreview}
         </div>;
     }
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 33147e7f3..c0e0296fe 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -6,7 +6,7 @@ import "pdfjs-dist/web/pdf_viewer.css";
 import { Doc, Opt, WidthSym } from "../../../fields/Doc";
 import { documentSchema } from '../../../fields/documentSchemas';
 import { makeInterface } from "../../../fields/Schema";
-import { Cast, NumCast } from "../../../fields/Types";
+import { Cast, NumCast, StrCast } from '../../../fields/Types';
 import { PdfField } from "../../../fields/URLField";
 import { TraceMobx } from '../../../fields/util';
 import { Utils, returnOne } from '../../../Utils';
@@ -23,6 +23,7 @@ import { pageSchema } from "./ImageBox";
 import "./PDFBox.scss";
 import React = require("react");
 import { DocAfterFocusFunc } from './DocumentView';
+import { Docs } from '../../documents/Documents';
 
 type PdfDocument = makeInterface<[typeof documentSchema, typeof panZoomSchema, typeof pageSchema]>;
 const PdfDocument = makeInterface(documentSchema, panZoomSchema, pageSchema);
@@ -85,7 +86,17 @@ export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps, PdfDocum
         this.initialScrollTarget = doc;
         return this._pdfViewer?.scrollFocus(doc, smooth);
     }
-    getAnchor = () => this.rootDoc;
+    getAnchor = () => {
+        const anchor = Docs.Create.TextanchorDocument({
+            title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop),
+            useLinkSmallAnchor: true,
+            hideLinkButton: true,
+            annotationOn: this.rootDoc,
+            y: NumCast(this.layoutDoc._scrollTop),
+        });
+        this.addDocument(anchor);
+        return anchor;
+    }
     componentWillUnmount() { this._selectReactionDisposer?.(); }
     componentDidMount() {
         this.props.setContentView?.(this);
diff --git a/src/client/views/nodes/WebBox.tsx b/src/client/views/nodes/WebBox.tsx
index 0cf052501..156fe64c9 100644
--- a/src/client/views/nodes/WebBox.tsx
+++ b/src/client/views/nodes/WebBox.tsx
@@ -26,11 +26,11 @@ import { ViewBoxAnnotatableComponent } from "../DocComponent";
 import { DocumentDecorations } from "../DocumentDecorations";
 import { MarqueeAnnotator } from "../MarqueeAnnotator";
 import { Annotation } from "../pdf/Annotation";
-import { DocAfterFocusFunc } from "./DocumentView";
 import { FieldView, FieldViewProps } from './FieldView';
+import { LinkDocPreview } from "./LinkDocPreview";
 import "./WebBox.scss";
+import { DocumentType } from '../../documents/DocumentTypes';
 import React = require("react");
-import { LinkDocPreview } from "./LinkDocPreview";
 const htmlToText = require("html-to-text");
 
 type WebDocument = makeInterface<[typeof documentSchema]>;
@@ -47,7 +47,8 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
     private _iframeIndicatorRef = React.createRef<HTMLDivElement>();
     private _iframeDragRef = React.createRef<HTMLDivElement>();
     private _keyInput = React.createRef<HTMLInputElement>();
-    private _ignoreScroll = false;
+    private _ignoreScroll = "";
+    private _scrollTimer: any;
     private _initialScroll: Opt<number>;
     @observable private _marqueeing: number[] | undefined;
     @observable private _url: string = "hello";
@@ -90,41 +91,63 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                 }
             })));
             iframe.contentDocument.addEventListener('wheel', this.iframeWheel, false);
+            iframe.contentDocument.addEventListener('scroll', this.iframeScroll, false);
         }
     }
 
-    @action
-    onWheelScroll = (scrollTop: number) => {
-        if (this.webpage && this._outerRef.current) {
-            this.webpage.scrollLeft = 0;
-            this._outerRef.current.scrollTop = scrollTop;
-            this._outerRef.current.scrollLeft = 0;
-            this._ignoreScroll = true;
-            if (this.layoutDoc._scrollTop !== scrollTop) {
-                this.layoutDoc._scrollTop = scrollTop;
-            }
-            this._ignoreScroll = false;
-        }
+    resetIgnoreScroll = () => {
+        this._scrollTimer && clearTimeout(this._scrollTimer);
+        this._scrollTimer = setTimeout(() => {
+            this._scrollTimer = undefined;
+            this._ignoreScroll = "";
+        }, 250);
+        this._outerRef.current && (this._outerRef.current.scrollLeft = 0);
+    }
+    iframeWheel = (e: any) => {
+        this._ignoreScroll = "iframe";
+        this.resetIgnoreScroll();
+        e.stopPropagation();
+    }
+    onWebWheel = (e: React.WheelEvent) => {
+        this._ignoreScroll = "iframe";
+        this.goTo(Math.max(0, (this.webpage?.scrollTop || 0) + (this._accumulatedGoTo + 1) * e.deltaY), 100);
+        this.resetIgnoreScroll();
+        e.stopPropagation();
     }
-    iframeWheel = (e: any) => this.webpage && e.target?.children && this.onWheelScroll(this.webpage.scrollTop);
     onWheel = (e: React.WheelEvent) => {
-        this._outerRef.current && this.onWheelScroll(this._outerRef.current.scrollTop);
+        this._ignoreScroll = "outer";
+        this.resetIgnoreScroll();
         e.stopPropagation();
     }
-
-    getAnchor = () => this.rootDoc;
+    iframeScroll = (e: any) => {
+        if (!this._ignoreScroll.includes("outer") && this._outerRef.current) {
+            this._outerRef.current.scrollTop = this.webpage?.scrollTop || 0;
+            this.layoutDoc._scrollTop = this.webpage?.scrollTop;
+        }
+    }
+    onScroll = (e: any) => {
+        if (!this._ignoreScroll.includes("iframe") && this.webpage) {
+            this.webpage.scrollTop = this._outerRef.current?.scrollTop || 0;
+            this.layoutDoc._scrollTop = this._outerRef.current?.scrollTop;
+        }
+    }
     scrollFocus = (doc: Doc, smooth: boolean) => {
         let focusSpeed: Opt<number>;
         if (doc !== this.rootDoc && this.webpage && this._outerRef.current) {
-            const scrollTo = Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1));
+            const scrollTo = doc.type === DocumentType.TEXTANCHOR ? NumCast(doc.y) : Utils.scrollIntoView(NumCast(doc.y), doc[HeightSym](), NumCast(this.layoutDoc._scrollTop), this.props.PanelHeight() / (this.props.scaling?.() || 1));
             if (scrollTo !== undefined) {
                 this._initialScroll !== undefined && (this._initialScroll = scrollTo);
-                this._ignoreScroll = true;
-                this.goTo(scrollTo, focusSpeed = smooth ? 500 : 0);
                 if (!LinkDocPreview.LinkInfo) {
+                    this._ignoreScroll = "iframe|outer";
                     this.layoutDoc._scrollTop = scrollTo;
+                    this._ignoreScroll = "";
                 }
-                this._ignoreScroll = false;
+                this._ignoreScroll = "iframe|outer";
+                this.goTo(scrollTo, focusSpeed = smooth ? 500 : 0);
+                setTimeout(() => {
+                    this._scrollTimer = undefined;
+                    this._ignoreScroll = "";
+                }, focusSpeed);
             }
         } else {
             this._initialScroll = NumCast(doc.y);
@@ -133,6 +156,18 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         return focusSpeed;
     }
 
+    getAnchor = () => {
+        const anchor = Docs.Create.TextanchorDocument({
+            title: StrCast(this.rootDoc.title + " " + this.layoutDoc._scrollTop),
+            useLinkSmallAnchor: true,
+            hideLinkButton: true,
+            annotationOn: this.rootDoc,
+            y: NumCast(this.layoutDoc._scrollTop),
+        });
+        this.addDocument(anchor);
+        return anchor;
+    }
+
     async componentDidMount() {
         this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
 
@@ -172,7 +207,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                 if (quickScroll) {
                     this._initialScroll = scrollTop;
                 }
-                else if (!this._ignoreScroll) {
+                else {
                     const viewTrans = StrCast(this.Document._viewTransition);
                     const durationMiliStr = viewTrans.match(/([0-9]*)ms/);
                     const durationSecStr = viewTrans.match(/([0-9.]*)s/);
@@ -185,11 +220,16 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         quickScroll = false;
     }
 
+    _accumulatedGoTo = 0;
+    _resetGoTo: { resetGoTo: { to: number, duration: number } | undefined } = { resetGoTo: undefined };
     goTo = (scrollTop: number, duration: number) => {
         if (this._outerRef.current && this.webpage) {
             if (duration) {
-                smoothScroll(duration, this.webpage as any as HTMLElement, scrollTop);
-                smoothScroll(duration, this._outerRef.current, scrollTop);
+                if (this._accumulatedGoTo++) {
+                    this._resetGoTo.resetGoTo = { to: scrollTop, duration };
+                } else {
+                    smoothScroll(duration, [this.webpage as any as HTMLElement, this._outerRef.current], scrollTop, () => this._accumulatedGoTo = 0, this._resetGoTo);
+                }
             } else {
                 this.webpage.scrollTop = scrollTop;
                 this._outerRef.current.scrollTop = scrollTop;
@@ -202,6 +242,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         document.removeEventListener("pointerup", this.onLongPressUp);
         document.removeEventListener("pointermove", this.onLongPressMove);
         this._iframe?.removeEventListener('wheel', this.iframeWheel);
+        this._iframe?.removeEventListener('scroll', this.iframeScroll);
     }
 
     @action
@@ -497,17 +538,18 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
         return (<div className="webBox" ref={this._mainCont} >
             <div className={`webBox-container`}
                 style={{ pointerEvents: inactiveLayer ? "none" : undefined }}
+                onWheel={this.onWebWheel}
                 onContextMenu={this.specificContextMenu}>
                 <base target="_blank" />
                 {this.content}
                 <div className={"webBox-outerContent"} ref={this._outerRef}
                     style={{
                         width: `${100 / scale}%`, height: `${100 / scale}%`, transform: `scale(${scale})`,
-                        pointerEvents: this.layoutDoc.isAnnotating && !inactiveLayer ? "all" : "none"
+                        pointerEvents: !this.layoutDoc.isAnnotating || inactiveLayer ? "none" : "all"
                     }}
                     onWheel={this.onWheel}
                     onPointerDown={this.onMarqueeDown}
-                    onScroll={e => e.stopPropagation()}
+                    onScroll={this.onScroll}
                 >
                     <div className={"webBox-innerContent"} style={{
                         height: NumCast(this.scrollHeight, 50),
@@ -527,8 +569,7 @@ export class WebBox extends ViewBoxAnnotatableComponent<FieldViewProps, WebDocum
                             addDocument={this.addDocument}
                             select={emptyFunction}
                             active={this.active}
-                            whenActiveChanged={this.whenActiveChanged}>
-                        </CollectionFreeFormView>
+                            whenActiveChanged={this.whenActiveChanged} />
                     </div>
                 </div>
                 {this.annotationLayer}
diff --git a/src/client/views/nodes/formattedText/EquationView.tsx b/src/client/views/nodes/formattedText/EquationView.tsx
index eff018635..508500ab6 100644
--- a/src/client/views/nodes/formattedText/EquationView.tsx
+++ b/src/client/views/nodes/formattedText/EquationView.tsx
@@ -15,24 +15,24 @@ export class EquationView {
         this._fieldWrapper = document.createElement("div");
         this._fieldWrapper.style.width = node.attrs.width;
         this._fieldWrapper.style.height = node.attrs.height;
-        this._fieldWrapper.style.fontWeight = "bold";
         this._fieldWrapper.style.position = "relative";
         this._fieldWrapper.style.display = "inline-block";
-        this._fieldWrapper.onkeypress = function (e: any) { e.stopPropagation(); };
-        this._fieldWrapper.onkeydown = function (e: any) { e.stopPropagation(); };
-        this._fieldWrapper.onkeyup = function (e: any) { e.stopPropagation(); };
         this._fieldWrapper.onmousedown = function (e: any) { e.stopPropagation(); };
 
         ReactDOM.render(<EquationViewInternal
             fieldKey={node.attrs.fieldKey}
             width={node.attrs.width}
             height={node.attrs.height}
+            setEditor={this.setEditor}
             tbox={tbox}
         />, this._fieldWrapper);
         (this as any).dom = this._fieldWrapper;
     }
+    _editor: EquationEditor | undefined;
+    setEditor = (editor?: EquationEditor) => this._editor = editor;
     destroy() { ReactDOM.unmountComponentAtNode(this._fieldWrapper); }
-    selectNode() { }
+    selectNode() { this._editor?.mathField.focus(); }
+    deselectNode() { }
 }
 
 interface IEquationViewInternal {
@@ -40,6 +40,7 @@ interface IEquationViewInternal {
     tbox: FormattedTextBox;
     width: number;
     height: number;
+    setEditor: (editor: EquationEditor | undefined) => void;
 }
 
 @observer
@@ -47,6 +48,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
     _reactionDisposer: IReactionDisposer | undefined;
     _textBoxDoc: Doc;
     _fieldKey: string;
+    _ref: React.RefObject<EquationEditor> = React.createRef();
 
     constructor(props: IEquationViewInternal) {
         super(props);
@@ -55,6 +57,7 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
     }
 
     componentWillUnmount() { this._reactionDisposer?.(); }
+    componentDidMount() { this.props.setEditor(this._ref.current ?? undefined); }
 
     render() {
         return <div className="equationView" style={{
@@ -62,8 +65,9 @@ export class EquationViewInternal extends React.Component<IEquationViewInternal>
             display: "inline-block",
             width: this.props.width,
             height: this.props.height,
+            bottom: 3,
         }}>
-            <EquationEditor
+            <EquationEditor ref={this._ref}
                 value={StrCast(this._textBoxDoc[this._fieldKey], "y=")}
                 onChange={str => this._textBoxDoc[this._fieldKey] = str}
                 autoCommands="pi theta sqrt sum prod alpha beta gamma rho"
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 104d60fff..0f669a544 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -554,6 +554,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
         const uicontrols: ContextMenuProps[] = [];
         uicontrols.push({ description: `${FormattedTextBox.CanAnnotate ? "Hide" : "Show"} Annotation Bar`, event: () => FormattedTextBox.CanAnnotate = !FormattedTextBox.CanAnnotate, icon: "expand-arrows-alt" });
+        uicontrols.push({ description: !this.Document._noSidebar ? "Hide Sidebar Handle" : "Show Sidebar Handle", event: () => this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar, icon: "expand-arrows-alt" });
         uicontrols.push({ description: `${this.layoutDoc._showAudio ? "Hide" : "Show"} Dictation Icon`, event: () => this.layoutDoc._showAudio = !this.layoutDoc._showAudio, icon: "expand-arrows-alt" });
         uicontrols.push({ description: "Show Highlights...", noexpand: true, subitems: highlighting, icon: "hand-point-right" });
         !Doc.UserDoc().noviceMode && uicontrols.push({
@@ -597,7 +598,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<(FieldViewProp
 
         const options = cm.findByDescription("Options...");
         const optionItems = options && "subitems" in options ? options.subitems : [];
-        optionItems.push({ description: !this.Document._noSidebar ? "Hide Sidebar Handle" : "Show Sidebar Handle", event: () => this.layoutDoc._noSidebar = !this.layoutDoc._noSidebar, icon: "expand-arrows-alt" });
         optionItems.push({ description: !this.Document._singleLine ? "Make Single Line" : "Make Multi Line", event: () => this.layoutDoc._singleLine = !this.layoutDoc._singleLine, icon: "expand-arrows-alt" });
         optionItems.push({ description: `${this.Document._autoHeight ? "Lock" : "Auto"} Height`, event: () => this.layoutDoc._autoHeight = !this.layoutDoc._autoHeight, icon: "plus" });
         !options && cm.addItem({ description: "Options...", subitems: optionItems, icon: "eye" });
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index e5d924f42..4b9b78211 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -316,8 +316,7 @@ export class RichTextRules {
                     if (!fieldKey && !docid) return state.tr;
                     docid && DocServer.GetRefField(docid).then(docx => {
                         if (!(docx instanceof Doc && docx)) {
-                            const docx = Docs.Create.FreeformDocument([], { title: rawdocid, _width: 500, _height: 500 }, docid);
-                            DocUtils.Publish(docx, docid, returnFalse, returnFalse);
+                            Docs.Create.FreeformDocument([], { title: rawdocid, _width: 500, _height: 500 }, docid);
                         }
                     });
                     const node = (state.doc.resolve(start) as any).nodeAfter;
diff --git a/src/client/views/nodes/formattedText/nodes_rts.ts b/src/client/views/nodes/formattedText/nodes_rts.ts
index 3bd41fa7d..9893da3bb 100644
--- a/src/client/views/nodes/formattedText/nodes_rts.ts
+++ b/src/client/views/nodes/formattedText/nodes_rts.ts
@@ -247,6 +247,7 @@ export const nodes: { [index: string]: NodeSpec } = {
         attrs: {
             fieldKey: { default: "" },
         },
+        atom: true,
         group: "inline",
         draggable: false,
         toDOM(node) {