Editor resize

[v-a-zagoruyko]

Can I consider this as right way to implement editor resize? (React Example)

We can get current editor height like this:

resizeObserver = new ResizeObserver(
  debounce((element) => {
    this.setState({ editorHeight: element[0].target.offsetHeight });
  }, 100),
);

setInitialEditorState = (editor) => {
  this.resizeObserver.observe(editor.ui.view.editable.element);
  editor.editing.view.change((writer) => {
    ...
    writer.setStyle('resize', 'vertical', editor.editing.view.document.getRoot());
  });
};

CKEditor loses height style set by resize on blur/focus, so we must set it explicitly:

<CKEditor ... onFocus={this.handleResize} onBlur={this.handleResize} />

handleResize = (_, editor) => {
  const { editorHeight } = this.state;

  editor.editing.view.change((writer) => {
    writer.setStyle('height', `${editorHeight}px`, editor.editing.view.document.getRoot());
  });
};

Originally posted by @v-a-zagoruyko in #636 (comment)

I've created new issue since commenting on closed issues is usually worthless.

[v-a-zagoruyko]

Also please take a look at plugin draft:

export default class Resize extends Plugin {
  static get pluginName() {
    return 'Resize';
  }

  constructor(editor) {
    super(editor);

    const defaultConfig = {
      minHeight: 350,
      maxHeight: 800,
    };
    const config = editor.config.get('resize') || {};

    this.config = { ...defaultConfig, ...config };
    this.height = 0;
  }

  // eslint-disable-next-line compat/compat
  resizeObserver = new ResizeObserver(
    debounce((element) => {
      this.height = element[0].target.offsetHeight;
    }, 100),
  );

  init() {
    const { editor, config } = this;
    const { minHeight, maxHeight } = config;

    this.listenTo(editor, 'ready', () => {
      this.resizeObserver.observe(editor.ui.view.editable.element);
    });

    editor.editing.view.change((writer) => {
      writer.setStyle('resize', 'vertical', editor.editing.view.document.getRoot());

      writer.setStyle('min-height', `${minHeight}px`, editor.editing.view.document.getRoot());
      writer.setStyle('max-height', `${maxHeight}px`, editor.editing.view.document.getRoot());
    });

    editor.editing.view.document.on('change:isFocused', () => {
      editor.editing.view.change((writer) => {
        writer.setStyle('height', `${this.height}px`, editor.editing.view.document.getRoot());
      });
    });
  }
}

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may still be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).