@blade-hq/agent-react 2612.0.0-beta.5 → 2612.0.0-beta.6

package/node_modules/@tiptap/react/src/menus/FloatingMenu.spec.ts

@@ -0,0 +1,164 @@
+import { render } from '@testing-library/react'
+import React, { createRef } from 'react'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { FloatingMenu } from './FloatingMenu.js'
+
+const { floatingMenuPluginMock } = vi.hoisted(() => ({
+  floatingMenuPluginMock: vi.fn(() => ({ key: 'floating-menu-plugin' })),
+}))
+
+vi.mock('@tiptap/extension-floating-menu', () => ({
+  FloatingMenuPlugin: floatingMenuPluginMock,
+}))
+
+function createEditor() {
+  const tr = {
+    setMeta: vi.fn(() => tr),
+  }
+
+  return {
+    isDestroyed: false,
+    registerPlugin: vi.fn(),
+    unregisterPlugin: vi.fn(),
+    view: {
+      dispatch: vi.fn(),
+    },
+    state: {
+      tr,
+    },
+  }
+}
+
+describe('FloatingMenu', () => {
+  beforeEach(() => {
+    floatingMenuPluginMock.mockClear()
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('applies html props to the actual menu element', () => {
+    const editor = createEditor()
+    const ref = createRef<HTMLDivElement>()
+    const handleClick = vi.fn()
+    const handleClickCapture = vi.fn()
+    const handleDoubleClick = vi.fn()
+    const initialProps = {
+      editor: editor as never,
+      className: 'floating-menu',
+      'data-testid': 'floating-element',
+      'aria-label': 'Floating menu',
+      style: { zIndex: 8888, marginTop: 12, position: 'relative' },
+      onClick: handleClick,
+      onClickCapture: handleClickCapture,
+      onDoubleClick: handleDoubleClick,
+      pluginKey: 'floatingMenu',
+      tabIndex: 5,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Floating action'),
+    } as any
+    const updatedProps = {
+      editor: editor as never,
+      className: 'floating-menu-updated',
+      style: { zIndex: 7777, marginTop: 20, position: 'static' },
+      onClick: undefined,
+      onClickCapture: undefined,
+      onDoubleClick: undefined,
+      pluginKey: 'floatingMenu',
+      tabIndex: undefined,
+      ref,
+      children: React.createElement('button', { type: 'button' }, 'Updated floating action'),
+    } as any
+
+    const { rerender, unmount } = render(React.createElement(FloatingMenu, initialProps))
+
+    expect(editor.registerPlugin).toHaveBeenCalledTimes(1)
+    expect(floatingMenuPluginMock).toHaveBeenCalledTimes(1)
+
+    const [{ element }] = floatingMenuPluginMock.mock.calls[0] as unknown as [{ element: HTMLDivElement }]
+
+    expect(element).toBeInstanceOf(HTMLDivElement)
+    expect(element).toBe(ref.current)
+    expect(element.className).toBe('floating-menu')
+    expect(element.getAttribute('data-testid')).toBe('floating-element')
+    expect(element.getAttribute('aria-label')).toBe('Floating menu')
+    expect(element.tabIndex).toBe(5)
+    expect(element.style.zIndex).toBe('8888')
+    expect(element.style.marginTop).toBe('12px')
+    expect(element.style.position).toBe('absolute')
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(element.textContent).toContain('Floating action')
+
+    rerender(React.createElement(FloatingMenu, updatedProps))
+
+    expect(element.className).toBe('floating-menu-updated')
+    expect(element.getAttribute('data-testid')).toBeNull()
+    expect(element.getAttribute('aria-label')).toBeNull()
+    expect(element.tabIndex).toBe(-1)
+    expect(element.style.zIndex).toBe('7777')
+    expect(element.style.marginTop).toBe('20px')
+    expect(element.style.position).toBe('absolute')
+
+    element.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+    element.dispatchEvent(new MouseEvent('dblclick', { bubbles: true }))
+    element.querySelector('button')?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+
+    expect(handleClick).toHaveBeenCalledTimes(2)
+    expect(handleDoubleClick).toHaveBeenCalledTimes(1)
+    expect(handleClickCapture).toHaveBeenCalledTimes(2)
+    expect(element.textContent).toContain('Updated floating action')
+
+    unmount()
+
+    expect(editor.unregisterPlugin).toHaveBeenCalledWith('floatingMenu')
+  })
+
+  it('creates unique plugin keys when none are provided', () => {
+    const editor = createEditor()
+    const shouldShowA = vi.fn(() => true)
+    const shouldShowB = vi.fn(() => false)
+
+    const { unmount } = render(
+      React.createElement(
+        React.Fragment,
+        null,
+        React.createElement(FloatingMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowA,
+          children: React.createElement('button', { type: 'button' }, 'First'),
+        } as any),
+        React.createElement(FloatingMenu, {
+          editor: editor as never,
+          shouldShow: shouldShowB,
+          children: React.createElement('button', { type: 'button' }, 'Second'),
+        } as any),
+      ),
+    )
+
+    expect(floatingMenuPluginMock).toHaveBeenCalledTimes(2)
+
+    const pluginCalls = floatingMenuPluginMock.mock.calls as unknown as Array<[{ pluginKey: unknown }]>
+    const firstPluginKey = pluginCalls[0][0].pluginKey
+    const secondPluginKey = pluginCalls[1][0].pluginKey
+
+    expect(firstPluginKey).toBeDefined()
+    expect(secondPluginKey).toBeDefined()
+    expect(firstPluginKey).not.toBe(secondPluginKey)
+
+    unmount()
+
+    const unregisterCalls = editor.unregisterPlugin.mock.calls as unknown as Array<[unknown]>
+
+    expect(unregisterCalls.some(([key]) => key === firstPluginKey)).toBe(true)
+    expect(unregisterCalls.some(([key]) => key === secondPluginKey)).toBe(true)
+  })
+})

package/node_modules/@tiptap/react/src/menus/FloatingMenu.tsx

@@ -0,0 +1,137 @@
+import type { FloatingMenuPluginProps } from '@tiptap/extension-floating-menu'
+import { FloatingMenuPlugin } from '@tiptap/extension-floating-menu'
+import type { PluginKey } from '@tiptap/pm/state'
+import { useCurrentEditor } from '@tiptap/react'
+import React, { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { getAutoPluginKey } from './getAutoPluginKey.js'
+import { useMenuElementProps } from './useMenuElementProps.js'
+
+type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>
+
+export type FloatingMenuProps = Omit<Optional<FloatingMenuPluginProps, 'pluginKey'>, 'element' | 'editor'> & {
+  editor: FloatingMenuPluginProps['editor'] | null
+  options?: FloatingMenuPluginProps['options']
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const FloatingMenu = React.forwardRef<HTMLDivElement, FloatingMenuProps>(
+  (
+    { pluginKey, editor, updateDelay, resizeDelay, appendTo, shouldShow = null, options, children, ...restProps },
+    ref,
+  ) => {
+    const menuEl = useRef(document.createElement('div'))
+    const resolvedPluginKey = useRef<PluginKey | string>(getAutoPluginKey(pluginKey, 'floatingMenu')).current
+
+    useMenuElementProps(menuEl.current, restProps)
+
+    if (typeof ref === 'function') {
+      ref(menuEl.current)
+    } else if (ref) {
+      ref.current = menuEl.current
+    }
+
+    const { editor: currentEditor } = useCurrentEditor()
+
+    /**
+     * The editor instance where the floating menu plugin will be registered.
+     */
+    const pluginEditor = editor || currentEditor
+
+    // Creating a useMemo would be more computationally expensive than just
+    // re-creating this object on every render.
+    const floatingMenuPluginProps: Omit<FloatingMenuPluginProps, 'editor' | 'element'> = {
+      updateDelay,
+      resizeDelay,
+      appendTo,
+      pluginKey: resolvedPluginKey,
+      shouldShow,
+      options,
+    }
+
+    /**
+     * The props for the floating menu plugin. They are accessed inside a ref to
+     * avoid running the useEffect hook and re-registering the plugin when the
+     * props change.
+     */
+    const floatingMenuPluginPropsRef = useRef(floatingMenuPluginProps)
+    floatingMenuPluginPropsRef.current = floatingMenuPluginProps
+
+    /**
+     * Track whether the plugin has been initialized, so we only send updates
+     * after the initial registration.
+     */
+    const [pluginInitialized, setPluginInitialized] = useState(false)
+
+    /**
+     * Track whether we need to skip the first options update dispatch.
+     * This prevents unnecessary updates right after plugin initialization.
+     */
+    const skipFirstUpdateRef = useRef(true)
+
+    useEffect(() => {
+      if (pluginEditor?.isDestroyed) {
+        return
+      }
+
+      if (!pluginEditor) {
+        console.warn(
+          'FloatingMenu component is not rendered inside of an editor component or does not have editor prop.',
+        )
+        return
+      }
+
+      const floatingMenuElement = menuEl.current
+      floatingMenuElement.style.visibility = 'hidden'
+      floatingMenuElement.style.position = 'absolute'
+
+      const plugin = FloatingMenuPlugin({
+        ...floatingMenuPluginPropsRef.current,
+        editor: pluginEditor,
+        element: floatingMenuElement,
+      })
+
+      pluginEditor.registerPlugin(plugin)
+
+      const createdPluginKey = floatingMenuPluginPropsRef.current.pluginKey
+
+      skipFirstUpdateRef.current = true
+      setPluginInitialized(true)
+
+      return () => {
+        setPluginInitialized(false)
+        pluginEditor.unregisterPlugin(createdPluginKey)
+        window.requestAnimationFrame(() => {
+          if (floatingMenuElement.parentNode) {
+            floatingMenuElement.parentNode.removeChild(floatingMenuElement)
+          }
+        })
+      }
+    }, [pluginEditor])
+
+    /**
+     * Update the plugin options when props change after the plugin has been initialized.
+     * This allows dynamic updates to options like scrollTarget without re-registering the entire plugin.
+     */
+    useEffect(() => {
+      if (!pluginInitialized || !pluginEditor || pluginEditor.isDestroyed) {
+        return
+      }
+
+      // Skip the first update right after initialization since the plugin was just created with these options
+      if (skipFirstUpdateRef.current) {
+        skipFirstUpdateRef.current = false
+        return
+      }
+
+      pluginEditor.view.dispatch(
+        pluginEditor.state.tr.setMeta(resolvedPluginKey, {
+          type: 'updateOptions',
+          options: floatingMenuPluginPropsRef.current,
+        }),
+      )
+    }, [pluginInitialized, pluginEditor, updateDelay, resizeDelay, shouldShow, options, appendTo, resolvedPluginKey])
+
+    return createPortal(children, menuEl.current)
+  },
+)

package/node_modules/@tiptap/react/src/menus/getAutoPluginKey.ts

@@ -0,0 +1,5 @@
+import { PluginKey } from '@tiptap/pm/state'
+
+export function getAutoPluginKey(pluginKey: PluginKey | string | undefined, defaultName: string) {
+  return pluginKey ?? new PluginKey(defaultName)
+}

package/node_modules/@tiptap/react/src/menus/index.ts

@@ -0,0 +1,2 @@
+export * from './BubbleMenu.js'
+export * from './FloatingMenu.js'

package/node_modules/@tiptap/react/src/menus/useMenuElementProps.ts

@@ -0,0 +1,354 @@
+import type { CSSProperties, HTMLAttributes } from 'react'
+import { useEffect, useLayoutEffect, useRef } from 'react'
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect
+
+type MenuElementProps = HTMLAttributes<HTMLDivElement>
+type MenuSyntheticEvent = Event & {
+  nativeEvent: Event
+  currentTarget: HTMLDivElement
+  target: EventTarget | null
+  persist: () => void
+  isDefaultPrevented: () => boolean
+  isPropagationStopped: () => boolean
+}
+type MenuEventListener = (event: MenuSyntheticEvent) => void
+type MenuNativeListener = (event: Event) => void
+type MenuEventListenerOptions = {
+  capture?: boolean
+}
+
+type EventListenerEntry = {
+  eventName: string
+  listener: MenuNativeListener
+  options?: MenuEventListenerOptions
+}
+
+const PLUGIN_MANAGED_STYLE_PROPERTIES = new Set(['left', 'opacity', 'position', 'top', 'visibility', 'width'])
+const UNITLESS_STYLE_PROPERTIES = new Set([
+  'animationIterationCount',
+  'aspectRatio',
+  'borderImageOutset',
+  'borderImageSlice',
+  'borderImageWidth',
+  'columnCount',
+  'columns',
+  'fillOpacity',
+  'flex',
+  'flexGrow',
+  'flexShrink',
+  'fontWeight',
+  'gridArea',
+  'gridColumn',
+  'gridColumnEnd',
+  'gridColumnStart',
+  'gridRow',
+  'gridRowEnd',
+  'gridRowStart',
+  'lineClamp',
+  'lineHeight',
+  'opacity',
+  'order',
+  'orphans',
+  'scale',
+  'stopOpacity',
+  'strokeDasharray',
+  'strokeDashoffset',
+  'strokeMiterlimit',
+  'strokeOpacity',
+  'strokeWidth',
+  'tabSize',
+  'widows',
+  'zIndex',
+  'zoom',
+])
+const ATTRIBUTE_EXCLUSIONS = new Set(['children', 'className', 'style'])
+const DIRECT_PROPERTY_KEYS = new Set(['tabIndex'])
+const FORWARDED_ATTRIBUTE_KEYS = new Set([
+  'accessKey',
+  'autoCapitalize',
+  'contentEditable',
+  'contextMenu',
+  'dir',
+  'draggable',
+  'enterKeyHint',
+  'hidden',
+  'id',
+  'lang',
+  'nonce',
+  'role',
+  'slot',
+  'spellCheck',
+  'tabIndex',
+  'title',
+  'translate',
+])
+const SPECIAL_EVENT_NAMES: Record<string, string> = {
+  Blur: 'focusout',
+  DoubleClick: 'dblclick',
+  Focus: 'focusin',
+  MouseEnter: 'mouseenter',
+  MouseLeave: 'mouseleave',
+}
+
+function isEventProp(key: string, value: unknown): value is MenuEventListener {
+  return /^on[A-Z]/.test(key) && typeof value === 'function'
+}
+
+function toAttributeName(key: string) {
+  if (key.startsWith('aria-') || key.startsWith('data-')) {
+    return key
+  }
+
+  return key
+}
+
+function isForwardedAttributeKey(key: string) {
+  return key.startsWith('aria-') || key.startsWith('data-') || FORWARDED_ATTRIBUTE_KEYS.has(key)
+}
+
+function toStylePropertyName(key: string) {
+  if (key.startsWith('--')) {
+    return key
+  }
+
+  return key.replace(/[A-Z]/g, match => `-${match.toLowerCase()}`)
+}
+
+function toEventConfig(key: string) {
+  const useCapture = key.endsWith('Capture')
+  const baseKey = useCapture ? key.slice(0, -7) : key
+  const reactEventName = baseKey.slice(2)
+  const eventName = SPECIAL_EVENT_NAMES[reactEventName] ?? reactEventName.toLowerCase()
+
+  return {
+    eventName,
+    options: useCapture ? { capture: true } : undefined,
+  }
+}
+
+function createSyntheticEvent(element: HTMLDivElement, nativeEvent: Event): MenuSyntheticEvent {
+  let defaultPrevented = nativeEvent.defaultPrevented
+  let propagationStopped = false
+  const syntheticEvent = Object.create(nativeEvent)
+
+  Object.defineProperties(syntheticEvent, {
+    nativeEvent: { value: nativeEvent },
+    currentTarget: { value: element },
+    target: { value: nativeEvent.target },
+    persist: { value: () => undefined },
+    isDefaultPrevented: { value: () => defaultPrevented },
+    isPropagationStopped: { value: () => propagationStopped },
+    preventDefault: {
+      value: () => {
+        defaultPrevented = true
+        nativeEvent.preventDefault()
+      },
+    },
+    stopPropagation: {
+      value: () => {
+        propagationStopped = true
+        nativeEvent.stopPropagation()
+      },
+    },
+  })
+
+  return syntheticEvent as MenuSyntheticEvent
+}
+
+function isDirectPropertyKey(key: string) {
+  return DIRECT_PROPERTY_KEYS.has(key)
+}
+
+function setDirectProperty(element: HTMLDivElement, key: string, value: unknown) {
+  if (key === 'tabIndex') {
+    element.tabIndex = Number(value)
+    return
+  }
+
+  ;(element as unknown as Record<string, unknown>)[key] = value
+}
+
+function clearDirectProperty(element: HTMLDivElement, key: string) {
+  if (key === 'tabIndex') {
+    element.removeAttribute('tabindex')
+    return
+  }
+
+  const propertyValue = (element as unknown as Record<string, unknown>)[key]
+
+  if (typeof propertyValue === 'boolean') {
+    ;(element as unknown as Record<string, unknown>)[key] = false
+    return
+  }
+
+  if (typeof propertyValue === 'number') {
+    ;(element as unknown as Record<string, unknown>)[key] = 0
+    return
+  }
+
+  ;(element as unknown as Record<string, unknown>)[key] = ''
+}
+
+function toStyleValue(styleName: string, value: string | number) {
+  if (
+    typeof value !== 'number' ||
+    value === 0 ||
+    styleName.startsWith('--') ||
+    UNITLESS_STYLE_PROPERTIES.has(styleName)
+  ) {
+    return String(value)
+  }
+
+  return `${value}px`
+}
+
+function removeStyleProperty(element: HTMLDivElement, styleName: string) {
+  if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+    return
+  }
+
+  element.style.removeProperty(toStylePropertyName(styleName))
+}
+
+function applyStyleProperty(element: HTMLDivElement, styleName: string, value: string | number) {
+  if (PLUGIN_MANAGED_STYLE_PROPERTIES.has(styleName)) {
+    return
+  }
+
+  element.style.setProperty(toStylePropertyName(styleName), toStyleValue(styleName, value))
+}
+
+function syncAttributes(element: HTMLDivElement, prevProps: MenuElementProps, nextProps: MenuElementProps) {
+  const allKeys = new Set([...Object.keys(prevProps), ...Object.keys(nextProps)])
+
+  allKeys.forEach(key => {
+    if (
+      ATTRIBUTE_EXCLUSIONS.has(key) ||
+      !isForwardedAttributeKey(key) ||
+      isEventProp(key, prevProps[key as keyof MenuElementProps]) ||
+      isEventProp(key, nextProps[key as keyof MenuElementProps])
+    ) {
+      return
+    }
+
+    const prevValue = prevProps[key as keyof MenuElementProps]
+    const nextValue = nextProps[key as keyof MenuElementProps]
+
+    if (prevValue === nextValue) {
+      return
+    }
+
+    const attributeName = toAttributeName(key)
+
+    if (nextValue == null || nextValue === false) {
+      if (isDirectPropertyKey(key)) {
+        clearDirectProperty(element, key)
+      }
+
+      element.removeAttribute(attributeName)
+      return
+    }
+
+    if (nextValue === true) {
+      if (isDirectPropertyKey(key)) {
+        setDirectProperty(element, key, true)
+      }
+
+      element.setAttribute(attributeName, '')
+      return
+    }
+
+    if (isDirectPropertyKey(key)) {
+      setDirectProperty(element, key, nextValue)
+      return
+    }
+
+    element.setAttribute(attributeName, String(nextValue))
+  })
+}
+
+function syncClassName(element: HTMLDivElement, prevClassName?: string, nextClassName?: string) {
+  if (prevClassName === nextClassName) {
+    return
+  }
+
+  if (nextClassName) {
+    element.className = nextClassName
+    return
+  }
+
+  element.removeAttribute('class')
+}
+
+function syncStyles(
+  element: HTMLDivElement,
+  prevStyle: CSSProperties | undefined,
+  nextStyle: CSSProperties | undefined,
+) {
+  const previousStyle = prevStyle ?? {}
+  const currentStyle = nextStyle ?? {}
+  const allStyleNames = new Set([...Object.keys(previousStyle), ...Object.keys(currentStyle)])
+
+  allStyleNames.forEach(styleName => {
+    const prevValue = previousStyle[styleName as keyof CSSProperties]
+    const nextValue = currentStyle[styleName as keyof CSSProperties]
+
+    if (prevValue === nextValue) {
+      return
+    }
+
+    if (nextValue == null) {
+      removeStyleProperty(element, styleName)
+      return
+    }
+
+    applyStyleProperty(element, styleName, nextValue as string | number)
+  })
+}
+
+function syncEventListeners(element: HTMLDivElement, prevListeners: EventListenerEntry[], nextProps: MenuElementProps) {
+  prevListeners.forEach(({ eventName, listener, options }) => {
+    element.removeEventListener(eventName, listener, options)
+  })
+
+  const nextListeners: EventListenerEntry[] = []
+
+  Object.entries(nextProps).forEach(([key, value]) => {
+    if (!isEventProp(key, value)) {
+      return
+    }
+
+    const { eventName, options } = toEventConfig(key)
+    const listener: MenuNativeListener = event => {
+      value(createSyntheticEvent(element, event))
+    }
+
+    element.addEventListener(eventName, listener, options)
+    nextListeners.push({ eventName, listener, options })
+  })
+
+  return nextListeners
+}
+
+export function useMenuElementProps(element: HTMLDivElement, props: MenuElementProps) {
+  const previousPropsRef = useRef<MenuElementProps>({})
+  const listenersRef = useRef<EventListenerEntry[]>([])
+
+  useIsomorphicLayoutEffect(() => {
+    const previousProps = previousPropsRef.current
+
+    syncClassName(element, previousProps.className, props.className)
+    syncStyles(element, previousProps.style, props.style)
+    syncAttributes(element, previousProps, props)
+    listenersRef.current = syncEventListeners(element, listenersRef.current, props)
+    previousPropsRef.current = props
+
+    return () => {
+      listenersRef.current.forEach(({ eventName, listener, options }) => {
+        element.removeEventListener(eventName, listener, options)
+      })
+      listenersRef.current = []
+    }
+  }, [element, props])
+}

package/node_modules/@tiptap/react/src/types.ts

@@ -0,0 +1,6 @@
+import type { NodeViewProps as CoreNodeViewProps } from '@tiptap/core'
+import type React from 'react'
+
+export type ReactNodeViewProps<T = HTMLElement> = CoreNodeViewProps & {
+  ref: React.RefObject<T | null>
+}