@chayns-components/emoji-input 5.0.0-beta.73 → 5.0.0-beta.730

package/lib/{components → types/components}/emoji-picker-popup/EmojiPickerPopup.d.ts

@@ -1,21 +1,23 @@
 import { FC } from 'react';
 export type EmojiPickerPopupProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: string;
     /**
      * 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;
     /**
      * Function executed when an emoji is selected in the popup
      * @param {string} emoji - Emoji that was selected
      */
     onSelect: (emoji: string) => void;
 };
-export type PopupPosition = {
-    bottom?: number;
-    left?: number;
-    right?: number;
-    top?: number;
-};
 declare const EmojiPickerPopup: FC<EmojiPickerPopupProps>;
 export default EmojiPickerPopup;

package/lib/types/components/emoji-picker-popup/EmojiPickerPopup.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledEmojiPickerPopup: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/{constants → types/constants}/alignment.d.ts

@@ -1,3 +1,7 @@
+export declare enum AnchorAlignment {
+    Bottom = 0,
+    Top = 1
+}
 export declare enum PopupAlignment {
     TopLeft = 0,
     BottomLeft = 1,

package/lib/{constants → types/constants}/categories.d.ts

@@ -1,4 +1,5 @@
 export declare const CATEGORY_EMOJIS: {
+    history: string;
     smileys_emotion: string;
     people_body: string;
     animals_nature: string;

package/lib/types/constants/emoji.d.ts

@@ -0,0 +1,8 @@
+export declare const asciiList: {
+    [key: string]: string;
+};
+export declare const regAscii: RegExp;
+export declare const shortNameList: {
+    [key: string]: string;
+};
+export declare const regShortnames: RegExp;

package/lib/types/constants/externalServerUrl.d.ts

@@ -0,0 +1 @@
+export declare const ITEM_STORAGE_BASE_URL = "https://cube.tobit.cloud/item-storage/api/v1.0/schemes";

package/lib/types/constants/regex.d.ts

@@ -0,0 +1,8 @@
+export declare const BB_LC_MENTION_REGEX: RegExp;
+export declare const BB_NER_IGNORE_REGEX: RegExp;
+export declare const BB_NER_REPLACE_REGEX: RegExp;
+export declare const HTML_LC_MENTION_REGEX: RegExp;
+export declare const HTML_NER_IGNORE_REGEX: RegExp;
+export declare const HTML_NER_REPLACE_REGEX: RegExp;
+export declare const HTML_BOLD_REGEX: RegExp;
+export declare const HTML_A_TAG_REGEX: RegExp;

package/lib/types/hooks/emojiHistory.d.ts

@@ -0,0 +1,22 @@
+import type { Category } from '../types/category';
+export interface HistoryItem {
+    count: number;
+    emoji: string;
+    modifiedTime: string;
+    name: string;
+    skin_tone_support: boolean;
+}
+interface UseEmojiHistoryOptions {
+    accessToken?: string;
+    personId?: string;
+    selectedCategory: Category;
+}
+export declare const useEmojiHistory: ({ accessToken, personId, selectedCategory, }: UseEmojiHistoryOptions) => {
+    addOrUpdateEmojiInHistory: ({ emoji, name, skin_tone_support, }: {
+        emoji: string;
+        name: string;
+        skin_tone_support: boolean;
+    }) => Promise<void>;
+    historyEmojis: HistoryItem[];
+};
+export {};

package/lib/types/index.d.ts

@@ -0,0 +1,6 @@
+export { default as EmojiInput } from './components/emoji-input/EmojiInput';
+export type { EmojiInputRef } from './components/emoji-input/EmojiInput';
+export { default as EmojiPickerPopup } from './components/emoji-picker-popup/EmojiPickerPopup';
+export { default as EmojiPicker } from './components/emoji-picker/EmojiPicker';
+export { PopupAlignment } from './constants/alignment';
+export { convertEmojisToUnicode } from './utils/emoji';

package/lib/types/types/api.d.ts

@@ -0,0 +1,4 @@
+export interface ApiFunctionResult<T = null> {
+    data?: T;
+    status?: number;
+}

package/lib/types/types/category.d.ts

@@ -0,0 +1 @@
+export type Category = 'history' | 'smileys_emotion' | 'people_body' | 'animals_nature' | 'food_drink' | 'travel_places' | 'activities' | 'objects' | 'symbols' | 'flags';

package/lib/types/utils/emoji.d.ts

@@ -0,0 +1,4 @@
+export declare const unescapeHTML: (text: string) => string;
+export declare const escapeHTML: (text: string) => string;
+export declare const convertEmojisToUnicode: (text: string) => string;
+export declare const addSkinToneToEmoji: (emoji: string, skinTone: string) => string;

package/lib/{utils → types/utils}/environment.d.ts

@@ -4,5 +4,6 @@ declare enum DeviceType {
     Tablet = 2
 }
 export declare const getDeviceType: () => DeviceType;
+export declare const getIsMacOS: () => boolean;
 export declare const getIsMobile: () => boolean;
 export {};

package/lib/types/utils/font.d.ts

@@ -0,0 +1 @@
+export declare const getFontFamily: () => string;

package/lib/types/utils/insert.d.ts

@@ -0,0 +1,26 @@
+interface InsertTextAtCursorPositionOptions {
+    editorElement: HTMLDivElement;
+    text: string;
+    shouldUseSavedSelection?: boolean;
+}
+/**
+ * This function inserts the passed text at the correct position in the editor element. If the
+ * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
+ * will be appended to the back of the input field content.
+ *
+ * In addition, this function also sets the cursor to the correct position when the input field
+ * has the focus. For this purpose, the current position of the cursor or a selection is read to
+ * calculate the cursor position after inserting the text.
+ *
+ * @param {Object} options - Object with element and text to insert
+ * @param {HTMLDivElement} options.editorElement - Element to insert text into
+ * @param {string} options.text - Text to insert into element
+ */
+export declare const insertTextAtCursorPosition: ({ editorElement, text, shouldUseSavedSelection, }: InsertTextAtCursorPositionOptions) => void;
+export interface ReplaceTextOptions {
+    editorElement: HTMLDivElement;
+    searchText: string;
+    pasteText: string;
+}
+export declare const replaceText: ({ editorElement, searchText, pasteText }: ReplaceTextOptions) => void;
+export {};

package/lib/types/utils/number.d.ts

@@ -0,0 +1 @@
+export declare const clamp: (value: number, min: number, max: number) => number;

package/lib/types/utils/selection.d.ts

@@ -0,0 +1,22 @@
+import type { KeyboardEvent } from 'react';
+interface SaveSelectionOptions {
+    shouldIgnoreEmptyTextNodes?: boolean;
+}
+export declare const saveSelection: (element: HTMLDivElement, { shouldIgnoreEmptyTextNodes }?: SaveSelectionOptions) => void;
+export declare const restoreSelection: (element: HTMLDivElement) => void;
+export declare const moveSelectionOffset: (distance: number) => void;
+export declare const setChildIndex: (index: number) => void;
+/**
+ * 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 declare const getCharCodeThatWillBeDeleted: (event: KeyboardEvent<HTMLDivElement>) => number | null | undefined;
+interface FindAndSelectTextOptions {
+    editorElement: HTMLDivElement;
+    searchText: string;
+}
+export declare const findAndSelectText: ({ editorElement, searchText, }: FindAndSelectTextOptions) => Range | null;
+export {};

package/lib/types/utils/text.d.ts

@@ -0,0 +1,3 @@
+export declare const convertTextToHTML: (text: string) => string;
+export declare const convertHTMLToText: (text: string) => string;
+export declare const getElementTextLength: (element: Element) => number;

package/package.json

@@ -1,7 +1,14 @@
 {
     "name": "@chayns-components/emoji-input",
-    "version": "5.0.0-beta.73",
+    "version": "5.0.0-beta.730",
     "description": "Input field that supports HTML elements and emojis",
+    "sideEffects": false,
+    "browserslist": [
+        ">0.5%",
+        "not dead",
+        "not op_mini all",
+        "not IE 11"
+    ],
     "keywords": [
         "chayns",
         "react",
@@ -13,8 +20,16 @@
     "author": "Tobit.Software",
     "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/emoji-input#readme",
     "license": "MIT",
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
+    "main": "lib/cjs/index.js",
+    "module": "lib/esm/index.js",
+    "types": "lib/types/index.d.ts",
+    "exports": {
+        ".": {
+            "require": "./lib/cjs/index.js",
+            "import": "./lib/esm/index.js",
+            "types": "./lib/types/index.d.ts"
+        }
+    },
     "directories": {
         "lib": "lib",
         "test": "__tests__"
@@ -27,46 +42,47 @@
         "url": "git+https://github.com/TobitSoftware/chayns-components.git"
     },
     "scripts": {
-        "build": "npm run build:js && npm run build:types",
-        "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories --copy-files",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:types",
         "build:types": "tsc",
+        "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories --copy-files",
+        "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories --copy-files",
         "prepublishOnly": "npm run build"
     },
     "bugs": {
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.0",
-        "@babel/preset-env": "^7.20.2",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.0",
-        "@types/react": "^17.0.53",
-        "@types/react-dom": "^17.0.19",
-        "@types/styled-components": "^5.1.26",
-        "@types/uuid": "^9.0.0",
-        "babel-loader": "^8.3.0",
-        "lerna": "^6.5.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "typescript": "^4.9.5"
+        "@babel/cli": "^7.24.8",
+        "@babel/core": "^7.25.2",
+        "@babel/preset-env": "^7.25.3",
+        "@babel/preset-react": "^7.24.7",
+        "@babel/preset-typescript": "^7.24.7",
+        "@types/react": "^18.3.3",
+        "@types/react-dom": "^18.3.0",
+        "@types/styled-components": "^5.1.34",
+        "@types/uuid": "^9.0.8",
+        "babel-loader": "^9.1.3",
+        "cross-env": "^7.0.3",
+        "lerna": "^8.1.8",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "styled-components": "^6.1.12",
+        "typescript": "^5.5.4"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.66",
-        "@chayns/colors": "^2.0.0",
-        "clsx": "^1.2.1",
-        "emojilib": "^3.0.8",
-        "framer-motion": "^6.5.1",
-        "styled-components": "^5.3.6",
-        "unicode-emoji-json": "^0.5.0",
-        "uuid": "^9.0.0"
+        "@chayns-components/core": "^5.0.0-beta.730",
+        "emojilib": "^3.0.12",
+        "unicode-emoji-json": "^0.6.0"
     },
     "peerDependencies": {
+        "chayns-api": ">=1.0.73",
+        "framer-motion": ">=10.18.0",
         "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "react-dom": ">=16.14.0",
+        "styled-components": ">=5.3.11"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "1d009df70fa042027a5f7784cf3c51b94440cc8f"
+    "gitHead": "dcf28d137c4010b813a82af90b35d24d6be710fb"
 }

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

@@ -1,30 +0,0 @@
-import { ChangeEventHandler, FC, ReactNode } from 'react';
-export type EmojiInputProps = {
-    /**
-     * Disables the input so that it cannot be changed anymore
-     */
-    isDisabled: boolean;
-    /**
-     * Function that is executed when the text of the input changes
-     */
-    onInput?: ChangeEventHandler<HTMLDivElement>;
-    /**
-     * 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;
-    /**
-     * Placeholder for the input field
-     */
-    placeholder?: string;
-    /**
-     * Element that is rendered inside the EmojiInput on the right side.
-     */
-    rightElement?: ReactNode;
-    /**
-     * Value of the input field
-     */
-    value: string;
-};
-declare const EmojiInput: FC<EmojiInputProps>;
-export default EmojiInput;

package/lib/components/emoji-input/EmojiInput.js

@@ -1,154 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _emoji = require("../../utils/emoji");
-var _environment = require("../../utils/environment");
-var _selection = require("../../utils/selection");
-var _EmojiPickerPopup = _interopRequireDefault(require("../emoji-picker-popup/EmojiPickerPopup"));
-var _EmojiInput = require("./EmojiInput.styles");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const EmojiInput = _ref => {
-  let {
-    isDisabled,
-    onInput,
-    onPopupVisibilityChange,
-    placeholder,
-    rightElement,
-    value
-  } = _ref;
-  const [isMobile] = (0, _react.useState)((0, _environment.getIsMobile)());
-  const editorRef = (0, _react.useRef)(null);
-
-  /**
-   * This function updates the content of the 'contentEditable' element if the new text is
-   * different from the previous content. So this is only true if, for example, a text like ":-)"
-   * has been replaced to the corresponding emoji.
-   *
-   * When updating the HTML, the current cursor position is saved before replacing the content, so
-   * that it can be set again afterward.
-   */
-  const handleUpdateText = (0, _react.useCallback)(text => {
-    if (!editorRef.current) {
-      return;
-    }
-    const newHtml = (0, _emoji.convertAsciiToUnicode)(text);
-    if (newHtml !== editorRef.current.innerHTML) {
-      (0, _selection.saveSelection)(editorRef.current);
-      editorRef.current.innerHTML = newHtml;
-      (0, _selection.restoreSelection)(editorRef.current);
-    }
-  }, []);
-
-  /**
-   * This function handles the 'input' events of the 'contentEditable' element and also passes the
-   * respective event up accordingly if the 'onInput' property is a function.
-   */
-  const handleInput = (0, _react.useCallback)(event => {
-    if (!editorRef.current) {
-      return;
-    }
-    handleUpdateText(editorRef.current.innerHTML);
-    if (typeof onInput === 'function') {
-      onInput(event);
-    }
-  }, [handleUpdateText, onInput]);
-
-  /**
-   * This function processes the selection of an emoji via the popup. If the 'contentEditable'
-   * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji
-   * will be appended to the back of the input field content.
-   *
-   * In addition, this function also sets the cursor to the correct position when the input field
-   * has the focus. For this purpose, the current position of the cursor or a selection is read to
-   * calculate the cursor position after inserting the emoji.
-   *
-   * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,
-   * which in turn executes the 'onInput' function from the props. So this serves to ensure that
-   * the event is also passed through to the top when inserting via the popup.
-   */
-  const handlePopupSelect = (0, _react.useCallback)(emoji => {
-    if (!editorRef.current) {
-      return;
-    }
-    const selection = window.getSelection();
-    if (selection !== null && selection !== void 0 && selection.anchorNode && editorRef.current.contains(selection.anchorNode)) {
-      const {
-        endOffset,
-        startOffset
-      } = selection.getRangeAt(0);
-      const rangeDistance = endOffset - startOffset;
-      let offset = endOffset + emoji.length - rangeDistance;
-      let {
-        anchorNode
-      } = selection;
-      if (anchorNode.nodeValue) {
-        anchorNode.nodeValue = anchorNode.nodeValue.substring(0, startOffset) + emoji + anchorNode.nodeValue.substring(endOffset);
-      } else if (anchorNode === editorRef.current) {
-        const newTextNode = document.createTextNode(emoji);
-        editorRef.current.appendChild(newTextNode);
-        anchorNode = newTextNode;
-      }
-      const newRange = document.createRange();
-      if (anchorNode.nodeValue) {
-        offset = Math.min(offset, anchorNode.nodeValue.length);
-      }
-      newRange.setStart(anchorNode, offset);
-      newRange.setEnd(anchorNode, offset);
-      selection.removeAllRanges();
-      selection.addRange(newRange);
-    } else {
-      editorRef.current.innerHTML += emoji;
-    }
-    const event = new Event('input', {
-      bubbles: true
-    });
-    editorRef.current.dispatchEvent(event);
-  }, []);
-
-  /**
-   * This function ensures that the input field does not lose focus when the popup is opened or an
-   * emoji is selected in it. For this purpose the corresponding elements get the class
-   * 'prevent-lose-focus'.
-   *
-   * The class can also be set to any other elements that should also not cause the input field to
-   * lose focus.
-   */
-  const handlePreventLoseFocus = (0, _react.useCallback)(event => {
-    var _element$parentElemen;
-    const element = event.target;
-    if (element.classList.contains('prevent-lose-focus') || (_element$parentElemen = element.parentElement) !== null && _element$parentElemen !== void 0 && _element$parentElemen.classList.contains('prevent-lose-focus')) {
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }, []);
-  (0, _react.useEffect)(() => {
-    handleUpdateText(value);
-  }, [handleUpdateText, value]);
-  (0, _react.useEffect)(() => {
-    document.body.addEventListener('mousedown', handlePreventLoseFocus);
-    return () => {
-      document.body.removeEventListener('mousedown', handlePreventLoseFocus);
-    };
-  }, [handlePreventLoseFocus]);
-  return /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInput, {
-    isDisabled: isDisabled
-  }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputContent, null, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
-    contentEditable: !isDisabled,
-    onInput: handleInput,
-    placeholder: placeholder,
-    ref: editorRef
-  }), !isMobile && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
-    onSelect: handlePopupSelect,
-    onPopupVisibilityChange: onPopupVisibilityChange
-  })), rightElement);
-};
-EmojiInput.displayName = 'EmojiInput';
-var _default = EmojiInput;
-exports.default = _default;
-//# sourceMappingURL=EmojiInput.js.map

