@chayns-components/emoji-input 5.0.0-beta.100

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Tobit Laboratories AG
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,45 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/typewriter.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/typewriter?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the typewriter part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/typewriter
+
+# Yarn
+yarn add @chayns-components/typewriter
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+You can use the components in your project as in the following example.
+
+```typescript jsx
+import { Typewriter } from '@chayns-components/typewriter';
+
+<Typewriter>
+    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+    ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+    dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est. Lorem ipsum dolor
+    sit amet.
+</Typewriter>;
+```

package/lib/api/item-storage/get.d.ts

@@ -0,0 +1,8 @@
+import type { HistoryItem } from '../../hooks/emojiHistory';
+import type { ApiFunctionResult } from '../../types/api';
+interface GetEmojiHistoryOptions {
+    accessToken: string;
+    personId: string;
+}
+export declare const getEmojiHistory: ({ accessToken, personId, }: GetEmojiHistoryOptions) => Promise<ApiFunctionResult<HistoryItem[]>>;
+export {};

package/lib/api/item-storage/get.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getEmojiHistory = void 0;
+var _externalServerUrl = require("../../constants/externalServerUrl");
+const getEmojiHistory = async _ref => {
+  let {
+    accessToken,
+    personId
+  } = _ref;
+  const requestInit = {
+    headers: {
+      Authorization: `Bearer ${accessToken}`
+    },
+    method: 'GET'
+  };
+  const url = `${_externalServerUrl.ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;
+  const response = await fetch(url, requestInit);
+  if (response.status === 200) {
+    try {
+      const data = await response.json();
+      return {
+        data: data.value,
+        status: 200
+      };
+    } catch (e) {
+      // Do nothing
+    }
+  }
+  return {
+    status: response.status
+  };
+};
+exports.getEmojiHistory = getEmojiHistory;
+//# sourceMappingURL=get.js.map

package/lib/api/item-storage/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["_externalServerUrl","require","getEmojiHistory","_ref","accessToken","personId","requestInit","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","value","e","exports"],"sources":["../../../src/api/item-storage/get.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface GetEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n}\n\ninterface GetEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const getEmojiHistory = async ({\n    accessToken,\n    personId,\n}: GetEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n        },\n        method: 'GET',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 200) {\n        try {\n            const data = (await response.json()) as GetEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAgBO,MAAMC,eAAe,GAAG,MAAAC,IAAA,IAG0C;EAAA,IAHnC;IAClCC,WAAW;IACXC;EACoB,CAAC,GAAAF,IAAA;EACrB,MAAMG,WAAwB,GAAG;IAC7BC,OAAO,EAAE;MACLC,aAAa,EAAG,UAASJ,WAAY;IACzC,CAAC;IACDK,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAI,GAAEC,wCAAsB,YAAWN,QAAS,cAAa;EAEtE,MAAMO,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEJ,WAAW,CAAC;EAE9C,IAAIM,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,EAAkC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACE,KAAK;QAAEH,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOI,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEJ,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACK,OAAA,CAAAjB,eAAA,GAAAA,eAAA"}

package/lib/api/item-storage/put.d.ts

@@ -0,0 +1,9 @@
+import type { HistoryItem } from '../../hooks/emojiHistory';
+import type { ApiFunctionResult } from '../../types/api';
+interface PutEmojiHistoryOptions {
+    accessToken: string;
+    personId: string;
+    value: HistoryItem[];
+}
+export declare const putEmojiHistory: ({ accessToken, personId, value, }: PutEmojiHistoryOptions) => Promise<ApiFunctionResult<HistoryItem[]>>;
+export {};

package/lib/api/item-storage/put.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.putEmojiHistory = void 0;
+var _externalServerUrl = require("../../constants/externalServerUrl");
+const putEmojiHistory = async _ref => {
+  let {
+    accessToken,
+    personId,
+    value
+  } = _ref;
+  const requestInit = {
+    body: JSON.stringify({
+      value
+    }),
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json'
+    },
+    method: 'PUT'
+  };
+  const url = `${_externalServerUrl.ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;
+  const response = await fetch(url, requestInit);
+  if (response.status === 201) {
+    try {
+      const data = await response.json();
+      return {
+        data: data.value,
+        status: 200
+      };
+    } catch (e) {
+      // Do nothing
+    }
+  }
+  return {
+    status: response.status
+  };
+};
+exports.putEmojiHistory = putEmojiHistory;
+//# sourceMappingURL=put.js.map

package/lib/api/item-storage/put.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"put.js","names":["_externalServerUrl","require","putEmojiHistory","_ref","accessToken","personId","value","requestInit","body","JSON","stringify","headers","Authorization","method","url","ITEM_STORAGE_BASE_URL","response","fetch","status","data","json","e","exports"],"sources":["../../../src/api/item-storage/put.ts"],"sourcesContent":["import { ITEM_STORAGE_BASE_URL } from '../../constants/externalServerUrl';\nimport type { HistoryItem } from '../../hooks/emojiHistory';\nimport type { ApiFunctionResult } from '../../types/api';\n\ninterface PutEmojiHistoryOptions {\n    accessToken: string;\n    personId: string;\n    value: HistoryItem[];\n}\n\ninterface PutEmojiHistoryResponseData {\n    key: string;\n    personId: string;\n    schemeId: string;\n    value: HistoryItem[];\n}\n\nexport const putEmojiHistory = async ({\n    accessToken,\n    personId,\n    value,\n}: PutEmojiHistoryOptions): Promise<ApiFunctionResult<HistoryItem[]>> => {\n    const requestInit: RequestInit = {\n        body: JSON.stringify({ value }),\n        headers: {\n            Authorization: `Bearer ${accessToken}`,\n            'Content-Type': 'application/json',\n        },\n        method: 'PUT',\n    };\n\n    const url = `${ITEM_STORAGE_BASE_URL}/7/users/${personId}/keys/emojis`;\n\n    const response = await fetch(url, requestInit);\n\n    if (response.status === 201) {\n        try {\n            const data = (await response.json()) as PutEmojiHistoryResponseData;\n\n            return { data: data.value, status: 200 };\n        } catch (e) {\n            // Do nothing\n        }\n    }\n\n    return { status: response.status };\n};\n"],"mappings":";;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AAiBO,MAAMC,eAAe,GAAG,MAAAC,IAAA,IAI0C;EAAA,IAJnC;IAClCC,WAAW;IACXC,QAAQ;IACRC;EACoB,CAAC,GAAAH,IAAA;EACrB,MAAMI,WAAwB,GAAG;IAC7BC,IAAI,EAAEC,IAAI,CAACC,SAAS,CAAC;MAAEJ;IAAM,CAAC,CAAC;IAC/BK,OAAO,EAAE;MACLC,aAAa,EAAG,UAASR,WAAY,EAAC;MACtC,cAAc,EAAE;IACpB,CAAC;IACDS,MAAM,EAAE;EACZ,CAAC;EAED,MAAMC,GAAG,GAAI,GAAEC,wCAAsB,YAAWV,QAAS,cAAa;EAEtE,MAAMW,QAAQ,GAAG,MAAMC,KAAK,CAACH,GAAG,EAAEP,WAAW,CAAC;EAE9C,IAAIS,QAAQ,CAACE,MAAM,KAAK,GAAG,EAAE;IACzB,IAAI;MACA,MAAMC,IAAI,GAAI,MAAMH,QAAQ,CAACI,IAAI,EAAkC;MAEnE,OAAO;QAAED,IAAI,EAAEA,IAAI,CAACb,KAAK;QAAEY,MAAM,EAAE;MAAI,CAAC;IAC5C,CAAC,CAAC,OAAOG,CAAC,EAAE;MACR;IAAA;EAER;EAEA,OAAO;IAAEH,MAAM,EAAEF,QAAQ,CAACE;EAAO,CAAC;AACtC,CAAC;AAACI,OAAA,CAAApB,eAAA,GAAAA,eAAA"}

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

