drag boxes

1 files changed, 15 insertions, 2 deletions

diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index f80ff5f94..9c86fafcc 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -119,7 +119,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
               singleLine: boolean;
               whiteSpace: string;
           } => {
-        const singleLine = BoolCast(this.layoutDoc._singleLine, true);
+        const singleLine = BoolCast(this.layoutDoc._singleLine, true); // bcz: this is ugly--- should default ot false??
         const params = {
             rotateText: null,
             fontSizeFactor: 1,
@@ -150,6 +150,8 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         BigText(r, params);
         return params;
     };
+    _divRef: HTMLDivElement | null = null;
+
     // (!missingParams || !missingParams.length ? "" : "(" + missingParams.map(m => m + ":").join(" ") + ")")
     render() {
         const boxParams = this.fitTextToBox(null); // this causes mobx to trigger re-render when data changes
@@ -172,6 +174,13 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) }}>
                 <div
                     className="labelBox-mainButton"
+                    contentEditable
+                    ref={r => (this._divRef = r)}
+                    onKeyDown={e => e.stopPropagation()}
+                    onKeyUp={e => {
+                        e.stopPropagation();
+                        e.key === 'Enter' && (this.dataDoc.text = this._divRef?.textContent ?? '');
+                    }}
                     style={{
                         backgroundColor: this.hoverColor,
                         fontSize: StrCast(this.layoutDoc._text_fontSize),
@@ -187,7 +196,11 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         height: this._props.PanelHeight(),
                         whiteSpace: 'singleLine' in boxParams && boxParams.singleLine ? 'pre' : 'pre-wrap',
                     }}>
-                    <span style={{ width: 'singleLine' in boxParams ? '' : '100%' }} ref={action((r: any) => this.fitTextToBox(r))}>
+                    <span
+                        style={{ width: 'singleLine' in boxParams ? '' : '100%' }}
+                        ref={action((r: any) => {
+                            this.fitTextToBox(r);
+                        })}>
                         {label.startsWith('#') ? null : label.replace(/([^a-zA-Z])/g, '$1\u200b')}
                     </span>
                 </div>