@atlaskit/editor-plugin-code-block-advanced
Version:
CodeBlockAdvanced plugin for @atlaskit/editor-core
147 lines (146 loc) • 6.28 kB
JavaScript
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
import { foldGutter, codeFolding, foldState, foldEffect } from '@codemirror/language';
import { setCodeBlockFoldState, getCodeBlockFoldState } from '@atlaskit/editor-common/code-block';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
// Based on platform/packages/design-system/icon/svgs/utility/add.svg
var chevronDown = ['http://www.w3.org/2000/svg svg', {
width: '12',
height: '12',
fill: 'none',
viewBox: '0 0 16 16',
style: 'pointer-events: none;'
}, ['http://www.w3.org/2000/svg path', {
fill: 'currentcolor',
'fill-rule': 'evenodd',
d: 'm14.53 6.03-6 6a.75.75 0 0 1-1.004.052l-.056-.052-6-6 1.06-1.06L8 10.44l5.47-5.47z',
'clip-rule': 'evenodd',
style: 'pointer-events: none;'
}]];
var chevronRight = ['http://www.w3.org/2000/svg svg', {
width: '12',
height: '12',
fill: 'none',
viewBox: '0 0 16 16',
style: 'pointer-events: none;'
}, ['http://www.w3.org/2000/svg path', {
fill: 'currentcolor',
'fill-rule': 'evenodd',
d: 'm8.28 1.47 6 6a.75.75 0 0 1 .052 1.004l-.052.056-6 6-1.06-1.06L12.69 8 7.22 2.53z',
'clip-rule': 'evenodd',
style: 'pointer-events: none;'
}]];
export function foldGutterExtension(_ref) {
var selectNode = _ref.selectNode,
getNode = _ref.getNode;
return [foldGutter({
foldingChanged: function foldingChanged(update) {
var folds = update.state.field(foldState, false);
if (!folds) {
return false;
}
var foldRanges = [];
folds.between(0, update.state.doc.length, function (from, to) {
foldRanges.push({
from: from,
to: to
});
});
setCodeBlockFoldState(getNode(), foldRanges);
return false;
},
domEventHandlers: {
click: function click(_view, _, event) {
// If we're trying to click the button, don't select
if (event.target instanceof HTMLButtonElement && event.target.getAttribute('data-marker-dom-element')) {
return false;
}
selectNode();
return false;
}
},
markerDOM: function markerDOM(open) {
var _DOMSerializer$render = DOMSerializer.renderSpec(document, chevronDown),
downElement = _DOMSerializer$render.dom;
var _DOMSerializer$render2 = DOMSerializer.renderSpec(document, chevronRight),
rightElement = _DOMSerializer$render2.dom;
var htmlElement = document.createElement('button');
htmlElement.setAttribute('data-marker-dom-element', 'true');
htmlElement.setAttribute('data-testid', "code-block-fold-button-".concat(open ? 'open' : 'closed'));
htmlElement.setAttribute('tabindex', '-1');
htmlElement.setAttribute('style', convertToInlineCss({
background: 'none',
color: 'inherit',
border: 'none',
padding: 0,
paddingRight: "var(--ds-space-050, 4px)",
font: 'inherit',
outline: 'inherit',
cursor: 'pointer'
}));
if (open) {
if (downElement) {
htmlElement.appendChild(downElement);
} else {
// Fallback - never called
htmlElement.textContent = '⌄';
}
} else {
if (rightElement) {
htmlElement.appendChild(rightElement);
} else {
// Fallback - never called
htmlElement.textContent = '>';
}
}
return htmlElement;
}
}), codeFolding({
placeholderDOM: function placeholderDOM(view, onclick, _prepared) {
var htmlElement = document.createElement('button');
htmlElement.setAttribute('data-marker-dom-element', 'true');
htmlElement.setAttribute('tabindex', '-1');
htmlElement.setAttribute('style', convertToInlineCss({
color: 'inherit',
font: 'inherit',
cursor: 'pointer'
}));
htmlElement.textContent = '…';
htmlElement.className = 'cm-foldPlaceholder';
htmlElement.onclick = onclick;
return htmlElement;
}
})];
}
export function getCodeBlockFoldStateEffects(_ref2) {
var node = _ref2.node,
cm = _ref2.cm;
var savedFolds = getCodeBlockFoldState(node);
if (savedFolds.length === 0) {
return undefined;
}
// Create fold effects for each saved fold range
var effects = [];
var _iterator = _createForOfIteratorHelper(savedFolds),
_step;
try {
for (_iterator.s(); !(_step = _iterator.n()).done;) {
var foldRange = _step.value;
// Validate that the fold range is still valid for the current document
var docLength = cm.state.doc.length;
if (foldRange.from >= 0 && foldRange.to <= docLength && foldRange.from < foldRange.to) {
effects.push(foldEffect.of({
from: foldRange.from,
to: foldRange.to
}));
}
}
} catch (err) {
_iterator.e(err);
} finally {
_iterator.f();
}
return effects;
}