Text Editor

import { Flex } from '@chakra-ui/react'
import { Description } from './Description'

// Disabling border for non-keyboard interactions
// @see https://github.com/chakra-ui/chakra-ui/blob/develop/packages/css-reset/README.md
import 'focus-visible/dist/focus-visible'

export function App() {
  return (
    <Flex
      flex={1}
      h="full"
      flexDirection="column"
      bg="transparent"
      minH={{ base: 'auto' }}
      maxW={{ base: 'auto', md: '600px' }}
      mx={{ base: 'auto' }}
    >
      <Description />
    </Flex>
  )
}

import { forwardRef } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'
import React, { createContext, memo } from 'react'

/**
 * Creates a provider component for a given context.
 *
 * @param {function} useValue - A function that takes props and returns the context value.
 *
 * @return An object containing the provider component, the context object, and a hook to consume the context.
 */
export function createProvider<
  ContextProps extends object,
  Props extends object,
>(useValue: (props: Props) => ContextProps) {
  const Context = createContext<ContextProps>({} as ContextProps)

  const useContext = () => {
    const context = React.useContext(Context)
    if (!Object.keys(context).length) {
      throw new Error(
        `【${
          (useValue as any).__PROVIDER__
        }】Context needs to be consumed in Provider`,
      )
    }

    return context
  }

  const Provider: React.FC<PropsWithChildren<Props>> = memo<
    PropsWithChildren<Props>
  >(
    forwardRef((props, ref) => (
      <Component {...props} ref={ref} {...useValue(props)} />
    )) as React.FC<PropsWithChildren<Props>>,
  )
  Provider.displayName = 'Provider'

  const Component: React.FC<PropsWithChildren<Props> & ContextProps> = memo<
    PropsWithChildren<Props> & ContextProps
  >(
    forwardRef(({ children, ...rest }, ref) => {
      return (
        <Context.Provider value={{ ...(rest as unknown as ContextProps), ref }}>
          {children}
        </Context.Provider>
      )
    }) as React.FC<PropsWithChildren<Props> & ContextProps>,
  )

  return {
    Provider,
    Context,
    useContext,
  }
}

declare type Override<T1, T2> = Omit<T1, keyof T2> & T2
declare type Writeable<T> = { -readonly [P in keyof T]-?: T[P] }
declare type ValueOf<T> = T[keyof T]

import type { FlexProps } from '@chakra-ui/react'
import { Flex } from '@chakra-ui/react'
import React, { memo } from 'react'
import { useDescriptionContext } from './Provider'

type Props = FlexProps

export const Container = memo<Props>(function Container(props) {
  const { ref, focused, onFocus } = useDescriptionContext()

  return (
    <Flex
      ref={ref}
      border="1px"
      borderRadius="md"
      borderColor={focused ? 'gray.400' : 'transparent'}
      _hover={{
        borderColor: 'gray.400',
      }}
      py={2}
      px={3}
      flexDirection="column"
      flex={1}
      position="relative"
      onFocus={onFocus}
      {...props}
    />
  )
})

import isEqual from 'lodash-es/isEqual'
import React, { memo, useCallback, useMemo } from 'react'
import { Editor, EditorContent, EditorProvider } from '../Editor'
import {
  parseDescription,
  stringifyDescription,
} from '../prosemirror/convertDescription'
import { Container } from './Container'
import { Placeholder } from './Placeholder'
import { Provider } from './Provider'
import { ToolBar } from './ToolBar'

export const Description = memo(function Description(props) {
  return (
    <Provider>
      <DescriptionHandler {...props} />
    </Provider>
  )
})

const DescriptionHandler = memo(function DescriptionHandler() {
  const initialValue = useMemo(() => stringifyDescription(null), [])

  const handleChange = useCallback(
    async (val: string) => {
      const description = parseDescription(val)
      if (isEqual(description, initialValue)) return

      console.log(description)
    },
    [initialValue],
  )

  return <Component onChange={handleChange} initialValue={initialValue} />
})

type ComponentProps = {
  onChange: (val: string) => void
  initialValue: string
}
const Component = memo<ComponentProps>(function Component(props) {
  const { onChange, initialValue } = props

  const handleChange = useCallback(
    (val: string) => {
      onChange(val)
    },
    [onChange],
  )

  return (
    <Container>
      <EditorProvider>
        <Editor onChange={handleChange} initialValue={initialValue}>
          <EditorContent style={{ minHeight: '300px' }} />
          <Placeholder />
          <ToolBar />
        </Editor>
      </EditorProvider>
    </Container>
  )
})

