@chayns-components/emoji-input 5.0.0-beta.94 → 5.0.0-beta.940

package/lib/esm/utils/selection.js

@@ -0,0 +1,237 @@
+import { clamp } from './number';
+import { getElementTextLength } from './text';
+let childIndex = -1;
+let endOffset = -1;
+let startOffset = -1;
+export const saveSelection = function (element) {
+  let {
+    shouldIgnoreEmptyTextNodes
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  const {
+    anchorNode
+  } = selection;
+  if (!anchorNode) {
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  let childNodesArray = Array.from(element.childNodes);
+  if (shouldIgnoreEmptyTextNodes) {
+    childNodesArray = childNodesArray.filter(_ref => {
+      let {
+        nodeType,
+        nodeValue
+      } = _ref;
+      return nodeType !== Node.TEXT_NODE || nodeValue !== '' && nodeValue !== '\u200B';
+    });
+  }
+  childIndex = childNodesArray.indexOf(anchorNode);
+  endOffset = range.endOffset;
+  startOffset = range.startOffset;
+};
+export const restoreSelection = element => {
+  let childNode = element.childNodes[childIndex];
+  const selection = window.getSelection();
+  if (!childNode || !element || !selection) {
+    return;
+  }
+
+  // noinspection SuspiciousTypeOfGuard
+  if (typeof childNode.nodeValue !== 'string') {
+    const elementTextLength = getElementTextLength(childNode);
+    if (childNode.nextSibling) {
+      childNode = childNode.nextSibling;
+      if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {
+        endOffset -= elementTextLength;
+        startOffset -= elementTextLength;
+        if (childNode.nodeValue.charCodeAt(endOffset) === 8203) {
+          endOffset += 1;
+          startOffset += 1;
+        }
+      } else {
+        const textNode = document.createTextNode('\u200B');
+        childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);
+        childNode = textNode;
+        endOffset = textNode.length;
+        startOffset = textNode.length;
+      }
+    } else {
+      const textNode = document.createTextNode('\u200B');
+      childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);
+      childNode = textNode;
+      endOffset = textNode.length;
+      startOffset = textNode.length;
+    }
+  } else if (childNode.nodeValue && endOffset > childNode.nodeValue.length) {
+    if (childNode.nextSibling?.nodeValue) {
+      let elementTextLength = childNode.nodeValue.length;
+      childNode = childNode.nextSibling;
+
+      // noinspection SuspiciousTypeOfGuard
+      if (typeof childNode.nodeValue !== 'string') {
+        elementTextLength += getElementTextLength(childNode);
+        if (childNode.nextSibling?.nodeValue) {
+          childNode = childNode.nextSibling;
+          if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {
+            endOffset -= elementTextLength;
+            startOffset -= elementTextLength;
+            if (childNode.nodeValue.charCodeAt(endOffset) === 8203) {
+              endOffset += 1;
+              startOffset += 1;
+            }
+          } else {
+            const textNode = document.createTextNode('\u200B');
+            childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);
+            childNode = textNode;
+            endOffset = textNode.length;
+            startOffset = textNode.length;
+          }
+        } else {
+          const textNode = document.createTextNode('\u200B');
+          childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);
+          childNode = textNode;
+          endOffset = textNode.length;
+          startOffset = textNode.length;
+        }
+      }
+    } else {
+      endOffset = childNode.nodeValue.length;
+      startOffset = childNode.nodeValue.length;
+    }
+  }
+  const range = document.createRange();
+
+  // noinspection SuspiciousTypeOfGuard
+  if (typeof childNode.nodeValue === 'string') {
+    startOffset = clamp(startOffset, 0, childNode.nodeValue.length);
+    endOffset = clamp(endOffset, 0, childNode.nodeValue.length);
+  }
+  try {
+    range.setStart(childNode, startOffset);
+    range.setEnd(childNode, endOffset);
+  } catch (error) {
+    // Do nothing
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+  range.collapse(true);
+};
+export const insertInvisibleCursorMarker = () => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) {
+    return;
+  }
+  const range = selection.getRangeAt(0);
+  const textNode = range.startContainer;
+  const offset = range.startOffset;
+
+  // noinspection JSDeprecatedSymbols
+  document.execCommand('delete', false);
+  const span = document.createElement('span');
+  span.style.display = 'inline-block';
+  span.style.width = '0';
+  span.style.height = '0';
+  span.className = 'invisible-cursor-marker';
+  const parent = textNode.parentNode;
+  if (parent) {
+    if (textNode.nodeType === Node.TEXT_NODE) {
+      const textContent = textNode.textContent || '';
+      const beforeText = textContent.slice(0, offset);
+      const afterText = textContent.slice(offset);
+      textNode.textContent = beforeText;
+      parent.insertBefore(span, textNode.nextSibling);
+      const afterTextNode = document.createTextNode(afterText);
+      parent.insertBefore(afterTextNode, span.nextSibling);
+      setTimeout(() => {
+        // Set cursor to cursor element
+        const newRange = document.createRange();
+        newRange.setStartAfter(span);
+        newRange.setEndAfter(span);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+
+        // Remove cursor element
+        span.remove();
+      }, 10);
+    }
+  }
+};
+export const moveSelectionOffset = distance => {
+  endOffset += distance;
+  startOffset += distance;
+};
+export const setChildIndex = index => {
+  childIndex = index;
+};
+
+/**
+ * This function returns the code of the character that will be removed by the KeyDown event in the
+ * next step, if the "Backspace" or "Delete" key was pressed and there is no selection of multiple
+ * characters.
+ *
+ * @param event - Keyboard event from "onKeyDown"
+ */
+export const getCharCodeThatWillBeDeleted = event => {
+  const range = window.getSelection()?.getRangeAt(0);
+
+  /**
+   * At this point the function is aborted if there is no selection range, several characters have
+   * been selected and therefore no single letter is removed or neither the "Backspace" nor the
+   * "Delete" key has been pressed.
+   */
+  if (!range || range.endOffset !== range.startOffset || event.key !== 'Backspace' && event.key !== 'Delete' && event.key !== 'Unidentified') {
+    return null;
+  }
+  if (event.key === 'Backspace' || event.key === 'Unidentified') {
+    const {
+      nodeValue,
+      previousSibling
+    } = range.startContainer;
+    if (range.startOffset > 0) {
+      return nodeValue?.charCodeAt(range.startOffset - 1);
+    }
+    return previousSibling?.nodeValue?.charCodeAt(previousSibling.nodeValue.length - 1);
+  }
+  const {
+    nextSibling,
+    nodeValue
+  } = range.endContainer;
+  if (range.endOffset < (nodeValue?.length ?? 0)) {
+    return nodeValue?.charCodeAt(range.endOffset);
+  }
+  return nextSibling?.nodeValue?.charCodeAt(0);
+};
+export const findAndSelectText = _ref2 => {
+  let {
+    editorElement,
+    searchText
+  } = _ref2;
+  if (!editorElement.textContent?.includes(searchText)) {
+    return null;
+  }
+  const range = document.createRange();
+  let startNode = null;
+  let offset = -1;
+  const searchNodesForText = node => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      const index = node.textContent?.indexOf(searchText);
+      if (typeof index === 'number' && index !== -1) {
+        startNode = node;
+        offset = index;
+        range.setStart(node, index);
+        range.setEnd(node, index + searchText.length);
+        return true;
+      }
+    } else if (node.nodeName !== 'LC_MENTION') {
+      return Array.from(node.childNodes).some(searchNodesForText);
+    }
+    return false;
+  };
+  searchNodesForText(editorElement);
+  if (startNode && offset !== -1) return range;
+  return null;
+};
+//# sourceMappingURL=selection.js.map

