fix: editor size

walkframe · Nov 12, 2024 · b620469 · b620469
1 parent 0bdc779
commit b620469
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 10 deletions.
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
@@ -135,6 +135,7 @@ export const Editor: React.FC<Props> = ({ mode }: Props) => {
           }),
         );
         dispatch(setEditingCell(''));
+        resetSize(e.currentTarget);
         return false;
       // eslint-disable-next-line no-fallthrough
       case 'Enter': // ENTER
@@ -151,6 +152,7 @@ export const Editor: React.FC<Props> = ({ mode }: Props) => {
             writeCell(input.value);
             dispatch(setEditingCell(''));
           }
+          resetSize(e.currentTarget);
         } else if (editingOnEnter && selectingZone.endY === -1) {
           const dblclick = document.createEvent('MouseEvents');
           dblclick.initEvent('dblclick', true, true);
@@ -392,13 +394,7 @@ export const Editor: React.FC<Props> = ({ mode }: Props) => {
       style={editing ? { top, left, height } : {}}
     >
       {showAddress && <div className="gs-cell-label">{address}</div>}
-      <div
-        className="gs-editor-inner"
-        style={{
-          minWidth: width,
-          width: editorRef.current?.scrollWidth ?? 0,
-        }}
-      >
+      <div className="gs-editor-inner" style={{ width }}>
         <pre
           className="gs-editor-hl"
           style={{
@@ -418,17 +414,17 @@ export const Editor: React.FC<Props> = ({ mode }: Props) => {
             dispatch(setLastFocusedRef(editorRef));
             sheetContext?.setLastFocusedRef?.(editorRef);
           }}
+          style={{ minWidth: width }}
           onDoubleClick={(e) => {
             if (prevention.isPrevented(cell?.prevention, prevention.Write)) {
               console.warn('This cell is protected from writing.');
               return;
             }
             const input = e.currentTarget;
+            resetSize(input);
             if (!editing) {
               dispatch(setInputting(valueString));
               dispatch(setEditingCell(address));
-              input.style.width = `${width}px`;
-              input.style.height = `${height}px`;
               window.setTimeout(() => {
                 input.style.width = `${input.scrollWidth}px`;
                 input.style.height = `${input.scrollHeight}px`;
@@ -446,6 +442,7 @@ export const Editor: React.FC<Props> = ({ mode }: Props) => {
                 writeCell(e.target.value);
               }
             }
+            resetSize(e.target);
           }}
           value={inputting}
           onChange={(e) => {
@@ -501,3 +498,8 @@ export const editorStyle = (text: string) => {
     </>
   );
 };
+
+const resetSize = (input: HTMLTextAreaElement) => {
+  input.style.width = '0px';
+  input.style.height = '0px';
+};
diff --git a/src/styles/minified.ts b/src/styles/minified.ts
@@ -1,3 +1,3 @@
 // yarn generate-style
-export const LAST_MODIFIED = 1731428358;
+export const LAST_MODIFIED = 1731433241;
 export const CSS = `.gs-root1{display:inline-block;max-width:100%;overflow:auto;font-family:"SF Pro Text","SF Pro Icons","Helvetica Neue",Helvetica,Arial,Meiryo,sans-serif}.gs-root1 .gs-main{overflow:hidden;position:relative;box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.gs-root1 .gs-resizing{width:100%;height:100%;position:absolute;background-color:rgba(0,127,255,.08);top:0;left:0;z-index:2}.gs-root1 .gs-line{position:relative;top:0;left:0;border:dotted 1px #07f;box-sizing:border-box}.gs-root1 .gs-line span{font-size:10px;padding:3px;background-color:#07f;color:#fff;margin:0;position:absolute;top:0;left:0}.gs-root1[data-mode=light]{background-color:#e2e2e2;color:#000}.gs-root1[data-mode=light] .gs-main{background-color:#e2e2e2;border-right:solid 1px #ddd;border-bottom:solid 1px #ddd}.gs-root1[data-mode=light] .gs-tabular{background-color:#e2e2e2}.gs-root1[data-mode=light] .gs-formula-bar{background-color:#efefef}.gs-root1[data-mode=light] .gs-formula-bar-editor-inner{color:#555}.gs-root1[data-mode=light] .gs-cell{border-top:solid 1px #ddd;border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-adjuster{background-color:#ddd}.gs-root1[data-mode=light] .gs-tabular-inner{background-color:#f7f7f7}.gs-root1[data-mode=light] .gs-th{background-color:#efefef;color:#666}.gs-root1[data-mode=light] .gs-th.gs-selecting{background-color:#d2d2d2}.gs-root1[data-mode=light] .gs-th.gs-choosing{background-color:#bbb}.gs-root1[data-mode=light] .gs-th.gs-th-selecting{background-color:#555;color:#fff}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner{border-top:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner{border-left:solid 1px #ddd}.gs-root1[data-mode=light] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #ddd}.gs-editor[data-mode=light].gs-editing textarea{caret-color:#000}.gs-editor[data-mode=light].gs-editing .gs-editor-hl{background-color:#f7f7f7;color:#000}.gs-root1[data-mode=dark]{background-color:#3f3f3f;color:#eee}.gs-root1[data-mode=dark] .gs-main{background-color:#3f3f3f;border-right:solid 1px #5a5a5a;border-bottom:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-tabular{background-color:#3f3f3f}.gs-root1[data-mode=dark] .gs-formula-bar{background-color:#4f4f4f}.gs-root1[data-mode=dark] .gs-formula-bar-editor-inner{color:#bbb}.gs-root1[data-mode=dark] .gs-cell{border-top:solid 1px #5a5a5a;border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-adjuster{background-color:#5a5a5a}.gs-root1[data-mode=dark] .gs-tabular-inner{background-color:#212121}.gs-root1[data-mode=dark] .gs-large-editor textarea{color:#eee;caret-color:#eee}.gs-root1[data-mode=dark] .gs-th{background-color:#4f4f4f;color:#eee}.gs-root1[data-mode=dark] .gs-th.gs-selecting{background-color:#606060}.gs-root1[data-mode=dark] .gs-th.gs-choosing{background-color:#777}.gs-root1[data-mode=dark] .gs-th.gs-th-selecting{background-color:#aaa;color:#444}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner{border-top:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-top .gs-th-inner-wrap{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner{border-left:solid 1px #5a5a5a}.gs-root1[data-mode=dark] .gs-th-left .gs-th-inner-wrap{border-top:solid 1px #5a5a5a}.gs-editor[data-mode=dark].gs-editing textarea{caret-color:#eee}.gs-editor[data-mode=dark].gs-editing .gs-editor-hl{background-color:#212121;color:#eee}.gs-cell{padding:0;margin:0;box-sizing:border-box;position:relative;font-size:13px;letter-spacing:1px;line-height:24px}.gs-cell .gs-cell-inner-wrap.gs-selecting{background-color:rgba(0,128,255,.2)}.gs-cell.gs-copying textarea:focus{outline:solid 1px #07f}.gs-cell.gs-selecting{z-index:1}.gs-cell.gs-selecting .gs-cell-inner{background-color:rgba(0,128,255,.2)}.gs-cell.gs-selecting .gs-cell-label{display:block}.gs-cell.gs-choosing{margin-top:-1px;margin-left:-1px;z-index:1}.gs-cell.gs-choosing.gs-editing{color:transparent}.gs-cell.gs-choosing .gs-cell-label{display:block}.gs-cell .gs-formula-error-triangle{position:absolute;top:0;right:0;border-top:3px solid rgba(200,0,0,.9);border-right:3px solid rgba(200,0,0,.9);border-bottom:3px solid transparent;border-left:3px solid transparent;z-index:1}.gs-cell .gs-cell-label{font-size:8px;font-weight:400;font-style:normal;font-family:math,monospace,serif;letter-spacing:1px;line-height:14px;position:absolute;top:0;right:0;background-color:rgba(0,128,255,.2);color:rgba(255,255,255,.6);padding:0 2px;display:none;opacity:.7}.gs-cell .gs-cell-inner-wrap{width:100%;height:100%;position:absolute;top:0;left:0}.gs-cell .gs-cell-inner{width:100%;height:100%;overflow:hidden;display:flex;box-sizing:border-box;border:none!important}.gs-cell .gs-cell-rendered{overflow:hidden;white-space:pre-wrap;cursor:auto;word-wrap:break-word;word-break:break-all;padding:0 2px}.gs-cell .gs-cell-rendered>*{position:relative}.gs-cell .gs-cell-rendered>.backface{z-index:0}.gs-cell .gs-autofill-drag{background-color:#07f;position:absolute;width:7px;height:7px;bottom:0;right:0;margin-right:-3.5px;margin-bottom:-3.5px;cursor:crosshair;z-index:1}.gs-th[data-x="1"] .gs-th-inner-wrap{border-left:none}.gs-th[data-y="1"] .gs-th-inner-wrap{border-top:none}.gs-cell[data-x="1"]{border-left:none}.gs-cell[data-y="1"]{border-top:none}.gs-contextmenu-modal{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:3}.gs-contextmenu{z-index:3;position:fixed;background-color:#fff;padding:5px 0;border-radius:5px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px}.gs-contextmenu ul{min-width:250px;color:#555;margin:0;padding:0}.gs-contextmenu li{padding:5px 10px;list-style-type:none;display:flex}.gs-contextmenu li.gs-enabled{cursor:pointer}.gs-contextmenu li.gs-enabled:hover{background-color:#eee}.gs-contextmenu li.gs-disabled{opacity:.5;cursor:not-allowed}.gs-contextmenu li.gs-menu-divider{background-color:#aaa;margin:10px 0;padding:0;height:1px}.gs-contextmenu li .gs-menu-name{flex:1;font-size:15px;letter-spacing:1px}.gs-contextmenu li .gs-menu-shortcut{font-size:10px;line-height:15px;color:#999;width:15px}.gs-contextmenu li .gs-menu-shortcut:before{content:"("}.gs-contextmenu li .gs-menu-shortcut:after{content:")"}.gs-contextmenu li .gs-menu-shortcut .gs-menu-underline{text-decoration:underline}.gs-editor-hl{padding:0 2px;position:absolute;font-family:monospace,Arial;font-size:12px;line-height:24px;letter-spacing:1px}.gs-formula-bar-editor-inner{position:relative}.gs-editor{position:fixed;opacity:0;z-index:-1}.gs-editor .gs-editor-inner{position:relative}.gs-editor .gs-editor-hl{box-sizing:content-box;border:solid 2px #07f;margin:-2px -1px}.gs-editor textarea{width:100%;padding:0 2px;position:absolute;font-size:12px;font-family:monospace,Arial;line-height:24px;letter-spacing:1px;top:0;left:0;border:none;outline:0;background-color:transparent;color:transparent;resize:none;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;overflow:hidden;cursor:default;white-space:pre;height:auto}.gs-editor.gs-editing{z-index:3;opacity:1}.gs-editor.gs-editing .gs-cell-label{pointer-events:none;font-family:math,monospace,serif;position:absolute;top:0;right:0;margin-top:-15px;margin-right:-2px;padding:0 2px;font-size:10px;background-color:rgba(0,119,255,.75);color:#fff;z-index:1}.gs-formula-bar{width:100%;display:table;align-items:center;justify-content:center;border-top:solid 1px rgba(128,128,128,.3);border-left:solid 1px rgba(128,128,128,.3);border-right:solid 1px rgba(128,128,128,.3);box-sizing:border-box}.gs-formula-bar .gs-selecting-address{display:table-cell;vertical-align:middle;width:50px;color:rgba(200,200,200);font-size:13px;padding-left:5px}.gs-formula-bar .gs-fx{display:table-cell;vertical-align:middle;width:30px;color:rgba(200,200,200);font-style:italic;font-family:cursive;text-align:center;border-left:solid 1px rgba(128,128,128,.5)}.gs-formula-bar .gs-editor-hl{z-index:0;overflow-y:auto;box-sizing:border-box;white-space:pre-wrap;word-break:break-all}.gs-formula-bar textarea{display:table-cell;position:relative;z-index:1;width:100%;vertical-align:bottom;color:transparent;border:none;background-color:transparent;padding:0 2px;box-sizing:border-box;outline:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-size:12px;font-family:monospace,Arial;height:24px;line-height:24px;min-height:24px;letter-spacing:1px;resize:vertical;caret-color:rgba(128,128,128);white-space:pre-wrap;word-break:break-all}.gs-token-type-INVALID_REF{color:red}.gs-token-type-VALUE.gs-token-entity-type-boolean,.gs-token-type-VALUE.gs-token-entity-type-number{color:#39f}.gs-token-type-VALUE.gs-token-entity-type-string{color:#090}.gs-adjuster{padding:0}.gs-tabular{overflow:auto;display:block;box-sizing:border-box;overscroll-behavior-x:contain}.gs-tabular-inner>table{table-layout:fixed;border-collapse:collapse}.gs-th{z-index:2;padding:0;position:sticky;font-size:13px;font-weight:400;box-sizing:border-box;vertical-align:top}.gs-th .gs-resizer{position:absolute;border-color:transparent;box-sizing:border-box;z-index:2}.gs-th .gs-resizer:hover{background-color:#07f}.gs-th .gs-resizer.gs-protected{display:none}.gs-th-inner{height:100%;box-sizing:border-box;vertical-align:middle;overflow:hidden;display:flex;align-items:center;justify-content:center}.gs-th-inner-wrap{height:100%;box-sizing:border-box}.gs-th-top{top:0;overflow:hidden}.gs-th-top .gs-resizer{top:0;right:0;width:3px;cursor:e-resize}.gs-th-top .gs-resizer.gs-dragging{border-right-style:dotted;height:1000000px!important;cursor:e-resize}.gs-th-left{left:0;overflow:hidden;min-width:30px}.gs-th-left .gs-resizer{left:0;bottom:0;height:3px;cursor:n-resize}.gs-th-left .gs-resizer.gs-dragging{border-bottom-style:dotted;width:1000000px!important;cursor:n-resize}.gs-th-top.gs-th-left{top:0;left:0;z-index:3}.gs-search{width:300px;box-shadow:rgba(60,64,67,.3) 0 1px 2px 0,rgba(60,64,67,.15) 0 1px 3px 1px;display:flex;background-color:#fdfdfd;border:solid 2px #eee;border-radius:5px;padding:10px;position:fixed;top:10px;right:10px;z-index:5}.gs-search .gs-searchbox{display:flex;position:relative;border:solid 2px #07f;border-radius:5px;flex:1}.gs-search .gs-searchbox input[type=text]{padding:5px;background-color:transparent;border:none;outline:0;z-index:1;flex:1}.gs-search .gs-search-progress{color:#999;padding:6px 3px;font-size:13px;text-align:right}.gs-search .gs-search-close{margin:6px 5px;cursor:pointer;color:#ddd;width:50px;text-align:center}`;