@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
161 lines (156 loc) • 7.61 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.runUpdateDebounced = exports.runUpdate = exports.containsSameAttributes = exports.batchMediaNodeAttrsUpdate = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _memoize = _interopRequireDefault(require("lodash/memoize"));
var _batchSteps = require("./batchSteps");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* 🧱 Internal: Editor FE Platform
* Based on https://github.com/lodash/lodash/issues/2403#issuecomment-1706130395
*
* Creates a debounced function that delays invoking the provided function until after a specified
* wait time has elapsed since the last time the debounced function was invoked. Additionally, the
* debounced function is memoized so that the same function instance is used for each unique set
* of arguments based on the resolver.
*
* This is particularly useful in scenarios where you want to debounce function calls while ensuring
* that each unique input combination receives its own debounced function instance. It's a combination
* of lodash's `debounce` and `memoize`.
*
* @template T
* @param {T} func - The function to debounce.
* @param {number} [wait=0] - The number of milliseconds to delay.
* @param {object} [options] - The options object to pass to `debounce`.
* @param {Function} [resolver] - The function to resolve the cache key for memoization.
* @returns {Function} A new debounced and memoized function.
*
* @example
* const debouncedFunction = memoizeDebounce(myFunction, 300, { leading: true }, myResolver);
* debouncedFunction(arg1, arg2);
*/
function memoizeDebounce(func) {
var wait = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
var options = arguments.length > 2 ? arguments[2] : undefined;
var resolver = arguments.length > 3 ? arguments[3] : undefined;
var mem = (0, _memoize.default)(function () {
return (0, _debounce.default)(func, wait, options);
}, resolver);
return function () {
return mem.apply(void 0, arguments).apply(void 0, arguments);
};
}
var mediaAttributesCache = new WeakMap();
var debouncedTime = 500;
var containsSameAttributes = exports.containsSameAttributes = function containsSameAttributes(a, b) {
// a contains b, and want to check if attributes in b are same in a
return Object.entries(b).every(function (_ref) {
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
bkey = _ref2[0],
bValue = _ref2[1];
if (bkey in a) {
var aValue = a[bkey];
// Check if types match before comparing values
return (0, _typeof2.default)(aValue) === (0, _typeof2.default)(bValue) && aValue === bValue;
}
return false;
});
};
/**
* Updates media node attributes in the editor view based on the provided cache.
*
* @param {EditorView} editorView - The editor view instance where the updates will be applied.
* @param {MediaAttributesCache} cache - The cache containing media attributes to be updated.
*
* This function performs the following steps:
* 1. Retrieves the media attributes to update from the cache for the given editor view.
* 2. Clears the media attributes cache for the editor view.
* 3. Searches for media nodes in the document and collects their positions and new attributes.
* 4. If there are any media nodes to update, it applies the updates in a batch.
*/
var runUpdate = exports.runUpdate = function runUpdate(editorView, cache) {
var toUpdateValues = cache.get(editorView) || {};
// clear the media attributes cache per editor view
cache.delete(editorView);
var ids = Object.keys(toUpdateValues);
var state = editorView.state;
var mediaSteps = [];
// search node positions by id
state.doc.descendants(function (node, position) {
if (![node.type.schema.nodes.media, node.type.schema.nodes.mediaInline].includes(node.type)) {
return true;
}
if (!ids.includes(node.attrs.id)) {
return false;
}
var attrs = toUpdateValues[node.attrs.id];
if (containsSameAttributes(node.attrs, attrs)) {
return false;
}
mediaSteps.push({
position: position,
nodeType: node.type.name,
attrs: attrs
});
});
if (mediaSteps.length > 0) {
(0, _batchSteps.batchStepsUpdate)(editorView, mediaSteps);
}
};
/**
* Creates a debounced version of the `runUpdate` function to update media node attributes in the editor view.
*
* @constant
* @type {Function}
* @param {Function} runUpdate - The function to be debounced.
* @param {number} debouncedTime - The debounce delay in milliseconds.
* @param {object} [options] - The debounce options. Defaults to {leading: false, trailing: true}.
* @param {Function} keyResolver - A function that returns the key to be used for memoization. In this case, it returns the editor view instance.
*
* This function performs the following steps:
* 1. Debounces the `runUpdate` function with the specified delay and options.
* 2. Uses the editor view instance as the key for memoization to ensure that updates are applied correctly.
*/
var runUpdateDebounced = exports.runUpdateDebounced = memoizeDebounce(runUpdate, debouncedTime,
/**
* Use the default debounce options:
* {leading: false, trailing: true}
*/
undefined, function (view) {
/**
* EditorView is a singleton.
* There is only one instance per Editor.
*/
return view;
});
/**
* Updates the media node attributes cache for the given editor view and triggers a debounced update.
*
* @param {EditorView} editorView - The editor view instance where the updates will be applied.
* @param {Props} props - The properties containing the media node ID and the next attributes to be updated.
*
* This function performs the following steps:
* 1. Retrieves the media attributes cache for the given editor view.
* 2. If no cache exists, initializes a new cache.
* 3. Updates the cache with the new attributes for the specified media node ID.
* 4. Sets the updated cache back to the media attributes cache.
* 5. Triggers a debounced update to apply the changes in the editor view.
*/
var batchMediaNodeAttrsUpdate = exports.batchMediaNodeAttrsUpdate = function batchMediaNodeAttrsUpdate(editorView, props) {
var cachePerView = mediaAttributesCache.get(editorView);
if (!cachePerView) {
cachePerView = {
records: {}
};
}
cachePerView[props.id] = _objectSpread(_objectSpread({}, cachePerView[props.id] || {}), props.nextAttributes);
mediaAttributesCache.set(editorView, cachePerView);
runUpdateDebounced(editorView, mediaAttributesCache);
};