| 116 | */ |
| 117 | useLayoutEffect(() => { |
| 118 | const hide = (resizableElement: ResizableElement) => { |
| 119 | const element = |
| 120 | resizableElement === 'first' ? firstRef.current : secondRef.current; |
| 121 | if (!element) { |
| 122 | return; |
| 123 | } |
| 124 | |
| 125 | // We hide elements off screen because of codemirror. If the page is loaded |
| 126 | // and the codemirror container would have zero width, the layout isn't |
| 127 | // instant pretty. By always giving the editor some width we avoid any |
| 128 | // layout shifts when the editor reappears. |
| 129 | element.style.left = '-1000px'; |
| 130 | element.style.position = 'absolute'; |
| 131 | element.style.opacity = '0'; |
| 132 | element.style.height = '500px'; |
| 133 | element.style.width = '500px'; |
| 134 | |
| 135 | // Make sure that the flex value of the first item is at least equal to one |
| 136 | // so that the entire space of the parent element is filled up |
| 137 | if (firstRef.current) { |
| 138 | const flex = parseFloat(firstRef.current.style.flex); |
| 139 | if (!Number.isFinite(flex) || flex < 1) { |
| 140 | firstRef.current.style.flex = '1'; |
| 141 | } |
| 142 | } |
| 143 | }; |
| 144 | |
| 145 | const show = (resizableElement: ResizableElement) => { |
| 146 | const element = |