@atlaskit/editor-plugin-annotation 0.1.0

package/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+  rules: {
+    '@typescript-eslint/no-duplicate-imports': 'error',
+    '@typescript-eslint/no-explicit-any': 'error',
+    '@typescript-eslint/ban-types': [
+      'error',
+      {
+        types: {
+          'React.FC':
+            'Please use types directly on props instead, and explicitly define children if required',
+          'React.FunctionalComponent':
+            'Please use types directly on props instead, and explicitly define children if required',
+        },
+        extendDefaults: false,
+      },
+    ],
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1 @@
+# @atlaskit/editor-plugin-annotation

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2023 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,30 @@
+# Editor plugin annotation
+
+Annotation plugin for @atlaskit/editor-core
+
+**Note:** This component is designed for internal Atlassian development.
+External contributors will be able to use this component but will not be able to submit issues.
+
+## Install
+---
+- **Install** - *yarn add @atlaskit/editor-plugin-annotation*
+- **npm** - [@atlaskit/editor-plugin-annotation](https://www.npmjs.com/package/@atlaskit/editor-plugin-annotation)
+- **Source** - [Bitbucket](https://bitbucket.org/atlassian/atlassian-frontend/src/master/packages/editor/editor-plugin-annotation)
+- **Bundle** - [unpkg.com](https://unpkg.com/@atlaskit/editor-plugin-annotation/dist/)
+
+## Usage
+---
+**Internal use only**
+
+@atlaskit/editor-plugin-annotation is intended for internal use by the @atlaskit/editor-core and as a plugin dependency of the Editor within your product.
+
+Direct use of this component is not supported.
+
+Please see [Atlaskit - Editor plugin annotation](https://atlaskit.atlassian.com/packages/editor/editor-plugin-annotation) for documentation and examples for this package.
+
+## Support
+---
+For internal Atlassian, visit the slack channel [#help-editor](https://atlassian.slack.com/archives/CFG3PSQ9E) for support or visit [go/editor-help](https://go/editor-help) to submit a bug.
+## License
+---
+ Please see [Atlassian Frontend - License](https://hello.atlassian.net/wiki/spaces/AF/pages/2589099144/Documentation#License) for more licensing information.

package/dist/cjs/commands/index.js

@@ -0,0 +1,150 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateMouseState = exports.updateInlineCommentResolvedState = exports.setSelectedAnnotation = exports.setInlineCommentsVisibility = exports.setInlineCommentDraftState = exports.removeInlineCommentNearSelection = exports.createAnnotation = exports.closeComponent = exports.clearDirtyMark = exports.addInlineComment = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _pluginFactory = require("../pm-plugins/plugin-factory");
+var _types = require("../pm-plugins/types");
+var _types2 = require("../types");
+var _utils = require("../utils");
+var _transform = _interopRequireDefault(require("./transform"));
+var updateInlineCommentResolvedState = exports.updateInlineCommentResolvedState = function updateInlineCommentResolvedState(editorAnalyticsAPI) {
+  return function (partialNewState, resolveMethod) {
+    var command = {
+      type: _types.ACTIONS.UPDATE_INLINE_COMMENT_STATE,
+      data: partialNewState
+    };
+    var allResolved = Object.values(partialNewState).every(function (state) {
+      return state;
+    });
+    if (resolveMethod && allResolved) {
+      return (0, _pluginFactory.createCommand)(command, _transform.default.addResolveAnalytics(editorAnalyticsAPI)(resolveMethod));
+    }
+    return (0, _pluginFactory.createCommand)(command);
+  };
+};
+var closeComponent = exports.closeComponent = function closeComponent() {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.CLOSE_COMPONENT
+  });
+};
+var clearDirtyMark = exports.clearDirtyMark = function clearDirtyMark() {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.INLINE_COMMENT_CLEAR_DIRTY_MARK
+  });
+};
+var removeInlineCommentNearSelection = exports.removeInlineCommentNearSelection = function removeInlineCommentNearSelection(id) {
+  return function (state, dispatch) {
+    var tr = state.tr,
+      $from = state.selection.$from;
+    var annotationMarkType = state.schema.marks.annotation;
+    var hasAnnotation = $from.marks().some(function (mark) {
+      return mark.type === annotationMarkType;
+    });
+    if (!hasAnnotation) {
+      return false;
+    }
+
+    // just remove entire mark from around the node
+    tr.removeMark($from.start(), $from.end(), annotationMarkType.create({
+      id: id,
+      type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+    }));
+    if (dispatch) {
+      dispatch(tr);
+    }
+    return true;
+  };
+};
+var getDraftCommandAction = function getDraftCommandAction(drafting) {
+  return function (editorState) {
+    // validate selection only when entering draft mode
+    if (drafting && (0, _utils.isSelectionValid)(editorState) !== _types2.AnnotationSelectionType.VALID) {
+      return false;
+    }
+    return {
+      type: _types.ACTIONS.SET_INLINE_COMMENT_DRAFT_STATE,
+      data: {
+        drafting: drafting,
+        editorState: editorState
+      }
+    };
+  };
+};
+var setInlineCommentDraftState = exports.setInlineCommentDraftState = function setInlineCommentDraftState(editorAnalyticsAPI) {
+  return function (drafting) {
+    var inputMethod = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.TOOLBAR;
+    var commandAction = getDraftCommandAction(drafting);
+    return (0, _pluginFactory.createCommand)(commandAction, _transform.default.addOpenCloseAnalytics(editorAnalyticsAPI)(drafting, inputMethod));
+  };
+};
+var addInlineComment = exports.addInlineComment = function addInlineComment(editorAnalyticsAPI) {
+  return function (id) {
+    var commandAction = function commandAction(editorState) {
+      return {
+        type: _types.ACTIONS.ADD_INLINE_COMMENT,
+        data: {
+          drafting: false,
+          inlineComments: (0, _defineProperty2.default)({}, id, false),
+          // Auto make the newly inserted comment selected.
+          // We move the selection to the head of the comment selection.
+          selectedAnnotations: [{
+            id: id,
+            type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+          }],
+          editorState: editorState
+        }
+      };
+    };
+    return (0, _pluginFactory.createCommand)(commandAction, _transform.default.addInlineComment(editorAnalyticsAPI)(id));
+  };
+};
+var updateMouseState = exports.updateMouseState = function updateMouseState(mouseData) {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.INLINE_COMMENT_UPDATE_MOUSE_STATE,
+    data: {
+      mouseData: mouseData
+    }
+  });
+};
+var setSelectedAnnotation = exports.setSelectedAnnotation = function setSelectedAnnotation(id) {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.SET_SELECTED_ANNOTATION,
+    data: {
+      selectedAnnotations: [{
+        id: id,
+        type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+      }]
+    }
+  });
+};
+var createAnnotation = exports.createAnnotation = function createAnnotation(editorAnalyticsAPI) {
+  return function (id) {
+    var annotationType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _adfSchema.AnnotationTypes.INLINE_COMMENT;
+    return function (state, dispatch) {
+      // don't try to add if there are is no temp highlight bookmarked
+      var _ref = (0, _utils.getPluginState)(state) || {},
+        bookmark = _ref.bookmark;
+      if (!bookmark || !dispatch) {
+        return false;
+      }
+      if (annotationType === _adfSchema.AnnotationTypes.INLINE_COMMENT) {
+        return addInlineComment(editorAnalyticsAPI)(id)(state, dispatch);
+      }
+      return false;
+    };
+  };
+};
+var setInlineCommentsVisibility = exports.setInlineCommentsVisibility = function setInlineCommentsVisibility(isVisible) {
+  return (0, _pluginFactory.createCommand)({
+    type: _types.ACTIONS.INLINE_COMMENT_SET_VISIBLE,
+    data: {
+      isVisible: isVisible
+    }
+  });
+};

