@atlaskit/editor-plugin-annotation 1.3.1 → 1.4.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.4.0
+
+### Minor Changes
+
+- [#81394](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81394) [`2798f5546fb7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2798f5546fb7) - [ux] ED-22118 implemented annotation style for block node (media)
+
+## 1.3.2
+
+### Patch Changes
+
+- [#79543](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79543) [`8b578f7427a2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8b578f7427a2) - ED-22502: updated range selection check to exempt inline card, to allow them to have annotation marks
+- [#80883](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/80883) [`5ecfa883d4ba`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5ecfa883d4ba) - React 18 types for alignment, annotation, avatar-group and blocktype plugins.
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/inline-comment.js

@@ -11,6 +11,7 @@ var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _styles = require("@atlaskit/editor-common/styles");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _commands = require("../commands");
 var _nodeviews = require("../nodeviews");
@@ -223,18 +224,30 @@ var inlineCommentPlugin = exports.inlineCommentPlugin = function inlineCommentPl
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : _view.DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
+          var _provider$supportedBl;
+          var isSupportedBlockNode = node.isBlock && ((_provider$supportedBl = provider.supportedBlockNodes) === null || _provider$supportedBl === void 0 ? void 0 : _provider$supportedBl.includes(node.type.name));
           node.marks.filter(function (mark) {
             return mark.type === state.schema.marks.annotation;
           }).forEach(function (mark) {
-            var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
-              return selectedAnnotation.id === mark.attrs.id;
-            }));
-            var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
             if (isVisible) {
-              focusDecorations.push(_view.Decoration.inline(pos, pos + node.nodeSize, {
-                class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved),
-                nodeName: 'span'
-              }));
+              var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
+              if (isSupportedBlockNode) {
+                var isBlockNodeSelected = (0, _utils.isCurrentBlockNodeSelected)(state, node);
+                var attrs = isUnresolved ? {
+                  class: isBlockNodeSelected ? "".concat(_styles.BlockAnnotationSharedClassNames.focus) : "".concat(_styles.BlockAnnotationSharedClassNames.blur)
+                } : {};
+                focusDecorations.push(_view.Decoration.node(pos, pos + node.nodeSize, attrs, {
+                  key: _utils.decorationKey.block
+                }));
+              } else {
+                var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+                  return selectedAnnotation.id === mark.attrs.id;
+                }));
+                focusDecorations.push(_view.Decoration.inline(pos, pos + node.nodeSize, {
+                  class: "".concat((0, _nodeviews.getAnnotationViewClassname)(isUnresolved, isSelected), " ").concat(isUnresolved),
+                  nodeName: 'span'
+                }));
+              }
             }
           });
         });

package/dist/cjs/utils.js

@@ -21,7 +21,7 @@ Object.defineProperty(exports, "hasAnnotationMark", {
 });
 exports.hasInvalidNodes = void 0;
 exports.hasInvalidWhitespaceNode = hasInvalidWhitespaceNode;
-exports.inlineCommentPluginKey = void 0;
+exports.isCurrentBlockNodeSelected = exports.inlineCommentPluginKey = void 0;
 exports.isSelectedAnnotationsChanged = isSelectedAnnotationsChanged;
 exports.resolveDraftBookmark = exports.isSupportedBlockNode = exports.isSelectionValid = void 0;
 exports.stripNonExistingAnnotations = stripNonExistingAnnotations;
@@ -33,6 +33,7 @@ var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _view = require("@atlaskit/editor-prosemirror/view");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _types = require("./types");
 function sum(arr, f) {
   return arr.reduce(function (val, x) {
@@ -154,6 +155,18 @@ var getAnnotationViewKey = exports.getAnnotationViewKey = function getAnnotation
   }).join('_');
   return "view-annotation-wrapper_".concat(keys);
 };
+var isCurrentBlockNodeSelected = exports.isCurrentBlockNodeSelected = function isCurrentBlockNodeSelected(state, node) {
+  var selection = state.selection;
+  if (selection instanceof _state.NodeSelection) {
+    if (selection.node === node) {
+      return true;
+    }
+    if (node.type.name === 'media' && selection.node.firstChild === node) {
+      return true;
+    }
+  }
+  return false;
+};
 var findAnnotationsInSelection = exports.findAnnotationsInSelection = function findAnnotationsInSelection(selection, doc) {
   var empty = selection.empty,
     $anchor = selection.$anchor,
@@ -168,7 +181,7 @@ var findAnnotationsInSelection = exports.findAnnotationsInSelection = function f
   }
   var annotationMark = doc.type.schema.marks.annotation;
   var nodeBefore = $anchor.nodeBefore;