@@ -0,0 +1,49 @@
+import { ChangeEventHandler, FC, KeyboardEventHandler, 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;
+    /**
+     * 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 a key is pressed down.
+     */
+    onKeyDown?: KeyboardEventHandler<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;
+    /**
+     * 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;
+    /**
+     * 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 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

@@ -0,0 +1,157 @@
+"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 _insert = require("../../utils/insert");
+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 {
+    accessToken,
+    isDisabled,
+    onInput,
+    onKeyDown,
+    onPopupVisibilityChange,
+    personId,
+    placeholder,
+    popupAlignment,
+    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 newInnerText = (0, _emoji.convertEmojisToUnicode)(text);
+    if (newInnerText !== editorRef.current.innerText) {
+      (0, _selection.saveSelection)(editorRef.current);
+      editorRef.current.innerText = newInnerText;
+      (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.innerText);
+    if (typeof onInput === 'function') {
+      onInput(event);
+    }
+  }, [handleUpdateText, onInput]);
+
+  /**
+   * This function prevents formatting from being adopted when texts are inserted. To do this, the
+   * plain text is read from the event after the default behavior has been prevented. The plain
+   * text is then inserted at the correct position in the input field using the
+   * 'insertTextAtCursorPosition' function.
+   */
+  const handlePaste = (0, _react.useCallback)(event => {
+    if (editorRef.current) {
+      event.preventDefault();
+      let text = event.clipboardData.getData('text/plain');
+      text = (0, _emoji.convertEmojisToUnicode)(text);
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text
+      });
+      const newEvent = new Event('input', {
+        bubbles: true
+      });
+      editorRef.current.dispatchEvent(newEvent);
+    }
+  }, []);
+
+  /**
+   * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the
+   * correct position in the editor element.
+   *
+   * 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) {
+      (0, _insert.insertTextAtCursorPosition)({
+        editorElement: editorRef.current,
+        text: 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, {
+    isRightElementGiven: !!rightElement
+  }, /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputEditor, {
+    contentEditable: !isDisabled,
+    onInput: handleInput,
+    onKeyDown: onKeyDown,
+    onPaste: handlePaste,
+    placeholder: placeholder,
+    ref: editorRef
+  }), !isMobile && /*#__PURE__*/_react.default.createElement(_EmojiPickerPopup.default, {
+    accessToken: accessToken,
+    alignment: popupAlignment,
+    onSelect: handlePopupSelect,
+    onPopupVisibilityChange: onPopupVisibilityChange,
+    personId: personId
+  })), rightElement && /*#__PURE__*/_react.default.createElement(_EmojiInput.StyledEmojiInputRightWrapper, null, rightElement));
+};
+EmojiInput.displayName = 'EmojiInput';
+var _default = EmojiInput;
+exports.default = _default;
+//# sourceMappingURL=EmojiInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.js","names":["_react","_interopRequireWildcard","require","_emoji","_environment","_insert","_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","accessToken","isDisabled","onInput","onKeyDown","onPopupVisibilityChange","personId","placeholder","popupAlignment","rightElement","value","isMobile","useState","getIsMobile","editorRef","useRef","handleUpdateText","useCallback","text","current","newInnerText","convertEmojisToUnicode","innerText","saveSelection","restoreSelection","handleInput","event","handlePaste","preventDefault","clipboardData","getData","insertTextAtCursorPosition","editorElement","newEvent","Event","bubbles","dispatchEvent","handlePopupSelect","emoji","handlePreventLoseFocus","_element$parentElemen","element","target","classList","contains","parentElement","stopPropagation","useEffect","document","body","addEventListener","removeEventListener","createElement","StyledEmojiInput","StyledEmojiInputContent","isRightElementGiven","StyledEmojiInputEditor","contentEditable","onPaste","ref","alignment","onSelect","StyledEmojiInputRightWrapper","displayName","_default","exports"],"sources":["../../../src/components/emoji-input/EmojiInput.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    ClipboardEvent,\n    FC,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport type { PopupAlignment } from '../../constants/alignment';\nimport { convertEmojisToUnicode } from '../../utils/emoji';\nimport { getIsMobile } from '../../utils/environment';\nimport { insertTextAtCursorPosition } from '../../utils/insert';\nimport { restoreSelection, saveSelection } from '../../utils/selection';\nimport EmojiPickerPopup from '../emoji-picker-popup/EmojiPickerPopup';\nimport {\n    StyledEmojiInput,\n    StyledEmojiInputContent,\n    StyledEmojiInputEditor,\n    StyledEmojiInputRightWrapper,\n} from './EmojiInput.styles';\n\nexport type EmojiInputProps = {\n    /**\n     * Access token of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    accessToken?: string;\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 a key is pressed down.\n     */\n    onKeyDown?: KeyboardEventHandler<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     * Person id of the logged-in user. Is needed to load and save the history of the emojis.\n     */\n    personId?: string;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Sets the alignment of the popup to a fixed value. If this value is not set, the component\n     * calculates the best position on its own. Use the imported 'PopupAlignment' enum to set this\n     * value.\n     */\n    popupAlignment?: PopupAlignment;\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    accessToken,\n    isDisabled,\n    onInput,\n    onKeyDown,\n    onPopupVisibilityChange,\n    personId,\n    placeholder,\n    popupAlignment,\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 newInnerText = convertEmojisToUnicode(text);\n\n        if (newInnerText !== editorRef.current.innerText) {\n            saveSelection(editorRef.current);\n\n            editorRef.current.innerText = newInnerText;\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.innerText);\n\n            if (typeof onInput === 'function') {\n                onInput(event);\n            }\n        },\n        [handleUpdateText, onInput]\n    );\n\n    /**\n     * This function prevents formatting from being adopted when texts are inserted. To do this, the\n     * plain text is read from the event after the default behavior has been prevented. The plain\n     * text is then inserted at the correct position in the input field using the\n     * 'insertTextAtCursorPosition' function.\n     */\n    const handlePaste = useCallback((event: ClipboardEvent<HTMLDivElement>) => {\n        if (editorRef.current) {\n            event.preventDefault();\n\n            let text = event.clipboardData.getData('text/plain');\n\n            text = convertEmojisToUnicode(text);\n\n            insertTextAtCursorPosition({ editorElement: editorRef.current, text });\n\n            const newEvent = new Event('input', { bubbles: true });\n\n            editorRef.current.dispatchEvent(newEvent);\n        }\n    }, []);\n\n    /**\n     * This function uses the 'insertTextAtCursorPosition' function to insert the emoji at the\n     * correct position in the editor element.\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            insertTextAtCursorPosition({ editorElement: editorRef.current, text: emoji });\n\n            const event = new Event('input', { bubbles: true });\n\n            editorRef.current.dispatchEvent(event);\n        }\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 isRightElementGiven={!!rightElement}>\n                <StyledEmojiInputEditor\n                    contentEditable={!isDisabled}\n                    onInput={handleInput}\n                    onKeyDown={onKeyDown}\n                    onPaste={handlePaste}\n                    placeholder={placeholder}\n                    ref={editorRef}\n                />\n                {!isMobile && (\n                    <EmojiPickerPopup\n                        accessToken={accessToken}\n                        alignment={popupAlignment}\n                        onSelect={handlePopupSelect}\n                        onPopupVisibilityChange={onPopupVisibilityChange}\n                        personId={personId}\n                    />\n                )}\n            </StyledEmojiInputContent>\n            {rightElement && (\n                <StyledEmojiInputRightWrapper>{rightElement}</StyledEmojiInputRightWrapper>\n            )}\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