package/dist/cjs/commands/transform.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _adfSchema = require("@atlaskit/adf-schema");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _mark = require("@atlaskit/editor-common/mark");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _utils = require("../utils");
+var addAnnotationMark = function addAnnotationMark(id) {
+  return function (transaction, state) {
+    var inlineCommentState = (0, _utils.getPluginState)(state);
+    var _getSelectionPosition = (0, _utils.getSelectionPositions)(state, inlineCommentState),
+      from = _getSelectionPosition.from,
+      to = _getSelectionPosition.to,
+      head = _getSelectionPosition.head;
+    var annotationMark = state.schema.marks.annotation.create({
+      id: id,
+      type: _adfSchema.AnnotationTypes.INLINE_COMMENT
+    });
+    // Apply the mark only to text node in the range.
+    var tr = (0, _mark.applyMarkOnRange)(from, to, false, annotationMark, transaction);
+    // set selection back to the end of annotation once annotation mark is applied
+    tr.setSelection(_state.TextSelection.create(tr.doc, head));
+    return tr;
+  };
+};
+var addInlineComment = function addInlineComment(editorAnalyticsAPI) {
+  return function (id) {
+    return function (transaction, state) {
+      var tr = addAnnotationMark(id)(transaction, state);
+      // add insert analytics step to transaction
+      tr = addInsertAnalytics(editorAnalyticsAPI)(tr, state);
+      // add close analytics step to transaction
+      tr = addOpenCloseAnalytics(editorAnalyticsAPI)(false, _analytics.INPUT_METHOD.TOOLBAR)(tr, state);
+      return tr;
+    };
+  };
+};
+var addOpenCloseAnalytics = function addOpenCloseAnalytics(editorAnalyticsAPI) {
+  return function (drafting) {
+    var method = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _analytics.INPUT_METHOD.TOOLBAR;
+    return function (transaction, state) {
+      var draftingPayload = (0, _utils.getDraftCommandAnalyticsPayload)(drafting, method)(state);
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(draftingPayload)(transaction);
+      return transaction;
+    };
+  };
+};
+var addInsertAnalytics = function addInsertAnalytics(editorAnalyticsAPI) {
+  return function (transaction, state) {
+    editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
+      action: _analytics.ACTION.INSERTED,
+      actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT
+    })(transaction);
+    return transaction;
+  };
+};
+var addResolveAnalytics = function addResolveAnalytics(editorAnalyticsAPI) {
+  return function (method) {
+    return function (transaction, state) {
+      var resolvedPayload = {
+        action: _analytics.ACTION.RESOLVED,
+        actionSubject: _analytics.ACTION_SUBJECT.ANNOTATION,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.INLINE_COMMENT,
+        eventType: _analytics.EVENT_TYPE.TRACK,
+        attributes: {
+          method: method
+        }
+      };
+      editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(resolvedPayload)(transaction);
+      return transaction;
+    };
+  };
+};
+var _default = exports.default = {
+  addAnnotationMark: addAnnotationMark,
+  addInlineComment: addInlineComment,
+  addOpenCloseAnalytics: addOpenCloseAnalytics,
+  addInsertAnalytics: addInsertAnalytics,
+  addResolveAnalytics: addResolveAnalytics
+};