import React, { memo } from 'react'
import { EditorPlaceholder } from '../Editor/Editors/EditorPlaceholder'
import { useDescriptionContext } from './Provider'

export const Placeholder = memo(function Placeholder() {
  const { focused } = useDescriptionContext()

  if (focused) return null

  return (
    <EditorPlaceholder alignItems="flex-start">
      Write something here...
    </EditorPlaceholder>
  )
})

import { useOutsideClick } from '@chakra-ui/react'
import type { Dispatch, SetStateAction, MutableRefObject } from 'react'
import { useRef } from 'react'
import { useCallback, useState } from 'react'
import { createProvider } from '../createProvider'

type ContextProps = {
  focused: boolean
  toolbarFocused: boolean
  onFocus: () => void
  setToolbarFocused: Dispatch<SetStateAction<boolean>>
  ref: MutableRefObject<HTMLElement | null>
}

const useValue = (): ContextProps => {
  const [focused, setFocused] = useState<boolean>(false)
  const [toolbarFocused, setToolbarFocused] = useState<boolean>(false)
  const ref = useRef<HTMLElement | null>(null)

  useOutsideClick({
    ref,
    handler: () => {
      if (toolbarFocused) return

      setFocused(false)
    },
  })

  const onFocus = useCallback(() => {
    setFocused(true)
  }, [])

  return {
    focused,
    onFocus,
    ref,
    toolbarFocused,
    setToolbarFocused,
  }
}
useValue.__PROVIDER__ = 'Description/Provider.tsx'

export const { Provider, useContext: useDescriptionContext } =
  createProvider(useValue)

import { Divider, Stack } from '@chakra-ui/react'
import React, { memo, useCallback } from 'react'
import {
  Bold,
  BulletList,
  DecreaseListIndent,
  IncreaseListIndent,
  Italic,
  Link,
  OrderedList,
  Strikethrough,
  Underline,
  Emoji,
  AtMention,
} from '../Editor/ToolBar'
import { useDescriptionContext } from './Provider'

export const ToolBar = memo(function ToolBar() {
  const { focused, setToolbarFocused, toolbarFocused } = useDescriptionContext()

  const handleOpened = useCallback(() => {
    setToolbarFocused(true)
  }, [setToolbarFocused])

  const handleClosed = useCallback(() => {
    setToolbarFocused(false)
  }, [setToolbarFocused])

  return (
    <Stack
      flex={1}
      direction="row"
      spacing={0}
      minH={8}
      alignItems="center"
      bg="transparent"
      flexWrap="wrap"
    >
      {focused && (
        <>
          <Bold />
          <Italic />
          <Underline />
          <Strikethrough />
          <BulletList />
          <OrderedList />
          <IncreaseListIndent />
          <DecreaseListIndent />
          <Link />
          <Divider orientation="vertical" borderColor="gray.400" h={5} />
          <AtMention />
          <Emoji onOpened={handleOpened} onClosed={handleClosed} />
        </>
      )}
    </Stack>
  )
})

import type { EditorProps } from 'prosemirror-view'
import type { PropsWithChildren } from 'react'
import React, { memo, useMemo } from 'react'
import { schema, plugins } from '../prosemirror/config'
import { EditorContainer } from './Editors'

type Props = PropsWithChildren<
  {
    initialValue: string
    forceUpdate?: number
    onChange?: (val: string) => void
    resetView?: number
  } & EditorProps
>

export const Editor = memo<Props>(function Editor(props) {
  const pluginsProp = useMemo(() => plugins(), [])

  return (
    <EditorContainer
      onChange={props.onChange}
      {...props}
      debounce={500}
      schema={schema}
      plugins={pluginsProp}
      initialValue={props.initialValue}
    >
      {props.children}
    </EditorContainer>
  )
})

import type { PropsWithChildren } from 'react'
import { EditorEmojiMenuProvider, EditorEmojiMenu } from '../EditorEmojiMenu'
import { EditorLinkModalProvider, EditorLinkModal } from '../EditorLinkModal'
import {
  EditorMentionMenuProvider,
  EditorMentionMenu,
} from '../EditorMentionMenu'