package/lib/components/emoji-input/EmojiInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_selection","_EmojiPickerPopup","_interopRequireDefault","_EmojiInput","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiInput","_ref","isDisabled","onInput","onPopupVisibilityChange","placeholder","rightElement","value","isMobile","useState","getIsMobile","editorRef","useRef","handleUpdateText","useCallback","text","current","newHtml","convertAsciiToUnicode","innerHTML","saveSelection","restoreSelection","handleInput","event","handlePopupSelect","emoji","selection","window","getSelection","anchorNode","contains","endOffset","startOffset","getRangeAt","rangeDistance","offset","length","nodeValue","substring","newTextNode","document","createTextNode","appendChild","newRange","createRange","Math","min","setStart","setEnd","removeAllRanges","addRange","Event","bubbles","dispatchEvent","handlePreventLoseFocus","_element$parentElemen","element","target","classList","parentElement","preventDefault","stopPropagation","useEffect","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","StyledEmojiInputEditor","contentEditable","ref","onSelect","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { convertAsciiToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled: boolean;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onInput?: ChangeEventHandler<HTMLDivElement>;\n    /**\n     * Function that is executed when the visibility of the popup changes.\n     * @param {boolean} isVisible - Whether the popup is visible or not\n     */\n    onPopupVisibilityChange?: (isVisible: boolean) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element that is rendered inside the EmojiInput on the right side.\n     */\n    rightElement?: ReactNode;\n    /**\n     * Value of the input field\n     */\n    value: string;\n};\n\nconst EmojiInput: FC<EmojiInputProps> = ({\n    isDisabled,\n    onInput,\n    onPopupVisibilityChange,\n    placeholder,\n    rightElement,\n    value,\n}) => {\n    const [isMobile] = useState(getIsMobile());\n\n    const editorRef = useRef<HTMLDivElement>(null);\n\n    /**\n     * This function updates the content of the 'contentEditable' element if the new text is\n     * different from the previous content. So this is only true if, for example, a text like \":-)\"\n     * has been replaced to the corresponding emoji.\n     *\n     * When updating the HTML, the current cursor position is saved before replacing the content, so\n     * that it can be set again afterward.\n     */\n    const handleUpdateText = useCallback((text: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const newHtml = convertAsciiToUnicode(text);\n\n        if (newHtml !== editorRef.current.innerHTML) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerHTML = newHtml;\n\n            restoreSelection(editorRef.current);\n        }\n    }, []);\n\n    /**\n     * This function handles the 'input' events of the 'contentEditable' element and also passes the\n     * respective event up accordingly if the 'onInput' property is a function.\n     */\n    const handleInput = useCallback(\n        (event: ChangeEvent<HTMLDivElement>) => {\n            if (!editorRef.current) {\n                return;\n            }\n\n            handleUpdateText(editorRef.current.innerHTML);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\n    );\n\n    /**\n     * This function processes the selection of an emoji via the popup. If the 'contentEditable'\n     * element has the focus, the new emoji is inserted at the cursor position. If not, the emoji\n     * will be appended to the back of the input field content.\n     *\n     * In addition, this function also sets the cursor to the correct position when the input field\n     * has the focus. For this purpose, the current position of the cursor or a selection is read to\n     * calculate the cursor position after inserting the emoji.\n     *\n     * At the end an 'input' event is dispatched, so that the function 'handleInput' is triggered,\n     * which in turn executes the 'onInput' function from the props. So this serves to ensure that\n     * the event is also passed through to the top when inserting via the popup.\n     */\n    const handlePopupSelect = useCallback((emoji: string) => {\n        if (!editorRef.current) {\n            return;\n        }\n\n        const selection = window.getSelection();\n\n        if (selection?.anchorNode && editorRef.current.contains(selection.anchorNode)) {\n            const { endOffset, startOffset } = selection.getRangeAt(0);\n\n            const rangeDistance = endOffset - startOffset;\n\n            let offset = endOffset + emoji.length - rangeDistance;\n\n            let { anchorNode } = selection;\n\n            if (anchorNode.nodeValue) {\n                anchorNode.nodeValue =\n                    anchorNode.nodeValue.substring(0, startOffset) +\n                    emoji +\n                    anchorNode.nodeValue.substring(endOffset);\n            } else if (anchorNode === editorRef.current) {\n                const newTextNode = document.createTextNode(emoji);\n\n                editorRef.current.appendChild(newTextNode);\n\n                anchorNode = newTextNode;\n            }\n\n            const newRange = document.createRange();\n\n            if (anchorNode.nodeValue) {\n                offset = Math.min(offset, anchorNode.nodeValue.length);\n            }\n\n            newRange.setStart(anchorNode, offset);\n            newRange.setEnd(anchorNode, offset);\n\n            selection.removeAllRanges();\n            selection.addRange(newRange);\n        } else {\n            editorRef.current.innerHTML += emoji;\n        }\n\n        const event = new Event('input', { bubbles: true });\n\n        editorRef.current.dispatchEvent(event);\n    }, []);\n\n    /**\n     * This function ensures that the input field does not lose focus when the popup is opened or an\n     * emoji is selected in it. For this purpose the corresponding elements get the class\n     * 'prevent-lose-focus'.\n     *\n     * The class can also be set to any other elements that should also not cause the input field to\n     * lose focus.\n     */\n    const handlePreventLoseFocus = useCallback((event: MouseEvent) => {\n        const element = event.target as Element;\n\n        if (\n            element.classList.contains('prevent-lose-focus') ||\n            element.parentElement?.classList.contains('prevent-lose-focus')\n        ) {\n            event.preventDefault();\n            event.stopPropagation();\n        }\n    }, []);\n\n    useEffect(() => {\n        handleUpdateText(value);\n    }, [handleUpdateText, value]);\n\n    useEffect(() => {\n        document.body.addEventListener('mousedown', handlePreventLoseFocus);\n\n        return () => {\n            document.body.removeEventListener('mousedown', handlePreventLoseFocus);\n        };\n    }, [handlePreventLoseFocus]);\n\n    return (\n        <StyledEmojiInput isDisabled={isDisabled}>\n            <StyledEmojiInputContent>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    onInput={handleInput}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                />\n                {!isMobile && (\n                    <EmojiPickerPopup\n                        onSelect={handlePopupSelect}\n                        onPopupVisibilityChange={onPopupVisibilityChange}\n                    />\n                )}\n            </StyledEmojiInputContent>\n            {rightElement}\n        </StyledEmojiInput>\n    );\n};\n\nEmojiInput.displayName = 'EmojiInput';\n\nexport default EmojiInput;\n"],"mappings":"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"}

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

