@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
108 lines (106 loc) • 4.64 kB
JavaScript
import { createElement } from 'react';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid';
import { Decoration } from '@atlaskit/editor-prosemirror/view';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { QuickInsertWithVisibility } from '../ui/quick-insert-button';
import { getActiveBlockMarks } from './utils/marks';
import { createVanillaButton } from './vanilla-quick-insert';
var TYPE_QUICK_INSERT = 'INSERT_BUTTON';
export var findQuickInsertInsertButtonDecoration = function findQuickInsertInsertButtonDecoration(decorations, from, to) {
return decorations.find(from, to, function (spec) {
return spec.type === TYPE_QUICK_INSERT;
});
};
export var quickInsertButtonDecoration = function quickInsertButtonDecoration(_ref) {
var api = _ref.api,
formatMessage = _ref.formatMessage,
rootPos = _ref.rootPos,
anchorName = _ref.anchorName,
nodeType = _ref.nodeType,
nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
rootAnchorName = _ref.rootAnchorName,
rootNodeType = _ref.rootNodeType,
anchorRectCache = _ref.anchorRectCache,
editorState = _ref.editorState;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var key = uuid();
var cleanupCallbacks = [];
var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
side: -2,
type: TYPE_QUICK_INSERT,
/**
* sigh - `marks` influences the position that the widget is drawn (as described on the `side` property).
* Exclude 'breakout' on purpose, so the widgets render at the top of the document to avoid z-index issues
* Other block marks must be added, otherwise PM will split the DOM elements causing mutations and re-draws
*/
marks: expValEquals('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : getActiveBlockMarks(editorState, rootPos),
destroy: function destroy(_) {
if (fg('platform_editor_fix_widget_destroy')) {
nodeViewPortalProviderAPI.remove(key);
}
cleanupCallbacks.forEach(function (cb) {
cb();
});
}
} : {
side: -2,
type: TYPE_QUICK_INSERT,
destroy: function destroy(_) {
if (fg('platform_editor_fix_widget_destroy')) {
nodeViewPortalProviderAPI.remove(key);
}
cleanupCallbacks.forEach(function (cb) {
cb();
});
}
};
return Decoration.widget(rootPos, function (view, getPos) {
var element = document.createElement('span');
// inline decoration causes cursor disappear when focusing editor at the first line (e.g. press Tab when title is focused)
element.style.display = 'block';
// make sure it does not interfere with elements floating next to each other e.g. paragraph next to image with wrap-right
element.style.clear = 'unset';
element.contentEditable = 'false';
element.setAttribute('data-blocks-quick-insert-container', 'true');
if (fg('confluence_remix_button_right_side_block_fg')) {
element.setAttribute('data-blocks-quick-insert-button', 'true');
}
element.setAttribute('data-testid', 'block-ctrl-quick-insert-button');
if (editorExperiment('platform_editor_block_control_optimise_render', true, {
exposure: true
})) {
var vanillaElement = createVanillaButton({
formatMessage: formatMessage,
api: api,
view: view,
getPos: getPos,
cleanupCallbacks: cleanupCallbacks,
rootAnchorName: rootAnchorName !== null && rootAnchorName !== void 0 ? rootAnchorName : nodeType,
anchorName: anchorName,
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
anchorRectCache: anchorRectCache
});
element.appendChild(vanillaElement);
return element;
}
nodeViewPortalProviderAPI.render(function () {
return /*#__PURE__*/createElement(QuickInsertWithVisibility, {
api: api,
getPos: getPos,
formatMessage: formatMessage,
view: view,
nodeType: nodeType,
anchorName: anchorName,
rootAnchorName: rootAnchorName,
rootNodeType: rootNodeType !== null && rootNodeType !== void 0 ? rootNodeType : nodeType,
anchorRectCache: anchorRectCache
});
}, element, key, undefined,
// @portal-render-immediately
true);
return element;
}, widgetSpec);
};