agora-ui-foundation 1.0.0

package/lib/components/tabs/index.js

@@ -0,0 +1,128 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrTabs = exports.FcrFashionTabs = void 0;
+require("core-js/modules/es.array.map.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = require("react");
+require("./index.css");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrTabs = exports.FcrTabs = function FcrTabs(_ref) {
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    activeKey = _ref.activeKey,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    variant = _ref.variant;
+  var _useState = (0, _react.useState)({}),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    indicatorStyle = _useState2[0],
+    setIndicatorStyle = _useState2[1];
+  var selectorRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _selectorRef$current;
+    var el = (_selectorRef$current = selectorRef.current) === null || _selectorRef$current === void 0 ? void 0 : _selectorRef$current.querySelector(".fcr-tabs__nav-item-".concat(activeKey));
+    if (el) {
+      var _ref2 = el,
+        offsetLeft = _ref2.offsetLeft;
+      setIndicatorStyle({
+        left: offsetLeft,
+        width: el.clientWidth
+      });
+    }
+  }, [activeKey]);
+  var cls = (0, _classnames["default"])('fcr-tabs', {
+    'fcr-simple-tabs': variant === 'simple'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-tabs__nav-list",
+      ref: selectorRef,
+      children: [items.map(function (_ref3) {
+        var label = _ref3.label,
+          key = _ref3.key;
+        var cls = (0, _classnames["default"])("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
+          'fcr-tabs__nav-item--active': key === activeKey
+        });
+        var handleClick = function handleClick() {
+          onChange(key);
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cls,
+          onClick: handleClick,
+          children: label
+        }, key);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-tabs__nav-indicator",
+        style: indicatorStyle
+      })]
+    })
+  });
+};
+var FcrFashionTabs = exports.FcrFashionTabs = function FcrFashionTabs(_ref4) {
+  var _ref4$items = _ref4.items,
+    items = _ref4$items === void 0 ? [] : _ref4$items,
+    activeKey = _ref4.activeKey,
+    _ref4$onChange = _ref4.onChange,
+    onChange = _ref4$onChange === void 0 ? function () {} : _ref4$onChange;
+  var rootRef = (0, _react.useRef)(null);
+  var _useState3 = (0, _react.useState)({}),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    indicatorStyle = _useState4[0],
+    setIndicatorStyle = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (!rootRef.current) {
+      return;
+    }
+    var el = rootRef.current.querySelector(".fcr-tabs__nav-item-".concat(activeKey));
+    if (el) {
+      var _ref5 = el,
+        offsetLeft = _ref5.offsetLeft;
+      setIndicatorStyle({
+        left: offsetLeft + el.clientWidth - 40,
+        width: 40,
+        top: -7
+      });
+    }
+  }, [activeKey, items]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: "fcr-tabs fcr-fashion-tabs",
+    ref: rootRef,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "fcr-tabs__nav-list",
+      children: [items.map(function (_ref6) {
+        var label = _ref6.label,
+          key = _ref6.key;
+        var cls = (0, _classnames["default"])("fcr-tabs__nav-item fcr-tabs__nav-item-".concat(key), {
+          'fcr-tabs__nav-item--active': key === activeKey
+        });
+        var handleClick = function handleClick() {
+          onChange(key);
+        };
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: cls,
+          onClick: handleClick,
+          children: label
+        }, key);
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "fcr-fashion-tabs__nav-indicator",
+        style: indicatorStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_UNDERLINE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext2)'
+          },
+          size: 40
+        })
+      })]
+    })
+  });
+};

