@atlaskit/editor-plugin-tasks-and-decisions 0.1.0 → 0.2.1

package/dist/es2019/ui/Task/index.js

@@ -0,0 +1,55 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { PureComponent } from 'react';
+import { defineMessages, injectIntl } from 'react-intl-next';
+import { ProviderFactory, WithProviders } from '@atlaskit/editor-common/provider-factory';
+import TaskItemWithProviders from './task-item-with-providers';
+const messages = defineMessages({
+  placeholder: {
+    id: 'fabric.editor.taskPlaceholder',
+    defaultMessage: "Type your action, use '@' to assign to someone.",
+    description: 'Placeholder description for an empty action/task in the editor'
+  }
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class TaskItem extends PureComponent {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "renderWithProvider", providers => {
+      const {
+        providers: _providerFactory,
+        intl: {
+          formatMessage
+        },
+        ...otherProps
+      } = this.props;
+      const {
+        taskDecisionProvider,
+        contextIdentifierProvider
+      } = providers;
+      const placeholder = formatMessage(messages.placeholder);
+      return /*#__PURE__*/React.createElement(TaskItemWithProviders, _extends({}, otherProps, {
+        placeholder: placeholder,
+        taskDecisionProvider: taskDecisionProvider,
+        contextIdentifierProvider: contextIdentifierProvider
+      }));
+    });
+    this.providerFactory = props.providers || new ProviderFactory();
+  }
+  componentWillUnmount() {
+    if (!this.props.providers) {
+      // new ProviderFactory is created if no `providers` has been set
+      // in this case when component is unmounted it's safe to destroy this providerFactory
+      this.providerFactory.destroy();
+    }
+  }
+  render() {
+    return /*#__PURE__*/React.createElement(WithProviders, {
+      providers: ['taskDecisionProvider', 'contextIdentifierProvider'],
+      providerFactory: this.providerFactory,
+      renderNode: this.renderWithProvider
+    });
+  }
+}
+_defineProperty(TaskItem, "displayName", 'TaskItem');
+export default injectIntl(TaskItem);

package/dist/es2019/ui/Task/task-item-with-providers.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import React, { Component } from 'react';
+import { FabricElementsAnalyticsContext } from '@atlaskit/analytics-namespaced-context';
+import { ResourcedTaskItem } from '@atlaskit/task-decision';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export default class TaskItemWithProviders extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      resolvedContextProvider: undefined
+    });
+    // Storing the mounted state is an anti-pattern, however the asynchronous state
+    // updates via `updateContextIdentifierProvider` means we may be dismounted before
+    // it receives a response.
+    // Since we can't cancel the Promise we store the mounted state to avoid state
+    // updates when no longer suitable.
+    _defineProperty(this, "mounted", false);
+  }
+  UNSAFE_componentWillMount() {
+    this.mounted = true;
+    this.updateContextIdentifierProvider(this.props);
+  }
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (nextProps.contextIdentifierProvider !== this.props.contextIdentifierProvider) {
+      this.updateContextIdentifierProvider(nextProps);
+    }
+  }
+  async updateContextIdentifierProvider(props) {
+    if (props.contextIdentifierProvider) {
+      try {
+        const resolvedContextProvider = await props.contextIdentifierProvider;
+        if (this.mounted) {
+          this.setState({
+            resolvedContextProvider
+          });
+        }
+      } catch (err) {
+        if (this.mounted) {
+          this.setState({
+            resolvedContextProvider: undefined
+          });
+        }
+      }
+    } else {
+      this.setState({
+        resolvedContextProvider: undefined
+      });
+    }
+  }
+  render() {
+    const {
+      contextIdentifierProvider,
+      ...otherProps
+    } = this.props;
+    const {
+      objectId
+    } = this.state.resolvedContextProvider || {};
+    const userContext = objectId ? 'edit' : 'new';
+    return /*#__PURE__*/React.createElement(FabricElementsAnalyticsContext, {
+      data: {
+        userContext
+      }
+    }, /*#__PURE__*/React.createElement(ResourcedTaskItem, _extends({}, otherProps, {
+      objectAri: objectId
+    })));
+  }
+}
+_defineProperty(TaskItemWithProviders, "displayName", 'TaskItemWithProviders');