-  var anchorAnnotationMarks = node && node.marks || [];
+  var anchorAnnotationMarks = (node === null || node === void 0 ? void 0 : node.marks) || [];
   var marks = [];
   if (annotationMark.isInSet(anchorAnnotationMarks)) {
     marks = anchorAnnotationMarks;
@@ -353,6 +366,9 @@ function hasInvalidWhitespaceNode(selection, schema) {
   var foundInvalidWhitespace = false;
   var content = selection.content().content;
   content.descendants(function (node) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.editor.allow-inline-comments-for-inline-nodes') && node.type === schema.nodes.inlineCard) {
+      return false;
+    }
     if ((0, _utils.isText)(node, schema)) {
       return false;
     }

package/dist/es2019/pm-plugins/inline-comment.js

@@ -1,10 +1,11 @@
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
 import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
-import { getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
+import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey, isCurrentBlockNodeSelected } from '../utils';
 import { createPluginState } from './plugin-factory';
 const fetchProviderStates = async (provider, annotationIds) => {
   const data = await provider.getState(annotationIds);
@@ -163,14 +164,26 @@ export const inlineCommentPlugin = options => {
         let decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         const focusDecorations = [];
         state.doc.descendants((node, pos) => {
+          var _provider$supportedBl;
+          const isSupportedBlockNode = node.isBlock && ((_provider$supportedBl = provider.supportedBlockNodes) === null || _provider$supportedBl === void 0 ? void 0 : _provider$supportedBl.includes(node.type.name));
           node.marks.filter(mark => mark.type === state.schema.marks.annotation).forEach(mark => {
-            const isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
-            const isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
             if (isVisible) {
-              focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
-                nodeName: 'span'
-              }));
+              const isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
+              if (isSupportedBlockNode) {
+                const isBlockNodeSelected = isCurrentBlockNodeSelected(state, node);
+                const attrs = isUnresolved ? {
+                  class: isBlockNodeSelected ? `${BlockAnnotationSharedClassNames.focus}` : `${BlockAnnotationSharedClassNames.blur}`
+                } : {};
+                focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, attrs, {
+                  key: decorationKey.block
+                }));
+              } else {
+                const isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(selectedAnnotation => selectedAnnotation.id === mark.attrs.id));
+                focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
+                  class: `${getAnnotationViewClassname(isUnresolved, isSelected)} ${isUnresolved}`,
+                  nodeName: 'span'
+                }));
+              }
             }
           });
         });

package/dist/es2019/utils.js