package/lib/components/tabs/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { FcrTabs, TabsProps } from '.';
+import { Meta } from '@storybook/react';
+declare const meta: Meta<typeof FcrTabs>;
+export declare const Docs: (props: TabsProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/tabs/index.stories.js

@@ -0,0 +1,103 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/Tabs',
+  component: _.FcrTabs,
+  args: {
+    items: [{
+      label: 'Chat',
+      key: 'chat'
+    }, {
+      label: 'Member(20)',
+      key: 'member'
+    }]
+  }
+};
+var Docs = exports.Docs = function Docs(props) {
+  var _useState = (0, _react.useState)('chat'),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    activeKey = _useState2[0],
+    setActiveKey = _useState2[1];
+  var handleChange = function handleChange(key) {
+    setActiveKey(key);
+  };
+  var _useState3 = (0, _react.useState)('setting'),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    activeKey1 = _useState4[0],
+    setActiveKey1 = _useState4[1];
+  var handleChange1 = function handleChange1(key) {
+    setActiveKey1(key);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 400,
+        marginBottom: 50
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrTabs, _objectSpread(_objectSpread({}, props), {}, {
+        activeKey: activeKey,
+        onChange: handleChange
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 400,
+        marginBottom: 50
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrTabs, _objectSpread(_objectSpread({}, props), {}, {
+        activeKey: activeKey,
+        onChange: handleChange,
+        variant: "simple"
+      }))
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 600,
+        marginBottom: 50
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrFashionTabs, {
+        items: [{
+          label: 'Basic Setting',
+          key: 'setting'
+        }, {
+          label: 'Background',
+          key: 'background'
+        }, {
+          label: 'Beauty Filter',
+          key: 'filter'
+        }],
+        activeKey: activeKey1,
+        onChange: handleChange1
+      })
+    })]
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/text-bubble/index.css

@@ -0,0 +1,88 @@
+.fcr-text-bubble {
+  display: flex;
+  justify-content: center;
+
+  text-align: center;
+  vertical-align: middle;
+  display: flex;
+  align-self: center;
+
+  border-radius: 50px;
+
+  font-family: 'Helvetica Neue';
+  cursor: default;
+}
+
+.fcr-text-bubble--gray {
+  color: var(--fcr_ui_scene_icontext1);
+  background: var(--fcr_chat_bg);
+}
+
+.fcr-text-bubble--gray-2 {
+  color: var(--fcr_ui_scene_icontext1);
+  background: var(--fcr_ui_scene_input);
+  border-radius: 10px;
+  border: 1px solid var(--fcr_ui_scene_line1);
+}
+
+.fcr-text-bubble--white {
+  color: var(--fcr_ui_scene_icontext1);
+  background: var(--fcr_mobile_ui_scene_color_popup_block1);
+}
+
+.fcr-text-bubble--white:hover {
+  color: var(--fcr_web_ui_scene_mainicon2);
+  background: var(--fcr_web_ui_scene_hover);
+}
+
+.fcr-text-bubble--white:hover path {
+  fill: var(--fcr_web_ui_scene_mainicon2);
+}
+
+.fcr-text-bubble--purple {
+  color: var(--fcr_ui_scene_icontext1);
+  background: var(--fcr_ui_scene_ramp_purple3);
+  border: 0.5px solid var(--fcr_ui_scene_ramp_purple5);
+}
+
+.fcr-text-bubble--large {
+  font-size: 14px;
+  padding: 10px 20px;
+}
+
+.fcr-text-bubble--medium {
+  font-size: 12px;
+  padding: 7px 16px;
+}
+
+.fcr-text-bubble--small {
+  font-size: 10px;
+  padding: 5px 12px;
+}
+
+.fcr-text-bubble--weight-bold {
+  font-weight: 700;
+}
+
+.fcr-text-bubble--weight-normal {
+  font-weight: 300;
+}
+
+.fcr-text-bubble--line-height-large {
+  line-height: 16px;
+}
+
+.fcr-text-bubble--line-height-medium {
+  line-height: 14px;
+}
+
+.fcr-text-bubble--line-height-small {
+  line-height: 12px;
+}
+
+.fcr-text-bubble--transparent {
+  color: var(--fcr_ui_scene_black4);
+  padding: 0;
+  background: transparent;
+  font-family: Helvetica;
+}

package/lib/components/text-bubble/index.d.ts