package/dist/cjs/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "annotationPlugin", {
+  enumerable: true,
+  get: function get() {
+    return _plugin.annotationPlugin;
+  }
+});
+var _plugin = require("./plugin");

package/dist/cjs/nodeviews/index.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getAnnotationViewClassname = exports.AnnotationNodeView = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _react = _interopRequireDefault(require("react"));
+var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
+var _styles = require("@atlaskit/editor-common/styles");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(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; } }
+var AnnotationNodeView = exports.AnnotationNodeView = /*#__PURE__*/function (_ReactNodeView) {
+  (0, _inherits2.default)(AnnotationNodeView, _ReactNodeView);
+  var _super = _createSuper(AnnotationNodeView);
+  function AnnotationNodeView() {
+    (0, _classCallCheck2.default)(this, AnnotationNodeView);
+    return _super.apply(this, arguments);
+  }
+  (0, _createClass2.default)(AnnotationNodeView, [{
+    key: "createDomRef",
+    value: function createDomRef() {
+      return document.createElement('span');
+    }
+  }, {
+    key: "getContentDOM",
+    value: function getContentDOM() {
+      var dom = document.createElement('span');
+      dom.className = 'ak-editor-annotation';
+      return {
+        dom: dom
+      };
+    }
+  }, {
+    key: "render",
+    value: function render(_props, forwardRef) {
+      return (
+        /*#__PURE__*/
+        // all inline comment states are now set in decorations at ../pm-plugins/inline-comment.ts
+        _react.default.createElement("span", {
+          "data-mark-type": "annotation",
+          ref: forwardRef
+        })
+      );
+    }
+  }]);
+  return AnnotationNodeView;
+}(_reactNodeView.default);
+var getAnnotationViewClassname = exports.getAnnotationViewClassname = function getAnnotationViewClassname(isUnresolved, hasFocus) {
+  if (!isUnresolved) {
+    return;
+  }
+  return hasFocus ? _styles.AnnotationSharedClassNames.focus : _styles.AnnotationSharedClassNames.blur;
+};

package/dist/cjs/plugin.js

