Monaco editor react resize by user (windows style resize)

Question

I'm using monaco-editor, react version, have this code

  <Editor
                height={"100%"}
                width={1200}
                onChange={handleUserQueryChange}
                beforeMount={handleEditorBeforeMount}
                onMount={handleEditorDidMount}
                options={{
                  minimap: {
                    enabled: false,
                  },
                  scrollBeyondLastLine: false,
                  lineNumbers: 'off',
                  glyphMargin: false,
                  folding: false,
                  lineDecorationsWidth: 0,
                  lineNumbersMinChars: 0,
                  wordWrap: 'off',
                  automaticLayout: true
                }}
              />

I would like to change the size editor like a window that you open in a normal OS (windows/linux), and moving the content below down.

The automaticaLayout that I added doesn't seem to work (I think it something about being responsive).

Any ideas?

Answer 1

I ended up using the library re-resizable , with this code and it's working:

  const [height, setHeight] = useState(10)

  <Resizable size={{
              width: 1200,
              height: height,
            }}
            onResizeStop={(e, direction, ref, d) => {
              setHeight(height + d.height)
            }}
            >
             
               <Editor
                height={height}
                width={1200}
                options={{
                  minimap: {
                    enabled: false,
                  },
                  scrollBeyondLastLine: false,
                  lineNumbers: 'off',
                  glyphMargin: false,
                  folding: false,
                  lineDecorationsWidth: 0,
                  lineNumbersMinChars: 0,
                  wordWrap: 'off',
                  automaticLayout: true
                }}
              />
            </Resizable>

Note: only changes height in this example but you can add the width as well if needed