@soomo/react-text-annotator 3.0.0-staging.7 → 3.0.0-staging.9

package/dist/react-text-annotator.es5.js

@@ -1,51 +1,75 @@
 import { j as jsxRuntimeExports } from "./react-text-annotator.es6.js";
-import { createPortal } from "react-dom";
-import { useRef, useState, useEffect } from "react";
-import { useAnnotator, useSelection } from "@annotorious/react";
+import { useState, useEffect } from "react";
+import { useSelection } from "@annotorious/react";
+import { getClosestRect, toClientRects } from "./react-text-annotator.es8.js";
+import { useFloating } from "./react-text-annotator.es9.js";
+import { autoPlacement, inline, offset, shift, autoUpdate } from "./react-text-annotator.es10.js";
 const TextAnnotatorPopup = (props) => {
-  const el = useRef(null);
-  const r = useAnnotator();
-  const [open, setOpen] = useState(false);
   const { selected, pointerEvent } = useSelection();
+  const [mousePos, setMousePos] = useState();
+  const [isOpen, setIsOpen] = useState((selected == null ? void 0 : selected.length) > 0);
+  const { refs, floatingStyles, update } = useFloating({
+    open: isOpen,
+    onOpenChange: setIsOpen,
+    middleware: [
+      autoPlacement({ crossAxis: true, padding: 5 }),
+      inline(),
+      offset(5),
+      shift({ crossAxis: true, padding: 5 })
+    ],
+    whileElementsMounted: autoUpdate
+  });
   useEffect(() => {
     if (pointerEvent) {
       if (selected.length > 0 && pointerEvent.type === "pointerup") {
-        setOpen(true);
+        setIsOpen(true);
       } else {
-        setOpen(false);
+        setIsOpen(false);
       }
     }
   }, [pointerEvent, selected.map((a) => a.annotation.id).join("-")]);
   useEffect(() => {
-    if (!(pointerEvent && open && (r == null ? void 0 : r.element)))
-      return;
-    const { left, top } = r.element.getBoundingClientRect();
-    let x = pointerEvent.clientX - left;
-    let y = pointerEvent.clientY - top;
-    const { id } = selected[0].annotation;
-    const { offsetX, offsetY } = pointerEvent;
-    const bounds = r.state.store.getAnnotationBounds(id, offsetX, offsetY);
-    if (bounds) {
-      x = Math.max(x, bounds.x - left);
-      x = Math.min(x, bounds.right - left);
-    }
-    el.current.style.left = `${x}px`;
-    el.current.style.top = `${y}px`;
-  }, [open, pointerEvent, r == null ? void 0 : r.element]);
-  const onPointerUp = (evt) => evt.stopPropagation();
-  return open && selected.length > 0 ? createPortal(
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
-      {
-        ref: el,
-        className: "a9s-popup r6o-popup not-annotatable",
-        style: { position: "absolute" },
-        onPointerUp,
-        children: props.popup({ selected })
+    if ((selected == null ? void 0 : selected.length) > 0) {
+      const selector = selected[0].annotation.target.selector;
+      const range = Array.isArray(selector) ? selector[0].range : selector.range;
+      if (range && !range.collapsed) {
+        refs.setReference({
+          getBoundingClientRect: () => {
+            return range.getBoundingClientRect();
+          },
+          getClientRects: () => {
+            const rect = mousePos ? getClosestRect(range.getClientRects(), mousePos) : range.getClientRects()[0];
+            return toClientRects(rect);
+          }
+        });
       }
-    ),
-    r.element
-  ) : null;
+    }
+  }, [open, selected, mousePos]);
+  useEffect(() => {
+    const onPointerUp = (event) => {
+      const { clientX, clientY } = event;
+      setMousePos({ x: clientX, y: clientY });
+    };
+    const config = { attributes: true, childList: true, subtree: true };
+    const mutationObserver = new MutationObserver(() => update());
+    mutationObserver.observe(document.body, config);
+    window.document.addEventListener("scroll", update, true);
+    window.document.addEventListener("pointerup", onPointerUp);
+    return () => {
+      mutationObserver.disconnect();
+      window.document.removeEventListener("scroll", update, true);
+      window.document.removeEventListener("pointerup", onPointerUp);
+    };
+  }, [update]);
+  return isOpen && selected.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "annotation-popup text-annotation-popup not-annotatable",
+      ref: refs.setFloating,
+      style: floatingStyles,
+      children: props.popup({ selected })
+    }
+  );
 };
 export {
   TextAnnotatorPopup

package/dist/react-text-annotator.es5.js.map

@@ -1 +1 @@
-{"version":3,"file":"react-text-annotator.es5.js","sources":["../src/TextAnnotatorPopup.tsx"],"sourcesContent":["import { createPortal } from 'react-dom';\nimport { ReactNode, useEffect, useRef, useState } from 'react';\nimport { TextAnnotator, TextAnnotation, TextAnnotatorState } from '@soomo/text-annotator';\nimport { useAnnotator, useSelection } from '@annotorious/react';\n\nexport interface TextAnnotatorPopupProps {\n\n  selected: { annotation: TextAnnotation, editable?: boolean }[];\n\n}\n\nexport interface TextAnnotatorPopupContainerProps {\n\n  popup(props: TextAnnotatorPopupProps): ReactNode | JSX.Element;\n\n}\n\nexport const TextAnnotatorPopup = (props: TextAnnotatorPopupContainerProps) => {\n\n  const el = useRef<HTMLDivElement>(null);\n\n  const r = useAnnotator<TextAnnotator>();\n\n  const [open, setOpen] = useState(false);\n\n  const { selected, pointerEvent } = useSelection<TextAnnotation>();\n\n  useEffect(() => {\n    // Ignore all selection changes except those\n    // accompanied by a pointer event.\n    if (pointerEvent) {\n      if (selected.length > 0 && pointerEvent.type === 'pointerup') {\n        setOpen(true);\n      } else {\n        setOpen(false);\n      }\n    }\n  }, [pointerEvent, selected.map(a => a.annotation.id).join('-')]);\n\n  useEffect(() => {\n    if (!(pointerEvent && open && r?.element))\n      return;\n\n    const { left, top } = r.element.getBoundingClientRect();\n    let x = pointerEvent.clientX - left;\n    let y = pointerEvent.clientY - top;\n\n    const { id } = selected[0].annotation;\n    const { offsetX, offsetY } = pointerEvent;\n    const bounds = (r.state as TextAnnotatorState).store.getAnnotationBounds(id, offsetX, offsetY);\n    \n    if (bounds) {\n      x = Math.max(x, bounds.x - left);\n      x = Math.min(x, bounds.right - left);\n    }\n\n    el.current.style.left = `${x}px`;\n    el.current.style.top = `${y}px`;\n  }, [open, pointerEvent, r?.element]);\n\n  const onPointerUp = (evt: React.PointerEvent<HTMLDivElement>) =>\n    evt.stopPropagation();\n  \n  return (open && selected.length > 0) ? createPortal(\n    <div \n      ref={el}\n      className=\"a9s-popup r6o-popup not-annotatable\"\n      style={{ position: 'absolute' }}\n      onPointerUp={onPointerUp}>\n\n      {props.popup({ selected })}\n      \n    </div>, r.element\n  ) : null;\n\n}\n"],"names":["jsx"],"mappings":";;;;AAiBa,MAAA,qBAAqB,CAAC,UAA4C;AAEvE,QAAA,KAAK,OAAuB,IAAI;AAEtC,QAAM,IAAI;AAEV,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AAEtC,QAAM,EAAE,UAAU,aAAa,IAAI,aAA6B;AAEhE,YAAU,MAAM;AAGd,QAAI,cAAc;AAChB,UAAI,SAAS,SAAS,KAAK,aAAa,SAAS,aAAa;AAC5D,gBAAQ,IAAI;AAAA,MAAA,OACP;AACL,gBAAQ,KAAK;AAAA,MACf;AAAA,IACF;AAAA,EACC,GAAA,CAAC,cAAc,SAAS,IAAI,CAAA,MAAK,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC;AAE/D,YAAU,MAAM;AACV,QAAA,EAAE,gBAAgB,SAAQ,uBAAG;AAC/B;AAEF,UAAM,EAAE,MAAM,IAAA,IAAQ,EAAE,QAAQ;AAC5B,QAAA,IAAI,aAAa,UAAU;AAC3B,QAAA,IAAI,aAAa,UAAU;AAE/B,UAAM,EAAE,GAAO,IAAA,SAAS,CAAC,EAAE;AACrB,UAAA,EAAE,SAAS,QAAY,IAAA;AAC7B,UAAM,SAAU,EAAE,MAA6B,MAAM,oBAAoB,IAAI,SAAS,OAAO;AAE7F,QAAI,QAAQ;AACV,UAAI,KAAK,IAAI,GAAG,OAAO,IAAI,IAAI;AAC/B,UAAI,KAAK,IAAI,GAAG,OAAO,QAAQ,IAAI;AAAA,IACrC;AAEA,OAAG,QAAQ,MAAM,OAAO,GAAG,CAAC;AAC5B,OAAG,QAAQ,MAAM,MAAM,GAAG,CAAC;AAAA,KAC1B,CAAC,MAAM,cAAc,uBAAG,OAAO,CAAC;AAEnC,QAAM,cAAc,CAAC,QACnB,IAAI,gBAAgB;AAEd,SAAA,QAAQ,SAAS,SAAS,IAAK;AAAA,IACrCA,kCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK;AAAA,QACL,WAAU;AAAA,QACV,OAAO,EAAE,UAAU,WAAW;AAAA,QAC9B;AAAA,QAEC,UAAM,MAAA,MAAM,EAAE,SAAA,CAAU;AAAA,MAAA;AAAA,IAE3B;AAAA,IAAQ,EAAE;AAAA,EACR,IAAA;AAEN;"}
+{"version":3,"file":"react-text-annotator.es5.js","sources":["../src/TextAnnotatorPopup.tsx"],"sourcesContent":["import { ReactNode, useEffect, useState } from 'react';\nimport { useSelection } from '@annotorious/react';\nimport type { TextAnnotation, TextSelector } from '@soomo/text-annotator';\nimport { getClosestRect, toClientRects } from './utils';\nimport {\n  autoPlacement,\n  autoUpdate,\n  inline,\n  offset,\n  shift,\n  useFloating\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\n  const { selected, pointerEvent } = useSelection<TextAnnotation>();\n\n  const [mousePos, setMousePos] = useState<{ x: number, y: number } | undefined>();\n\n  const [isOpen, setIsOpen] = useState(selected?.length > 0);\n\n  const { refs, floatingStyles, update } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    middleware: [\n      autoPlacement({ crossAxis: true, padding: 5 }),\n      inline(),\n      offset(5),\n      shift({ crossAxis: true, padding: 5 })\n    ],\n    whileElementsMounted: autoUpdate\n  });\n\n  useEffect(() => {\n    // Ignore all selection changes except those\n    // accompanied by a pointer event.\n    if (pointerEvent) {\n      if (selected.length > 0 && pointerEvent.type === 'pointerup') {\n        setIsOpen(true);\n      } else {\n        setIsOpen(false);\n      }\n    }\n  }, [pointerEvent, selected.map(a => a.annotation.id).join('-')]);\n\n  useEffect(() => {\n    if (selected?.length > 0) {\n      const selector = selected[0].annotation.target.selector as (TextSelector | TextSelector[]);\n      const range = Array.isArray(selector) ? selector[0].range : selector.range;\n\n      if (range && !range.collapsed) {\n        refs.setReference({\n          getBoundingClientRect: () => {\n            return range.getBoundingClientRect();\n          },\n          getClientRects: () => {\n            const rect = mousePos\n              ? getClosestRect(range.getClientRects(), mousePos)\n              : range.getClientRects()[0];\n\n            return toClientRects(rect);\n          }\n        });\n      }\n    }\n  }, [open, selected, mousePos]);\n\n  useEffect(() => {\n    const onPointerUp = (event: PointerEvent) => {\n      const { clientX, clientY } = event;\n      setMousePos({ x: clientX, y: clientY });\n    }\n\n    const config: MutationObserverInit = { attributes: true, childList: true, subtree: true };\n\n    const mutationObserver = new MutationObserver(() =>\n      update());\n\n    mutationObserver.observe(document.body, config);\n\n    window.document.addEventListener('scroll', update, true);\n    window.document.addEventListener('pointerup', onPointerUp);\n\n    return () => {\n      mutationObserver.disconnect();\n      window.document.removeEventListener('scroll', update, true);\n      window.document.removeEventListener('pointerup', onPointerUp);\n    }\n  }, [update]);\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      {props.popup({ selected })}\n    </div>\n  )\n\n}\n"],"names":["jsx"],"mappings":";;;;;;AAyBa,MAAA,qBAAqB,CAAC,UAAoC;AAErE,QAAM,EAAE,UAAU,aAAa,IAAI,aAA6B;AAEhE,QAAM,CAAC,UAAU,WAAW,IAAI,SAA+C;AAE/E,QAAM,CAAC,QAAQ,SAAS,IAAI,UAAS,qCAAU,UAAS,CAAC;AAEzD,QAAM,EAAE,MAAM,gBAAgB,OAAA,IAAW,YAAY;AAAA,IACnD,MAAM;AAAA,IACN,cAAc;AAAA,IACd,YAAY;AAAA,MACV,cAAc,EAAE,WAAW,MAAM,SAAS,GAAG;AAAA,MAC7C,OAAO;AAAA,MACP,OAAO,CAAC;AAAA,MACR,MAAM,EAAE,WAAW,MAAM,SAAS,GAAG;AAAA,IACvC;AAAA,IACA,sBAAsB;AAAA,EAAA,CACvB;AAED,YAAU,MAAM;AAGd,QAAI,cAAc;AAChB,UAAI,SAAS,SAAS,KAAK,aAAa,SAAS,aAAa;AAC5D,kBAAU,IAAI;AAAA,MAAA,OACT;AACL,kBAAU,KAAK;AAAA,MACjB;AAAA,IACF;AAAA,EACC,GAAA,CAAC,cAAc,SAAS,IAAI,CAAA,MAAK,EAAE,WAAW,EAAE,EAAE,KAAK,GAAG,CAAC,CAAC;AAE/D,YAAU,MAAM;AACV,SAAA,qCAAU,UAAS,GAAG;AACxB,YAAM,WAAW,SAAS,CAAC,EAAE,WAAW,OAAO;AACzC,YAAA,QAAQ,MAAM,QAAQ,QAAQ,IAAI,SAAS,CAAC,EAAE,QAAQ,SAAS;AAEjE,UAAA,SAAS,CAAC,MAAM,WAAW;AAC7B,aAAK,aAAa;AAAA,UAChB,uBAAuB,MAAM;AAC3B,mBAAO,MAAM;UACf;AAAA,UACA,gBAAgB,MAAM;AACd,kBAAA,OAAO,WACT,eAAe,MAAM,eAAA,GAAkB,QAAQ,IAC/C,MAAM,eAAe,EAAE,CAAC;AAE5B,mBAAO,cAAc,IAAI;AAAA,UAC3B;AAAA,QAAA,CACD;AAAA,MACH;AAAA,IACF;AAAA,EACC,GAAA,CAAC,MAAM,UAAU,QAAQ,CAAC;AAE7B,YAAU,MAAM;AACR,UAAA,cAAc,CAAC,UAAwB;AACrC,YAAA,EAAE,SAAS,QAAY,IAAA;AAC7B,kBAAY,EAAE,GAAG,SAAS,GAAG,QAAS,CAAA;AAAA,IAAA;AAGxC,UAAM,SAA+B,EAAE,YAAY,MAAM,WAAW,MAAM,SAAS;AAEnF,UAAM,mBAAmB,IAAI,iBAAiB,MAC5C,OAAQ,CAAA;AAEO,qBAAA,QAAQ,SAAS,MAAM,MAAM;AAE9C,WAAO,SAAS,iBAAiB,UAAU,QAAQ,IAAI;AAChD,WAAA,SAAS,iBAAiB,aAAa,WAAW;AAEzD,WAAO,MAAM;AACX,uBAAiB,WAAW;AAC5B,aAAO,SAAS,oBAAoB,UAAU,QAAQ,IAAI;AACnD,aAAA,SAAS,oBAAoB,aAAa,WAAW;AAAA,IAAA;AAAA,EAC9D,GACC,CAAC,MAAM,CAAC;AAEH,SAAA,UAAU,SAAS,SAAS,KAClCA,kCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAU;AAAA,MACV,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACN,UAAM,MAAA,MAAM,EAAE,SAAA,CAAU;AAAA,IAAA;AAAA,EAAA;AAI/B;"}

package/dist/react-text-annotator.es6.js

@@ -1,6 +1,6 @@
-import { __module as jsxRuntime } from "./react-text-annotator.es9.js";
-import { __require as requireReactJsxRuntime_production_min } from "./react-text-annotator.es10.js";
-import { __require as requireReactJsxRuntime_development } from "./react-text-annotator.es11.js";
+import { __module as jsxRuntime } from "./react-text-annotator.es12.js";
+import { __require as requireReactJsxRuntime_production_min } from "./react-text-annotator.es13.js";
+import { __require as requireReactJsxRuntime_development } from "./react-text-annotator.es14.js";
 if (process.env.NODE_ENV === "production") {
   jsxRuntime.exports = requireReactJsxRuntime_production_min();
 } else {

package/dist/react-text-annotator.es8.js

@@ -1,491 +1,27 @@
-import defaultBehaviors from "./react-text-annotator.es14.js";
-import * as utilities from "./react-text-annotator.es15.js";
-import { hideContent, defineCustomElement, tagName } from "./react-text-annotator.es15.js";
-import { addBehaviors, addBehavior, removeBehavior } from "./react-text-annotator.es16.js";
-import { learnElementNames, learnCustomElementNames } from "./react-text-annotator.es17.js";
-class CETEI {
-  constructor(options) {
-    this.options = options ? options : {};
-    this.document = this.options.documentObject ? this.options.documentObject : void 0;
-    if (this.document === void 0) {
-      if (typeof window !== "undefined" && window.document) {
-        this.document = window.document;
-      } else if (typeof global !== "undefined" && global.document) {
-        this.document = global.document;
-      }
-    }
-    this.addBehaviors = addBehaviors.bind(this);
-    this.addBehavior = addBehavior.bind(this);
-    this.removeBehavior = removeBehavior.bind(this);
-    this.utilities = {};
-    for (const u of Object.keys(utilities)) {
-      if (["getPrefixDef", "rw", "resolveURI"].includes(u)) {
-        this.utilities[u] = utilities[u].bind(this);
-      } else {
-        this.utilities[u] = utilities[u];
-      }
-    }
-    this.els = [];
-    this.namespaces = /* @__PURE__ */ new Map();
-    this.behaviors = {};
-    this.hasStyle = false;
-    this.prefixDefs = [];
-    this.debug = this.options.debug === true ? true : false;
-    this.discardContent = this.options.discardContent === true ? true : false;
-    if (this.options.base) {
-      this.base = this.options.base;
-    } else {
-      try {
-        if (window) {
-          this.base = window.location.href.replace(/\/[^\/]*$/, "/");
-        }
-      } catch (e) {
-        this.base = "";
-      }
-    }
-    if (!this.options.omitDefaultBehaviors) {
-      this.addBehaviors(defaultBehaviors);
-    }
-    if (this.options.ignoreFragmentId) {
-      if (window) {
-        window.removeEventListener("ceteiceanload", CETEI.restorePosition);
-      }
-    }
-  }
-  /* 
-    Returns a Promise that fetches an XML source document from the URL
-    provided in the first parameter and then calls the makeHTML5 method
-    on the returned document.
-  */
-  async getHTML5(XML_url, callback, perElementFn) {
-    if (window && window.location.href.startsWith(this.base) && XML_url.indexOf("/") >= 0) {
-      this.base = XML_url.replace(/\/[^\/]*$/, "/");
-    }
-    try {
-      const response = await fetch(XML_url);
-      if (response.ok) {
-        const XML = await response.text();
-        return this.makeHTML5(XML, callback, perElementFn);
-      } else {
-        console.log(`Could not get XML file ${XML_url}.
-Server returned ${response.status}: ${response.statusText}`);
-      }
-    } catch (error) {
-      console.log(error);
-    }
-  }
-  /* 
-    Converts the supplied XML string into HTML5 Custom Elements. If a callback
-    function is supplied, calls it on the result.
-  */
-  makeHTML5(XML, callback, perElementFn) {
-    this.XML_dom = new DOMParser().parseFromString(XML, "text/xml");
-    return this.domToHTML5(this.XML_dom, callback, perElementFn);
-  }
-  preprocess(XML_dom, callback, perElementFn) {
-    this.els = learnElementNames(XML_dom, this.namespaces);
-    let convertEl = (el) => {
-      let newElement;
-      if (this.namespaces.has(el.namespaceURI ? el.namespaceURI : "")) {
-        let prefix = this.namespaces.get(el.namespaceURI ? el.namespaceURI : "");
-        newElement = this.document.createElement(`${prefix}-${el.localName.toLowerCase()}`);
-      } else {
-        newElement = this.document.importNode(el, false);
-      }
-      for (let att of Array.from(el.attributes)) {
-        if (att.name == "xmlns") {
-          newElement.setAttribute("data-xmlns", att.value);
-        } else {
-          newElement.setAttribute(att.name, att.value);
-        }
-        if (att.name == "xml:id") {
-          newElement.setAttribute("id", att.value);
-        }
-        if (att.name == "xml:lang") {
-          newElement.setAttribute("lang", att.value);
-        }
-        if (att.name == "rendition") {
-          newElement.setAttribute("class", att.value.replace(/#/g, ""));
-        }
-      }
-      newElement.setAttribute("data-origname", el.localName);
-      if (el.hasAttributes()) {
-        newElement.setAttribute("data-origatts", el.getAttributeNames().join(" "));
-      }
-      if (el.childNodes.length == 0) {
-        newElement.setAttribute("data-empty", "");
-      }
-      if (el.localName == "head") {
-        let level = XML_dom.evaluate("count(ancestor::*[tei:head])", el, function(ns) {
-          if (ns == "tei")
-            return "http://www.tei-c.org/ns/1.0";
-        }, 1, null);
-        newElement.setAttribute("data-level", level.numberValue);
-      }
-      if (el.localName == "tagsDecl") {
-        let style = this.document.createElement("style");
-        for (let node of Array.from(el.childNodes)) {
-          if (node.nodeType == 1 && node.localName == "rendition" && node.getAttribute("scheme") == "css") {
-            let rule = "";
-            if (node.hasAttribute("selector")) {
-              rule += node.getAttribute("selector").replace(/([^#, >]+\w*)/g, "tei-$1").replace(/#tei-/g, "#") + "{\n";
-              rule += node.textContent;
-            } else {
-              rule += "." + node.getAttribute("xml:id") + "{\n";
-              rule += node.textContent;
-            }
-            rule += "\n}\n";
-            style.appendChild(this.document.createTextNode(rule));
-          }
-        }
-        if (style.childNodes.length > 0) {
-          newElement.appendChild(style);
-          this.hasStyle = true;
-        }
-      }
-      if (el.localName == "prefixDef") {
-        this.prefixDefs.push(el.getAttribute("ident"));
-        this.prefixDefs[el.getAttribute("ident")] = {
-          "matchPattern": el.getAttribute("matchPattern"),
-          "replacementPattern": el.getAttribute("replacementPattern")
-        };
-      }
-      for (let node of Array.from(el.childNodes)) {
-        if (node.nodeType == 1) {
-          newElement.appendChild(convertEl(node));
-        } else {
-          newElement.appendChild(node.cloneNode());
-        }
-      }
-      if (perElementFn) {
-        perElementFn(newElement, el);
-      }
-      return newElement;
-    };
-    this.dom = this.document.createDocumentFragment();
-    for (let node of Array.from(XML_dom.childNodes)) {
-      if (node.nodeType == 1) {
-        this.dom.appendChild(convertEl(node));
-      }
-      if (node.nodeType == 7) {
-        this.dom.appendChild(this.document.importNode(node, true));
-      }
-      if (node.nodeType == 8) {
-        this.dom.appendChild(this.document.importNode(node, true));
-      }
-    }
-    this.utilities.dom = this.dom.firstElementChild;
-    if (callback) {
-      callback(this.dom, this);
-      if (window) {
-        window.dispatchEvent(ceteiceanLoad);
-      }
-    } else {
-      if (typeof window !== "undefined") {
-        window.dispatchEvent(ceteiceanLoad);
-      }
-      return this.dom;
-    }
-  }
-  /* 
-    Converts the supplied XML DOM into HTML5 Custom Elements. If a callback
-    function is supplied, calls it on the result.
-  */
-  domToHTML5(XML_dom, callback, perElementFn) {
-    this.preprocess(XML_dom, null, perElementFn);
-    this.applyBehaviors();
-    this.done = true;
-    if (callback) {
-      callback(this.dom, this);
-      if (window) {
-        window.dispatchEvent(ceteiceanLoad);
-      }
-    } else {
-      if (typeof window !== "undefined") {
-        window.dispatchEvent(ceteiceanLoad);
-      }
-      return this.dom;
-    }
-  }
-  /*
-    Convenience method for HTML pages containing pre-processed CETEIcean Custom 
-    Elements. Usage:
-      const c = new CETEI();
-      c.processPage();
-  */
-  processPage() {
-    this.els = learnCustomElementNames(this.document);
-    this.applyBehaviors();
-    if (window) {
-      window.dispatchEvent(ceteiceanLoad);
-    }
-  }
-  /* 
-    To change a namespace -> prefix mapping, the namespace must first be 
-    unset. Takes a namespace URI. In order to process a TEI P4 document, e.g.,
-    the TEI namespace must be unset before it can be set to the empty string.
-  */
-  unsetNamespace(ns) {
-    this.namespaces.delete(ns);
-  }
-  /* 
-    Sets the base URL for the document. Used to rewrite relative links in the
-    XML source (which may be in a completely different location from the HTML
-    wrapper).
-  */
-  setBaseUrl(base) {
-    this.base = base;
-  }
-  /* 
-    Appends any element returned by the function passed in the first
-    parameter to the element in the second parameter. If the function
-    returns nothing, this is a no-op aside from any side effects caused
-    by the provided function.
-  
-    Called by getHandler() and fallback()
-    */
-  append(fn, elt) {
-    let self = this;
-    if (elt && !elt.hasAttribute("data-processed")) {
-      let content = fn.call(self.utilities, elt);
-      if (content) {
-        self.appendBasic(elt, content);
-      }
-    } else {
-      return function() {
-        if (!this.hasAttribute("data-processed")) {
-          let content = fn.call(self.utilities, this);
-          if (content) {
-            self.appendBasic(this, content);
-          }
-        }
-      };
-    }
-  }
-  appendBasic(elt, content) {
-    if (this.discardContent) {
-      elt.innerHTML = "";
-    } else {
-      hideContent(elt, true);
-    }
-    elt.appendChild(content);
-  }
-  // Given an element, return its qualified name as defined in a behaviors object
-  bName(e) {
-    return e.tagName.substring(0, e.tagName.indexOf("-")).toLowerCase() + ":" + e.getAttribute("data-origname");
-  }
-  /* 
-    Private method called by append(). Takes a child element and a name, and recurses through the
-    child's siblings until an element with that name is found, returning true if it is and false if not.
-  */
-  childExists(elt, name) {
-    if (elt && elt.nodeName == name) {
-      return true;
-    } else {
-      return elt && elt.nextElementSibling && this.childExists(elt.nextElementSibling, name);
-    }
-  }
-  /* 
-    Takes a template in the form of either an array of 1 or 2 
-    strings or an object with CSS selector keys and either functions
-    or arrays as described above. Returns a closure around a function 
-    that can be called in the element constructor or applied to an 
-    individual element. An empty array is considered a no-op.
-  
-    Called by the getHandler() and getFallback() methods
-  */
-  decorator(template) {
-    if (Array.isArray(template) && template.length == 0) {
-      return function(e) {
-      };
-    }
-    if (Array.isArray(template) && !Array.isArray(template[0])) {
-      return this.applyDecorator(template);
-    }
-    let self = this;
-    return function(elt) {
-      for (let rule of template) {
-        if (elt.matches(rule[0]) || rule[0] === "_") {
-          if (Array.isArray(rule[1])) {
-            return self.decorator(rule[1]).call(this, elt);
-          } else {
-            return rule[1].call(this, elt);
-          }
-        }
-      }
-    };
-  }
-  applyDecorator(strings) {
-    let self = this;
-    return function(elt) {
-      let copy = [];
-      for (let i = 0; i < strings.length; i++) {
-        copy.push(self.template(strings[i], elt));
-      }
-      return self.insert(elt, copy);
-    };
-  }
-  /* 
-    Returns the fallback function for the given element name.
-    Called by fallback().
-  */
-  getFallback(behaviors, fn) {
-    if (behaviors[fn]) {
-      if (behaviors[fn] instanceof Function) {
-        return behaviors[fn];
-      } else {
-        return this.decorator(behaviors[fn]);
-      }
-    }
-  }
-  /* 
-    Returns the handler function for the given element name
-    Called by define().
-  */
-  getHandler(behaviors, fn) {
-    if (behaviors[fn]) {
-      if (behaviors[fn] instanceof Function) {
-        return this.append(behaviors[fn]);
-      } else {
-        return this.append(this.decorator(behaviors[fn]));
-      }
-    }
-  }
-  insert(elt, strings) {
-    let content = this.document.createElement("cetei-content");
-    for (let node of Array.from(elt.childNodes)) {
-      if (node.nodeType === 1 && !node.hasAttribute("data-processed")) {
-        this.processElement(node);
-      }
-    }
-    if (strings[0].match("<[^>]+>") && strings[1] && strings[1].match("<[^>]+>")) {
-      content.innerHTML = strings[0] + elt.innerHTML + (strings[1] ? strings[1] : "");
-    } else {
-      content.innerHTML = strings[0];
-      content.setAttribute("data-before", strings[0].replace(/<[^>]+>/g, "").length);
-      for (let node of Array.from(elt.childNodes)) {
-        content.appendChild(node.cloneNode(true));
-      }
-      if (strings.length > 1) {
-        content.innerHTML += strings[1];
-        content.setAttribute("data-after", strings[1].replace(/<[^>]+>/g, "").length);
-      }
-    }
-    if (content.childNodes.length < 2) {
-      return content.firstChild;
-    } else {
-      return content;
-    }
-  }
-  // Runs behaviors recursively on the supplied element and children
-  processElement(elt) {
-    if (elt.hasAttribute("data-origname") && !elt.hasAttribute("data-processed")) {
-      let fn = this.getFallback(this.bName(elt));
-      if (fn) {
-        this.append(fn, elt);
-        elt.setAttribute("data-processed", "");
-      }
-    }
-    for (let node of Array.from(elt.childNodes)) {
-      if (node.nodeType === 1) {
-        this.processElement(node);
-      }
-    }
-  }
-  template(str, elt) {
-    let result = str;
-    if (str.search(/\$(\w*)(@([a-zA-Z:]+))/)) {
-      let re = /\$(\w*)@([a-zA-Z:]+)/g;
-      let replacements;
-      while (replacements = re.exec(str)) {
-        if (elt.hasAttribute(replacements[2])) {
-          if (replacements[1] && this.utilities[replacements[1]]) {
-            result = result.replace(replacements[0], this.utilities[replacements[1]](elt.getAttribute(replacements[2])));
-          } else {
-            result = result.replace(replacements[0], elt.getAttribute(replacements[2]));
-          }
-        } else {
-          result = result.replace(replacements[0], "");
-        }
-      }
-    }
-    return result;
-  }
-  // Define or apply behaviors for the document
-  applyBehaviors() {
-    if (typeof window !== "undefined" && window.customElements) {
-      this.define.call(this, this.els);
-    } else {
-      this.fallback.call(this, this.els);
-    }
-  }
-  /* 
-    Registers the list of elements provided with the browser.
-    Called by makeHTML5(), but can be called independently if, for example,
-    you've created Custom Elements via an XSLT transformation instead.
-  */
-  define(names) {
-    for (let name of names) {
-      const fn = this.getHandler(this.behaviors, name);
-      defineCustomElement(name, fn, this.debug);
-    }
-  }
-  /* 
-    Provides fallback functionality for environments where Custom Elements
-    are not supported.
-  
-    Like define(), this is called by makeHTML5(), but can be called
-    independently.
-  */
-  fallback(names) {
-    for (let name of names) {
-      let fn = this.getFallback(this.behaviors, name);
-      if (fn) {
-        for (let elt of Array.from((this.dom && !this.done ? this.dom : this.document).querySelectorAll(tagName(name)))) {
-          if (!elt.hasAttribute("data-processed")) {
-            this.append(fn, elt);
-            elt.setAttribute("data-processed", "");
-          }
-        }
-      }
-    }
-  }
-  /**********************
-   * Utility functions  *
-   **********************/
-  static savePosition() {
-    window.sessionStorage.setItem(window.location + "-scroll", window.scrollY);
-  }
-  static restorePosition() {
-    if (!window.location.hash) {
-      let scroll;
-      if (scroll = window.sessionStorage.getItem(window.location + "-scroll")) {
-        window.sessionStorage.removeItem(window.location + "-scroll");
-        setTimeout(function() {
-          window.scrollTo(0, scroll);
-        }, 100);
-      }
-    } else {
-      setTimeout(function() {
-        let h = this.document.querySelector(window.decodeURI(window.location.hash));
-        if (h) {
-          h.scrollIntoView();
-        }
-      }, 100);
-    }
-  }
-}
-try {
-  if (typeof window !== "undefined") {
-    window.CETEI = CETEI;
-    window.addEventListener("beforeunload", CETEI.savePosition);
-    var ceteiceanLoad = new Event("ceteiceanload");
-    window.addEventListener("ceteiceanload", CETEI.restorePosition);
-  }
-} catch (e) {
-  console.log(e);
-}
+const getClosestRect = (rects, pos) => {
+  const uncollapsed = [...rects].filter((r) => r.width > 0 && r.height > 0);
+  let closest;
+  let minDist = Number.MAX_VALUE;
+  uncollapsed.forEach((rect) => {
+    const centerY = rect.top + rect.height / 2;
+    const dist = Math.abs(centerY - pos.y);
+    if (dist < minDist) {
+      minDist = dist;
+      closest = rect;
+    }
+  });
+  return closest;
+};
+const toClientRects = (rect) => ({
+  length: 1,
+  item: (index) => index === 0 ? rect : void 0,
+  [Symbol.iterator]: function* () {
+    for (let i = 0; i < this.length; i++)
+      yield this.item(i);
+  }
+});
 export {
-  CETEI as default
+  getClosestRect,
+  toClientRects
 };
 //# sourceMappingURL=react-text-annotator.es8.js.map