@atlaskit/editor-plugin-code-block-advanced/dist/esm/nodeviews/codeBlockNodeWithToDOMFixed.js

CodeBlockAdvanced plugin for @atlaskit/editor-core

import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
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 { codeBlock, codeBlockWithExtendedAttributes, codeBlockWithLocalId } from '@atlaskit/adf-schema';
import { areCodeBlockLineNumbersHidden } from '@atlaskit/editor-common/code-block';
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
import { CodeBlockSharedCssClassName } from '@atlaskit/editor-common/styles';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
var codeBlockClassNames = {
  container: CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER,
  start: CodeBlockSharedCssClassName.CODEBLOCK_START,
  end: CodeBlockSharedCssClassName.CODEBLOCK_END,
  contentWrapper: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPER,
  contentWrapped: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT_WRAPPED,
  content: CodeBlockSharedCssClassName.CODEBLOCK_CONTENT
};
var MATCH_NEWLINES = new RegExp('\n', 'gu');
var getFontSize = function getFontSize() {
  return expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && 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: 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: 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: 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 = 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 = 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 || ''
  }, 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(_toConsumableArray(gutters), [['div', {
    class: codeBlockClassNames.content
  }, ['code', _objectSpread({
    'data-language': node.attrs.language || '',
    spellcheck: 'false',
    'data-testid': 'code-block--code',
    'aria-label': formattedAriaLabel
  }, fg('platform_editor_adf_with_localid') && {
    'data-local-id': node.attrs.localId
  }), 0]]]), ['div', {
    class: codeBlockClassNames.end,
    contenteditable: 'false'
  }]];
};
export var codeBlockNodeWithFixedToDOM = function codeBlockNodeWithFixedToDOM(config) {
  return _objectSpread(_objectSpread({}, expValEquals('platform_editor_code_block_q4_lovability', 'isEnabled', true) ? codeBlockWithExtendedAttributes : fg('platform_editor_adf_with_localid') ? codeBlockWithLocalId : codeBlock), {}, {
    toDOM: function toDOM(node) {
      return _toDOM(node, '', config);
    }
  });
};