@@ -0,0 +1,13 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import './index.css';
+export interface TextBubbleProps {
+    styles?: CSSProperties;
+    type?: 'gray' | 'gray_2' | 'white' | 'transparent' | 'purple';
+    size?: 'small' | 'medium' | 'large';
+    txt?: string | ReactNode;
+    bold?: boolean;
+    lineHeight?: 'small' | 'medium' | 'large';
+    marginBottom?: number;
+    classnames?: string;
+}
+export declare const TextBubble: React.FC<React.PropsWithChildren<TextBubbleProps>>;

package/lib/components/text-bubble/index.js

@@ -0,0 +1,61 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextBubble = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.string.bold.js");
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var TextBubble = exports.TextBubble = function TextBubble(_ref) {
+  var styles = _ref.styles,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'gray' : _ref$type,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    _ref$txt = _ref.txt,
+    txt = _ref$txt === void 0 ? 'Hello, World!' : _ref$txt,
+    _ref$bold = _ref.bold,
+    bold = _ref$bold === void 0 ? false : _ref$bold,
+    _ref$lineHeight = _ref.lineHeight,
+    lineHeight = _ref$lineHeight === void 0 ? 'medium' : _ref$lineHeight,
+    _ref$marginBottom = _ref.marginBottom,
+    marginBottom = _ref$marginBottom === void 0 ? 0 : _ref$marginBottom,
+    classnames = _ref.classnames;
+  var cls = (0, _classnames["default"])('fcr-text-bubble', classnames, (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({
+    'fcr-text-bubble--gray': type === 'gray',
+    'fcr-text-bubble--gray-2': type === 'gray_2',
+    'fcr-text-bubble--white': type === 'white',
+    'fcr-text-bubble--purple': type === 'purple',
+    'fcr-text-bubble--transparent': type === 'transparent',
+    'fcr-text-bubble--small': size === 'small',
+    'fcr-text-bubble--medium': size === 'medium',
+    'fcr-text-bubble--large': size === 'large'
+  }, bold ? 'fcr-text-bubble--weight-bold' : 'fcr-text-bubble--weight-normal', true), 'fcr-text-bubble--line-height-small', lineHeight === 'small'), 'fcr-text-bubble--line-height-medium', lineHeight === 'medium'), 'fcr-text-bubble--line-height-large', lineHeight === 'large'));
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: _objectSpread(_objectSpread({}, styles), marginBottom ? {
+      marginBottom: marginBottom
+    } : {}),
+    children: typeof txt === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: txt
+    }) : txt
+  });
+};

package/lib/components/text-bubble/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { TextBubble, TextBubbleProps } from '.';
+declare const meta: Meta<typeof TextBubble>;
+export declare const Doc: (props: TextBubbleProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/text-bubble/index.stories.js

@@ -0,0 +1,109 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Doc = void 0;
+require("core-js/modules/web.timers.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _ = require(".");
+var _type = require("../icon/type");
+var _iconText = require("../icon-text");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/TextBubble',
+  tags: ['autodocs'],
+  component: _.TextBubble,
+  args: {
+    styles: {
+      display: 'flex'
+    }
+  },
+  argTypes: {}
+};
+var Doc = exports.Doc = function Doc(props) {
+  var styles = props.styles;
+  var _useState = (0, _react.useState)(true),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    basicVisible = _useState2[0],
+    setBasicVisible = _useState2[1];
+  var handleChange = function handleChange(val) {
+    if (!val) {
+      setBasicVisible(false);
+    }
+  };
+  (0, _react.useEffect)(function () {
+    if (!basicVisible) {
+      var timerId = setTimeout(function () {
+        setBasicVisible(true);
+        clearTimeout(timerId);
+      }, 2 * 1000);
+    }
+  }, [basicVisible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    style: {
+      display: 'flex',
+      flexDirection: 'column',
+      padding: 50,
+      border: 'solid 0.5px #e5e7eb'
+    },
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        style: {
+          marginBottom: 10
+        },
+        children: "Basic: none bg"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
+        txt: "12:30 AM",
+        type: "transparent",
+        bold: true,
+        lineHeight: "small"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Basic: bg-gray", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
+        txt: "\u4E3B\u6301\u4EBA(\u6211) \u5F00\u542F\u4E86\u804A\u5929\u5BA4\u7981\u8A00",
+        type: "gray",
+        lineHeight: "large",
+        marginBottom: 15
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 300,
+        marginBottom: 50,
+        display: 'flex',
+        flexDirection: 'column'
+      },
+      children: ["Icon Text & bg-gray_2:", /*#__PURE__*/(0, _jsxRuntime.jsx)(_.TextBubble, {
+        styles: {
+          minWidth: 312,
+          maxHeight: 37
+        },
+        txt: /*#__PURE__*/(0, _jsxRuntime.jsx)(_iconText.IconText, {
+          icon: _type.FcrIconType.FCR_SETTING_NONE,
+          colors: {
+            iconPrimary: 'var(--fcr_ui_scene_icontext1)'
+          },
+          txt: "\u5168\u4F53\u7981\u8A00"
+        }),
+        type: "gray_2",
+        lineHeight: "large"
+      })]
+    })]
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/textarea/helper.d.ts

