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

1 files changed, 13 insertions, 9 deletions

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}