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

Width plugin for @atlaskit/editor-core

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