@atlaskit/editor-plugin-tasks-and-decisions 2.3.0 → 2.3.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-tasks-and-decisions
 
+## 2.3.2
+
+### Patch Changes
+
+- [#127170](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127170)
+  [`4599c24981ca4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4599c24981ca4) -
+  [ux] Implement and align lazy node view fallback with the node view for decision node.
+
+## 2.3.1
+
+### Patch Changes
+
+- [#124164](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/124164)
+  [`5a96af255a094`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a96af255a094) -
+  Enabling lazy node view loading behind a feature flag for tasks for performance.
+- Updated dependencies
+
 ## 2.3.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/decision-lazy-node-view.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyDecisionView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _decisionItem = require("./decisionItem");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyDecisionView = exports.lazyDecisionView = function lazyDecisionView(portalProviderAPI, eventDispatcher, api) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _decisionItem.decisionItemNodeView)(portalProviderAPI, eventDispatcher, api);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'decisionItem',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_decision-item-nodeview" */
+        './decisionItem'));
+      }).then(function (_ref) {
+        var decisionItemNodeView = _ref.decisionItemNodeView;
+        return decisionItemNodeView(portalProviderAPI, eventDispatcher, api);
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/nodeviews/task-lazy-node-view.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazyTaskView = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _taskItem = require("./taskItem");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2.default)(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var lazyTaskView = exports.lazyTaskView = function lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api) {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return (0, _taskItem.taskItemNodeViewFactory)(portalProviderAPI, eventDispatcher, providerFactory, api);
+  }
+  return (0, _lazyNodeView.withLazyLoading)({
+    nodeName: 'taskItem',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = Promise.resolve().then(function () {
+        return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_task-item-nodeview" */
+        './taskItem'));
+      }).then(function (_ref) {
+        var taskItemNodeViewFactory = _ref.taskItemNodeViewFactory;
+        return function (node, view, getPos) {
+          return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/cjs/plugin.js

@@ -5,32 +5,55 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tasksAndDecisionsPlugin = void 0;
+exports.tasksAndDecisionsPlugin = exports.taskItemSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _indentation = require("@atlaskit/editor-common/indentation");
 var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("./commands");
 var _helpers = require("./pm-plugins/helpers");
 var _inputRules = _interopRequireDefault(require("./pm-plugins/input-rules"));
 var _keymaps = _interopRequireWildcard(require("./pm-plugins/keymaps"));
 var _main = require("./pm-plugins/main");
 var _pluginKey = require("./pm-plugins/plugin-key");
+var _decisionItem = require("./toDOM-fixes/decisionItem");
 var _ToolbarDecision = _interopRequireDefault(require("./ui/ToolbarDecision"));
 var _ToolbarTask = _interopRequireDefault(require("./ui/ToolbarTask"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
+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) { (0, _defineProperty2.default)(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; } /**
  * @jsxRuntime classic
  * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var taskDecisionToolbarGroupStyles = (0, _react.css)({
   display: 'flex'
 });
+// @nodeSpecException:toDOM patch
+var taskItemSpecWithFixedToDOM = exports.taskItemSpecWithFixedToDOM = function taskItemSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.taskItem;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.taskItem), {}, {
+    toDOM: function toDOM(node) {
+      var checked = node.attrs.state === 'DONE';
+      var inputAttrs = {
+        type: 'checkbox'
+      };
+      if (checked) {
+        inputAttrs.checked = 'true';
+      }
+      // TODO: Align styling with `@atlaskit/task-decision`
+      return ['div', {
+        style: 'display: flex;'
+      }, ['input', inputAttrs], ['div', 0]];
+    }
+  });
+};
 var addItem = function addItem(insert, listType, schema) {
   return function (_ref) {
     var listLocalId = _ref.listLocalId,
@@ -65,13 +88,13 @@ var tasksAndDecisionsPlugin = exports.tasksAndDecisionsPlugin = function tasksAn
         node: _adfSchema.decisionList
       }, {
         name: 'decisionItem',
-        node: _adfSchema.decisionItem
+        node: (0, _decisionItem.decisionItemSpecWithFixedToDOM)()
       }, {
         name: 'taskList',
         node: _adfSchema.taskList
       }, {
         name: 'taskItem',
-        node: _adfSchema.taskItem
+        node: taskItemSpecWithFixedToDOM()
       }];
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -13,8 +13,8 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _decisionItem = require("../nodeviews/decisionItem");
-var _taskItem = require("../nodeviews/taskItem");
+var _decisionLazyNodeView = require("../nodeviews/decision-lazy-node-view");
+var _taskLazyNodeView = require("../nodeviews/task-lazy-node-view");
 var _helpers = require("./helpers");
 var _pluginKey = require("./plugin-key");
 var _types = require("./types");
@@ -33,8 +33,8 @@ function createPlugin(portalProviderAPI, eventDispatcher, providerFactory, dispa
   return new _safePlugin.SafePlugin({
     props: {
       nodeViews: {
-        taskItem: (0, _taskItem.taskItemNodeViewFactory)(portalProviderAPI, eventDispatcher, providerFactory, api),
-        decisionItem: (0, _decisionItem.decisionItemNodeView)(portalProviderAPI, eventDispatcher, api)
+        taskItem: (0, _taskLazyNodeView.lazyTaskView)(portalProviderAPI, eventDispatcher, providerFactory, api),
+        decisionItem: (0, _decisionLazyNodeView.lazyDecisionView)(portalProviderAPI, eventDispatcher, api)
       },
       handleTextInput: function handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/cjs/toDOM-fixes/decisionItem.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decisionItemSpecWithFixedToDOM = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+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) { (0, _defineProperty2.default)(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; }
+// @nodeSpecException:toDOM patch
+var decisionItemSpecWithFixedToDOM = exports.decisionItemSpecWithFixedToDOM = function decisionItemSpecWithFixedToDOM() {
+  if (!(0, _platformFeatureFlags.fg)('platform_editor_lazy-node-views')) {
+    return _adfSchema.decisionItem;
+  }
+  return _objectSpread(_objectSpread({}, _adfSchema.decisionItem), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        localId = _node$attrs.localId,
+        state = _node$attrs.state;
+      var attrs = {
+        'data-decision-local-id': localId || 'local-decision',
+        'data-decision-state': state,
+        // Styles to match `packages/elements/task-decision/src/components/styles.ts`
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
+          padding: "var(--ds-space-100, 8px)",
+          margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
+          display: 'flex',
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      };
+      return ['li', attrs, ['span', {
+        // Styles to match `packages/elements/task-decision/src/components/DecisionItem.tsx`
+        style: (0, _lazyNodeView.convertToInlineCss)({
+          width: '16px',
+          height: '16px',
+          margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)", " 0 0")
+        })
+      }], ['span', 0]];
+    }
+  });
+};

package/dist/es2019/nodeviews/decision-lazy-node-view.js

@@ -0,0 +1,21 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { decisionItemNodeView } from './decisionItem';
+export const lazyDecisionView = (portalProviderAPI, eventDispatcher, api) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return decisionItemNodeView(portalProviderAPI, eventDispatcher, api);
+  }
+  return withLazyLoading({
+    nodeName: 'decisionItem',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_decision-item-nodeview" */
+      './decisionItem').then(({
+        decisionItemNodeView
+      }) => {
+        return decisionItemNodeView(portalProviderAPI, eventDispatcher, api);
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/nodeviews/task-lazy-node-view.js

@@ -0,0 +1,23 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { taskItemNodeViewFactory } from './taskItem';
+export const lazyTaskView = (portalProviderAPI, eventDispatcher, providerFactory, api) => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api);
+  }
+  return withLazyLoading({
+    nodeName: 'taskItem',
+    getNodeViewOptions: () => {},
+    loader: () => {
+      const result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_task-item-nodeview" */
+      './taskItem').then(({
+        taskItemNodeViewFactory
+      }) => {
+        return (node, view, getPos) => {
+          return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/es2019/plugin.js

@@ -4,22 +4,46 @@
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { decisionItem, decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
+import { decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { MAX_INDENTATION_LEVEL } from '@atlaskit/editor-common/indentation';
 import { toolbarInsertBlockMessages as insertBlockMessages } from '@atlaskit/editor-common/messages';
 import { IconAction, IconDecision } from '@atlaskit/editor-common/quick-insert';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getListTypes, insertTaskDecisionAction, insertTaskDecisionCommand } from './commands';
 import { getCurrentIndentLevel, getTaskItemIndex, isInsideTask } from './pm-plugins/helpers';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymap, { getIndentCommand, getUnindentCommand } from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import { stateKey as taskPluginKey } from './pm-plugins/plugin-key';
+import { decisionItemSpecWithFixedToDOM } from './toDOM-fixes/decisionItem';
 import ToolbarDecision from './ui/ToolbarDecision';
 import ToolbarTask from './ui/ToolbarTask';
 const taskDecisionToolbarGroupStyles = css({
   display: 'flex'
 });
+// @nodeSpecException:toDOM patch
+export const taskItemSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return taskItem;
+  }
+  return {
+    ...taskItem,
+    toDOM: node => {
+      const checked = node.attrs.state === 'DONE';
+      const inputAttrs = {
+        type: 'checkbox'
+      };
+      if (checked) {
+        inputAttrs.checked = 'true';
+      }
+      // TODO: Align styling with `@atlaskit/task-decision`
+      return ['div', {
+        style: 'display: flex;'
+      }, ['input', inputAttrs], ['div', 0]];
+    }
+  };
+};
 const addItem = (insert, listType, schema) => ({
   listLocalId,
   itemLocalId
@@ -55,13 +79,13 @@ export const tasksAndDecisionsPlugin = ({
         node: decisionList
       }, {
         name: 'decisionItem',
-        node: decisionItem
+        node: decisionItemSpecWithFixedToDOM()
       }, {
         name: 'taskList',
         node: taskList
       }, {
         name: 'taskItem',
-        node: taskItem
+        node: taskItemSpecWithFixedToDOM()
       }];
     },
     getSharedState(editorState) {

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

@@ -4,8 +4,8 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler, GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { getStepRange } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { decisionItemNodeView } from '../nodeviews/decisionItem';
-import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
+import { lazyDecisionView } from '../nodeviews/decision-lazy-node-view';
+import { lazyTaskView } from '../nodeviews/task-lazy-node-view';
 import { focusCheckboxAndUpdateSelection, getTaskItemDataAtPos, getTaskItemDataToFocus, removeCheckboxFocus } from './helpers';
 import { stateKey } from './plugin-key';
 import { ACTIONS } from './types';
@@ -20,8 +20,8 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
   return new SafePlugin({
     props: {
       nodeViews: {
-        taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api),
-        decisionItem: decisionItemNodeView(portalProviderAPI, eventDispatcher, api)
+        taskItem: lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api),
+        decisionItem: lazyDecisionView(portalProviderAPI, eventDispatcher, api)
       },
       handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/es2019/toDOM-fixes/decisionItem.js

@@ -0,0 +1,38 @@
+import { decisionItem } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// @nodeSpecException:toDOM patch
+export const decisionItemSpecWithFixedToDOM = () => {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return decisionItem;
+  }
+  return {
+    ...decisionItem,
+    toDOM: node => {
+      const {
+        localId,
+        state
+      } = node.attrs;
+      const attrs = {
+        'data-decision-local-id': localId || 'local-decision',
+        'data-decision-state': state,
+        // Styles to match `packages/elements/task-decision/src/components/styles.ts`
+        style: convertToInlineCss({
+          background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
+          padding: "var(--ds-space-100, 8px)",
+          margin: `${"var(--ds-space-100, 8px)"} 0 0 0`,
+          display: 'flex',
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      };
+      return ['li', attrs, ['span', {
+        // Styles to match `packages/elements/task-decision/src/components/DecisionItem.tsx`
+        style: convertToInlineCss({
+          width: '16px',
+          height: '16px',
+          margin: `${"var(--ds-space-050, 4px)"} ${"var(--ds-space-200, 16px)"} 0 0`
+        })
+      }], ['span', 0]];
+    }
+  };
+};

package/dist/esm/nodeviews/decision-lazy-node-view.js

@@ -0,0 +1,20 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { decisionItemNodeView } from './decisionItem';
+export var lazyDecisionView = function lazyDecisionView(portalProviderAPI, eventDispatcher, api) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return decisionItemNodeView(portalProviderAPI, eventDispatcher, api);
+  }
+  return withLazyLoading({
+    nodeName: 'decisionItem',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_decision-item-nodeview" */
+      './decisionItem').then(function (_ref) {
+        var decisionItemNodeView = _ref.decisionItemNodeView;
+        return decisionItemNodeView(portalProviderAPI, eventDispatcher, api);
+      });
+      return result;
+    }
+  });
+};

package/dist/esm/nodeviews/task-lazy-node-view.js

@@ -0,0 +1,22 @@
+import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { taskItemNodeViewFactory } from './taskItem';
+export var lazyTaskView = function lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api) {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api);
+  }
+  return withLazyLoading({
+    nodeName: 'taskItem',
+    getNodeViewOptions: function getNodeViewOptions() {},
+    loader: function loader() {
+      var result = import( /* webpackChunkName: "@atlaskit-internal_editor-plugin-tasks-and-decisions_task-item-nodeview" */
+      './taskItem').then(function (_ref) {
+        var taskItemNodeViewFactory = _ref.taskItemNodeViewFactory;
+        return function (node, view, getPos) {
+          return taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api)(node, view, getPos);
+        };
+      });
+      return result;
+    }
+  });
+};

package/dist/esm/plugin.js

@@ -1,25 +1,51 @@
+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; }
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { decisionItem, decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
+import { decisionList, taskItem, taskList } from '@atlaskit/adf-schema';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { MAX_INDENTATION_LEVEL } from '@atlaskit/editor-common/indentation';
 import { toolbarInsertBlockMessages as insertBlockMessages } from '@atlaskit/editor-common/messages';
 import { IconAction, IconDecision } from '@atlaskit/editor-common/quick-insert';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getListTypes, insertTaskDecisionAction, insertTaskDecisionCommand } from './commands';
 import { getCurrentIndentLevel, getTaskItemIndex, isInsideTask } from './pm-plugins/helpers';
 import inputRulePlugin from './pm-plugins/input-rules';
 import keymap, { getIndentCommand, getUnindentCommand } from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
 import { stateKey as taskPluginKey } from './pm-plugins/plugin-key';
+import { decisionItemSpecWithFixedToDOM } from './toDOM-fixes/decisionItem';
 import ToolbarDecision from './ui/ToolbarDecision';
 import ToolbarTask from './ui/ToolbarTask';
 var taskDecisionToolbarGroupStyles = css({
   display: 'flex'
 });
+// @nodeSpecException:toDOM patch
+export var taskItemSpecWithFixedToDOM = function taskItemSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return taskItem;
+  }
+  return _objectSpread(_objectSpread({}, taskItem), {}, {
+    toDOM: function toDOM(node) {
+      var checked = node.attrs.state === 'DONE';
+      var inputAttrs = {
+        type: 'checkbox'
+      };
+      if (checked) {
+        inputAttrs.checked = 'true';
+      }
+      // TODO: Align styling with `@atlaskit/task-decision`
+      return ['div', {
+        style: 'display: flex;'
+      }, ['input', inputAttrs], ['div', 0]];
+    }
+  });
+};
 var addItem = function addItem(insert, listType, schema) {
   return function (_ref) {
     var listLocalId = _ref.listLocalId,
@@ -54,13 +80,13 @@ export var tasksAndDecisionsPlugin = function tasksAndDecisionsPlugin(_ref2) {
         node: decisionList
       }, {
         name: 'decisionItem',
-        node: decisionItem
+        node: decisionItemSpecWithFixedToDOM()
       }, {
         name: 'taskList',
         node: taskList
       }, {
         name: 'taskItem',
-        node: taskItem
+        node: taskItemSpecWithFixedToDOM()
       }];
     },
     getSharedState: function getSharedState(editorState) {

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

@@ -9,8 +9,8 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler, GapCursorSelection } from '@atlaskit/editor-common/selection';
 import { getStepRange } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { decisionItemNodeView } from '../nodeviews/decisionItem';
-import { taskItemNodeViewFactory } from '../nodeviews/taskItem';
+import { lazyDecisionView } from '../nodeviews/decision-lazy-node-view';
+import { lazyTaskView } from '../nodeviews/task-lazy-node-view';
 import { focusCheckboxAndUpdateSelection, getTaskItemDataAtPos, getTaskItemDataToFocus, removeCheckboxFocus } from './helpers';
 import { stateKey } from './plugin-key';
 import { ACTIONS } from './types';
@@ -26,8 +26,8 @@ export function createPlugin(portalProviderAPI, eventDispatcher, providerFactory
   return new SafePlugin({
     props: {
       nodeViews: {
-        taskItem: taskItemNodeViewFactory(portalProviderAPI, eventDispatcher, providerFactory, api),
-        decisionItem: decisionItemNodeView(portalProviderAPI, eventDispatcher, api)
+        taskItem: lazyTaskView(portalProviderAPI, eventDispatcher, providerFactory, api),
+        decisionItem: lazyDecisionView(portalProviderAPI, eventDispatcher, api)
       },
       handleTextInput: function handleTextInput(view, from, to, text) {
         // When a decision item is selected and the user starts typing, the entire node

package/dist/esm/toDOM-fixes/decisionItem.js

@@ -0,0 +1,39 @@
+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 { decisionItem } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { fg } from '@atlaskit/platform-feature-flags';
+// @nodeSpecException:toDOM patch
+export var decisionItemSpecWithFixedToDOM = function decisionItemSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return decisionItem;
+  }
+  return _objectSpread(_objectSpread({}, decisionItem), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        localId = _node$attrs.localId,
+        state = _node$attrs.state;
+      var attrs = {
+        'data-decision-local-id': localId || 'local-decision',
+        'data-decision-state': state,
+        // Styles to match `packages/elements/task-decision/src/components/styles.ts`
+        style: convertToInlineCss({
+          background: "var(--ds-background-neutral, rgba(9, 30, 66, 0.04))",
+          padding: "var(--ds-space-100, 8px)",
+          margin: "var(--ds-space-100, 8px)".concat(" 0 0 0"),
+          display: 'flex',
+          borderRadius: "var(--ds-border-radius, 4px)"
+        })
+      };
+      return ['li', attrs, ['span', {
+        // Styles to match `packages/elements/task-decision/src/components/DecisionItem.tsx`
+        style: convertToInlineCss({
+          width: '16px',
+          height: '16px',
+          margin: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)", " 0 0")
+        })
+      }], ['span', 0]];
+    }
+  });
+};

package/dist/types/nodeviews/decision-lazy-node-view.d.ts

@@ -0,0 +1,5 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TasksAndDecisionsPlugin } from '../types';
+export declare const lazyDecisionView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/nodeviews/task-lazy-node-view.d.ts

@@ -0,0 +1,6 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TasksAndDecisionsPlugin } from '../types';
+export declare const lazyTaskView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/plugin.d.ts

@@ -1,2 +1,3 @@
 import type { TasksAndDecisionsPlugin } from './types';
+export declare const taskItemSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
 export declare const tasksAndDecisionsPlugin: TasksAndDecisionsPlugin;

package/dist/types/toDOM-fixes/decisionItem.d.ts

@@ -0,0 +1 @@
+export declare const decisionItemSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/nodeviews/decision-lazy-node-view.d.ts

@@ -0,0 +1,5 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TasksAndDecisionsPlugin } from '../types';
+export declare const lazyDecisionView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types-ts4.5/nodeviews/task-lazy-node-view.d.ts

@@ -0,0 +1,6 @@
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { type PortalProviderAPI } from '@atlaskit/editor-common/src/portal';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { TasksAndDecisionsPlugin } from '../types';
+export declare const lazyTaskView: (portalProviderAPI: PortalProviderAPI, eventDispatcher: EventDispatcher, providerFactory: ProviderFactory, api: ExtractInjectionAPI<TasksAndDecisionsPlugin> | undefined) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types-ts4.5/plugin.d.ts

@@ -1,2 +1,3 @@
 import type { TasksAndDecisionsPlugin } from './types';
+export declare const taskItemSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;
 export declare const tasksAndDecisionsPlugin: TasksAndDecisionsPlugin;

package/dist/types-ts4.5/toDOM-fixes/decisionItem.d.ts

@@ -0,0 +1 @@
+export declare const decisionItemSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-tasks-and-decisions",
-	"version": "2.3.0",
+	"version": "2.3.2",
 	"description": "Tasks and decisions plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -36,15 +36,16 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/analytics-namespaced-context": "^6.10.0",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/editor-common": "^86.8.0",
+		"@atlaskit/editor-common": "^87.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-context-identifier": "^1.2.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.6.0",
 		"@atlaskit/editor-prosemirror": "5.0.1",
-		"@atlaskit/icon": "^22.7.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/prosemirror-input-rules": "^3.2.0",
 		"@atlaskit/task-decision": "^17.10.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -99,6 +100,9 @@
 	"platform-feature-flags": {
 		"react_18_tasks_and_decisions_concurrent_mode": {
 			"type": "boolean"
+		},
+		"platform_editor_lazy-node-views": {
+			"type": "boolean"
 		}
 	}
 }