fix(entity-reference): fix handling overlapping marks on click event (#…

…1794)

* fix(entity-reference): fix handling overlapping marks on click event

The extension uses `click` event instead of `clickMark`
The `onClick` callback receives the mark attributes, it's range and it's text as opposed to just the attributes
Fix handling of overlapping marks on click position

Co-authored-by: Idriss mahjoubi <mahjoubi.idriss@gmail.com>

.changeset/gorgeous-bulldogs-look.md

@@ -0,0 +1,5 @@
+---
+'@remirror/extension-entity-reference': minor
+---
+
+Update pnpm-lock.yaml

.changeset/twelve-meals-report.md

@@ -0,0 +1,5 @@
+---
+'@remirror/extension-entity-reference': minor
+---
+
+Click event receives all entity reference marks, their ranges and their respective text on the clicked position

packages/remirror__extension-entity-reference/__tests__/entity-reference-extension.spec.ts

@@ -288,7 +288,7 @@ describe('EntityReference marks', () => {
 
       view.someProp('handleClickOn', (fn) => fn(view, 2, node, 1, {} as MouseEvent, false));
       expect(onClickMark).toHaveBeenCalledTimes(1);
-      expect(onClickMark).toHaveBeenCalledWith(entityReference.id);
+      expect(onClickMark).toHaveBeenCalledWith([entityReference]);
     });
 
     it('responds to clicks and passes no argument if click is not a mark', () => {

packages/remirror__extension-entity-reference/__tests__/tsconfig.json

@@ -34,6 +34,9 @@
     {
       "path": "../../remirror__core/src"
     },
+    {
+      "path": "../../remirror__extension-events/src"
+    },
     {
       "path": "../../remirror__extension-positioner/src"
     },

packages/remirror__extension-entity-reference/src/entity-reference-extension.ts

@@ -6,7 +6,6 @@ import {
   CreateExtensionPlugin,
   EditorState,
   extension,
-  GetMarkRange,
   getTextSelection,
   Helper,
   helper,
@@ -30,7 +29,6 @@ import { EntityReferenceMetaData, EntityReferenceOptions } from './types';
 import { decorateEntityReferences } from './utils/decorate-entity-references';
 import { getDisjoinedEntityReferencesFromNode } from './utils/disjoined-entity-references';
 import { joinDisjoinedEntityReferences } from './utils/joined-entity-references';
-import { getShortestEntityReference } from './utils/shortest-entity-reference';
 
 /**
  *  Required props to create entityReference marks decorations.
@@ -118,18 +116,14 @@ export class EntityReferenceExtension extends MarkExtension<EntityReferenceOptio
        * 2. the id of the clicked entity reference
        * 3. id of the shortest entity reference in case of overlapping entities
        */
-      clickMark: (_event, clickState) => {
-        const { markRanges } = clickState;
-
-        const entityReferences = markRanges.filter(({ mark }) => mark.type.name === this.name);
+      click: (_event, clickState) => {
+        const entityReferences = this.getEntityReferencesAt(clickState.pos);
 
         if (entityReferences.length === 0) {
           return this.options.onClickMark();
         }
 
-        const shortestMark = getShortestEntityReference(entityReferences) as GetMarkRange;
-
-        return this.options.onClickMark(shortestMark.mark.attrs.id);
+        return this.options.onClickMark(entityReferences);
       },
     };
   }

packages/remirror__extension-entity-reference/src/tsconfig.json

@@ -19,6 +19,9 @@
     {
       "path": "../../remirror__core/src"
     },
+    {
+      "path": "../../remirror__extension-events/src"
+    },
     {
       "path": "../../remirror__extension-positioner/src"
     },

packages/remirror__extension-entity-reference/src/types.ts

@@ -24,7 +24,7 @@ export interface EntityReferenceOptions {
    */
   getStyle?: (entityReferences: EntityReferenceMetaData[][]) => Decoration[];
   blockSeparator?: AcceptUndefined<string>;
-  onClickMark?: (id?: string) => void;
+  onClickMark?: (entityReferences?: EntityReferenceMetaData[]) => void;
 }
 
 export interface EntityReferencePluginState extends Required<EntityReferenceOptions> {

support/root/.size-limit.json

@@ -290,7 +290,12 @@
     "name": "@remirror/extension-entity-reference",
     "limit": "5 KB",
     "path": "packages/remirror__extension-entity-reference/dist/remirror-extension-entity-reference.js",
-    "ignore": ["@remirror/pm", "@remirror/core", "@remirror/extension-positioner"],
+    "ignore": [
+      "@remirror/pm",
+      "@remirror/core",
+      "@remirror/extension-events",
+      "@remirror/extension-positioner"
+    ],
     "running": false,
     "gzip": true
   },