export function EditorProvider({ children }: PropsWithChildren) {
  return (
    <EditorLinkModalProvider>
      <EditorEmojiMenuProvider>
        <EditorMentionMenuProvider>
          {children}
          <EditorLinkModal />
          <EditorEmojiMenu />
          <EditorMentionMenu />
        </EditorMentionMenuProvider>
      </EditorEmojiMenuProvider>
    </EditorLinkModalProvider>
  )
}

import { Modal } from '@chakra-ui/react'
import React from 'react'
import { MenuList } from './MenuList'
import { useEditorEmojiMenuContext } from './Provider'

export function EditorEmojiMenu() {
  const { isOpen, onClose } = useEditorEmojiMenuContext()

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="xs"
      autoFocus={false}
      trapFocus={false}
      motionPreset="none"
    >
      {isOpen && <MenuList />}
    </Modal>
  )
}

import type { ModalBodyProps } from '@chakra-ui/react'
import { ModalBody, ModalContent } from '@chakra-ui/react'
import React, { useCallback } from 'react'
import type { BaseEmoji } from '../emoji'
import { useMenuStyle } from '../hooks/useMenuStyle'
import { EmojiItem } from './EmojiItem'
import { useEditorEmojiMenuContext } from './Provider'

export function MenuList() {
  const { emojis, state, setValue, containerRef } = useEditorEmojiMenuContext()
  const menuStyles = useMenuStyle()

  const handleClick = useCallback(
    (val: BaseEmoji) => {
      setValue(val)
    },
    [setValue],
  )

  return (
    <ModalContent
      position="fixed"
      top={state.y}
      left={state.x}
      mb={0}
      mt={0}
      maxW="450px"
      maxH={56}
      overflowY="scroll"
      ref={containerRef}
    >
      <ModalBody w="full" px={0} {...(menuStyles.list as ModalBodyProps)}>
        {emojis.map((e, i) => (
          <EmojiItem onClick={handleClick} emoji={e} key={e.id} index={i} />
        ))}
      </ModalBody>
    </ModalContent>
  )
}

import {
  Input,
  Stack,
  Modal,
  ModalBody,
  ModalContent,
  Button,
} from '@chakra-ui/react'
import React, { useCallback } from 'react'

import { useEditorLinkModalContext } from './Provider'

const MARGIN = 30
export function EditorLinkModal() {
  const { isOpen, x, y, onClose, setInput, input } = useEditorLinkModalContext()

  const handleInput = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>, type: keyof typeof input) => {
      setInput({
        ...input,
        [type]: e.target.value,
      })
    },
    [input, setInput],
  )

  return (
    <Modal isOpen={isOpen} onClose={onClose} size="xs">
      <ModalContent position="fixed" top={x + MARGIN} left={y} mb={0} mt={0}>
        <ModalBody>
          <Stack direction="row" alignItems="center" spacing={2}>
            <Input
              value={input.url}
              onChange={(e) => handleInput(e, 'url')}
              focusBorderColor="none"
              _focusVisible={{ boxShadow: 'none', outline: 'none' }}
              placeholder="Add URL"
              size="sm"
            />
            <Button size="sm" onClick={onClose}>
              Save
            </Button>
          </Stack>
        </ModalBody>
      </ModalContent>
    </Modal>
  )
}

import { useCallback, useState } from 'react'
import { createProvider } from '../createProvider'

type ContextProps = {
  isOpen: boolean
  x: number
  y: number
  input: {
    url: string
  }
  callback: (input: State['input']) => void
  setInput: (input: State['input']) => void
  onOpen: (options: { x: State['x']; y: State['y'] }) => Promise<State['input']>
  onClose: () => void
}

type State = {
  isOpen: boolean
  x: number
  y: number
  input: {
    url: string
  }
  callback: (input: State['input']) => void
}
const initializeState = (): State => ({
  isOpen: false,
  x: 0,
  y: 0,
  input: {
    url: '',
  },
  callback: () => {},
})

