@hhgtech/hhg-components 1.19.0-beta-7 → 1.19.0

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

@@ -1,915 +0,0 @@
-/* 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