@hhgtech/hhg-components 1.29.332 → 1.29.334-beta-1

package/build/index-c10d9832.js

@@ -0,0 +1,4047 @@
+'use strict';
+
+var tslib_es6 = require('./tslib.es6-19c55cc8.js');
+var React = require('react');
+var other = require('@hhgtech/icons/other');
+var index$8 = require('./index-0d70f22c.js');
+var index = require('./index-193192d9.js');
+var innertext = require('innertext');
+var miscTheme = require('./miscTheme.js');
+var index$5 = require('./index-b51c88e2.js');
+var core = require('@mantine/core');
+require('@mantine/dates');
+require('./index-29a53d3c.js');
+require('./index-591ad0ca.js');
+require('./index-3ae84344.js');
+require('./useMantineLocale-0cc2d977.js');
+var index$2 = require('./index-15a499ed.js');
+var index$1 = require('./index-fd3183da.js');
+require('./index.styles-4b68abeb.js');
+require('@mantine/hooks');
+var utils = require('./utils-ca036bb9.js');
+require('./other-50a0b3de.js');
+require('./index-997d3769.js');
+var index$3 = require('./index-9fb3018a.js');
+var togetherComponentGlobalContext = require('./utils-c1ec3cc4.js');
+var styled = require('@emotion/styled');
+var dataTransform = require('./dataTransform-744c0776.js');
+var constants = require('./constants-3b2ad03d.js');
+var post = require('./post-cd6c6c29.js');
+var togetherMoleculesCardAuthor = require('./index-9e9a9169.js');
+var togetherRichTextEditor = require('./editor-64f2bf27.js');
+var index$4 = require('./index-8e25c967.js');
+var debounce = require('lodash/debounce');
+var ContentEditable = require('react-contenteditable');
+var togetherApiPaths = require('./togetherApiPaths.js');
+var index$6 = require('./index-0130a454.js');
+var index$7 = require('./index-b5cd6a21.js');
+var index$9 = require('./index-5d8baaf6.js');
+var Locale = require('./Locale-46500920.js');
+var ReactDOM = require('react-dom');
+var togetherMoleculesPostImagePreview = require('./index-b3e0585e.js');
+var index$c = require('./index-62fbd1d0.js');
+var miscCookieHelper = require('./miscCookieHelper.js');
+var useUniqueId = require('./useUniqueId-98ff449d.js');
+var index$a = require('./index-814045ef.js');
+var index$b = require('./index-f5666a40.js');
+var core$1 = require('@hhgtech/icons/core');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+var innertext__default = /*#__PURE__*/_interopDefault(innertext);
+var styled__default = /*#__PURE__*/_interopDefault(styled);
+var debounce__default = /*#__PURE__*/_interopDefault(debounce);
+var ContentEditable__default = /*#__PURE__*/_interopDefault(ContentEditable);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+
+const StyledCreateNewPost$1 = styled__default["default"].div `
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  padding: 16px 24px;
+
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px 16px;
+  }
+
+  .input-group-container {
+    flex: 1;
+    padding-right: 2px;
+    padding-left: 2px;
+    margin-bottom: 24px;
+    -ms-overflow-style: none; /* IE and Edge */
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .input-group {
+    :not(:last-child) {
+      margin-bottom: 0.6rem;
+    }
+
+    input:focus,
+    textarea:focus,
+    [contenteditable='true'] {
+      outline: none;
+    }
+
+    label {
+      margin-bottom: 5px;
+      color: ${miscTheme.theme.colors.gray600};
+      /* font-family: 'Open Sans', sans-serif; */
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    .input-group-label {
+      margin-bottom: 5px;
+      color: ${miscTheme.theme.colors.gray600};
+      /* font-family: 'Open Sans', sans-serif; */
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    .input-notification {
+      display: flex;
+
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-top: 1.5px;
+        margin-right: 8px;
+      }
+    }
+
+    .tag-list {
+    }
+  }
+
+  .warning {
+    margin-top: 16px;
+  }
+
+  .submit-btn {
+    width: 100%;
+  }
+
+  .switch-label {
+    display: flex;
+    align-items: center;
+  }
+
+  .swich-input-group {
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: ${miscTheme.theme.colors.neutral50};
+
+    &.askdoctor-switch {
+      background: ${miscTheme.theme.colors.primary50};
+      &.mb-color {
+        background: ${miscTheme.theme.mbColors.tonePink};
+      }
+    }
+
+    .mantine-Switch-labelWrapper {
+      flex-grow: 1;
+    }
+    .mantine-Checkbox-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .mantine-Switch-track {
+      margin-bottom: 0;
+    }
+    .label-txt {
+      font-weight: normal;
+      font-size: 14px;
+      color: ${miscTheme.theme.colors.gray800};
+      margin-left: 10px;
+    }
+  }
+`;
+const StyledIsQuestion$1 = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  border-radius: 0 0 8px 8px;
+  background: ${miscTheme.theme.colors.neutral50};
+  border: 1px solid ${miscTheme.theme.colors.gray200};
+  gap: 12px;
+
+  &.has-error {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+  }
+  &.error-description {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+    border-top: none;
+  }
+
+  &[data-is-marry-baby='true'] {
+    background: ${miscTheme.theme.mbColors.tonePink};
+  }
+
+  .switch-label {
+    display: flex;
+    gap: 4px;
+    align-items: flex-start;
+
+    svg {
+      margin-top: 2px;
+    }
+
+    .wrapper-text {
+      .label-txt {
+        color: ${miscTheme.theme.colors.gray800};
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 22px;
+      }
+      .description-txt {
+        color: ${miscTheme.theme.colors.gray700};
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+      }
+    }
+  }
+
+  button {
+    height: 40px;
+    &:hover,
+    &.primary {
+      border-radius: 16px;
+      border: 1px solid ${miscTheme.theme.colors.blue100};
+      background: ${miscTheme.theme.colors.blue50};
+      color: ${miscTheme.theme.colors.primaryBase};
+    }
+  }
+`;
+const StyledError$1 = styled__default["default"].div `
+  margin-bottom: 12px;
+  color: ${miscTheme.theme.colors.red700};
+  svg {
+    margin-right: 5px;
+  }
+  svg,
+  span {
+    vertical-align: middle;
+  }
+`;
+const StyledFormGroupInner$1 = styled__default["default"].div `
+  .swich-input-group {
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: ${miscTheme.theme.colors.neutral50};
+
+    &.askdoctor-switch {
+      background: ${miscTheme.theme.colors.blue50};
+    }
+
+    .switch-label {
+      display: flex;
+      align-items: center;
+    }
+    .mantine-Switch-labelWrapper {
+      flex-grow: 1;
+    }
+    .mantine-Checkbox-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .mantine-Switch-track {
+      margin-bottom: 0;
+    }
+    .label-txt {
+      font-weight: normal;
+      font-size: 14px;
+      color: ${miscTheme.theme.colors.gray800};
+      margin-left: 14px;
+    }
+  }
+`;
+const StylePostAction$1 = styled__default["default"].div `
+  display: flex;
+  gap: 12px;
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+
+    img {
+      border-radius: 100%;
+    }
+
+    .author-avatar {
+      .col-left {
+        display: none;
+      }
+    }
+  }
+
+  .post-action-form {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .post-action-by {
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .post-action-result {
+    display: flex;
+    position: relative;
+    &:after {
+      content: '';
+      display: inline-block;
+      width: 5px;
+      height: 5px;
+      background-color: ${miscTheme.theme.colors.error};
+      border-radius: 100%;
+      position: absolute;
+      right: 7px;
+    }
+  }
+
+  .dropdown-post-action {
+    background: ${miscTheme.theme.colors.white} !important;
+    border-radius: 2px;
+    border: 1px solid ${miscTheme.theme.colors.neutral200} !important;
+
+    > div {
+      padding: 3px 8px;
+    }
+
+    span {
+      flex: 1;
+      color: ${miscTheme.theme.colors.gray600};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 18px;
+    }
+
+    ul {
+      width: 130px;
+      li {
+        img {
+          flex: 0 0 16px;
+          width: 16px;
+        }
+      }
+    }
+  }
+`;
+const StyleSessionRow$1 = styled__default["default"].div `
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+
+  .session-title {
+    color: ${miscTheme.theme.colors.gray700};
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    flex: 1;
+  }
+`;
+
+var img$7 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M8.78785 10.7863H7.21084C5.77572 10.237 4.20739 10.237 2.77223 10.7863H1.55404V11.6457H2.41467V11.6537C2.41802 13.0707 3.57408 14.2238 4.99111 14.2238C6.4069 14.2238 7.56293 13.072 7.56797 11.6566L7.56803 11.6457H8.4303V11.6537C8.43365 13.0707 9.58971 14.2238 11.0067 14.2238C12.4225 14.2238 13.5786 13.072 13.5836 11.6566L13.5837 11.6457H14.4447V10.7863H13.2265C11.7913 10.237 10.223 10.237 8.78785 10.7863Z' fill='%238C8C8C'/%3e%3cpath d='M0.666016 6.48926V6.91895C0.666016 8.10354 1.62986 9.06738 2.81445 9.06738H13.1842C14.3688 9.06738 15.3327 8.10354 15.3327 6.91895V6.48926H0.666016Z' fill='%238C8C8C'/%3e%3cpath d='M12.36 3.18227C11.9916 2.07614 10.961 1.33301 9.7953 1.33301C9.13524 1.33301 8.48902 1.58185 7.99935 2.01991C7.50965 1.58185 6.86346 1.33301 6.2034 1.33301C5.03772 1.33301 4.00712 2.07614 3.63871 3.18184L2.8207 5.62988H13.1779L12.36 3.18227Z' fill='%238C8C8C'/%3e%3c/svg%3e";
+var IconAnonymous = img$7;
+
+var img$6 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3e%3cpath d='M8.00045 14.3336C7.12449 14.3336 6.30114 14.1674 5.53038 13.835C4.75962 13.5025 4.08916 13.0513 3.51902 12.4815C2.94886 11.9116 2.49749 11.2414 2.1649 10.471C1.83231 9.70056 1.66602 8.87738 1.66602 8.00143C1.66602 7.12547 1.83224 6.30211 2.16468 5.53136C2.49713 4.76059 2.94829 4.09014 3.51818 3.51999C4.08808 2.94984 4.75824 2.49847 5.52867 2.16588C6.29908 1.83329 7.12226 1.66699 7.99822 1.66699C8.87417 1.66699 9.69753 1.83322 10.4683 2.16566C11.239 2.4981 11.9095 2.94927 12.4796 3.51916C13.0498 4.08906 13.5012 4.75922 13.8338 5.52964C14.1664 6.30005 14.3327 7.12324 14.3327 7.99919C14.3327 8.87515 14.1664 9.6985 13.834 10.4693C13.5015 11.24 13.0504 11.9105 12.4805 12.4806C11.9106 13.0508 11.2404 13.5022 10.47 13.8347C9.69959 14.1673 8.8764 14.3336 8.00045 14.3336ZM7.99933 13.3336C9.48822 13.3336 10.7493 12.817 11.7827 11.7836C12.816 10.7503 13.3327 9.4892 13.3327 8.00031C13.3327 7.92253 13.331 7.84304 13.3275 7.76184C13.3241 7.68065 13.3203 7.608 13.316 7.54389C13.2733 7.85329 13.1393 8.10928 12.9141 8.31184C12.6889 8.51441 12.4181 8.61569 12.1019 8.61569H10.5891C10.2506 8.61569 9.96087 8.49527 9.71985 8.25441C9.47883 8.01357 9.35832 7.72403 9.35832 7.38581V6.77088H6.89678V5.54099C6.89678 5.20277 7.01729 4.91272 7.25832 4.67084C7.49935 4.42896 7.78909 4.30803 8.12755 4.30803H8.74293V4.05159C8.74293 3.76185 8.83054 3.52189 9.00575 3.33173C9.18097 3.14155 9.39209 3.00885 9.6391 2.93364C9.37841 2.84818 9.11262 2.78236 8.84173 2.73621C8.57084 2.69005 8.29004 2.66698 7.99933 2.66698C6.51044 2.66698 5.24933 3.18364 4.216 4.21698C3.18267 5.25031 2.666 6.51142 2.666 8.00031V8.09648C2.666 8.12639 2.66814 8.15844 2.67242 8.19263H5.83265C6.5147 8.19263 7.09547 8.43237 7.57495 8.91186C8.05444 9.39134 8.29418 9.97114 8.29418 10.6513V11.2695H6.44803V13.0965C6.6959 13.1734 6.94847 13.2321 7.20573 13.2727C7.463 13.3133 7.72753 13.3336 7.99933 13.3336Z' fill='%238C8C8C'/%3e%3c/svg%3e";
+var IconPublic = img$6;
+
+styled__default["default"].div `
+  background-color: white;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+
+  .drawer-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid ${miscTheme.theme.colors.gray200};
+
+    .input-group-label {
+      flex: 1;
+    }
+
+    img {
+      cursor: pointer;
+    }
+
+    p {
+      flex: 1;
+    }
+  }
+
+  .drawer-content {
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+    height: calc(100% - 49px);
+
+    .input-field-label {
+      margin-bottom: 8px;
+    }
+
+    &.drawer-content-full-screen {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 16px 24px;
+    }
+  }
+`;
+const StyleCommunityReivew = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+
+  .topic-review {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .community-review {
+    .tag-item {
+      background-color: ${miscTheme.theme.colors.neutral50};
+
+      img {
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+  }
+`;
+
+var img$5 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M4.86019 13.3957C4.98735 13.5229 5.14492 13.5865 5.33291 13.5865H13.3233L15.9771 16.2403V5.91343C15.9771 5.72546 15.9135 5.56789 15.7864 5.44072C15.6592 5.31356 15.5016 5.24998 15.3136 5.24998H14.1887V12.036L13.9507 11.798H4.66944V12.923C4.66944 13.111 4.73302 13.2686 4.86019 13.3957ZM2.01562 3.28847V12.9519L4.66944 10.298H12.0252C12.2132 10.298 12.3708 10.2345 12.4979 10.1073C12.6251 9.98014 12.6887 9.82257 12.6887 9.63459V3.28847C12.6887 3.10048 12.6251 2.94291 12.4979 2.81574C12.3708 2.68858 12.2132 2.625 12.0252 2.625H2.67909C2.49111 2.625 2.33353 2.68858 2.20637 2.81574C2.07921 2.94291 2.01562 3.10048 2.01562 3.28847Z' fill='%232D87F3'/%3e%3c/svg%3e";
+var IconCommunity = img$5;
+
+const PostCommunityReview = ({ selectedTopics, currentCommunity }) => {
+    return (React__default["default"].createElement(StyleCommunityReivew, null,
+        React__default["default"].createElement("div", { className: "community-review" },
+            React__default["default"].createElement(index$1.Button, { skipHover: true, size: "md", radius: "xl", className: "tag-item", variant: "tertiary" },
+                React__default["default"].createElement(index$2.Text, { size: "p4", as: "span", color: "inherit" }, currentCommunity.name))),
+        React__default["default"].createElement("div", { className: "topic-review", style: { display: 'none' } }, selectedTopics.map((topic) => {
+            return (React__default["default"].createElement(index$1.Button, { skipHover: true, size: "sm", radius: "xl", className: "tag-item", key: topic.id, variant: "tertiary" },
+                React__default["default"].createElement(index$2.Text, { size: "p4", as: "span", color: "inherit" }, topic.name)));
+        }))));
+};
+const CreatePostCommunity$1 = ({ communitiesList, currentCommunity, selectedTopics, forceTopics, communityValue, 
+// error,
+isFullscreen, isInEditMode, setSelectedTopics, setCommunityValue, removeKeyError, }) => {
+    const { t } = index.useTranslations();
+    const props = {
+        communitiesList,
+        currentCommunity,
+        selectedTopics,
+        communityValue,
+        isFullscreen,
+        isInEditMode,
+        forceTopics,
+        setSelectedTopics,
+        setCommunityValue,
+        removeKeyError,
+    };
+    console.log(props);
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement(StyleSessionRow$1, null,
+            React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconCommunity, style: {
+                    width: '18px',
+                    height: '18px',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } }),
+            React__default["default"].createElement("div", { className: "session-title" }, t('createPost.communityAndTopic'))),
+        React__default["default"].createElement(PostCommunityReview, { selectedTopics: selectedTopics, currentCommunity: currentCommunity })));
+};
+
+const CreatePostDescription$1 = ({ className, style, bannedWords = [], value, onChange, onPreviewUrlChange, onInvalidUrlsChange, 
+// onImageFilesChange,
+// imageFiles: imageFilesProp,
+isReplying, footerEditor, }) => {
+    const { t } = index.useTranslations();
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const imagePicker = React.useRef(null);
+    // const {
+    //   onSelectImages,
+    //   onRemoveImage,
+    //   imageSrcs,
+    //   // imageFiles,
+    // } = useImagePicker(imageFilesProp, onImageFilesChange)
+    React.useEffect(() => {
+        if (onPreviewUrlChange) {
+            if (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url)
+                onPreviewUrlChange({
+                    title: previewUrl.title || '',
+                    url: previewUrl.url || '',
+                    image: previewUrl.image || '',
+                    description: previewUrl.description || '',
+                });
+            else
+                onPreviewUrlChange(null);
+        }
+    }, [previewUrl]);
+    return (React__default["default"].createElement(togetherRichTextEditor.StyledCreatePostDescription, { className: className, style: style },
+        React__default["default"].createElement(index$2.Text, { size: "p4", className: "description-label" }, t('createPost.popup.description')),
+        React__default["default"].createElement("div", { className: `textarea-control` },
+            React__default["default"].createElement("div", { className: "textarea-wrapper" },
+                React__default["default"].createElement(togetherRichTextEditor.RichTextEditor, { html: value || '', onChange: onChange, bannedWords: bannedWords, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: onInvalidUrlsChange, isReplying: isReplying }))),
+        footerEditor,
+        React__default["default"].createElement(index$2.Text, { size: "p4", className: "count-string" },
+            t('character'),
+            ": ",
+            innertext__default["default"](value || '').length)));
+};
+
+var img$4 = "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3e%3cpath d='M5.3077 20.5C4.80257 20.5 4.375 20.325 4.025 19.975C3.675 19.625 3.5 19.1974 3.5 18.6923V5.3077C3.5 4.80257 3.675 4.375 4.025 4.025C4.375 3.675 4.80257 3.5 5.3077 3.5H18.6923C19.1974 3.5 19.625 3.675 19.975 4.025C20.325 4.375 20.5 4.80257 20.5 5.3077V18.6923C20.5 19.1974 20.325 19.625 19.975 19.975C19.625 20.325 19.1974 20.5 18.6923 20.5H5.3077ZM7.65388 16.75H16.423C16.6038 16.75 16.7377 16.6679 16.8249 16.5038C16.9121 16.3397 16.8987 16.1807 16.7845 16.0269L14.4 12.8327C14.3064 12.7122 14.1859 12.6519 14.0384 12.6519C13.891 12.6519 13.7705 12.7122 13.6769 12.8327L11.2308 16.0192L9.5923 13.9192C9.49872 13.8051 9.37981 13.7481 9.23558 13.7481C9.09134 13.7481 8.97243 13.8083 8.87885 13.9289L7.30195 16.0269C7.18143 16.1807 7.16477 16.3397 7.25195 16.5038C7.33913 16.6679 7.47311 16.75 7.65388 16.75Z' fill='%232D87F3'/%3e%3c/svg%3e";
+var IconPhone = img$4;
+
+const CreatePostPhotos$1 = ({ imageFiles: imageFilesInit, setImageFiles, }) => {
+    const imageRef = React.useRef(null);
+    const { t } = index.useTranslations();
+    const { onSelectImages } = index$3.useImagePicker(imageFilesInit, setImageFiles);
+    const handleClick = () => {
+        var _a;
+        (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement(StyleSessionRow$1, { onClick: handleClick },
+            React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconPhone, style: {
+                    width: '18px',
+                    height: '18px',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } }),
+            React__default["default"].createElement("div", { className: "session-title" }, t('createPost.photos'))),
+        React__default["default"].createElement("input", { ref: imageRef, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: (e) => onSelectImages(e) })));
+};
+
+const StyledCreatePostTitle$1 = styled__default["default"].div `
+  input:focus,
+  textarea:focus,
+  [contenteditable='true'] {
+    outline: none;
+  }
+
+  .title-input {
+    overflow: hidden;
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px #d9d9d9;
+    border-radius: ${miscTheme.theme.borderRadius};
+    font-size: 16px;
+    line-height: 1.2;
+    white-space: nowrap;
+    :focus {
+      border-color: ${(props) => props.color};
+      box-shadow: 0px 0px 2px 2px ${(props) => props.colorShadow};
+    }
+    br {
+      display: none;
+    }
+    * {
+      display: inline;
+      white-space: nowrap;
+    }
+    mocka {
+      padding: 2px 6px;
+      border-radius: 1rem;
+      &[data-error='true'] {
+        background-color: #ffeeee;
+        color: red;
+        text-decoration: underline;
+        font-style: bold;
+      }
+    }
+    ol,
+    ul {
+      padding-left: 1rem;
+    }
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+    color: ${miscTheme.theme.colors.gray600};
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    margin-top: 5px;
+    color: ${miscTheme.theme.colors.gray500};
+    font-size: 11px;
+    text-align: right;
+  }
+`;
+
+const TITLE_LIMIT$1 = 120;
+const inputModify$3 = (value, opts) => {
+    if (!opts)
+        return value;
+    const { limit, bannedWords = [] } = opts;
+    const shorten = typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value;
+    const processedValue = post.highlightBadWords(shorten, bannedWords);
+    return processedValue;
+};
+const CreatePostTitle$1 = ({ className, style, bannedWords = [], value, onChange, }) => {
+    var _a;
+    const _theme = core.useMantineTheme();
+    const { t } = index.useTranslations();
+    const [titleValue, setTitleValue] = React.useState('');
+    const titleRef = React.useRef(null);
+    React.useEffect(() => {
+        if (titleRef.current) {
+            const pasteHandler = (e) => {
+                var _a;
+                e.preventDefault();
+                const text = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+                document.execCommand('insertHTML', false, text);
+            };
+            const contentDiv = titleRef.current;
+            contentDiv.addEventListener('paste', pasteHandler, {
+                passive: true,
+            });
+            return () => contentDiv.removeEventListener('paste', pasteHandler);
+        }
+    }, [titleRef]);
+    const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || '';
+    React.useEffect(() => {
+        var _a;
+        if (bannedString) {
+            const titleText = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+            if (titleText) {
+                const titleValueWithBanned = post.highlightBadWords(titleText, bannedWords);
+                if (titleValueWithBanned !== titleText) {
+                    onChange && onChange(titleValueWithBanned);
+                    setTitleValue(titleValueWithBanned);
+                }
+            }
+        }
+    }, [bannedString]);
+    const debounceInputModify = React.useCallback(debounce__default["default"](() => {
+        if (titleRef.current) {
+            const shortenString = inputModify$3(titleRef.current.innerText, {
+                limit: TITLE_LIMIT$1,
+                bannedWords,
+            });
+            onChange && onChange(shortenString);
+            setTitleValue(shortenString);
+        }
+    }, 300), []);
+    React.useEffect(() => {
+        setTimeout(() => {
+            var _a;
+            (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }, 500);
+    }, []);
+    return (React__default["default"].createElement(StyledCreatePostTitle$1, { className: className, style: style, color: _theme.colors[_theme.primaryColor][0], colorShadow: _theme.colors[_theme.primaryColor][2] },
+        React__default["default"].createElement(index$4.Input, { name: "title", value: value || titleValue, size: "md", label: t('createPost.title'), CustomInput: React__default["default"].createElement(ContentEditable__default["default"], { innerRef: titleRef, html: value || titleValue, onChange: () => {
+                    if (titleRef.current &&
+                        titleRef.current.innerText !== (value || titleValue)) {
+                        const initialValue = inputModify$3(titleRef.current.innerText, {
+                            bannedWords,
+                        });
+                        onChange && onChange(initialValue);
+                        setTitleValue(initialValue);
+                        debounceInputModify();
+                    }
+                }, className: "title-input" }) }),
+        React__default["default"].createElement(index$2.Text, { size: "p4", className: "count-string" }, t('createPost.popup.wordCount', {
+            count: ((_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText.length) || 0,
+            max: TITLE_LIMIT$1,
+        }))));
+};
+
+const StyledPopupFrame = styled__default["default"](index$3.PopupFrame) `
+  & > div[data-open]:first-child {
+    z-index: 1000;
+    height: auto;
+    max-width: 448px;
+  }
+  .custom-media-dialog {
+    padding: 1rem;
+    .image-gallery {
+      display: none;
+      .image-item {
+        &.no-image {
+          cursor: pointer;
+        }
+        .camera-btn {
+          position: absolute;
+          top: calc(100% - 32px);
+          right: 8px;
+          left: unset;
+          width: 24px;
+          height: 24px;
+        }
+      }
+    }
+    .custom-media-add-btn {
+      margin-left: auto;
+      display: block;
+    }
+  }
+`;
+const StyledInput = styled__default["default"](index$5.Input) `
+  margin-bottom: 10px;
+`;
+const StyleWrapperInfo = styled__default["default"].div `
+  display: flex;
+  gap: 4px;
+  align-items: flex-start;
+  margin-bottom: 14px;
+
+  img {
+    margin-top: 2px;
+    max-width: 16px;
+  }
+`;
+
+var img$3 = "data:image/svg+xml,%3csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M8.0026 1.33334C4.3206 1.33334 1.33594 4.31801 1.33594 8.00001C1.33594 11.682 4.3206 14.6667 8.0026 14.6667C11.6846 14.6667 14.6693 11.682 14.6693 8.00001C14.6693 4.31801 11.6846 1.33334 8.0026 1.33334ZM8.0026 11.3333C7.6346 11.3333 7.33594 11.0347 7.33594 10.6667V8.00001C7.33594 7.63201 7.6346 7.33334 8.0026 7.33334C8.3706 7.33334 8.66927 7.63201 8.66927 8.00001V10.6667C8.66927 11.0347 8.3706 11.3333 8.0026 11.3333ZM8.33594 6.00001H7.66927C7.48527 6.00001 7.33594 5.85068 7.33594 5.66668V5.00001C7.33594 4.81601 7.48527 4.66668 7.66927 4.66668H8.33594C8.51994 4.66668 8.66927 4.81601 8.66927 5.00001V5.66668C8.66927 5.85068 8.51994 6.00001 8.33594 6.00001Z' fill='%232D87F3'/%3e%3c/svg%3e";
+var IconInfo = img$3;
+
+const SocialLinkPopup = ({ isOpen, onClose, onSocialLinkChanged, socialLinkData, }) => {
+    const { t } = index.useTranslations();
+    const imagePickerRef = React.useRef(null);
+    const [socialLink, setSocialLinkUrl] = React.useState('');
+    const { onSelectImages, onRemoveImage, imageSrcs, imageFiles } = index$3.useImagePicker();
+    React.useEffect(() => {
+        if (isOpen) {
+            setSocialLinkUrl((socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) || '');
+        }
+    }, [isOpen]);
+    const isAcceptedLink = socialLink.includes('youtu.be') ||
+        socialLink.includes('youtube.com') ||
+        socialLink.includes('facebook.com') ||
+        socialLink.includes('fb.watch') ||
+        socialLink.includes('tiktok.com');
+    const isValid = !!socialLink && isAcceptedLink;
+    return (React__default["default"].createElement(React__default["default"].Fragment, null,
+        React__default["default"].createElement("input", { ref: imagePickerRef, type: "file", accept: "image/png, image/gif, image/jpeg", style: { display: 'none' }, onChange: onSelectImages }),
+        React__default["default"].createElement(StyledPopupFrame, { isOpen: isOpen, onClose: onClose, heading: "Insert", style: {
+                zIndex: 3,
+            } },
+            React__default["default"].createElement("div", { className: "custom-media-dialog", onClick: (e) => e.stopPropagation() },
+                React__default["default"].createElement(StyledInput, { size: "md", name: "custom-media-url", placeholder: "URL", value: socialLink, onChange: (v) => setSocialLinkUrl(v), label: "" }),
+                React__default["default"].createElement(StyleWrapperInfo, null,
+                    React__default["default"].createElement("img", { src: IconInfo, alt: "" }),
+                    React__default["default"].createElement(index$2.Text, { size: "c2", color: "#737373" }, t('editor.addSocialLink.warningDomain'))),
+                !imageSrcs[0] ? (React__default["default"].createElement("div", { className: "image-gallery" },
+                    React__default["default"].createElement("div", { className: "image-item no-image", onClick: () => { var _a; return (_a = imagePickerRef.current) === null || _a === void 0 ? void 0 : _a.click(); } }))) : (React__default["default"].createElement("div", { className: "image-gallery" },
+                    React__default["default"].createElement("div", { className: "image-item" },
+                        React__default["default"].createElement("img", { src: imageSrcs[0], alt: "" }),
+                        React__default["default"].createElement("img", { className: "close-btn", alt: "", onClick: () => onRemoveImage(0) })))),
+                React__default["default"].createElement(index$1.Button, { color: "primary", size: "md", variant: "primary", type: "button", className: "custom-media-add-btn", onClick: (e) => {
+                        e === null || e === void 0 ? void 0 : e.preventDefault();
+                        e === null || e === void 0 ? void 0 : e.stopPropagation();
+                        if (isValid) {
+                            onSocialLinkChanged === null || onSocialLinkChanged === void 0 ? void 0 : onSocialLinkChanged({
+                                url: !socialLink.includes('http')
+                                    ? 'https://' + socialLink
+                                    : socialLink,
+                                banner: imageFiles[0],
+                            });
+                            onClose === null || onClose === void 0 ? void 0 : onClose();
+                        }
+                    }, disabled: !isValid }, t('editor.addSocialLink.addLink'))))));
+};
+
+var img$2 = "data:image/svg+xml,%3csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.23078 14.625C2.85193 14.625 2.53125 14.4937 2.26875 14.2312C2.00625 13.9687 1.875 13.648 1.875 13.2692V4.73078C1.875 4.35193 2.00625 4.03125 2.26875 3.76875C2.53125 3.50625 2.85193 3.375 3.23078 3.375H14.7692C15.148 3.375 15.4687 3.50625 15.7312 3.76875C15.9937 4.03125 16.125 4.35193 16.125 4.73078V10.315C15.8029 10.1922 15.4534 10.125 15.0882 10.125H11.9117C10.3036 10.125 8.99998 11.4286 8.99998 13.0368C8.99998 13.6227 9.17304 14.1682 9.47085 14.625H3.23078ZM7.83606 11.6899L11.5846 9.28988C11.6875 9.21969 11.7389 9.12306 11.7389 8.99998C11.7389 8.87691 11.6875 8.78028 11.5846 8.71009L7.83606 6.31011C7.72067 6.23222 7.60456 6.22597 7.48774 6.29136C7.37091 6.35673 7.3125 6.45721 7.3125 6.59278V11.4072C7.3125 11.5428 7.37091 11.6432 7.48774 11.7086C7.60456 11.774 7.72067 11.7677 7.83606 11.6899ZM10.7181 14.6953C11.1136 15.0907 11.5889 15.2884 12.1442 15.2884H12.8099C12.9325 15.2884 13.0352 15.247 13.1182 15.1642C13.2011 15.0813 13.2426 14.9786 13.2426 14.856C13.2426 14.7333 13.2011 14.6305 13.1182 14.5475C13.0352 14.4646 12.9325 14.4231 12.8099 14.4231H12.1442C11.8269 14.4231 11.5553 14.3101 11.3293 14.0841C11.1033 13.8582 10.9903 13.5865 10.9903 13.2692C10.9903 12.9519 11.1033 12.6803 11.3293 12.4543C11.5553 12.2284 11.8269 12.1154 12.1442 12.1154H12.8099C12.9325 12.1154 13.0352 12.074 13.1182 11.9911C13.2011 11.9083 13.2426 11.8055 13.2426 11.6829C13.2426 11.5602 13.2011 11.4574 13.1182 11.3745C13.0352 11.2915 12.9325 11.25 12.8099 11.25H12.1442C11.5889 11.25 11.1136 11.4477 10.7181 11.8432C10.3227 12.2386 10.125 12.7139 10.125 13.2692C10.125 13.8245 10.3227 14.2999 10.7181 14.6953ZM12.2686 13.5775C12.3515 13.6604 12.4543 13.7019 12.5769 13.7019H15.1731C15.2957 13.7019 15.3984 13.6605 15.4814 13.5776C15.5643 13.4948 15.6058 13.3921 15.6058 13.2694C15.6058 13.1468 15.5643 13.044 15.4814 12.961C15.3984 12.878 15.2957 12.8365 15.1731 12.8365H12.5769C12.4543 12.8365 12.3515 12.878 12.2686 12.9608C12.1857 13.0436 12.1442 13.1464 12.1442 13.269C12.1442 13.3917 12.1857 13.4945 12.2686 13.5775ZM14.9401 15.2884H15.6058C16.161 15.2884 16.6364 15.0911 17.0318 14.6966C17.4273 14.3019 17.625 13.8268 17.625 13.271C17.625 12.7068 17.4273 12.2289 17.0318 11.8374C16.6364 11.4458 16.161 11.25 15.6058 11.25H14.9401C14.8175 11.25 14.7147 11.2914 14.6318 11.3743C14.5488 11.4571 14.5074 11.5598 14.5074 11.6825C14.5074 11.8051 14.5488 11.908 14.6318 11.9909C14.7147 12.0739 14.8175 12.1154 14.9401 12.1154H15.6058C15.9231 12.1154 16.1947 12.2284 16.4207 12.4543C16.6466 12.6803 16.7596 12.9519 16.7596 13.2692C16.7596 13.5865 16.6466 13.8582 16.4207 14.0841C16.1947 14.3101 15.9231 14.4231 15.6058 14.4231H14.9401C14.8175 14.4231 14.7147 14.4645 14.6318 14.5473C14.5488 14.6302 14.5074 14.7329 14.5074 14.8556C14.5074 14.9782 14.5488 15.081 14.6318 15.164C14.7147 15.247 14.8175 15.2884 14.9401 15.2884Z' fill='%23F44D2C'/%3e%3c/svg%3e";
+var IconVideo = img$2;
+
+const CreatePostVideo = ({ socialLinkData, setSocialLinkData, }) => {
+    const { t } = index.useTranslations();
+    const [activeModal, setActiveModal] = React.useState(false);
+    const handleClick = () => {
+        setActiveModal(true);
+    };
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement(StyleSessionRow$1, { onClick: handleClick },
+            React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconVideo, style: {
+                    width: '18px',
+                    height: '18px',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } }),
+            React__default["default"].createElement("div", { className: "session-title" }, t('createPost.videoOrLink'))),
+        React__default["default"].createElement(SocialLinkPopup, { isOpen: activeModal, onClose: () => setActiveModal(false), onSocialLinkChanged: setSocialLinkData, socialLinkData: socialLinkData })));
+};
+
+const StyleReviewPhoto$1 = styled__default["default"].div `
+  .mantine-Text-root {
+    margin-bottom: 4px;
+  }
+  .preview-images-container {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .image-src-wrapper {
+      flex: 0 0 140px;
+      width: 140px;
+      height: 96px;
+      border-radius: 4px;
+      position: relative;
+      img {
+        border-radius: 4px;
+      }
+      .icon-close {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        cursor: pointer;
+        z-index: 10;
+        max-height: 24px;
+        max-width: 24px;
+      }
+    }
+  }
+`;
+
+const PostPhotosReview$1 = ({ error, imageFiles: imageFilesInit, setImageFiles, removeKeyError, }) => {
+    const { t } = index.useTranslations();
+    const { imageSrcs, onRemoveImage } = index$3.useImagePicker(imageFilesInit, setImageFiles);
+    return (React__default["default"].createElement(StyleReviewPhoto$1, { className: "input-group" },
+        React__default["default"].createElement(index$2.Text, { size: "p5", weight: "semiBold" }, t('createPost.photos')),
+        React__default["default"].createElement("div", { className: "preview-images-container" }, imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.map((src, index) => {
+            return (React__default["default"].createElement("div", { className: "image-src-wrapper", key: index },
+                React__default["default"].createElement("img", { src: src, className: "preview-image", alt: "", style: {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                    } }),
+                React__default["default"].createElement("img", { alt: "", className: "icon-close", src: index$3.IconCloseCircle, onClick: () => {
+                        removeKeyError && removeKeyError('photos');
+                        onRemoveImage(index);
+                    } })));
+        })),
+        error && (error === null || error === void 0 ? void 0 : error.photos) && (React__default["default"].createElement(StyledError$1, null,
+            React__default["default"].createElement(index$2.Text, { size: "p5", color: miscTheme.theme.colors.red600 }, error.photos)))));
+};
+
+const inputModify$2 = (value, opts) => {
+    var _a;
+    const { formatUrl, bannedWords = [] } = opts || {};
+    const removedFormat = post.fixMalformedMention(post.removeFontFormat(value));
+    if (!formatUrl)
+        return {
+            value: post.highlightBadWords(removedFormat, bannedWords),
+        };
+    let descriptionWithWrappedAnchor = post.removeEdittedBannedWord(post.wrapAnchorAroundUrls(removedFormat));
+    const urls = post.getUrlsFromEditorString(removedFormat);
+    if (urls) {
+        const invalidUrls = [];
+        let previewUrl = '';
+        urls.forEach((url) => {
+            if (!url)
+                return;
+            try {
+                const jsUrl = new URL(url);
+                // Check url has must into domain hellohealthgroup
+                if (!post.ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith(o))) {
+                    invalidUrls.push('notification.limitUrlDomain');
+                    return;
+                }
+                // Check url have special character
+                if (url.endsWith('&')) {
+                    invalidUrls.push('notification.urlWrongFormat');
+                    return;
+                }
+            }
+            catch (_a) {
+                invalidUrls.push(url);
+            }
+        });
+        if (invalidUrls.length > 0) {
+            descriptionWithWrappedAnchor = descriptionWithWrappedAnchor
+                .replace(new RegExp(`data-url="true">(${invalidUrls.map(post.escapeRegExp).join('|')})<`, 'gi'), 'data-error="true" data-url="true">$1<')
+                .replace(new RegExp(`data-href="(${invalidUrls
+                .map(post.escapeRegExp)
+                .join('|')})" data-url="true">`, 'gi'), 'data-href="$1" data-error="true" data-url="true">');
+        }
+        previewUrl = (_a = urls.filter((u) => invalidUrls.indexOf(u) === -1)) === null || _a === void 0 ? void 0 : _a[0];
+        return {
+            invalidUrls,
+            previewUrl,
+            value: post.highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+        };
+    }
+    return {
+        value: post.highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+    };
+};
+const usePreviewUrl = (bannedWords, onChange) => {
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const bannedWordsRef = React.useRef([]);
+    bannedWordsRef.current = bannedWords;
+    const fetchPreviewData = (url) => {
+        if (!previewUrl || previewUrl.url !== url) {
+            setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({
+                url,
+                isFetching: true,
+            });
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }), 'POST', {
+                data: {
+                    link: url,
+                },
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+            })
+                .then((res) => {
+                var _a, _b, _c, _d;
+                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl({
+                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
+                    description: (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.description,
+                    image: ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.image) || ((_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.logo),
+                    url,
+                });
+            })
+                .catch(() => {
+                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
+            });
+        }
+    };
+    const fetchPreviewDataRef = React.useRef(fetchPreviewData);
+    fetchPreviewDataRef.current = fetchPreviewData;
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const debounceInputModify = React.useCallback(debounce__default["default"]((v) => {
+        if (v) {
+            const processedInput = inputModify$2(v, {
+                bannedWords: bannedWordsRef.current,
+                formatUrl: true,
+            });
+            const { invalidUrls: _invalidUrls, previewUrl: _previewUrl, value, } = processedInput;
+            if (_invalidUrls && (_invalidUrls === null || _invalidUrls === void 0 ? void 0 : _invalidUrls.length)) {
+                setInvalidUrls(_invalidUrls);
+                setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
+            }
+            else {
+                setInvalidUrls([]);
+                if (_previewUrl) {
+                    fetchPreviewDataRef.current(_previewUrl);
+                }
+                else
+                    setPreviewUrl === null || setPreviewUrl === void 0 ? void 0 : setPreviewUrl(null);
+                if (value !== v) {
+                    onChange === null || onChange === void 0 ? void 0 : onChange(value);
+                }
+            }
+        }
+    }, 500), []);
+    return {
+        previewUrl,
+        setPreviewUrl,
+        invalidUrls,
+        debounceInputModify,
+        fetchPreviewData,
+    };
+};
+
+const StyleReviewVideo = styled__default["default"].div `
+  .link-preview-wrapper {
+    position: relative;
+    .icon-close {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      cursor: pointer;
+      z-index: 10;
+      max-width: 24px;
+      max-height: 24px;
+    }
+  }
+  .mantine-Text-root {
+    margin-bottom: 4px;
+  }
+`;
+
+const PostVideoReview = ({ socialLinkData, bannedWords, onChange, onInvalidUrlsChange, onSocialLinkChanged, }) => {
+    const { t } = index.useTranslations();
+    const { invalidUrls, previewUrl, fetchPreviewData, setPreviewUrl } = usePreviewUrl(bannedWords || [], onChange);
+    React.useEffect(() => {
+        if (socialLinkData && socialLinkData.url) {
+            fetchPreviewData(socialLinkData.url);
+        }
+    }, [socialLinkData, fetchPreviewData]);
+    React.useEffect(() => {
+        if (invalidUrls) {
+            onInvalidUrlsChange === null || onInvalidUrlsChange === void 0 ? void 0 : onInvalidUrlsChange(invalidUrls);
+        }
+    }, [invalidUrls]);
+    return (React__default["default"].createElement(StyleReviewVideo, { className: "input-group" },
+        React__default["default"].createElement(index$2.Text, { size: "p5", weight: "semiBold" }, t('createPost.video')),
+        React__default["default"].createElement("div", { className: "link-preview-wrapper" }, (socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) && previewUrl && (React__default["default"].createElement("div", { className: "link-preview-wrapper" }, previewUrl.isFetching ? (React__default["default"].createElement(index$6.Loading, null)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+            React__default["default"].createElement(index$7.CardLink, { title: previewUrl.title, url: previewUrl.url || '#', image: previewUrl.image, noRefetch: true }),
+            React__default["default"].createElement("img", { alt: "", src: index$3.IconCloseCircle, className: "icon-close", onClick: () => {
+                    setPreviewUrl(null);
+                    onSocialLinkChanged && onSocialLinkChanged(null);
+                } }))))))));
+};
+
+const MAX_SIZE_FILE_UPLOAD$1 = 10 * 1024 * 1024;
+const applySpecialCharSite$1 = [
+    Locale.LOCALE.PhilippinesEnglish,
+    Locale.LOCALE.PhilippinesTagalog,
+    Locale.LOCALE.Indonesia,
+    Locale.LOCALE.Malaysia,
+    Locale.LOCALE.Vietnam,
+];
+const CreateNewPostContent = ({ className, style, onPostCreatedEdited, onClose, communities = [], forceSelectCommunity, forceSelectTopics, articleId, optionalTopic, editPostData, defaultCommunity, defaultTopics, selectAskDoctor, showAskDoctorOptions, userInfo, isMarryBaby = false, }) => {
+    const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id);
+    const { data: { locale, router, env: { togetherBasePath }, }, action: { pushNotifications, sanitizeFunction }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { asPath } = router || {};
+    const { t } = index.useTranslations();
+    // const [isAnonymous, setIsAnonymous] = useState<boolean>(false)
+    const [isAskDoctor, setIsAskDoctor] = React.useState(selectAskDoctor);
+    const [specialCharErr, setspecialCharErr] = React.useState(false);
+    const [isSubmitting, setIsSubmitting] = React.useState(false);
+    const [titleValue, setTitleValue] = React.useState('');
+    const [descriptionValue, setDescriptionValue] = React.useState('');
+    const [communityValue, setCommunityValue] = React.useState(forceSelectCommunity
+        ? {
+            label: forceSelectCommunity.name,
+            value: `${forceSelectCommunity.id || ''}-${forceSelectCommunity.mappedCategoryId || ''}`,
+        }
+        : {
+            label: t('community.choose'),
+            value: '',
+        });
+    const [selectedTopics, setSelectedTopics] = React.useState([...forceSelectTopics] || []);
+    const [socialLinkData, setSocialLinkData] = React.useState();
+    const [error, setError] = React.useState({});
+    const [imageFiles, setImageFiles] = React.useState([]);
+    const [bannedWords, setBannedWords] = React.useState([]);
+    const [postActionValue, setPostActionValue] = React.useState({
+        label: t('cardPost.public'),
+        value: 'public',
+    });
+    const { imageSrcs = [] } = index$3.useImagePicker(imageFiles);
+    const currentCommunity = forceSelectCommunity ||
+        communities.find((c) => `${c.id || ''}-${c.mappedCategoryId || ''}` === communityValue.value);
+    const communitiesList = forceSelectCommunity
+        ? [forceSelectCommunity]
+        : communities
+            .filter((c) => c.isActive)
+            .sort((a, b) => {
+            if (a.name > b.name)
+                return 1;
+            if (a.name < b.name)
+                return -1;
+            return 0;
+        });
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const isReadyToSubmit = titleValue &&
+        !specialCharErr &&
+        innertext__default["default"](descriptionValue) &&
+        (optionalTopic || (!optionalTopic && selectedTopics.length > 0)) &&
+        currentCommunity &&
+        (!imageFiles || imageFiles.length <= constants.MAX_IMAGE_UPLOADS) &&
+        !(invalidUrls === null || invalidUrls === void 0 ? void 0 : invalidUrls.length) &&
+        !isSubmitting;
+    const postActionType = [
+        {
+            label: t('cardPost.public'),
+            value: 'public',
+            icon: (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconPublic, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } })),
+        },
+        {
+            label: t('cardPost.anonymous'),
+            value: 'anonymous',
+            icon: (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } })),
+        },
+    ];
+    // HANDLE etra action when OPEN AND CLOSE
+    React.useEffect(() => {
+        if (editPostData) {
+            const post$1 = editPostData;
+            setTitleValue(post$1.title || '');
+            setDescriptionValue(post.decodeMention(post.decodePostUrl(post$1.description || '', 'edit'), post$1.mentions));
+            setCommunityValue({
+                label: post$1.community.name,
+                value: `${post$1.community.id || ''}-${post$1.community.mappedCategoryId || ''}`,
+            });
+            setSelectedTopics(post$1.topics || []);
+            setImageFiles(post$1.photos || []);
+            // setIsAnonymous(!!post.isAnonymous || false)
+            setIsAskDoctor(!!post$1.isAskDoctor || false);
+        }
+        else {
+            if (defaultCommunity) {
+                setCommunityValue({
+                    label: defaultCommunity.name,
+                    value: `${defaultCommunity.id || ''}-${defaultCommunity.mappedCategoryId || ''}`,
+                });
+            }
+            if (defaultTopics) {
+                setSelectedTopics(defaultTopics);
+            }
+        }
+    }, []);
+    React.useEffect(() => {
+        setspecialCharErr(applySpecialCharSite$1.includes(locale) &&
+            titleValue !== '' &&
+            !/[a-zA-Z]/.test(titleValue));
+        setError({});
+    }, [titleValue]);
+    const onCreateEditSuccess = (res) => {
+        if (onPostCreatedEdited) {
+            onPostCreatedEdited(dataTransform.formatPost(res), isInEditMode);
+        }
+        onClose && onClose();
+    };
+    const validationUploadPhoto = (files) => {
+        const errorMessage = Object.assign({}, error);
+        if (files && files.length > 10) {
+            errorMessage.photos = t('createPost.message.photoMaxium');
+        }
+        if (files && files.length) {
+            const inValidSizeFile = files.some((file) => (file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD$1);
+            if (inValidSizeFile) {
+                errorMessage.photos = t('createPost.message.photoSize');
+            }
+        }
+        setError(errorMessage);
+    };
+    const validationPost = () => {
+        let hasError = false;
+        const errorMessage = {};
+        const description = innertext__default["default"](descriptionValue);
+        if (!description) {
+            errorMessage.description = t('createPost.message.requiredDescription');
+            hasError = true;
+        }
+        if (isInEditMode && !titleValue) {
+            errorMessage.title = t('createPost.message.requiredTitle');
+            hasError = true;
+        }
+        if (description && description.split(' ').length < 10) {
+            errorMessage.description = t('createPost.message.lengthDescription');
+            hasError = true;
+        }
+        if (showAskDoctorOptions &&
+            !(errorMessage === null || errorMessage === void 0 ? void 0 : errorMessage.description) &&
+            typeof isAskDoctor === 'undefined') {
+            errorMessage.askDoctor = t('createPost.message.askDoctorRequireMess');
+            hasError = true;
+        }
+        if (imageFiles && imageFiles.length > 10) {
+            errorMessage.photos = t('createPost.message.photoMaxium');
+            hasError = true;
+        }
+        if (imageFiles && imageFiles.length) {
+            const inValidSizeFile = imageFiles.some((file) => (file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD$1);
+            if (inValidSizeFile) {
+                errorMessage.photos = t('createPost.message.photoSize');
+                hasError = true;
+            }
+        }
+        if (invalidUrls && invalidUrls.length) {
+            errorMessage.video = 'Invalid video url';
+            hasError = true;
+        }
+        setError(errorMessage);
+        return hasError;
+    };
+    const removeKeyError = (deleteKey) => {
+        if (error[deleteKey]) {
+            const _a = Object.assign({}, error), _b = `${deleteKey}`, value = _a[_b], rest = tslib_es6.__rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+            setError(rest);
+            console.log(value);
+        }
+    };
+    const submitPost = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        const isError = validationPost();
+        if (isError)
+            return;
+        const bodyFormData = yield index$3.getPostFormData({
+            title: titleValue,
+            description: descriptionValue,
+            communityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) || ''),
+            imageFiles,
+            previewUrl,
+            topicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String(topic.id || '')).filter(Boolean),
+            locale,
+            sanitizeFunction,
+            categoryCommunityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId) || ''),
+            categoryTopicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String((topic === null || topic === void 0 ? void 0 : topic.mappedCategoryId) || '')).filter(Boolean),
+            isAnonymous: (postActionValue === null || postActionValue === void 0 ? void 0 : postActionValue.value) === 'anonymous' ? 1 : 0,
+            isAskDoctor: isAskDoctor ? 1 : 0,
+            introUrl: (socialLinkData === null || socialLinkData === void 0 ? void 0 : socialLinkData.url) || '',
+        });
+        if (articleId) {
+            bodyFormData.append('article_id', articleId);
+        }
+        let res;
+        if (isInEditMode) {
+            if (editPostData === null || editPostData === void 0 ? void 0 : editPostData.id) {
+                res = yield index$3.editPost({
+                    id: editPostData.id,
+                    formData: bodyFormData,
+                    locale,
+                });
+            }
+        }
+        else {
+            res = yield index$3.createPost({
+                formData: bodyFormData,
+                locale,
+                isArticleComment: !(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) && !!(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId),
+            });
+        }
+        const resData = res === null || res === void 0 ? void 0 : res.data;
+        if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_b = (_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.moderation) === null || _b === void 0 ? void 0 : _b.type)) {
+            pushNotifications({
+                message: t('createPost.popup.success'),
+                type: 'success',
+            });
+            onCreateEditSuccess(resData);
+        }
+        else {
+            if (((_d = (_c = res === null || res === void 0 ? void 0 : res.messages) === null || _c === void 0 ? void 0 : _c.moderation) === null || _d === void 0 ? void 0 : _d.type) === 'banned') {
+                pushNotifications({
+                    title: t('notification.post.blocked.title'),
+                    message: t('notification.post.blocked.message'),
+                    type: 'danger',
+                });
+                if (res.messages.moderation.words) {
+                    setBannedWords(res.messages.moderation.words);
+                }
+            }
+            else if (((_f = (_e = res === null || res === void 0 ? void 0 : res.messages) === null || _e === void 0 ? void 0 : _e.moderation) === null || _f === void 0 ? void 0 : _f.type) === 'suspect') {
+                pushNotifications({
+                    title: t('notification.post.suspect.title'),
+                    message: t('notification.post.suspect.message'),
+                    type: 'warning',
+                });
+                onClose && onClose();
+            }
+            else if ((_h = (_g = res === null || res === void 0 ? void 0 : res.messages) === null || _g === void 0 ? void 0 : _g.find) === null || _h === void 0 ? void 0 : _h.call(_g, (m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
+                pushNotifications({
+                    message: t('notification.suspend.message'),
+                    type: 'danger',
+                });
+                onClose && onClose();
+            }
+            else {
+                pushNotifications({
+                    message: ((_j = res === null || res === void 0 ? void 0 : res.messages) === null || _j === void 0 ? void 0 : _j[0]) || t('notification.failure'),
+                    type: 'danger',
+                });
+            }
+        }
+    });
+    return (React__default["default"].createElement(StyledCreateNewPost$1, { className: `${className} create-post-popup-frame`, style: style },
+        React__default["default"].createElement("div", { className: "input-group-container" },
+            React__default["default"].createElement(StyledFormGroupInner$1, null,
+                React__default["default"].createElement("div", { className: "input-group" },
+                    React__default["default"].createElement(StylePostAction$1, null,
+                        React__default["default"].createElement("div", { className: "avatar" }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) ? (React__default["default"].createElement("img", { alt: "avatar-icon", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, style: {
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                                marginLeft: 'auto',
+                            } })) : (React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, { showDetailPopup: false, avatar: "", avatarProps: { size: 40 }, name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, userId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.userId, className: "author-avatar" }))),
+                        React__default["default"].createElement("div", { className: "post-action-form" },
+                            React__default["default"].createElement("div", { className: "post-action-by" }, (userInfo === null || userInfo === void 0 ? void 0 : userInfo.name) || ''),
+                            React__default["default"].createElement(index$8.Dropdown, { disabled: isInEditMode, options: postActionType, id: "post-action-type", size: "sm", className: "dropdown-post-action", placeholder: t('community.choose'), value: postActionValue, onChange: (option) => {
+                                    setPostActionValue({
+                                        label: option.label,
+                                        value: String(option.value),
+                                    });
+                                }, placeholderIcon: React__default["default"].createElement("div", { className: "post-action-result" }, postActionValue.value === 'public' ? (React__default["default"].createElement("img", { alt: "public-icon", src: IconPublic, style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'contain',
+                                        marginLeft: 'auto',
+                                    } })) : (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'contain',
+                                        marginLeft: 'auto',
+                                    } }))), style: {
+                                    zIndex: 10,
+                                    width: 'calc(100% + 20px)',
+                                } })))),
+                React__default["default"].createElement(CreatePostTitle$1, { className: "input-group", bannedWords: bannedWords, value: titleValue, onChange: setTitleValue }),
+                specialCharErr && (React__default["default"].createElement(StyledError$1, null,
+                    React__default["default"].createElement(other.Info, { isSolid: true, color: miscTheme.theme.colors.red700, size: 14 }),
+                    React__default["default"].createElement(index$2.Text, { size: "p3", as: "span", color: miscTheme.theme.colors.red700 }, t('createPost.popup.specialCharErr')))),
+                React__default["default"].createElement("div", { className: "input-group" },
+                    React__default["default"].createElement(CreatePostDescription$1, { bannedWords: bannedWords, value: descriptionValue, onChange: (v) => {
+                            setDescriptionValue(v);
+                            removeKeyError('description');
+                        }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, onImageFilesChange: setImageFiles, imageFiles: imageFiles, className: `${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''} ${showAskDoctorOptions ? 'has-ask-doctor-option' : ''}`, footerEditor: React__default["default"].createElement(React__default["default"].Fragment, null,
+                            showAskDoctorOptions && (React__default["default"].createElement(StyledIsQuestion$1, { color: "", className: `${error && (error === null || error === void 0 ? void 0 : error.askDoctor) ? 'has-error' : ''} ${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''}` },
+                                React__default["default"].createElement("div", { className: "switch-label" },
+                                    React__default["default"].createElement(other.Ask, { size: isMarryBaby ? 32 : 24, isMarryBaby: isMarryBaby }),
+                                    React__default["default"].createElement("div", { className: "wrapper-text" },
+                                        React__default["default"].createElement("div", { className: "label-txt" }, t('createPost.askDoctor')),
+                                        React__default["default"].createElement("div", { className: "description-txt" }, t('createPost.askDoctor.description')))),
+                                React__default["default"].createElement(index$9.BtnChoice, { value: isAskDoctor, choices: [
+                                        {
+                                            label: t('createPost.askDoctorChoice.yes'),
+                                            value: true,
+                                            dataEventCategory: 'Together',
+                                            dataEventAction: 'Write Post Click - Ask Doctor',
+                                            dataEventLabel: togetherComponentGlobalContext.getCurrentHref(locale, togetherBasePath, asPath),
+                                        },
+                                        {
+                                            label: t('createPost.askDoctorChoice.no'),
+                                            value: false,
+                                        },
+                                    ], onChange: (v) => {
+                                        if (typeof v === 'boolean') {
+                                            setIsAskDoctor(v);
+                                            removeKeyError('askDoctor');
+                                        }
+                                    } }))),
+                            error && (error === null || error === void 0 ? void 0 : error.askDoctor) && (React__default["default"].createElement(StyledError$1, { style: { margin: '4px 0 0' } },
+                                React__default["default"].createElement(index$2.Text, { size: "p5", as: "span", color: miscTheme.theme.colors.red600 }, error.askDoctor))),
+                            error && (error === null || error === void 0 ? void 0 : error.description) && (React__default["default"].createElement(StyledError$1, { style: { margin: '4px 0 0' } },
+                                React__default["default"].createElement(index$2.Text, { size: "p5", as: "span", color: miscTheme.theme.colors.red600 }, error.description)))) })),
+                imageSrcs.length > 0 && (React__default["default"].createElement(PostPhotosReview$1, { imageFiles: imageFiles, error: error, setImageFiles: setImageFiles, removeKeyError: removeKeyError })),
+                socialLinkData && (React__default["default"].createElement(PostVideoReview, { bannedWords: bannedWords, socialLinkData: socialLinkData, onSocialLinkChanged: setSocialLinkData, onInvalidUrlsChange: setInvalidUrls, onChange: (v) => {
+                        setDescriptionValue(v);
+                    } })),
+                React__default["default"].createElement(CreatePostCommunity$1, { communitiesList: communitiesList, currentCommunity: currentCommunity, selectedTopics: selectedTopics, forceTopics: forceSelectTopics, communityValue: communityValue, error: error, isFullscreen: false, isInEditMode: isInEditMode, setSelectedTopics: setSelectedTopics, setCommunityValue: setCommunityValue }),
+                React__default["default"].createElement(CreatePostPhotos$1, { imageFiles: imageFiles, setImageFiles: (data) => {
+                        setImageFiles(data);
+                        validationUploadPhoto(data);
+                    } }),
+                React__default["default"].createElement(CreatePostVideo, { socialLinkData: socialLinkData, setSocialLinkData: setSocialLinkData }))),
+        React__default["default"].createElement("div", { className: "form-action" },
+            React__default["default"].createElement("div", { className: "input-group" },
+                React__default["default"].createElement(index$1.Button, { className: "submit-btn pointer-event-child-none", size: "lg", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, onClick: () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                        if (isReadyToSubmit && !isSubmitting) {
+                            setIsSubmitting(true);
+                            try {
+                                yield submitPost();
+                            }
+                            catch (e) {
+                                console.error(e);
+                                pushNotifications(index$3.getDefaultFailNoti(t));
+                            }
+                            setIsSubmitting(false);
+                        }
+                    }), disabled: !isReadyToSubmit, loading: isSubmitting }, t('createPost.popup.submit'))))));
+};
+
+const StyleContainer$2 = styled__default["default"].div ``;
+const StyleContentWrapper$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .mantine-TopicSelectList-root {
+    padding: 0;
+  }
+
+  .mantine-TopicSelectList-list {
+    gap: 12px;
+  }
+
+  .tag-list {
+    margin: 0;
+  }
+`;
+const StyleWrapperButton$1 = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .other-btn-community {
+    color: ${miscTheme.theme.colors.gray400};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    cursor: pointer;
+  }
+`;
+
+const StyledTopicSelectList$1 = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  gap: 12px;
+
+  .tag-item {
+    min-height: 32px;
+    padding: 5px 12px;
+    border: 1px solid ${miscTheme.theme.colors.neutral100};
+    border-radius: 1rem;
+    color: ${miscTheme.theme.colors.gray800};
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 22px;
+    transition: all 0.2s;
+
+    &.--active {
+      border-color: ${miscTheme.theme.colors.primary50};
+      background: ${miscTheme.theme.colors.primary50};
+      color: ${miscTheme.theme.colors.primaryBase};
+    }
+    &[data-disabled='true'] {
+      background: ${miscTheme.theme.colors.gray100};
+      color: ${miscTheme.theme.colors.gray800};
+    }
+  }
+  .topic-spinner {
+    margin-right: auto;
+    margin-left: auto;
+    & > button {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .tag-item {
+      border-color: transparent;
+      background: #f3f3f3;
+      color: #3e3f58;
+      &.--active {
+        border-color: #b6cdff;
+        background: #e0e9fb;
+        color: #3e3f58;
+      }
+    }
+  }
+`;
+
+const TopicSelectList$1 = ({ className, style, topics: topicsProp, communityId, onChange, isLoading, disabled, forceTopics, selectedTopics: selectedTopicsProp, noFetch, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [topics, setTopics] = React.useState(topicsProp ? [...topicsProp] : []);
+    const [selectedTopics, setSelectedTopics] = React.useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
+    const [isLoadingTopics, setIsLoadingTopics] = React.useState(false);
+    const topicsPropRef = React.useRef(topicsProp);
+    topicsPropRef.current = topicsProp;
+    React.useEffect(() => {
+        var _a;
+        if (communityId && !noFetch && !((_a = topicsPropRef.current) === null || _a === void 0 ? void 0 : _a.length)) {
+            setTopics([]);
+            setIsLoadingTopics(true);
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _b;
+                try {
+                    const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.TOPIC.LIST, {
+                        communityId: communityId,
+                        _locale: locale,
+                    }), 'GET');
+                    const topicRes = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.topics;
+                    if (Array.isArray(topicRes)) {
+                        setTopics(() => (topicRes === null || topicRes === void 0 ? void 0 : topicRes.map(dataTransform.formatTopic).sort((t1, t2) => (t1.order || 0) - (t2.order || 0))) || []);
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                    setIsLoadingTopics(false);
+                }
+                setIsLoadingTopics(false);
+            }))();
+        }
+    }, [communityId, noFetch]);
+    const topicsPropString = topicsProp === null || topicsProp === void 0 ? void 0 : topicsProp.map((t) => t.id).join('-');
+    const topicsStateString = topics === null || topics === void 0 ? void 0 : topics.map((t) => t.id).join('-');
+    const forceTopicsPropString = forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.map((t) => t.id).join('-');
+    React.useEffect(() => {
+        if (topicsProp &&
+            typeof topicsPropString !== 'undefined' &&
+            topicsPropString !== topicsStateString) {
+            setTopics(topicsProp);
+        }
+    }, [topicsProp, topicsPropString, topicsStateString]);
+    const topicsWithoutForced = React.useMemo(() => topics.filter((t) => !(forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.some((ft) => (ft.id && ft.id === t.id) ||
+        (ft.mappedCategoryId &&
+            ft.mappedCategoryId === t.mappedCategoryId)))), [topicsStateString, forceTopicsPropString]);
+    return (React__default["default"].createElement(StyledTopicSelectList$1, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        forceTopics.map((topic) => (React__default["default"].createElement(TopicItem$1, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: true, selected: true, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
+        topicsWithoutForced.map((topic) => (React__default["default"].createElement(TopicItem$1, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: disabled, selected: (selectedTopicsProp || selectedTopics).some((t) => (t.id && t.id === topic.id) ||
+                (t.mappedCategoryId &&
+                    t.mappedCategoryId === topic.mappedCategoryId)), onClick: () => {
+                const _selected = selectedTopicsProp || selectedTopics;
+                const foundIndex = _selected.findIndex((_selected) => (_selected.id && _selected.id === topic.id) ||
+                    (_selected.mappedCategoryId &&
+                        _selected.mappedCategoryId === topic.mappedCategoryId));
+                if (foundIndex !== -1) {
+                    _selected.splice(foundIndex, 1);
+                }
+                else {
+                    _selected.push(topic);
+                }
+                if (onChange && selectedTopicsProp) {
+                    onChange(_selected.slice());
+                }
+                else {
+                    onChange && onChange(_selected.slice());
+                    setSelectedTopics(_selected.slice());
+                }
+            }, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
+        (isLoading || isLoadingTopics) && React__default["default"].createElement(togetherMoleculesCardAuthor.Loading, { className: "topic-spinner" })));
+};
+const TopicItem$1 = (_a) => {
+    var { topic, disabled, selected, onClick } = _a, rest = tslib_es6.__rest(_a, ["topic", "disabled", "selected", "onClick"]);
+    return (React__default["default"].createElement("div", Object.assign({ className: 'tag-item' + (selected ? ' --active' : ''), "data-disabled": disabled, onClick: !disabled ? onClick : undefined }, rest), topic.name));
+};
+
+const StyleContainer$1 = styled__default["default"].div `
+  border-radius: 8px;
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  background: ${miscTheme.theme.colors.white};
+  border: 1px solid ${miscTheme.theme.colors.neutral100};
+  .card-header {
+    padding: 12px 16px;
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    border-bottom: 1px solid ${miscTheme.theme.colors.neutral100};
+    background: ${miscTheme.theme.colors.neutral50};
+    border-radius: 8px 8px 0px 0px;
+  }
+  .card-body {
+    padding: 16px;
+  }
+`;
+
+const CardPostCommunity = ({ title, children }) => {
+    return (React__default["default"].createElement(StyleContainer$1, null,
+        React__default["default"].createElement("div", { className: "card-header" }, title),
+        React__default["default"].createElement("div", { className: "card-body" }, children)));
+};
+
+const CommonCommunity = ({ communitiesList, communityValue, selectedTopics, defaultCommunity, isInEditMode, setCommunityValue, setSelectedTopics, onSubmitPost, }) => {
+    const { t } = index.useTranslations();
+    React.useEffect(() => {
+        if (defaultCommunity && !isInEditMode) {
+            setCommunityValue({
+                label: defaultCommunity.name,
+                value: defaultCommunity.id,
+            });
+        }
+    }, [defaultCommunity, isInEditMode]);
+    return (React__default["default"].createElement(StyleContainer$2, null,
+        React__default["default"].createElement(StyleContentWrapper$1, null,
+            React__default["default"].createElement(CardPostCommunity, { title: t('admin.community') },
+                React__default["default"].createElement(index$8.Dropdown, { options: (communitiesList === null || communitiesList === void 0 ? void 0 : communitiesList.map((c) => ({
+                        label: c.name,
+                        value: c.id || '',
+                    }))) || [], id: "community-picker", disabled: isInEditMode, value: communityValue, placeholder: t('community.choose'), onChange: (option) => {
+                        setCommunityValue({
+                            label: option.label,
+                            value: String(option.value),
+                        });
+                        setSelectedTopics([]);
+                    }, style: {
+                        zIndex: 1,
+                    } })),
+            React__default["default"].createElement(CardPostCommunity, { title: t('tab.topic') }, communityValue.value ? (React__default["default"].createElement(TopicSelectList$1, { className: "tag-list", communityId: Number(communityValue.value), onChange: (topics) => setSelectedTopics(topics), selectedTopics: selectedTopics, forceTopics: [] })) : (React__default["default"].createElement("div", { style: { height: '30px' } }))),
+            React__default["default"].createElement(StyleWrapperButton$1, null,
+                React__default["default"].createElement(index$1.Button, { className: "submit-btn", size: "lg", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, "data-testid": "Button Post", disabled: !communityValue.value, onClick: () => onSubmitPost() }, t('createPost.popup.submit'))))));
+};
+
+styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin-top: 8px;
+
+  .topic-review {
+    display: flex;
+    gap: 4px;
+    flex-wrap: wrap;
+  }
+
+  .community-review {
+    .tag-item {
+      background-color: ${miscTheme.theme.colors.neutral50};
+
+      img {
+        border-radius: 50%;
+        margin-right: 8px;
+      }
+    }
+  }
+`;
+const StyleDrawer = styled__default["default"].div `
+  background-color: white;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+
+  .drawer-header {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+    padding: 12px 16px;
+    border-bottom: 1px solid ${miscTheme.theme.colors.gray200};
+
+    img {
+      cursor: pointer;
+    }
+
+    p {
+      flex: 1;
+    }
+  }
+
+  .drawer-content {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    overflow-y: auto;
+    height: calc(100% - 49px);
+
+    ${utils.MediaQueries.mbDown} {
+      padding: 16px;
+      &.drawer-content-adjust {
+        justify-content: center;
+      }
+    }
+
+    .input-field-label {
+      margin-bottom: 8px;
+    }
+
+    &.drawer-content-full-screen {
+      max-width: 680px;
+      margin: 0 auto;
+      padding: 16px 24px;
+    }
+  }
+`;
+
+const StyleContainer = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+`;
+const StyleSearchWrapper = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+  align-items: center;
+  max-width: 400px;
+  margin: 0 auto;
+  .search-description {
+    text-align: center;
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    background: linear-gradient(92deg, #45a4ff 16.17%, #00c076 98.95%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .result-search-description {
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 24px;
+    text-align: center;
+  }
+`;
+const StyleContentWrapper = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  .tag-item-review {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .tag-item-label {
+      flex: 1;
+      color: ${miscTheme.theme.colors.gray800};
+      font-size: 16px;
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+  .topic-item-review-wrapper {
+    display: flex;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  .topic-item-review {
+    border-radius: 40px;
+    background: ${miscTheme.theme.colors.blue50};
+    padding: 6px 12px;
+  }
+`;
+const StyleWrapperButton = styled__default["default"].div `
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  .other-btn-community {
+    color: ${miscTheme.theme.colors.gray400};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+    cursor: pointer;
+  }
+`;
+
+var img$1 = "data:image/svg+xml,%3csvg width='268' height='268' viewBox='0 0 268 268' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cg filter='url(%23filter0_f_270_203608)'%3e%3ccircle cx='134.175' cy='134.174' r='99.1225' fill='url(%23paint0_linear_270_203608)'/%3e%3c/g%3e%3cpath d='M143.63 122.941C143.884 121.934 145.315 121.934 145.569 122.941L146.243 125.609C147.585 130.925 151.907 134.969 157.301 135.954L158.295 136.136C159.389 136.336 159.389 137.903 158.295 138.103L157.301 138.285C151.907 139.271 147.585 143.314 146.243 148.631L145.569 151.299C145.315 152.306 143.884 152.306 143.63 151.299L142.956 148.631C141.614 143.314 137.292 139.271 131.899 138.285L130.904 138.103C129.81 137.904 129.81 136.336 130.904 136.136L131.899 135.954C137.292 134.969 141.614 130.925 142.956 125.609L143.63 122.941Z' fill='url(%23paint1_linear_270_203608)'/%3e%3cpath d='M134.365 89.0399C134.461 88.2144 135.659 88.2144 135.755 89.04L135.958 90.7817C136.317 93.8718 138.673 96.3541 141.74 96.8746L143.713 97.2094C144.49 97.3413 144.49 98.4578 143.713 98.5897L141.74 98.9246C138.673 99.4451 136.317 101.927 135.958 105.017L135.755 106.759C135.659 107.585 134.461 107.585 134.365 106.759L134.162 105.017C133.803 101.927 131.447 99.4451 128.38 98.9246L126.407 98.5897C125.629 98.4578 125.629 97.3413 126.407 97.2094L128.38 96.8746C131.447 96.3541 133.803 93.8718 134.162 90.7816L134.365 89.0399Z' fill='url(%23paint2_linear_270_203608)'/%3e%3cdefs%3e%3cfilter id='filter0_f_270_203608' x='0.782799' y='0.781822' width='266.784' height='266.785' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3e%3cfeFlood flood-opacity='0' result='BackgroundImageFix'/%3e%3cfeBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3e%3cfeGaussianBlur stdDeviation='17.135' result='effect1_foregroundBlur_270_203608'/%3e%3c/filter%3e%3clinearGradient id='paint0_linear_270_203608' x1='55.5444' y1='48.7129' x2='193.903' y2='233.297' gradientUnits='userSpaceOnUse'%3e%3cstop stop-color='%23A7D2FF'/%3e%3cstop offset='1' stop-color='%2376EE9A' stop-opacity='0'/%3e%3c/linearGradient%3e%3clinearGradient id='paint1_linear_270_203608' x1='144.6' y1='118.518' x2='144.6' y2='155.721' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0.26' stop-color='%2378B0F6'/%3e%3cstop offset='1' stop-color='%2376F197'/%3e%3c/linearGradient%3e%3clinearGradient id='paint2_linear_270_203608' x1='135.06' y1='82.5809' x2='135.06' y2='113.218' gradientUnits='userSpaceOnUse'%3e%3cstop offset='0.26' stop-color='%2378B0F6'/%3e%3cstop offset='1' stop-color='%2376F197'/%3e%3c/linearGradient%3e%3c/defs%3e%3c/svg%3e";
+var IconSuggestSearch = img$1;
+
+const SuggestedCommunity = ({ currentCommunity, selectedTopics, isLoading, clickOtherCommunity, onSubmitPost, }) => {
+    const { t } = index.useTranslations();
+    return (React__default["default"].createElement(StyleContainer, null,
+        isLoading || !currentCommunity ? (React__default["default"].createElement(StyleSearchWrapper, null,
+            React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconSuggestSearch, style: {
+                    width: '212px',
+                    height: '212px',
+                    objectFit: 'contain',
+                } }),
+            isLoading ? (React__default["default"].createElement("div", { className: "search-description" },
+                t('createPost.message.suggestLoading'),
+                "...")) : (React__default["default"].createElement("div", { className: "result-search-description" }, t('createPost.message.suggestResult'))))) : (React__default["default"].createElement(StyleContentWrapper, null,
+            React__default["default"].createElement(CardPostCommunity, { title: t('admin.community') },
+                React__default["default"].createElement(React__default["default"].Fragment, null, currentCommunity && (React__default["default"].createElement("div", { className: "tag-item-review" },
+                    React__default["default"].createElement("img", { alt: "community-thumbnail", src: currentCommunity.thumbnail, style: {
+                            width: '40px',
+                            height: '40px',
+                            objectFit: 'contain',
+                            marginLeft: 'auto',
+                            flex: '0 0 40px',
+                        } }),
+                    React__default["default"].createElement(index$2.Text, { size: "p4", as: "span", color: "inherit", className: "tag-item-label" }, currentCommunity.name))))),
+            selectedTopics.length > 0 && (React__default["default"].createElement(CardPostCommunity, { title: t('tab.topic') },
+                React__default["default"].createElement("div", { className: "topic-item-review-wrapper" }, selectedTopics.map((item, index) => (React__default["default"].createElement("div", { className: "topic-item-review", key: index },
+                    React__default["default"].createElement(index$2.Text, { size: "p4", as: "span", color: "inherit", className: "tag-item-label" }, item.name))))))))),
+        !isLoading && (React__default["default"].createElement(StyleWrapperButton, null,
+            React__default["default"].createElement(index$1.Button, { className: "submit-btn", size: "lg", "data-testid": "Button Post", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, onClick: () => onSubmitPost(!currentCommunity) }, t('createPost.now')),
+            React__default["default"].createElement(index$1.Button, { variant: "ghost", className: "other-btn-community", type: "button", onClick: clickOtherCommunity }, currentCommunity
+                ? t('choose.other.community')
+                : t('choose.community'))))));
+};
+
+const CreatePostCommunity = ({ communitiesList, currentCommunity, selectedTopics, communityValue, isInEditMode, isLoadingSuggest, defaultCommunity, isMarryBaby = false, setSelectedTopics, setCommunityValue, onSubmitPost, setStepPost, }) => {
+    const { t, locale } = index.useTranslations();
+    const [typeSelectionCommunity, setTypeSelectionCommunity] = React.useState('chatbot');
+    const clickOtherCommunity = () => {
+        setTypeSelectionCommunity('manual');
+        setCommunityValue({
+            label: t('community.choose'),
+            value: '',
+        });
+        setSelectedTopics([]);
+    };
+    const onClickBack = () => {
+        setCommunityValue({
+            label: t('community.choose'),
+            value: '',
+        });
+        setSelectedTopics([]);
+        setStepPost === null || setStepPost === void 0 ? void 0 : setStepPost('step_info');
+    };
+    return ReactDOM__namespace.createPortal(React__default["default"].createElement(StyleDrawer, null,
+        React__default["default"].createElement("div", { className: "drawer-header" },
+            React__default["default"].createElement("img", { alt: "public-icon", src: togetherMoleculesPostImagePreview.IconArrowLeft, onClick: onClickBack, style: {
+                    width: '24px',
+                    height: '24px',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } }),
+            React__default["default"].createElement(index$2.Text, { size: "p3", className: "input-group-label", weight: "semiBold" }, t('createPost.communityAndTopic'))),
+        React__default["default"].createElement("div", { className: `drawer-content` }, !isInEditMode &&
+            typeSelectionCommunity === 'chatbot' &&
+            locale === Locale.LOCALE.Vietnam &&
+            !isMarryBaby ? (React__default["default"].createElement(SuggestedCommunity, { selectedTopics: selectedTopics, currentCommunity: currentCommunity, isLoading: isLoadingSuggest, clickOtherCommunity: clickOtherCommunity, onSubmitPost: onSubmitPost })) : (React__default["default"].createElement(CommonCommunity, { communitiesList: communitiesList, communityValue: communityValue, selectedTopics: selectedTopics, isInEditMode: isInEditMode, defaultCommunity: defaultCommunity, setCommunityValue: setCommunityValue, setSelectedTopics: setSelectedTopics, onSubmitPost: onSubmitPost })))), document.querySelector('.create-post-popup-frame') || document.body);
+};
+
+const StyledCreatePostDescription = styled__default["default"].div `
+  input:focus,
+  textarea:focus,
+  [contenteditable='true'] {
+    outline: none;
+  }
+
+  &.has-ask-doctor-option {
+    .textarea-control {
+      border-bottom: none;
+      border-radius: 4px 4px 0 0;
+    }
+  }
+
+  &.error-description {
+    .textarea-control {
+      border: 1px solid ${miscTheme.theme.colors.red600};
+      border-bottom: none;
+    }
+  }
+
+  .textarea-control {
+    position: relative;
+    border: 1px solid ${miscTheme.theme.colors.gray200};
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+    &.--focus {
+      border-color: ${miscTheme.theme.colors.primaryBase};
+      box-shadow: 0px 0px 2px 2px ${miscTheme.theme.colors.primary200};
+    }
+
+    .textarea-wrapper {
+      width: 100%;
+      min-height: 268px;
+      height: auto;
+    }
+
+    .control-tool {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      width: calc(100% - 2rem);
+      height: 40px;
+      align-items: center;
+      justify-content: flex-end;
+      border-top: 1px solid ${miscTheme.theme.colors.gray200};
+      margin: 0 1rem;
+
+      .tool-button {
+        display: flex;
+        width: 2rem;
+        height: 2rem;
+        align-items: center;
+        justify-content: center;
+        background: transparent;
+        cursor: pointer;
+      }
+      .image-icon {
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .link-preview-wrapper {
+    position: relative;
+    .icon-close {
+      position: absolute;
+      top: 5px;
+      right: 5px;
+      width: 24px;
+      height: 24px;
+      cursor: pointer;
+    }
+  }
+
+  .image-gallery {
+    margin-bottom: 1rem;
+
+    .image-item {
+      position: relative;
+      overflow: hidden;
+      width: 100%;
+      height: 0;
+      padding-top: 67%;
+      margin-top: 1rem;
+      border-radius: ${miscTheme.theme.borderRadius};
+
+      & > img {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+
+      .close-btn {
+        position: absolute;
+        top: 8px;
+        right: 8px;
+        left: unset;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+  }
+
+  .description-label {
+    margin-bottom: 5px;
+    color: ${miscTheme.theme.colors.gray600};
+    /* font-family: 'Open Sans', sans-serif; */
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    margin-top: 5px;
+    color: ${miscTheme.theme.colors.gray500};
+    font-size: 11px;
+    text-align: right;
+  }
+
+  .input-notification {
+    display: flex;
+
+    & > img {
+      width: 16px;
+      height: 16px;
+      margin-top: 1.5px;
+      margin-right: 8px;
+    }
+  }
+`;
+const StyledEditorContainer = styled__default["default"].div `
+  height: 100%;
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  .ql-toolbar.ql-snow {
+    top: 0;
+    width: 100%;
+    // position: sticky;
+    z-index: 3;
+    border: none;
+    border-bottom: 1px solid #ccc;
+    border-radius: 8px 8px 0 0;
+    background: white;
+    .ql-formats {
+      display: inline-flex;
+      align-items: center;
+      margin-right: 0.5rem;
+      .link-tool-wrapper {
+        .popover-menu__content {
+          padding: 0.5rem;
+          transform: translateX(calc(-50% - 1rem));
+          max-width: calc(100vw - 4rem);
+          ::before {
+            right: calc(50% - 8px);
+          }
+          .link-tool-popover {
+            input {
+              padding-left: 1rem;
+            }
+            .link-input-url {
+              margin-bottom: 0.5rem;
+            }
+            .link-input-text {
+              margin-bottom: 0.5rem;
+            }
+            label {
+              display: inline-block;
+              margin-bottom: 0.2rem;
+            }
+            .link-input-button-wrapper {
+              &[data-is-marrybaby='true'] {
+                .link-input-button {
+                  border: solid 2px ${miscTheme.theme.mbColors.pink};
+                  background-color: ${miscTheme.theme.mbColors.pink};
+                  &:hover:not(:disabled) {
+                    border: solid 2px ${miscTheme.theme.mbColors.pink};
+                    background-color: ${miscTheme.theme.colors.white};
+                    color: ${miscTheme.theme.mbColors.pink};
+                  }
+                }
+              }
+            }
+            .link-input-button {
+              width: auto;
+              height: auto;
+              padding: 0.4rem 1rem;
+              background-color: ${miscTheme.theme.colors.primaryBase};
+
+              &:disabled {
+                border-color: #bfbfbf;
+                background-color: #bfbfbf;
+                color: #fff;
+                cursor: not-allowed;
+              }
+              &:hover:not(:disabled) {
+                background-color: ${miscTheme.theme.colors.primaryHover};
+              }
+            }
+            .error-text {
+              padding: 0;
+              margin-bottom: 0.5rem;
+              font-weight: 600;
+              color: ${miscTheme.theme.colors.red700};
+            }
+          }
+        }
+      }
+    }
+    @media (max-width: 450px) {
+      position: relative;
+      .ql-formats {
+        .link-tool-wrapper {
+          position: unset;
+          .popover-menu__content {
+            left: 0;
+            transform: unset;
+            max-width: 100%;
+          }
+        }
+      }
+    }
+  }
+  .quill {
+    flex: 1;
+    overflow-y: hidden;
+    .ql-container {
+      display: inline-block;
+      width: 100%;
+      min-height: 100%;
+      /* padding: 14px 16px; */
+      border: none;
+      border-radius: ${miscTheme.theme.borderRadius};
+      color: ${miscTheme.theme.colors.gray800};
+      font-size: 1rem;
+      line-height: 1.5;
+      resize: none;
+      white-space: break-spaces;
+      .ql-editor {
+        word-break: break-word;
+        overflow-wrap: break-word;
+        /* -ms-overflow-style: none;
+        scrollbar-width: none;
+        &::-webkit-scrollbar {
+          display: none;
+        } */
+
+        &::before {
+          font-size: 16px;
+          color: ${miscTheme.theme.colors.gray400};
+          font-weight: 400;
+          line-height: 24px;
+          font-style: normal;
+        }
+      }
+      mocka {
+        padding: 2px 6px;
+        border-radius: 1rem;
+        &[data-url='true'] {
+          /* background-color: #eeeeff; */
+          font-style: italic;
+          color: #1890ff;
+          cursor: pointer;
+          outline: none;
+          text-decoration: underline;
+        }
+        &[data-error='true'] {
+          background-color: #ffeeee;
+          color: red;
+          text-decoration: underline;
+          font-style: bold;
+        }
+      }
+      mention {
+        padding: 2px 6px;
+        border-radius: 1rem;
+        background-color: #eeeeff;
+        color: #1890ff;
+        cursor: pointer;
+        outline: none;
+        text-decoration: none;
+      }
+      ol,
+      ul {
+        padding-left: 1rem;
+      }
+    }
+  }
+  .mention-search-container {
+    position: absolute;
+    background: white;
+    border-radius: ${miscTheme.theme.borderRadius};
+    filter: drop-shadow(0px 10px 16px rgba(0, 0, 0, 0.04))
+      drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.04))
+      drop-shadow(0px 0px 1px rgba(0, 0, 0, 0.04));
+    overflow-y: scroll;
+    z-index: 99;
+    ::-webkit-scrollbar {
+      -webkit-appearance: none;
+    }
+    ::-webkit-scrollbar:vertical {
+      width: 14px;
+    }
+    ::-webkit-scrollbar-thumb {
+      border-radius: ${miscTheme.theme.borderRadius};
+      background-color: #d9d9d9;
+      @supports (background-clip: padding-box) {
+        border: 3px solid rgba(0, 0, 0, 0);
+        background-clip: padding-box;
+      }
+      @supports not (background-clip: padding-box) {
+        border: 3px solid white;
+      }
+    }
+    ::-webkit-scrollbar-track {
+      background-color: #fff;
+      border-radius: 0 6px 6px 0;
+      border-left: 1px solid #f2f2f2;
+    }
+    .mention-search-item {
+      cursor: pointer;
+      padding: 12px 1rem;
+      display: flex;
+      align-items: center;
+      &.item-selected {
+        background-color: ${miscTheme.theme.colors.gray100};
+      }
+      .search-avatar {
+        width: 40px;
+        height: 40px;
+        font-size: 20px;
+        margin-right: 20px;
+      }
+    }
+  }
+`;
+
+let ReactQuill = null;
+(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+    if (typeof window === 'undefined')
+        return;
+    const QuillRes = yield Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require('react-quill')); });
+    ReactQuill = QuillRes.default;
+    const Quill = QuillRes.Quill || ReactQuill.Quill;
+    class PreserveWhiteSpace {
+        constructor(quill, options) {
+            this.quill = quill;
+            this.options = options;
+            quill.container.style.whiteSpace = 'pre-line';
+        }
+    }
+    Quill.register('modules/preserveWhiteSpace', PreserveWhiteSpace);
+    const Inline = Quill.import('blots/inline');
+    class MockABlot extends Inline {
+        static create(options) {
+            if (!options)
+                return super.create(false);
+            const node = super.create(options);
+            MockABlot.setNodeConfigurations(node, options);
+            return node;
+        }
+        static formats(node) {
+            if (node.innerText &&
+                (node.getAttribute('data-href') ||
+                    node.getAttribute('data-url') ||
+                    node.getAttribute('data-error') ||
+                    node.getAttribute('data-bad-word'))) {
+                return {
+                    'data-bad-word': node.getAttribute('data-bad-word'),
+                    'data-error': node.getAttribute('data-error'),
+                    'data-href': node.getAttribute('data-href'),
+                    'data-url': node.getAttribute('data-url'),
+                    'data-text': node.innerText || node.getAttribute('data-href'),
+                };
+            }
+            else {
+                return false;
+            }
+        }
+        /* To prevent the node from accidentally being built in different ways. */
+        static setNodeConfigurations(node, value) {
+            var _a, _b;
+            if (!value)
+                return;
+            if (!((_b = (_a = value === null || value === void 0 ? void 0 : value['data-text']) === null || _a === void 0 ? void 0 : _a.replace(/(\&nbsp;)+/g, ' ')) === null || _b === void 0 ? void 0 : _b.replace(/(\u200c|&zwnj;)+/g, '')))
+                return;
+            if (value['data-bad-word'])
+                node.setAttribute('data-bad-word', value['data-bad-word']);
+            if (value['data-href'])
+                node.setAttribute('data-href', value['data-href']);
+            if (value['data-error'])
+                node.setAttribute('data-error', value['data-error']);
+            // setTimeout(() => {
+            //   if (value['data-text'] !== node.innerText && !node.innerText)
+            //     node.innerHTML = value['data-text']
+            // }, 200)
+            if (value['data-url'])
+                node.setAttribute('data-url', value['data-url']);
+            // if (value['data-text']) node.innerText = value['data-text']
+            // console.log(value, node.outerHTML, node)
+        }
+    }
+    MockABlot.blotName = 'mocka1';
+    MockABlot.tagName = 'mocka';
+    Quill.register(MockABlot);
+    class MentionBlot extends Inline {
+        static create(options) {
+            if (!options)
+                return super.create(false);
+            const node = super.create(options);
+            MentionBlot.setNodeConfigurations(node, options);
+            return node;
+        }
+        static formats(node) {
+            if (node.getAttribute('data-name') && node.getAttribute('data-id')) {
+                return {
+                    'data-name': node.getAttribute('data-name'),
+                    'data-id': node.getAttribute('data-id'),
+                };
+            }
+            else {
+                return false;
+            }
+        }
+        /* To prevent the node from accidentally being built in different ways. */
+        static setNodeConfigurations(node, value) {
+            var _a, _b;
+            if (!value)
+                return;
+            if (!value['data-id'] ||
+                !((_b = (_a = value === null || value === void 0 ? void 0 : value['data-name']) === null || _a === void 0 ? void 0 : _a.replace(/(\&nbsp;)+/g, ' ')) === null || _b === void 0 ? void 0 : _b.replace(/(\u200c|&zwnj;)+/g, '')))
+                return;
+            if (value['data-id'])
+                node.setAttribute('data-id', value['data-id']);
+            if (value['data-name']) {
+                // node.setAttribute('contenteditable', false)
+                node.setAttribute('data-name', value['data-name']);
+            }
+        }
+    }
+    MentionBlot.blotName = 'mention';
+    MentionBlot.tagName = 'mention';
+    Quill.register(MentionBlot);
+}))();
+function getCaretCharacterOffsetWithin(element) {
+    var _a, _b;
+    let caretOffset = -1;
+    if (typeof window.getSelection != 'undefined') {
+        const sel = window.getSelection();
+        if ((sel === null || sel === void 0 ? void 0 : sel.rangeCount) && (sel === null || sel === void 0 ? void 0 : sel.rangeCount) > 0) {
+            const range = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+            if (range) {
+                const preCaretRange = range.cloneRange();
+                // preCaretRange.setStart(element, 0)
+                preCaretRange.selectNodeContents(element);
+                preCaretRange.setEnd(range.endContainer, range.endOffset);
+                caretOffset = calculateChildNodeOffset(preCaretRange.cloneContents().childNodes, caretOffset);
+                const parentMockAElement = (_b = range.endContainer.parentElement) === null || _b === void 0 ? void 0 : _b.closest('mocka');
+                const lastNodeValue = range.endContainer.nodeValue ||
+                    range.endContainer.outerHTML;
+                if (parentMockAElement && (lastNodeValue === null || lastNodeValue === void 0 ? void 0 : lastNodeValue.length)) {
+                    /// set selector to end of <mocka elemt, prevent select in the middle
+                    caretOffset =
+                        caretOffset -
+                            range.endOffset +
+                            (parentMockAElement.outerHTML.length -
+                                (parentMockAElement === null || parentMockAElement === void 0 ? void 0 : parentMockAElement.outerHTML.lastIndexOf(lastNodeValue)));
+                }
+            }
+        }
+    }
+    return caretOffset;
+}
+function calculateChildNodeOffset(childNodes, caretOffset) {
+    childNodes.forEach((node, index) => {
+        const isLast = index + 1 === childNodes.length;
+        if (node.nodeType === Node.ELEMENT_NODE) {
+            const outerHTML = node.outerHTML;
+            if (!isLast) {
+                caretOffset += outerHTML.length;
+                return;
+            }
+            else {
+                caretOffset += outerHTML.indexOf('>') + 1;
+                caretOffset = calculateChildNodeOffset(node.childNodes, caretOffset);
+            }
+        }
+        else if (node.nodeType === Node.TEXT_NODE) {
+            caretOffset += (node.nodeValue || '')
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;')
+                .replace(/"/g, '&quot;')
+                .replace(/'/g, '&#039;').length;
+        }
+    });
+    return caretOffset;
+}
+function getSearchName(root) {
+    var _a, _b;
+    let res = null;
+    if (typeof window.getSelection != 'undefined') {
+        const sel = window.getSelection();
+        if ((sel === null || sel === void 0 ? void 0 : sel.rangeCount) && (sel === null || sel === void 0 ? void 0 : sel.rangeCount) > 0) {
+            const range = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.getRangeAt(0);
+            if (range) {
+                const preCaretRange = range.cloneRange();
+                // preCaretRange.setStart(element, 0)
+                preCaretRange.selectNodeContents(root);
+                preCaretRange.setEnd(range.endContainer, range.endOffset);
+                const endText = (preCaretRange.endContainer.nodeValue || '').substring(0, range.endOffset);
+                // only allow @ at start of text or has space before it
+                const lastAnchorSymbolIndex = endText.lastIndexOf('@');
+                if (lastAnchorSymbolIndex + 1 < endText.length &&
+                    (lastAnchorSymbolIndex === 0 ||
+                        endText.slice(lastAnchorSymbolIndex - 1, lastAnchorSymbolIndex + 1) === ' @')) {
+                    const name = (_b = endText.slice(lastAnchorSymbolIndex + 1)) === null || _b === void 0 ? void 0 : _b.trim();
+                    if (name) {
+                        preCaretRange.setStart(range.endContainer, lastAnchorSymbolIndex);
+                        const replaceRange = preCaretRange.cloneRange();
+                        replaceRange.setStart(replaceRange.endContainer, lastAnchorSymbolIndex);
+                        res = {
+                            name,
+                            rect: preCaretRange.getBoundingClientRect(),
+                            replaceRange,
+                        };
+                    }
+                }
+            }
+        }
+    }
+    return res;
+}
+const inputModify$1 = (value, opts) => {
+    var _a;
+    const { formatUrl, bannedWords = [] } = opts || {};
+    const removedFormat = post.fixMalformedMention(post.removeFontFormat(value));
+    if (!formatUrl)
+        return {
+            value: post.highlightBadWords(removedFormat, bannedWords),
+        };
+    let descriptionWithWrappedAnchor = post.removeEdittedBannedWord(post.wrapAnchorAroundUrls(removedFormat));
+    const urls = post.getUrlsFromEditorString(removedFormat);
+    if (urls) {
+        const invalidUrls = [];
+        let previewUrl = '';
+        urls.forEach((url) => {
+            if (!url)
+                return;
+            try {
+                const jsUrl = new URL(url);
+                if (post.ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith(o))) {
+                    // is valid
+                }
+                else {
+                    invalidUrls.push(url);
+                    // is not valid
+                }
+            }
+            catch (_a) {
+                invalidUrls.push(url);
+            }
+        });
+        if (invalidUrls.length > 0) {
+            descriptionWithWrappedAnchor = descriptionWithWrappedAnchor
+                .replace(new RegExp(`data-url="true">(${invalidUrls.map(post.escapeRegExp).join('|')})<`, 'gi'), 'data-error="true" data-url="true">$1<')
+                .replace(new RegExp(`data-href="(${invalidUrls
+                .map(post.escapeRegExp)
+                .join('|')})" data-url="true">`, 'gi'), 'data-href="$1" data-error="true" data-url="true">');
+        }
+        previewUrl = (_a = urls.filter((u) => invalidUrls.indexOf(u) === -1)) === null || _a === void 0 ? void 0 : _a[0];
+        return {
+            invalidUrls,
+            previewUrl,
+            value: post.highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+        };
+    }
+    return {
+        value: post.highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+    };
+};
+const RichTextEditor = ({ html, onChange, className, style, placeholder, onImagePickerClick, bannedWords = [], onInvalidUrlsChange, onPreviewUrlChange, setEditorRef, isReplying, }) => {
+    var _a, _b, _c, _d;
+    const bannedWordsRef = React.useRef([]);
+    bannedWordsRef.current = bannedWords;
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const { data: { locale }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || '';
+    React.useEffect(() => {
+        var _a, _b;
+        const currHTML = (_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root.innerHTML;
+        debounceInputModify(currHTML);
+    }, [bannedString]);
+    const fetchPreviewData = (url) => {
+        if (!previewUrl || previewUrl.url !== url) {
+            setPreviewUrl({
+                url,
+                isFetching: true,
+            });
+            togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.FETCH_PREVIEW, {
+                _locale: locale,
+            }), 'POST', {
+                data: {
+                    link: url,
+                },
+            })
+                .then((res) => {
+                var _a, _b, _c, _d;
+                setPreviewUrl({
+                    title: (_a = res === null || res === void 0 ? void 0 : res.data) === null || _a === void 0 ? void 0 : _a.title,
+                    description: (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.description,
+                    image: ((_c = res === null || res === void 0 ? void 0 : res.data) === null || _c === void 0 ? void 0 : _c.image) || ((_d = res === null || res === void 0 ? void 0 : res.data) === null || _d === void 0 ? void 0 : _d.logo),
+                    url,
+                });
+            })
+                .catch(() => {
+                setPreviewUrl(null);
+            });
+        }
+    };
+    const fetchPreviewDataRef = React.useRef(fetchPreviewData);
+    fetchPreviewDataRef.current = fetchPreviewData;
+    const debounceInputModify = React.useCallback(debounce__default["default"]((v) => {
+        if (v) {
+            const processedInput = inputModify$1(v, {
+                bannedWords: bannedWordsRef.current,
+                formatUrl: true,
+            });
+            const { invalidUrls: _invalidUrls, previewUrl: _previewUrl, value, } = processedInput;
+            if (_invalidUrls) {
+                setInvalidUrls(_invalidUrls);
+            }
+            if (_previewUrl) {
+                fetchPreviewDataRef.current(_previewUrl);
+            }
+            else
+                setPreviewUrl(null);
+            if (value !== v) {
+                onChange === null || onChange === void 0 ? void 0 : onChange(value);
+            }
+        }
+    }, 500), []);
+    React.useEffect(() => {
+        onInvalidUrlsChange && onInvalidUrlsChange(invalidUrls);
+    }, [invalidUrls]);
+    React.useEffect(() => {
+        if (onPreviewUrlChange) {
+            if (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url)
+                onPreviewUrlChange({
+                    title: previewUrl.title || '',
+                    url: previewUrl.url || '',
+                    image: previewUrl.image || '',
+                    description: previewUrl.description || '',
+                });
+            else
+                onPreviewUrlChange(null);
+        }
+    }, [previewUrl]);
+    const imageHandlerRef = React.useRef(onImagePickerClick);
+    imageHandlerRef.current = onImagePickerClick;
+    const toolbarId = useUniqueId.useUniqueId();
+    const cachedModules = React.useRef({
+        toolbar: {
+            handlers: {
+                image: () => { var _a; return (_a = imageHandlerRef.current) === null || _a === void 0 ? void 0 : _a.call(imageHandlerRef); },
+                link: () => false,
+            },
+            container: '#toolbar-' + toolbarId,
+        },
+        // toolbar: [
+        //   ['bold', 'italic', 'underline'],
+        //   [{ list: 'ordered' }, { list: 'bullet' }],
+        // ],
+        preserveWhiteSpace: true,
+    });
+    const contentEditableCaretPos = React.useRef(-1);
+    const reactQuillRef = React.useRef(null);
+    setEditorRef &&
+        ((_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root) &&
+        setEditorRef((_d = (_c = reactQuillRef.current) === null || _c === void 0 ? void 0 : _c.getEditor()) === null || _d === void 0 ? void 0 : _d.root);
+    const handleSelectionChange = () => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        if ((_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root) {
+            const newCaretPos = getCaretCharacterOffsetWithin((_d = (_c = reactQuillRef.current) === null || _c === void 0 ? void 0 : _c.getEditor()) === null || _d === void 0 ? void 0 : _d.root);
+            const currHTML = (_f = (_e = reactQuillRef.current) === null || _e === void 0 ? void 0 : _e.getEditor()) === null || _f === void 0 ? void 0 : _f.root.innerHTML;
+            // in case of clicking on a div outside editor while focus, we get caret position too large
+            if (newCaretPos >= 0 && newCaretPos < currHTML.length) {
+                const mentionIds = post.getMentionIdsFromString(currHTML, true);
+                if (mentionIds.length < post.LIMIT_MENTION - (isReplying ? 1 : 0)) {
+                    const searchData = getSearchName((_h = (_g = reactQuillRef.current) === null || _g === void 0 ? void 0 : _g.getEditor()) === null || _h === void 0 ? void 0 : _h.root);
+                    if (searchData) {
+                        searchUser(searchData.name, searchData.rect);
+                        replaceRangeRef.current = searchData.replaceRange;
+                    }
+                    else {
+                        replaceRangeRef.current = null;
+                        // to avoid race condition, we reuse this function to clear foundUsers
+                        searchUser('', null);
+                    }
+                }
+                else {
+                    replaceRangeRef.current = null;
+                    // to avoid race condition, we reuse this function to clear foundUsers
+                    searchUser('', null);
+                }
+                // const insertIndex = newCaretPos + 1
+                // const currHTML = reactQuillRef.current?.getEditor()?.root.innerHTML
+                // console.log(
+                //   currHTML?.substring(0, insertIndex) || '',
+                //   '========',
+                //   currHTML?.substring(insertIndex) || '',
+                // )
+                contentEditableCaretPos.current = newCaretPos;
+            }
+        }
+        else {
+            setFoundUsers([]);
+        }
+    };
+    const [foundUsers, setFoundUsers] = React.useState([]);
+    const [searchUserPosition, setSearchUserPosition] = React.useState({
+        top: 0,
+        left: 0,
+    });
+    const searchUser = React.useCallback(debounce__default["default"]((name, rect, excludeIds) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _e, _f, _g, _h;
+        if (!name || !DOMRect) {
+            return setFoundUsers([]);
+        }
+        const res = yield ((((_e = miscCookieHelper.getCookie(constants.BEARER_TOKEN_COOKIE)) === null || _e === void 0 ? void 0 : _e.length) || 0) > 0
+            ? togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.SEARCH_USER, {
+                _locale: locale,
+                name: name,
+            }), 'get')
+            : togetherComponentGlobalContext.callApiWithAdminAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.ADMIN_PATHS.SEARCH_USER, {
+                _locale: locale,
+                name: name,
+            }), 'get'));
+        setSelectTagUserIndex(0);
+        setFoundUsers((_g = (_f = res === null || res === void 0 ? void 0 : res.data) === null || _f === void 0 ? void 0 : _f.users) === null || _g === void 0 ? void 0 : _g.filter((u) => !(excludeIds === null || excludeIds === void 0 ? void 0 : excludeIds.includes(String(u.id)))));
+        const textNodeRect = rect;
+        const containerRect = (_h = containerRef.current) === null || _h === void 0 ? void 0 : _h.getBoundingClientRect();
+        if (textNodeRect && containerRect) {
+            const idealWidth = 343;
+            const idealHeight = 256;
+            const styleConfig = {
+                top: textNodeRect.bottom - containerRect.top,
+                width: `min(343px, 100%)`,
+                maxHeight: idealHeight,
+            };
+            const tempRightWidth = containerRect.width - (textNodeRect.left - containerRect.left);
+            if (tempRightWidth < idealWidth) {
+                styleConfig.right = 0;
+            }
+            else {
+                styleConfig.left = textNodeRect.left - containerRect.left;
+            }
+            setSearchUserPosition(styleConfig);
+        }
+    }), 500), []);
+    const setSelectUser = (id, name) => {
+        var _a, _b, _c;
+        if (replaceRangeRef.current) {
+            replaceRangeRef.current.deleteContents();
+            const newMention = document.createElement('mention');
+            newMention.setAttribute('data-id', id);
+            newMention.setAttribute('data-name', name);
+            // newMention.setAttribute('contenteditable', 'false')
+            newMention.innerText = name;
+            const newPostText = document.createTextNode(' ');
+            replaceRangeRef.current.insertNode(newPostText);
+            replaceRangeRef.current.insertNode(newMention);
+            const editorRoot = (_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root;
+            editorRoot.focus();
+            const range = (_c = window.getSelection()) === null || _c === void 0 ? void 0 : _c.getRangeAt(0);
+            range === null || range === void 0 ? void 0 : range.setStart(replaceRangeRef.current.endContainer, replaceRangeRef.current.endOffset);
+            range === null || range === void 0 ? void 0 : range.setEnd(replaceRangeRef.current.endContainer, replaceRangeRef.current.endOffset);
+        }
+        setFoundUsers([]);
+    };
+    const containerRef = React.useRef(null);
+    const replaceRangeRef = React.useRef(null);
+    const foundUsersListRef = React.useRef(null);
+    const [selectTagUserIndex, setSelectTagUserIndex] = React.useState(0);
+    React.useEffect(() => {
+        // convenient behavior, scroll item into view when select using keyboard
+        if (foundUsersListRef.current) {
+            const parentElement = foundUsersListRef.current;
+            const childElement = parentElement.children.item(selectTagUserIndex);
+            if (childElement) {
+                const containerRect = parentElement.getBoundingClientRect();
+                const childRect = childElement.getBoundingClientRect();
+                if (childElement.offsetTop < parentElement.scrollTop)
+                    parentElement.scrollTop = childElement.offsetTop;
+                else if (childElement.offsetTop + childRect.height >
+                    parentElement.scrollTop + containerRect.height) {
+                    parentElement.scrollTop =
+                        childElement.offsetTop - containerRect.height + childRect.height;
+                }
+            }
+        }
+    }, [selectTagUserIndex]);
+    React.useEffect(() => {
+        const clickHandler = function (e) {
+            var _a;
+            if (!((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target))) {
+                // Clicked outside the box
+                setFoundUsers([]);
+            }
+        };
+        window.addEventListener('click', clickHandler, {
+            passive: true,
+        });
+        return () => {
+            window.removeEventListener('click', clickHandler);
+        };
+    }, []);
+    React.useEffect(() => {
+        var _a, _b;
+        if (placeholder && reactQuillRef) {
+            const elmInput = (_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root;
+            if (elmInput) {
+                elmInput.setAttribute('data-placeholder', placeholder);
+            }
+        }
+    }, [placeholder]);
+    return (React__default["default"].createElement(StyledEditorContainer, { ref: containerRef, className: className, style: style, onKeyDownCapture: (e) => {
+            // convenient behavior, use arrow to select tag user and enter to choose
+            if (foundUsers === null || foundUsers === void 0 ? void 0 : foundUsers.length) {
+                let preventKey = false;
+                if (e.key === 'ArrowDown') {
+                    preventKey = true;
+                    setSelectTagUserIndex((s) => s + 1 >= foundUsers.length ? 0 : s + 1);
+                }
+                else if (e.key === 'Escape') {
+                    preventKey = true;
+                    setSelectTagUserIndex(0);
+                    setFoundUsers([]);
+                }
+                else if (e.key === 'ArrowUp') {
+                    preventKey = true;
+                    setSelectTagUserIndex((s) => s - 1 < 0 ? foundUsers.length - 1 : s - 1);
+                }
+                else if (e.key === 'Enter' || e.key === 'Tab') {
+                    const user = foundUsers[selectTagUserIndex];
+                    if (user) {
+                        preventKey = true;
+                        setSelectUser(user.id, user.name);
+                    }
+                }
+                if (preventKey) {
+                    e.preventDefault();
+                    return false;
+                }
+            }
+        } },
+        React__default["default"].createElement(CustomToolbar, { id: toolbarId, onAddLink: (text, href) => {
+                var _a, _b;
+                const insertIndex = contentEditableCaretPos.current + 1;
+                const currHTML = (_b = (_a = reactQuillRef.current) === null || _a === void 0 ? void 0 : _a.getEditor()) === null || _b === void 0 ? void 0 : _b.root.innerHTML;
+                const newHTML = ((currHTML === null || currHTML === void 0 ? void 0 : currHTML.substring(0, insertIndex)) || '') +
+                    `<mocka data-href="${href}" data-url="true">${text}</mocka> ` +
+                    ((currHTML === null || currHTML === void 0 ? void 0 : currHTML.substring(insertIndex)) || '');
+                onChange === null || onChange === void 0 ? void 0 : onChange(newHTML);
+                debounceInputModify(newHTML);
+            } }),
+        ReactQuill && (React__default["default"].createElement(ReactQuill, { ref: reactQuillRef, theme: "snow", value: html, placeholder: placeholder, onChange: (t) => {
+                onChange === null || onChange === void 0 ? void 0 : onChange(t);
+                debounceInputModify(t);
+                handleSelectionChange();
+            }, onChangeSelection: () => {
+                handleSelectionChange();
+            }, modules: cachedModules.current, formats: [
+                'mocka1',
+                'mention',
+                'id',
+                'key',
+                'bold',
+                'italic',
+                'underline',
+                'list',
+                'bullet',
+            ] })),
+        !!(foundUsers === null || foundUsers === void 0 ? void 0 : foundUsers.length) && (React__default["default"].createElement("div", { ref: foundUsersListRef, className: "mention-search-container", style: searchUserPosition }, foundUsers.map((foundUser, index) => (React__default["default"].createElement("div", { className: `mention-search-item ${selectTagUserIndex === index ? 'item-selected' : ''}`, key: foundUser.id, onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                setSelectUser(foundUser.id, foundUser.name);
+            }, onMouseEnter: () => {
+                setSelectTagUserIndex(index);
+            } },
+            React__default["default"].createElement(index$a.UserAvatar, { className: "search-avatar", username: foundUser.name, avatar: foundUser.avatar }),
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement(index$2.Text, { size: "p2" }, foundUser.name),
+                React__default["default"].createElement(index$2.Text, { size: "p4", color: "#595959" },
+                    "@",
+                    foundUser.username)))))))));
+};
+const CustomToolbar = ({ onAddLink, id, }) => {
+    return (React__default["default"].createElement("div", { id: 'toolbar-' + id, onClick: (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+        } },
+        React__default["default"].createElement("span", { className: "ql-formats" },
+            React__default["default"].createElement("button", { className: "ql-bold", type: "button" }),
+            React__default["default"].createElement("button", { className: "ql-italic", type: "button" }),
+            React__default["default"].createElement("button", { className: "ql-underline", type: "button" })),
+        React__default["default"].createElement("span", { className: "ql-formats" },
+            React__default["default"].createElement("button", { className: "ql-list", value: "ordered", type: "button" }),
+            React__default["default"].createElement("button", { className: "ql-list", value: "bullet", type: "button" })),
+        React__default["default"].createElement("span", { className: "ql-formats" }, onAddLink && (React__default["default"].createElement(index$b.PopoverMenu, { className: "link-tool-wrapper", toggleButtonContent: React__default["default"].createElement("img", { className: "link-icon", src: togetherRichTextEditor.IconLink, loading: "lazy" }), buttonProps: {
+                size: 'md',
+                color: 'transparent',
+            }, align: "end" }, ({ setShow }) => (React__default["default"].createElement(LinkToolInputPopover, { onAddUrl: onAddLink, setShow: setShow })))))));
+};
+const URL_WARN_MAP = [
+    'notification.limitUrlDomain',
+    'notification.urlWrongFormat',
+];
+const LinkToolInputPopover = ({ onAddUrl, setShow }) => {
+    const { data: { env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = index.useTranslations();
+    const [urlValue, setUrlValue] = React.useState('');
+    const [textValue, setTextValue] = React.useState('');
+    const [urlWarnType, setUrlWarnType] = React.useState(-1);
+    const checkUrlValid = (v) => {
+        const trimmedUrl = post.reformatUrl(v.trim());
+        try {
+            const jsUrl = new URL(trimmedUrl);
+            if (!jsUrl.protocol.startsWith('http')) {
+                setUrlWarnType(1);
+                return false;
+            }
+            if (!post.ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith('/' + o) || jsUrl.origin.endsWith('.' + o))) {
+                setUrlWarnType(0);
+                return false;
+            }
+            setUrlWarnType(-1);
+            return true;
+        }
+        catch (_a) {
+            setUrlWarnType(1);
+            return false;
+        }
+    };
+    const isValid = urlValue.trim() && textValue.trim() && urlWarnType < 0;
+    return (React__default["default"].createElement("div", { className: "link-tool-popover" },
+        React__default["default"].createElement(index$4.Input, { name: "url", value: urlValue, size: "md", label: "URL", placeholder: t('placeholder.enterUrlHere'), type: "text", className: "link-input-url", onChange: (v) => {
+                setUrlValue(v);
+                checkUrlValid(v);
+            } }),
+        urlWarnType >= 0 && (React__default["default"].createElement(index$2.Text, { size: "c2", className: "error-text" }, t(URL_WARN_MAP[urlWarnType]))),
+        React__default["default"].createElement(index$4.Input, { name: "text", value: textValue, size: "md", label: t('createPost.urlText'), placeholder: t('placeholder.enterUrlTextHere'), type: "text", className: "link-input-text", onChange: (v) => setTextValue(v) }),
+        React__default["default"].createElement("div", { "data-is-marrybaby": isMarryBaby, className: "link-input-button-wrapper" },
+            React__default["default"].createElement(index$c.Button, { theme: isMarryBaby ? 'marryBaby' : 'helloSites', size: "sm", color: "primary", className: "link-input-button", onClick: () => {
+                    if (!isValid)
+                        return;
+                    onAddUrl(textValue.trim(), post.reformatUrl(urlValue.trim()));
+                    setShow && setShow(false);
+                }, isDisabled: !isValid }, t('insert')))));
+};
+
+const StyledCreatePostTitle = styled__default["default"].div `
+  input:focus,
+  textarea:focus,
+  [contenteditable='true'] {
+    outline: none;
+  }
+
+  input {
+    &::placeholder {
+      font-size: 16px;
+      color: ${miscTheme.theme.colors.gray400};
+      font-weight: 400;
+      line-height: 24px;
+    }
+  }
+
+  .title-input {
+    overflow: hidden;
+    width: 100%;
+    padding: 12px 16px;
+    border: solid 1px #d9d9d9;
+    border-radius: ${miscTheme.theme.borderRadius};
+    font-size: 16px;
+    line-height: 1.2;
+    white-space: nowrap;
+    :focus {
+      border-color: ${(props) => props.color};
+      box-shadow: 0px 0px 2px 2px ${(props) => props.colorShadow};
+    }
+    br {
+      display: none;
+    }
+    * {
+      display: inline;
+      white-space: nowrap;
+    }
+    mocka {
+      padding: 2px 6px;
+      border-radius: 1rem;
+      &[data-error='true'] {
+        background-color: #ffeeee;
+        color: red;
+        text-decoration: underline;
+        font-style: bold;
+      }
+    }
+    ol,
+    ul {
+      padding-left: 1rem;
+    }
+  }
+
+  label {
+    display: block;
+    margin-bottom: 5px;
+    color: ${miscTheme.theme.colors.gray600};
+    font-size: 13px;
+    font-weight: bold;
+  }
+
+  .count-string {
+    color: ${miscTheme.theme.colors.gray400};
+    font-size: 14px;
+    text-align: right;
+    font-weight: 400;
+    line-height: 22px;
+    letter-spacing: -0.2px;
+    text-transform: lowercase;
+  }
+
+  .has-input-error {
+    input {
+      border: 1px solid ${miscTheme.theme.colors.red600};
+    }
+  }
+`;
+const StyleWrapperTitle = styled__default["default"].div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 2px;
+
+  .field-label {
+    color: ${miscTheme.theme.colors.gray600};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+  }
+`;
+
+var ErrorFieldKey;
+(function (ErrorFieldKey) {
+    ErrorFieldKey["title"] = "create-post-title-field";
+    ErrorFieldKey["description"] = "create-post-description-field";
+    ErrorFieldKey["photos"] = "create-post-photos-field";
+})(ErrorFieldKey || (ErrorFieldKey = {}));
+const orderErrorFieldKey = ['title', 'description', 'photos'];
+
+const CreatePostDescription = ({ className, style, bannedWords = [], value, placeholder = '', onChange, onPreviewUrlChange, onInvalidUrlsChange, isReplying, footerEditor, }) => {
+    const { t } = index.useTranslations();
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const imagePicker = React.useRef(null);
+    React.useEffect(() => {
+        if (onPreviewUrlChange) {
+            if (previewUrl === null || previewUrl === void 0 ? void 0 : previewUrl.url)
+                onPreviewUrlChange({
+                    title: previewUrl.title || '',
+                    url: previewUrl.url || '',
+                    image: previewUrl.image || '',
+                    description: previewUrl.description || '',
+                });
+            else
+                onPreviewUrlChange(null);
+        }
+    }, [previewUrl]);
+    return (React__default["default"].createElement("div", null,
+        React__default["default"].createElement(StyleWrapperTitle, null,
+            React__default["default"].createElement(index$2.Text, { size: "p4", className: "field-label" }, t('createPost.popup.description'))),
+        React__default["default"].createElement(StyledCreatePostDescription, { className: className, style: style },
+            React__default["default"].createElement("div", { className: `textarea-control ${ErrorFieldKey.description}` },
+                React__default["default"].createElement("div", { className: "textarea-wrapper" },
+                    React__default["default"].createElement(RichTextEditor, { html: value || '', placeholder: placeholder, onChange: onChange, bannedWords: bannedWords, onImagePickerClick: () => { var _a; return (_a = imagePicker.current) === null || _a === void 0 ? void 0 : _a.click(); }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: onInvalidUrlsChange, isReplying: isReplying }))),
+            footerEditor)));
+};
+
+const StyledCreateNewPost = styled__default["default"].div `
+  position: relative;
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
+  ${utils.MediaQueries.mbDown} {
+    padding: 16px 16px;
+  }
+
+  .input-group-container {
+    flex: 1;
+    padding: 16px 24px;
+    -ms-overflow-style: none; /* IE and Edge */
+    overflow-y: auto;
+    scrollbar-width: none; /* Firefox */
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  .input-group {
+    :not(:last-child) {
+      margin-bottom: 0.6rem;
+    }
+
+    input:focus,
+    textarea:focus,
+    [contenteditable='true'] {
+      outline: none;
+    }
+
+    label {
+      margin-bottom: 5px;
+      color: ${miscTheme.theme.colors.gray600};
+      /* font-family: 'Open Sans', sans-serif; */
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    .input-group-label {
+      margin-bottom: 5px;
+      color: ${miscTheme.theme.colors.gray600};
+      /* font-family: 'Open Sans', sans-serif; */
+      font-size: 13px;
+      font-weight: bold;
+    }
+
+    .input-notification {
+      display: flex;
+
+      & > img {
+        width: 16px;
+        height: 16px;
+        margin-top: 1.5px;
+        margin-right: 8px;
+      }
+    }
+
+    .tag-list {
+    }
+  }
+
+  .warning {
+    margin-top: 16px;
+  }
+
+  .submit-btn {
+    width: 100%;
+  }
+
+  .switch-label {
+    display: flex;
+    align-items: center;
+  }
+
+  .swich-input-group {
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: ${miscTheme.theme.colors.neutral50};
+
+    &.askdoctor-switch {
+      background: ${miscTheme.theme.colors.primary50};
+      &.mb-color {
+        background: ${miscTheme.theme.mbColors.tonePink};
+      }
+    }
+
+    .mantine-Switch-labelWrapper {
+      flex-grow: 1;
+    }
+    .mantine-Checkbox-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .mantine-Switch-track {
+      margin-bottom: 0;
+    }
+    .label-txt {
+      font-weight: normal;
+      font-size: 14px;
+      color: ${miscTheme.theme.colors.gray800};
+      margin-left: 10px;
+    }
+  }
+`;
+const StyledIsQuestion = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px;
+  border-radius: 0 0 8px 8px;
+  background: ${miscTheme.theme.colors.neutral50};
+  gap: 12px;
+
+  &.has-error {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+  }
+  &.error-description {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+    border-top: none;
+  }
+
+  &[data-is-marry-baby='true'] {
+    background: ${miscTheme.theme.mbColors.tonePink};
+  }
+
+  .switch-label {
+    display: flex;
+    gap: 12px;
+    align-items: center;
+
+    .wrapper-text {
+      .label-txt {
+        color: ${miscTheme.theme.colors.gray800};
+        font-size: 14px;
+        font-weight: 600;
+        line-height: 22px;
+      }
+      .description-txt {
+        color: ${miscTheme.theme.colors.gray700};
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 18px;
+      }
+    }
+  }
+
+  .switch-btn {
+    .mantine-Switch-track {
+      margin: 0;
+      min-width: 40px;
+      width: 40px;
+    }
+    .mantine-Switch-labelWrapper {
+      display: none;
+    }
+  }
+
+  button {
+    height: 40px;
+    &:hover,
+    &.primary {
+      border-radius: 16px;
+      border: 1px solid ${miscTheme.theme.colors.blue100};
+      background: ${miscTheme.theme.colors.blue50};
+      color: ${miscTheme.theme.colors.primaryBase};
+    }
+  }
+`;
+const StyledError = styled__default["default"].div `
+  margin-bottom: 12px;
+  color: ${miscTheme.theme.colors.red700};
+  svg {
+    margin-right: 5px;
+  }
+  svg,
+  span {
+    vertical-align: middle;
+  }
+  .mantine-Text-root {
+    color: ${miscTheme.theme.colors.red600};
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 18px;
+    display: block;
+  }
+`;
+const StyledFormGroupInner = styled__default["default"].div `
+  .swich-input-group {
+    padding: 12px 16px;
+    border-radius: 8px;
+    background: ${miscTheme.theme.colors.neutral50};
+
+    &.askdoctor-switch {
+      background: ${miscTheme.theme.colors.blue50};
+    }
+
+    .switch-label {
+      display: flex;
+      align-items: center;
+    }
+    .mantine-Switch-labelWrapper {
+      flex-grow: 1;
+    }
+    .mantine-Checkbox-body {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .mantine-Switch-track {
+      margin-bottom: 0;
+    }
+    .label-txt {
+      font-weight: normal;
+      font-size: 14px;
+      color: ${miscTheme.theme.colors.gray800};
+      margin-left: 14px;
+    }
+  }
+`;
+const StylePostAction = styled__default["default"].div `
+  display: flex;
+  gap: 12px;
+  .avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: 100%;
+
+    &.avatar-anonymous {
+      background: ${miscTheme.theme.colors.neutral100};
+    }
+
+    img {
+      border-radius: 100%;
+    }
+
+    .author-avatar {
+      .col-left {
+        display: none;
+      }
+    }
+  }
+
+  .post-action-form {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .post-action-by {
+    color: ${miscTheme.theme.colors.gray800};
+    font-size: 16px;
+    font-weight: 600;
+    line-height: 24px;
+  }
+
+  .post-action-result {
+    display: flex;
+    position: relative;
+  }
+
+  .dropdown-post-action {
+    background: ${miscTheme.theme.colors.white} !important;
+    border-radius: 8px;
+    border: 1px solid ${miscTheme.theme.colors.neutral200} !important;
+
+    > div {
+      padding: 3px 8px;
+    }
+
+    span {
+      flex: 1;
+      color: ${miscTheme.theme.colors.gray600};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 18px;
+    }
+
+    ul {
+      width: 130px;
+      li {
+        img {
+          flex: 0 0 16px;
+          width: 16px;
+        }
+      }
+    }
+  }
+`;
+const StyleSessionRow = styled__default["default"].div `
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+
+  .session-title {
+    color: ${miscTheme.theme.colors.gray600};
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    flex: 1;
+  }
+`;
+const StyledIsQuestionWrapper = styled__default["default"].div `
+  padding: 8px 8px;
+  border: 1px solid ${miscTheme.theme.colors.gray200};
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+  &.has-error {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+  }
+  &.error-description {
+    border: 1px solid ${miscTheme.theme.colors.red600};
+    border-top: none;
+  }
+`;
+const StyleActionFooter = styled__default["default"].div `
+  display: flex;
+  padding: 16px 24px 24px 24px;
+  justify-content: space-between;
+  align-items: center;
+  box-shadow: 0px -2px 10px 0px rgba(0, 0, 0, 0.08);
+  ${utils.MediaQueries.mbDown} {
+    padding: 8px 16px 12px 16px;
+    gap: 12px;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+  .input-group {
+    margin-bottom: 0 !important;
+  }
+`;
+
+const CreatePostPhotos = ({ imageFiles: imageFilesInit, setImageFiles, }) => {
+    const imageRef = React.useRef(null);
+    const { t } = index.useTranslations();
+    const { onSelectImages } = index$3.useImagePicker(imageFilesInit, setImageFiles);
+    const handleClick = () => {
+        var _a;
+        (_a = imageRef === null || imageRef === void 0 ? void 0 : imageRef.current) === null || _a === void 0 ? void 0 : _a.click();
+    };
+    return (React__default["default"].createElement("div", { className: "input-group" },
+        React__default["default"].createElement(StyleSessionRow, { onClick: handleClick },
+            React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconPhone, style: {
+                    width: '18px',
+                    height: '18px',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } }),
+            React__default["default"].createElement("div", { className: "session-title" }, t('createPost.photos'))),
+        React__default["default"].createElement("input", { ref: imageRef, type: "file", accept: "image/png, image/gif, image/jpeg", multiple: true, style: { display: 'none' }, onChange: (e) => onSelectImages(e) })));
+};
+
+const TITLE_LIMIT = 120;
+const inputModify = (value, opts) => {
+    if (!opts)
+        return value;
+    const { limit, bannedWords = [] } = opts;
+    const shorten = typeof limit === 'number' && limit >= 0 ? value.substring(0, limit) : value;
+    const processedValue = post.highlightBadWords(shorten, bannedWords);
+    return processedValue;
+};
+const CreatePostTitle = ({ className, style, bannedWords = [], value, placeholder = '', error, onChange, }) => {
+    const _theme = core.useMantineTheme();
+    const { t } = index.useTranslations();
+    const [titleValue, setTitleValue] = React.useState('');
+    const titleRef = React.useRef(null);
+    React.useEffect(() => {
+        if (titleRef.current) {
+            const pasteHandler = (e) => {
+                var _a;
+                e.preventDefault();
+                const text = (_a = e.clipboardData) === null || _a === void 0 ? void 0 : _a.getData('text/plain');
+                document.execCommand('insertHTML', false, text);
+            };
+            const contentDiv = titleRef.current;
+            contentDiv.addEventListener('paste', pasteHandler, {
+                passive: true,
+            });
+            return () => contentDiv.removeEventListener('paste', pasteHandler);
+        }
+    }, [titleRef]);
+    const bannedString = (bannedWords === null || bannedWords === void 0 ? void 0 : bannedWords.join(',')) || '';
+    React.useEffect(() => {
+        var _a;
+        if (bannedString) {
+            const titleText = (_a = titleRef.current) === null || _a === void 0 ? void 0 : _a.innerText;
+            if (titleText) {
+                const titleValueWithBanned = post.highlightBadWords(titleText, bannedWords);
+                if (titleValueWithBanned !== titleText) {
+                    onChange && onChange(titleValueWithBanned);
+                    setTitleValue(titleValueWithBanned);
+                }
+            }
+        }
+    }, [bannedString]);
+    const debounceInputModify = React.useCallback(debounce__default["default"]((v) => {
+        if (v) {
+            const shortenString = inputModify(v, {
+                limit: TITLE_LIMIT,
+                bannedWords,
+            });
+            onChange && onChange(shortenString);
+            setTitleValue(shortenString);
+        }
+    }, 300), []);
+    return (React__default["default"].createElement(StyledCreatePostTitle, { className: className, style: style, color: _theme.colors[_theme.primaryColor][0], colorShadow: _theme.colors[_theme.primaryColor][2] },
+        React__default["default"].createElement(StyleWrapperTitle, null,
+            React__default["default"].createElement(index$2.Text, { size: "p4", className: "field-label" }, t('createPost.title')),
+            React__default["default"].createElement(index$2.Text, { size: "p4", className: "count-string" },
+                `${value === null || value === void 0 ? void 0 : value.length}/${TITLE_LIMIT}`,
+                "\u00A0",
+                t('character'))),
+        React__default["default"].createElement(index$4.Input, { name: "title", value: value || titleValue, size: "md", label: "", placeholder: placeholder, onChange: (str) => {
+                if (str !== (value || titleValue)) {
+                    const initialValue = inputModify(str, {
+                        bannedWords,
+                    });
+                    onChange && onChange(initialValue);
+                    setTitleValue(initialValue);
+                    debounceInputModify(str);
+                }
+            }, className: `${ErrorFieldKey.title} ${error && (error === null || error === void 0 ? void 0 : error.title) ? 'has-input-error' : ''}` }),
+        error && (error === null || error === void 0 ? void 0 : error.title) && (React__default["default"].createElement(StyledError, { style: { margin: '4px 0 0' } },
+            React__default["default"].createElement(index$2.Text, { size: "p5", as: "span", color: miscTheme.theme.colors.red600 }, error.title)))));
+};
+
+const StyleReviewPhoto = styled__default["default"].div `
+  .mantine-Text-root {
+    margin-bottom: 4px;
+  }
+  .preview-images-container {
+    display: flex;
+    gap: 8px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    .image-src-wrapper {
+      flex: 0 0 116px;
+      width: 116px;
+      height: 116px;
+      border-radius: 4px;
+      position: relative;
+      img {
+        border-radius: 4px;
+      }
+      .icon-close {
+        position: absolute;
+        top: 6px;
+        right: 6px;
+        cursor: pointer;
+        z-index: 10;
+        max-height: 24px;
+        max-width: 24px;
+      }
+
+      &.image-has-error {
+        .preview-image {
+          border: 1.5px solid ${miscTheme.theme.colors.red600};
+        }
+      }
+    }
+  }
+`;
+
+const PostPhotosReview = ({ error, imageFiles: imageFilesInit, indexImageError = [], setIndexImageError, setImageFiles, removeKeyError, }) => {
+    const { t } = index.useTranslations();
+    const { imageSrcs, onRemoveImage } = index$3.useImagePicker(imageFilesInit, setImageFiles);
+    return (React__default["default"].createElement(StyleReviewPhoto, { className: "input-group" },
+        React__default["default"].createElement(index$2.Text, { size: "p5", weight: "semiBold" }, t('createPost.photos')),
+        React__default["default"].createElement("div", { className: `${ErrorFieldKey.photos} preview-images-container` }, imageSrcs === null || imageSrcs === void 0 ? void 0 : imageSrcs.map((src, index) => {
+            const imageError = indexImageError.includes(index);
+            return (React__default["default"].createElement("div", { className: `image-src-wrapper ${imageError ? 'image-has-error' : ''}`, key: index },
+                React__default["default"].createElement("img", { src: src, className: "preview-image", alt: "", style: {
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                    } }),
+                React__default["default"].createElement("img", { alt: "", className: "icon-close", src: index$3.IconCloseCircle, onClick: () => {
+                        removeKeyError && removeKeyError('photos');
+                        onRemoveImage(index);
+                        const newIndexError = indexImageError.filter((item) => item !== index) || [];
+                        setIndexImageError(newIndexError);
+                    } })));
+        })),
+        error && (error === null || error === void 0 ? void 0 : error.photos) && (React__default["default"].createElement(StyledError, null,
+            React__default["default"].createElement(index$2.Text, { size: "p5", color: miscTheme.theme.colors.red600 }, error.photos)))));
+};
+
+var img = "data:image/svg+xml,%3csvg width='27' height='34' viewBox='0 0 27 34' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M26.6198 30.8276C26.1994 29.8612 25.6858 28.938 25.0862 28.0712C24.7039 27.4646 24.1752 26.9639 23.5487 26.6152L20.809 24.8984H6.56441L3.82386 26.6152C3.19735 26.9639 2.66863 27.4646 2.28637 28.0712C1.68686 28.938 1.1733 29.8612 0.752979 30.8276C0.66293 31.0085 0.641973 31.216 0.694039 31.4113C0.746105 31.6065 0.867615 31.776 1.03578 31.8881C3.0517 33.0766 8.44044 33.6133 13.6865 33.6133C18.9327 33.6133 24.3197 33.0766 26.3357 31.8881C26.5041 31.7762 26.6259 31.6068 26.6782 31.4116C26.7305 31.2163 26.7098 31.0087 26.6198 30.8276Z' fill='%23626D7C'/%3e%3cpath d='M10.0127 16.6728C11.3205 16.6728 12.3808 15.6125 12.3808 14.3046C12.3808 12.9968 11.3205 11.9365 10.0127 11.9365C8.70478 11.9365 7.64453 12.9968 7.64453 14.3046C7.64453 15.6125 8.70478 16.6728 10.0127 16.6728Z' fill='%23626D7C'/%3e%3cpath d='M17.3642 16.6728C18.6721 16.6728 19.7323 15.6125 19.7323 14.3046C19.7323 12.9968 18.6721 11.9365 17.3642 11.9365C16.0563 11.9365 14.9961 12.9968 14.9961 14.3046C14.9961 15.6125 16.0563 16.6728 17.3642 16.6728Z' fill='%23626D7C'/%3e%3cpath d='M21.9864 28.0466C22.082 29.5658 21.4126 32.585 21.0465 33.4184C20.347 33.5359 19.612 33.6342 18.8497 33.7162C19.2541 28.6723 18.254 25.817 17.3633 23.1885C19.6065 23.9945 20.3088 24.4426 20.8088 24.8989C21.6531 25.664 21.8006 26.2187 21.6094 26.5192C21.4181 26.828 20.5082 27.0438 20.5082 27.0438C21.6831 27.3225 21.9564 27.5958 21.9864 28.0466Z' fill='%2387909C'/%3e%3cpath d='M10.0121 23.1885C9.11859 25.817 8.11855 28.6723 8.52293 33.7162C7.76061 33.6342 7.02561 33.5359 6.32613 33.4184C5.95999 32.585 5.29057 29.5658 5.3862 28.0466C5.41625 27.5958 5.68949 27.3225 6.8644 27.0438C6.8644 27.0438 5.95726 26.828 5.76326 26.5219C5.56927 26.2159 5.72228 25.664 6.56384 24.8989C7.06659 24.4426 7.76881 23.9945 10.0121 23.1885Z' fill='%2387909C'/%3e%3cpath d='M3.82307 26.6153L6.56361 24.8994C5.72205 25.6645 5.57177 26.2191 5.76304 26.5224C5.9543 26.8257 6.86417 27.0443 6.86417 27.0443C5.68926 27.323 5.41603 27.5962 5.38597 28.0471C5.29034 29.5663 5.95977 32.5855 6.3259 33.4189C3.99248 33.0391 2.07164 32.4981 1.03608 31.8888C0.868115 31.7766 0.746669 31.6072 0.694385 31.4122C0.6421 31.2171 0.662547 31.0097 0.751911 30.8286C1.17295 29.8624 1.68628 28.9392 2.28476 28.0717C2.66772 27.4653 3.19662 26.9645 3.82307 26.6153Z' fill='%23626D7C'/%3e%3cpath d='M26.6201 30.8286C26.7101 31.0096 26.7309 31.2172 26.6786 31.4124C26.6262 31.6077 26.5044 31.7771 26.3359 31.8888C25.3031 32.4981 23.3822 33.0391 21.0461 33.4189C21.4122 32.5855 22.0816 29.5663 21.986 28.0471C21.956 27.5962 21.6827 27.323 20.5078 27.0443C20.5078 27.0443 21.4177 26.8285 21.6089 26.5197C21.8002 26.2191 21.6527 25.6645 20.8084 24.8994L23.5489 26.6153C24.1754 26.9645 24.7043 27.4653 25.0872 28.0717C25.6863 28.9388 26.1996 29.8621 26.6201 30.8286Z' fill='%23626D7C'/%3e%3cpath d='M17.3632 23.1885C18.254 25.817 19.254 28.6723 18.8496 33.7162C17.1356 33.9049 15.4126 33.9998 13.6882 34.0004C11.963 33.9997 10.239 33.9049 8.5241 33.7162C8.11971 28.6723 9.11975 25.817 10.0132 23.1885C10.2264 22.4453 10.5843 22.3497 10.8411 22.3797C11.4805 22.4562 12.1171 23.0136 13.6828 23.0136H13.691C15.2566 23.0136 15.896 22.4562 16.5326 22.3797C16.7895 22.3497 17.1501 22.4453 17.3632 23.1885Z' fill='%23D2D6DC'/%3e%3cpath d='M21.5965 8.49707H5.7789C3.77117 8.55172 2.41347 9.08289 2.59189 9.89057C2.8889 11.2362 7.55957 13.0035 13.6877 13.0035C19.8158 13.0035 24.4865 11.2362 24.7835 9.89057C24.9619 9.08289 23.6042 8.55117 21.5965 8.49707Z' fill='%2387909C'/%3e%3cpath d='M21.6065 8.49671C21.6725 8.82817 21.7208 9.1629 21.7513 9.49949C21.7513 10.2072 18.1009 11.2263 13.6882 11.2263C9.27542 11.2263 5.625 10.2072 5.625 9.49949C5.65547 9.1629 5.70381 8.82817 5.76981 8.49671C6.50755 4.6441 9.52133 -0.744085 12.8001 1.00735C13.0736 1.15268 13.3785 1.22867 13.6882 1.22867C13.9978 1.22867 14.3027 1.15268 14.5762 1.00735C17.855 -0.744085 20.8688 4.6441 21.6065 8.49671Z' fill='%23626D7C'/%3e%3c/svg%3e";
+var AvatarAnonymous = img;
+
+const MAX_SIZE_FILE_UPLOAD = 10 * 1024 * 1024;
+const applySpecialCharSite = [
+    Locale.LOCALE.PhilippinesEnglish,
+    Locale.LOCALE.PhilippinesTagalog,
+    Locale.LOCALE.Indonesia,
+    Locale.LOCALE.Malaysia,
+    Locale.LOCALE.Vietnam,
+];
+const CreateNewPostContentV2 = ({ className, style, onClose, forceSelectCommunity, articleId, editPostData, defaultCommunity, defaultTopics, userInfo, isMarryBaby = false, }) => {
+    const isInEditMode = !!(editPostData === null || editPostData === void 0 ? void 0 : editPostData.id);
+    const { data: { locale, env: { togetherBasePath }, }, action: { pushNotifications, sanitizeFunction }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const { t } = index.useTranslations();
+    const containerRef = React.useRef(null);
+    const [isAskDoctor, setIsAskDoctor] = React.useState(false);
+    const [specialCharErr, setspecialCharErr] = React.useState(false);
+    const [titleValue, setTitleValue] = React.useState('');
+    const [descriptionValue, setDescriptionValue] = React.useState('');
+    const [communityValue, setCommunityValue] = React.useState({
+        label: t('community.choose'),
+        value: '',
+    });
+    const [selectedTopics, setSelectedTopics] = React.useState([]);
+    const [error, setError] = React.useState({});
+    const [imageFiles, setImageFiles] = React.useState([]);
+    const [bannedWords, setBannedWords] = React.useState([]);
+    const [indexImageError, setIndexImageError] = React.useState([]);
+    const [postActionValue, setPostActionValue] = React.useState({
+        label: t('cardPost.public'),
+        value: 'public',
+    });
+    const [communitiesList, setCommunitiesList] = React.useState([]);
+    const [topicsList, setTopicsList] = React.useState([]);
+    const { imageSrcs = [] } = index$3.useImagePicker(imageFiles);
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    const [invalidUrls, setInvalidUrls] = React.useState([]);
+    const [stepPost, setStepPost] = React.useState('step_info');
+    const [isLoadingSuggest, setIsLoadingSuggest] = React.useState(false);
+    const [uncategorizedId, setUncategorizedId] = React.useState('');
+    const postActionType = [
+        {
+            label: t('cardPost.public'),
+            value: 'public',
+            icon: (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconPublic, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } })),
+        },
+        {
+            label: t('cardPost.option.anonymous'),
+            value: 'anonymous',
+            icon: (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
+                    width: '100%',
+                    height: '100%',
+                    objectFit: 'contain',
+                    marginLeft: 'auto',
+                } })),
+        },
+    ];
+    const currentCommunity = React.useMemo(() => {
+        if (!communityValue.value)
+            return null;
+        const result = communitiesList.find((item) => String(item.id) === String(communityValue.value));
+        if (!result)
+            return null;
+        return result;
+    }, [communityValue, communitiesList]);
+    // HANDLE etra action when OPEN AND CLOSE
+    React.useEffect(() => {
+        if (editPostData) {
+            const post$1 = editPostData;
+            setTitleValue(post$1.title || '');
+            setDescriptionValue(post.decodeMention(post.decodePostUrl(post$1.description || '', 'edit'), post$1.mentions));
+            setCommunityValue({
+                label: post$1.community.name,
+                value: `${post$1.community.id || ''}-${post$1.community.mappedCategoryId || ''}`,
+            });
+            setSelectedTopics(post$1.topics || []);
+            setImageFiles(post$1.photos || []);
+            setIsAskDoctor(!!post$1.isAskDoctor || false);
+        }
+        else {
+            if (defaultCommunity) {
+                setCommunityValue({
+                    label: defaultCommunity.name,
+                    value: `${defaultCommunity.id || ''}-${defaultCommunity.mappedCategoryId || ''}`,
+                });
+            }
+            if (defaultTopics) {
+                setSelectedTopics(defaultTopics);
+            }
+        }
+    }, []);
+    React.useEffect(() => {
+        setspecialCharErr(applySpecialCharSite.includes(locale) &&
+            titleValue !== '' &&
+            !/[a-zA-Z]/.test(titleValue));
+        setError({});
+    }, [titleValue]);
+    React.useEffect(() => {
+        (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+            var _a, _b, _c;
+            const [resListCommunity, resListTopic, resUncategorized] = yield Promise.all([
+                togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMUNITY.LIST, {
+                    _locale: locale,
+                    pageSize: 100,
+                }), 'GET'),
+                togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.TOPIC.LIST, {
+                    _locale: locale,
+                    pageSize: 100,
+                }), 'GET'),
+                togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.COMMUNITY.GET_UNCATEGORIZED, {
+                    _locale: locale,
+                }), 'GET'),
+            ]);
+            const communitiesApi = (_a = resListCommunity === null || resListCommunity === void 0 ? void 0 : resListCommunity.data) === null || _a === void 0 ? void 0 : _a.communities;
+            if (Array.isArray(communitiesApi) && communitiesApi.length) {
+                setCommunitiesList(communitiesApi);
+            }
+            const topicRes = (_b = resListTopic === null || resListTopic === void 0 ? void 0 : resListTopic.data) === null || _b === void 0 ? void 0 : _b.topics;
+            if (Array.isArray(topicRes)) {
+                setTopicsList(() => topicRes === null || topicRes === void 0 ? void 0 : topicRes.map(dataTransform.formatTopic));
+            }
+            const uncategorizedApi = (_c = resUncategorized === null || resUncategorized === void 0 ? void 0 : resUncategorized.data) === null || _c === void 0 ? void 0 : _c.communities;
+            if (Array.isArray(uncategorizedApi) && uncategorizedApi.length) {
+                setUncategorizedId(String(uncategorizedApi[0].id));
+            }
+        }))();
+    }, []);
+    const validationUploadPhoto = (files) => {
+        const errorMessage = Object.assign({}, error);
+        if (files && files.length > 10) {
+            errorMessage.photos = t('createPost.message.photoMaxium');
+        }
+        if (files && files.length) {
+            let inValidSizeFile = false;
+            const indexInValid = [];
+            files.forEach((file, index) => {
+                if ((file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD) {
+                    inValidSizeFile = true;
+                    indexInValid.push(index);
+                }
+            });
+            if (inValidSizeFile) {
+                errorMessage.photos = t('createPost.message.photoSize');
+            }
+            setIndexImageError(indexInValid);
+        }
+        else {
+            setIndexImageError([]);
+        }
+        setError(errorMessage);
+    };
+    const validationPost = () => {
+        let hasError = false;
+        const errorMessage = {};
+        const description = innertext__default["default"](descriptionValue);
+        if (!description) {
+            errorMessage.description = t('createPost.message.requiredDescription');
+            hasError = true;
+        }
+        if (!titleValue) {
+            errorMessage.title = t('createPost.message.requiredTitle');
+            hasError = true;
+        }
+        if (description && description.split(' ').length < 10) {
+            errorMessage.description = t('createPost.message.lengthDescription', {
+                currentLength: description.split(' ').length,
+            });
+            hasError = true;
+        }
+        if (titleValue && titleValue.length < 5) {
+            errorMessage.title = t('createPost.message.lengthTitle.characters');
+            hasError = true;
+        }
+        if (imageFiles && imageFiles.length > 10) {
+            errorMessage.photos = t('createPost.message.photoMaxium');
+            hasError = true;
+        }
+        if (imageFiles && imageFiles.length) {
+            let inValidSizeFile = false;
+            const indexInValid = [];
+            imageFiles.forEach((file, index) => {
+                if ((file === null || file === void 0 ? void 0 : file.size) > MAX_SIZE_FILE_UPLOAD) {
+                    inValidSizeFile = true;
+                    indexInValid.push(index);
+                }
+            });
+            if (inValidSizeFile) {
+                errorMessage.photos = t('createPost.message.photoSize');
+                hasError = true;
+            }
+            setIndexImageError(indexInValid);
+        }
+        else {
+            setIndexImageError([]);
+        }
+        if (invalidUrls && invalidUrls.length) {
+            errorMessage.video = 'Invalid video url';
+            hasError = true;
+        }
+        setError(errorMessage);
+        return hasError;
+    };
+    const removeKeyError = (deleteKey) => {
+        if (error[deleteKey]) {
+            const _a = Object.assign({}, error), _b = `${deleteKey}`, value = _a[_b], rest = tslib_es6.__rest(_a, [typeof _b === "symbol" ? _b : _b + ""]);
+            setError(rest);
+            console.log(value);
+        }
+    };
+    const submitPost = (uncategorized) => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const isError = validationPost();
+        if (isError)
+            return;
+        const bodyFormData = yield index$3.getPostFormData({
+            title: titleValue,
+            description: descriptionValue,
+            communityId: uncategorized
+                ? uncategorizedId
+                : String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) || ''),
+            imageFiles,
+            previewUrl,
+            topicIds: uncategorized
+                ? []
+                : selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String(topic.id || '')).filter(Boolean),
+            locale,
+            sanitizeFunction,
+            categoryCommunityId: String((currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId) || ''),
+            categoryTopicIds: selectedTopics === null || selectedTopics === void 0 ? void 0 : selectedTopics.map((topic) => String((topic === null || topic === void 0 ? void 0 : topic.mappedCategoryId) || '')).filter(Boolean),
+            isAnonymous: (postActionValue === null || postActionValue === void 0 ? void 0 : postActionValue.value) === 'anonymous' ? 1 : 0,
+            isAskDoctor: isAskDoctor ? 1 : 0,
+            introUrl: '',
+        });
+        if (articleId) {
+            bodyFormData.append('article_id', articleId);
+        }
+        let res;
+        if (isInEditMode) {
+            if (editPostData === null || editPostData === void 0 ? void 0 : editPostData.id) {
+                res = yield index$3.editPost({
+                    id: editPostData.id,
+                    formData: bodyFormData,
+                    locale,
+                });
+            }
+        }
+        else {
+            res = yield index$3.createPost({
+                formData: bodyFormData,
+                locale,
+                isArticleComment: !(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.id) && !!(currentCommunity === null || currentCommunity === void 0 ? void 0 : currentCommunity.mappedCategoryId),
+            });
+        }
+        const resData = res === null || res === void 0 ? void 0 : res.data;
+        if ((resData === null || resData === void 0 ? void 0 : resData.id) && !((_b = (_a = res === null || res === void 0 ? void 0 : res.messages) === null || _a === void 0 ? void 0 : _a.moderation) === null || _b === void 0 ? void 0 : _b.type)) {
+            const params = `action=${editPostData ? 'editPost' : 'createPost'}&askDoctor=${(resData === null || resData === void 0 ? void 0 : resData.is_question) ? 'true' : 'false'}`;
+            const postHref = `${togetherComponentGlobalContext.getCurrentBaseUrl(locale)}${togetherBasePath}/${(_c = resData === null || resData === void 0 ? void 0 : resData.community) === null || _c === void 0 ? void 0 : _c.slug}/${resData === null || resData === void 0 ? void 0 : resData.slug}/?${params}`;
+            window.location.href = postHref;
+        }
+        else {
+            if (((_e = (_d = res === null || res === void 0 ? void 0 : res.messages) === null || _d === void 0 ? void 0 : _d.moderation) === null || _e === void 0 ? void 0 : _e.type) === 'banned') {
+                pushNotifications({
+                    title: t('notification.post.blocked.title'),
+                    message: t('notification.post.blocked.message'),
+                    type: 'danger',
+                });
+                if (res.messages.moderation.words) {
+                    setBannedWords(res.messages.moderation.words);
+                }
+            }
+            else if (((_g = (_f = res === null || res === void 0 ? void 0 : res.messages) === null || _f === void 0 ? void 0 : _f.moderation) === null || _g === void 0 ? void 0 : _g.type) === 'suspect') {
+                pushNotifications({
+                    title: t('notification.post.suspect.title'),
+                    message: t('notification.post.suspect.message'),
+                    type: 'warning',
+                });
+                onClose && onClose();
+            }
+            else if ((_j = (_h = res === null || res === void 0 ? void 0 : res.messages) === null || _h === void 0 ? void 0 : _h.find) === null || _j === void 0 ? void 0 : _j.call(_h, (m) => { var _a; return !!((_a = m === null || m === void 0 ? void 0 : m.includes) === null || _a === void 0 ? void 0 : _a.call(m, 'suspend')); })) {
+                pushNotifications({
+                    message: t('notification.suspend.message'),
+                    type: 'danger',
+                });
+                onClose && onClose();
+            }
+            else {
+                pushNotifications({
+                    message: ((_k = res === null || res === void 0 ? void 0 : res.messages) === null || _k === void 0 ? void 0 : _k[0]) || t('notification.failure'),
+                    type: 'danger',
+                });
+            }
+        }
+    });
+    const getFirstOrderErroKey = (orderKey) => {
+        const result = orderKey.find((key) => {
+            if (error.hasOwnProperty(key) && error[key]) {
+                return true;
+            }
+            return false;
+        });
+        if (!result)
+            return '';
+        return ErrorFieldKey[result];
+    };
+    const handleScrollToError = (selectorKey) => {
+        if ((containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) && selectorKey) {
+            const errorFieldElm = document.querySelector(`.${selectorKey}`);
+            if (errorFieldElm && containerRef.current) {
+                const elm = containerRef.current;
+                if (elm) {
+                    elm.scrollTo({
+                        top: errorFieldElm.offsetTop - 40,
+                        behavior: 'smooth',
+                    });
+                }
+            }
+        }
+    };
+    const onSubmitContinuePost = () => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _l;
+        const isError = validationPost();
+        if (isError) {
+            const keyElmToScroll = getFirstOrderErroKey(orderErrorFieldKey);
+            handleScrollToError(keyElmToScroll);
+            return;
+        }
+        setStepPost('step_community');
+        // Current just apply ai suggest community for Vietnam site
+        if (locale === Locale.LOCALE.Vietnam && !isMarryBaby && !isInEditMode) {
+            try {
+                setIsLoadingSuggest(true);
+                const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getChatbotAiApiPath(togetherApiPaths.PATHS.CHATBOT.GET_SUGGEST_COMMUNITY), 'POST', {
+                    data: {
+                        title: titleValue,
+                        description: descriptionValue,
+                    },
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                });
+                if (!res)
+                    throw new Error();
+                if (res === null || res === void 0 ? void 0 : res.community) {
+                    // Check community is exist list communities
+                    const suggestResult = communitiesList.find((item) => String(item.id) === String(res === null || res === void 0 ? void 0 : res.community.id));
+                    if (suggestResult) {
+                        setCommunityValue({
+                            label: suggestResult.name,
+                            value: String(suggestResult.id),
+                        });
+                        if ((res === null || res === void 0 ? void 0 : res.topic) && (res === null || res === void 0 ? void 0 : res.topic.length)) {
+                            const listTopicId = res.topic.map((item) => item.id);
+                            const resTopic = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.TOPIC.LIST, {
+                                _locale: locale,
+                                topic_in: listTopicId.join(),
+                                pageSize: 100,
+                            }), 'GET');
+                            const topicsApi = (_l = resTopic === null || resTopic === void 0 ? void 0 : resTopic.data) === null || _l === void 0 ? void 0 : _l.topics;
+                            const topicSuggested = topicsApi
+                                ? topicsApi.map((item) => dataTransform.formatTopic(item))
+                                : [];
+                            setSelectedTopics(topicSuggested);
+                        }
+                    }
+                }
+            }
+            catch (err) {
+                console.log('err');
+            }
+            finally {
+                setIsLoadingSuggest(false);
+            }
+        }
+    });
+    console.log('topicsList: ', topicsList);
+    return (React__default["default"].createElement(StyledCreateNewPost, { className: `${className} create-post-popup-frame`, style: style },
+        React__default["default"].createElement("div", { className: "input-group-container", ref: containerRef },
+            React__default["default"].createElement(StyledFormGroupInner, null,
+                React__default["default"].createElement("div", { className: "input-group" },
+                    React__default["default"].createElement(StylePostAction, null,
+                        React__default["default"].createElement("div", { className: `avatar ${postActionValue.value === 'anonymous'
+                                ? 'avatar-anonymous'
+                                : ''}` }, postActionValue.value === 'anonymous' ? (React__default["default"].createElement("img", { alt: "avatar-icon", src: AvatarAnonymous, style: {
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                                marginLeft: 'auto',
+                            } })) : (userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar) ? (React__default["default"].createElement("img", { alt: "avatar-icon", src: userInfo === null || userInfo === void 0 ? void 0 : userInfo.avatar, style: {
+                                width: '100%',
+                                height: '100%',
+                                objectFit: 'contain',
+                                marginLeft: 'auto',
+                            } })) : (React__default["default"].createElement(togetherMoleculesCardAuthor.CardAuthor, { showDetailPopup: false, avatar: "", avatarProps: { size: 40 }, name: userInfo === null || userInfo === void 0 ? void 0 : userInfo.name, userId: userInfo === null || userInfo === void 0 ? void 0 : userInfo.userId, className: "author-avatar" }))),
+                        React__default["default"].createElement("div", { className: "post-action-form" },
+                            React__default["default"].createElement("div", { className: "post-action-by" }, (postActionValue === null || postActionValue === void 0 ? void 0 : postActionValue.value) === 'anonymous'
+                                ? t('cardPost.anonymous')
+                                : userInfo === null || userInfo === void 0 ? void 0 : userInfo.name),
+                            React__default["default"].createElement(index$8.Dropdown, { disabled: isInEditMode, options: postActionType, id: "post-action-type", size: "sm", className: "dropdown-post-action", placeholder: t('community.choose'), value: postActionValue, onChange: (option) => {
+                                    setPostActionValue({
+                                        label: option.label,
+                                        value: String(option.value),
+                                    });
+                                }, placeholderIcon: React__default["default"].createElement("div", { className: "post-action-result" }, postActionValue.value === 'public' ? (React__default["default"].createElement("img", { alt: "public-icon", src: IconPublic, style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'contain',
+                                        marginLeft: 'auto',
+                                    } })) : (React__default["default"].createElement("img", { alt: "anonymous-icon", src: IconAnonymous, style: {
+                                        width: '100%',
+                                        height: '100%',
+                                        objectFit: 'contain',
+                                        marginLeft: 'auto',
+                                    } }))), style: {
+                                    zIndex: 10,
+                                    width: 'calc(100% + 20px)',
+                                } })))),
+                React__default["default"].createElement(CreatePostTitle, { className: "input-group", bannedWords: bannedWords, value: titleValue, error: error, placeholder: isAskDoctor
+                        ? t('createPost.post.askDoctor.title')
+                        : t('createPost.post.title'), onChange: setTitleValue }),
+                specialCharErr && (React__default["default"].createElement(StyledError, null,
+                    React__default["default"].createElement(other.Info, { isSolid: true, color: miscTheme.theme.colors.red700, size: 14 }),
+                    React__default["default"].createElement(index$2.Text, { size: "p3", as: "span", color: miscTheme.theme.colors.red700 }, t('createPost.popup.specialCharErr')))),
+                React__default["default"].createElement("div", { className: "input-group" },
+                    React__default["default"].createElement(CreatePostDescription, { bannedWords: bannedWords, value: descriptionValue, placeholder: isAskDoctor
+                            ? t('createPost.post.askDoctor.description')
+                            : t('createPost.post.description'), onChange: (v) => {
+                            setDescriptionValue(v);
+                            removeKeyError('description');
+                        }, onPreviewUrlChange: setPreviewUrl, onInvalidUrlsChange: setInvalidUrls, onImageFilesChange: setImageFiles, imageFiles: imageFiles, className: `${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''}`, footerEditor: React__default["default"].createElement(React__default["default"].Fragment, null,
+                            React__default["default"].createElement(StyledIsQuestionWrapper, { className: `${error && (error === null || error === void 0 ? void 0 : error.description) ? 'error-description' : ''}` },
+                                React__default["default"].createElement(StyledIsQuestion, { color: miscTheme.theme.colors.primaryBase },
+                                    React__default["default"].createElement("div", { className: "switch-label" },
+                                        React__default["default"].createElement(other.Ask, { isMarryBaby: isMarryBaby, size: isMarryBaby ? 32 : 24, color: miscTheme.theme.colors.primaryBase, className: "label-icon" }),
+                                        React__default["default"].createElement("div", { className: "wrapper-text" },
+                                            React__default["default"].createElement("div", { className: "label-txt" }, t('createPost.askDoctor.description')))),
+                                    React__default["default"].createElement(core.Switch, { checked: isAskDoctor, label: "", className: "switch-btn", size: "md", onChange: (v) => {
+                                            setIsAskDoctor(v.target.checked);
+                                        } }))),
+                            error && (error === null || error === void 0 ? void 0 : error.description) && (React__default["default"].createElement(StyledError, { style: { margin: '4px 0 0' } },
+                                React__default["default"].createElement(index$2.Text, { size: "p5", as: "span", color: miscTheme.theme.colors.red600 }, error.description)))) })),
+                stepPost === 'step_community' && (React__default["default"].createElement(CreatePostCommunity, { communitiesList: communitiesList, currentCommunity: currentCommunity, selectedTopics: selectedTopics, communityValue: communityValue, defaultCommunity: forceSelectCommunity, error: error, isFullscreen: false, isMarryBaby: isMarryBaby, isInEditMode: isInEditMode, isLoadingSuggest: isLoadingSuggest, setSelectedTopics: setSelectedTopics, setCommunityValue: setCommunityValue, removeKeyError: removeKeyError, setStepPost: setStepPost, onSubmitPost: submitPost })),
+                imageSrcs.length > 0 && (React__default["default"].createElement(PostPhotosReview, { imageFiles: imageFiles, error: error, indexImageError: indexImageError, setIndexImageError: setIndexImageError, setImageFiles: setImageFiles, removeKeyError: removeKeyError })))),
+        React__default["default"].createElement(StyleActionFooter, null,
+            React__default["default"].createElement(CreatePostPhotos, { imageFiles: imageFiles, setImageFiles: (data) => {
+                    setImageFiles(data);
+                    validationUploadPhoto(data);
+                } }),
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement(index$1.Button, { className: "submit-btn pointer-event-child-none", size: "lg", "data-event-category": "Ask Doctor", "data-event-action": "Submit Question", "data-event-label": window.location.href, onClick: onSubmitContinuePost, loading: isLoadingSuggest, disabled: isLoadingSuggest }, t('onboarding.button.continue'))))));
+};
+
+const StyledTopicSelectList = styled__default["default"].div `
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+
+  .tag-item {
+    min-height: 32px;
+    padding: 5px 12px;
+    border: 1px solid ${miscTheme.theme.colors.neutral100};
+    margin-right: 1rem;
+    margin-bottom: 8px;
+    border-radius: 1rem;
+    color: ${miscTheme.theme.colors.gray800};
+    cursor: pointer;
+    font-size: 13px;
+    line-height: 22px;
+    transition: all 0.2s;
+
+    &.--active {
+      border-color: ${miscTheme.theme.colors.primary50};
+      background: ${miscTheme.theme.colors.primary50};
+      color: ${miscTheme.theme.colors.primaryBase};
+    }
+    &[data-disabled='true'] {
+      background: ${miscTheme.theme.colors.gray100};
+      color: ${miscTheme.theme.colors.gray800};
+    }
+  }
+  .topic-spinner {
+    margin-right: auto;
+    margin-left: auto;
+    & > button {
+      width: 24px;
+      height: 24px;
+    }
+  }
+  &[data-is-marrybaby='true'] {
+    .tag-item {
+      border-color: transparent;
+      background: #f3f3f3;
+      color: #3e3f58;
+      &.--active {
+        border-color: #b6cdff;
+        background: #e0e9fb;
+        color: #3e3f58;
+      }
+    }
+  }
+`;
+
+const TopicSelectList = ({ className, style, topics: topicsProp, communityId, onChange, isLoading, disabled, forceTopics, selectedTopics: selectedTopicsProp, noFetch, dataEventCategory, dataEventAction, dataEventLabel, }) => {
+    const { data: { locale, env: { isMarryBaby }, }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [topics, setTopics] = React.useState(topicsProp ? [...topicsProp] : []);
+    const [selectedTopics, setSelectedTopics] = React.useState(selectedTopicsProp ? [...selectedTopicsProp] : []);
+    const [isLoadingTopics, setIsLoadingTopics] = React.useState(false);
+    const topicsPropRef = React.useRef(topicsProp);
+    topicsPropRef.current = topicsProp;
+    React.useEffect(() => {
+        var _a;
+        if (communityId && !noFetch && !((_a = topicsPropRef.current) === null || _a === void 0 ? void 0 : _a.length)) {
+            setTopics([]);
+            setIsLoadingTopics(true);
+            (() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+                var _b;
+                try {
+                    const res = yield togetherComponentGlobalContext.callApi(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.TOPIC.LIST, {
+                        communityId: communityId,
+                        _locale: locale,
+                    }), 'GET');
+                    const topicRes = (_b = res === null || res === void 0 ? void 0 : res.data) === null || _b === void 0 ? void 0 : _b.topics;
+                    if (Array.isArray(topicRes)) {
+                        setTopics(() => (topicRes === null || topicRes === void 0 ? void 0 : topicRes.map(dataTransform.formatTopic).sort((t1, t2) => (t1.order || 0) - (t2.order || 0))) || []);
+                    }
+                }
+                catch (e) {
+                    console.log(e);
+                    setIsLoadingTopics(false);
+                }
+                setIsLoadingTopics(false);
+            }))();
+        }
+    }, [communityId, noFetch]);
+    const topicsPropString = topicsProp === null || topicsProp === void 0 ? void 0 : topicsProp.map((t) => t.id).join('-');
+    const topicsStateString = topics === null || topics === void 0 ? void 0 : topics.map((t) => t.id).join('-');
+    const forceTopicsPropString = forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.map((t) => t.id).join('-');
+    React.useEffect(() => {
+        if (topicsProp &&
+            typeof topicsPropString !== 'undefined' &&
+            topicsPropString !== topicsStateString) {
+            setTopics(topicsProp);
+        }
+    }, [topicsProp, topicsPropString, topicsStateString]);
+    const topicsWithoutForced = React.useMemo(() => topics.filter((t) => !(forceTopics === null || forceTopics === void 0 ? void 0 : forceTopics.some((ft) => (ft.id && ft.id === t.id) ||
+        (ft.mappedCategoryId &&
+            ft.mappedCategoryId === t.mappedCategoryId)))), [topicsStateString, forceTopicsPropString]);
+    return (React__default["default"].createElement(StyledTopicSelectList, { "data-is-marrybaby": isMarryBaby, className: className, style: style },
+        forceTopics.map((topic) => (React__default["default"].createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: true, selected: true, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
+        topicsWithoutForced.map((topic) => (React__default["default"].createElement(TopicItem, { key: `${topic.id}-${topic.mappedCategoryId}`, topic: topic, disabled: disabled, selected: (selectedTopicsProp || selectedTopics).some((t) => (t.id && t.id === topic.id) ||
+                (t.mappedCategoryId &&
+                    t.mappedCategoryId === topic.mappedCategoryId)), onClick: () => {
+                const _selected = selectedTopicsProp || selectedTopics;
+                const foundIndex = _selected.findIndex((_selected) => (_selected.id && _selected.id === topic.id) ||
+                    (_selected.mappedCategoryId &&
+                        _selected.mappedCategoryId === topic.mappedCategoryId));
+                if (foundIndex !== -1) {
+                    _selected.splice(foundIndex, 1);
+                }
+                else {
+                    _selected.push(topic);
+                }
+                if (onChange && selectedTopicsProp) {
+                    onChange(_selected.slice());
+                }
+                else {
+                    onChange && onChange(_selected.slice());
+                    setSelectedTopics(_selected.slice());
+                }
+            }, dataEventAction: dataEventAction, dataEventCategory: dataEventCategory, dataEventLabel: dataEventLabel }))),
+        (isLoading || isLoadingTopics) && React__default["default"].createElement(togetherMoleculesCardAuthor.Loading, { className: "topic-spinner" })));
+};
+const TopicItem = (_a) => {
+    var { topic, disabled, selected, onClick } = _a, rest = tslib_es6.__rest(_a, ["topic", "disabled", "selected", "onClick"]);
+    return (React__default["default"].createElement("div", Object.assign({ className: 'tag-item' + (selected ? ' --active' : ''), "data-disabled": disabled, onClick: !disabled ? onClick : undefined }, rest), topic.name));
+};
+
+var styles = {"skipBtn":"KsWg8i6","alertHeading":"_9tS0EUN","alertDesc":"kyyRKlb","alertAction":"-Uqqka-"};
+
+const SkipQuestionOfExpertBtn = (_a) => {
+    var { post, onSkip, btnText, currentPageUrl } = _a, rest = tslib_es6.__rest(_a, ["post", "onSkip", "btnText", "currentPageUrl"]);
+    const { t } = index.useTranslations();
+    const { data: { locale }, action: { pushNotifications }, } = React.useContext(togetherComponentGlobalContext.TogetherComponentGlobalContext);
+    const [showAlert, setShowAlert] = React.useState(false);
+    const [loading, setLoading] = React.useState(false);
+    const _theme = core.useMantineTheme();
+    const handleSkip = React.useCallback(() => tslib_es6.__awaiter(void 0, void 0, void 0, function* () {
+        var _b;
+        setLoading(true);
+        const res = yield togetherComponentGlobalContext.callApiWithAuth(togetherComponentGlobalContext.getApiPath(togetherApiPaths.PATHS.USER.SKIP_QUESTION, {
+            _locale: locale,
+            id: post === null || post === void 0 ? void 0 : post.id,
+        }), 'PUT');
+        if ((res === null || res === void 0 ? void 0 : res.status) === 1) {
+            onSkip === null || onSkip === void 0 ? void 0 : onSkip({ id: (post === null || post === void 0 ? void 0 : post.id) || '', communityId: ((_b = post === null || post === void 0 ? void 0 : post.community) === null || _b === void 0 ? void 0 : _b.id) || '' });
+            setShowAlert(false);
+            pushNotifications({
+                title: '',
+                message: 'Skip success',
+                type: 'success',
+            });
+        }
+        else {
+            pushNotifications({
+                title: '',
+                message: res === null || res === void 0 ? void 0 : res.messages,
+                type: 'danger',
+            });
+        }
+        setLoading(false);
+    }), []);
+    return (React__default["default"].createElement(core.Popover, { width: 327, withArrow: true, shadow: "md", opened: showAlert },
+        React__default["default"].createElement(core.Popover.Target, null,
+            React__default["default"].createElement("div", Object.assign({ className: `${styles.skipBtn} ${(rest === null || rest === void 0 ? void 0 : rest.className) || ''}`, onClick: () => setShowAlert(true) }, rest), btnText || t('profilePanel.questionNotClear'))),
+        React__default["default"].createElement(core.Popover.Dropdown, null,
+            React__default["default"].createElement("div", null,
+                React__default["default"].createElement("div", { className: styles.alertHeading }, t('profilePanel.skipQuestion.heading')),
+                React__default["default"].createElement("div", { className: styles.alertDesc }, t('profilePanel.skipQuestion.content')),
+                React__default["default"].createElement("div", { className: styles.alertAction },
+                    React__default["default"].createElement(index$1.Button, { size: "md", variant: "secondary", leftIcon: React__default["default"].createElement(core$1.Close, { color: _theme.fn.primaryColor(), size: 24 }), onClick: () => setShowAlert(false), styles: () => ({
+                            leftIcon: {
+                                marginRight: 0,
+                            },
+                        }) }),
+                    React__default["default"].createElement(index$1.Button, { variant: "primary", size: "md", leftIcon: React__default["default"].createElement(core$1.Check, { color: 'white', size: 24 }), onClick: handleSkip, loading: loading, "data-event-category": "Together", "data-event-action": "Unclear Question Click", "data-event-label": currentPageUrl, styles: () => ({
+                            leftIcon: {
+                                marginRight: 0,
+                            },
+                        }) }))))));
+};
+
+exports.CreateNewPostContent = CreateNewPostContent;
+exports.CreateNewPostContentV2 = CreateNewPostContentV2;
+exports.CreatePostDescription = CreatePostDescription$1;
+exports.CreatePostTitle = CreatePostTitle$1;
+exports.SkipQuestionOfExpertBtn = SkipQuestionOfExpertBtn;
+exports.TopicSelectList = TopicSelectList;