@atlaskit/editor-plugin-block-controls 7.13.3 → 7.14.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.14.0
+
+### Minor Changes
+
+- [`5f21c5a85f65a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/5f21c5a85f65a) -
+  ED-29714 fix some alignment issues
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.13.3
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-drag-handle.js

@@ -12,6 +12,7 @@ var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dragHandle = require("../ui/drag-handle");
 var _decorationsCommon = require("./decorations-common");
@@ -32,6 +33,50 @@ var findHandleDec = exports.findHandleDec = function findHandleDec(decorations,
     return spec.type === _decorationsCommon.TYPE_HANDLE_DEC;
   });
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+var fixWidgetSide = function fixWidgetSide($pos) {
+  var defaultSide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var alignmentMark = $pos.doc.type.schema.marks.alignment;
+  var indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    var beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    var afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    var hasMissingMark = beforeMarks.some(function (mark) {
+      return !afterMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -50,8 +95,10 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = (0, _uuid.default)();
+  var $pos = editorState.doc.resolve(pos);
+  var side = (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   var widgetSpec = (0, _experiments.editorExperiment)('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side: side,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
@@ -68,7 +115,7 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       }
     }
   } : {
-    side: -1,
+    side: side,
     type: _decorationsCommon.TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(_decorationsCommon.TYPE_HANDLE_DEC, "-").concat((0, _uuid.default)()),
@@ -91,13 +138,14 @@ var dragHandleDecoration = exports.dragHandleDecoration = function dragHandleDec
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };
     var newPos = getPos();
     if (typeof newPos === 'number') {
-      var $pos = view.state.doc.resolve(newPos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      var _$pos = view.state.doc.resolve(newPos);
+      isTopLevelNode = (_$pos === null || _$pos === void 0 ? void 0 : _$pos.parent.type.name) === 'doc';
     }
     /*
      * We disable mouseover event to fix flickering issue on hover

package/dist/cjs/pm-plugins/utils/marks.js

@@ -4,6 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getActiveBlockMarks = void 0;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -21,9 +23,36 @@ exports.getActiveBlockMarks = void 0;
 var getActiveBlockMarks = exports.getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
   var alignment = state.schema.marks.alignment;
   var resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   var marks = resolvedPos.marks();
-  return marks.filter(function (mark) {
+  var supportedMarks = marks.filter(function (mark) {
     return mark.type === alignment;
   });
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    var nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(function (mark) {
+      return mark.type === alignment;
+    })) || [];
+
+    // Compare alignment values to ensure they are the same
+    var alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(function (mark) {
+      return nextNodeMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

package/dist/es2019/pm-plugins/decorations-drag-handle.js

@@ -5,6 +5,7 @@ import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -22,6 +23,43 @@ export const emptyParagraphNodeDecorations = () => {
 export const findHandleDec = (decorations, from, to) => {
   return decorations.find(from, to, spec => spec.type === TYPE_HANDLE_DEC);
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+const fixWidgetSide = ($pos, defaultSide = -1) => {
+  const alignmentMark = $pos.doc.type.schema.marks.alignment;
+  const indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    const beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(mark => mark.type === alignmentMark || mark.type === indentationMark)) || [];
+    const afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(mark => mark.type === alignmentMark || mark.type === indentationMark)) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    const hasMissingMark = beforeMarks.some(mark => {
+      return !afterMarks.some(nextMark => nextMark.eq(mark));
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 export const dragHandleDecoration = ({
   api,
   formatMessage,
@@ -41,8 +79,10 @@ export const dragHandleDecoration = ({
   let unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   const key = uuid();
+  const $pos = editorState.doc.resolve(pos);
+  const side = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   const widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
@@ -59,7 +99,7 @@ export const dragHandleDecoration = ({
       }
     }
   } : {
-    side: -1,
+    side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: `${TYPE_HANDLE_DEC}-${uuid()}`,
@@ -82,6 +122,7 @@ export const dragHandleDecoration = ({
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };

package/dist/es2019/pm-plugins/utils/marks.js

@@ -1,3 +1,6 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -17,7 +20,28 @@ export const getActiveBlockMarks = (state, pos) => {
     alignment
   } = state.schema.marks;
   const resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   const marks = resolvedPos.marks();
-  return marks.filter(mark => mark.type === alignment);
+  const supportedMarks = marks.filter(mark => mark.type === alignment);
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    const nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(mark => mark.type === alignment)) || [];
+
+    // Compare alignment values to ensure they are the same
+    const alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(mark => nextNodeMarks.some(nextMark => nextMark.eq(mark)));
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

package/dist/esm/pm-plugins/decorations-drag-handle.js

@@ -6,6 +6,7 @@ import ReactDOM from 'react-dom';
 import uuid from 'uuid';
 import { Decoration } from '@atlaskit/editor-prosemirror/view';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DragHandle, DragHandleWithVisibility } from '../ui/drag-handle';
 import { TYPE_HANDLE_DEC, TYPE_NODE_DEC, unmountDecorations } from './decorations-common';
@@ -24,6 +25,50 @@ export var findHandleDec = function findHandleDec(decorations, from, to) {
     return spec.type === TYPE_HANDLE_DEC;
   });
 };
+/**
+ * Fix for widget positioning to ensure it is not placed into a previous mark's DOM structure.
+ * A ProseMirror widget can appear in the wrong DOM position, specifically being added
+ * to a previous mark instead of its intended location, which leads to various rendering issues.
+ * For example, when nodeBefore has an alignment mark but the current node doesn't, ProseMirror may
+ * incorrectly render the widget inside the previous node's alignment mark wrapper instead.
+ */
+var fixWidgetSide = function fixWidgetSide($pos) {
+  var defaultSide = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1;
+  var alignmentMark = $pos.doc.type.schema.marks.alignment;
+  var indentationMark = $pos.doc.type.schema.marks.indentation;
+
+  // Only apply fix for alignment and indent marks
+  if (!alignmentMark && !indentationMark) {
+    return defaultSide;
+  }
+  if ($pos.nodeBefore && $pos.nodeAfter) {
+    var _$pos$nodeBefore, _$pos$nodeAfter;
+    var beforeMarks = ((_$pos$nodeBefore = $pos.nodeBefore) === null || _$pos$nodeBefore === void 0 ? void 0 : _$pos$nodeBefore.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    var afterMarks = ((_$pos$nodeAfter = $pos.nodeAfter) === null || _$pos$nodeAfter === void 0 ? void 0 : _$pos$nodeAfter.marks.filter(function (mark) {
+      return mark.type === alignmentMark || mark.type === indentationMark;
+    })) || [];
+    if (beforeMarks.length === 0) {
+      return defaultSide;
+    } else if (afterMarks.length === 0) {
+      return 0;
+    }
+
+    // Check if previous node has marks that current node doesn't have
+    var hasMissingMark = beforeMarks.some(function (mark) {
+      return !afterMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // if we have missing mark, we set side to 0 to render widget outside previous mark DOM
+    if (hasMissingMark) {
+      return 0;
+    }
+  }
+  return defaultSide;
+};
 export var dragHandleDecoration = function dragHandleDecoration(_ref) {
   var api = _ref.api,
     formatMessage = _ref.formatMessage,
@@ -42,8 +87,10 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
   var unbind;
   // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
   var key = uuid();
+  var $pos = editorState.doc.resolve(pos);
+  var side = expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1') ? fixWidgetSide($pos) : -1;
   var widgetSpec = editorExperiment('platform_editor_breakout_resizing', true) ? {
-    side: -1,
+    side: side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
@@ -60,7 +107,7 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
       }
     }
   } : {
-    side: -1,
+    side: side,
     type: TYPE_HANDLE_DEC,
     // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
     testid: "".concat(TYPE_HANDLE_DEC, "-").concat(uuid()),
@@ -83,13 +130,14 @@ export var dragHandleDecoration = function dragHandleDecoration(_ref) {
       try {
         return getPosUnsafe();
       } catch (e) {
+        // Ignore errors from getPosUnsafe
         return undefined;
       }
     };
     var newPos = getPos();
     if (typeof newPos === 'number') {
-      var $pos = view.state.doc.resolve(newPos);
-      isTopLevelNode = ($pos === null || $pos === void 0 ? void 0 : $pos.parent.type.name) === 'doc';
+      var _$pos = view.state.doc.resolve(newPos);
+      isTopLevelNode = (_$pos === null || _$pos === void 0 ? void 0 : _$pos.parent.type.name) === 'doc';
     }
     /*
      * We disable mouseover event to fix flickering issue on hover

package/dist/esm/pm-plugins/utils/marks.js

@@ -1,3 +1,6 @@
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+
 /**
  * Returns list of block marks on schema that widgets are allowed to render inside
  * Currently
@@ -15,9 +18,36 @@
 export var getActiveBlockMarks = function getActiveBlockMarks(state, pos) {
   var alignment = state.schema.marks.alignment;
   var resolvedPos = state.doc.resolve(pos);
+
   // find all active marks at the position
   var marks = resolvedPos.marks();
-  return marks.filter(function (mark) {
+  var supportedMarks = marks.filter(function (mark) {
     return mark.type === alignment;
   });
+
+  /**
+   * Fix for widget positioning at alignment mark boundaries.
+   * When the previous node has alignment but the next node doesn't, we need to prevent
+   * the widget from inheriting alignment marks. This ensures the widget is positioned
+   * correctly at the boundary rather than being absorbed into the alignment wrapper.
+   */
+  if (supportedMarks.length > 0 && expValEquals('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && fg('platform_editor_native_anchor_patch_1')) {
+    var _resolvedPos$nodeAfte;
+    var nextNodeMarks = ((_resolvedPos$nodeAfte = resolvedPos.nodeAfter) === null || _resolvedPos$nodeAfte === void 0 ? void 0 : _resolvedPos$nodeAfte.marks.filter(function (mark) {
+      return mark.type === alignment;
+    })) || [];
+
+    // Compare alignment values to ensure they are the same
+    var alignmentValuesMatch = supportedMarks.length === nextNodeMarks.length && supportedMarks.some(function (mark) {
+      return nextNodeMarks.some(function (nextMark) {
+        return nextMark.eq(mark);
+      });
+    });
+
+    // previous node has alignment but next node does not have alignment or alignment values differ
+    if (nextNodeMarks.length === 0 || !alignmentValuesMatch) {
+      return [];
+    }
+  }
+  return supportedMarks;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "7.13.3",
+	"version": "7.14.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,7 +28,7 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.5.1",
+		"@atlaskit/adf-schema": "^51.5.0",
 		"@atlaskit/browser-apis": "^0.0.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^6.0.0",
 		"@atlaskit/editor-plugin-analytics": "^6.2.0",
@@ -43,10 +43,10 @@
 		"@atlaskit/editor-plugin-type-ahead": "^6.5.0",
 		"@atlaskit/editor-plugin-user-intent": "^4.0.0",
 		"@atlaskit/editor-plugin-width": "^7.0.0",
-		"@atlaskit/editor-prosemirror": "7.0.0",
+		"@atlaskit/editor-prosemirror": "^7.2.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^29.0.0",
+		"@atlaskit/icon": "^29.1.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -54,7 +54,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^16.4.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^15.6.0",
+		"@atlaskit/tmp-editor-statsig": "^15.10.0",
 		"@atlaskit/tokens": "^8.4.0",
 		"@atlaskit/tooltip": "^20.11.0",
 		"@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^110.41.0",
+		"@atlaskit/editor-common": "^110.42.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
@@ -151,6 +151,9 @@
 		},
 		"platform_editor_toolbar_aifc_user_intent_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_native_anchor_patch_1": {
+			"type": "boolean"
 		}
 	}
 }