как заставить реагировать-монако-редактор отзывчивым? - PullRequest
Новая
       59

как заставить реагировать-монако-редактор отзывчивым?

1 голос
/ 09 мая 2020

Я использую react-monaco-editor, но не могу сделать его адаптивным. Он требует фиксированной высоты и ширины в компонентах. Если я изменю размер экрана, ширина останется неизменной. 

    <MonacoEditor
      width="1200"
      height="600"
      language="typescript"
      theme="vs-dark"
      defaultValue="//type your code here"
      value={code}
      options={options}
      onChange={this.onChange}
      editorDidMount={this.editorDidMount}
      className='editor1'
    />

Если я удалю ширину и высоту из компонента, компонент уменьшится. Я попытался переопределить компонент className с помощью flex. Но, похоже, это не работает. 

.react-monaco-editor-container {
   flex: 2;

}

Можете ли вы помочь мне с CSS, чтобы сделать это отзывчивым?

Ответы [ 2 ]

0 голосов
/ 17 мая 2020

После того, как некоторые вещи не сработали с CSS, я попытался javascript решить эту 

  updateDimensions = () => {
    this.setState({
      width: window.innerWidth - 501,
      height: window.innerHeight - 50,
    });
  };

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions);
  }
  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }

Сохранение height и width в состоянии и изменение на resize событие сделало свою работу.

0 голосов
/ 09 мая 2020

Вы можете добавить обработчик изменения размера, чтобы определить доступное пространство для контейнера вашего редактора и сразу передать его вашему редактору Monaco.

Также существуют различные библиотеки, которые помогут вам в этом: https://www.npmjs.com/package/react-resize-detector

Здесь вы можете найти пример песочницы с использованием указанной выше библиотеки: https://codesandbox.io/s/vibrant-goldwasser-3d8j7?fontsize=14&hidenavigation=1&theme=dark

import React from "react";
import { withResizeDetector } from "react-resize-detector";

const Editor = ({ width, height }) => (
  <div
    style={{
      background: "grey",
      height: height,
      width: width
    }}
  >
    Editor container with {width} x {height}
  </div>
);

export default withResizeDetector(Editor);
...