@atlaskit/editor-plugin-code-block-advanced
Version:
CodeBlockAdvanced plugin for @atlaskit/editor-core
132 lines (130 loc) • 7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.codeBlockNodeWithFixedToDOM = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _codeBlock = require("@atlaskit/editor-common/code-block");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _styles = require("@atlaskit/editor-common/styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
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; }
var codeBlockClassNames = {
container: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
start: _styles.CodeBlockSharedCssClassName.CODEBLOCK_START,
end: _styles.CodeBlockSharedCssClassName.CODEBLOCK_END,
contentWrapper: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
contentWrapped: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
content: _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
};
var MATCH_NEWLINES = new RegExp('\n', 'gu');
var getFontSize = function getFontSize() {
return (0, _expValEquals.expValEquals)('confluence_compact_text_format', 'isEnabled', true) || (0, _expValEquals.expValEquals)('cc_editor_ai_content_mode', 'variant', 'test') && (0, _platformFeatureFlags.fg)('platform_editor_content_mode_button_mvp') ? '0.875em' : '0.875rem';
};
var getGutterBaseStyle = function getGutterBaseStyle() {
return {
backgroundColor: "var(--ds-background-neutral, #0515240F)",
position: 'relative',
flexShrink: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
fontSize: getFontSize(),
boxSizing: 'content-box'
};
};
var getGutterPadding = function getGutterPadding(allowCodeFolding) {
return allowCodeFolding ? "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-250, 20px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-075, 6px)") : "var(--ds-space-100, 8px)";
};
var getGuttersWithLineNumbers = function getGuttersWithLineNumbers(content, config) {
return ['div', {
// Based on packages/editor/editor-common/src/styles/shared/code-block.ts
// But we can't reuse that class as it adds a ::before that intefers with this approach
style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
width: 'var(--lineNumberGutterWidth, 2rem)',
/* top and bottom | left and right */
padding: getGutterPadding(config.allowCodeFolding)
})),
contenteditable: 'false'
}, ['div', {
class: 'code-block-gutter-pseudo-element',
style: (0, _lazyNodeView.convertToInlineCss)({
textAlign: 'right',
color: "var(--ds-text-subtlest, #6B6E76)",
fontFamily: "var(--ds-font-family-code, \"Atlassian Mono\", ui-monospace, Menlo, \"Segoe UI Mono\", \"Ubuntu Mono\", monospace)",
whiteSpace: 'pre-wrap'
}),
'data-label': content
}]];
};
var getFoldOnlyGutter = function getFoldOnlyGutter() {
return ['div', {
style: (0, _lazyNodeView.convertToInlineCss)(_objectSpread(_objectSpread({}, getGutterBaseStyle()), {}, {
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-100, 8px)")
})),
contenteditable: 'false'
}];
};
var getGutters = function getGutters(content, config, hideLineNumbers) {
if (!hideLineNumbers) {
return [getGuttersWithLineNumbers(content, config)];
}
if (config.allowCodeFolding) {
return [getFoldOnlyGutter()];
}
return [];
};
// Based on: `packages/editor/editor-plugin-code-block/src/nodeviews/code-block.ts`
var _toDOM = function toDOM(node, formattedAriaLabel, config) {
var totalLineCount = 1;
node.forEach(function (node) {
var text = node.text;
if (text) {
totalLineCount += (node.text.match(MATCH_NEWLINES) || []).length;
}
});
var hideLineNumbers = (0, _codeBlock.areCodeBlockLineNumbersHidden)(node);
var maxDigits = totalLineCount.toString().length;
var content = node.textContent.split('\n').map(function (_, i) {
return i + 1;
}).join('\n');
var gutters = getGutters(content, config, hideLineNumbers);
var isCodeBlockWrapped = (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && node.attrs.wrap === true;
var className = [codeBlockClassNames.container, isCodeBlockWrapped ? codeBlockClassNames.contentWrapped : undefined].filter(Boolean).join(' ');
return ['pre', _objectSpread({
class: className,
style: "--lineNumberGutterWidth:".concat(maxDigits, "ch;"),
'data-language': node.attrs.language || ''
}, (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) && _objectSpread({
'data-wrap': node.attrs.wrap ? 'true' : 'false'
}, hideLineNumbers && {
'data-hide-line-numbers': 'true'
})), ['div', {
class: codeBlockClassNames.start,
contenteditable: 'false'
}], ['div', {
class: codeBlockClassNames.contentWrapper
}].concat((0, _toConsumableArray2.default)(gutters), [['div', {
class: codeBlockClassNames.content
}, ['code', _objectSpread({
'data-language': node.attrs.language || '',
spellcheck: '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: codeBlockClassNames.end,
contenteditable: 'false'
}]];
};
var codeBlockNodeWithFixedToDOM = exports.codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
return _objectSpread(_objectSpread({}, (0, _expValEquals.expValEquals)('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? _adfSchema.codeBlockWithExtendedAttributes : (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _adfSchema.codeBlockWithLocalId : _adfSchema.codeBlock), {}, {
toDOM: function toDOM(node) {
return _toDOM(node, '', config);
}
});
};