@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
206 lines (201 loc) • 10.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.codeBlockNodeView = exports.CodeBlockView = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _browser = require("@atlaskit/editor-common/browser");
var _codeBlock = require("@atlaskit/editor-common/code-block");
var _model = require("@atlaskit/editor-prosemirror/model");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _editorCommands = require("../editor-commands");
var _mainState = require("../pm-plugins/main-state");
var _classNames = require("../ui/class-names");
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) { (0, _defineProperty2.default)(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; }
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
var MATCH_NEWLINES = new RegExp('\n', 'g');
var toDOM = function toDOM(node, contentEditable, formattedAriaLabel) {
return ['div', {
class: _classNames.codeBlockClassNames.container
}, ['div', {
class: _classNames.codeBlockClassNames.start,
contenteditable: 'false'
}], ['div', {
class: _classNames.codeBlockClassNames.contentWrapper
}, ['div', {
class: _classNames.codeBlockClassNames.gutter,
contenteditable: 'false'
}], ['div', {
class: _classNames.codeBlockClassNames.content
}, ['code', _objectSpread({
'data-language': node.attrs.language || '',
spellcheck: 'false',
contenteditable: contentEditable ? 'true' : 'false',
'data-testid': 'code-block--code',
'aria-label': formattedAriaLabel
}, (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
'data-local-id': node.attrs.localId
}), 0]]], ['div', {
class: _classNames.codeBlockClassNames.end,
contenteditable: 'false'
}]];
};
var CodeBlockView = exports.CodeBlockView = /*#__PURE__*/function () {
function CodeBlockView(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
var _this = this,
_api$editorDisabled;
(0, _classCallCheck2.default)(this, CodeBlockView);
(0, _defineProperty2.default)(this, "formattedAriaLabel", '');
/**
* As the code block updates we get the maximum amount of digits in a line number and expand the number gutter to reflect this.
*/
(0, _defineProperty2.default)(this, "maintainDynamicGutterSize", function () {
var totalLineCount = 1;
_this.node.forEach(function (node) {
var text = node.text;
if (text) {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
}
});
var maxDigits = totalLineCount.toString().length;
_this.dom.style.setProperty('--lineNumberGutterWidth', "".concat(maxDigits, "ch"));
});
this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled !== void 0 && _api$editorDisabled.editorDisabled), formattedAriaLabel)),
dom = _DOMSerializer$render.dom,
contentDOM = _DOMSerializer$render.contentDOM;
this.getPos = getPos;
this.view = view;
this.node = _node;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.dom = dom;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.contentDOM = contentDOM;
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
this.lineNumberGutter = this.dom.querySelector(".".concat(_classNames.codeBlockClassNames.gutter));
this.api = api;
this.maintainDynamicGutterSize();
// Ensure the code block node has a wrapped state.
// Wrapped state may already exist from breakout's recreating the node.
if (!_codeBlock.codeBlockWrappedStates.has(_node)) {
_codeBlock.codeBlockWrappedStates.set(_node, _codeBlock.defaultWordWrapState);
}
this.handleEditorDisabledChanged();
}
return (0, _createClass2.default)(CodeBlockView, [{
key: "handleEditorDisabledChanged",
value: function handleEditorDisabledChanged() {
var _this$api,
_this2 = this;
if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled) {
this.cleanupEditorDisabledListener = this.api.editorDisabled.sharedState.onChange(function (sharedState) {
if (_this2.contentDOM) {
_this2.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
}
});
}
}
}, {
key: "updateDOMAndSelection",
value: function updateDOMAndSelection(savedInnerHTML, newCursorPosition) {
var _this$dom;
if ((_this$dom = this.dom) !== null && _this$dom !== void 0 && _this$dom.childNodes && this.dom.childNodes.length > 1) {
var _contentView$childNod;
var contentWrapper = this.dom.childNodes[1];
var contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
if ((contentView === null || contentView === void 0 || (_contentView$childNod = contentView.childNodes) === null || _contentView$childNod === void 0 ? void 0 : _contentView$childNod.length) > 0) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var codeElement = contentView.firstChild;
codeElement.innerHTML = savedInnerHTML;
// We need to set cursor for the DOM update
var textElement = Array.from(codeElement.childNodes).find(function (child) {
return child.nodeName === '#text';
});
var sel = window.getSelection();
var range = document.createRange();
range.setStart(textElement, newCursorPosition);
range.collapse(true);
sel === null || sel === void 0 || sel.removeAllRanges();
sel === null || sel === void 0 || sel.addRange(range);
}
}
}
}, {
key: "coalesceDOMElements",
value: function coalesceDOMElements() {
var _this$dom2;
if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
var contentWrapper = this.dom.childNodes[1];
var contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
var savedInnerHTML = '';
while (contentView.childNodes.length > 1) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var lastChild = contentView.lastChild;
savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
contentView.removeChild(lastChild);
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
var firstChild = contentView.firstChild;
savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
var newCursorPosition = firstChild.innerHTML.length + 1;
setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
}
}
}
}, {
key: "update",
value: function update(node) {
if (node.type !== this.node.type) {
return false;
}
if (node !== this.node) {
if (node.attrs.language !== this.node.attrs.language) {
this.contentDOM.setAttribute('data-language', node.attrs.language || '');
}
this.node = node;
this.maintainDynamicGutterSize();
var browser = (0, _browser.getBrowserInfo)();
if (browser.android) {
this.coalesceDOMElements();
(0, _editorCommands.resetShouldIgnoreFollowingMutations)(this.view.state, this.view.dispatch);
}
}
return true;
}
}, {
key: "ignoreMutation",
value: function ignoreMutation(record) {
var pluginState = (0, _mainState.getPluginState)(this.view.state);
if (pluginState !== null && pluginState !== void 0 && pluginState.shouldIgnoreFollowingMutations) {
return true;
}
// Ensure updating the line-number gutter doesn't trigger reparsing the codeblock
return record.target === this.lineNumberGutter || record.target.parentNode === this.lineNumberGutter;
}
}, {
key: "destroy",
value: function destroy() {
if (this.cleanupEditorDisabledListener) {
this.cleanupEditorDisabledListener();
}
this.cleanupEditorDisabledListener = undefined;
}
}]);
}();
var codeBlockNodeView = exports.codeBlockNodeView = function codeBlockNodeView(node, view, getPos, formattedAriaLabel, api) {
return new CodeBlockView(node, view, getPos, formattedAriaLabel, api);
};