@soomo/react-text-annotator 3.0.0-staging.30 → 3.0.0-staging.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"TextAnnotatorPopup.d.ts","sourceRoot":"","sources":["../src/TextAnnotatorPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAkD,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,KAAK,cAAc,EAAsB,MAAM,uBAAuB,CAAC;AAYhF,UAAU,wBAAwB;IAEhC,KAAK,CAAC,KAAK,EAAE,uBAAuB,GAAG,SAAS,CAAC;CAElD;AAED,MAAM,WAAW,uBAAuB;IAEtC,QAAQ,EAAE;QAAE,UAAU,EAAE,cAAc,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAEhE;AAED,eAAO,MAAM,kBAAkB,UAAW,wBAAwB,4CAuEjE,CAAA"}
1
+ {"version":3,"file":"TextAnnotatorPopup.d.ts","sourceRoot":"","sources":["../src/TextAnnotatorPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgB,SAAS,EAAoC,MAAM,OAAO,CAAC;AAElF,OAAO,EAA4C,KAAK,cAAc,EAAsB,MAAM,uBAAuB,CAAC;AAY1H,UAAU,wBAAwB;IAEhC,KAAK,CAAC,KAAK,EAAE,uBAAuB,GAAG,SAAS,CAAC;CAElD;AAED,MAAM,WAAW,uBAAuB;IAEtC,QAAQ,EAAE;QAAE,UAAU,EAAE,cAAc,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,EAAE,CAAC;CAEhE;AAED,eAAO,MAAM,kBAAkB,UAAW,wBAAwB,4CA0EjE,CAAA"}
@@ -1 +1 @@
1
- .r6o-canvas-highlight-layer{position:fixed;top:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none}.r6o-canvas-highlight-layer.bg{mix-blend-mode:multiply;z-index:1}.r6o-annotatable .r6o-span-highlight-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}.r6o-annotatable .r6o-span-highlight-layer.hidden{display:none}.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation{position:absolute;display:block;border-width:0;border-style:solid}.r6o-annotation{box-sizing:content-box}.r6o-presence-layer{left:0;position:fixed;top:0;bottom:0;width:100vw;pointer-events:none}html,body{overscroll-behavior-y:none}.r6o-annotatable{position:relative;-webkit-tap-highlight-color:transparent}.hovered *{cursor:pointer}*::selection,::selection{background:#0080ff2e}::-moz-selection{background:#0080ff2e}
1
+ .r6o-canvas-highlight-layer{position:fixed;top:0;bottom:0;left:0;width:100vw;height:100vh;pointer-events:none}.r6o-canvas-highlight-layer.bg{mix-blend-mode:multiply;z-index:1}.r6o-annotatable .r6o-span-highlight-layer{height:100%;left:0;mix-blend-mode:multiply;pointer-events:none;position:absolute;top:0;width:100%}.r6o-annotatable .r6o-span-highlight-layer.hidden{display:none}.r6o-annotatable .r6o-span-highlight-layer .r6o-annotation{border-style:solid;border-width:0;box-sizing:content-box;display:block;position:absolute}.r6o-annotation{box-sizing:content-box}.r6o-presence-layer{left:0;position:fixed;top:0;bottom:0;width:100vw;pointer-events:none}html,body{overscroll-behavior-y:none}.r6o-annotatable{position:relative;-webkit-tap-highlight-color:transparent}.hovered *{cursor:pointer}*::selection,::selection{background:#0080ff2e}::-moz-selection{background:#0080ff2e}
@@ -1,6 +1,7 @@
1
1
  import { j as jsxRuntimeExports } from "./react-text-annotator.es7.js";
2
2
  import { useState, useEffect, useCallback } from "react";
3
3
  import { useAnnotator, useSelection } from "@annotorious/react";
4
+ import { denormalizeRectWithOffset, toDomRectList } from "@soomo/text-annotator";
4
5
  import { useFloating, useDismiss, useRole, useInteractions } from "./react-text-annotator.es9.js";
5
6
  import { offset, inline, shift } from "./react-text-annotator.es10.js";
6
7
  import { autoUpdate } from "./react-text-annotator.es11.js";
@@ -36,17 +37,21 @@ const TextAnnotatorPopup = (props) => {
36
37
  }
37
38
  }, [pointerEvent == null ? void 0 : pointerEvent.type, selectedKey]);