@@ -5,6 +5,7 @@ import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@at
 import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
 function sum(arr, f) {
@@ -113,6 +114,20 @@ export const getAnnotationViewKey = annotations => {
   const keys = annotations.map(mark => mark.id).join('_');
   return `view-annotation-wrapper_${keys}`;
 };
+export const isCurrentBlockNodeSelected = (state, node) => {
+  const {
+    selection
+  } = state;
+  if (selection instanceof NodeSelection) {
+    if (selection.node === node) {
+      return true;
+    }
+    if (node.type.name === 'media' && selection.node.firstChild === node) {
+      return true;
+    }
+  }
+  return false;
+};
 export const findAnnotationsInSelection = (selection, doc) => {
   const {
     empty,
@@ -129,7 +144,7 @@ export const findAnnotationsInSelection = (selection, doc) => {
   }
   const annotationMark = doc.type.schema.marks.annotation;
   const nodeBefore = $anchor.nodeBefore;
-  const anchorAnnotationMarks = node && node.marks || [];
+  const anchorAnnotationMarks = (node === null || node === void 0 ? void 0 : node.marks) || [];
   let marks = [];
   if (annotationMark.isInSet(anchorAnnotationMarks)) {
     marks = anchorAnnotationMarks;
@@ -319,6 +334,9 @@ export function hasInvalidWhitespaceNode(selection, schema) {
   let foundInvalidWhitespace = false;
   const content = selection.content().content;
   content.descendants(node => {
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') && node.type === schema.nodes.inlineCard) {
+      return false;
+    }
     if (isText(node, schema)) {
       return false;
     }

package/dist/esm/pm-plugins/inline-comment.js

@@ -4,10 +4,11 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 import { AnnotationTypes } from '@atlaskit/adf-schema';
 import { RESOLVE_METHOD } from '@atlaskit/editor-common/analytics';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { BlockAnnotationSharedClassNames } from '@atlaskit/editor-common/styles';
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { clearDirtyMark, closeComponent, setInlineCommentsVisibility, setSelectedAnnotation, updateInlineCommentResolvedState, updateMouseState } from '../commands';
 import { AnnotationNodeView, getAnnotationViewClassname } from '../nodeviews';
-import { getAllAnnotations, getPluginState, inlineCommentPluginKey } from '../utils';
+import { decorationKey, getAllAnnotations, getPluginState, inlineCommentPluginKey, isCurrentBlockNodeSelected } from '../utils';
 import { createPluginState } from './plugin-factory';
 var fetchProviderStates = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(provider, annotationIds) {
@@ -216,18 +217,30 @@ export var inlineCommentPlugin = function inlineCommentPlugin(options) {
         var decorations = draftDecorationSet !== null && draftDecorationSet !== void 0 ? draftDecorationSet : DecorationSet.empty;
         var focusDecorations = [];
         state.doc.descendants(function (node, pos) {
+          var _provider$supportedBl;
+          var isSupportedBlockNode = node.isBlock && ((_provider$supportedBl = provider.supportedBlockNodes) === null || _provider$supportedBl === void 0 ? void 0 : _provider$supportedBl.includes(node.type.name));
           node.marks.filter(function (mark) {
             return mark.type === state.schema.marks.annotation;
           }).forEach(function (mark) {
-            var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
-              return selectedAnnotation.id === mark.attrs.id;
-            }));
-            var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
             if (isVisible) {
-              focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
-                class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
-                nodeName: 'span'
-              }));
+              var isUnresolved = !!annotations && annotations[mark.attrs.id] === false;
+              if (isSupportedBlockNode) {
+                var isBlockNodeSelected = isCurrentBlockNodeSelected(state, node);
+                var attrs = isUnresolved ? {
+                  class: isBlockNodeSelected ? "".concat(BlockAnnotationSharedClassNames.focus) : "".concat(BlockAnnotationSharedClassNames.blur)
+                } : {};
+                focusDecorations.push(Decoration.node(pos, pos + node.nodeSize, attrs, {
+                  key: decorationKey.block
+                }));
+              } else {
+                var isSelected = !isInlineCommentViewClosed && !!(selectedAnnotations !== null && selectedAnnotations !== void 0 && selectedAnnotations.some(function (selectedAnnotation) {
+                  return selectedAnnotation.id === mark.attrs.id;
+                }));
+                focusDecorations.push(Decoration.inline(pos, pos + node.nodeSize, {
+                  class: "".concat(getAnnotationViewClassname(isUnresolved, isSelected), " ").concat(isUnresolved),
+                  nodeName: 'span'
+                }));
+              }
             }
           });
         });

package/dist/esm/utils.js

@@ -5,6 +5,7 @@ import { AnnotationSharedClassNames, BlockAnnotationSharedClassNames } from '@at
 import { canApplyAnnotationOnRange, containsAnyAnnotations, getAnnotationIdsFromRange, hasAnnotationMark, isParagraph, isText } from '@atlaskit/editor-common/utils';
 import { AllSelection, NodeSelection, PluginKey, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { AnnotationSelectionType } from './types';
 export { hasAnnotationMark, containsAnyAnnotations };
 function sum(arr, f) {
@@ -127,6 +128,18 @@ export var getAnnotationViewKey = function getAnnotationViewKey(annotations) {
   }).join('_');
   return "view-annotation-wrapper_".concat(keys);
 };
+export var isCurrentBlockNodeSelected = function isCurrentBlockNodeSelected(state, node) {
+  var selection = state.selection;
+  if (selection instanceof NodeSelection) {
+    if (selection.node === node) {
+      return true;
+    }
+    if (node.type.name === 'media' && selection.node.firstChild === node) {
+      return true;
+    }
+  }
+  return false;
+};
 export var findAnnotationsInSelection = function findAnnotationsInSelection(selection, doc) {
   var empty = selection.empty,
     $anchor = selection.$anchor,
@@ -141,7 +154,7 @@ export var findAnnotationsInSelection = function findAnnotationsInSelection(sele
   }
   var annotationMark = doc.type.schema.marks.annotation;
   var nodeBefore = $anchor.nodeBefore;
-  var anchorAnnotationMarks = node && node.marks || [];
+  var anchorAnnotationMarks = (node === null || node === void 0 ? void 0 : node.marks) || [];
   var marks = [];
   if (annotationMark.isInSet(anchorAnnotationMarks)) {
     marks = anchorAnnotationMarks;
@@ -326,6 +339,9 @@ export function hasInvalidWhitespaceNode(selection, schema) {
   var foundInvalidWhitespace = false;
   var content = selection.content().content;
   content.descendants(function (node) {
+    if (getBooleanFF('platform.editor.allow-inline-comments-for-inline-nodes') && node.type === schema.nodes.inlineCard) {
+      return false;
+    }
     if (isText(node, schema)) {
       return false;
     }

package/dist/types/types.d.ts

@@ -94,8 +94,8 @@ export type InlineCommentState = {
     resolved: boolean;
 };
 export type InlineCommentAnnotationProvider = AnnotationTypeProvider<AnnotationTypes.INLINE_COMMENT, InlineCommentState> & {
-    createComponent?: React.ComponentType<InlineCommentCreateComponentProps>;
-    viewComponent?: React.ComponentType<InlineCommentViewComponentProps>;
+    createComponent?: React.ComponentType<React.PropsWithChildren<InlineCommentCreateComponentProps>>;
+    viewComponent?: React.ComponentType<React.PropsWithChildren<InlineCommentViewComponentProps>>;
     isToolbarAbove?: boolean;
     /**
      * @experimental Still under development. Do not use.

package/dist/types/utils.d.ts

@@ -20,6 +20,7 @@ export declare const decorationKey: {
 };
 export declare const addDraftDecoration: (start: number, end: number, targetType?: TargetType) => Decoration;
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
+export declare const isCurrentBlockNodeSelected: (state: EditorState, node: Node) => boolean;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
 export declare const resolveDraftBookmark: (editorState: EditorState, bookmark: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
 /**

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

@@ -94,8 +94,8 @@ export type InlineCommentState = {
     resolved: boolean;
 };
 export type InlineCommentAnnotationProvider = AnnotationTypeProvider<AnnotationTypes.INLINE_COMMENT, InlineCommentState> & {
-    createComponent?: React.ComponentType<InlineCommentCreateComponentProps>;
-    viewComponent?: React.ComponentType<InlineCommentViewComponentProps>;
+    createComponent?: React.ComponentType<React.PropsWithChildren<InlineCommentCreateComponentProps>>;
+    viewComponent?: React.ComponentType<React.PropsWithChildren<InlineCommentViewComponentProps>>;
     isToolbarAbove?: boolean;
     /**
      * @experimental Still under development. Do not use.

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

@@ -20,6 +20,7 @@ export declare const decorationKey: {
 };
 export declare const addDraftDecoration: (start: number, end: number, targetType?: TargetType) => Decoration;
 export declare const getAnnotationViewKey: (annotations: AnnotationInfo[]) => string;
+export declare const isCurrentBlockNodeSelected: (state: EditorState, node: Node) => boolean;
 export declare const findAnnotationsInSelection: (selection: Selection, doc: Node) => AnnotationInfo[];
 export declare const resolveDraftBookmark: (editorState: EditorState, bookmark: SelectionBookmark, supportedBlockNodes?: string[]) => DraftBookmark;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-annotation",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "Annotation plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -33,7 +33,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.6.0",
-    "@atlaskit/editor-common": "^78.12.0",
+    "@atlaskit/editor-common": "^78.14.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -80,11 +80,9 @@
       "ui-components": [
         "lite-mode"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "styling": [
-        "static",
+        "emotion",
         "emotion"
       ],
       "imports": [
@@ -96,6 +94,9 @@
   "platform-feature-flags": {
     "platform.editor.enable-selection-toolbar_ucdwd": {
       "type": "boolean"
+    },
+    "platform.editor.allow-inline-comments-for-inline-nodes": {
+      "type": "boolean"
     }
   }
-}
+}