@atlaskit/editor-plugin-breakout
Version:
Breakout plugin for @atlaskit/editor-core
68 lines (67 loc) • 3.07 kB
JavaScript
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { getBreakoutResizableNodeTypes } from '@atlaskit/editor-common/utils';
import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { setBreakoutWidth } from '../editor-commands/set-breakout-width';
const KEYBOARD_RESIZE_STEP = 10;
const getAncestorResizableNode = (view, breakoutResizableNodes) => {
const selection = view.state.selection;
if (selection instanceof NodeSelection) {
const selectedNode = selection.node;
if (breakoutResizableNodes.has(selectedNode.type)) {
return {
node: selectedNode,
pos: selection.$from.pos
};
}
} else if (selection instanceof TextSelection) {
let node = null;
let nodePos = null;
// only top level nodes are resizable
const resolvedPos = view.state.doc.resolve(selection.$from.pos);
const currentNode = resolvedPos.node(1);
if (breakoutResizableNodes.has(currentNode.type)) {
node = currentNode;
nodePos = resolvedPos.before(1);
return {
node: node,
pos: nodePos
};
}
}
return null;
};
export const handleKeyDown = api => (view, event) => {
const browser = getBrowserInfo();
const metaKey = browser.mac ? event.metaKey : event.ctrlKey;
const isBracketKey = event.code === 'BracketRight' || event.code === 'BracketLeft';
if (metaKey && event.altKey && isBracketKey) {
const {
expand,
codeBlock,
layoutSection
} = view.state.schema.nodes;
const breakoutResizableNodes = editorExperiment('platform_synced_block', true) ? getBreakoutResizableNodeTypes(view.state.schema) : new Set([expand, codeBlock, layoutSection]);
const result = getAncestorResizableNode(view, breakoutResizableNodes);
if (result) {
const {
node,
pos
} = result;
const breakoutMark = node === null || node === void 0 ? void 0 : node.marks.find(mark => mark.type.name === 'breakout');
if (breakoutMark) {
const step = event.code === 'BracketRight' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
const newWidth = breakoutMark.attrs.width + step;
if (newWidth < akEditorFullWidthLayoutWidth && newWidth > akEditorDefaultLayoutWidth) {
var _api$editorViewMode, _api$editorViewMode$s;
const isEditMode = (api === null || api === void 0 ? void 0 : (_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : (_api$editorViewMode$s = _api$editorViewMode.sharedState.currentState()) === null || _api$editorViewMode$s === void 0 ? void 0 : _api$editorViewMode$s.mode) === 'edit';
setBreakoutWidth(breakoutMark.attrs.width + step, breakoutMark.attrs.mode, pos, isEditMode)(view.state, view.dispatch);
view.focus();
}
return true;
}
}
}
return false;
};