const useValue = (): ContextProps => {
  const [state, setState] = useState<State>(initializeState())

  const resetState = useCallback(() => {
    setState(initializeState())
  }, [])

  const onClose = useCallback(() => {
    setState((s) => ({ ...s, isOpen: false }))
    state.callback(state.input)
    resetState()
  }, [resetState, setState, state])

  const onOpen = useCallback(
    ({ x, y }: { x: State['x']; y: State['y'] }) => {
      return new Promise<State['input']>((resolve) => {
        setState((s) => ({
          ...s,
          isOpen: true,
          x,
          y,
          callback: resolve,
        }))
      })
    },
    [setState],
  )

  const setInput = useCallback(
    (input: State['input']) => {
      setState((s) => ({ ...s, input }))
    },
    [setState],
  )

  return {
    ...state,
    setInput,
    onOpen,
    onClose,
  }
}
useValue.__PROVIDER__ = 'EditorLinkModal/Provider.tsx'
export const {
  Provider: EditorLinkModalProvider,
  useContext: useEditorLinkModalContext,
} = createProvider(useValue)

import { Modal } from '@chakra-ui/react'
import React, { memo } from 'react'
import { MenuContent } from './MenuContent'
import { useEditorMentionMenuContext } from './Provider'

export const EditorMentionMenu = memo(function EditorMentionMenu() {
  const { isOpen, onClose } = useEditorMentionMenuContext()

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="xs"
      autoFocus={false}
      trapFocus={false}
      motionPreset="none"
    >
      {isOpen && <MenuContent />}
    </Modal>
  )
})

import type { ModalBodyProps } from '@chakra-ui/react'
import { ModalBody, ModalContent } from '@chakra-ui/react'
import React, { memo } from 'react'
import { useMenuStyle } from '../hooks/useMenuStyle'
import { MenuList } from './MenuList'
import { useEditorMentionMenuContext } from './Provider'

export const MenuContent = memo(function MenuContent() {
  const { state, containerRef } = useEditorMentionMenuContext()
  const menuStyles = useMenuStyle().list

  return (
    <ModalContent
      position="fixed"
      top={state.y}
      left={state.x}
      mb={0}
      mt={0}
      maxW="450px"
      maxH={56}
      overflowY="scroll"
      ref={containerRef}
    >
      <ModalBody w="full" px={0} {...(menuStyles as ModalBodyProps)}>
        <MenuList />
      </ModalBody>
    </ModalContent>
  )
})

import React, { memo, useCallback, useEffect, useState } from 'react'
import { useDebounce } from '../hooks/useDebounce'
import { MentionItem } from './MentionItem'
import { Empty } from './MentionItem/Empty'
import { MenuLoading } from './MenuLoading'
import type { SetValueParam } from './Provider'
import { useEditorMentionMenuContext } from './Provider'

export const MenuList = memo(function MenuList() {
  const { mentions, setValue, refetch, state } = useEditorMentionMenuContext()
  const [hasChangedQuery, setHasChangedQuery] = useState<number>(0)
  const [searching, setSearching] = useState<boolean>(true)

  useEffect(() => {
    if (!state.query) return
    setSearching(true)
    setHasChangedQuery((prev) => prev + 1)
  }, [state.query])

  const handleDebounce = useCallback(async () => {
    await refetch({ queryText: state.query })

    // TODO: avoid duplicated rendering.
    setTimeout(() => {
      setSearching(false)
    }, 100)
  }, [state.query, refetch])

  useDebounce(hasChangedQuery, handleDebounce, 500)

  const handleClick = useCallback(
    (val: SetValueParam) => {
      setValue(val)
    },
    [setValue],
  )

  if (searching) return <MenuLoading />
  if (!searching && mentions.length === 0)
    return (
      <Empty>Mention a teammate or link to a task, project, or message.</Empty>
    )

  return (
    <>
      {mentions.map((m, i) => (
        <MentionItem
          onClick={handleClick}
          mention={m}
          key={`${m.type}_${m.id}`}
          index={i}
        />
      ))}
    </>
  )
})

import type { IconProps as ChakraIconProps } from '@chakra-ui/react'
import { Icon as ChakraIcon } from '@chakra-ui/react'
import { forwardRef } from '@chakra-ui/react'
import React from 'react'
import type { IconType } from './icons'
import { icons } from './icons'

type Props = ChakraIconProps & {
  icon: IconType
  size?: Sizes
  ref?: React.ForwardedRef<any>
}