@@ -1,8 +0,0 @@
-import type { EmojiInputProps } from './EmojiInput';
-export declare const StyledEmojiInput: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "isDisabled"> & {
-    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;
-export declare const StyledEmojiInputContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledEmojiInputEditor: import("styled-components").StyledComponent<"div", any, Pick<EmojiInputProps, "placeholder"> & {
-    theme: import("@chayns-components/core/lib/components/color-scheme-provider/ColorSchemeProvider").Theme;
-}, never>;

package/lib/components/emoji-input/EmojiInput.styles.js

@@ -1,83 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledEmojiInputEditor = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-var _environment = require("../../utils/environment");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-const StyledEmojiInput = _styledComponents.default.div`
-    align-items: center;
-    background-color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme['100'];
-}};
-    border: 1px solid rgba(160, 160, 160, 0.3);
-    border-radius: 3px;
-    display: flex;
-    min-height: 42px;
-    opacity: ${_ref2 => {
-  let {
-    isDisabled
-  } = _ref2;
-  return isDisabled ? 0.5 : 1;
-}};
-    pointer-events: ${_ref3 => {
-  let {
-    isDisabled
-  } = _ref3;
-  return isDisabled ? 'none' : 'initial';
-}};
-    position: relative;
-    transition: opacity 0.3s ease;
-`;
-exports.StyledEmojiInput = StyledEmojiInput;
-const StyledEmojiInputContent = _styledComponents.default.div`
-    display: flex;
-    flex: 1 1 auto;
-    gap: 10px;
-    padding: 8px 10px;
-`;
-exports.StyledEmojiInputContent = StyledEmojiInputContent;
-const StyledEmojiInputEditor = _styledComponents.default.div`
-    color: ${_ref4 => {
-  let {
-    theme
-  } = _ref4;
-  return theme.text;
-}};
-    flex: 1 1 auto;
-    word-break: break-word;
-
-    ${() => {
-  if ((0, _environment.getIsMobile)()) {
-    return (0, _styledComponents.css)`
-                font-family: 'Roboto Regular', 'Tahoma', serif;
-            `;
-  }
-  return (0, _styledComponents.css)`
-            font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;
-        `;
-}}
-
-    &:empty:not(:focus):before {
-        content: '${_ref5 => {
-  let {
-    placeholder
-  } = _ref5;
-  return placeholder;
-}}';
-        color: ${_ref6 => {
-  let {
-    theme
-  } = _ref6;
-  return theme['006'];
-}};
-    }
-`;
-exports.StyledEmojiInputEditor = StyledEmojiInputEditor;
-//# sourceMappingURL=EmojiInput.styles.js.map

package/lib/components/emoji-input/EmojiInput.styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_environment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledEmojiInput","styled","div","_ref","theme","_ref2","isDisabled","_ref3","exports","StyledEmojiInputContent","StyledEmojiInputEditor","_ref4","text","getIsMobile","css","_ref5","placeholder","_ref6"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { getIsMobile } from '../../utils/environment';\nimport type { EmojiInputProps } from './EmojiInput';\n\ntype StyledEmojiInputProps = WithTheme<Pick<EmojiInputProps, 'isDisabled'>>;\n\nexport const StyledEmojiInput = styled.div<StyledEmojiInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledEmojiInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'initial')};\n    position: relative;\n    transition: opacity 0.3s ease;\n`;\n\nexport const StyledEmojiInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n`;\n\ntype StyledEmojiInputEditorProps = WithTheme<Pick<EmojiInputProps, 'placeholder'>>;\n\nexport const StyledEmojiInputEditor = styled.div<StyledEmojiInputEditorProps>`\n    color: ${({ theme }: StyledEmojiInputEditorProps) => theme.text};\n    flex: 1 1 auto;\n    word-break: break-word;\n\n    ${() => {\n        if (getIsMobile()) {\n            return css`\n                font-family: 'Roboto Regular', 'Tahoma', serif;\n            `;\n        }\n\n        return css`\n            font-family: 'Noto Color Emoji', 'Roboto Regular', 'Tahoma', serif;\n        `;\n    }}\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n    }\n`;\n"],"mappings":"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"}