package/dist/es2019/ui/ToolbarDecision/index.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
+import { insertTaskDecisionCommand } from '../../commands';
+const ToolbarDecision = ({
+  isDisabled,
+  isReducedSpacing,
+  intl: {
+    formatMessage
+  },
+  editorView,
+  editorAPI
+}) => {
+  const label = formatMessage(messages.decision);
+  const handleInsertDecision = () => {
+    var _editorAPI$analytics;
+    if (!editorView) {
+      return false;
+    }
+    insertTaskDecisionCommand(editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions)('decisionList')(editorView.state, editorView.dispatch);
+    return true;
+  };
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.DECISION_LIST,
+    onClick: handleInsertDecision,
+    disabled: isDisabled,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    title: `${label} <>`,
+    "aria-keyshortcuts": "Shift+, Shift+. space",
+    iconBefore: /*#__PURE__*/React.createElement(DecisionIcon, {
+      label: label
+    })
+  });
+};
+export default injectIntl(ToolbarDecision);

package/dist/es2019/ui/ToolbarTask/index.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import { injectIntl } from 'react-intl-next';
+import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
+import { TOOLBAR_BUTTON, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import TaskIcon from '@atlaskit/icon/glyph/editor/task';
+import { insertTaskDecisionCommand } from '../../commands';
+const ToolbarTask = ({
+  isDisabled,
+  isReducedSpacing,
+  intl: {
+    formatMessage
+  },
+  editorAPI,
+  editorView
+}) => {
+  const label = formatMessage(messages.action);
+  const handleInsertTask = () => {
+    var _editorAPI$analytics;
+    if (!editorView) {
+      return false;
+    }
+    insertTaskDecisionCommand(editorAPI === null || editorAPI === void 0 ? void 0 : (_editorAPI$analytics = editorAPI.analytics) === null || _editorAPI$analytics === void 0 ? void 0 : _editorAPI$analytics.actions)('taskList')(editorView.state, editorView.dispatch);
+    return true;
+  };
+  return /*#__PURE__*/React.createElement(ToolbarButton, {
+    buttonId: TOOLBAR_BUTTON.TASK_LIST,
+    onClick: handleInsertTask,
+    disabled: isDisabled,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    title: `${label} []`,
+    iconBefore: /*#__PURE__*/React.createElement(TaskIcon, {
+      label: label
+    })
+  });
+};
+export default injectIntl(ToolbarTask);

package/dist/es2019/utils.js

@@ -0,0 +1,32 @@
+import { transformSliceToDecisionList } from '@atlaskit/editor-common/transforms';
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+export { transformSliceToDecisionList };
+function isTaskListNode(node) {
+  return Boolean(node && node.type && 'taskList' === node.type.name);
+}
+const resolvePositionToStartOfTaskItem = $pos => {
+  const fromRange = $pos.blockRange($pos, isTaskListNode);
+  const fromPosition = fromRange && $pos.textOffset === 0 && fromRange.end - 1 === $pos.pos ? Selection.near($pos.doc.resolve(fromRange.end + 1), 1).$from : $pos;
+  return fromPosition;
+};
+const resolvePositionToEndOfTaskItem = $pos => {
+  const toRange = $pos.blockRange($pos, isTaskListNode);
+  const toPosition = toRange && $pos.textOffset === 0 && toRange.start + 1 === $pos.pos ? Selection.near($pos.doc.resolve(toRange.start - 1), -1).$to : $pos;
+  return toPosition;
+};
+export const normalizeTaskItemsSelection = selection => {
+  if (selection.empty) {
+    return selection;
+  }
+  const {
+    $from,
+    $to
+  } = selection;
+  if (selection instanceof NodeSelection) {
+    const head = resolvePositionToStartOfTaskItem($from);
+    return new TextSelection(head, head);
+  }
+  const head = resolvePositionToStartOfTaskItem($from);
+  const anchor = resolvePositionToEndOfTaskItem($to);
+  return new TextSelection(anchor, head);
+};

package/dist/esm/commands.js

@@ -0,0 +1,281 @@
+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 { uuid } from '@atlaskit/adf-schema';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, USER_CONTEXT } from '@atlaskit/editor-common/analytics';
+import { GapCursorSelection } from '@atlaskit/editor-common/selection';
+import { autoJoinTr } from '@atlaskit/editor-common/utils';
+import { NodeRange } from '@atlaskit/editor-prosemirror/model';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { liftTarget } from '@atlaskit/editor-prosemirror/transform';
+import { findParentNodeOfType, hasParentNodeOfType, replaceParentNodeOfType, safeInsert, setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+import { stateKey as taskDecisionStateKey } from './pm-plugins/plugin-key';
+var getContextData = function getContextData() {
+  var contextProvider = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var objectId = contextProvider.objectId,
+    containerId = contextProvider.containerId;
+  var userContext = objectId ? USER_CONTEXT.EDIT : USER_CONTEXT.NEW;
+  return {
+    objectId: objectId,
+    containerId: containerId,
+    userContext: userContext
+  };
+};
+var generateAnalyticsPayload = function generateAnalyticsPayload(listType, contextData, inputMethod, itemLocalId, listLocalId, itemIdx, listSize) {
+  var containerId;
+  var objectId;
+  var userContext;
+  if (contextData) {
+    containerId = contextData.containerId;
+    objectId = contextData.objectId;
+    userContext = contextData.userContext;
+  }
+  return {
+    action: ACTION.INSERTED,
+    actionSubject: ACTION_SUBJECT.DOCUMENT,
+    actionSubjectId: listType === 'taskList' ? ACTION_SUBJECT_ID.ACTION : ACTION_SUBJECT_ID.DECISION,
+    eventType: EVENT_TYPE.TRACK,
+    attributes: {
+      inputMethod: inputMethod,
+      containerAri: containerId,
+      objectAri: objectId,
+      userContext: userContext,
+      localId: itemLocalId,
+      listLocalId: listLocalId,
+      position: itemIdx,
+      listSize: listSize
+    }
+  };
+};
+export var getListTypes = function getListTypes(listType, schema) {
+  var _schema$nodes = schema.nodes,
+    decisionList = _schema$nodes.decisionList,
+    decisionItem = _schema$nodes.decisionItem,
+    taskList = _schema$nodes.taskList,
+    taskItem = _schema$nodes.taskItem;
+  if (listType === 'taskList') {
+    return {
+      list: taskList,
+      item: taskItem
+    };
+  }
+  return {
+    list: decisionList,
+    item: decisionItem
+  };
+};
+export var insertTaskDecisionAction = function insertTaskDecisionAction(editorAnalyticsAPI) {
+  return function (state, listType) {
+    var inputMethod = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : INPUT_METHOD.TOOLBAR;
+    var addItem = arguments.length > 3 ? arguments[3] : undefined;
+    var listLocalId = arguments.length > 4 ? arguments[4] : undefined;
+    var itemLocalId = arguments.length > 5 ? arguments[5] : undefined;
+    var itemAttrs = arguments.length > 6 ? arguments[6] : undefined;
+    var schema = state.schema;
+    var addAndCreateList = function addAndCreateList(_ref) {
+      var tr = _ref.tr,
+        list = _ref.list,
+        item = _ref.item,
+        listLocalId = _ref.listLocalId,
+        itemLocalId = _ref.itemLocalId;
+      return createListAtSelection(tr, list, item, schema, state, listLocalId, itemLocalId, itemAttrs);
+    };
+    var addToList = function addToList(_ref2) {
+      var state = _ref2.state,
+        tr = _ref2.tr,
+        item = _ref2.item,
+        itemLocalId = _ref2.itemLocalId;
+      var $to = state.selection.$to;
+      var endPos = $to.end($to.depth);
+      var newItemParagraphPos = endPos + 2;
+      return tr.split(endPos, 1, [{
+        type: item,
+        attrs: {
+          localId: itemLocalId
+        }
+      }]).setSelection(new TextSelection(tr.doc.resolve(newItemParagraphPos)));
+    };
+    var addAndCreateListFn = addItem !== null && addItem !== void 0 ? addItem : addAndCreateList;
+    var tr = insertTaskDecisionWithAnalytics(editorAnalyticsAPI)(state, listType, inputMethod, addAndCreateListFn, addToList, listLocalId, itemLocalId, itemAttrs);
+    if (!tr) {
+      return state.tr;
+    }
+    autoJoinTr(tr, ['taskList', 'decisionList']);
+    return tr;
+  };
+};
+export var insertTaskDecisionCommand = function insertTaskDecisionCommand(editorAnalyticsAPI) {
+  return function (listType) {
+    var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : INPUT_METHOD.TOOLBAR;
+    var addItem = arguments.length > 2 ? arguments[2] : undefined;
+    var listLocalId = arguments.length > 3 ? arguments[3] : undefined;
+    var itemLocalId = arguments.length > 4 ? arguments[4] : undefined;
+    return function (state, dispatch) {
+      var tr = insertTaskDecisionAction(editorAnalyticsAPI)(state, listType, inputMethod, addItem, listLocalId, itemLocalId);
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    };
+  };
+};
+export var insertTaskDecisionWithAnalytics = function insertTaskDecisionWithAnalytics(editorAnalyticsAPI) {
+  return function (state, listType, inputMethod, addAndCreateList, addToList, listLocalId, itemLocalId, itemAttrs) {
+    var schema = state.schema;
+    var _getListTypes = getListTypes(listType, schema),
+      list = _getListTypes.list,
+      item = _getListTypes.item;
+    var tr = state.tr;
+    var $to = state.selection.$to;
+    var listNode = findParentNodeOfType(list)(state.selection);
+    var contextIdentifierProvider = taskDecisionStateKey.getState(state).contextIdentifierProvider;
+    var contextData = getContextData(contextIdentifierProvider);
+    var insertTrCreator;
+    var itemIdx;
+    var listSize;
+    if (!listNode) {
+      // Not a list - convert to one.
+      itemIdx = 0;
+      listSize = 1;
+      insertTrCreator = addAndCreateList;
+    } else if ($to.node().textContent.length >= 0) {
+      listSize = listNode.node.childCount + 1;
+      listLocalId = listLocalId || listNode.node.attrs.localId;
+      var listItemNode = findParentNodeOfType(item)(state.selection); // finds current item in list
+      itemIdx = listItemNode ? state.doc.resolve(listItemNode.pos).index() + 1 : 0;
+      insertTrCreator = addToList ? addToList : addAndCreateList;
+    }
+    listLocalId = listLocalId || uuid.generate();
+    itemLocalId = itemLocalId || uuid.generate();
+    if (insertTrCreator) {
+      var insertTr = insertTrCreator({
+        state: state,
+        tr: tr,
+        list: list,
+        item: item,
+        listLocalId: listLocalId,
+        itemLocalId: itemLocalId,
+        itemAttrs: itemAttrs
+      });
+      if (insertTr) {
+        editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(generateAnalyticsPayload(listType, contextData, inputMethod, itemLocalId, listLocalId, itemIdx || 0, listSize || 0))(insertTr);
+      }
+      return insertTr;
+    }
+    return null;
+  };
+};
+export var isSupportedSourceNode = function isSupportedSourceNode(schema, selection) {
+  var _schema$nodes2 = schema.nodes,
+    paragraph = _schema$nodes2.paragraph,
+    blockquote = _schema$nodes2.blockquote,
+    decisionList = _schema$nodes2.decisionList,
+    taskList = _schema$nodes2.taskList;
+  return hasParentNodeOfType([blockquote, paragraph, decisionList, taskList])(selection);
+};
+export var changeInDepth = function changeInDepth(before, after) {
+  return after.depth - before.depth;
+};
+export var createListAtSelection = function createListAtSelection(tr, list, item, schema, state) {
+  var listLocalId = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : uuid.generate();
+  var itemLocalId = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : uuid.generate();
+  var itemAttrs = arguments.length > 7 ? arguments[7] : undefined;
+  var selection = state.selection;
+  var $from = selection.$from,
+    $to = selection.$to;
+  if ($from.parent !== $to.parent) {
+    // ignore selections across multiple nodes
+    return null;
+  }
+  var _schema$nodes3 = schema.nodes,
+    paragraph = _schema$nodes3.paragraph,
+    blockquote = _schema$nodes3.blockquote,
+    decisionList = _schema$nodes3.decisionList,
+    taskList = _schema$nodes3.taskList,
+    decisionItem = _schema$nodes3.decisionItem,
+    taskItem = _schema$nodes3.taskItem,
+    mediaGroup = _schema$nodes3.mediaGroup;
+  if ($from.parent.type === mediaGroup) {
+    return null;
+  }
+  var emptyList = list.create({
+    localId: listLocalId
+  }, [item.create(_objectSpread({
+    localId: itemLocalId
+  }, itemAttrs))]);
+
+  // we don't take the content of a block node next to the gap cursor and always create an empty task
+  if (selection instanceof GapCursorSelection) {
+    return safeInsert(emptyList)(tr);
+  }
+
+  // try to replace when selection is in nodes which support it
+  if (isSupportedSourceNode(schema, selection)) {
+    var _selection$$from$node = selection.$from.node(),
+      nodeType = _selection$$from$node.type,
+      childCount = _selection$$from$node.childCount;
+    var newListNode = list.create({
+      localId: uuid.generate()
+    }, [item.create({
+      localId: uuid.generate()
+    }, $from.node($from.depth).content)]);
+    var hasBlockquoteParent = findParentNodeOfType(blockquote)(selection);
+    if (hasBlockquoteParent) {
+      var liftedDepth = $from.depth - 1;
+      var range = new NodeRange($from, $to, liftedDepth);
+      tr.lift(range, liftTarget(range));
+    }
+    var listParent = findParentNodeOfType(taskList)(selection) || findParentNodeOfType(decisionList)(selection);
+    var listItem = findParentNodeOfType(taskItem)(selection) || findParentNodeOfType(decisionItem)(selection);
+
+    // For a selection inside a task/decision list, we can't just simply replace the
+    // node type as it will mess up lists with > 1 item
+    if (listParent && listItem) {
+      var start;
+      var end;
+      var selectionPos = selection.from;
+
+      // if selection is in first item in list, we need to delete extra so that
+      // this list isn't split
+      if (listParent.node.firstChild === listItem.node) {
+        start = listParent.start - 1;
+        end = listItem.start + listItem.node.nodeSize;
+        if (listParent.node.childCount === 1) {
+          end = listParent.start + listParent.node.nodeSize - 1;
+        }
+      } else {
+        start = listItem.start - 1;
+        end = listItem.start + listItem.node.nodeSize;
+        selectionPos += 2; // as we have added the new list node
+      }
+
+      tr.replaceWith(start, end, newListNode);
+      tr = setTextSelection(selectionPos)(tr);
+      return tr;
+    }
+
+    // For a selection inside one of these node types we can just convert the node type
+    var nodeTypesToReplace = [blockquote];
+    if (nodeType === paragraph && childCount > 0 || hasBlockquoteParent) {
+      // Only convert paragraphs containing content.
+      // Empty paragraphs use the default flow.
+      // This distinction ensures the text selection remains in the correct location.
+
+      // We also want to replace the paragraph type when we are inside a blockQuote
+      // to avoid inserting an extra taskList whilst keeping the paragraph
+      nodeTypesToReplace.push(paragraph);
+    }
+    var newTr = tr;
+    newTr = replaceParentNodeOfType(nodeTypesToReplace, newListNode)(tr);
+
+    // Adjust depth for new selection, if it has changed (e.g. paragraph to list (ol > li))
+    var depthAdjustment = changeInDepth($to, newTr.selection.$to);
+    tr = tr.setSelection(new TextSelection(tr.doc.resolve($to.pos + depthAdjustment)));
+
+    // replacing successful
+    if (newTr !== tr) {
+      return tr;
+    }
+  }
+  return safeInsert(emptyList)(tr);
+};

package/dist/esm/index.js

@@ -1 +1 @@
-export {};
+export { tasksAndDecisionsPlugin } from './plugin';

package/dist/esm/nodeviews/decisionItem.js

@@ -0,0 +1,110 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _get from "@babel/runtime/helpers/get";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import React from 'react';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import DecisionItem from '../ui/Decision';
+import { useShowPlaceholder } from './hooks/use-show-placeholder';
+var DecisionItemWrapper = function DecisionItemWrapper(_ref) {
+  var api = _ref.api,
+    editorView = _ref.editorView,
+    forwardRef = _ref.forwardRef,
+    isContentNodeEmpty = _ref.isContentNodeEmpty,
+    getPos = _ref.getPos;
+  var showPlaceholder = useShowPlaceholder({
+    editorView: editorView,
+    isContentNodeEmpty: isContentNodeEmpty,
+    getPos: getPos,
+    api: api
+  });
+  return /*#__PURE__*/React.createElement(DecisionItem, {
+    contentRef: forwardRef,
+    showPlaceholder: showPlaceholder
+  });
+};
+var Decision = /*#__PURE__*/function (_ReactNodeView) {
+  _inherits(Decision, _ReactNodeView);
+  var _super = _createSuper(Decision);
+  function Decision() {
+    _classCallCheck(this, Decision);
+    return _super.apply(this, arguments);
+  }
+  _createClass(Decision, [{
+    key: "isContentEmpty",
+    value: function isContentEmpty(node) {
+      return node.content.childCount === 0;
+    }
+  }, {
+    key: "initWithAPI",
+    value: function initWithAPI(api) {
+      this.api = api;
+      this.init();
+      return this;
+    }
+  }, {
+    key: "createDomRef",
+    value: function createDomRef() {
+      var domRef = document.createElement('li');
+      domRef.style.listStyleType = 'none';
+      return domRef;
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('div');
+      // setting a className prevents PM/Chrome mutation observer from
+      // incorrectly deleting nodes
+      dom.className = 'decision-item';
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      var isContentNodeEmpty = this.isContentEmpty(this.node);
+      return /*#__PURE__*/React.createElement(DecisionItemWrapper, {
+        forwardRef: forwardRef,
+        isContentNodeEmpty: isContentNodeEmpty,
+        api: this.api
+        // The getPosHandler type is wrong, there is no `boolean` in the real implementation
+        // @ts-expect-error 2322: Type 'getPosHandler' is not assignable to type '() => number | undefined'.
+        ,
+        getPos: this.getPos,
+        editorView: this.view
+      });
+    }
+  }, {
+    key: "viewShouldUpdate",
+    value: function viewShouldUpdate(nextNode) {
+      /**
+       * To ensure the placeholder is correctly toggled we need to allow react to re-render
+       * on first character insertion.
+       * Note: last character deletion is handled externally and automatically re-renders.
+       */
+      return this.isContentEmpty(this.node) && !!nextNode.content.childCount;
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations) {
+      var _this = this;
+      return _get(_getPrototypeOf(Decision.prototype), "update", this).call(this, node, decorations, undefined,
+      // Toggle the placeholder based on whether user input exists.
+      function (_currentNode, _newNode) {
+        return !_this.isContentEmpty(_newNode);
+      });
+    }
+  }]);
+  return Decision;
+}(ReactNodeView);
+export var decisionItemNodeView = function decisionItemNodeView(portalProviderAPI, eventDispatcher, api) {
+  return function (node, view, getPos) {
+    var hasIntlContext = true;
+    return new Decision(node, view, getPos, portalProviderAPI, eventDispatcher, {}, undefined, undefined, undefined, hasIntlContext).initWithAPI(api);
+  };
+};

package/dist/esm/nodeviews/hooks/use-show-placeholder.js

@@ -0,0 +1,34 @@
+import { useMemo } from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+export var useShowPlaceholder = function useShowPlaceholder(_ref) {
+  var editorView = _ref.editorView,
+    api = _ref.api,
+    isContentNodeEmpty = _ref.isContentNodeEmpty,
+    getPos = _ref.getPos;
+  var _useSharedPluginState = useSharedPluginState(api, ['typeAhead']),
+    typeAheadState = _useSharedPluginState.typeAheadState;
+  var isTypeAheadOpen = Boolean(typeAheadState === null || typeAheadState === void 0 ? void 0 : typeAheadState.isOpen);
+  var isTypeAheadOpenedInsideItem = useMemo(function () {
+    var _selection$$cursor;
+    if (!isTypeAheadOpen) {
+      return false;
+    }
+    var itemPosition = getPos();
+    if (typeof itemPosition !== 'number') {
+      return false;
+    }
+    var selection = editorView.state.selection;
+    if (!(selection instanceof TextSelection)) {
+      return false;
+    }
+    var maybeItemNode = editorView.state.doc.nodeAt(itemPosition);
+    var maybeParentItemNode = (_selection$$cursor = selection.$cursor) === null || _selection$$cursor === void 0 ? void 0 : _selection$$cursor.node();
+    if (maybeItemNode && maybeParentItemNode && maybeItemNode.eq(maybeParentItemNode)) {
+      return true;
+    }
+    return false;
+  }, [isTypeAheadOpen, getPos, editorView]);
+  var showPlaceholder = Boolean(!isTypeAheadOpenedInsideItem && isContentNodeEmpty);
+  return showPlaceholder;
+};