@atlaskit/editor-plugin-base/dist/esm/pm-plugins/scroll-gutter/plugin.js

Base plugin for @atlaskit/editor-core

import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
import FeatureGates from '@atlaskit/feature-gate-js-client';
import { scrollGutterPluginKey } from './plugin-key';
var GUTTER_SIZE_IN_PX = 120;
var GUTTER_SELECTOR_NAME = 'editor-scroll-gutter';
var GUTTER_ATTR = 'data-editor-scroll-gutter';

/**
 * Create a gutter element that can be added or removed from the DOM.
 */
function createGutter(gutterSize, parent) {
  if (FeatureGates.getExperimentValue('cc_snippets_dogfooding_beta', 'isEnabled', false)) {
    if (!parent) {
      return function () {};
    }
    var existing = parent.querySelector("[".concat(GUTTER_ATTR, "]"));
    if (existing instanceof HTMLElement) {
      return function () {
        return parent.removeChild(existing);
      };
    }
    var _gutter = document.createElement('div');
    _gutter.style.paddingBottom = "".concat(gutterSize, "px");
    _gutter.setAttribute('data-vc', 'scroll-gutter');
    _gutter.setAttribute(GUTTER_ATTR, 'true');
    parent.appendChild(_gutter);
    return function () {
      return parent.removeChild(_gutter);
    };
  }
  var gutterRef = document.getElementById(GUTTER_SELECTOR_NAME);
  if (gutterRef) {
    return function () {
      return parent === null || parent === void 0 ? void 0 : parent.removeChild(gutterRef);
    };
  }
  var gutter = document.createElement('div');
  gutter.style.paddingBottom = "".concat(gutterSize, "px");
  gutter.setAttribute('data-vc', 'scroll-gutter');
  gutter.id = GUTTER_SELECTOR_NAME;
  if (parent) {
    parent.appendChild(gutter);
  }
  return function () {
    return parent === null || parent === void 0 ? void 0 : parent.removeChild(gutter);
  };
}
// eslint-disable-next-line @typescript-eslint/no-empty-object-type
export default (function () {
  var pluginOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
  var getScrollElement = pluginOptions.getScrollElement,
    _pluginOptions$gutter = pluginOptions.gutterSize,
    gutterSize = _pluginOptions$gutter === void 0 ? GUTTER_SIZE_IN_PX : _pluginOptions$gutter;
  if (!getScrollElement) {
    return undefined;
  }
  return new SafePlugin({
    key: scrollGutterPluginKey,
    state: {
      init: function init() {
        return {};
      },
      apply: function apply(tr, pluginState) {
        if (tr.getMeta(scrollGutterPluginKey)) {
          return tr.getMeta(scrollGutterPluginKey);
        }
        return pluginState;
      }
    },
    props: {
      // Determines the distance (in pixels) between the cursor and the end of the visible viewport at which point,
      // when scrolling the cursor into view, scrolling takes place.
      // Defaults to 0: https://prosemirror.net/docs/ref/#view.EditorProps.scrollThreshold
      scrollThreshold: gutterSize,
      // Determines the extra space (in pixels) that is left above or below the cursor when it is scrolled into view.
      // Defaults to 5: https://prosemirror.net/docs/ref/#view.EditorProps.scrollMargin
      scrollMargin: gutterSize
    },
    view: function view(_view) {
      var _editorElement;
      // Store references to avoid lookups on successive checks.
      var scrollElement = getScrollElement(_view);
      var editorElement = _view.dom instanceof HTMLElement ? _view.dom : null;
      var editorParentElement = (_editorElement = editorElement) === null || _editorElement === void 0 ? void 0 : _editorElement.parentElement;
      var cleanup = function cleanup() {};
      if (editorParentElement && scrollElement) {
        cleanup = createGutter(gutterSize, editorParentElement);
      }
      return {
        destroy: function destroy() {
          cleanup();
          editorParentElement = editorElement = null;
        }
      };
    }
  });
});