Merge pull request #90 from hbmartin/left-anchor-mode-followup

additional tests and break import cycles

Author: hbmartin

src/Highlighter.tsx

@@ -1,13 +1,8 @@
 import React, { Children, useLayoutEffect, useMemo, useState } from 'react'
 import type { CSSProperties } from 'react'
 import { cva } from 'class-variance-authority'
-import {
-  iterateMentionsMarkup,
-  mapPlainTextIndex,
-  readConfigFromChildren,
-  isNumber,
-  cn,
-} from './utils'
+import { iterateMentionsMarkup, mapPlainTextIndex, isNumber, cn } from './utils'
+import readConfigFromChildren from './utils/readConfigFromChildren'
 import { useEffectEvent } from './utils/useEffectEvent'
 import type {
   CaretCoordinates,

src/Mention.tsx

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react'
-import { cn } from './utils'
+import cn from './utils/cn'
 import type { MentionComponentProps } from './types'
 
 export interface MentionProps<Extra extends Record<string, unknown> = Record<string, unknown>>

src/MentionsInput.spec.tsx

@@ -87,6 +87,66 @@ describe('MentionsInput', () => {
     expect(input.tagName).toBe('INPUT')
   })
 
+  describe('single-line versus multi-line modes', () => {
+    it('switches DOM structure and data attributes when toggling modes.', () => {
+      const { container, rerender } = render(
+        <MentionsInput value="">
+          <Mention trigger="@" data={data} />
+        </MentionsInput>
+      )
+
+      const initialRoot = container.firstElementChild as HTMLElement
+      expect(initialRoot).toHaveAttribute('data-multi-line', 'true')
+      expect(initialRoot).not.toHaveAttribute('data-single-line')
+
+      let inputElement = container.querySelector('[data-slot="input"]') as HTMLElement
+      expect(inputElement.tagName).toBe('TEXTAREA')
+      expect(inputElement).toHaveAttribute('data-multi-line', 'true')
+      expect(inputElement).not.toHaveAttribute('data-single-line')
+
+      rerender(
+        <MentionsInput value="" singleLine>
+          <Mention trigger="@" data={data} />
+        </MentionsInput>
+      )
+
+      const updatedRoot = container.firstElementChild as HTMLElement
+      expect(updatedRoot).toHaveAttribute('data-single-line', 'true')
+      expect(updatedRoot).not.toHaveAttribute('data-multi-line')
+
+      inputElement = container.querySelector('[data-slot="input"]') as HTMLElement
+      expect(inputElement.tagName).toBe('INPUT')
+      expect(inputElement).toHaveAttribute('data-single-line', 'true')
+      expect(inputElement).not.toHaveAttribute('data-multi-line')
+    })
+
+    it('keeps the highlighter whitespace handling in sync with the singleLine prop.', () => {
+      const { container, rerender } = render(
+        <MentionsInput value="Hello">
+          <Mention trigger="@" data={data} />
+        </MentionsInput>
+      )
+
+      const control = container.querySelector('[data-slot="control"]') as HTMLElement
+      const initialHighlighter = control.firstElementChild as HTMLElement
+      expect(initialHighlighter).toHaveClass('whitespace-pre-wrap')
+      expect(initialHighlighter).toHaveClass('break-words')
+      expect(initialHighlighter).not.toHaveClass('break-normal')
+
+      rerender(
+        <MentionsInput value="Hello" singleLine>
+          <Mention trigger="@" data={data} />
+        </MentionsInput>
+      )
+
+      const updatedControl = container.querySelector('[data-slot="control"]') as HTMLElement
+      const updatedHighlighter = updatedControl.firstElementChild as HTMLElement
+      expect(updatedHighlighter).toHaveClass('whitespace-pre')
+      expect(updatedHighlighter).toHaveClass('break-normal')
+      expect(updatedHighlighter).not.toHaveClass('whitespace-pre-wrap')
+    })
+  })
+
   describe('validation', () => {
     let consoleError: jest.SpyInstance
 
@@ -661,7 +721,7 @@ describe('MentionsInput', () => {
         </MentionsInput>
       )
 
-      const computed = window.getComputedStyle(combobox)
+      const computed = globalThis.getComputedStyle(combobox)
       const borderTop = Number.parseFloat(computed.borderTopWidth || '0')
       const borderBottom = Number.parseFloat(computed.borderBottomWidth || '0')
       expect(Number.parseFloat(combobox.style.height)).toBe(scrollHeight + borderTop + borderBottom)
@@ -693,7 +753,7 @@ describe('MentionsInput', () => {
         </MentionsInput>
       )
 
-      const computed = window.getComputedStyle(combobox)
+      const computed = globalThis.getComputedStyle(combobox)
       const borderTop = Number.parseFloat(computed.borderTopWidth || '0')
       const borderBottom = Number.parseFloat(computed.borderBottomWidth || '0')
       expect(Number.parseFloat(combobox.style.height)).toBe(scrollHeight + borderTop + borderBottom)
@@ -740,7 +800,7 @@ describe('MentionsInput', () => {
       })
 
       await waitFor(() => {
-        const computed = window.getComputedStyle(combobox)
+        const computed = globalThis.getComputedStyle(combobox)
         const borderTop = Number.parseFloat(computed.borderTopWidth || '0')
         const borderBottom = Number.parseFloat(computed.borderBottomWidth || '0')
         expect(Number.parseFloat(combobox.style.height)).toBe(
@@ -765,7 +825,7 @@ describe('MentionsInput', () => {
 
     it('adds border widths to the measured height', () => {
       const onMentionsChange = jest.fn()
-      const getComputedStyleSpy = jest.spyOn(window, 'getComputedStyle').mockReturnValue({
+      const getComputedStyleSpy = jest.spyOn(globalThis, 'getComputedStyle').mockReturnValue({
         borderTopWidth: '4px',
         borderBottomWidth: '6px',
       } as unknown as CSSStyleDeclaration)
@@ -824,7 +884,7 @@ describe('MentionsInput', () => {
         </MentionsInput>
       )
 
-      const computed = window.getComputedStyle(textarea)
+      const computed = globalThis.getComputedStyle(textarea)
       const borderTop = Number.parseFloat(computed.borderTopWidth || '0')
       const borderBottom = Number.parseFloat(computed.borderBottomWidth || '0')
       expect(Number.parseFloat(textarea.style.height)).toBe(scrollHeight + borderTop + borderBottom)
@@ -2032,16 +2092,28 @@ describe('MentionsInput', () => {
       const originalRemove = window.removeEventListener
       const handlers: Partial<Record<string, EventListener>> = {}
       const addListener = jest
-        .spyOn(window, 'addEventListener')
-        .mockImplementation((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => {
-          handlers[type] = listener as EventListener
-          return originalAdd.call(window, type, listener, options)
-        })
+        .spyOn(globalThis, 'addEventListener')
+        .mockImplementation(
+          (
+            type: string,
+            listener: EventListenerOrEventListenerObject,
+            options?: boolean | AddEventListenerOptions
+          ) => {
+            handlers[type] = listener as EventListener
+            return originalAdd.call(globalThis, type, listener, options)
+          }
+        )
       const removeListener = jest
-        .spyOn(window, 'removeEventListener')
-        .mockImplementation((type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => {
-          return originalRemove.call(window, type, listener, options)
-        })
+        .spyOn(globalThis, 'removeEventListener')
+        .mockImplementation(
+          (
+            type: string,
+            listener: EventListenerOrEventListenerObject,
+            options?: boolean | EventListenerOptions
+          ) => {
+            return originalRemove.call(globalThis, type, listener, options)
+          }
+        )
 
       const bridgeElement = instance.renderMeasurementBridge() as React.ReactElement
       const { unmount: unmountBridge } = render(bridgeElement)
@@ -2060,14 +2132,14 @@ describe('MentionsInput', () => {
       expect(updatePosition.mock.calls.length).toBe(positionCalls + 1)
 
       act(() => {
-        window.dispatchEvent(new Event('resize'))
+        globalThis.dispatchEvent(new Event('resize'))
       })
 
       expect(syncScroll.mock.calls.length).toBeGreaterThan(syncCalls + 1)
       expect(updatePosition.mock.calls.length).toBeGreaterThan(positionCalls + 1)
 
       act(() => {
-        window.dispatchEvent(new Event('orientationchange'))
+        globalThis.dispatchEvent(new Event('orientationchange'))
       })
 
       expect(syncScroll.mock.calls.length).toBeGreaterThan(syncCalls + 2)

src/MentionsInput.tsx

@@ -27,12 +27,12 @@ import {
   flattenSuggestions,
   mapPlainTextIndex,
   omit,
-  readConfigFromChildren,
   spliceString,
   cn,
 } from './utils'
 import { areMentionSelectionsEqual } from './utils/areMentionSelectionsEqual'
 import { makeTriggerRegex } from './utils/makeTriggerRegex'
+import readConfigFromChildren from './utils/readConfigFromChildren'
 import { useEffectEvent } from './utils/useEffectEvent'
 import type {
   CaretCoordinates,
@@ -2076,7 +2076,7 @@ const MeasurementBridge = ({
 
   useLayoutEffect(() => {
     updateAll()
-  }, [updateAll])
+  }, [])
 
   useLayoutEffect(() => observe(container, updateAll), [container, observe, updateAll])
   useLayoutEffect(() => observe(highlighter, updateAll), [highlighter, observe, updateAll])
@@ -2087,7 +2087,7 @@ const MeasurementBridge = ({
   )
 
   useLayoutEffect(() => {
-    if (typeof window === 'undefined') {
+    if (globalThis.window === undefined) {
       return undefined
     }
 
@@ -2096,11 +2096,11 @@ const MeasurementBridge = ({
     }
 
     window.addEventListener('resize', handleViewportChange)
-    window.addEventListener('orientationchange', handleViewportChange)
+    globalThis.addEventListener('orientationchange', handleViewportChange)
 
     return () => {
       window.removeEventListener('resize', handleViewportChange)
-      window.removeEventListener('orientationchange', handleViewportChange)
+      globalThis.removeEventListener('orientationchange', handleViewportChange)
     }
   }, [updateAll])
 

src/utils/escapeRegex.ts

@@ -1,7 +1,5 @@
 // escape RegExp special characters https://stackoverflow.com/a/9310752/5142490
 // eslint-disable-next-line code-complete/enforce-meaningful-names
-const escapeRegex = (str: string): string =>
-  // eslint-disable-next-line unicorn/prefer-string-raw
-  str.replaceAll(/[\s#$()*+,.?[\\\]^{|}-]/g, '\\$&')
+const escapeRegex = (str: string): string => str.replaceAll(/[\s#$()*+,.?[\\\]^{|}-]/g, '\\$&')
 
 export default escapeRegex

src/utils/flattenSuggestions.ts

@@ -1,3 +1,4 @@
+/* eslint-disable code-complete/enforce-meaningful-names */
 import { Children } from 'react'
 import type { ReactNode } from 'react'
 import type { QueryInfo, SuggestionDataItem, SuggestionsMap } from '../types'
@@ -9,6 +10,7 @@ export interface FlattenedSuggestion<
   queryInfo: QueryInfo
 }
 
+// eslint-disable-next-line code-complete/low-function-cohesion
 const flattenSuggestions = <Extra extends Record<string, unknown> = Record<string, unknown>>(
   children: ReactNode,
   suggestions: SuggestionsMap<Extra> | undefined

src/utils/getMentionsAndPlainText.ts

@@ -21,7 +21,7 @@ const getMentionsAndPlainText = <Extra extends Record<string, unknown> = Record<
         plainTextIndex,
       })
       plainText += display
-      idValue += String(id)
+      idValue += id
     },
     (text) => {
       plainText += text

src/utils/getSubstringIndex.spec.ts

@@ -96,8 +96,10 @@ describe('#getSubstringIndex', () => {
 
   it('skips characters gracefully when String#codePointAt reports undefined', () => {
     const haystackWrapper = new String('abc')
-    const codePointAtMock = jest.fn(function (this: String, pos: number) {
-      if (pos === 1) return undefined
+    const codePointAtMock = jest.fn(function (this: string, pos: number) {
+      if (pos === 1) {
+        return undefined
+      }
       return String.prototype.codePointAt.call(this, pos)
     })
     ;(

src/utils/index.ts

@@ -13,5 +13,4 @@ export { default as isNumber } from './isNumber'
 export { default as iterateMentionsMarkup } from './iterateMentionsMarkup'
 export { default as mapPlainTextIndex } from './mapPlainTextIndex'
 export { default as omit } from './omit'
-export { default as readConfigFromChildren } from './readConfigFromChildren'
 export { default as spliceString } from './spliceString'

src/utils/isMentionElement.ts

@@ -0,0 +1,12 @@
+import { isValidElement, type ReactElement } from 'react'
+import type { MentionComponentProps } from '../types'
+import Mention from '../Mention'
+
+export const isMentionElement = <Extra extends Record<string, unknown>>(
+  child: unknown
+): child is ReactElement<MentionComponentProps<Extra>> =>
+  isValidElement(child) &&
+  child.type === Mention &&
+  typeof child.props === 'object' &&
+  child.props !== null &&
+  'data' in child.props