@atlaskit/editor-plugin-tasks-and-decisions 5.0.3 → 5.0.5

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/editor-plugin-tasks-and-decisions
 
+## 5.0.5
+
+### Patch Changes
+
+- [#135686](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135686)
+  [`fad3e236fffd3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fad3e236fffd3) -
+  migrate decision item node to vanillajs
+- Updated dependencies
+
+## 5.0.4
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 5.0.3
 
 ### Patch Changes

package/dist/cjs/nodeviews/DecisionItemVanilla.js

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DecisionItemVanilla = 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 _monitoring = require("@atlaskit/editor-common/monitoring");
+var _model = require("@atlaskit/editor-prosemirror/model");
+var _decisionItemNodeSpec = require("./decisionItemNodeSpec");
+var DecisionItemVanilla = exports.DecisionItemVanilla = /*#__PURE__*/function () {
+  function DecisionItemVanilla(node, intl) {
+    (0, _classCallCheck2.default)(this, DecisionItemVanilla);
+    (0, _defineProperty2.default)(this, "dom", document.createElement('div'));
+    (0, _defineProperty2.default)(this, "hasChildren", undefined);
+    try {
+      var spec = (0, _decisionItemNodeSpec.decisionItemToDOM)(node, intl);
+      var _DOMSerializer$render = _model.DOMSerializer.renderSpec(document, spec),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer did not return an HTMLElement');
+      }
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.updateHasChildren(node);
+    } catch (caughtError) {
+      var error = caughtError instanceof Error ? caughtError : new Error('Unknown error on DecisionItemVanilla Node View constructor - ' + String(caughtError));
+      this.logError(error);
+      this.renderFallback();
+    }
+  }
+  return (0, _createClass2.default)(DecisionItemVanilla, [{
+    key: "logError",
+    value: function logError(error) {
+      void (0, _monitoring.logException)(error, {
+        location: 'editor-plugin-tasks-and-decisions/DecisionItemVanilla'
+      });
+    }
+  }, {
+    key: "updateHasChildren",
+    value: function updateHasChildren(node) {
+      var currentlyHasChildren = node.childCount > 0;
+      if (currentlyHasChildren !== this.hasChildren) {
+        var _this$contentDOM;
+        this.hasChildren = currentlyHasChildren;
+        (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 || _this$contentDOM.toggleAttribute('data-empty', !currentlyHasChildren);
+      }
+      return this.hasChildren;
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      this.updateHasChildren(node);
+      return true;
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallback = document.createElement('div');
+      fallback.setAttribute('data-decision-item-fallback', 'true');
+      this.dom.appendChild(fallback);
+      this.contentDOM = fallback;
+    }
+  }]);
+}();

package/dist/cjs/nodeviews/decisionItemNodeSpec.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decisionItemToDOM = void 0;
+var _messages = require("@atlaskit/editor-common/messages");
+// 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'
+}]]]];
+
+// This value can be a fixed constant as it doesn't depend on runtime values or arguments.
+var contentDOM = ['div', {
+  'data-component': 'content'
+}, ['div', {
+  class: 'decision-item'
+}, 0]];
+var decisionItemToDOM = exports.decisionItemToDOM = function decisionItemToDOM(node, intl) {
+  return ['li', {
+    'data-decision-local-id': node.attrs.localId || 'local-decision',
+    'data-decision-state': node.attrs.state,
+    'data-prosemirror-node-view-type': 'vanilla',
+    'data-prosemirror-node-name': 'decisionItem',
+    class: 'decisionItemView-content-wrap'
+  }, ['div', {
+    'data-testid': 'elements-decision-item',
+    'data-decision-wrapper': true
+  }, iconDOM,
+  // renderPlaceholder
+  ['span', {
+    'data-testid': 'task-decision-item-placeholder',
+    'data-component': 'placeholder',
+    contentEditable: false
+  }, intl.formatMessage(_messages.tasksAndDecisionsMessages.decisionPlaceholder)], contentDOM]];
+};

package/dist/cjs/pm-plugins/main.js

@@ -14,7 +14,9 @@ var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _decisionLazyNodeView = require("../nodeviews/decision-lazy-node-view");
+var _DecisionItemVanilla = require("../nodeviews/DecisionItemVanilla");
 var _taskLazyNodeView = require("../nodeviews/task-lazy-node-view");
 var _actions = require("./actions");
 var _helpers = require("./helpers");
@@ -31,17 +33,24 @@ function nodesBetweenChanged(tr, f, startPos) {
   }
   tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
 }
-function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api) {
-  var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var hasEditPermission = arguments.length > 6 ? arguments[6] : undefined;
-  var hasRequestedEditPermission = arguments.length > 7 ? arguments[7] : undefined;
-  var requestToEditContent = arguments.length > 8 ? arguments[8] : undefined;
-  var taskPlaceholder = arguments.length > 9 ? arguments[9] : undefined;
+function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl) {
+  var useLongPressSelection = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var hasEditPermission = arguments.length > 7 ? arguments[7] : undefined;
+  var hasRequestedEditPermission = arguments.length > 8 ? arguments[8] : undefined;
+  var requestToEditContent = arguments.length > 9 ? arguments[9] : undefined;
+  var taskPlaceholder = arguments.length > 10 ? arguments[10] : undefined;
   return new _safePlugin.SafePlugin({
     props: {
       nodeViews: {
         taskItem: (0, _taskLazyNodeView.lazyTaskView)(portalProviderAPI, eventDispatcher, providerFactory, api, taskPlaceholder),
-        decisionItem: (0, _decisionLazyNodeView.lazyDecisionView)(portalProviderAPI, eventDispatcher, api)
+        decisionItem: function (node, view, getPos, decorations, innerDecorations) {
+          if ((0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new _DecisionItemVanilla.DecisionItemVanilla(node, getIntl());
+          }
+          return (0, _decisionLazyNodeView.lazyDecisionView)(portalProviderAPI, eventDispatcher, api)(node, view, getPos, decorations, innerDecorations);
+        }
       },
       handleTextInput: function handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/cjs/tasksAndDecisionsPlugin.js

@@ -243,8 +243,9 @@ var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAn
           var portalProviderAPI = _ref7.portalProviderAPI,
             providerFactory = _ref7.providerFactory,
             eventDispatcher = _ref7.eventDispatcher,
-            dispatch = _ref7.dispatch;
-          return (0, _main.createPlugin)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
+            dispatch = _ref7.dispatch,
+            getIntl = _ref7.getIntl;
+          return (0, _main.createPlugin)(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
         }
       }, {
         name: 'tasksAndDecisionsInputRule',

package/dist/es2019/nodeviews/DecisionItemVanilla.js

@@ -0,0 +1,51 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { decisionItemToDOM } from './decisionItemNodeSpec';
+export class DecisionItemVanilla {
+  logError(error) {
+    void logException(error, {
+      location: 'editor-plugin-tasks-and-decisions/DecisionItemVanilla'
+    });
+  }
+  updateHasChildren(node) {
+    const currentlyHasChildren = node.childCount > 0;
+    if (currentlyHasChildren !== this.hasChildren) {
+      var _this$contentDOM;
+      this.hasChildren = currentlyHasChildren;
+      (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 ? void 0 : _this$contentDOM.toggleAttribute('data-empty', !currentlyHasChildren);
+    }
+    return this.hasChildren;
+  }
+  constructor(node, intl) {
+    _defineProperty(this, "dom", document.createElement('div'));
+    _defineProperty(this, "hasChildren", undefined);
+    try {
+      const spec = decisionItemToDOM(node, intl);
+      const {
+        dom,
+        contentDOM
+      } = DOMSerializer.renderSpec(document, spec);
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer did not return an HTMLElement');
+      }
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.updateHasChildren(node);
+    } catch (caughtError) {
+      const error = caughtError instanceof Error ? caughtError : new Error('Unknown error on DecisionItemVanilla Node View constructor - ' + String(caughtError));
+      this.logError(error);
+      this.renderFallback();
+    }
+  }
+  update(node) {
+    this.updateHasChildren(node);
+    return true;
+  }
+  renderFallback() {
+    const fallback = document.createElement('div');
+    fallback.setAttribute('data-decision-item-fallback', 'true');
+    this.dom.appendChild(fallback);
+    this.contentDOM = fallback;
+  }
+}

package/dist/es2019/nodeviews/decisionItemNodeSpec.js

@@ -0,0 +1,55 @@
+import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
+// This value can be a fixed constant as it doesn't depend on runtime values or arguments.
+const 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'
+}]]]];
+
+// This value can be a fixed constant as it doesn't depend on runtime values or arguments.
+const contentDOM = ['div', {
+  'data-component': 'content'
+}, ['div', {
+  class: 'decision-item'
+}, 0]];
+export const decisionItemToDOM = (node, intl) => {
+  return ['li', {
+    'data-decision-local-id': node.attrs.localId || 'local-decision',
+    'data-decision-state': node.attrs.state,
+    'data-prosemirror-node-view-type': 'vanilla',
+    'data-prosemirror-node-name': 'decisionItem',
+    class: 'decisionItemView-content-wrap'
+  }, ['div', {
+    'data-testid': 'elements-decision-item',
+    'data-decision-wrapper': true
+  }, iconDOM,
+  // renderPlaceholder
+  ['span', {
+    'data-testid': 'task-decision-item-placeholder',
+    'data-component': 'placeholder',
+    contentEditable: false
+  }, intl.formatMessage(tasksAndDecisionsMessages.decisionPlaceholder)], contentDOM]];
+};

package/dist/es2019/pm-plugins/main.js

@@ -5,7 +5,9 @@ import { createSelectionClickHandler, GapCursorSelection } from '@atlaskit/edito
 import { getStepRange } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { lazyDecisionView } from '../nodeviews/decision-lazy-node-view';
+import { DecisionItemVanilla } from '../nodeviews/DecisionItemVanilla';
 import { lazyTaskView } from '../nodeviews/task-lazy-node-view';
 import { focusTaskDecision, setProvider } from './actions';
 import { focusCheckboxAndUpdateSelection, getTaskItemDataAtPos, getTaskItemDataToFocus, removeCheckboxFocus } from './helpers';
@@ -19,12 +21,19 @@ function nodesBetweenChanged(tr, f, startPos) {
   }
   tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
 }
-export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection = false, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder) {
+export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl, useLongPressSelection = false, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder) {
   return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api, taskPlaceholder),
-        decisionItem: lazyDecisionView(portalProviderAPI, eventDispatcher, api)
+        decisionItem: (node, view, getPos, decorations, innerDecorations) => {
+          if (editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new DecisionItemVanilla(node, getIntl());
+          }
+          return lazyDecisionView(portalProviderAPI, eventDispatcher, api)(node, view, getPos, decorations, innerDecorations);
+        }
       },
       handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/es2019/tasksAndDecisionsPlugin.js

@@ -203,9 +203,10 @@ export const tasksAndDecisionsPlugin = ({
           portalProviderAPI,
           providerFactory,
           eventDispatcher,
-          dispatch
+          dispatch,
+          getIntl
         }) => {
-          return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
+          return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
         }
       }, {
         name: 'tasksAndDecisionsInputRule',

package/dist/esm/nodeviews/DecisionItemVanilla.js

@@ -0,0 +1,62 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { logException } from '@atlaskit/editor-common/monitoring';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { decisionItemToDOM } from './decisionItemNodeSpec';
+export var DecisionItemVanilla = /*#__PURE__*/function () {
+  function DecisionItemVanilla(node, intl) {
+    _classCallCheck(this, DecisionItemVanilla);
+    _defineProperty(this, "dom", document.createElement('div'));
+    _defineProperty(this, "hasChildren", undefined);
+    try {
+      var spec = decisionItemToDOM(node, intl);
+      var _DOMSerializer$render = DOMSerializer.renderSpec(document, spec),
+        dom = _DOMSerializer$render.dom,
+        contentDOM = _DOMSerializer$render.contentDOM;
+      if (!(dom instanceof HTMLElement)) {
+        throw new Error('DOMSerializer did not return an HTMLElement');
+      }
+      this.dom = dom;
+      this.contentDOM = contentDOM;
+      this.updateHasChildren(node);
+    } catch (caughtError) {
+      var error = caughtError instanceof Error ? caughtError : new Error('Unknown error on DecisionItemVanilla Node View constructor - ' + String(caughtError));
+      this.logError(error);
+      this.renderFallback();
+    }
+  }
+  return _createClass(DecisionItemVanilla, [{
+    key: "logError",
+    value: function logError(error) {
+      void logException(error, {
+        location: 'editor-plugin-tasks-and-decisions/DecisionItemVanilla'
+      });
+    }
+  }, {
+    key: "updateHasChildren",
+    value: function updateHasChildren(node) {
+      var currentlyHasChildren = node.childCount > 0;
+      if (currentlyHasChildren !== this.hasChildren) {
+        var _this$contentDOM;
+        this.hasChildren = currentlyHasChildren;
+        (_this$contentDOM = this.contentDOM) === null || _this$contentDOM === void 0 || _this$contentDOM.toggleAttribute('data-empty', !currentlyHasChildren);
+      }
+      return this.hasChildren;
+    }
+  }, {
+    key: "update",
+    value: function update(node) {
+      this.updateHasChildren(node);
+      return true;
+    }
+  }, {
+    key: "renderFallback",
+    value: function renderFallback() {
+      var fallback = document.createElement('div');
+      fallback.setAttribute('data-decision-item-fallback', 'true');
+      this.dom.appendChild(fallback);
+      this.contentDOM = fallback;
+    }
+  }]);
+}();

package/dist/esm/nodeviews/decisionItemNodeSpec.js

@@ -0,0 +1,55 @@
+import { tasksAndDecisionsMessages } from '@atlaskit/editor-common/messages';
+// 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'
+}]]]];
+
+// This value can be a fixed constant as it doesn't depend on runtime values or arguments.
+var contentDOM = ['div', {
+  'data-component': 'content'
+}, ['div', {
+  class: 'decision-item'
+}, 0]];
+export var decisionItemToDOM = function decisionItemToDOM(node, intl) {
+  return ['li', {
+    'data-decision-local-id': node.attrs.localId || 'local-decision',
+    'data-decision-state': node.attrs.state,
+    'data-prosemirror-node-view-type': 'vanilla',
+    'data-prosemirror-node-name': 'decisionItem',
+    class: 'decisionItemView-content-wrap'
+  }, ['div', {
+    'data-testid': 'elements-decision-item',
+    'data-decision-wrapper': true
+  }, iconDOM,
+  // renderPlaceholder
+  ['span', {
+    'data-testid': 'task-decision-item-placeholder',
+    'data-component': 'placeholder',
+    contentEditable: false
+  }, intl.formatMessage(tasksAndDecisionsMessages.decisionPlaceholder)], contentDOM]];
+};

package/dist/esm/pm-plugins/main.js

@@ -10,7 +10,9 @@ import { createSelectionClickHandler, GapCursorSelection } from '@atlaskit/edito
 import { getStepRange } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { lazyDecisionView } from '../nodeviews/decision-lazy-node-view';
+import { DecisionItemVanilla } from '../nodeviews/DecisionItemVanilla';
 import { lazyTaskView } from '../nodeviews/task-lazy-node-view';
 import { focusTaskDecision, setProvider } from './actions';
 import { focusCheckboxAndUpdateSelection, getTaskItemDataAtPos, getTaskItemDataToFocus, removeCheckboxFocus } from './helpers';
@@ -24,17 +26,24 @@ function nodesBetweenChanged(tr, f, startPos) {
   }
   tr.doc.nodesBetween(stepRange.from, stepRange.to, f, startPos);
 }
-export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api) {
-  var useLongPressSelection = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
-  var hasEditPermission = arguments.length > 6 ? arguments[6] : undefined;
-  var hasRequestedEditPermission = arguments.length > 7 ? arguments[7] : undefined;
-  var requestToEditContent = arguments.length > 8 ? arguments[8] : undefined;
-  var taskPlaceholder = arguments.length > 9 ? arguments[9] : undefined;
+export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl) {
+  var useLongPressSelection = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
+  var hasEditPermission = arguments.length > 7 ? arguments[7] : undefined;
+  var hasRequestedEditPermission = arguments.length > 8 ? arguments[8] : undefined;
+  var requestToEditContent = arguments.length > 9 ? arguments[9] : undefined;
+  var taskPlaceholder = arguments.length > 10 ? arguments[10] : undefined;
   return new SafePlugin({
     props: {
       nodeViews: {
         taskItem: lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api, taskPlaceholder),
-        decisionItem: lazyDecisionView(portalProviderAPI, eventDispatcher, api)
+        decisionItem: function (node, view, getPos, decorations, innerDecorations) {
+          if (editorExperiment('platform_editor_vanilla_dom', true, {
+            exposure: true
+          })) {
+            return new DecisionItemVanilla(node, getIntl());
+          }
+          return lazyDecisionView(portalProviderAPI, eventDispatcher, api)(node, view, getPos, decorations, innerDecorations);
+        }
       },
       handleTextInput: function handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/esm/tasksAndDecisionsPlugin.js

@@ -234,8 +234,9 @@ export var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
           var portalProviderAPI = _ref7.portalProviderAPI,
             providerFactory = _ref7.providerFactory,
             eventDispatcher = _ref7.eventDispatcher,
-            dispatch = _ref7.dispatch;
-          return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
+            dispatch = _ref7.dispatch,
+            getIntl = _ref7.getIntl;
+          return createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispatch, api, getIntl, useLongPressSelection, hasEditPermission, hasRequestedEditPermission, requestToEditContent, taskPlaceholder);
         }
       }, {
         name: 'tasksAndDecisionsInputRule',

package/dist/types/nodeviews/DecisionItemVanilla.d.ts

@@ -0,0 +1,13 @@
+import { IntlShape } from 'react-intl-next';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class DecisionItemVanilla implements NodeView {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    private hasChildren;
+    private logError;
+    private updateHasChildren;
+    constructor(node: PMNode, intl: IntlShape);
+    update(node: PMNode): boolean;
+    private renderFallback;
+}

package/dist/types/nodeviews/decisionItemNodeSpec.d.ts

@@ -0,0 +1,47 @@
+import { IntlShape } from 'react-intl-next';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const decisionItemToDOM: (node: PMNode, intl: IntlShape) => [string, {
+    'data-decision-local-id': any;
+    'data-decision-state': any;
+    'data-prosemirror-node-view-type': string;
+    'data-prosemirror-node-name': string;
+    class: string;
+}, (string | [string, {
+    contentEditable: boolean;
+    'data-component': string;
+}, (string | {
+    role: string;
+    'aria-label': string;
+} | (string | {
+    viewBox: string;
+    role: string;
+    width: string;
+    height: string;
+    'data-icon-source': string;
+} | (string | {
+    fill: string;
+    'fill-rule': string;
+    d: string;
+})[])[] | (string | {
+    viewBox: string;
+    fill: string;
+    role: string;
+    width: string;
+    height: string;
+    'data-icon-source': string;
+} | (string | {
+    fill: string;
+    'fill-rule': string;
+    d: string;
+})[])[])[]] | [string, {
+    'data-component': string;
+}, (string | number | {
+    class: string;
+})[]] | {
+    'data-testid': string;
+    'data-decision-wrapper': boolean;
+} | (string | {
+    'data-testid': string;
+    'data-component': string;
+    contentEditable: boolean;
+})[])[]];

package/dist/types/pm-plugins/main.d.ts

@@ -1,3 +1,4 @@
+import { IntlShape } from 'react-intl-next';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -5,4 +6,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { TasksAndDecisionsPlugin } from '../tasksAndDecisionsPluginType';
 import type { TaskDecisionPluginState } from '../types';
-export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean, hasRequestedEditPermission?: boolean, requestToEditContent?: () => void, taskPlaceholder?: string): SafePlugin<TaskDecisionPluginState>;
+export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, getIntl: () => IntlShape, useLongPressSelection?: boolean, hasEditPermission?: boolean, hasRequestedEditPermission?: boolean, requestToEditContent?: () => void, taskPlaceholder?: string): SafePlugin<TaskDecisionPluginState>;

package/dist/types-ts4.5/nodeviews/DecisionItemVanilla.d.ts

@@ -0,0 +1,13 @@
+import { IntlShape } from 'react-intl-next';
+import { type Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import { NodeView } from '@atlaskit/editor-prosemirror/view';
+export declare class DecisionItemVanilla implements NodeView {
+    dom: HTMLElement;
+    contentDOM?: HTMLElement;
+    private hasChildren;
+    private logError;
+    private updateHasChildren;
+    constructor(node: PMNode, intl: IntlShape);
+    update(node: PMNode): boolean;
+    private renderFallback;
+}

package/dist/types-ts4.5/nodeviews/decisionItemNodeSpec.d.ts

@@ -0,0 +1,59 @@
+import { IntlShape } from 'react-intl-next';
+import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+export declare const decisionItemToDOM: (node: PMNode, intl: IntlShape) => [
+    string,
+    {
+        'data-decision-local-id': any;
+        'data-decision-state': any;
+        'data-prosemirror-node-view-type': string;
+        'data-prosemirror-node-name': string;
+        class: string;
+    },
+    (string | [
+        string,
+        {
+            contentEditable: boolean;
+            'data-component': string;
+        },
+        (string | {
+            role: string;
+            'aria-label': string;
+        } | (string | {
+            viewBox: string;
+            role: string;
+            width: string;
+            height: string;
+            'data-icon-source': string;
+        } | (string | {
+            fill: string;
+            'fill-rule': string;
+            d: string;
+        })[])[] | (string | {
+            viewBox: string;
+            fill: string;
+            role: string;
+            width: string;
+            height: string;
+            'data-icon-source': string;
+        } | (string | {
+            fill: string;
+            'fill-rule': string;
+            d: string;
+        })[])[])[]
+    ] | [
+        string,
+        {
+            'data-component': string;
+        },
+        (string | number | {
+            class: string;
+        })[]
+    ] | {
+        'data-testid': string;
+        'data-decision-wrapper': boolean;
+    } | (string | {
+        'data-testid': string;
+        'data-component': string;
+        contentEditable: boolean;
+    })[])[]
+];

package/dist/types-ts4.5/pm-plugins/main.d.ts

@@ -1,3 +1,4 @@
+import { IntlShape } from 'react-intl-next';
 import type { Dispatch, EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
 import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
 import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
@@ -5,4 +6,4 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { TasksAndDecisionsPlugin } from '../tasksAndDecisionsPluginType';
 import type { TaskDecisionPluginState } from '../types';
-export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, useLongPressSelection?: boolean, hasEditPermission?: boolean, hasRequestedEditPermission?: boolean, requestToEditContent?: () => void, taskPlaceholder?: string): SafePlugin<TaskDecisionPluginState>;
+export declare function createPlugin(portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, dispatch: Dispatch, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined, getIntl: () => IntlShape, useLongPressSelection?: boolean, hasEditPermission?: boolean, hasRequestedEditPermission?: boolean, requestToEditContent?: () => void, taskPlaceholder?: string): SafePlugin<TaskDecisionPluginState>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-tasks-and-decisions",
-	"version": "5.0.3",
+	"version": "5.0.5",
 	"description": "Tasks and decisions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,17 +37,17 @@
 		"@atlaskit/analytics-namespaced-context": "^7.0.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/css": "^0.10.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/heading": "^5.1.0",
+		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/icon": "^25.5.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/popup": "^3.0.0",
-		"@atlaskit/primitives": "^14.3.0",
+		"@atlaskit/popup": "^4.0.0",
+		"@atlaskit/primitives": "^14.4.0",
 		"@atlaskit/prosemirror-input-rules": "^3.3.0",
 		"@atlaskit/task-decision": "^19.1.0",
 		"@atlaskit/tmp-editor-statsig": "^4.6.0",