@atlaskit/editor-plugin-block-controls
Version:
Block controls plugin for @atlaskit/editor-core
178 lines (172 loc) • 7.87 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.findHandleDec = exports.emptyParagraphNodeDecorations = exports.dragHandleDecoration = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = require("react");
var _bindEventListener = require("bind-event-listener");
var _reactDom = _interopRequireDefault(require("react-dom"));
var _uuid = _interopRequireDefault(require("uuid"));
var _view = require("@atlaskit/editor-prosemirror/view");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _dragHandle = require("../ui/drag-handle");
var _decorationsCommon = require("./decorations-common");
var _marks = require("./utils/marks");
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var emptyParagraphNodeDecorations = exports.emptyParagraphNodeDecorations = function emptyParagraphNodeDecorations() {
var anchorName = "--node-anchor-paragraph-0";
var style = "anchor-name: ".concat(anchorName, "; margin-top: 0px;");
return _view.Decoration.node(0, 2, (0, _defineProperty2.default)({
style: style
}, 'data-drag-handler-anchor-name', anchorName), {
type: _decorationsCommon.TYPE_NODE_DEC
});
};
var findHandleDec = exports.findHandleDec = function findHandleDec(decorations, from, to) {
return decorations.find(from, to, function (spec) {
return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
});
};
var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(_ref) {
var api = _ref.api,
formatMessage = _ref.formatMessage,
pos = _ref.pos,
anchorName = _ref.anchorName,
nodeType = _ref.nodeType,
nodeViewPortalProviderAPI = _ref.nodeViewPortalProviderAPI,
handleOptions = _ref.handleOptions,
anchorRectCache = _ref.anchorRectCache,
editorState = _ref.editorState;
if (!(0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true, {
exposure: true
})) {
(0, _decorationsCommon.unmountDecorations)(nodeViewPortalProviderAPI, 'data-blocks-drag-handle-container', 'data-blocks-drag-handle-key');
}
var unbind;
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var key = (0, _uuid.default)();
var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
side: -1,
type: _decorationsCommon.TYPE_HANDLE_DEC,
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
/**
* 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: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _marks.getActiveBlockMarks)(editorState, pos),
destroy: function destroy(node) {
unbind && unbind();
if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
_reactDom.default.unmountComponentAtNode(node);
}
}
} : {
side: -1,
type: _decorationsCommon.TYPE_HANDLE_DEC,
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
marks: (0, _expValEquals.expValEquals)('platform_editor_clean_up_widget_mark_logic', 'isEnabled', true) ? [] : (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? (0, _marks.getActiveBlockMarks)(editorState, pos) : undefined,
destroy: function destroy(node) {
unbind && unbind();
if ((0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) && node instanceof HTMLElement) {
_reactDom.default.unmountComponentAtNode(node);
}
}
};
return _view.Decoration.widget(pos, function (view, getPosUnsafe) {
var element = document.createElement('span');
// inline decoration causes focus issues when refocusing Editor into first line
element.style.display = 'block';
if ((0, _platformFeatureFlags.fg)('confluence_remix_button_right_side_block_fg')) {
element.setAttribute('data-blocks-decorator-widget', 'true');
}
element.setAttribute('data-testid', 'block-ctrl-decorator-widget');
element.setAttribute('data-blocks-drag-handle-container', 'true');
element.setAttribute('data-blocks-drag-handle-key', key);
var isTopLevelNode = true;
var getPos = function getPos() {
try {
return getPosUnsafe();
} catch (_unused) {
// Ignore errors from getPosUnsafe
return undefined;
}
};
var newPos = getPos();
if (typeof newPos === 'number') {
var $pos = view.state.doc.resolve(newPos);
isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
}
/*
* We disable mouseover event to fix flickering issue on hover
* However, the tooltip for nested drag handle is no long working.
*/
if (newPos === undefined || !isTopLevelNode) {
if ((0, _platformFeatureFlags.fg)('platform_editor_fix_widget_destroy')) {
element.onmouseover = function (e) {
e.stopPropagation();
};
} else {
unbind = (0, _bindEventListener.bind)(element, {
type: 'mouseover',
listener: function listener(e) {
e.stopPropagation();
}
});
}
}
// There are times when global clear: "both" styles are applied to this decoration causing jumpiness
// due to margins applied to other nodes eg. Headings
element.style.clear = 'unset';
// temporarily re-instating ReactDOM.render to fix drag handle focus issue, fix to
// follow via ED-26546
// previous under platform_editor_react18_plugin_portalprovider
// nodeViewPortalProviderAPI.render(
// () =>
// createElement(DragHandle, {
// view,
// api,
// formatMessage,
// getPos,
// anchorName,
// nodeType,
// handleOptions,
// isTopLevelNode,
// }),
// element,
// key,
// );
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
_reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandleWithVisibility, {
view: view,
api: api,
formatMessage: formatMessage,
getPos: getPos,
anchorName: anchorName,
nodeType: nodeType,
handleOptions: handleOptions,
isTopLevelNode: isTopLevelNode,
anchorRectCache: anchorRectCache
}), element);
} else {
_reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_dragHandle.DragHandle, {
view: view,
api: api,
formatMessage: formatMessage,
getPos: getPos,
anchorName: anchorName,
nodeType: nodeType,
handleOptions: handleOptions,
isTopLevelNode: isTopLevelNode,
anchorRectCache: anchorRectCache
}), element);
}
return element;
}, widgetSpec);
};