package/lib/esm/utils/selection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection.js","names":["clamp","getElementTextLength","childIndex","endOffset","startOffset","saveSelection","element","shouldIgnoreEmptyTextNodes","arguments","length","undefined","selection","window","getSelection","anchorNode","range","getRangeAt","childNodesArray","Array","from","childNodes","filter","_ref","nodeType","nodeValue","Node","TEXT_NODE","indexOf","restoreSelection","childNode","elementTextLength","nextSibling","charCodeAt","textNode","document","createTextNode","parentNode","insertBefore","createRange","setStart","setEnd","error","removeAllRanges","addRange","collapse","insertInvisibleCursorMarker","rangeCount","startContainer","offset","execCommand","span","createElement","style","display","width","height","className","parent","textContent","beforeText","slice","afterText","afterTextNode","setTimeout","newRange","setStartAfter","setEndAfter","remove","moveSelectionOffset","distance","setChildIndex","index","getCharCodeThatWillBeDeleted","event","key","previousSibling","endContainer","findAndSelectText","_ref2","editorElement","searchText","includes","startNode","searchNodesForText","node","nodeName","some"],"sources":["../../../src/utils/selection.ts"],"sourcesContent":["import type { KeyboardEvent } from 'react';\nimport { clamp } from './number';\nimport { getElementTextLength } from './text';\n\nlet childIndex = -1;\nlet endOffset = -1;\nlet startOffset = -1;\n\ninterface SaveSelectionOptions {\n    shouldIgnoreEmptyTextNodes?: boolean;\n}\n\nexport const saveSelection = (\n    element: HTMLDivElement,\n    { shouldIgnoreEmptyTextNodes }: SaveSelectionOptions = {},\n) => {\n    const selection = window.getSelection();\n\n    if (!selection) {\n        return;\n    }\n\n    const { anchorNode } = selection;\n\n    if (!anchorNode) {\n        return;\n    }\n\n    const range = selection.getRangeAt(0);\n\n    let childNodesArray = Array.from(element.childNodes);\n\n    if (shouldIgnoreEmptyTextNodes) {\n        childNodesArray = childNodesArray.filter(\n            ({ nodeType, nodeValue }) =>\n                nodeType !== Node.TEXT_NODE || (nodeValue !== '' && nodeValue !== '\\u200B'),\n        );\n    }\n\n    childIndex = childNodesArray.indexOf(anchorNode as ChildNode);\n\n    endOffset = range.endOffset;\n    startOffset = range.startOffset;\n};\n\nexport const restoreSelection = (element: HTMLDivElement) => {\n    let childNode = element.childNodes[childIndex];\n\n    const selection = window.getSelection();\n\n    if (!childNode || !element || !selection) {\n        return;\n    }\n\n    // noinspection SuspiciousTypeOfGuard\n    if (typeof childNode.nodeValue !== 'string') {\n        const elementTextLength = getElementTextLength(childNode as Element);\n\n        if (childNode.nextSibling) {\n            childNode = childNode.nextSibling;\n\n            if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {\n                endOffset -= elementTextLength;\n                startOffset -= elementTextLength;\n\n                if (childNode.nodeValue.charCodeAt(endOffset) === 8203) {\n                    endOffset += 1;\n                    startOffset += 1;\n                }\n            } else {\n                const textNode = document.createTextNode('\\u200B');\n\n                childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n                childNode = textNode;\n\n                endOffset = textNode.length;\n                startOffset = textNode.length;\n            }\n        } else {\n            const textNode = document.createTextNode('\\u200B');\n\n            childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n            childNode = textNode;\n\n            endOffset = textNode.length;\n            startOffset = textNode.length;\n        }\n    } else if (childNode.nodeValue && endOffset > childNode.nodeValue.length) {\n        if (childNode.nextSibling?.nodeValue) {\n            let elementTextLength = childNode.nodeValue.length;\n\n            childNode = childNode.nextSibling;\n\n            // noinspection SuspiciousTypeOfGuard\n            if (typeof childNode.nodeValue !== 'string') {\n                elementTextLength += getElementTextLength(childNode as Element);\n\n                if (childNode.nextSibling?.nodeValue) {\n                    childNode = childNode.nextSibling;\n\n                    if (childNode.nodeType === Node.TEXT_NODE && childNode.nodeValue) {\n                        endOffset -= elementTextLength;\n                        startOffset -= elementTextLength;\n\n                        if (childNode.nodeValue.charCodeAt(endOffset) === 8203) {\n                            endOffset += 1;\n                            startOffset += 1;\n                        }\n                    } else {\n                        const textNode = document.createTextNode('\\u200B');\n\n                        childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n                        childNode = textNode;\n\n                        endOffset = textNode.length;\n                        startOffset = textNode.length;\n                    }\n                } else {\n                    const textNode = document.createTextNode('\\u200B');\n\n                    childNode.parentNode?.insertBefore(textNode, childNode.nextSibling);\n\n                    childNode = textNode;\n\n                    endOffset = textNode.length;\n                    startOffset = textNode.length;\n                }\n            }\n        } else {\n            endOffset = childNode.nodeValue.length;\n            startOffset = childNode.nodeValue.length;\n        }\n    }\n\n    const range = document.createRange();\n\n    // noinspection SuspiciousTypeOfGuard\n    if (typeof childNode.nodeValue === 'string') {\n        startOffset = clamp(startOffset, 0, childNode.nodeValue.length);\n        endOffset = clamp(endOffset, 0, childNode.nodeValue.length);\n    }\n\n    try {\n        range.setStart(childNode, startOffset);\n        range.setEnd(childNode, endOffset);\n    } catch (error) {\n        // Do nothing\n    }\n\n    selection.removeAllRanges();\n    selection.addRange(range);\n\n    range.collapse(true);\n};\n\nexport const insertInvisibleCursorMarker = (): void => {\n    const selection = window.getSelection();\n\n    if (!selection || selection.rangeCount === 0) {\n        return;\n    }\n\n    const range = selection.getRangeAt(0);\n    const textNode = range.startContainer;\n    const offset = range.startOffset;\n\n    // noinspection JSDeprecatedSymbols\n    document.execCommand('delete', false);\n\n    const span = document.createElement('span');\n    span.style.display = 'inline-block';\n    span.style.width = '0';\n    span.style.height = '0';\n    span.className = 'invisible-cursor-marker';\n\n    const parent = textNode.parentNode;\n\n    if (parent) {\n        if (textNode.nodeType === Node.TEXT_NODE) {\n            const textContent = textNode.textContent || '';\n            const beforeText = textContent.slice(0, offset);\n            const afterText = textContent.slice(offset);\n\n            textNode.textContent = beforeText;\n\n            parent.insertBefore(span, textNode.nextSibling);\n            const afterTextNode = document.createTextNode(afterText);\n            parent.insertBefore(afterTextNode, span.nextSibling);\n\n            setTimeout(() => {\n                // Set cursor to cursor element\n                const newRange = document.createRange();\n                newRange.setStartAfter(span);\n                newRange.setEndAfter(span);\n                selection.removeAllRanges();\n                selection.addRange(newRange);\n\n                // Remove cursor element\n                span.remove();\n            }, 10);\n        }\n    }\n};\n\nexport const moveSelectionOffset = (distance: number) => {\n    endOffset += distance;\n    startOffset += distance;\n};\n\nexport const setChildIndex = (index: number) => {\n    childIndex = index;\n};\n\n/**\n * This function returns the code of the character that will be removed by the KeyDown event in the\n * next step, if the \"Backspace\" or \"Delete\" key was pressed and there is no selection of multiple\n * characters.\n *\n * @param event - Keyboard event from \"onKeyDown\"\n */\nexport const getCharCodeThatWillBeDeleted = (event: KeyboardEvent<HTMLDivElement>) => {\n    const range = window.getSelection()?.getRangeAt(0);\n\n    /**\n     * At this point the function is aborted if there is no selection range, several characters have\n     * been selected and therefore no single letter is removed or neither the \"Backspace\" nor the\n     * \"Delete\" key has been pressed.\n     */\n    if (\n        !range ||\n        range.endOffset !== range.startOffset ||\n        (event.key !== 'Backspace' && event.key !== 'Delete' && event.key !== 'Unidentified')\n    ) {\n        return null;\n    }\n\n    if (event.key === 'Backspace' || event.key === 'Unidentified') {\n        const { nodeValue, previousSibling } = range.startContainer;\n\n        if (range.startOffset > 0) {\n            return nodeValue?.charCodeAt(range.startOffset - 1);\n        }\n\n        return previousSibling?.nodeValue?.charCodeAt(previousSibling.nodeValue.length - 1);\n    }\n\n    const { nextSibling, nodeValue } = range.endContainer;\n\n    if (range.endOffset < (nodeValue?.length ?? 0)) {\n        return nodeValue?.charCodeAt(range.endOffset);\n    }\n\n    return nextSibling?.nodeValue?.charCodeAt(0);\n};\n\ninterface FindAndSelectTextOptions {\n    editorElement: HTMLDivElement;\n    searchText: string;\n}\n\nexport const findAndSelectText = ({\n    editorElement,\n    searchText,\n}: FindAndSelectTextOptions): Range | null => {\n    if (!editorElement.textContent?.includes(searchText)) {\n        return null;\n    }\n\n    const range = document.createRange();\n\n    let startNode: Node | null = null;\n    let offset = -1;\n\n    const searchNodesForText = (node: Node) => {\n        if (node.nodeType === Node.TEXT_NODE) {\n            const index = node.textContent?.indexOf(searchText);\n\n            if (typeof index === 'number' && index !== -1) {\n                startNode = node;\n                offset = index;\n\n                range.setStart(node, index);\n                range.setEnd(node, index + searchText.length);\n\n                return true;\n            }\n        } else if (node.nodeName !== 'LC_MENTION') {\n            return Array.from(node.childNodes).some(searchNodesForText);\n        }\n\n        return false;\n    };\n\n    searchNodesForText(editorElement);\n\n    if (startNode && offset !== -1) return range;\n\n    return null;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/utils/text.js

@@ -0,0 +1,48 @@
+import { BB_LC_MENTION_REGEX, BB_NER_IGNORE_REGEX, BB_NER_REPLACE_REGEX, HTML_A_TAG_REGEX, HTML_BOLD_REGEX, HTML_LC_MENTION_REGEX, HTML_NER_IGNORE_REGEX, HTML_NER_REPLACE_REGEX } from '../constants/regex';
+import { escapeHTML, unescapeHTML } from './emoji';
+export const convertTextToHTML = text => {
+  const element = document.createElement('div');
+  element.style.position = 'absolute';
+  element.style.opacity = '0';
+  element.contentEditable = 'true';
+  element.innerText = text;
+  document.body.appendChild(element);
+  let result = element.innerHTML;
+  document.body.removeChild(element);
+  result = unescapeHTML(result);
+  result = result.replace(HTML_A_TAG_REGEX, '$1').replace(BB_LC_MENTION_REGEX, '<lc_mention contenteditable="false" id="$1"><span>@</span>$2</lc_mention>​').replace(BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable="false">$1</nerIgnore>').replace(BB_NER_REPLACE_REGEX, (_, prefix, type, value, entity) => {
+    const prefixAttr = prefix ? `prefix="${prefix}" ` : '';
+    return `<nerReplace contenteditable="false" ${prefixAttr}type="${type}" value="${value}">${entity}</nerReplace>`;
+  });
+  return result;
+};
+export const convertHTMLToText = text => {
+  let result = text;
+  result = result.replace(HTML_A_TAG_REGEX, '$1').replace(HTML_BOLD_REGEX, '[b]$1[/b]').replace(HTML_LC_MENTION_REGEX, '[lc_mention id="$1"]$2[/lc_mention]').replace(HTML_NER_IGNORE_REGEX, '[nerIgnore]$1[/nerIgnore]').replace(HTML_NER_REPLACE_REGEX, (_, prefix, type, value, entity) => {
+    const prefixAttr = prefix ? `prefix="${prefix}" ` : '';
+    return `[nerReplace ${prefixAttr}type="${type}" value="${value}"]${entity}[/nerReplace]`;
+  });
+
+  // eslint-disable-next-line no-irregular-whitespace
+  result = result.replace(/​/g, '');
+  result = escapeHTML(result);
+  const element = document.createElement('div');
+  element.style.position = 'absolute';
+  element.style.opacity = '0';
+  element.contentEditable = 'true';
+  element.innerHTML = result;
+  document.body.appendChild(element);
+  result = element.innerText;
+  document.body.removeChild(element);
+  return result;
+};
+export const getElementTextLength = element => {
+  let textLength = 0;
+  try {
+    textLength = convertHTMLToText(element.outerHTML).length;
+  } catch (e) {
+    // Do nothing
+  }
+  return textLength;
+};
+//# sourceMappingURL=text.js.map