@@ -0,0 +1,13 @@
+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>;
+type StyledEmojiInputContentProps = {
+    isRightElementGiven: boolean;
+};
+export declare const StyledEmojiInputContent: import("styled-components").StyledComponent<"div", any, StyledEmojiInputContentProps, 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>;
+export declare const StyledEmojiInputRightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

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

@@ -0,0 +1,145 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledEmojiInputRightWrapper = exports.StyledEmojiInputEditor = exports.StyledEmojiInputContent = exports.StyledEmojiInput = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _font = require("../../utils/font");
+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-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`
+    align-items: end;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    border-radius: 3px;
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    padding: 8px 10px;
+
+    ${_ref4 => {
+  let {
+    isRightElementGiven
+  } = _ref4;
+  return isRightElementGiven && (0, _styledComponents.css)`
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-right-width: 0;
+        `;
+}}
+`;
+exports.StyledEmojiInputContent = StyledEmojiInputContent;
+const StyledEmojiInputEditor = _styledComponents.default.div`
+    color: ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme.text;
+}};
+    flex: 1 1 auto;
+    font-family: ${_font.getFontFamily};
+    max-height: 210px;
+    overflow-y: scroll;
+    word-break: break-word;
+
+    // This fixes a bug where the field is not editable in certain browsers.
+    // This is for example the case on iOS 15 or older.
+    -webkit-user-modify: read-write;
+    -webkit-user-select: text;
+
+    &:empty:not(:focus):before {
+        content: '${_ref6 => {
+  let {
+    placeholder
+  } = _ref6;
+  return placeholder;
+}}';
+        color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme['006'];
+}};
+        pointer-events: none;
+    }
+
+    // Styles for custom scrollbar
+    ::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-button {
+        background-color: transparent;
+        height: 5px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(
+            ${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['text-rgb'];
+}},
+            0.15
+        );
+        border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+        scrollbar-color: rgba(
+                ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['text-rgb'];
+}},
+                0.15
+            )
+            transparent;
+        scrollbar-width: thin;
+    }
+`;
+exports.StyledEmojiInputEditor = StyledEmojiInputEditor;
+const StyledEmojiInputRightWrapper = _styledComponents.default.div`
+    align-self: stretch;
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    flex: 0 0 auto;
+    overflow: hidden;
+`;
+exports.StyledEmojiInputRightWrapper = StyledEmojiInputRightWrapper;
+//# sourceMappingURL=EmojiInput.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiInput.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_font","_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","_ref4","isRightElementGiven","css","StyledEmojiInputEditor","_ref5","text","getFontFamily","_ref6","placeholder","_ref7","_ref8","_ref9","StyledEmojiInputRightWrapper"],"sources":["../../../src/components/emoji-input/EmojiInput.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport styled, { css } from 'styled-components';\nimport { getFontFamily } from '../../utils/font';\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-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\ntype StyledEmojiInputContentProps = {\n    isRightElementGiven: boolean;\n};\n\nexport const StyledEmojiInputContent = styled.div<StyledEmojiInputContentProps>`\n    align-items: end;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    display: flex;\n    flex: 1 1 auto;\n    gap: 10px;\n    padding: 8px 10px;\n\n    ${({ isRightElementGiven }) =>\n        isRightElementGiven &&\n        css`\n            border-top-right-radius: 0;\n            border-bottom-right-radius: 0;\n            border-right-width: 0;\n        `}\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    font-family: ${getFontFamily};\n    max-height: 210px;\n    overflow-y: scroll;\n    word-break: break-word;\n\n    // This fixes a bug where the field is not editable in certain browsers.\n    // This is for example the case on iOS 15 or older.\n    -webkit-user-modify: read-write;\n    -webkit-user-select: text;\n\n    &:empty:not(:focus):before {\n        content: '${({ placeholder }) => placeholder}';\n        color: ${({ theme }: StyledEmojiInputEditorProps) => theme['006']};\n        pointer-events: none;\n    }\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledEmojiInputEditorProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n\nexport const StyledEmojiInputRightWrapper = styled.div`\n    align-self: stretch;\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    flex: 0 0 auto;\n    overflow: hidden;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,KAAA,GAAAD,OAAA;AAAiD,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAK1C,MAAMW,gBAAgB,GAAGC,yBAAM,CAACC,GAA2B;AAClE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA6B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3E;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D,sBAAsBC,KAAA;EAAA,IAAC;IAAED;EAAW,CAAC,GAAAC,KAAA;EAAA,OAAMD,UAAU,GAAG,MAAM,GAAG,SAAS;AAAA,CAAE;AAC5E;AACA;AACA,CAAC;AAACE,OAAA,CAAAR,gBAAA,GAAAA,gBAAA;AAMK,MAAMS,uBAAuB,GAAGR,yBAAM,CAACC,GAAkC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OACtBC,mBAAmB,IACnB,IAAAC,qBAAG,CAAC;AACZ;AACA;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAACJ,OAAA,CAAAC,uBAAA,GAAAA,uBAAA;AAIK,MAAMI,sBAAsB,GAAGZ,yBAAM,CAACC,GAAiC;AAC9E,aAAaY,KAAA;EAAA,IAAC;IAAEV;EAAmC,CAAC,GAAAU,KAAA;EAAA,OAAKV,KAAK,CAACW,IAAI;AAAA,CAAC;AACpE;AACA,mBAAmBC,mBAAc;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoBC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAKC,WAAW;AAAA,CAAC;AACrD,iBAAiBC,KAAA;EAAA,IAAC;IAAEf;EAAmC,CAAC,GAAAe,KAAA;EAAA,OAAKf,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcgB,KAAA;EAAA,IAAC;IAAEhB;EAAmC,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBiB,KAAA;EAAA,IAAC;IAAEjB;EAAmC,CAAC,GAAAiB,KAAA;EAAA,OAAKjB,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACI,OAAA,CAAAK,sBAAA,GAAAA,sBAAA;AAEK,MAAMS,4BAA4B,GAAGrB,yBAAM,CAACC,GAAI;AACvD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAc,4BAAA,GAAAA,4BAAA"}

package/lib/components/emoji-picker/EmojiPicker.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+export type EmojiPickerProps = {
+    /**
+     * Access token of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    accessToken?: string;
+    /**
+     * Function executed when an emoji is selected in the popup
+     * @param {string} emoji - Emoji that was selected
+     */
+    onSelect: (emoji: string) => void;
+    /**
+     * Person id of the logged-in user. Is needed to load and save the history of the emojis.
+     */
+    personId?: string;
+};
+declare const EmojiPicker: FC<EmojiPickerProps>;
+export default EmojiPicker;