@atlaskit/editor-plugin-tasks-and-decisions/dist/esm/nodeviews/decisionItemNodeSpec.js

Tasks and decisions plugin for @atlaskit/editor-core

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 { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';

// When cleaning up editor_a11y_decision_aria_label remove this iconDOM variable
// This value can be a fixed constant as it doesn't depend on runtime values or arguments.
var iconDOM = ['span', {
  contentEditable: false,
  'data-component': 'icon'
}, ['span', {
  role: 'img',
  'aria-label': 'Decision'
}, ['http://www.w3.org/2000/svg svg', {
  viewBox: "0 0 24 24",
  role: 'presentation',
  width: '24',
  height: '24',
  'data-icon-source': 'legacy'
}, ['http://www.w3.org/2000/svg path', {
  fill: 'currentcolor',
  'fill-rule': 'evenodd',
  d: 'm9.414 8 3.293 3.293c.187.187.293.442.293.707v5a1 1 0 0 1-2 0v-4.586l-3-3V10.5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 0 2zm8.293-1.707a1 1 0 0 1 0 1.414l-2.5 2.5a.997.997 0 0 1-1.414 0 1 1 0 0 1 0-1.414l2.5-2.5a1 1 0 0 1 1.414 0'
}]], ['http://www.w3.org/2000/svg svg', {
  viewBox: "-4 -4 24 24",
  fill: 'none',
  role: 'presentation',
  width: '24',
  height: '24',
  'data-icon-source': 'refreshed'
}, ['http://www.w3.org/2000/svg path', {
  fill: 'currentcolor',
  'fill-rule': 'evenodd',
  d: 'm13.97.97-4.5 4.5 1.06 1.06 4.5-4.5zM3.56 2.5H8V1H1.75a.75.75 0 0 0-.75.75V8h1.5V3.56l4.604 4.604a.5.5 0 0 1 .146.354V15h1.5V8.518a2 2 0 0 0-.586-1.414z'
}]]]];

/**
 * Determine if the decision item node is empty
 *
 * @param node The decision item node
 * @returns true if the decision item is empty and false otherwise
 */
var isDecisionItemEmpty = function isDecisionItemEmpty(node) {
  return node.childCount <= 0;
};

/**
 * Creates a DOM element for the decision icon with an accessible aria label.
 *
 * Generates a decision icon DOM structure with an aria label that changes based on whether
 * the decision item is empty. An empty decision item receives the "undefined" aria label,
 * while non-empty decision items receive the standard "decision" aria label.
 *
 * @param node - The ProseMirror node representing the decision item
 * @param intl - The intl object used to format internationalized messages for the aria label
 * @returns A DOMOutputSpec array representing the icon element with nested SVG graphics
 */
var createIconDOM = function createIconDOM(_ref) {
  var node = _ref.node,
    intl = _ref.intl;
  var ariaLabel = isDecisionItemEmpty(node) ? intl.formatMessage(tasksAndDecisionsMessages.undefinedDecisionAriaLabel) : intl.formatMessage(tasksAndDecisionsMessages.decisionAriaLabel);
  return ['span', {
    contentEditable: false,
    'data-component': 'icon'
  }, ['span', {
    role: 'img',
    'aria-label': ariaLabel
  }, ['http://www.w3.org/2000/svg svg', {
    viewBox: "0 0 24 24",
    role: 'presentation',
    width: '24',
    height: '24',
    'data-icon-source': 'legacy'
  }, ['http://www.w3.org/2000/svg path', {
    fill: 'currentcolor',
    'fill-rule': 'evenodd',
    d: 'm9.414 8 3.293 3.293c.187.187.293.442.293.707v5a1 1 0 0 1-2 0v-4.586l-3-3V10.5a1 1 0 0 1-2 0V7a1 1 0 0 1 1-1h3.5a1 1 0 0 1 0 2zm8.293-1.707a1 1 0 0 1 0 1.414l-2.5 2.5a.997.997 0 0 1-1.414 0 1 1 0 0 1 0-1.414l2.5-2.5a1 1 0 0 1 1.414 0'
  }]], ['http://www.w3.org/2000/svg svg', {
    viewBox: "-4 -4 24 24",
    fill: 'none',
    role: 'presentation',
    width: '24',
    height: '24',
    'data-icon-source': 'refreshed'
  }, ['http://www.w3.org/2000/svg path', {
    fill: 'currentcolor',
    'fill-rule': 'evenodd',
    d: 'm13.97.97-4.5 4.5 1.06 1.06 4.5-4.5zM3.56 2.5H8V1H1.75a.75.75 0 0 0-.75.75V8h1.5V3.56l4.604 4.604a.5.5 0 0 1 .146.354V15h1.5V8.518a2 2 0 0 0-.586-1.414z'
  }]]]];
};
export var decisionItemToDOM = function decisionItemToDOM(node, intl) {
  var contentDomDataAttrs;
  if (expValEquals('editor_a11y_decision_aria_label', 'isEnabled', true)) {
    contentDomDataAttrs = isDecisionItemEmpty(node) ? {
      'data-empty': 'true'
    } : {};
  } else {
    contentDomDataAttrs = node.childCount > 0 ? {} : {
      'data-empty': 'true'
    };
  }
  return ['li', {
    'data-decision-local-id': node.attrs.localId || 'local-decision',
    'data-decision-state': node.attrs.state,
    'data-prosemirror-node-name': 'decisionItem',
    class: 'decisionItemView-content-wrap'
  }, ['div', {
    'data-testid': 'elements-decision-item',
    'data-decision-wrapper': true
  }, expValEquals('editor_a11y_decision_aria_label', 'isEnabled', true) ? createIconDOM({
    node: node,
    intl: intl
  }) : iconDOM,
  // renderPlaceholder
  ['span', {
    'data-testid': 'task-decision-item-placeholder',
    'data-component': 'placeholder',
    contentEditable: false
  }, intl.formatMessage(tasksAndDecisionsMessages.decisionPlaceholder)], ['div', {
    'data-component': 'content'
  }, ['div', _objectSpread({
    class: 'decision-item'
  }, contentDomDataAttrs), 0]]]];
};