38
39
  useEffect(() => {
39
- if (!isOpen || !annotation) return;
40
- const {
41
- target: {
42
- selector: [{ range }]
43
- }
44
- } = annotation;
40
+ if (!isOpen || !(annotation == null ? void 0 : annotation.id) || !r) return;
45
41
  refs.setPositionReference({
46
- getBoundingClientRect: range.getBoundingClientRect.bind(range),
47
- getClientRects: range.getClientRects.bind(range)
42
+ getBoundingClientRect: () => denormalizeRectWithOffset(
43
+ r.state.store.getAnnotationBounds(annotation.id),
44
+ r.element.getBoundingClientRect()
45
+ ),
46
+ getClientRects: () => {
47
+ const rects = r.state.store.getAnnotationRects(annotation.id);
48
+ const denormalizedRects = rects.map(
49
+ (rect) => denormalizeRectWithOffset(rect, r.element.getBoundingClientRect())
50
+ );
51
+ return toDomRectList(denormalizedRects);
52
+ }
48
53
  });
49
- }, [isOpen, annotation, refs]);
54
+ }, [isOpen, annotation == null ? void 0 : annotation.id, r]);
50
55
  const getStopEventsPropagationProps = useCallback(
51
56
  () => ({ onPointerUp: (event) => event.stopPropagation() }),
52
57
  []
@@ -1 +1 @@
1
- {"version":3,"file":"react-text-annotator.es5.js","sources":["../src/TextAnnotatorPopup.tsx"],"sourcesContent":["import { ReactNode, useCallback, useEffect, useState, PointerEvent } from 'react';\nimport { useAnnotator, useSelection } from '@annotorious/react';\nimport { type TextAnnotation, type TextAnnotator } from '@soomo/text-annotator';\nimport {\n autoUpdate,\n inline,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole\n} from '@floating-ui/react';\n\ninterface TextAnnotationPopupProps {\n\n popup(props: TextAnnotatorPopupProps): ReactNode;\n\n}\n\nexport interface TextAnnotatorPopupProps {\n\n selected: { annotation: TextAnnotation, editable?: boolean }[];\n\n}\n\nexport const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {\n const r = useAnnotator<TextAnnotator>();\n\n const { selected, pointerEvent } = useSelection<TextAnnotation>();\n\n const annotation = selected[0]?.annotation;\n\n const [isOpen, setOpen] = useState(selected?.length > 0);\n\n const { refs, floatingStyles, context } = useFloating({\n placement: 'top',\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n setOpen(open);\n if (!open && reason === 'escape-key') {\n r?.cancelSelected();\n }\n },\n middleware: [\n offset(10),\n inline(),\n\n shift({ mainAxis: false, crossAxis: true, padding: 10 })\n ],\n whileElementsMounted: autoUpdate\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context, { role: 'tooltip' });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n const selectedKey = selected.map(a => a.annotation.id).join('-');\n useEffect(() => {\n // Ignore all selection changes except those accompanied by a pointer event.\n if (pointerEvent) {\n setOpen(selected.length > 0 && pointerEvent.type === 'pointerup');\n }\n }, [pointerEvent?.type, selectedKey]);\n\n useEffect(() => {\n if (!isOpen || !annotation) return;\n\n const {\n target: {\n selector: [{ range }]\n }\n } = annotation;\n\n refs.setPositionReference({\n getBoundingClientRect: range.getBoundingClientRect.bind(range),\n getClientRects: range.getClientRects.bind(range)\n });\n }, [isOpen, annotation, refs]);\n\n // Prevent text-annotator from handling the irrelevant events triggered from the popup\n const getStopEventsPropagationProps = useCallback(\n () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),\n []\n );\n\n return isOpen && selected.length > 0 ? (\n <div\n className=\"annotation-popup text-annotation-popup not-annotatable\"\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps()}\n {...getStopEventsPropagationProps()}>\n {props.popup({ selected })}\n </div>\n ) : null;\n\n}\n"],"names":["jsx"],"mappings":";;;;;;AA0Ba,MAAA,qBAAqB,CAAC,UAAoC;;AACrE,QAAM,IAAI;AAEV,QAAM,EAAE,UAAU,aAAa,IAAI,aAA6B;AAE1D,QAAA,cAAa,cAAS,CAAC,MAAV,mBAAa;AAEhC,QAAM,CAAC,QAAQ,OAAO,IAAI,UAAS,qCAAU,UAAS,CAAC;AAEvD,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAAY;AAAA,IACpD,WAAW;AAAA,IACX,MAAM;AAAA,IACN,cAAc,CAAC,MAAM,QAAQ,WAAW;AACtC,cAAQ,IAAI;AACR,UAAA,CAAC,QAAQ,WAAW,cAAc;AACpC,+BAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,EAAE;AAAA,MACT,OAAO;AAAA,MAEP,MAAM,EAAE,UAAU,OAAO,WAAW,MAAM,SAAS,IAAI;AAAA,IACzD;AAAA,IACA,sBAAsB;AAAA,EAAA,CACvB;AAEK,QAAA,UAAU,WAAW,OAAO;AAClC,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,WAAW;AACjD,QAAM,EAAE,iBAAiB,IAAI,gBAAgB,CAAC,SAAS,IAAI,CAAC;AAEtD,QAAA,cAAc,SAAS,IAAI,CAAA,MAAK,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG;AAC/D,YAAU,MAAM;AAEd,QAAI,cAAc;AAChB,cAAQ,SAAS,SAAS,KAAK,aAAa,SAAS,WAAW;AAAA,IAClE;AAAA,EACC,GAAA,CAAC,6CAAc,MAAM,WAAW,CAAC;AAEpC,YAAU,MAAM;AACV,QAAA,CAAC,UAAU,CAAC,WAAY;AAEtB,UAAA;AAAA,MACJ,QAAQ;AAAA,QACN,UAAU,CAAC,EAAE,OAAO;AAAA,MACtB;AAAA,IACE,IAAA;AAEJ,SAAK,qBAAqB;AAAA,MACxB,uBAAuB,MAAM,sBAAsB,KAAK,KAAK;AAAA,MAC7D,gBAAgB,MAAM,eAAe,KAAK,KAAK;AAAA,IAAA,CAChD;AAAA,EACA,GAAA,CAAC,QAAQ,YAAY,IAAI,CAAC;AAG7B,QAAM,gCAAgC;AAAA,IACpC,OAAO,EAAE,aAAa,CAAC,UAAwC,MAAM,gBAAkB,EAAA;AAAA,IACvF,CAAC;AAAA,EAAA;AAGI,SAAA,UAAU,SAAS,SAAS,IACjCA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACN,GAAG,iBAAiB;AAAA,MACpB,GAAG,8BAA8B;AAAA,MACjC,UAAM,MAAA,MAAM,EAAE,SAAA,CAAU;AAAA,IAAA;AAAA,EAEzB,IAAA;AAEN;"}
1
+ {"version":3,"file":"react-text-annotator.es5.js","sources":["../src/TextAnnotatorPopup.tsx"],"sourcesContent":["import { PointerEvent, ReactNode, useCallback, useEffect, useState } from 'react';\nimport { useAnnotator, useSelection } from '@annotorious/react';\nimport { toDomRectList, denormalizeRectWithOffset, type TextAnnotation, type TextAnnotator } from '@soomo/text-annotator';\nimport {\n autoUpdate,\n inline,\n offset,\n shift,\n useDismiss,\n useFloating,\n useInteractions,\n useRole\n} from '@floating-ui/react';\n\ninterface TextAnnotationPopupProps {\n\n popup(props: TextAnnotatorPopupProps): ReactNode;\n\n}\n\nexport interface TextAnnotatorPopupProps {\n\n selected: { annotation: TextAnnotation, editable?: boolean }[];\n\n}\n\nexport const TextAnnotatorPopup = (props: TextAnnotationPopupProps) => {\n const r = useAnnotator<TextAnnotator>();\n\n const { selected, pointerEvent } = useSelection<TextAnnotation>();\n\n const annotation = selected[0]?.annotation;\n\n const [isOpen, setOpen] = useState(selected?.length > 0);\n\n const { refs, floatingStyles, context } = useFloating({\n placement: 'top',\n open: isOpen,\n onOpenChange: (open, _event, reason) => {\n setOpen(open);\n if (!open && reason === 'escape-key') {\n r?.cancelSelected();\n }\n },\n middleware: [\n offset(10),\n inline(),\n\n shift({ mainAxis: false, crossAxis: true, padding: 10 })\n ],\n whileElementsMounted: autoUpdate\n });\n\n const dismiss = useDismiss(context);\n const role = useRole(context, { role: 'tooltip' });\n const { getFloatingProps } = useInteractions([dismiss, role]);\n\n const selectedKey = selected.map(a => a.annotation.id).join('-');\n useEffect(() => {\n // Ignore all selection changes except those accompanied by a pointer event.\n if (pointerEvent) {\n setOpen(selected.length > 0 && pointerEvent.type === 'pointerup');\n }\n }, [pointerEvent?.type, selectedKey]);\n\n useEffect(() => {\n if (!isOpen || !annotation?.id || !r) return;\n\n refs.setPositionReference({\n getBoundingClientRect: () => denormalizeRectWithOffset(\n r.state.store.getAnnotationBounds(annotation.id),\n r.element.getBoundingClientRect()\n ),\n getClientRects: () => {\n const rects = r.state.store.getAnnotationRects(annotation.id);\n const denormalizedRects = rects.map(\n rect => denormalizeRectWithOffset(rect, r.element.getBoundingClientRect())\n );\n return toDomRectList(denormalizedRects);\n }\n });\n }, [isOpen, annotation?.id, r]);\n\n // Prevent text-annotator from handling the irrelevant events triggered from the popup\n const getStopEventsPropagationProps = useCallback(\n () => ({ onPointerUp: (event: PointerEvent<HTMLDivElement>) => event.stopPropagation() }),\n []\n );\n\n return isOpen && selected.length > 0 ? (\n <div\n className=\"annotation-popup text-annotation-popup not-annotatable\"\n ref={refs.setFloating}\n style={floatingStyles}\n {...getFloatingProps()}\n {...getStopEventsPropagationProps()}>\n {props.popup({ selected })}\n </div>\n ) : null;\n\n}\n"],"names":["jsx"],"mappings":";;;;;;;AA0Ba,MAAA,qBAAqB,CAAC,UAAoC;;AACrE,QAAM,IAAI;AAEV,QAAM,EAAE,UAAU,aAAa,IAAI,aAA6B;AAE1D,QAAA,cAAa,cAAS,CAAC,MAAV,mBAAa;AAEhC,QAAM,CAAC,QAAQ,OAAO,IAAI,UAAS,qCAAU,UAAS,CAAC;AAEvD,QAAM,EAAE,MAAM,gBAAgB,QAAA,IAAY,YAAY;AAAA,IACpD,WAAW;AAAA,IACX,MAAM;AAAA,IACN,cAAc,CAAC,MAAM,QAAQ,WAAW;AACtC,cAAQ,IAAI;AACR,UAAA,CAAC,QAAQ,WAAW,cAAc;AACpC,+BAAG;AAAA,MACL;AAAA,IACF;AAAA,IACA,YAAY;AAAA,MACV,OAAO,EAAE;AAAA,MACT,OAAO;AAAA,MAEP,MAAM,EAAE,UAAU,OAAO,WAAW,MAAM,SAAS,IAAI;AAAA,IACzD;AAAA,IACA,sBAAsB;AAAA,EAAA,CACvB;AAEK,QAAA,UAAU,WAAW,OAAO;AAClC,QAAM,OAAO,QAAQ,SAAS,EAAE,MAAM,WAAW;AACjD,QAAM,EAAE,iBAAiB,IAAI,gBAAgB,CAAC,SAAS,IAAI,CAAC;AAEtD,QAAA,cAAc,SAAS,IAAI,CAAA,MAAK,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG;AAC/D,YAAU,MAAM;AAEd,QAAI,cAAc;AAChB,cAAQ,SAAS,SAAS,KAAK,aAAa,SAAS,WAAW;AAAA,IAClE;AAAA,EACC,GAAA,CAAC,6CAAc,MAAM,WAAW,CAAC;AAEpC,YAAU,MAAM;AACd,QAAI,CAAC,UAAU,EAAC,yCAAY,OAAM,CAAC,EAAG;AAEtC,SAAK,qBAAqB;AAAA,MACxB,uBAAuB,MAAM;AAAA,QAC3B,EAAE,MAAM,MAAM,oBAAoB,WAAW,EAAE;AAAA,QAC/C,EAAE,QAAQ,sBAAsB;AAAA,MAClC;AAAA,MACA,gBAAgB,MAAM;AACpB,cAAM,QAAQ,EAAE,MAAM,MAAM,mBAAmB,WAAW,EAAE;AAC5D,cAAM,oBAAoB,MAAM;AAAA,UAC9B,UAAQ,0BAA0B,MAAM,EAAE,QAAQ,uBAAuB;AAAA,QAAA;AAE3E,eAAO,cAAc,iBAAiB;AAAA,MACxC;AAAA,IAAA,CACD;AAAA,KACA,CAAC,QAAQ,yCAAY,IAAI,CAAC,CAAC;AAG9B,QAAM,gCAAgC;AAAA,IACpC,OAAO,EAAE,aAAa,CAAC,UAAwC,MAAM,gBAAkB,EAAA;AAAA,IACvF,CAAC;AAAA,EAAA;AAGI,SAAA,UAAU,SAAS,SAAS,IACjCA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACN,GAAG,iBAAiB;AAAA,MACpB,GAAG,8BAA8B;AAAA,MACjC,UAAM,MAAA,MAAM,EAAE,SAAA,CAAU;AAAA,IAAA;AAAA,EAEzB,IAAA;AAEN;"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@soomo/react-text-annotator",
3
- "version": "3.0.0-staging.30",
3
+ "version": "3.0.0-staging.31",
4
4
  "description": "Recogito Text Annotator React bindings",
5
5
  "author": "Rainer Simon",
6
6
  "license": "BSD-3-Clause",
@@ -48,7 +48,7 @@
48
48
  "@annotorious/core": "^3.0.0-rc.30",
49
49
  "@annotorious/react": "^3.0.0-rc.30",
50
50
  "@floating-ui/react": "^0.26.19",
51
- "@soomo/text-annotator": "3.0.0-staging.30",
51
+ "@soomo/text-annotator": "3.0.0-staging.31",
52
52
  "@recogito/text-annotator-tei": "3.0.0-rc.36",
53
53
  "CETEIcean": "^1.9.3"
54
54
  }