@@ -0,0 +1,132 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "AnnotationUpdateEmitter", {
+  enumerable: true,
+  get: function get() {
+    return _annotation.AnnotationUpdateEmitter;
+  }
+});
+exports.annotationPlugin = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _annotation = require("@atlaskit/editor-common/annotation");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _inlineComment = require("./pm-plugins/inline-comment");
+var _keymap = require("./pm-plugins/keymap");
+var _toolbar = require("./toolbar");
+var _InlineCommentView = require("./ui/InlineCommentView");
+var _utils = require("./utils");
+var annotationPlugin = exports.annotationPlugin = function annotationPlugin(_ref) {
+  var annotationProviders = _ref.config,
+    api = _ref.api;
+  return {
+    name: 'annotation',
+    marks: function marks() {
+      return [{
+        name: 'annotation',
+        mark: _adfSchema.annotation
+      }];
+    },
+    actions: {
+      stripNonExistingAnnotations: _utils.stripNonExistingAnnotations
+    },
+    getSharedState: function getSharedState(editorState) {
+      if (!editorState) {
+        return undefined;
+      }
+      return (0, _utils.getPluginState)(editorState) || undefined;
+    },
+    pmPlugins: function pmPlugins() {
+      return [{
+        name: 'annotation',
+        plugin: function plugin(_ref2) {
+          var dispatch = _ref2.dispatch,
+            portalProviderAPI = _ref2.portalProviderAPI,
+            eventDispatcher = _ref2.eventDispatcher;
+          if (annotationProviders) {
+            var _api$analytics;
+            return (0, _inlineComment.inlineCommentPlugin)({
+              dispatch: dispatch,
+              portalProviderAPI: portalProviderAPI,
+              eventDispatcher: eventDispatcher,
+              provider: annotationProviders.inlineComment,
+              editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+            });
+          }
+          return;
+        }
+      }, {
+        name: 'annotationKeymap',
+        plugin: function plugin() {
+          if (annotationProviders) {
+            var _api$analytics2;
+            return (0, _keymap.keymapPlugin)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions);
+          }
+          return;
+        }
+      }];
+    },
+    pluginsOptions: {
+      floatingToolbar: function floatingToolbar(state, intl) {
+        if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        var pluginState = (0, _utils.getPluginState)(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var _api$analytics3;
+          var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
+          return (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions)(state, intl, isToolbarAbove);
+        }
+      },
+      selectionToolbar: function selectionToolbar(state, intl) {
+        if (!(0, _platformFeatureFlags.getBooleanFF)('platform.editor.enable-selection-toolbar_ucdwd') || !annotationProviders) {
+          return;
+        }
+        var pluginState = (0, _utils.getPluginState)(state);
+        if (pluginState && pluginState.isVisible && !pluginState.bookmark && !pluginState.mouseData.isSelecting) {
+          var _api$analytics4;
+          var isToolbarAbove = annotationProviders.inlineComment.isToolbarAbove;
+          return (0, _toolbar.buildToolbar)(api === null || api === void 0 || (_api$analytics4 = api.analytics) === null || _api$analytics4 === void 0 ? void 0 : _api$analytics4.actions)(state, intl, isToolbarAbove);
+        }
+      }
+    },
+    contentComponent: function contentComponent(_ref3) {
+      var editorView = _ref3.editorView,
+        dispatchAnalyticsEvent = _ref3.dispatchAnalyticsEvent;
+      if (!annotationProviders) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(AnnotationContentComponent, {
+        api: api,
+        editorView: editorView,
+        annotationProviders: annotationProviders,
+        dispatchAnalyticsEvent: dispatchAnalyticsEvent
+      });
+    }
+  };
+};
+function AnnotationContentComponent(_ref4) {
+  var _api$analytics5;
+  var api = _ref4.api,
+    editorView = _ref4.editorView,
+    annotationProviders = _ref4.annotationProviders,
+    dispatchAnalyticsEvent = _ref4.dispatchAnalyticsEvent;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['annotation']),
+    inlineCommentState = _useSharedPluginState.annotationState;
+  if (inlineCommentState && !inlineCommentState.isVisible) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-editor-popup": "true"
+  }, /*#__PURE__*/_react.default.createElement(_InlineCommentView.InlineCommentView, {
+    providers: annotationProviders,
+    editorView: editorView,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics5 = api.analytics) === null || _api$analytics5 === void 0 ? void 0 : _api$analytics5.actions
+  }));
+}