@atlaskit/editor-plugin-base
Version:
Base plugin for @atlaskit/editor-core
104 lines (102 loc) • 4.05 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
var _featureGateJsClient = _interopRequireDefault(require("@atlaskit/feature-gate-js-client"));
var _pluginKey = require("./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 (_featureGateJsClient.default.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
var _default = exports.default = function _default() {
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.SafePlugin({
key: _pluginKey.scrollGutterPluginKey,
state: {
init: function init() {
return {};
},
apply: function apply(tr, pluginState) {
if (tr.getMeta(_pluginKey.scrollGutterPluginKey)) {
return tr.getMeta(_pluginKey.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;
}
};
}
});
};