fixed up text inlining to fix autoheight, to show cursor better, and to highlight selection of inline.

4 files changed, 18 insertions, 10 deletions

diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index ce69dcc41..d077543f1 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -258,6 +258,10 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewInter
                         ? `gray ${StrCast(doc.layout_boxShadow, `0vw 0vw ${(lockedPosition() ? 100 : 50) / (docProps?.NativeDimScaling?.() || 1)}px`)}` // if it's just in a cluster, make the shadown roughly match the cluster border extent
                         : lockedPosition()
                         ? undefined // if it's a background & has a cluster color, make the shadow spread really big
+                        : StrCast(doc.layout_fieldKey).includes('_inline')  // if doc is an inline document in a text box
+                        ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0vw 0vw 0.1vw')}`
+                        : DocCast(doc.embedContainer)?.type=== DocumentType.RTF // if doc is embedded in a text document (but not an inline)
+                        ? `${Colors.DARK_GRAY} ${StrCast(doc.layout_boxShadow, '0.2vw 0.2vw 0.8vw')}`
                         : StrCast(doc.layout_boxShadow, '');
             }
         }
diff --git a/src/client/views/nodes/formattedText/DashDocView.tsx b/src/client/views/nodes/formattedText/DashDocView.tsx
index 56c8e00ed..6a2cd359c 100644
--- a/src/client/views/nodes/formattedText/DashDocView.tsx
+++ b/src/client/views/nodes/formattedText/DashDocView.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { Doc } from '../../../../fields/Doc';
 import { Height, Width } from '../../../../fields/DocSymbols';
-import { NumCast, StrCast } from '../../../../fields/Types';
+import { NumCast } from '../../../../fields/Types';
 import { emptyFunction, returnFalse, Utils } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
@@ -14,6 +14,7 @@ import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { DocFocusOptions, DocumentView } from '../DocumentView';
 import { FormattedTextBox } from './FormattedTextBox';
 
+var horizPadding = 3; // horizontal padding to container to allow cursor to show up on either side.
 export class DashDocView {
     dom: HTMLSpanElement; // container for label and value
     root: any;
@@ -22,8 +23,7 @@ export class DashDocView {
         this.dom = document.createElement('span');
         this.dom.style.position = 'relative';
         this.dom.style.textIndent = '0';
-        this.dom.style.border = '1px solid ' + StrCast(tbox.layoutDoc.color, 'lightGray');
-        this.dom.style.width = node.attrs.width;
+        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;
@@ -63,7 +63,12 @@ export class DashDocView {
             } catch {}
         });
     }
-    selectNode() {}
+    deselectNode() {
+        this.dom.style.backgroundColor = '';
+    }
+    selectNode() {
+        this.dom.style.backgroundColor = 'rgb(141, 182, 247)';
+    }
 }
 
 interface IDashDocViewInternal {
@@ -182,12 +187,11 @@ export class DashDocViewInternal extends ObservableReactComponent<IDashDocViewIn
                 ref={this._spanRef}
                 className="dash-span"
                 style={{
-                    width: this._width,
+                    width: `calc(100% - ${horizPadding}px)`,
                     height: this._height,
-                    position: 'absolute',
-                    display: 'inline-block',
-                    left: 0,
-                    top: 0,
+                    position: 'relative',
+                    display: 'flex',
+                    margin: 'auto',
                     pointerEvents: this.isContentActive() ? undefined : 'none',
                 }}
                 onPointerLeave={this.onPointerLeave}
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 3be3aeba3..8feb7ab85 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2010,6 +2010,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     style={{
                         cursor: this._props.isContentActive() ? 'text' : undefined,
                         height: this._props.height ? 'max-content' : undefined,
+                        overflow: this.layout_autoHeight ? 'hidden' : undefined,
                         pointerEvents: Doc.ActiveTool === InkTool.None && !this._props.onBrowseClick?.() ? undefined : 'none',
                     }}
                     onContextMenu={this.specificContextMenu}
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index d4bd18948..456ed4732 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -95,7 +95,6 @@ export class RichTextRules {
                 textDocInline.title_custom = true; // And make sure that it's 'custom' so that editing text doesn't change the title of the containing doc
                 textDocInline.isTemplateForField = inlineFieldKey; // this is needed in case the containing text doc is converted to a template at some point
                 textDocInline.proto = textDoc; // make the annotation inherit from the outer text doc so that it can resolve any nested field references, e.g., [[field]]
-                textDocInline._textContext = ComputedField.MakeFunction(`copyField(this.${inlineFieldKey})`);
                 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;