@toptal/picasso-rich-text-editor 100.0.10 → 100.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-rich-text-editor",
-  "version": "100.0.10",
+  "version": "100.1.0",
   "description": "Picasso rich text editor",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-rich-text-editor#readme",
@@ -46,8 +46,9 @@
     "lexical": "0.11.3",
     "@toptal/picasso-container": "100.0.1",
     "@toptal/picasso-button": "100.0.2",
+    "@toptal/picasso-checkbox": "100.1.0",
     "@toptal/picasso-icons": "100.0.1",
-    "@toptal/picasso-file-input": "100.0.3",
+    "@toptal/picasso-file-input": "100.0.4",
     "@toptal/picasso-image": "100.0.1",
     "@toptal/picasso-outlined-input": "100.1.0",
     "@toptal/picasso-list": "100.0.1",
@@ -78,6 +79,7 @@
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src",
+    "!src/**/*.figma.ts",
     "eager.js",
     "eager.d.ts"
   ],

package/src/LexicalEditor/hooks/useOnFocus/test.ts

@@ -1,6 +1,6 @@
 import { renderHook, act } from '@testing-library/react-hooks'
 
-import useOnFocus from './use-on-focus'
+import useOnFocus, { INTERNAL_DIALOG_ATTRIBUTE } from './use-on-focus'
 
 let mockEvent: React.FocusEvent<HTMLDivElement>
 
@@ -73,4 +73,118 @@ describe('useOnFocus', () => {
       })
     })
   })
