@desynova-digital/components 9.2.3 → 9.2.5

package/_helpers/utils.js

@@ -126,10 +126,10 @@ var cleanHtml = exports.cleanHtml = function cleanHtml(htmlStr) {
   .replace(/\s\s+/g, "").replace(/\t/g, "").replace(/\\"/g, '"').replace(/\n/g, " ");
 };
 
-/**
- *
- * @param {*} htmlStr
- * @returns
+/**
+ *
+ * @param {*} htmlStr
+ * @returns
  */
 var htmlToText = exports.htmlToText = function htmlToText(htmlStr) {
   var res = htmlStr === null || htmlStr === void 0 ? void 0 : htmlStr.replace(/<\/?[^>]+>/gi, "");

package/atoms/cardV2/cardV2.js

@@ -59,11 +59,11 @@ var CardV2 = function CardV2(props) {
     return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, type === 'timeline' && /*#__PURE__*/_react["default"].createElement(_timeline["default"], props), isCardv2 ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnailV["default"], props), /*#__PURE__*/_react["default"].createElement(_contentV["default"], props)) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_thumbnail["default"], props), /*#__PURE__*/_react["default"].createElement(_content["default"], props)));
   }, [props]);
 
-  /**
-   * based on width will render the card
-   * if width === sm then flex based card
-   * else normal
-   * @function
+  /**
+   * based on width will render the card
+   * if width === sm then flex based card
+   * else normal
+   * @function
    */
   var renderBasedOnWidth = (0, _react.useCallback)(function () {
     if (width === 'sm') {

package/atoms/cardV2/content.js

@@ -71,9 +71,9 @@ var Content = function Content(props) {
     tooltipVisibleSection = _useState2[0],
     setTooltipVisibleSection = _useState2[1];
 
-  /**
-   * toogle tooltip -> true / false
-   * @function
+  /**
+   * toogle tooltip -> true / false
+   * @function
    */
   var handleTooltip = (0, _react.useCallback)(function (tooltipSection, tooltipText) {
     return function () {
@@ -83,9 +83,9 @@ var Content = function Content(props) {
     };
   }, []);
 
-  /**
-   * returns filtered list removing undefined from input array
-   * @function
+  /**
+   * returns filtered list removing undefined from input array
+   * @function
    */
   var getTooltipData = function getTooltipData() {
     for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {

package/atoms/cardV2/contentV2.js

@@ -16,6 +16,7 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _cardV = require("./cardV2");
 var _icon = _interopRequireDefault(require("../../atoms/icon"));
 var _tokens = require("@desynova-digital/tokens");
+var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 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; }
@@ -32,7 +33,7 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
   return isTitleClick ? 'pointer' : 'default';
 });
 var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: column;\n  &.no-meta-row {\n    margin-top: 6px;\n  }\n"])));
-var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border-radius: 0 0 8px 8px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  &.no-meta-row {\n    height: ", ";\n  }\n\n  &.no-meta-row .footer-row {\n    margin-top: 10px;\n  }\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: ' ';\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: ", ";\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container {\n      position: absolute;\n      bottom: 100%;\n      margin-right: 110px;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom: 10px;\n\n      .overlappig-popup {\n        font-family: SFUIText-Regular;\n        background: #182738;\n        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n        border-radius: 2px;\n        padding: 12px;\n        width: 300px;\n        z-index: 10;\n\n        .popup-pointer {\n          content: '';\n          position: absolute;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom: 5px solid ", ";\n\n          bottom: 5px;\n          left: 66%;\n          -webkit-transform: rotate(180deg);\n          -ms-transform: translate(180deg);\n          transform: translate(180deg);\n        }\n\n        .overlapping-episod-list-container {\n          max-height: 165px;\n          overflow: scroll;\n          ::-webkit-scrollbar {\n            display: none;\n          }\n          -ms-overflow-style: none; /* IE and Edge */\n          scrollbar-width: none;\n        }\n\n        .divider {\n          height: 1px;\n          width: 100%;\n          margin: 10px 0;\n          background: #303f51;\n        }\n        .header-container {\n          display: flex;\n          position: relative;\n          .thumbnail {\n            width: 100px;\n            height: 55px;\n            background-size: cover !important;\n            background-repeat: no-repeat !important;\n            margin-right: 10px;\n            border-radius: 2px;\n          }\n          .episod-title {\n            font-size: 12px;\n            margin-bottom: 8px;\n            max-width: 180px;\n            line-height: 14px;\n            color: #fff;\n          }\n          .episod-details {\n            font-size: 10px;\n            color: #afb2ba;\n          }\n        }\n\n        .overlappig-popup-title {\n          font-size: 12px;\n          line-height: 12px;\n          color: #afb2ba;\n          margin-bottom: 15px;\n        }\n      }\n    }\n\n    :hover {\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px;\n    }\n  }\n  .meta-row {\n    display: flex;\n    align-items: center;\n    margin-top: 6px;\n    column-gap: 10px;\n  }\n  .category-count {\n    margin-top: 6px;\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    line-height: 12px;\n  }\n  .meta-badge {\n    ", "\n    font-size: 8px;\n    line-height: 12px;\n    padding: 1px 3px;\n    border-radius: 4px;\n    font-family: SFUIText-Regular;\n    min-height: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .meta-text {\n    color: ", ";\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 300;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .footer-row {\n    display: flex;\n    align-items: center;\n    margin-top: 16px;\n    column-gap: 12px;\n    position: relative;\n  }\n  .meta-row + .footer-row {\n    margin-top: 10px;\n  }\n  .footer-text {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 10px;\n    margin-right: 0;\n  }\n  .footer-icons {\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .footer-icon {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 12px;\n    display: inline-flex;\n    align-items: center;\n  }\n  .footer-text-language {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 10px;\n    margin-right: 0;\n    text-transform: capitalize;\n  }\n"])), function (_ref2) {
+var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border-radius: 0 0 8px 8px;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n\n  &.no-meta-row {\n    height: ", ";\n  }\n\n  &.no-meta-row .footer-row {\n    margin-top: 10px;\n  }\n\n  .title-parent {\n    position: relative;\n  }\n\n  .segment-indicator {\n    position: relative;\n    color: #fff;\n    padding-left: 10px;\n    &:before {\n      display: inline-block;\n      content: ' ';\n      width: 6px;\n      height: 6px;\n      position: absolute;\n      top: 2px;\n      left: 0px;\n      background: ", ";\n      border-radius: 50%;\n    }\n  }\n  .overlapping-container {\n    justify-content: center;\n    align-items: center;\n    height: 11px;\n    position: relative;\n    .overlappig-popup-container {\n      position: absolute;\n      bottom: 100%;\n      margin-right: 110px;\n      pointer-events: none;\n      opacity: 0;\n      transition: opacity 0.3s ease-out;\n      padding-bottom: 10px;\n\n      .overlappig-popup {\n        font-family: SFUIText-Regular;\n        background: #182738;\n        box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n        border-radius: 2px;\n        padding: 12px;\n        width: 300px;\n        z-index: 10;\n\n        .popup-pointer {\n          content: '';\n          position: absolute;\n          width: 0;\n          height: 0;\n          border-left: 5px solid transparent;\n          border-right: 5px solid transparent;\n          border-bottom: 5px solid ", ";\n\n          bottom: 5px;\n          left: 66%;\n          -webkit-transform: rotate(180deg);\n          -ms-transform: translate(180deg);\n          transform: translate(180deg);\n        }\n\n        .overlapping-episod-list-container {\n          max-height: 165px;\n          overflow: scroll;\n          ::-webkit-scrollbar {\n            display: none;\n          }\n          -ms-overflow-style: none; /* IE and Edge */\n          scrollbar-width: none;\n        }\n\n        .divider {\n          height: 1px;\n          width: 100%;\n          margin: 10px 0;\n          background: #303f51;\n        }\n        .header-container {\n          display: flex;\n          position: relative;\n          .thumbnail {\n            width: 100px;\n            height: 55px;\n            background-size: cover !important;\n            background-repeat: no-repeat !important;\n            margin-right: 10px;\n            border-radius: 2px;\n          }\n          .episod-title {\n            font-size: 12px;\n            margin-bottom: 8px;\n            max-width: 180px;\n            line-height: 14px;\n            color: #fff;\n          }\n          .episod-details {\n            font-size: 10px;\n            color: #afb2ba;\n          }\n        }\n\n        .overlappig-popup-title {\n          font-size: 12px;\n          line-height: 12px;\n          color: #afb2ba;\n          margin-bottom: 15px;\n        }\n      }\n    }\n\n    :hover {\n      .overlappig-popup-container {\n        opacity: 1;\n        pointer-events: all;\n      }\n    }\n    p {\n      font-size: 12px;\n      margin-left: 5px;\n      height: 12px;\n    }\n  }\n  .meta-row {\n    display: flex;\n    align-items: center;\n    margin-top: 6px;\n    cursor: default;\n    column-gap: 10px\n  }\n  .category-count {\n    margin-top: 6px;\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    line-height: 12px;\n  }\n  .meta-badge {\n    ", "\n    font-size: 8px;\n    line-height: 12px;\n    padding: 1px 3px;\n    border-radius: 4px;\n    font-family: SFUIText-Regular;\n    min-height: 12px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n  .meta-text {\n    color: ", ";\n    font-family: SFUIText-Regular;\n    font-size: 10px;\n    font-style: normal;\n    font-weight: 300;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n  .footer-row {\n    display: flex;\n    align-items: center;\n    margin-top: 16px;\n    column-gap: 12px;\n    position: relative;\n    cursor: default;\n  }\n  .meta-row + .footer-row {\n    margin-top: 10px;\n  }\n  .footer-text {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 10px;\n    margin-right: 0;\n  }\n  .footer-icons {\n    margin-left: auto;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n  }\n  .footer-icon {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 12px;\n    display: inline-flex;\n    align-items: center;\n  }\n  .footer-text-language {\n    color: #afb2ba;\n    font-family: SFUIText-Regular;\n    font-size: 8px;\n    line-height: 10px;\n    margin-right: 0;\n    text-transform: capitalize;\n  }\n"])), function (_ref2) {
   var type = _ref2.type,
     width = _ref2.width;
   return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
@@ -79,13 +80,9 @@ var ContentV2 = function ContentV2(props) {
     identifier_label = props.identifier_label,
     language_label = props.language_label,
     isSegment = props.isSegment,
-    type = props.type,
-    width = props.width,
     titleClick = props.titleClick,
     show_page_id = props.show_page_id,
     overlapping = props.overlapping,
-    theme = props.theme,
-    upload_type = props.upload_type,
     icon_status = props.icon_status,
     asset_type = props.asset_type,
     h1 = props.h1;
@@ -102,6 +99,10 @@ var ContentV2 = function ContentV2(props) {
       width: 12,
       height: 10
     },
+    subtitle: {
+      width: 12,
+      height: 10
+    },
     archive: {
       width: 10,
       height: 10
@@ -122,25 +123,31 @@ var ContentV2 = function ContentV2(props) {
     delivery: 'Delivery',
     dubbing_review: 'Dubbing Review',
     subtitle_assign: 'Subtitle',
-    file_ingest: 'Ingest'
+    file_ingest: 'Ingest',
+    subtitle: 'Subtitle'
   };
   var getIconLabel = function getIconLabel(iconName) {
     return ICON_LABEL_MAP[iconName] || (iconName === null || iconName === void 0 ? void 0 : iconName.replace(/_/g, ' ')) || '';
   };
-  var STATUS_COLOR_MAP = {
-    Success: '#18B96E',
-    Pending: '#666666',
-    Failed: '#FF6C56',
-    'In Progress': '#FF8D29',
-    'In Queue': '#F9E900'
+  var normalizeStatusCode = function normalizeStatusCode(status) {
+    return String(status || '').trim().toLowerCase().split(' ').join('_');
+  };
+  var getStatusHexColor = function getStatusHexColor(status) {
+    var _matched$hex;
+    var normalized = normalizeStatusCode(status);
+    var matched = _statusV["default"].find(function (group) {
+      return group.code.includes(normalized);
+    });
+    if (!matched) return undefined;
+    return (_matched$hex = matched.hex) === null || _matched$hex === void 0 ? void 0 : _matched$hex.background;
   };
   var footerIcons = (icon_status || []).map(function (item) {
-    var _STATUS_COLOR_MAP$ite, _ICON_DIMENSION_MAP$i;
+    var _getStatusHexColor, _ICON_DIMENSION_MAP$i;
     return _objectSpread({
       name: item.icon,
       status: item.status,
       tooltipLabel: "".concat(getIconLabel(item.icon)).concat(item.status ? " : ".concat(item.status) : ''),
-      color: (_STATUS_COLOR_MAP$ite = STATUS_COLOR_MAP[item.status]) !== null && _STATUS_COLOR_MAP$ite !== void 0 ? _STATUS_COLOR_MAP$ite : '#AFB2BA'
+      color: (_getStatusHexColor = getStatusHexColor(item.status)) !== null && _getStatusHexColor !== void 0 ? _getStatusHexColor : '#AFB2BA'
     }, (_ICON_DIMENSION_MAP$i = ICON_DIMENSION_MAP[item.icon]) !== null && _ICON_DIMENSION_MAP$i !== void 0 ? _ICON_DIMENSION_MAP$i : {
       width: 10,
       height: 10
@@ -163,8 +170,8 @@ var ContentV2 = function ContentV2(props) {
   }).join('\n');
   var contentTooltipTitle = isFooterIconHovered ? '' : combinedTooltipText;
   return /*#__PURE__*/_react["default"].createElement(ContentStyles, (0, _extends2["default"])({}, props, {
-    className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row'),
-    title: contentTooltipTitle
+    className: "asset-card-content".concat(hasMetaRow ? '' : ' no-meta-row')
+    // title={contentTooltipTitle} hide as per UI team
   }), /*#__PURE__*/_react["default"].createElement("div", {
     className: "title-parent"
   }, /*#__PURE__*/_react["default"].createElement(TitleStyles, {

package/atoms/cardV2/thumbnail.js

@@ -98,12 +98,12 @@ var Thumbnail = function Thumbnail(props) {
     }
   }, [actions && JSON.stringify(actions).length > 0]);
   (0, _react.useEffect)(function () {
-    /**
-     * will return the hex based status passed
-     * eg. status = In Progress -> will format to "in_progress"
-     * then it will find its index in CARD_ASSET_STATUS which will
-     * return hex
-     * @const
+    /**
+     * will return the hex based status passed
+     * eg. status = In Progress -> will format to "in_progress"
+     * then it will find its index in CARD_ASSET_STATUS which will
+     * return hex
+     * @const
      */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
       return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(" ").join("_") : []);
@@ -131,10 +131,10 @@ var Thumbnail = function Thumbnail(props) {
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
 
-  /**
-   * will decide thumbnail click based on its condition
-   * eg. if task_type === upload then prevent click
-   * @function
+  /**
+   * will decide thumbnail click based on its condition
+   * eg. if task_type === upload then prevent click
+   * @function
    */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {

package/atoms/cardV2/thumbnailV2.js

@@ -23,7 +23,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var OverlayBackgroundStyles = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  background: rgba(0, 0, 0, 0.5);\n"])));
 var assetStyles = {
   folder: {
-    backgroundColor: '#2f3031',
+    backgroundColor: '#121D29',
     backgroundSize: 'inherit'
   },
   asset: {
@@ -67,7 +67,7 @@ var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
   return _tokens.colors[props.theme].card.themeColor;
 });
 var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  justify-content: space-between;\n  padding: 10px;\n"])));
-var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 1px;\n  transform: translateX(-50%);\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
+var BottomActionContainer = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  z-index: 3;\n  opacity: 1;\n"])));
 var ThumbnailV2 = function ThumbnailV2(props) {
   var theme = props.theme,
     width = props.width,
@@ -103,12 +103,12 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }
   }, [actions && JSON.stringify(actions).length > 0]);
   (0, _react.useEffect)(function () {
-    /**
-     * will return the hex based status passed
-     * eg. status = In Progress -> will format to "in_progress"
-     * then it will find its index in CARD_ASSET_STATUS which will
-     * return hex
-     * @const
+    /**
+     * will return the hex based status passed
+     * eg. status = In Progress -> will format to "in_progress"
+     * then it will find its index in CARD_ASSET_STATUS which will
+     * return hex
+     * @const
      */
     var index = _tokens2.CARD_ASSET_STATUS.findIndex(function (label) {
       return label.code.includes(card_status || upload_status ? (card_status || upload_status).toLowerCase().split(' ').join('_') : []);
@@ -136,10 +136,10 @@ var ThumbnailV2 = function ThumbnailV2(props) {
     }
   }, [iframeImageBlockRef, hoverPointerRef, iframeImageRef]);
 
-  /**
-   * will decide thumbnail click based on its condition
-   * eg. if task_type === upload then prevent click
-   * @function
+  /**
+   * will decide thumbnail click based on its condition
+   * eg. if task_type === upload then prevent click
+   * @function
    */
   var handleThumbnailClick = (0, _react.useCallback)(function (e) {
     if (!isClickPrevented) {

package/atoms/draftInputText/draftInputText.js

@@ -75,11 +75,11 @@ var DraftInputText = function DraftInputText(_ref) {
     var passwordButton = props.passwordButton;
   }
 
-  /**
-   *
-   * @param {string} command string representing the keyboard command being invoked
-   * @param {object} editorState represents the current state of the editor, including the content, selection, and various editor properties.
-   * @returns new Editor State with applied styling
+  /**
+   *
+   * @param {string} command string representing the keyboard command being invoked
+   * @param {object} editorState represents the current state of the editor, including the content, selection, and various editor properties.
+   * @returns new Editor State with applied styling
    */
   var handleKeyCommand = function handleKeyCommand(command, editorState) {
     var newState = _draftJs.RichUtils.handleKeyCommand(editorState, command);
@@ -90,9 +90,9 @@ var DraftInputText = function DraftInputText(_ref) {
     return 'not-handled';
   };
 
-  /**
-   *
-   * @returns Return the length of text in editor in a synchronous way
+  /**
+   *
+   * @returns Return the length of text in editor in a synchronous way
    */
   var _getLengthOfSelectedText = function _getLengthOfSelectedText() {
     var currentSelection = editorState.getSelection();
@@ -127,11 +127,11 @@ var DraftInputText = function DraftInputText(_ref) {
     return length;
   };
 
-  /**
-   *
-   * @param {string} text The  text that is pasted in the editor
-   * @param {string} position tells whether we have to check for inserted text or pasted text
-   * @returns whether pasting or inserting text is feasible
+  /**
+   *
+   * @param {string} text The  text that is pasted in the editor
+   * @param {string} position tells whether we have to check for inserted text or pasted text
+   * @returns whether pasting or inserting text is feasible
    */
   var _handleInput = function _handleInput(text, position) {
     var currentContent = editorState.getCurrentContent();
@@ -150,27 +150,27 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   };
 
-  /**
-   *
-   * @returns calls the function to check before typing the text does not exceed maximum length
+  /**
+   *
+   * @returns calls the function to check before typing the text does not exceed maximum length
    */
   var _handleBeforeInput = function _handleBeforeInput() {
     return _handleInput('', 'before');
   };
 
-  /**
-   *
-   * @param {string} pastedText the text that is copy pasted in our editor
-   * @returns calls the function to check  copying  the text does not exceed maximum length
+  /**
+   *
+   * @param {string} pastedText the text that is copy pasted in our editor
+   * @returns calls the function to check  copying  the text does not exceed maximum length
    */
   var _handlePastedText = function _handlePastedText(pastedText) {
     return _handleInput(pastedText, 'after');
   };
 
-  /**
-   *
-   * @param {object} newEditorState the newstate of editor when we type any text in our editor
-   * @returns the new state of editor
+  /**
+   *
+   * @param {object} newEditorState the newstate of editor when we type any text in our editor
+   * @returns the new state of editor
    */
   var _handleChange = function _handleChange(newEditorState) {
     var contentState = newEditorState.getCurrentContent();
@@ -182,10 +182,10 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   };
 
-  /**
-   *
-   * @param {string} htmlString the string that is passed to the parent
-   * @returns removes the default <p> tag of draftjs
+  /**
+   *
+   * @param {string} htmlString the string that is passed to the parent
+   * @returns removes the default <p> tag of draftjs
    */
   var removeOuterPTag = function removeOuterPTag(htmlString) {
     var regex = /^<p>(.*?)<\/p>$/;
@@ -198,10 +198,10 @@ var DraftInputText = function DraftInputText(_ref) {
     });
   };
 
-  /**
-   *
-   * @param {string} html the string that is passed to the parent
-   * @returns removes the symbols of special character like commas and convert them back to character
+  /**
+   *
+   * @param {string} html the string that is passed to the parent
+   * @returns removes the symbols of special character like commas and convert them back to character
    */
 
   function decodeHtml(html) {
@@ -210,8 +210,8 @@ var DraftInputText = function DraftInputText(_ref) {
     return txt.value;
   }
 
-  /**
-   *  this useEffect is used to send value to parent component as soon as editor state gets updated
+  /**
+   *  this useEffect is used to send value to parent component as soon as editor state gets updated
    */
   (0, _react.useEffect)(function () {
     var html = (0, _draftConvert.convertToHTML)(editorState.getCurrentContent());
@@ -227,8 +227,8 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [editorState]);
 
-  /**
-   * This useEffect handles our focus condition and also updates state when the props value changes
+  /**
+   * This useEffect handles our focus condition and also updates state when the props value changes
    */
   (0, _react.useEffect)(function () {
     if (diff && value !== '' && value !== undefined) {
@@ -248,8 +248,8 @@ var DraftInputText = function DraftInputText(_ref) {
       }
     }
   }, [value]);
-  /**
-   * This useEffect is used to chnage our value when timeline is changed
+  /**
+   * This useEffect is used to chnage our value when timeline is changed
    */
   (0, _react.useEffect)(function () {
     if (listScrollTop !== null) {
@@ -263,8 +263,8 @@ var DraftInputText = function DraftInputText(_ref) {
     }
   }, [listScrollTop]);
 
-  /**
-   * This useEffect is used to focus on Line1 when a new segment is created
+  /**
+   * This useEffect is used to focus on Line1 when a new segment is created
    */
   (0, _react.useEffect)(function () {
     if (autoFocus) {