@@ -0,0 +1,2 @@
+export declare function setCaretIndex(win: Window, contentEditable: Node, newCaretIndex: number): void;
+export declare function getCaretIndex(win: Window, contentEditable: Node): number;

package/lib/components/textarea/helper.js

@@ -0,0 +1,63 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getCaretIndex = getCaretIndex;
+exports.setCaretIndex = setCaretIndex;
+require("core-js/modules/es.array.concat.js");
+require("core-js/modules/es.array.push.js");
+function textNodesUnder(node) {
+  // https://stackoverflow.com/a/10730777/3245937
+  var all = [];
+  for (node = (_node = node) === null || _node === void 0 ? void 0 : _node.firstChild; node; node = node.nextSibling) {
+    var _node;
+    if (node.nodeType == 3) {
+      all.push(node);
+    } else {
+      all = all.concat(textNodesUnder(node));
+    }
+  }
+  return all;
+}
+function setCaretIndex(win, contentEditable, newCaretIndex) {
+  var cumulativeIndex = 0;
+  var relativeIndex = 0;
+  var targetNode = null;
+  var textNodes = textNodesUnder(contentEditable);
+  for (var i = 0; i < textNodes.length; i++) {
+    var _node$textContent, _node$textContent2;
+    var node = textNodes[i];
+    if (newCaretIndex <= cumulativeIndex + (((_node$textContent = node.textContent) === null || _node$textContent === void 0 ? void 0 : _node$textContent.length) || 0)) {
+      targetNode = node;
+      relativeIndex = newCaretIndex - cumulativeIndex;
+      break;
+    }
+    cumulativeIndex += ((_node$textContent2 = node.textContent) === null || _node$textContent2 === void 0 ? void 0 : _node$textContent2.length) || 0;
+  }
+  var range = win.document.createRange();
+  range.setStart(targetNode, relativeIndex);
+  range.setEnd(targetNode, relativeIndex);
+  range.collapse();
+  var sel = win.getSelection();
+  sel === null || sel === void 0 || sel.removeAllRanges();
+  sel === null || sel === void 0 || sel.addRange(range);
+}
+function getCaretIndex(win, contentEditable) {
+  var index = 0;
+  var selection = win.getSelection();
+  var textNodes = textNodesUnder(contentEditable);
+  for (var i = 0; i < textNodes.length; i++) {
+    var node = textNodes[i];
+    var isSelectedNode = node === (selection === null || selection === void 0 ? void 0 : selection.focusNode);
+    if (isSelectedNode) {
+      index += selection.focusOffset;
+      break;
+    } else {
+      var _node$textContent3;
+      index += ((_node$textContent3 = node.textContent) === null || _node$textContent3 === void 0 ? void 0 : _node$textContent3.length) || 0;
+    }
+  }
+  return index;
+}