@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
173 lines (172 loc) • 7.17 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import React, { useLayoutEffect, useState } from 'react';
import { bind } from 'bind-event-listener';
// eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
import uuid from 'uuid/v4';
import { breakoutMessages as messages } from '@atlaskit/editor-common/messages';
import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
import { disableNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/element/disable-native-drag-preview';
import { preventUnhandled } from '@atlaskit/pragmatic-drag-and-drop/prevent-unhandled';
import Tooltip from '@atlaskit/tooltip';
var getNodeName = function getNodeName(nodeName) {
if (nodeName === 'layoutSection') {
return 'layout';
} else if (nodeName === 'codeBlock' || nodeName === 'expand') {
return nodeName;
} else {
return 'node';
}
};
export var resizeHandleMessage = {
expand: messages.resizeExpand,
codeBlock: messages.resizeCodeBlock,
layout: messages.resizeLayout,
node: messages.resizeElement
};
var RailWithTooltip = function RailWithTooltip(_ref) {
var rail = _ref.rail,
target = _ref.target,
intl = _ref.intl;
var _useState = useState('node'),
_useState2 = _slicedToArray(_useState, 2),
nodeName = _useState2[0],
setNodeName = _useState2[1];
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.createElement(Tooltip, {
content: intl.formatMessage(resizeHandleMessage[nodeName]),
position: "mouse"
}, /*#__PURE__*/React.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);
}
}
}));
};
export var 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 = uuid();
nodeViewPortalProviderAPI.render(function () {
return /*#__PURE__*/React.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 draggable({
element: handleElement,
onGenerateDragPreview: function onGenerateDragPreview(_ref3) {
var nativeSetDragImage = _ref3.nativeSetDragImage;
disableNativeDragPreview({
nativeSetDragImage: nativeSetDragImage
});
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.stop();
state = 'default';
handleElement.classList.remove('pm-breakout-resize-handle-container--active');
_onDrop(args);
}
});
};
var registerEvents = function registerEvents(element) {
return [bind(element, {
type: 'mouseenter',
listener: function listener() {
rightHandle.rail.style.setProperty('opacity', '1');
leftHandle.rail.style.setProperty('opacity', '1');
}
}), bind(element, {
type: 'mouseleave',
listener: function listener() {
if (state === 'resizing') {
return;
}
rightHandle.rail.style.removeProperty('opacity');
leftHandle.rail.style.removeProperty('opacity');
}
})];
};
var unbindFns = [].concat(_toConsumableArray(registerEvents(target)), _toConsumableArray(registerEvents(rightHandle.handleHitBox)), _toConsumableArray(registerEvents(leftHandle.handleHitBox)), _toConsumableArray(registerEvents(rightHandle.rail)), _toConsumableArray(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);
}
}
};
};