const sizes = {
  '3xl': {
    w: 10,
    h: 10,
  },
  '2xl': {
    w: 8,
    h: 8,
  },
  xl: {
    w: 6,
    h: 6,
  },
  lg: {
    w: '1.5em',
    h: '1.5em',
  },
  md: {
    w: '1.25em',
    h: '1.25em',
  },
  sm: {
    w: '1.15em',
    h: '1.15em',
  },
  xs: {
    w: '1em',
    h: '1em',
  },
} as const
type Sizes = keyof typeof sizes

export const Icon = forwardRef<Props, 'svg'>((props, ref) => {
  const { size, icon, ...iconProps } = props
  const iconComponent = icons[icon]
  const sizeStyle = sizes[size ?? 'md']

  return (
    <ChakraIcon
      ref={ref}
      as={iconComponent}
      color="whiteAlpha"
      {...sizeStyle}
      {...(iconProps as any)}
    />
  )
})

Icon.id = 'Icon'

import {
  AiFillCheckCircle,
  AiFillPlayCircle,
  AiOutlineProject,
  AiOutlineFileText,
  AiOutlineFilePdf,
  AiFillLike,
  AiOutlineLike,
} from 'react-icons/ai'
import {
  BiInfoCircle,
  BiPencil,
  BiLeftArrowAlt,
  BiImageAlt,
  BiTrash,
  BiHome,
  BiSun,
  BiSort,
  BiMoveVertical,
  BiMenu,
  BiCompass,
  BiCodeAlt,
  BiCheckCircle,
  BiBell,
  BiNotification,
  BiBarChart,
  BiRocket,
  BiIdCard,
  BiHelpCircle,
  BiUserPlus,
  BiTrashAlt,
  BiGridAlt,
  BiTask,
  BiBookOpen,
  BiLayerPlus,
  BiMobile,
  BiGridHorizontal,
  BiChevronRight,
  BiCopyAlt,
  BiX,
  BiChevronDown,
  BiChevronLeft,
  BiPlay,
  BiPause,
  BiPlayCircle,
  BiMovie,
  BiShapePolygon,
  BiPlus,
  BiSpreadsheet,
  BiFileBlank,
  BiLayout,
  BiDotsHorizontalRounded,
  BiMessageRoundedDots,
  BiMessageRounded,
  BiCheck,
  BiSearch,
  BiListPlus,
  BiTime,
  BiTable,
  BiLockAlt,
  BiFilterAlt,
  BiFilter,
  BiCustomize,
  BiArrowToRight,
  BiGridVertical,
  BiSliderAlt,
  BiSubdirectoryRight,
  BiBookAdd,
  BiSquareRounded,
  BiGitPullRequest,
  BiExpand,
  BiBeenHere,
  BiCalendar,
  BiStrikethrough,
  BiListUl,
  BiListOl,
  BiRightIndent,
  BiLeftIndent,
  BiLink,
  BiUnlink,
  BiAt,
  BiLinkExternal,
  BiGroup,
  BiCalendarAlt,
  BiUser,
  BiDownload,
  BiCommentDots,
  BiDownArrowAlt,
  BiEditAlt,
  BiPhotoAlbum,
  BiDetail,
  BiSave,
} from 'react-icons/bi'
import { BsTagFill } from 'react-icons/bs'
import { FaTwitter, FaGithub, FaMoon, FaRegStar, FaStar } from 'react-icons/fa'
import { FiBold, FiItalic, FiUnderline } from 'react-icons/fi'
import { HiOutlineMail, HiOutlineEmojiHappy } from 'react-icons/hi'
import { IoMdAttach } from 'react-icons/io'
import { MdSort, MdTextFormat } from 'react-icons/md'
import { TiFlowChildren } from 'react-icons/ti'