package/lib/esm/utils/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","names":["BB_LC_MENTION_REGEX","BB_NER_IGNORE_REGEX","BB_NER_REPLACE_REGEX","HTML_A_TAG_REGEX","HTML_BOLD_REGEX","HTML_LC_MENTION_REGEX","HTML_NER_IGNORE_REGEX","HTML_NER_REPLACE_REGEX","escapeHTML","unescapeHTML","convertTextToHTML","text","element","document","createElement","style","position","opacity","contentEditable","innerText","body","appendChild","result","innerHTML","removeChild","replace","_","prefix","type","value","entity","prefixAttr","convertHTMLToText","getElementTextLength","textLength","outerHTML","length","e"],"sources":["../../../src/utils/text.ts"],"sourcesContent":["import {\n    BB_LC_MENTION_REGEX,\n    BB_NER_IGNORE_REGEX,\n    BB_NER_REPLACE_REGEX,\n    HTML_A_TAG_REGEX,\n    HTML_BOLD_REGEX,\n    HTML_LC_MENTION_REGEX,\n    HTML_NER_IGNORE_REGEX,\n    HTML_NER_REPLACE_REGEX,\n} from '../constants/regex';\nimport { escapeHTML, unescapeHTML } from './emoji';\n\nexport const convertTextToHTML = (text: string) => {\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerText = text;\n\n    document.body.appendChild(element);\n\n    let result = element.innerHTML;\n\n    document.body.removeChild(element);\n\n    result = unescapeHTML(result);\n\n    result = result\n        .replace(HTML_A_TAG_REGEX, '$1')\n        .replace(\n            BB_LC_MENTION_REGEX,\n            '<lc_mention contenteditable=\"false\" id=\"$1\"><span>@</span>$2</lc_mention>​',\n        )\n        .replace(BB_NER_IGNORE_REGEX, '<nerIgnore contenteditable=\"false\">$1</nerIgnore>')\n        .replace(\n            BB_NER_REPLACE_REGEX,\n            (_, prefix: string | undefined, type: string, value: string, entity: string) => {\n                const prefixAttr = prefix ? `prefix=\"${prefix}\" ` : '';\n\n                return `<nerReplace contenteditable=\"false\" ${prefixAttr}type=\"${type}\" value=\"${value}\">${entity}</nerReplace>`;\n            },\n        );\n\n    return result;\n};\n\nexport const convertHTMLToText = (text: string) => {\n    let result = text;\n\n    result = result\n        .replace(HTML_A_TAG_REGEX, '$1')\n        .replace(HTML_BOLD_REGEX, '[b]$1[/b]')\n        .replace(HTML_LC_MENTION_REGEX, '[lc_mention id=\"$1\"]$2[/lc_mention]')\n        .replace(HTML_NER_IGNORE_REGEX, '[nerIgnore]$1[/nerIgnore]')\n        .replace(\n            HTML_NER_REPLACE_REGEX,\n            (_, prefix: string | undefined, type: string, value: string, entity: string) => {\n                const prefixAttr = prefix ? `prefix=\"${prefix}\" ` : '';\n\n                return `[nerReplace ${prefixAttr}type=\"${type}\" value=\"${value}\"]${entity}[/nerReplace]`;\n            },\n        );\n\n    // eslint-disable-next-line no-irregular-whitespace\n    result = result.replace(/​/g, '');\n\n    result = escapeHTML(result);\n\n    const element = document.createElement('div');\n\n    element.style.position = 'absolute';\n    element.style.opacity = '0';\n\n    element.contentEditable = 'true';\n    element.innerHTML = result;\n\n    document.body.appendChild(element);\n\n    result = element.innerText;\n\n    document.body.removeChild(element);\n\n    return result;\n};\n\nexport const getElementTextLength = (element: Element) => {\n    let textLength = 0;\n\n    try {\n        textLength = convertHTMLToText(element.outerHTML).length;\n    } catch (e) {\n        // Do nothing\n    }\n\n    return textLength;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/types/components/emoji-input/EmojiInput.d.ts

@@ -0,0 +1,94 @@
+import React, { ChangeEvent, CSSProperties, FocusEventHandler, KeyboardEventHandler, ReactElement, ReactNode } from 'react';
+import type { PopupAlignment } from '../../constants/alignment';
+export type EmojiInputProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: string;
+    /**
+     * Sets the height of the input field to a fixed value. If this value is not set, the component will use the needed height until the maximum height is reached.
+     */
+    height?: CSSProperties['height'];
+    /**
+     * HTML id of the input element
+     */
+    inputId?: string;
+    /**
+     * Disables the input so that it cannot be changed anymore
+     */
+    isDisabled?: boolean;
+    /**
+     * Sets the maximum height of the input field.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Function that is executed when the input field loses focus.
+     */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Function that is executed when the input field gets the focus.
+     */
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Function that is executed when the text of the input changes. In addition to the original
+     * event, the original text is returned as second parameter, in which the internally used HTML
+     * elements have been converted back to BB codes.
+     */
+    onInput?: (event: ChangeEvent<HTMLDivElement>, originalText: string) => void;
+    /**
+     * Function that is executed when a key is pressed down.
+     */
+    onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
+    /**
+     * Function to be executed if the prefixElement is removed.
+     */
+    onPrefixElementRemove?: () => void;
+    /**
+     * Function that is executed when the visibility of the popup changes.
+     * @param {boolean} isVisible - Whether the popup is visible or not
+     */
+    onPopupVisibilityChange?: (isVisible: boolean) => void;
+    /**
+     * Person id of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    personId?: string;
+    /**
+     * Placeholder for the input field
+     */
+    placeholder?: string | ReactElement;
+    /**
+     * Sets the alignment of the popup to a fixed value. If this value is not set, the component
+     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this
+     * value.
+     */
+    popupAlignment?: PopupAlignment;
+    /**
+     * Element that is rendered before the input field but the placeholder is still visible.
+     */
+    prefixElement?: string;
+    /**
+     * Element that is rendered inside the EmojiInput on the right side.
+     */
+    rightElement?: ReactNode;
+    /**
+     * Whether the placeholder should be shown after the input has focus.
+     */
+    shouldHidePlaceholderOnFocus?: boolean;
+    /**
+     * Prevents the EmojiPickerPopup icon from being displayed
+     */
+    shouldPreventEmojiPicker?: boolean;
+    /**
+     * The plain text value of the input field. Instead of HTML elements BB codes must be used at
+     * this point. These are then converted by the input field into corresponding HTML elements.
+     */
+    value: string;
+};
+export type EmojiInputRef = {
+    insertTextAtCursorPosition: (text: string) => void;
+    replaceText: (searchText: string, replaceText: string) => void;
+    startProgress: (durationInSeconds: number) => void;
+    stopProgress: () => void;
+};
+declare const EmojiInput: React.ForwardRefExoticComponent<EmojiInputProps & React.RefAttributes<EmojiInputRef>>;
+export default EmojiInput;