@hhgtech/hhg-components 1.19.0-beta-5 → 1.19.0-beta-6

package/raw/together/components/molecules/createPostDescription/editor.tsx

@@ -0,0 +1,915 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+import React, {
+  CSSProperties,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+// import ReactQuill, { Quill } from 'react-quill'
+import { Button } from 'components/atoms/button'
+import { Input } from 'components/atoms/input'
+import { Text } from 'components/atoms/text'
+import { useTranslations } from 'hooks/useTranslations'
+import { TranslationsKey } from 'i18n/translations'
+import { debounce } from 'lodash'
+import { getCookie } from 'misc/cookieHelper'
+import { TogetherComponentGlobalContext } from 'together/togetherComponentGlobalContext'
+
+import { ADMIN_PATHS, PATHS } from '../../../api/paths'
+import {
+  callApi,
+  callApiWithAdminAuth,
+  callApiWithAuth,
+  getApiPath,
+} from '../../../api/utils'
+import IconLink from '../../../assets/svg/icon-link.svg'
+import { BEARER_TOKEN_COOKIE } from '../../../interfaces/constants'
+import {
+  ALLOW_DOMAIN_URL,
+  escapeRegExp,
+  getMentionIdsFromString,
+  getUrlsFromEditorString,
+  highlightBadWords,
+  LIMIT_MENTION,
+  reformatUrl,
+  removeEdittedBannedWord,
+  removeFontFormat,
+  wrapAnchorAroundUrls,
+  fixMalformedMention,
+} from '../../../utils/post'
+import { UserAvatar } from '../../atoms/userAvatar'
+import { PopoverMenu } from '../../organisms/popoverMenu'
+import { StyledEditorContainer } from './index.styled'
+
+// import 'react-quill/dist/quill.snow.css'
+let ReactQuill = null
+
+;(async () => {
+  if (typeof window === 'undefined') return
+  const QuillRes = await import('react-quill')
+  ReactQuill = QuillRes.default
+  const Quill = QuillRes.Quill
+  class PreserveWhiteSpace {
+    constructor(private quill: any, private options: any) {
+      quill.container.style.whiteSpace = 'pre-line'
+    }
+  }
+  Quill.register('modules/preserveWhiteSpace', PreserveWhiteSpace)
+
+  const Inline = Quill.import('blots/inline')
+
+  class MockABlot extends Inline {
+    static blotName = 'mocka1'
+    static tagName = 'mocka'
+    static create(options: any) {
+      if (!options) return super.create(false)
+      const node: any = super.create(options)
+      MockABlot.setNodeConfigurations(node, options)
+      return node
+    }
+
+    static formats(node: any) {
+      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: any, value: any) {
+      if (!value) return
+      if (
+        !value?.['data-text']
+          ?.replace(/(\ )+/g, ' ')
+          ?.replace(/(\u200c|‌)+/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)
+    }
+  }
+  Quill.register(MockABlot)
+  class MentionBlot extends Inline {
+    static blotName = 'mention'
+    static tagName = 'mention'
+    static create(options: any) {
+      if (!options) return super.create(false)
+      const node: any = super.create(options)
+      MentionBlot.setNodeConfigurations(node, options)
+      return node
+    }
+
+    static formats(node: any) {
+      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: any, value: any) {
+      if (!value) return
+      if (
+        !value['data-id'] ||
+        !value?.['data-name']
+          ?.replace(/(\ )+/g, ' ')
+          ?.replace(/(\u200c|‌)+/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'])
+      }
+    }
+  }
+  Quill.register(MentionBlot)
+})()
+
+function getCaretCharacterOffsetWithin(element: HTMLElement) {
+  let caretOffset = -1
+  if (typeof window.getSelection != 'undefined') {
+    const sel = window.getSelection()
+    if (sel?.rangeCount && sel?.rangeCount > 0) {
+      const range = window.getSelection()?.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 =
+          range.endContainer.parentElement?.closest('mocka')
+        const lastNodeValue =
+          range.endContainer.nodeValue ||
+          (range.endContainer as HTMLElement).outerHTML
+        if (parentMockAElement && lastNodeValue?.length) {
+          /// set selector to end of <mocka elemt, prevent select in the middle
+          caretOffset =
+            caretOffset -
+            range.endOffset +
+            (parentMockAElement.outerHTML.length -
+              parentMockAElement?.outerHTML.lastIndexOf(lastNodeValue))
+        }
+      }
+    }
+  }
+  return caretOffset
+}
+
+function calculateChildNodeOffset(
+  childNodes: NodeListOf<ChildNode>,
+  caretOffset: number,
+) {
+  childNodes.forEach((node, index) => {
+    const isLast = index + 1 === childNodes.length
+    if (node.nodeType === Node.ELEMENT_NODE) {
+      const outerHTML = (node as HTMLElement).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: HTMLElement) {
+  let res: {
+    name: string
+    rect: DOMRect
+    replaceRange: Range
+  } | null = null
+  if (typeof window.getSelection != 'undefined') {
+    const sel = window.getSelection()
+    if (sel?.rangeCount && sel?.rangeCount > 0) {
+      const range = window.getSelection()?.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 = endText.slice(lastAnchorSymbolIndex + 1)?.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 = (
+  value: string,
+  opts?: {
+    formatUrl?: boolean
+    bannedWords?: string[]
+  },
+) => {
+  const { formatUrl, bannedWords = [] } = opts || {}
+  const removedFormat = fixMalformedMention(removeFontFormat(value))
+  if (!formatUrl)
+    return {
+      value: highlightBadWords(removedFormat, bannedWords),
+    }
+  let descriptionWithWrappedAnchor = removeEdittedBannedWord(
+    wrapAnchorAroundUrls(removedFormat),
+  )
+
+  const urls = getUrlsFromEditorString(removedFormat)
+  if (urls) {
+    const invalidUrls: string[] = []
+    let previewUrl = ''
+    urls.forEach((url) => {
+      if (!url) return
+      try {
+        const jsUrl = new URL(url)
+        if (ALLOW_DOMAIN_URL.some((o) => jsUrl.origin.endsWith(o))) {
+          // is valid
+        } else {
+          invalidUrls.push(url)
+          // is not valid
+        }
+      } catch {
+        invalidUrls.push(url)
+      }
+    })
+    if (invalidUrls.length > 0) {
+      descriptionWithWrappedAnchor = descriptionWithWrappedAnchor
+        .replace(
+          new RegExp(
+            `data-url="true">(${invalidUrls.map(escapeRegExp).join('|')})<`,
+            'gi',
+          ),
+          'data-error="true" data-url="true">$1<',
+        )
+        .replace(
+          new RegExp(
+            `data-href="(${invalidUrls
+              .map(escapeRegExp)
+              .join('|')})" data-url="true">`,
+            'gi',
+          ),
+          'data-href="$1" data-error="true" data-url="true">',
+        )
+    }
+    previewUrl = urls.filter((u) => invalidUrls.indexOf(u) === -1)?.[0]
+    return {
+      invalidUrls,
+      previewUrl,
+      value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+    }
+  }
+  return {
+    value: highlightBadWords(descriptionWithWrappedAnchor, bannedWords),
+  }
+}
+
+export type Props = {
+  html?: string
+  onChange?: (s: string) => void
+  className?: string
+  style?: CSSProperties
+  onImagePickerClick?: () => void
+  bannedWords?: string[]
+  onInvalidUrlsChange?: (v: string[]) => void
+  onPreviewUrlChange?: (
+    v: {
+      title: string
+      url: string
+      image: string
+      description: string
+    } | null,
+  ) => void
+  setEditorRef?: (editor: HTMLElement) => void
+  isReplying?: boolean
+}
+
+export const RichTextEditor = ({
+  html,
+  onChange,
+  className,
+  style,
+  onImagePickerClick,
+  bannedWords = [],
+  onInvalidUrlsChange,
+  onPreviewUrlChange,
+  setEditorRef,
+  isReplying,
+}: // onAddLink,
+Props) => {
+  const bannedWordsRef = useRef<string[]>([])
+  bannedWordsRef.current = bannedWords
+  const [invalidUrls, setInvalidUrls] = useState<string[]>([])
+  const [previewUrl, setPreviewUrl] = useState<{
+    title?: string
+    url?: string
+    image?: string
+    description?: string
+    isFetching?: boolean
+  } | null>(null)
+
+  const {
+    data: { locale },
+  } = useContext(TogetherComponentGlobalContext)
+
+  const bannedString = bannedWords?.join(',') || ''
+  useEffect(() => {
+    const currHTML = reactQuillRef.current?.getEditor()?.root.innerHTML
+    debounceInputModify(currHTML)
+  }, [bannedString])
+
+  const fetchPreviewData = (url: string) => {
+    if (!previewUrl || previewUrl.url !== url) {
+      setPreviewUrl({
+        url,
+        isFetching: true,
+      })
+      callApi(
+        getApiPath(PATHS.FETCH_PREVIEW, {
+          _locale: locale,
+        }),
+        'POST',
+        {
+          data: {
+            link: url,
+          },
+        },
+      )
+        .then((res) => {
+          setPreviewUrl({
+            title: res?.data?.title,
+            description: res?.data?.description,
+            image: res?.data?.image || res?.data?.logo,
+            url,
+          })
+        })
+        .catch(() => {
+          setPreviewUrl(null)
+        })
+    }
+  }
+
+  const fetchPreviewDataRef = useRef(fetchPreviewData)
+  fetchPreviewDataRef.current = fetchPreviewData
+
+  const debounceInputModify = useCallback(
+    debounce((v: string) => {
+      if (v) {
+        const processedInput = inputModify(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?.(value)
+        }
+      }
+    }, 500),
+    [],
+  )
+
+  useEffect(() => {
+    onInvalidUrlsChange && onInvalidUrlsChange(invalidUrls)
+  }, [invalidUrls])
+  useEffect(() => {
+    if (onPreviewUrlChange) {
+      if (previewUrl?.url)
+        onPreviewUrlChange({
+          title: previewUrl.title || '',
+          url: previewUrl.url || '',
+          image: previewUrl.image || '',
+          description: previewUrl.description || '',
+        })
+      else onPreviewUrlChange(null)
+    }
+  }, [previewUrl])
+
+  const imageHandlerRef = useRef(onImagePickerClick)
+  imageHandlerRef.current = onImagePickerClick
+  const toolbarIdRef = useRef(String(Math.floor(Math.random() * 100000000)))
+  const cachedModules = useRef({
+    toolbar: {
+      handlers: {
+        image: () => imageHandlerRef.current?.(),
+        link: () => false,
+      },
+      container: '#toolbar-' + toolbarIdRef.current,
+    },
+    // toolbar: [
+    //   ['bold', 'italic', 'underline'],
+    //   [{ list: 'ordered' }, { list: 'bullet' }],
+    // ],
+    preserveWhiteSpace: true,
+  })
+  const contentEditableCaretPos = useRef<number>(-1)
+
+  const reactQuillRef = useRef<any>(null)
+  setEditorRef &&
+    reactQuillRef.current?.getEditor()?.root &&
+    setEditorRef(reactQuillRef.current?.getEditor()?.root)
+
+  const handleSelectionChange = () => {
+    if (reactQuillRef.current?.getEditor()?.root) {
+      const newCaretPos = getCaretCharacterOffsetWithin(
+        reactQuillRef.current?.getEditor()?.root,
+      )
+      const currHTML = reactQuillRef.current?.getEditor()?.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 = getMentionIdsFromString(currHTML, true)
+        if (mentionIds.length < LIMIT_MENTION - (isReplying ? 1 : 0)) {
+          const searchData = getSearchName(
+            reactQuillRef.current?.getEditor()?.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 as any)
+          }
+        } else {
+          replaceRangeRef.current = null
+          // to avoid race condition, we reuse this function to clear foundUsers
+          searchUser('', null as any)
+        }
+        // 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] = useState<Array<any>>([])
+  const [searchUserPosition, setSearchUserPosition] = useState<CSSProperties>({
+    top: 0,
+    left: 0,
+  })
+  const searchUser = useCallback(
+    debounce(
+      async (name: string, rect: DOMRect | null, excludeIds?: string[]) => {
+        if (!name || !DOMRect) {
+          return setFoundUsers([])
+        }
+        const res = await ((getCookie(BEARER_TOKEN_COOKIE)?.length || 0) > 0
+          ? callApiWithAuth(
+              getApiPath(PATHS.SEARCH_USER, {
+                _locale: locale,
+                name: name,
+              }),
+              'get',
+            )
+          : callApiWithAdminAuth(
+              getApiPath(ADMIN_PATHS.SEARCH_USER, {
+                _locale: locale,
+                name: name,
+              }),
+              'get',
+            ))
+        setSelectTagUserIndex(0)
+        setFoundUsers(
+          res?.data?.users?.filter(
+            (u: any) => !excludeIds?.includes(String(u.id)),
+          ),
+        )
+        const textNodeRect = rect
+        const containerRect = containerRef.current?.getBoundingClientRect()
+        if (textNodeRect && containerRect) {
+          const idealWidth = 343
+          const idealHeight = 256
+          const styleConfig: CSSProperties = {
+            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: string, name: string) => {
+    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 = reactQuillRef.current?.getEditor()?.root
+      editorRoot.focus()
+      const range = window.getSelection()?.getRangeAt(0)
+      range?.setStart(
+        replaceRangeRef.current.endContainer,
+        replaceRangeRef.current.endOffset,
+      )
+      range?.setEnd(
+        replaceRangeRef.current.endContainer,
+        replaceRangeRef.current.endOffset,
+      )
+    }
+    setFoundUsers([])
+  }
+  const containerRef = useRef<HTMLDivElement>(null)
+  const replaceRangeRef = useRef<Range | null>(null)
+  const foundUsersListRef = useRef<HTMLDivElement>(null)
+  const [selectTagUserIndex, setSelectTagUserIndex] = useState(0)
+  useEffect(() => {
+    // convenient behavior, scroll item into view when select using keyboard
+    if (foundUsersListRef.current) {
+      const parentElement = foundUsersListRef.current
+      const childElement = parentElement.children.item(
+        selectTagUserIndex,
+      ) as HTMLElement
+      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])
+
+  useEffect(() => {
+    const clickHandler = function (e: MouseEvent) {
+      if (!containerRef.current?.contains(e.target as Node)) {
+        // Clicked outside the box
+        setFoundUsers([])
+      }
+    }
+    window.addEventListener('click', clickHandler)
+    return () => {
+      window.removeEventListener('click', clickHandler)
+    }
+  }, [])
+  return (
+    <StyledEditorContainer
+      ref={containerRef}
+      className={className}
+      style={style}
+      onKeyDownCapture={(e) => {
+        // convenient behavior, use arrow to select tag user and enter to choose
+        if (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
+          }
+        }
+      }}
+    >
+      <CustomToolbar
+        id={toolbarIdRef.current}
+        onAddLink={(text, href) => {
+          const insertIndex = contentEditableCaretPos.current + 1
+          const currHTML = reactQuillRef.current?.getEditor()?.root.innerHTML
+          const newHTML =
+            (currHTML?.substring(0, insertIndex) || '') +
+            `<mocka data-href="${href}" data-url="true">${text}</mocka> ` +
+            (currHTML?.substring(insertIndex) || '')
+
+          onChange?.(newHTML)
+          debounceInputModify(newHTML)
+        }}
+      />
+      {ReactQuill && (
+        <ReactQuill
+          ref={reactQuillRef}
+          theme="snow"
+          value={html}
+          onChange={(t: string) => {
+            onChange?.(t)
+            debounceInputModify(t)
+            handleSelectionChange()
+          }}
+          onChangeSelection={() => {
+            handleSelectionChange()
+          }}
+          modules={cachedModules.current}
+          formats={[
+            'mocka1',
+            'mention',
+            'id',
+            'key',
+            'bold',
+            'italic',
+            'underline',
+            'list',
+            'bullet',
+          ]}
+        />
+      )}
+      {!!foundUsers?.length && (
+        <div
+          ref={foundUsersListRef}
+          className="mention-search-container"
+          style={searchUserPosition}
+        >
+          {foundUsers.map((foundUser, index) => (
+            <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)
+              }}
+            >
+              <UserAvatar
+                className="search-avatar"
+                username={foundUser.name}
+                avatar={foundUser.avatar}
+              />
+              <div>
+                <Text size="p2">{foundUser.name}</Text>
+                <Text size="p4" color="#595959">
+                  @{foundUser.username}
+                </Text>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+    </StyledEditorContainer>
+  )
+}
+
+const CustomToolbar = ({
+  onAddLink,
+  id,
+}: {
+  id?: string
+  onAddLink?: (text: string, href: string) => void
+}) => {
+  return (
+    <div
+      id={'toolbar-' + id}
+      onClick={(e) => {
+        e.preventDefault()
+        e.stopPropagation()
+      }}
+    >
+      <span className="ql-formats">
+        <button className="ql-bold" type="button" />
+        <button className="ql-italic" type="button" />
+        <button className="ql-underline" type="button" />
+      </span>
+      <span className="ql-formats">
+        <button className="ql-list" value="ordered" type="button" />
+        <button className="ql-list" value="bullet" type="button" />
+      </span>
+      <span className="ql-formats">
+        <button className="ql-image" type="button"></button>
+        {onAddLink && (
+          <PopoverMenu
+            className="link-tool-wrapper"
+            toggleButtonContent={<img className="link-icon" src={IconLink} />}
+            buttonProps={{
+              size: 'md',
+              color: 'transparent',
+            }}
+            align="end"
+          >
+            {({ setShow }) => (
+              <LinkToolInputPopover onAddUrl={onAddLink} setShow={setShow} />
+            )}
+          </PopoverMenu>
+        )}
+      </span>
+    </div>
+  )
+}
+
+// export const RichTextEditor = memo(Editor, (prev, next) => {
+//   return prev.html === next.html
+// })
+
+type LinkToolProps = {
+  onAddUrl: (text: string, url: string) => void
+  setShow?: (b: boolean) => void
+}
+const URL_WARN_MAP = [
+  'notification.limitUrlDomain',
+  'notification.urlWrongFormat',
+]
+const LinkToolInputPopover = ({ onAddUrl, setShow }: LinkToolProps) => {
+  const {
+    data: {
+      env: { isMarryBaby },
+    },
+  } = useContext(TogetherComponentGlobalContext)
+  const { t } = useTranslations()
+  const [urlValue, setUrlValue] = useState('')
+  const [textValue, setTextValue] = useState('')
+  const [urlWarnType, setUrlWarnType] = useState(-1)
+  const checkUrlValid = (v: string) => {
+    const trimmedUrl = reformatUrl(v.trim())
+    try {
+      const jsUrl = new URL(trimmedUrl)
+      if (!jsUrl.protocol.startsWith('http')) {
+        setUrlWarnType(1)
+        return false
+      }
+      if (
+        !ALLOW_DOMAIN_URL.some(
+          (o) =>
+            jsUrl.origin.endsWith('/' + o) || jsUrl.origin.endsWith('.' + o),
+        )
+      ) {
+        setUrlWarnType(0)
+        return false
+      }
+      setUrlWarnType(-1)
+      return true
+    } catch {
+      setUrlWarnType(1)
+      return false
+    }
+  }
+  const isValid = urlValue.trim() && textValue.trim() && urlWarnType < 0
+  return (
+    <div className="link-tool-popover">
+      <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 && (
+        <Text size="c2" className="error-text">
+          {t(URL_WARN_MAP[urlWarnType] as TranslationsKey)}
+        </Text>
+      )}
+      <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)}
+      />
+      <div
+        data-is-marrybaby={isMarryBaby}
+        className="link-input-button-wrapper"
+      >
+        <Button
+          theme={isMarryBaby ? 'marryBaby' : 'helloSites'}
+          size="sm"
+          color="primary"
+          className="link-input-button"
+          onClick={() => {
+            if (!isValid) return
+            onAddUrl(textValue.trim(), reformatUrl(urlValue.trim()))
+            setShow && setShow(false)
+          }}
+          isDisabled={!isValid}
+        >
+          {t('insert')}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export default RichTextEditor