@atlaskit/editor-plugin-width/dist/esm/useResizeWidthObserver.js

Width plugin for @atlaskit/editor-core

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect } from 'react';
import { pluginKey } from './plugin-key';
var setEditorWidth = function setEditorWidth(props) {
  return function (editorView) {
    var dispatch = editorView.dispatch,
      tr = editorView.state.tr;
    tr.setMeta(pluginKey, props);
    dispatch(tr);
  };
};
export var useResizeWidthObserver = function useResizeWidthObserver(_ref) {
  var editorView = _ref.editorView,
    containerElement = _ref.containerElement;
  useEffect(function () {
    var newState = {
      lineLength: editorView.dom.clientWidth,
      width: containerElement === null || containerElement === void 0 ? void 0 : containerElement.offsetWidth
    };
    setEditorWidth(newState)(editorView);
  }, [editorView, editorView.dom.clientWidth, containerElement]);
  useEffect(function () {
    var resizeWidth = function resizeWidth(entries) {
      if (entries.length !== 1) {
        return;
      }
      var _entries = _slicedToArray(entries, 1),
        fullAreaSize = _entries[0];
      if (!fullAreaSize || !Array.isArray(fullAreaSize.borderBoxSize)) {
        return;
      }
      var width = fullAreaSize.borderBoxSize[0].inlineSize;
      var lineLength = editorView.dom.clientWidth;
      setEditorWidth({
        width: width,
        lineLength: lineLength
      })(editorView);
    };
    var resizeObserver = new ResizeObserver(resizeWidth);
    if (containerElement) {
      resizeObserver.observe(containerElement);
    }
    return function () {
      resizeObserver.disconnect();
    };
  }, [containerElement, editorView]);
};