@atlaskit/editor-plugin-code-block-advanced/dist/es2019/nodeviews/extensions/foldGutter.js

CodeBlockAdvanced plugin for @atlaskit/editor-core

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
const 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;'
}]];
const 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({
  selectNode,
  getNode
}) {
  return [foldGutter({
    foldingChanged: update => {
      const folds = update.state.field(foldState, false);
      if (!folds) {
        return false;
      }
      const foldRanges = [];
      folds.between(0, update.state.doc.length, (from, to) => {
        foldRanges.push({
          from,
          to
        });
      });
      setCodeBlockFoldState(getNode(), foldRanges);
      return false;
    },
    domEventHandlers: {
      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: open => {
      const {
        dom: downElement
      } = DOMSerializer.renderSpec(document, chevronDown);
      const {
        dom: rightElement
      } = DOMSerializer.renderSpec(document, chevronRight);
      const htmlElement = document.createElement('button');
      htmlElement.setAttribute('data-marker-dom-element', 'true');
      htmlElement.setAttribute('data-testid', `code-block-fold-button-${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(view, onclick, _prepared) {
      const 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({
  node,
  cm
}) {
  const savedFolds = getCodeBlockFoldState(node);
  if (savedFolds.length === 0) {
    return undefined;
  }

  // Create fold effects for each saved fold range
  const effects = [];
  for (const foldRange of savedFolds) {
    // Validate that the fold range is still valid for the current document
    const 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
      }));
    }
  }
  return effects;
}