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

Status plugin for @atlaskit/editor-core

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.StatusNodeView = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _status = require("@atlaskit/editor-common/messages/status");
var _model = require("@atlaskit/editor-prosemirror/model");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _normalizeStatusColor = require("../utils/normalizeStatusColor");
var _statusNodeSpec = require("./statusNodeSpec");
/**
 *
 */
var StatusNodeView = exports.StatusNodeView = /*#__PURE__*/function () {
  /**
   *
   * @param node
   * @param intl
   * @example
   */
  function StatusNodeView(node, intl) {
    (0, _classCallCheck2.default)(this, StatusNodeView);
    (0, _defineProperty2.default)(this, "box", null);
    (0, _defineProperty2.default)(this, "textContainer", null);
    this.node = node;
    this.intl = intl;
    var spec = (0, _statusNodeSpec.statusToDOM)(node);
    var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
      dom = _DOMSerializer$render.dom;
    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();
    }
  }
  return (0, _createClass2.default)(StatusNodeView, [{
    key: "setPlaceholder",
    value: function setPlaceholder() {
      if (this.textContainer && this.domElement) {
        this.textContainer.textContent = this.intl.formatMessage(_status.messages.placeholder);
        this.domElement.style.setProperty('opacity', '0.83');
      }
    }

    /**
     *
     * @param node
     * @example
     */
  }, {
    key: "update",
    value: function update(node) {
      if (node.type !== this.node.type) {
        return false;
      }
      var wasEmpty = !this.node.attrs.text;
      var isEmpty = !node.attrs.text;
      if (this.textContainer && node.attrs.text !== this.node.attrs.text) {
        var _this$domElement, _node$attrs$text;
        if (!(0, _isExperimentEnabled.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 || _this$domElement.setAttribute('data-text',
        // Avoid serialising a null text attr as the literal string "null"
        (0, _isExperimentEnabled.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 && (0, _fg.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;
        var dataColor = (0, _normalizeStatusColor.normalizeStatusColorAttr)(node.attrs.color);
        (_this$box = this.box) === null || _this$box === 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 || _this$domElement2.setAttribute('data-color', dataColor);
      }
      if ((0, _isExperimentEnabled.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 || _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;
    }
  }]);
}();