@soomo/react-text-annotator 3.2.0-staging.4 → 3.2.0-staging.5

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

@@ -1,504 +1,285 @@
-import defaultBehaviors from "./react-text-annotator.es28.js";
-import * as utilities from "./react-text-annotator.es29.js";
-import { hideContent, defineCustomElement, tagName } from "./react-text-annotator.es29.js";
-import { addBehaviors, addBehavior, removeBehavior } from "./react-text-annotator.es30.js";
-import { learnElementNames, learnCustomElementNames } from "./react-text-annotator.es31.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);
-      }
-    }
+import { inline as inline$1, offset as offset$1, flip as flip$1, shift as shift$1, computePosition, arrow as arrow$2 } from "./react-text-annotator.es17.js";
+import { autoUpdate, platform } from "./react-text-annotator.es17.js";
+import * as React from "react";
+import { useLayoutEffect, useEffect } from "react";
+import * as ReactDOM from "react-dom";
+var index = typeof document !== "undefined" ? useLayoutEffect : useEffect;
+function deepEqual(a, b) {
+  if (a === b) {
+    return true;
   }
-  /* 
-    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);
-    }
+  if (typeof a !== typeof b) {
+    return false;
   }
-  /* 
-    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);
+  if (typeof a === "function" && a.toString() === b.toString()) {
+    return true;
   }
-  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" && el.namespaceURI == "http://www.tei-c.org/ns/1.0") {
-        let getLevel = function(el2) {
-          let count = 0;
-          let ancestor = el2.parentElement;
-          while (ancestor) {
-            let children = ancestor.children;
-            let i = 0;
-            while (i < children.length) {
-              if (children[i].tagName.toLowerCase() === "head" && children[i].namespaceURI === "http://www.tei-c.org/ns/1.0") {
-                count++;
-                break;
-              }
-              i++;
-            }
-            ancestor = ancestor.parentElement;
-          }
-          return count;
-        };
-        newElement.setAttribute("data-level", getLevel(el));
-      }
-      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;
+  let length;
+  let i;
+  let keys;
+  if (a && b && typeof a === "object") {
+    if (Array.isArray(a)) {
+      length = a.length;
+      if (length !== b.length) return false;
+      for (i = length; i-- !== 0; ) {
+        if (!deepEqual(a[i], b[i])) {
+          return false;
         }
       }
-      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));
-      }
+      return 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);
+    keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length) {
+      return false;
+    }
+    for (i = length; i-- !== 0; ) {
+      if (!{}.hasOwnProperty.call(b, keys[i])) {
+        return false;
       }
-      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);
+    for (i = length; i-- !== 0; ) {
+      const key = keys[i];
+      if (key === "_owner" && a.$$typeof) {
+        continue;
       }
-    } else {
-      if (typeof window !== "undefined") {
-        window.dispatchEvent(ceteiceanLoad);
+      if (!deepEqual(a[key], b[key])) {
+        return false;
       }
-      return this.dom;
     }
+    return true;
   }
-  /*
-    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);
-          }
-        }
-      };
-    }
+  return a !== a && b !== b;
+}
+function getDPR(element) {
+  if (typeof window === "undefined") {
+    return 1;
   }
-  appendBasic(elt, content) {
-    if (this.discardContent) {
-      elt.innerHTML = "";
-    } else {
-      hideContent(elt, true);
-    }
-    elt.appendChild(content);
+  const win = element.ownerDocument.defaultView || window;
+  return win.devicePixelRatio || 1;
+}
+function roundByDPR(element, value) {
+  const dpr = getDPR(element);
+  return Math.round(value * dpr) / dpr;
+}
+function useLatestRef(value) {
+  const ref = React.useRef(value);
+  index(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function useFloating(options) {
+  if (options === void 0) {
+    options = {};
   }
-  // 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");
+  const {
+    placement = "bottom",
+    strategy = "absolute",
+    middleware = [],
+    platform: platform2,
+    elements: {
+      reference: externalReference,
+      floating: externalFloating
+    } = {},
+    transform = true,
+    whileElementsMounted,
+    open
+  } = options;
+  const [data, setData] = React.useState({
+    x: 0,
+    y: 0,
+    strategy,
+    placement,
+    middlewareData: {},
+    isPositioned: false
+  });
+  const [latestMiddleware, setLatestMiddleware] = React.useState(middleware);
+  if (!deepEqual(latestMiddleware, middleware)) {
+    setLatestMiddleware(middleware);
   }
-  /* 
-    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);
+  const [_reference, _setReference] = React.useState(null);
+  const [_floating, _setFloating] = React.useState(null);
+  const setReference = React.useCallback((node) => {
+    if (node !== referenceRef.current) {
+      referenceRef.current = node;
+      _setReference(node);
     }
-  }
-  /* 
-    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) {
-      };
+  }, []);
+  const setFloating = React.useCallback((node) => {
+    if (node !== floatingRef.current) {
+      floatingRef.current = node;
+      _setFloating(node);
     }
-    if (Array.isArray(template) && !Array.isArray(template[0])) {
-      return this.applyDecorator(template);
+  }, []);
+  const referenceEl = externalReference || _reference;
+  const floatingEl = externalFloating || _floating;
+  const referenceRef = React.useRef(null);
+  const floatingRef = React.useRef(null);
+  const dataRef = React.useRef(data);
+  const hasWhileElementsMounted = whileElementsMounted != null;
+  const whileElementsMountedRef = useLatestRef(whileElementsMounted);
+  const platformRef = useLatestRef(platform2);
+  const openRef = useLatestRef(open);
+  const update = React.useCallback(() => {
+    if (!referenceRef.current || !floatingRef.current) {
+      return;
     }
-    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);
+    const config = {
+      placement,
+      strategy,
+      middleware: latestMiddleware
     };
-  }
-  /* 
-    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]);
-      }
+    if (platformRef.current) {
+      config.platform = platformRef.current;
     }
-  }
-  /* 
-    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;
+    computePosition(referenceRef.current, floatingRef.current, config).then((data2) => {
+      const fullData = {
+        ...data2,
+        // The floating element's position may be recomputed while it's closed
+        // but still mounted (such as when transitioning out). To ensure
+        // `isPositioned` will be `false` initially on the next open, avoid
+        // setting it to `true` when `open === false` (must be specified).
+        isPositioned: openRef.current !== false
+      };
+      if (isMountedRef.current && !deepEqual(dataRef.current, fullData)) {
+        dataRef.current = fullData;
+        ReactDOM.flushSync(() => {
+          setData(fullData);
+        });
+      }
+    });
+  }, [latestMiddleware, placement, strategy, platformRef, openRef]);
+  index(() => {
+    if (open === false && dataRef.current.isPositioned) {
+      dataRef.current.isPositioned = false;
+      setData((data2) => ({
+        ...data2,
+        isPositioned: false
+      }));
     }
-  }
-  // 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", "");
-      }
+  }, [open]);
+  const isMountedRef = React.useRef(false);
+  index(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  index(() => {
+    if (referenceEl) referenceRef.current = referenceEl;
+    if (floatingEl) floatingRef.current = floatingEl;
+    if (referenceEl && floatingEl) {
+      if (whileElementsMountedRef.current) {
+        return whileElementsMountedRef.current(referenceEl, floatingEl, update);
+      }
+      update();
     }
-    for (let node of Array.from(elt.childNodes)) {
-      if (node.nodeType === 1) {
-        this.processElement(node);
-      }
+  }, [referenceEl, floatingEl, update, whileElementsMountedRef, hasWhileElementsMounted]);
+  const refs = React.useMemo(() => ({
+    reference: referenceRef,
+    floating: floatingRef,
+    setReference,
+    setFloating
+  }), [setReference, setFloating]);
+  const elements = React.useMemo(() => ({
+    reference: referenceEl,
+    floating: floatingEl
+  }), [referenceEl, floatingEl]);
+  const floatingStyles = React.useMemo(() => {
+    const initialStyles = {
+      position: strategy,
+      left: 0,
+      top: 0
+    };
+    if (!elements.floating) {
+      return initialStyles;
     }
-  }
-  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], "");
+    const x = roundByDPR(elements.floating, data.x);
+    const y = roundByDPR(elements.floating, data.y);
+    if (transform) {
+      return {
+        ...initialStyles,
+        transform: "translate(" + x + "px, " + y + "px)",
+        ...getDPR(elements.floating) >= 1.5 && {
+          willChange: "transform"
         }
-      }
-    }
-    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);
+      };
     }
+    return {
+      position: strategy,
+      left: x,
+      top: y
+    };
+  }, [strategy, transform, elements.floating, data.x, data.y]);
+  return React.useMemo(() => ({
+    ...data,
+    update,
+    refs,
+    elements,
+    floatingStyles
+  }), [data, update, refs, elements, floatingStyles]);
+}
+const arrow$1 = (options) => {
+  function isRef(value) {
+    return {}.hasOwnProperty.call(value, "current");
   }
-  /* 
-    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", "");
-          }
+  return {
+    name: "arrow",
+    options,
+    fn(state) {
+      const {
+        element,
+        padding
+      } = typeof options === "function" ? options(state) : options;
+      if (element && isRef(element)) {
+        if (element.current != null) {
+          return arrow$2({
+            element: element.current,
+            padding
+          }).fn(state);
         }
+        return {};
       }
-    }
-  }
-  /**********************
-   * 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);
+      if (element) {
+        return arrow$2({
+          element,
+          padding
+        }).fn(state);
       }
-    } else {
-      setTimeout(function() {
-        let h = this.document.querySelector(window.decodeURI(window.location.hash));
-        if (h) {
-          h.scrollIntoView();
-        }
-      }, 100);
+      return {};
     }
-  }
-}
-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 offset = (options, deps) => ({
+  ...offset$1(options),
+  options: [options, deps]
+});
+const shift = (options, deps) => ({
+  ...shift$1(options),
+  options: [options, deps]
+});
+const flip = (options, deps) => ({
+  ...flip$1(options),
+  options: [options, deps]
+});
+const inline = (options, deps) => ({
+  ...inline$1(options),
+  options: [options, deps]
+});
+const arrow = (options, deps) => ({
+  ...arrow$1(options),
+  options: [options, deps]
+});
 export {
-  CETEI as default
+  arrow,
+  autoUpdate,
+  computePosition,
+  flip,
+  inline,
+  offset,
+  platform,
+  shift,
+  useFloating
 };
 //# sourceMappingURL=react-text-annotator.es18.js.map