export const icons = {
  arrowDownAlt: BiDownArrowAlt,
  arrowLeftAlt: BiLeftArrowAlt,
  arrowToRight: BiArrowToRight,
  at: BiAt,
  attach: IoMdAttach,
  barChart: BiBarChart,
  beenHere: BiBeenHere,
  bell: BiBell,
  bold: FiBold,
  bookAdd: BiBookAdd,
  bookOpen: BiBookOpen,
  calendar: BiCalendar,
  calendarAlt: BiCalendarAlt,
  check: BiCheck,
  checkCircle: BiCheckCircle,
  checkCircleFilled: AiFillCheckCircle,
  chevronDown: BiChevronDown,
  chevronLeft: BiChevronLeft,
  chevronRight: BiChevronRight,
  codeAlt: BiCodeAlt,
  commentDots: BiCommentDots,
  compass: BiCompass,
  copyAlt: BiCopyAlt,
  customize: BiCustomize,
  detail: BiDetail,
  dotsHorizontalRounded: BiDotsHorizontalRounded,
  download: BiDownload,
  editAlt: BiEditAlt,
  emojiHappy: HiOutlineEmojiHappy,
  fileBlank: BiFileBlank,
  fillLike: AiFillLike,
  filter: BiFilter,
  filterAlt: BiFilterAlt,
  flowChildren: TiFlowChildren,
  fullscreenOutline: BiExpand,
  gitPullRequest: BiGitPullRequest,
  github: FaGithub,
  gridAlt: BiGridAlt,
  gridHorizontal: BiGridHorizontal,
  gridVertical: BiGridVertical,
  group: BiGroup,
  help: BiHelpCircle,
  home: BiHome,
  idCard: BiIdCard,
  imageAlt: BiImageAlt,
  infoCircle: BiInfoCircle,
  italic: FiItalic,
  layerPlus: BiLayerPlus,
  layout: BiLayout,
  leftIndent: BiLeftIndent,
  link: BiLink,
  linkExternal: BiLinkExternal,
  listOl: BiListOl,
  listPlus: BiListPlus,
  listUl: BiListUl,
  lockAlt: BiLockAlt,
  mailOutline: HiOutlineMail,
  menu: BiMenu,
  messageRounded: BiMessageRounded,
  messageRoundedDots: BiMessageRoundedDots,
  mobile: BiMobile,
  moon: FaMoon,
  moveVertical: BiMoveVertical,
  movie: BiMovie,
  notification: BiNotification,
  outlineFilePdf: AiOutlineFilePdf,
  outlineFileText: AiOutlineFileText,
  outlineLike: AiOutlineLike,
  outlineProject: AiOutlineProject,
  pause: BiPause,
  pencil: BiPencil,
  photoAlbum: BiPhotoAlbum,
  play: BiPlay,
  playCircle: AiFillPlayCircle,
  playCircleOutline: BiPlayCircle,
  plus: BiPlus,
  tag: BsTagFill,
  rightIndent: BiRightIndent,
  rocket: BiRocket,
  save: BiSave,
  search: BiSearch,
  shapePolygon: BiShapePolygon,
  sliderAlt: BiSliderAlt,
  sort2: BiSort,
  sort: MdSort,
  spreadsheet: BiSpreadsheet,
  squareRounded: BiSquareRounded,
  starFilled: FaStar,
  starOutline: FaRegStar,
  strikethrough: BiStrikethrough,
  subdirectoryRight: BiSubdirectoryRight,
  sun: BiSun,
  table: BiTable,
  task: BiTask,
  textFormat: MdTextFormat,
  time: BiTime,
  trash: BiTrash,
  trashAlt: BiTrashAlt,
  twitter: FaTwitter,
  underline: FiUnderline,
  unlink: BiUnlink,
  user: BiUser,
  userPlus: BiUserPlus,
  x: BiX,
} as const

export type IconType = keyof typeof icons

import { PortalManager, Popover } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'
import React from 'react'

export function PopoverEditorLink(props: PropsWithChildren) {
  return (
    <PortalManager zIndex={1500}>
      <Popover trigger="hover" isLazy placement="bottom-start" openDelay={500}>
        {props.children}
      </Popover>
    </PortalManager>
  )
}

import { Flex, Portal, PopoverBody, PopoverContent } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'

export function PopoverEditorLinkContent(props: PropsWithChildren) {
  return (
    <Portal>
      <PopoverContent contentEditable={false}>
        <PopoverBody boxShadow="md" borderRadius="md">
          <Flex fontSize="sm" alignItems="center" userSelect="none">
            {props.children}
          </Flex>
        </PopoverBody>
      </PopoverContent>
    </Portal>
  )
}

import { Flex, Spinner } from '@chakra-ui/react'
import React, { memo } from 'react'

export const PopoverEditorLinkLoading = memo(
  function PopoverEditorLinkLoading() {
    return (
      <Flex alignItems="center" justifyContent="center">
        <Spinner size="sm" color="gray.400" emptyColor="gray.200" />
      </Flex>
    )
  },
)

