@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
183 lines (180 loc) • 8.61 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.resizeHandleMessage = exports.createPragmaticResizer = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _bindEventListener = require("bind-event-listener");
var _v = _interopRequireDefault(require("uuid/v4"));
var _messages = require("@atlaskit/editor-common/messages");
var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
var _disableNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview");
var _preventUnhandled = require("@atlaskit/pragmatic-drag-and-drop/prevent-unhandled");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var getNodeName = function getNodeName(nodeName) {
if (nodeName === 'layoutSection') {
return 'layout';
} else if (nodeName === 'codeBlock' || nodeName === 'expand') {
return nodeName;
} else {
return 'node';
}
};
var resizeHandleMessage = exports.resizeHandleMessage = {
expand: _messages.breakoutMessages.resizeExpand,
codeBlock: _messages.breakoutMessages.resizeCodeBlock,
layout: _messages.breakoutMessages.resizeLayout,
node: _messages.breakoutMessages.resizeElement
};
var RailWithTooltip = function RailWithTooltip(_ref) {
var rail = _ref.rail,
target = _ref.target,
intl = _ref.intl;
var _useState = (0, _react.useState)('node'),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
nodeName = _useState2[0],
setNodeName = _useState2[1];
(0, _react.useLayoutEffect)(function () {
var node = target.querySelector('[data-prosemirror-node-name]');
var name = getNodeName(node === null || node === void 0 ? void 0 : node.dataset.prosemirrorNodeName);
setNodeName(name);
}, [target]);
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
content: intl.formatMessage(resizeHandleMessage[nodeName]),
position: "mouse"
}, /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "pm-breakout-resize-handle-rail-inside-tooltip",
ref: function ref(el) {
if (el && rail.parentNode !== el) {
el.appendChild(rail);
}
}
}));
};
var createPragmaticResizer = exports.createPragmaticResizer = function createPragmaticResizer(_ref2) {
var target = _ref2.target,
_onDragStart = _ref2.onDragStart,
onDrag = _ref2.onDrag,
_onDrop = _ref2.onDrop,
intl = _ref2.intl,
nodeViewPortalProviderAPI = _ref2.nodeViewPortalProviderAPI;
var state = 'default';
var createHandle = function createHandle(side) {
var handle = document.createElement('div');
handle.contentEditable = 'false';
handle.classList.add('pm-breakout-resize-handle-container');
handle.style.gridColumn = side === 'left' ? '1' : '3';
var rail = document.createElement('div');
rail.classList.add('pm-breakout-resize-handle-rail');
if (side === 'left') {
handle.classList.add('pm-breakout-resize-handle-container--left');
handle.setAttribute('data-testid', 'pragmatic-resizer-handle-left');
} else {
handle.classList.add('pm-breakout-resize-handle-container--right');
handle.setAttribute('data-testid', 'pragmatic-resizer-handle-right');
}
var handleHitBox = document.createElement('div');
handleHitBox.classList.add('pm-breakout-resize-handle-hit-box');
var thumb = document.createElement('div');
thumb.classList.add('pm-breakout-resize-handle-thumb');
thumb.style.pointerEvents = 'none';
rail.appendChild(thumb);
var tooltipContainer = document.createElement('div');
tooltipContainer.classList.add('pm-breakout-resize-handle-rail-wrapper');
handle.appendChild(tooltipContainer);
handle.appendChild(handleHitBox);
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
var key = (0, _v.default)();
nodeViewPortalProviderAPI.render(function () {
return /*#__PURE__*/_react.default.createElement(RailWithTooltip, {
rail: rail,
target: target,
intl: intl
});
}, tooltipContainer, key);
return {
handle: handle,
rail: rail,
handleHitBox: handleHitBox,
destroyTooltip: function destroyTooltip() {
return nodeViewPortalProviderAPI.remove(key);
}
};
};
var rightHandle = createHandle('right');
var leftHandle = createHandle('left');
var registerHandle = function registerHandle(handleElement, handleSide) {
return (0, _adapter.draggable)({
element: handleElement,
onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
var nativeSetDragImage = _ref3.nativeSetDragImage;
(0, _disableNativeDragPreview.disableNativeDragPreview)({
nativeSetDragImage: nativeSetDragImage
});
_preventUnhandled.preventUnhandled.start();
},
getInitialData: function getInitialData() {
return {
handleSide: handleSide
};
},
onDragStart: function onDragStart(args) {
state = 'resizing';
handleElement.classList.add('pm-breakout-resize-handle-container--active');
_onDragStart(args);
},
onDrag: onDrag,
onDrop: function onDrop(args) {
_preventUnhandled.preventUnhandled.stop();
state = 'default';
handleElement.classList.remove('pm-breakout-resize-handle-container--active');
_onDrop(args);
}
});
};
var registerEvents = function registerEvents(element) {
return [(0, _bindEventListener.bind)(element, {
type: 'mouseenter',
listener: function listener() {
rightHandle.rail.style.setProperty('opacity', '1');
leftHandle.rail.style.setProperty('opacity', '1');
}
}), (0, _bindEventListener.bind)(element, {
type: 'mouseleave',
listener: function listener() {
if (state === 'resizing') {
return;
}
rightHandle.rail.style.removeProperty('opacity');
leftHandle.rail.style.removeProperty('opacity');
}
})];
};
var unbindFns = [].concat((0, _toConsumableArray2.default)(registerEvents(target)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.handleHitBox)), (0, _toConsumableArray2.default)(registerEvents(rightHandle.rail)), (0, _toConsumableArray2.default)(registerEvents(leftHandle.rail)));
var handleElement = 'rail';
var destroyFns = [registerHandle(rightHandle[handleElement], 'right'), registerHandle(leftHandle[handleElement], 'left'), rightHandle.destroyTooltip, leftHandle.destroyTooltip];
return {
rightHandle: rightHandle.handle,
leftHandle: leftHandle.handle,
destroy: function destroy(isChangeToViewMode) {
destroyFns.forEach(function (destroyFn) {
return destroyFn();
});
unbindFns.forEach(function (unbindFn) {
return unbindFn();
});
if (isChangeToViewMode) {
var _rightHandle$handle$p, _leftHandle$handle$pa;
(_rightHandle$handle$p = rightHandle.handle.parentElement) === null || _rightHandle$handle$p === void 0 || _rightHandle$handle$p.removeChild(rightHandle.handle);
(_leftHandle$handle$pa = leftHandle.handle.parentElement) === null || _leftHandle$handle$pa === void 0 || _leftHandle$handle$pa.removeChild(leftHandle.handle);
}
}
};
};