@atlaskit/editor-plugin-code-block
Version:
Code block plugin for @atlaskit/editor-core
176 lines (171 loc) • 7.89 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { browser } from '@atlaskit/editor-common/browser';
import { codeBlockWrappedStates, defaultWordWrapState } from '@atlaskit/editor-common/code-block';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { resetShouldIgnoreFollowingMutations } from '../editor-commands';
import { getPluginState } from '../pm-plugins/main-state';
import { codeBlockClassNames } from '../ui/class-names';
// Ignored via go/ees005
// eslint-disable-next-line require-unicode-regexp
const MATCH_NEWLINES = new RegExp('\n', 'g');
const toDOM = (node, contentEditable, formattedAriaLabel) => ['div', {
class: codeBlockClassNames.container
}, ['div', {
class: codeBlockClassNames.start,
contenteditable: 'false'
}], ['div', {
class: codeBlockClassNames.contentWrapper
}, ['div', {
class: codeBlockClassNames.gutter,
contenteditable: 'false'
}], ['div', {
class: codeBlockClassNames.content
}, ['code', {
'data-language': node.attrs.language || '',
spellcheck: 'false',
contenteditable: contentEditable ? 'true' : 'false',
'data-testid': 'code-block--code',
'aria-label': formattedAriaLabel
}, 0]]], ['div', {
class: codeBlockClassNames.end,
contenteditable: 'false'
}]];
export class CodeBlockView {
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
constructor(_node, view, getPos, formattedAriaLabel, api, cleanupEditorDisabledListener) {
var _api$editorDisabled, _api$editorDisabled$s;
_defineProperty(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.
*/
_defineProperty(this, "maintainDynamicGutterSize", () => {
let totalLineCount = 1;
this.node.forEach(node => {
const 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;
}
});
const maxDigits = totalLineCount.toString().length;
this.dom.style.setProperty('--lineNumberGutterWidth', `${maxDigits}ch`);
});
this.cleanupEditorDisabledListener = cleanupEditorDisabledListener;
const {
dom,
contentDOM
} = DOMSerializer.renderSpec(document, toDOM(_node, !(api !== null && api !== void 0 && (_api$editorDisabled = api.editorDisabled) !== null && _api$editorDisabled !== void 0 && (_api$editorDisabled$s = _api$editorDisabled.sharedState.currentState()) !== null && _api$editorDisabled$s !== void 0 && _api$editorDisabled$s.editorDisabled), formattedAriaLabel));
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(`.${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 (!codeBlockWrappedStates.has(_node)) {
codeBlockWrappedStates.set(_node, defaultWordWrapState);
}
this.handleEditorDisabledChanged();
}
handleEditorDisabledChanged() {
var _this$api;
if ((_this$api = this.api) !== null && _this$api !== void 0 && _this$api.editorDisabled) {
this.cleanupEditorDisabledListener = this.api.editorDisabled.sharedState.onChange(sharedState => {
if (this.contentDOM) {
this.contentDOM.setAttribute('contenteditable', sharedState.nextSharedState.editorDisabled ? 'false' : 'true');
}
});
}
}
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;
const contentWrapper = this.dom.childNodes[1];
const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
if ((contentView === null || contentView === void 0 ? 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
const codeElement = contentView.firstChild;
codeElement.innerHTML = savedInnerHTML;
// We need to set cursor for the DOM update
const textElement = Array.from(codeElement.childNodes).find(child => child.nodeName === '#text');
const sel = window.getSelection();
const range = document.createRange();
range.setStart(textElement, newCursorPosition);
range.collapse(true);
sel === null || sel === void 0 ? void 0 : sel.removeAllRanges();
sel === null || sel === void 0 ? void 0 : sel.addRange(range);
}
}
}
coalesceDOMElements() {
var _this$dom2;
if ((_this$dom2 = this.dom) !== null && _this$dom2 !== void 0 && _this$dom2.childNodes && this.dom.childNodes.length > 1) {
const contentWrapper = this.dom.childNodes[1];
const contentView = contentWrapper === null || contentWrapper === void 0 ? void 0 : contentWrapper.childNodes[1];
if (contentView !== null && contentView !== void 0 && contentView.childNodes && contentView.childNodes.length > 1) {
let savedInnerHTML = '';
while (contentView.childNodes.length > 1) {
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
const lastChild = contentView.lastChild;
savedInnerHTML = lastChild.innerHTML + savedInnerHTML;
contentView.removeChild(lastChild);
}
// Ignored via go/ees005
// eslint-disable-next-line @atlaskit/editor/no-as-casting
const firstChild = contentView.firstChild;
savedInnerHTML = firstChild.innerHTML + '\n' + savedInnerHTML;
const newCursorPosition = firstChild.innerHTML.length + 1;
setTimeout(this.updateDOMAndSelection.bind(this, savedInnerHTML, newCursorPosition), 20);
}
}
}
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();
if (browser.android) {
this.coalesceDOMElements();
resetShouldIgnoreFollowingMutations(this.view.state, this.view.dispatch);
}
}
return true;
}
ignoreMutation(record) {
const pluginState = 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;
}
destroy() {
if (this.cleanupEditorDisabledListener) {
this.cleanupEditorDisabledListener();
}
this.cleanupEditorDisabledListener = undefined;
}
}
export const codeBlockNodeView = (node, view, getPos, formattedAriaLabel, api
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
) => new CodeBlockView(node, view, getPos, formattedAriaLabel, api);