@mantine/tiptap/cjs/RichTextEditorControl/RichTextEditorLinkControl.cjs.map

Rich text editor based on tiptap

{"version":3,"file":"RichTextEditorLinkControl.cjs","names":["IconLink","useRichTextEditorContext","Popover","RichTextEditorControlBase","TextInput","Tooltip","UnstyledButton","IconExternalLink","Button","classes"],"sources":["../../src/RichTextEditorControl/RichTextEditorLinkControl.tsx"],"sourcesContent":["import { useState } from 'react';\nimport { useEditorState } from '@tiptap/react';\nimport {\n  BoxProps,\n  Button,\n  CompoundStylesApiProps,\n  factory,\n  Factory,\n  Popover,\n  PopoverProps,\n  rem,\n  TextInput,\n  Tooltip,\n  UnstyledButton,\n  useProps,\n  useResolvedStylesApi,\n} from '@mantine/core';\nimport { useDisclosure, useInputState, useWindowEvent } from '@mantine/hooks';\nimport { IconExternalLink, IconLink } from '../icons/Icons';\nimport { useRichTextEditorContext } from '../RichTextEditor.context';\nimport { RichTextEditorControlBase, RichTextEditorControlBaseProps } from './RichTextEditorControl';\nimport classes from '../RichTextEditor.module.css';\n\nexport type RichTextEditorLinkControlStylesNames =\n  | 'control'\n  | 'linkEditor'\n  | 'linkEditorDropdown'\n  | 'linkEditorSave'\n  | 'linkEditorInput'\n  | 'linkEditorExternalControl';\n\nexport interface RichTextEditorLinkControlProps\n  extends\n    BoxProps,\n    Omit<RichTextEditorControlBaseProps, 'classNames' | 'styles' | 'vars'>,\n    CompoundStylesApiProps<RichTextEditorLinkControlFactory> {\n  /** Props passed down to Popover component */\n  popoverProps?: Partial<PopoverProps>;\n\n  /** Determines whether external link control tooltip should be disabled @default false */\n  disableTooltips?: boolean;\n\n  /** Initial state for determining whether the link should be an external @default false */\n  initialExternal?: boolean;\n}\n\nexport type RichTextEditorLinkControlFactory = Factory<{\n  props: RichTextEditorLinkControlProps;\n  ref: HTMLButtonElement;\n  stylesNames: RichTextEditorLinkControlStylesNames;\n  compound: true;\n}>;\n\nconst LinkIcon: RichTextEditorControlBaseProps['icon'] = (props) => <IconLink {...props} />;\n\nexport const RichTextEditorLinkControl = factory<RichTextEditorLinkControlFactory>((_props) => {\n  const props = useProps('RichTextEditorLinkControl', null, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    vars,\n    icon,\n    popoverProps,\n    disableTooltips,\n    initialExternal,\n    ...others\n  } = props;\n\n  const ctx = useRichTextEditorContext();\n\n  const stylesApiProps = { classNames, styles };\n\n  const [url, setUrl] = useInputState('');\n  const [external, setExternal] = useState(initialExternal);\n  const [opened, { open, close }] = useDisclosure(false);\n\n  const handleOpen = () => {\n    open();\n    const linkData = ctx.editor?.getAttributes('link');\n    setUrl(linkData?.href || '');\n    setExternal(linkData?.href ? linkData?.target === '_blank' : initialExternal);\n  };\n\n  const handleClose = () => {\n    close();\n    setUrl('');\n    setExternal(initialExternal);\n  };\n\n  const setLink = () => {\n    handleClose();\n    url === ''\n      ? ctx.editor?.chain().focus().extendMarkRange('link').unsetLink().run()\n      : ctx.editor\n          ?.chain()\n          .focus()\n          .extendMarkRange('link')\n          .setLink({ href: url, target: external ? '_blank' : null })\n          .run();\n  };\n\n  const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (event.key === 'Enter') {\n      event.preventDefault();\n      setLink();\n    }\n  };\n\n  useWindowEvent('edit-link', handleOpen, false);\n\n  const active = useEditorState({\n    editor: ctx.editor ?? null,\n    selector: (state) => state.editor?.isActive('link') ?? false,\n  });\n\n  const { resolvedClassNames, resolvedStyles } =\n    useResolvedStylesApi<RichTextEditorLinkControlFactory>({ classNames, styles, props });\n\n  return (\n    <Popover\n      trapFocus\n      shadow=\"md\"\n      withinPortal\n      opened={opened}\n      onChange={(_opened) => !_opened && handleClose()}\n      offset={-44}\n      zIndex={10000}\n      {...popoverProps}\n    >\n      <Popover.Target>\n        <RichTextEditorControlBase\n          icon={icon || LinkIcon}\n          {...others}\n          aria-label={ctx.labels.linkControlLabel}\n          title={ctx.labels.linkControlLabel}\n          onClick={handleOpen}\n          active={active ?? false}\n          classNames={resolvedClassNames}\n          styles={resolvedStyles}\n          className={className}\n          style={style}\n          variant={ctx.variant}\n        />\n      </Popover.Target>\n\n      <Popover.Dropdown {...ctx.getStyles('linkEditorDropdown', stylesApiProps)}>\n        <div {...ctx.getStyles('linkEditor', stylesApiProps)}>\n          <TextInput\n            placeholder={ctx.labels.linkEditorInputPlaceholder}\n            aria-label={ctx.labels.linkEditorInputLabel}\n            type=\"url\"\n            value={url}\n            onChange={setUrl}\n            classNames={{ input: ctx.getStyles('linkEditorInput', stylesApiProps).className }}\n            onKeyDown={handleInputKeydown}\n            rightSection={\n              <Tooltip\n                label={\n                  external ? ctx.labels.linkEditorExternalLink : ctx.labels.linkEditorInternalLink\n                }\n                events={{ hover: true, focus: true, touch: true }}\n                withinPortal\n                withArrow\n                disabled={disableTooltips}\n                zIndex={10000}\n              >\n                <UnstyledButton\n                  onClick={() => setExternal((e) => !e)}\n                  data-active={external || undefined}\n                  {...ctx.getStyles('linkEditorExternalControl', stylesApiProps)}\n                >\n                  <IconExternalLink style={{ width: rem(14), height: rem(14) }} />\n                </UnstyledButton>\n              </Tooltip>\n            }\n          />\n\n          <Button\n            variant=\"default\"\n            onClick={setLink}\n            {...ctx.getStyles('linkEditorSave', stylesApiProps)}\n          >\n            {ctx.labels.linkEditorSave}\n          </Button>\n        </div>\n      </Popover.Dropdown>\n    </Popover>\n  );\n});\n\nRichTextEditorLinkControl.classes = classes;\nRichTextEditorLinkControl.displayName = '@mantine/tiptap/RichTextEditorLinkControl';\n"],"mappings":"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"}