+
+  it('calls onFocus once while focus stays inside the editor', () => {
+    const onFocus = jest.fn()
+    const { result } = renderHook(() => useOnFocus({ onFocus }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+      result.current.handleFocus(mockEvent)
+    })
+
+    expect(onFocus).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not blur when focus moves into a plugin dialog', () => {
+    const onBlur = jest.fn()
+    const dialog = document.createElement('div')
+    const input = document.createElement('input')
+
+    dialog.setAttribute(INTERNAL_DIALOG_ATTRIBUTE, '')
+    dialog.appendChild(input)
+
+    const { result } = renderHook(() => useOnFocus({ onBlur }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+    act(() => {
+      result.current.handleBlur(getFocusEvent(input))
+    })
+
+    expect(result.current.focused).toBe(true)
+    expect(onBlur).not.toHaveBeenCalled()
+  })
+
+  it('calls onFocus again after a blur', () => {
+    const onFocus = jest.fn()
+    const { result } = renderHook(() => useOnFocus({ onFocus }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+    act(() => {
+      result.current.handleBlur(mockEvent)
+    })
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+
+    expect(onFocus).toHaveBeenCalledTimes(2)
+  })
+
+  it("does not blur when focus moves to the dialog's focus guard", () => {
+    const onBlur = jest.fn()
+    const portal = document.createElement('div')
+    const guard = document.createElement('span')
+    const dialog = document.createElement('div')
+
+    guard.setAttribute('data-base-ui-focus-guard', '')
+    dialog.setAttribute(INTERNAL_DIALOG_ATTRIBUTE, '')
+    portal.append(guard, dialog)
+
+    const { result } = renderHook(() => useOnFocus({ onBlur }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+    act(() => {
+      result.current.handleBlur(getFocusEvent(guard))
+    })
+
+    expect(onBlur).not.toHaveBeenCalled()
+  })
+
+  it('blurs when focus moves to a focus guard of another dialog', () => {
+    const onBlur = jest.fn()
+    const portal = document.createElement('div')
+    const guard = document.createElement('span')
+
+    guard.setAttribute('data-base-ui-focus-guard', '')
+    portal.append(guard, document.createElement('div'))
+
+    const { result } = renderHook(() => useOnFocus({ onBlur }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+    act(() => {
+      result.current.handleBlur(getFocusEvent(guard))
+    })
+
+    expect(onBlur).toHaveBeenCalledTimes(1)
+  })
+
+  it('does not blur when focus moves within the editor', () => {
+    const onBlur = jest.fn()
+    const wrapper = document.createElement('div')
+    const content = document.createElement('div')
+
+    wrapper.appendChild(content)
+
+    const { result } = renderHook(() => useOnFocus({ onBlur }))
+
+    act(() => {
+      result.current.handleFocus(mockEvent)
+    })
+    act(() => {
+      result.current.handleBlur({
+        relatedTarget: content,
+        currentTarget: wrapper,
+      } as unknown as React.FocusEvent<HTMLDivElement>)
+    })
+
+    expect(onBlur).not.toHaveBeenCalled()
+  })
 })

package/src/LexicalEditor/hooks/useOnFocus/use-on-focus.ts

@@ -1,6 +1,10 @@
-import { useCallback, useState } from 'react'
+import { useCallback, useRef, useState } from 'react'
 import { noop } from '@toptal/picasso-utils'
 
+// Plugin dialogs render in a portal outside the editor, but moving focus into
+// one is still part of editing, so it must not blur the editor
+export const INTERNAL_DIALOG_ATTRIBUTE = 'data-rte-dialog'
+
 export type Props = {
   internalRefs?: React.RefObject<HTMLDivElement>[]
   onFocus?: () => void
@@ -13,29 +17,59 @@ type Result = {
   handleBlur: (e: React.FocusEvent<HTMLDivElement>) => void
 }
 
+const isDialogElement = (element: Element) =>
+  Boolean(element.closest(`[${INTERNAL_DIALOG_ATTRIBUTE}]`)) ||
+  // Base UI puts the dialog's focus guards beside it, not inside it
+  (element.hasAttribute('data-base-ui-focus-guard') &&
+    Boolean(
+      element.parentElement?.querySelector(
+        `:scope > [${INTERNAL_DIALOG_ATTRIBUTE}]`
+      )
+    ))
+
+const isInternalElement = (
+  e: React.FocusEvent<HTMLDivElement>,
+  internalRefs: React.RefObject<HTMLDivElement>[]
+) => {
+  const focusElement = e.relatedTarget as Node | null
+
+  if (!focusElement) {
+    return false
+  }
+
+  return (
+    Boolean(e.currentTarget?.contains(focusElement)) ||
+    internalRefs.some(ref => ref.current?.contains(focusElement)) ||
+    (focusElement instanceof Element && isDialogElement(focusElement))
+  )
+}
+
 const useOnFocus = ({
   onFocus = noop,
   onBlur = noop,
   internalRefs = [],
 }: Props): Result => {
   const [focused, setFocused] = useState(false)
+  // Focus coming back from the toolbar or a dialog is not a new focus
+  const focusedRef = useRef(false)
 
   const handleFocus = useCallback(() => {
+    if (focusedRef.current) {
+      return
+    }
+
+    focusedRef.current = true
     setFocused(true)
     onFocus()
   }, [onFocus])
 
   const handleBlur = useCallback(
     (e: React.FocusEvent<HTMLDivElement>) => {
-      const focusElement = e.relatedTarget as Node
-      const isInternalElement = internalRefs.some(
-        ref => ref.current && ref.current.contains(focusElement)
-      )
-
-      if (isInternalElement) {
+      if (isInternalElement(e, internalRefs)) {
         return
       }
 
+      focusedRef.current = false
       setFocused(false)
       onBlur()
     },

package/src/LexicalEditor/utils/cleanup-html-output.test.ts

@@ -82,4 +82,13 @@ describe('cleanupHtmlOutput', () => {
 
     expect(result).toBe(expected)
   })
+
+  it('adds a safe rel to links that open in a new tab', () => {
+    const html =
+      '<p><a href="https://toptal.com" target="_blank">new tab</a><a href="https://toptal.com" target="_blank" rel="opener">opener</a><a href="https://toptal.com" rel="noreferrer">same tab</a></p>'
+
+    expect(cleanupHtmlOutput(html)).toBe(
+      '<p><a href="https://toptal.com" target="_blank" rel="noopener noreferrer">new tab</a><a href="https://toptal.com" target="_blank" rel="noopener noreferrer">opener</a><a href="https://toptal.com" rel="noreferrer">same tab</a></p>'
+    )
+  })
 })

package/src/LexicalEditor/utils/cleanup-html-output.ts

@@ -112,6 +112,16 @@ const hoistNestedLists = (htmlDoc: Document): Document => {
   return htmlDoc
 }
 
+// A link that opens in a new tab must not get access to this page through
+// window.opener, whatever produced it (the dialog or pasted HTML)
+const secureNewTabLinks = (htmlDoc: Document): Document => {
+  htmlDoc.querySelectorAll('a[target="_blank"]').forEach(link => {
+    link.setAttribute('rel', 'noopener noreferrer')
+  })
+
+  return htmlDoc
+}
+
 export const cleanupHtmlOutput = (html: string): string => {
   const parser = new DOMParser()
 
@@ -121,6 +131,7 @@ export const cleanupHtmlOutput = (html: string): string => {
     .map(removeExtraTags)
     .map(replaceItalicTag)
     .map(hoistNestedLists)
+    .map(secureNewTabLinks)
 
   const result = newHtml.body.innerHTML
 

package/src/index.ts

@@ -12,5 +12,10 @@ export {
   CodePlugin,
   CodeBlockPlugin,
 } from './plugins'
-export type { UploadedImage, CustomEmoji, CustomEmojiGroup } from './plugins'
+export type {
+  UploadedImage,
+  CustomEmoji,
+  CustomEmojiGroup,
+  LinkPluginProps,
+} from './plugins'
 export * from './utils'

package/src/plugins/LinkPlugin/LinkPlugin.tsx

@@ -1,24 +1,49 @@
 import { LinkNode } from '@lexical/link'
 import { LinkPlugin as LexicalLinkPlugin } from '@lexical/react/LexicalLinkPlugin'
 import React from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
 
 import type { RTEPlugin } from '../api'
 import { RTEPluginMeta, Toolbar } from '../api'
 import LinkPluginButton from './LinkPluginButton'
+import LinkPluginModal from './LinkPluginModal'
+import { useLinkPlugin } from './use-link-plugin'
 
 const PLUGIN_NAME = 'link'
 
-export type Props = {
-  'data-testid'?: string
+export interface Props extends BaseProps {
+  /** Where a new link opens: `_blank` checks "Open in new tab" in the dialog */
+  defaultTarget?: '_self' | '_blank'
 }
 
-const LinkPlugin: RTEPlugin<Props> = ({ 'data-testid': testId }: Props) => {
+const LinkPlugin: RTEPlugin<Props> = ({
+  defaultTarget = '_self',
+  className,
+  style,
+  'data-testid': testId,
+}: Props) => {
+  const { open, editing, initialValues, show, close, submit, remove } =
+    useLinkPlugin({ defaultTarget })
+
   return (
     <>
       <Toolbar keyName={PLUGIN_NAME}>
-        <LinkPluginButton data-testid={testId} />
+        <LinkPluginButton
+          onClick={show}
+          className={className}
+          style={style}
+          data-testid={testId}
+        />
       </Toolbar>
       <LexicalLinkPlugin />
+      <LinkPluginModal
+        open={open}
+        editing={editing}
+        initialValues={initialValues}
+        onClose={close}
+        onSubmit={submit}
+        onRemove={remove}
+      />
     </>
   )
 }

package/src/plugins/LinkPlugin/LinkPluginButton.tsx

@@ -1,25 +1,25 @@
-import {
-  $isLinkNode,
-  TOGGLE_LINK_COMMAND,
-  $createLinkNode,
-} from '@lexical/link'
-import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext'
+import { $isLinkNode } from '@lexical/link'
 import { Link16 } from '@toptal/picasso-icons'
-import { $createTextNode, $getSelection, $isRangeSelection } from 'lexical'
-import React, { useCallback, useState } from 'react'
+import type { BaseProps } from '@toptal/picasso-shared'
+import { $getSelection, $isRangeSelection } from 'lexical'
+import React, { useState } from 'react'
 
 import { getSelectedNode } from '../../LexicalEditor/utils/get-selected-node'
 import { useRTEPluginContext, useRTEUpdate } from '../api'
 import RichTextEditorButton from '../../RichTextEditorButton'
-import { sanitizeUrl, validateUrl } from './utils/url'
 
-export type Props = {
-  'data-testid'?: string
+export interface Props extends BaseProps {
+  /** Called when the button is clicked */
+  onClick: () => void
 }
 
-const LinkPluginButton = ({ 'data-testid': testId }: Props) => {
+const LinkPluginButton = ({
+  'data-testid': testId,
+  className,
+  style,
+  onClick,
+}: Props) => {
   const [active, setActive] = useState(false)
-  const [editor] = useLexicalComposerContext()
   const { disabled, focused, disabledFormatting } = useRTEPluginContext()
 
   useRTEUpdate(() => {
@@ -33,61 +33,16 @@ const LinkPluginButton = ({ 'data-testid': testId }: Props) => {
     }
   })
 
-  const onLinkClick = useCallback(() => {
-    if (active) {
-      return editor.dispatchCommand(TOGGLE_LINK_COMMAND, null)
-    }
-
-    editor.update(() => {
-      const selection = $getSelection()
-
-      if ($isRangeSelection(selection)) {
-        const isEmptySelection = selection.anchor.is(selection.focus)
-
-        const url = window.prompt('URL')
-
-        if (url != null) {
-          if (!validateUrl(url)) {
-            return window.alert('Not a valid URL')
-          }
-          const sanitizedUrl = sanitizeUrl(url)
-
-          // When nothing is selected, we create a new Link node without dispatching
-          // any commands to the original Lexical Link plugin
-          if (isEmptySelection) {
-            // The only way to reliably insert a link is to first create a dummy text node
-            selection.insertNodes([$createTextNode(sanitizedUrl)])
-            // Once created, node becomes selected
-            const node = getSelectedNode(selection)
-            const text = node.getTextContent()
-
-            // Then we create a target Link node and replace the dummy text node with it
-            const linkNode = $createLinkNode(sanitizedUrl, {
-              rel: 'noreferrer',
-            })
-
-            linkNode.append($createTextNode(text))
-
-            node.replace(linkNode)
-          } else {
-            // If we have a selection of any kind, pass the creation of the Link node to the plugin
-            editor.dispatchCommand(TOGGLE_LINK_COMMAND, {
-              url: sanitizedUrl,
-            })
-          }
-        }
-      }
-    })
-  }, [editor, active])
-
   const isDisabled = disabled || !focused || disabledFormatting
 
   return (
     <RichTextEditorButton
       icon={<Link16 />}
-      onClick={onLinkClick}
+      onClick={onClick}
       active={isDisabled ? false : active}
       disabled={isDisabled}
+      className={className}
+      style={style}
       data-testid={testId}
     />
   )

package/src/plugins/LinkPlugin/LinkPluginModal.test.tsx

@@ -0,0 +1,172 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@toptal/picasso-test-utils'
+
+import type { Props } from './LinkPluginModal'
+import LinkPluginModal from './LinkPluginModal'
+
+const renderModal = (props: Partial<Props> = {}) => {
+  const handlers = {
+    onClose: jest.fn(),
+    onSubmit: jest.fn(),
+    onRemove: jest.fn(),
+  }
+
+  render(
+    <LinkPluginModal
+      open
+      editing={false}
+      initialValues={{ text: '', url: '', openInNewTab: false }}
+      {...handlers}
+      {...props}
+    />
+  )
+
+  return handlers
+}
+
+const type = (label: string, value: string) =>
+  fireEvent.change(screen.getByLabelText(label), { target: { value } })
+
+describe('LinkPluginModal', () => {
+  it('submits the text, the URL and whether to open in a new tab', () => {
+    const { onSubmit } = renderModal()
+
+    type('Text', 'Book a call')
+    type('Link', ' https://toptal.com/book ')
+    fireEvent.click(screen.getByLabelText('Open in new tab'))
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmit).toHaveBeenCalledWith({
+      text: 'Book a call',
+      url: 'https://toptal.com/book',
+      openInNewTab: true,
+    })
+  })
+
+  it('opens links in the same tab unless chosen otherwise', () => {
+    const { onSubmit } = renderModal()
+
+    type('Link', 'https://toptal.com')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmit).toHaveBeenCalledWith(
+      expect.objectContaining({ openInNewTab: false })
+    )
+  })
+
+  it('rejects an invalid URL', () => {
+    const { onSubmit } = renderModal()
+
+    type('Link', 'not a url')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    expect(onSubmit).not.toHaveBeenCalled()
+    expect(screen.getByText('Enter a valid URL')).toBeInTheDocument()
+  })
+
+  it('disables saving until a URL is entered', () => {
+    renderModal()
+
+    expect(screen.getByRole('button', { name: 'Save' })).toBeDisabled()
+  })
+
+  it('prefills an edited link and offers to remove it', () => {
+    const { onRemove } = renderModal({
+      editing: true,
+      initialValues: {
+        text: 'Toptal',
+        url: 'https://toptal.com',
+        openInNewTab: true,
+      },
+    })
+
+    expect(screen.getByText('Edit link')).toBeInTheDocument()
+    expect(screen.getByLabelText('Text')).toHaveValue('Toptal')
+    expect(screen.getByLabelText('Link')).toHaveValue('https://toptal.com')
+    expect(screen.getByLabelText('Open in new tab')).toBeChecked()
+
+    fireEvent.click(screen.getByRole('button', { name: 'Remove link' }))
+
+    expect(onRemove).toHaveBeenCalled()
+  })
+
+  it('does not offer removing a new link', () => {
+    renderModal()
+
+    expect(screen.getByText('Add link')).toBeInTheDocument()
+    expect(
+      screen.queryByRole('button', { name: 'Remove link' })
+    ).not.toBeInTheDocument()
+  })
+
+  it('focuses the link field when text is already selected', () => {
+    renderModal({
+      initialValues: { text: 'Toptal', url: '', openInNewTab: false },
+    })
+
+    expect(screen.getByLabelText('Link')).toHaveFocus()
+  })
+
+  it('focuses the text field when nothing is selected', () => {
+    renderModal()
+
+    expect(screen.getByLabelText('Text')).toHaveFocus()
+  })
+
+  it('resets the form when it opens with new values', () => {
+    const props = {
+      open: true,
+      editing: false,
+      onClose: jest.fn(),
+      onSubmit: jest.fn(),
+      onRemove: jest.fn(),
+    }
+    const { rerender } = render(
+      <LinkPluginModal
+        {...props}
+        initialValues={{ text: 'Old', url: '', openInNewTab: false }}
+      />
+    )
+
+    type('Link', 'not a url')
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+
+    rerender(
+      <LinkPluginModal
+        {...props}
+        initialValues={{ text: 'New', url: '', openInNewTab: true }}
+      />
+    )
+
+    expect(screen.getByLabelText('Text')).toHaveValue('New')
+    expect(screen.getByLabelText('Link')).toHaveValue('')
+    expect(screen.getByLabelText('Open in new tab')).toBeChecked()
+    expect(screen.queryByText('Enter a valid URL')).not.toBeInTheDocument()
+  })
+
+  it('focuses the link field when it reopens with selected text', () => {
+    const props = {
+      editing: false,
+      onClose: jest.fn(),
+      onSubmit: jest.fn(),
+      onRemove: jest.fn(),
+    }
+    const { rerender } = render(
+      <LinkPluginModal
+        {...props}
+        open={false}
+        initialValues={{ text: '', url: '', openInNewTab: false }}
+      />
+    )
+
+    rerender(
+      <LinkPluginModal
+        {...props}
+        open
+        initialValues={{ text: 'Toptal', url: '', openInNewTab: false }}
+      />
+    )
+
+    expect(screen.getByLabelText('Link')).toHaveFocus()
+  })
+})