@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
531 lines (526 loc) • 22.4 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, MODE, PLATFORMS, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
import { copyToClipboard, getAnalyticsPayload } from '@atlaskit/editor-common/clipboard';
import { codeBlockWrappedStates, getDefaultCodeBlockAttrs, isCodeBlockWordWrapEnabled } from '@atlaskit/editor-common/code-block';
import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
import { contentAllowedInCodeBlock, shouldSplitSelectedNodeOnNodeInsertion } from '@atlaskit/editor-common/insert';
import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
import { findCodeBlock } from '@atlaskit/editor-common/transforms';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { findParentNodeOfType, findSelectedNodeOfType, isNodeSelection, removeParentNodeOfType, removeSelectedNode, safeInsert } from '@atlaskit/editor-prosemirror/utils';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { ACTIONS } from '../pm-plugins/actions';
import { autoDetectPluginKey } from '../pm-plugins/auto-detect-state';
import { copySelectionPluginKey } from '../pm-plugins/codeBlockCopySelectionPlugin';
import { pluginKey } from '../pm-plugins/plugin-key';
import { transformToCodeBlockAction } from '../pm-plugins/transform-to-code-block';
import { createAutoDetectEntry, getLocalId, hasEnoughTextForAutoDetection } from '../utils/auto-detect-state';
export var removeCodeBlockWithAnalytics = function removeCodeBlockWithAnalytics(editorAnalyticsAPI) {
return withAnalytics(editorAnalyticsAPI, {
action: ACTION.DELETED,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: {
inputMethod: INPUT_METHOD.FLOATING_TB
},
eventType: EVENT_TYPE.TRACK
})(removeCodeBlock);
};
export var removeCodeBlock = function removeCodeBlock(state, dispatch) {
var nodes = state.schema.nodes,
tr = state.tr;
if (dispatch) {
var removeTr = tr;
if (findSelectedNodeOfType(nodes.codeBlock)(tr.selection)) {
removeTr = removeSelectedNode(tr);
} else {
removeTr = removeParentNodeOfType(nodes.codeBlock)(tr);
}
dispatch(removeTr);
}
return true;
};
export var changeLanguage = function changeLanguage(editorAnalyticsAPI) {
return function (language, selectionSource) {
return function (state, dispatch) {
var _pluginKey$getState, _autoDetectPluginKey$;
var codeBlock = state.schema.nodes.codeBlock;
var pos = (_pluginKey$getState = pluginKey.getState(state)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.pos;
if (typeof pos !== 'number') {
return false;
}
var node = state.doc.nodeAt(pos);
var localId = node === null || node === void 0 ? void 0 : node.attrs.localId;
var shouldIncludeAutoDetectionContext = expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) && fg('platform_editor_code_block_language_detection_flow');
var previousAutoDetectEntry = shouldIncludeAutoDetectionContext ? (_autoDetectPluginKey$ = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$ === void 0 ? void 0 : _autoDetectPluginKey$.languageDetectionMap[localId] : undefined;
var tr = state.tr.setNodeMarkup(pos, codeBlock, _objectSpread(_objectSpread({}, node === null || node === void 0 ? void 0 : node.attrs), {}, {
language: language
})).setMeta('scrollIntoView', false);
if (shouldIncludeAutoDetectionContext) {
tr.setMeta(autoDetectPluginKey, {
type: ACTIONS.REMOVE_AUTO_DETECT_ENTRY,
data: {
localId: localId
}
});
}
var selection = isNodeSelection(state.selection) ? NodeSelection.create(tr.doc, pos) : tr.selection;
var result = tr.setSelection(selection);
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.LANGUAGE_SELECTED,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: _objectSpread(_objectSpread({
language: language !== null && language !== void 0 ? language : 'none'
}, selectionSource ? {
selectionSource: selectionSource
} : {}), shouldIncludeAutoDetectionContext ? {
autoDetectionResult: previousAutoDetectEntry === null || previousAutoDetectEntry === void 0 ? void 0 : previousAutoDetectEntry.detectionResult,
autoDetectedLanguage: previousAutoDetectEntry === null || previousAutoDetectEntry === void 0 ? void 0 : previousAutoDetectEntry.autoDetectedLanguage
} : {}),
eventType: EVENT_TYPE.TRACK
})(result);
dispatch(result);
}
return true;
};
};
};
/** Queue auto-detection for selected code block. */
export var detectLanguage = function detectLanguage() {
return function (state, dispatch) {
var _pluginKey$getState2;
var pos = (_pluginKey$getState2 = pluginKey.getState(state)) === null || _pluginKey$getState2 === void 0 ? void 0 : _pluginKey$getState2.pos;
if (typeof pos !== 'number') {
return false;
}
var node = state.doc.nodeAt(pos);
if (!node) {
return false;
}
var localId = getLocalId(node);
if (!localId) {
return false;
}
var autoDetectState = autoDetectPluginKey.getState(state);
var previousEntry = autoDetectState === null || autoDetectState === void 0 ? void 0 : autoDetectState.languageDetectionMap[localId];
var entry = createAutoDetectEntry(node, pos, hasEnoughTextForAutoDetection(node.textContent), previousEntry, {
preserveDetectionResult: false
});
var tr = state.tr.setNodeMarkup(pos, state.schema.nodes.codeBlock, _objectSpread(_objectSpread({}, node.attrs), {}, {
language: null
})).setMeta(autoDetectPluginKey, {
type: ACTIONS.SET_AUTO_DETECT_ENTRY,
data: {
localId: localId,
entry: entry
}
}).setMeta('scrollIntoView', false);
var selection = isNodeSelection(state.selection) ? NodeSelection.create(tr.doc, pos) : tr.selection;
var result = tr.setSelection(selection);
if (dispatch) {
dispatch(result);
}
return true;
};
};
var setResolveFormatCodeMeta = function setResolveFormatCodeMeta(tr, _ref) {
var languageSource = _ref.languageSource,
localId = _ref.localId,
outcome = _ref.outcome,
requestId = _ref.requestId,
errorType = _ref.errorType;
return tr.setMeta(pluginKey, {
type: ACTIONS.RESOLVE_FORMAT_CODE,
data: _objectSpread({
languageSource: languageSource,
localId: localId,
outcome: outcome,
requestId: requestId
}, errorType ? {
errorType: errorType
} : {})
});
};
var replaceCodeBlockText = function replaceCodeBlockText(_ref2) {
var codeBlockNode = _ref2.codeBlockNode,
content = _ref2.content,
pos = _ref2.pos,
tr = _ref2.tr;
var from = pos + 1;
var to = pos + codeBlockNode.nodeSize - 1;
tr.delete(from, to);
if (content) {
tr.insertText(content, from);
}
// The editor scroll plugin scrolls doc-changing transactions by default.
return tr.setMeta('scrollIntoView', false);
};
var attachFormatCodeAnalytics = function attachFormatCodeAnalytics(_ref3) {
var editorAnalyticsAPI = _ref3.editorAnalyticsAPI,
languageSource = _ref3.languageSource,
result = _ref3.result,
tr = _ref3.tr;
if (result.status === 'failed') {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.ERRORED,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: {
errorType: result.errorType,
language: result.language,
languageSource: languageSource
},
eventType: EVENT_TYPE.TRACK
})(tr);
return;
}
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.FORMATTED,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: {
language: result.language,
languageSource: languageSource,
outcome: result.status
},
eventType: EVENT_TYPE.TRACK
})(tr);
};
var createResolveFormatCodeTransaction = function createResolveFormatCodeTransaction(_ref4) {
var editorAnalyticsAPI = _ref4.editorAnalyticsAPI,
localId = _ref4.localId,
pendingFormat = _ref4.pendingFormat,
result = _ref4.result,
tr = _ref4.tr;
var languageSource = pendingFormat.languageSource,
requestId = pendingFormat.requestId;
var codeBlockNode = tr.doc.nodeAt(pendingFormat.pos);
var hasMatchingCodeBlock = (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.type) === tr.doc.type.schema.nodes.codeBlock && (codeBlockNode === null || codeBlockNode === void 0 ? void 0 : codeBlockNode.attrs.localId) === localId;
if (!hasMatchingCodeBlock) {
// Keep failure telemetry even when the target block is no longer available.
if (result.status === 'failed') {
attachFormatCodeAnalytics({
editorAnalyticsAPI: editorAnalyticsAPI,
languageSource: languageSource,
result: result,
tr: tr
});
}
return setResolveFormatCodeMeta(tr, {
languageSource: languageSource,
localId: localId,
outcome: 'unchanged',
requestId: requestId
});
}
var resultTransaction = tr;
if (result.status === 'formatted') {
resultTransaction = replaceCodeBlockText({
codeBlockNode: codeBlockNode,
content: result.content,
pos: pendingFormat.pos,
tr: tr
});
}
attachFormatCodeAnalytics({
editorAnalyticsAPI: editorAnalyticsAPI,
languageSource: languageSource,
result: result,
tr: resultTransaction
});
return setResolveFormatCodeMeta(resultTransaction, {
errorType: result.status === 'failed' ? result.errorType : undefined,
languageSource: languageSource,
localId: localId,
outcome: result.status,
requestId: requestId
});
};
export var createFormatCodeOnClick = function createFormatCodeOnClick(_ref5) {
var api = _ref5.api,
editorAnalyticsAPI = _ref5.editorAnalyticsAPI,
formatCodeProvider = _ref5.formatCodeProvider;
return function (state, dispatch) {
var _currentNode$attrs$la, _autoDetectPluginKey$2, _api$core;
if (!formatCodeProvider) {
return false;
}
var currentCodeBlockState = pluginKey.getState(state);
var currentPos = currentCodeBlockState === null || currentCodeBlockState === void 0 ? void 0 : currentCodeBlockState.pos;
if (!currentCodeBlockState || typeof currentPos !== 'number') {
return false;
}
var currentNode = state.doc.nodeAt(currentPos);
if (!currentNode || currentNode.type !== state.schema.nodes.codeBlock) {
return false;
}
var currentLanguage = (_currentNode$attrs$la = currentNode.attrs.language) !== null && _currentNode$attrs$la !== void 0 ? _currentNode$attrs$la : '';
var currentLocalId = currentNode.attrs.localId;
if (currentCodeBlockState.pendingFormats[currentLocalId]) {
return true;
}
var autoDetectEntry = (_autoDetectPluginKey$2 = autoDetectPluginKey.getState(state)) === null || _autoDetectPluginKey$2 === void 0 ? void 0 : _autoDetectPluginKey$2.languageDetectionMap[currentLocalId];
var languageSource = (autoDetectEntry === null || autoDetectEntry === void 0 ? void 0 : autoDetectEntry.autoDetectedLanguage) === currentLanguage ? 'auto-detected' : 'selected';
var content = currentNode.textContent;
var requestId = crypto.randomUUID();
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref6) {
var tr = _ref6.tr;
return tr.setMeta(pluginKey, {
type: ACTIONS.START_FORMAT_CODE,
data: {
languageSource: languageSource,
localId: currentLocalId,
pos: currentPos,
requestId: requestId
}
});
});
void formatCodeProvider.formatCode({
content: content,
language: currentLanguage
}).catch(function () {
return {
errorType: 'formatter-execution-failed',
language: currentLanguage,
status: 'failed'
};
}).then(function (result) {
var _api$codeBlock, _api$core2;
var pendingFormat = api === null || api === void 0 || (_api$codeBlock = api.codeBlock) === null || _api$codeBlock === void 0 || (_api$codeBlock = _api$codeBlock.sharedState.currentState()) === null || _api$codeBlock === void 0 ? void 0 : _api$codeBlock.pendingFormats[currentLocalId];
if (!pendingFormat || pendingFormat.requestId !== requestId) {
return;
}
api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref7) {
var tr = _ref7.tr;
return createResolveFormatCodeTransaction({
editorAnalyticsAPI: editorAnalyticsAPI,
localId: currentLocalId,
pendingFormat: pendingFormat,
result: result,
tr: tr
});
});
});
return true;
};
};
export var copyContentToClipboardWithAnalytics = function copyContentToClipboardWithAnalytics(editorAnalyticsAPI) {
return function (state, dispatch) {
var nodes = state.schema.nodes,
tr = state.tr;
var codeBlock = findParentNodeOfType(nodes.codeBlock)(tr.selection);
var textContent = codeBlock && codeBlock.node.textContent;
if (textContent) {
copyToClipboard(textContent);
var copyToClipboardTr = tr;
copyToClipboardTr.setMeta(pluginKey, {
type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
data: true
});
copyToClipboardTr.setMeta(copySelectionPluginKey, 'remove-selection');
if (editorAnalyticsAPI) {
var analyticsPayload = getAnalyticsPayload(state, ACTION.COPIED);
if (analyticsPayload) {
analyticsPayload.attributes.inputMethod = INPUT_METHOD.FLOATING_TB;
analyticsPayload.attributes.nodeType = codeBlock === null || codeBlock === void 0 ? void 0 : codeBlock.node.type.name;
editorAnalyticsAPI.attachAnalyticsEvent(analyticsPayload)(copyToClipboardTr);
}
}
if (dispatch) {
dispatch(copyToClipboardTr);
}
}
return true;
};
};
export var copyContentToClipboard = function copyContentToClipboard(state, dispatch) {
var nodes = state.schema.nodes,
tr = state.tr;
var codeBlock = findParentNodeOfType(nodes.codeBlock)(tr.selection);
var textContent = codeBlock && codeBlock.node.textContent;
if (textContent) {
copyToClipboard(textContent);
var copyToClipboardTr = tr;
copyToClipboardTr.setMeta(pluginKey, {
type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
data: true
});
copyToClipboardTr.setMeta(copySelectionPluginKey, 'remove-selection');
if (dispatch) {
dispatch(copyToClipboardTr);
}
}
return true;
};
export var resetCopiedState = function resetCopiedState(state, dispatch) {
var tr = state.tr;
var codeBlockState = pluginKey.getState(state);
var resetCopiedStateTr = tr;
if (codeBlockState && codeBlockState.contentCopied) {
resetCopiedStateTr.setMeta(pluginKey, {
type: ACTIONS.SET_COPIED_TO_CLIPBOARD,
data: false
});
resetCopiedStateTr.setMeta(copySelectionPluginKey, 'remove-selection');
if (dispatch) {
dispatch(resetCopiedStateTr);
}
} else {
var clearSelectionStateTransaction = state.tr;
clearSelectionStateTransaction.setMeta(copySelectionPluginKey, 'remove-selection');
// note: dispatch should always be defined when called from the
// floating toolbar. Howver the Command type which floating toolbar uses
// (and resetCopiedState) uses suggests it's optional.
if (dispatch) {
dispatch(clearSelectionStateTransaction);
}
}
return true;
};
export var ignoreFollowingMutations = function ignoreFollowingMutations(state, dispatch) {
var tr = state.tr;
var ignoreFollowingMutationsTr = tr;
ignoreFollowingMutationsTr.setMeta(pluginKey, {
type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
data: true
});
if (dispatch) {
dispatch(ignoreFollowingMutationsTr);
}
return true;
};
export var resetShouldIgnoreFollowingMutations = function resetShouldIgnoreFollowingMutations(state, dispatch) {
var tr = state.tr;
var ignoreFollowingMutationsTr = tr;
ignoreFollowingMutationsTr.setMeta(pluginKey, {
type: ACTIONS.SET_SHOULD_IGNORE_FOLLOWING_MUTATIONS,
data: false
});
if (dispatch) {
dispatch(ignoreFollowingMutationsTr);
}
return true;
};
/**
* This function creates a new transaction that inserts a code block,
* if there is text selected it will wrap the current selection if not it will
* append the codeblock to the end of the document.
*/
export function createInsertCodeBlockTransaction(_ref8) {
var state = _ref8.state;
var tr = state.tr;
var from = state.selection.from;
var codeBlock = state.schema.nodes.codeBlock;
var codeBlockAttrs = getDefaultCodeBlockAttrs();
var grandParentNode = state.selection.$from.node(-1);
var grandParentNodeType = grandParentNode === null || grandParentNode === void 0 ? void 0 : grandParentNode.type;
var parentNodeType = state.selection.$from.parent.type;
/** We always want to append a codeBlock unless we're inserting into a paragraph
* AND it's a valid child of the grandparent node.
* Insert the current selection as codeBlock content unless it contains nodes other
* than paragraphs and inline.
*/
var canInsertCodeBlock = shouldSplitSelectedNodeOnNodeInsertion({
parentNodeType: parentNodeType,
grandParentNodeType: grandParentNodeType,
content: codeBlock.createAndFill()
}) && contentAllowedInCodeBlock(state);
if (canInsertCodeBlock) {
tr = transformToCodeBlockAction(state, from, codeBlockAttrs);
} else {
safeInsert(codeBlock.createAndFill(codeBlockAttrs))(tr).scrollIntoView();
}
return tr;
}
export function insertCodeBlockWithAnalytics(inputMethod, analyticsAPI) {
return withAnalytics(analyticsAPI, {
action: ACTION.INSERTED,
actionSubject: ACTION_SUBJECT.DOCUMENT,
actionSubjectId: ACTION_SUBJECT_ID.CODE_BLOCK,
attributes: {
inputMethod: inputMethod
},
eventType: EVENT_TYPE.TRACK
})(function (state, dispatch) {
var tr = createInsertCodeBlockTransaction({
state: state
});
if (dispatch) {
dispatch(tr);
}
return true;
});
}
/**
* Add the given node to the codeBlockWrappedStates WeakMap with the toggle boolean value.
*/
export var toggleWordWrapStateForCodeBlockNode = function toggleWordWrapStateForCodeBlockNode(editorAnalyticsAPI) {
return function (state, dispatch) {
var codeBlock = findCodeBlock(state);
var codeBlockNode = codeBlock === null || codeBlock === void 0 ? void 0 : codeBlock.node;
var tr = state.tr;
if (!codeBlockWrappedStates || !codeBlockNode) {
return false;
}
var updatedToggleState = !isCodeBlockWordWrapEnabled(codeBlockNode);
if (expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true)) {
tr.setNodeMarkup(codeBlock.pos, undefined, _objectSpread(_objectSpread({}, codeBlockNode.attrs), {}, {
wrap: updatedToggleState
}));
if (fg('platform_editor_code_block_dogfooding_patch')) {
tr.setMeta('scrollIntoView', false);
}
} else {
codeBlockWrappedStates.set(codeBlockNode, updatedToggleState);
}
tr.setMeta(pluginKey, {
type: ACTIONS.SET_IS_WRAPPED,
data: updatedToggleState
});
if (dispatch) {
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.TOGGLE_CODE_BLOCK_WRAP,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: {
platform: PLATFORMS.WEB,
mode: MODE.EDITOR,
wordWrapEnabled: updatedToggleState,
codeBlockNodeSize: codeBlockNode.nodeSize
},
eventType: EVENT_TYPE.TRACK
})(tr);
dispatch(tr);
}
return true;
};
};
export var toggleLineNumbersForCodeBlockNodeEditorCommand = function toggleLineNumbersForCodeBlockNodeEditorCommand(editorAnalyticsAPI) {
return function (_ref9) {
var tr = _ref9.tr;
var codeBlockType = tr.doc.type.schema.nodes.codeBlock;
var codeBlock = findSelectedNodeOfType(codeBlockType)(tr.selection) || findParentNodeOfType(codeBlockType)(tr.selection);
if (!codeBlock) {
return null;
}
var codeBlockNode = codeBlock.node;
var lineNumbersHidden = !Boolean(codeBlockNode.attrs.hideLineNumbers);
tr.setNodeMarkup(codeBlock.pos, undefined, _objectSpread(_objectSpread({}, codeBlockNode.attrs), {}, {
hideLineNumbers: lineNumbersHidden
}));
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
action: ACTION.TOGGLE_CODE_BLOCK_LINE_NUMBERS,
actionSubject: ACTION_SUBJECT.CODE_BLOCK,
attributes: {
platform: PLATFORMS.WEB,
lineNumbersHidden: lineNumbersHidden,
codeBlockNodeSize: codeBlockNode.nodeSize
},
eventType: EVENT_TYPE.TRACK
})(tr);
return tr;
};
};
export var toggleLineNumbersForCodeBlockNode = function toggleLineNumbersForCodeBlockNode(editorAnalyticsAPI) {
return editorCommandToPMCommand(toggleLineNumbersForCodeBlockNodeEditorCommand(editorAnalyticsAPI));
};