package/lib/components/emoji-picker/EmojiPicker.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EmojiPicker.js","names":["_core","require","_react","_interopRequireWildcard","_dataByGroup","_interopRequireDefault","_EmojiPickerCategories","_EmojiPickerEmojis","_EmojiPicker","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","EmojiPicker","_ref","_emojiCategories$","onSelect","searchString","setSearchString","useState","selectedCategory","setSelectedCategory","emojiCategories","slug","handleCategorySelect","useCallback","category","handleSearchChange","event","target","value","createElement","StyledEmojiPicker","Input","onChange","placeholder","displayName","_default","exports"],"sources":["../../../src/components/emoji-picker/EmojiPicker.tsx"],"sourcesContent":["import { Input } from '@chayns-components/core';\nimport React, { ChangeEvent, FC, useCallback, useState } from 'react';\nimport emojiCategories from 'unicode-emoji-json/data-by-group.json';\nimport type { Category } from '../../types/category';\nimport EmojiPickerCategories from './emoji-picker-categories/EmojiPickerCategories';\nimport EmojiPickerEmojis from './emoji-picker-emojis/EmojiPickerEmojis';\nimport { StyledEmojiPicker } from './EmojiPicker.styles';\n\nexport type EmojiPickerProps = {\n    /**\n     * Function executed when an emoji is selected in the popup\n     * @param {string} emoji - Emoji that was selected\n     */\n    onSelect: (emoji: string) => void;\n};\nconst EmojiPicker: FC<EmojiPickerProps> = ({ onSelect }) => {\n    const [searchString, setSearchString] = useState('');\n    const [selectedCategory, setSelectedCategory] = useState(emojiCategories[0]?.slug as Category);\n\n    const handleCategorySelect = useCallback((category: Category) => {\n        setSearchString('');\n        setSelectedCategory(category);\n    }, []);\n\n    const handleSearchChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {\n        setSearchString(event.target.value);\n    }, []);\n\n    return (\n        <StyledEmojiPicker>\n            <Input onChange={handleSearchChange} placeholder=\"Suchen\" value={searchString} />\n            <EmojiPickerEmojis\n                onSelect={onSelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n            <EmojiPickerCategories\n                onSelect={handleCategorySelect}\n                searchString={searchString}\n                selectedCategory={selectedCategory}\n            />\n        </StyledEmojiPicker>\n    );\n};\n\nEmojiPicker.displayName = 'EmojiPicker';\n\nexport default EmojiPicker;\n"],"mappings":"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"}