import { Text, type TextProps } from '@chakra-ui/react'
import React from 'react'
import { useLinkStyle } from '../hooks/useLinkStyle'

type Props = TextProps

export function PopoverEditorLinkText(props: Props) {
  const { style } = useLinkStyle()
  return (
    <Text
      as="span"
      {...(style as TextProps)}
      fontSize="sm"
      ml={3}
      flex={1}
      {...props}
    />
  )
}

import type { LinkProps } from '@chakra-ui/react'
import { Link, PopoverTrigger } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'
import { useLinkStyle } from '../hooks/useLinkStyle'

export function PopoverEditorLinkTrigger(props: PropsWithChildren) {
  const { style } = useLinkStyle()

  return (
    <PopoverTrigger>
      <Link {...(style as LinkProps)}>{props.children}</Link>
    </PopoverTrigger>
  )
}

import { Portal, Box, PopoverContent, useOutsideClick } from '@chakra-ui/react'
import React, { memo, useCallback, useRef } from 'react'
import type { BaseEmoji } from '../emoji'
import { EmojiPicker } from '../emoji'
import { usePopoverEmojiContext } from './Provider'

import 'emoji-mart/css/emoji-mart.css'

export const Content: React.FC = memo(function Content() {
  const { onClose } = usePopoverEmojiContext()
  const ref = useRef<HTMLDivElement | null>(null)

  useOutsideClick({
    ref,
    handler: () => onClose(),
  })

  const handleSelect = useCallback(
    (emoji: BaseEmoji) => {
      onClose(emoji)
    },
    [onClose],
  )

  return (
    <Portal>
      <Box zIndex="popover" w="full" h="full" ref={ref}>
        <PopoverContent boxShadow="none" border="none" w="auto">
          <EmojiPicker onSelect={handleSelect} title="Interactive UI" />
        </PopoverContent>
      </Box>
    </Portal>
  )
})

import { Flex, PortalManager, PopoverTrigger, Popover } from '@chakra-ui/react'
import type { PropsWithChildren } from 'react'
import React from 'react'
import { Content } from './Content'
import { usePopoverEmojiContext } from './Provider'
import { Provider } from './Provider'

type Props = {
  onOpened?: () => void
  onClosed?: () => void
}

export function PopoverEmoji(props: PropsWithChildren<Props>) {
  return (
    <Provider onOpened={props.onOpened} onClosed={props.onClosed}>
      <Component {...props} />
    </Provider>
  )
}

function Component(props: PropsWithChildren) {
  const { isOpen } = usePopoverEmojiContext()

  return (
    <PortalManager zIndex={1500}>
      <Popover isOpen={isOpen} placement="right-end" closeOnBlur={false}>
        <PopoverTrigger>
          <Flex>{props.children}</Flex>
        </PopoverTrigger>
        {isOpen && <Content />}
      </Popover>
    </PortalManager>
  )
}

import { useCallback, useState } from 'react'
import { createProvider } from '../createProvider'
import type { BaseEmoji } from '../emoji'

type ContextProps = {
  isOpen: boolean
  emoji: BaseEmoji | null
  onClose: (data?: BaseEmoji) => void
  onOpen: () => Promise<BaseEmoji>
}

type Props = {
  onChange?: (emoji?: BaseEmoji) => void
  onOpened?: () => void
  onClosed?: () => void
}
const useValue = (props: Props): ContextProps => {
  const [isOpen, setIsOpen] = useState<boolean>(false)
  const [emoji, setEmoji] = useState<BaseEmoji | null>(null)
  const [callback, setCallback] = useState<(val?: BaseEmoji) => void>()

  const onClose = useCallback(
    (data?: BaseEmoji) => {
      setIsOpen(false)
      callback?.(data)
      props.onChange?.(data)
      props.onClosed?.()
      setEmoji(data ?? null)
    },
    [callback, props],
  )

  const onOpen = useCallback((): Promise<BaseEmoji> => {
    return new Promise((resolve) => {
      setIsOpen(true)
      props.onOpened?.()
      setCallback(() => resolve)
    })
  }, [props])

  return {
    isOpen,
    emoji,
    onClose,
    onOpen,
  }
}
useValue.__PROVIDER__ = 'PopoverEmoji/Provider.tsx'
export const { Provider, useContext: usePopoverEmojiContext } =
  createProvider(useValue)