@atlaskit/editor-plugin-annotation 1.3.2 → 1.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-annotation
 
+## 1.4.1
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
+## 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

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/toolbar.js

@@ -50,6 +50,8 @@ var buildToolbar = exports.buildToolbar = function buildToolbar(editorAnalyticsA
             eventType: _analytics.EVENT_TYPE.UI,
             attributes: {
               source: 'highlightActionsMenu',
+              // @ts-expect-error - Object literal may only specify known properties, and 'pageMode' does not exist in type
+              // This error was introduced after upgrading to TypeScript 5
               pageMode: 'edit'
             }
           });

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;
@@ -155,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,
@@ -169,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;

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/toolbar.js

@@ -41,6 +41,8 @@ export const buildToolbar = editorAnalyticsAPI => (state, intl, isToolbarAbove =
           eventType: EVENT_TYPE.UI,
           attributes: {
             source: 'highlightActionsMenu',
+            // @ts-expect-error - Object literal may only specify known properties, and 'pageMode' does not exist in type
+            // This error was introduced after upgrading to TypeScript 5
             pageMode: 'edit'
           }
         });

package/dist/es2019/utils.js

@@ -114,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,
@@ -130,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;

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/toolbar.js

@@ -43,6 +43,8 @@ export var buildToolbar = function buildToolbar(editorAnalyticsAPI) {
             eventType: EVENT_TYPE.UI,
             attributes: {
               source: 'highlightActionsMenu',
+              // @ts-expect-error - Object literal may only specify known properties, and 'pageMode' does not exist in type
+              // This error was introduced after upgrading to TypeScript 5
               pageMode: 'edit'
             }
           });

package/dist/esm/utils.js

@@ -128,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,
@@ -142,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;

package/dist/types/pm-plugins/plugin-factory.d.ts

@@ -1,2 +1,2 @@
 import type { InlineCommentPluginState } from './types';
-export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: InlineCommentPluginState | ((state: import("prosemirror-state").EditorState) => InlineCommentPluginState)) => import("prosemirror-state").SafeStateField<InlineCommentPluginState>, createCommand: <A = import("./types").InlineCommentAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: InlineCommentPluginState | ((state: import("prosemirror-state").EditorState) => InlineCommentPluginState)) => import("prosemirror-state").SafeStateField<InlineCommentPluginState>, createCommand: <A = import("./types").InlineCommentAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;

package/dist/types/types.d.ts

@@ -112,8 +112,8 @@ export interface AnnotationProviders {
     inlineComment: InlineCommentAnnotationProvider;
 }
 export declare enum AnnotationSelectionType {
-    INVALID = "invalid",
-    DISABLED = "disabled",
+    INVALID = "invalid",// Annotation should not be created, toolbar should not be shown
+    DISABLED = "disabled",// Annotation should not be created, toolbar should be shown, but disabled
     VALID = "valid"
 }
 export declare const AnnotationTestIds: {

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/pm-plugins/plugin-factory.d.ts

@@ -1,2 +1,2 @@
 import type { InlineCommentPluginState } from './types';
-export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch<any>, initialState: InlineCommentPluginState | ((state: import("prosemirror-state").EditorState) => InlineCommentPluginState)) => import("prosemirror-state").SafeStateField<InlineCommentPluginState>, createCommand: <A = import("./types").InlineCommentAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;
+export declare const createPluginState: (dispatch: import("@atlaskit/editor-common/event-dispatcher").Dispatch, initialState: InlineCommentPluginState | ((state: import("prosemirror-state").EditorState) => InlineCommentPluginState)) => import("prosemirror-state").SafeStateField<InlineCommentPluginState>, createCommand: <A = import("./types").InlineCommentAction>(action: A | ((state: Readonly<import("prosemirror-state").EditorState>) => false | A), transform?: ((tr: import("prosemirror-state").Transaction, state: import("prosemirror-state").EditorState) => import("prosemirror-state").Transaction) | undefined) => import("@atlaskit/editor-common/types").Command;

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

@@ -112,8 +112,8 @@ export interface AnnotationProviders {
     inlineComment: InlineCommentAnnotationProvider;
 }
 export declare enum AnnotationSelectionType {
-    INVALID = "invalid",
-    DISABLED = "disabled",
+    INVALID = "invalid",// Annotation should not be created, toolbar should not be shown
+    DISABLED = "disabled",// Annotation should not be created, toolbar should be shown, but disabled
     VALID = "valid"
 }
 export declare const AnnotationTestIds: {

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.2",
+  "version": "1.4.1",
   "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.17.0",
     "@atlaskit/editor-plugin-analytics": "^1.0.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.0.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -54,7 +54,7 @@
     "@atlassian/feature-flags-test-utils": "^0.2.0",
     "@testing-library/react": "^12.1.5",
     "react-dom": "^16.8.0",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -80,11 +80,9 @@
       "ui-components": [
         "lite-mode"
       ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ],
+      "deprecation": "no-deprecated-imports",
       "styling": [
-        "static",
+        "emotion",
         "emotion"
       ],
       "imports": [
@@ -101,4 +99,4 @@
       "type": "boolean"
     }
   }
-}
+}