@atlaskit/editor-plugin-status/dist/es2019/nodeviews/StatusNodeView.js

Status plugin for @atlaskit/editor-core

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import { messages } from '@atlaskit/editor-common/messages/status';
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import { normalizeStatusColorAttr } from '../utils/normalizeStatusColor';
import { statusToDOM } from './statusNodeSpec';

/**
 *
 */
export class StatusNodeView {
  /**
   *
   * @param node
   * @param intl
   * @example
   */
  constructor(node, intl) {
    _defineProperty(this, "box", null);
    _defineProperty(this, "textContainer", null);
    this.node = node;
    this.intl = intl;
    const spec = statusToDOM(node);
    const {
      dom
    } = DOMSerializer.renderSpec(document, spec);
    this.dom = dom;
    this.domElement = dom instanceof HTMLElement ? dom : undefined;
    if (this.domElement) {
      this.box = this.domElement.querySelector('.status-lozenge-span');
      this.textContainer = this.domElement.querySelector('.lozenge-text');
    }
    if (!node.attrs.text) {
      this.setPlaceholder();
    }
  }
  setPlaceholder() {
    if (this.textContainer && this.domElement) {
      this.textContainer.textContent = this.intl.formatMessage(messages.placeholder);
      this.domElement.style.setProperty('opacity', '0.83');
    }
  }

  /**
   *
   * @param node
   * @example
   */
  update(node) {
    if (node.type !== this.node.type) {
      return false;
    }
    const wasEmpty = !this.node.attrs.text;
    const isEmpty = !node.attrs.text;
    if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
      var _this$domElement, _node$attrs$text;
      if (!isExperimentEnabled('platform_editor_improve_inp_batch_2') || !isEmpty) {
        this.textContainer.textContent = node.attrs.text;
      }
      // Also update data-text on outer wrapper for parseDOM extraction when copying
      (_this$domElement = this.domElement) === null || _this$domElement === void 0 ? void 0 : _this$domElement.setAttribute('data-text',
      // Avoid serialising a null text attr as the literal string "null"
      isExperimentEnabled('platform_editor_improve_inp_batch_2') ? (_node$attrs$text = node.attrs.text) !== null && _node$attrs$text !== void 0 ? _node$attrs$text : '' : node.attrs.text);
    }
    if (this.textContainer && node.attrs.style !== this.node.attrs.style && fg('platform-dst-lozenge-tag-badge-visual-uplifts')) {
      this.textContainer.style.textTransform = node.attrs.style !== 'mixedCase' ? 'uppercase' : '';
    }
    if (node.attrs.color !== this.node.attrs.color) {
      var _this$box, _this$domElement2;
      const dataColor = normalizeStatusColorAttr(node.attrs.color);
      (_this$box = this.box) === null || _this$box === void 0 ? void 0 : _this$box.setAttribute('data-color', dataColor);
      // Also update data-color on outer wrapper for parseDOM extraction when copying
      (_this$domElement2 = this.domElement) === null || _this$domElement2 === void 0 ? void 0 : _this$domElement2.setAttribute('data-color', dataColor);
    }
    if (isExperimentEnabled('platform_editor_improve_inp_batch_2')) {
      if (wasEmpty !== isEmpty) {
        if (isEmpty) {
          this.setPlaceholder();
        } else {
          var _this$domElement3;
          (_this$domElement3 = this.domElement) === null || _this$domElement3 === void 0 ? void 0 : _this$domElement3.style.setProperty('opacity', '1');
        }
      }
    } else {
      if (!node.attrs.text) {
        this.setPlaceholder();
      }
      if (node.attrs.text && this.domElement) {
        this.domElement.style.setProperty('opacity', '1');
      }
    }
    this.node = node;
    return true;
  }
}