@betterstart/cli 0.1.3 → 0.1.5

package/templates/tiptap/hooks/use-tiptap-editor.ts

@@ -0,0 +1,46 @@
+'use client'
+
+import type { Editor } from '@tiptap/react'
+import { useCurrentEditor, useEditorState } from '@tiptap/react'
+import { useMemo } from 'react'
+
+/**
+ * Hook that provides access to a Tiptap editor instance.
+ *
+ * Accepts an optional editor instance directly, or falls back to retrieving
+ * the editor from the Tiptap context if available. This allows components
+ * to work both when given an editor directly and when used within a Tiptap
+ * editor context.
+ *
+ * @param providedEditor - Optional editor instance to use instead of the context editor
+ * @returns The provided editor or the editor from context, whichever is available
+ */
+export function useTiptapEditor(providedEditor?: Editor | null): {
+  editor: Editor | null
+  editorState?: Editor['state']
+  canCommand?: Editor['can']
+} {
+  const { editor: coreEditor } = useCurrentEditor()
+  const mainEditor = useMemo(() => providedEditor || coreEditor, [providedEditor, coreEditor])
+
+  const editorState = useEditorState({
+    editor: mainEditor,
+    selector(context) {
+      if (!context.editor) {
+        return {
+          editor: null,
+          editorState: undefined,
+          canCommand: undefined
+        }
+      }
+
+      return {
+        editor: context.editor,
+        editorState: context.editor.state,
+        canCommand: context.editor.can
+      }
+    }
+  })
+
+  return editorState || { editor: null }
+}

package/templates/tiptap/hooks/use-unmount.ts

@@ -0,0 +1,21 @@
+import { useEffect, useRef } from 'react'
+
+/**
+ * Hook that executes a callback when the component unmounts.
+ *
+ * @param callback Function to be called on component unmount
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const useUnmount = (callback: (...args: Array<any>) => any) => {
+  const ref = useRef(callback)
+  ref.current = callback
+
+  useEffect(
+    () => () => {
+      ref.current()
+    },
+    []
+  )
+}
+
+export default useUnmount

package/templates/tiptap/hooks/use-window-size.ts

@@ -0,0 +1,87 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { useThrottledCallback } from './use-throttled-callback'
+
+export interface WindowSizeState {
+  /**
+   * The width of the window's visual viewport in pixels.
+   */
+  width: number
+  /**
+   * The height of the window's visual viewport in pixels.
+   */
+  height: number
+  /**
+   * The distance from the top of the visual viewport to the top of the layout viewport.
+   * Particularly useful for handling mobile keyboard appearance.
+   */
+  offsetTop: number
+  /**
+   * The distance from the left of the visual viewport to the left of the layout viewport.
+   */
+  offsetLeft: number
+  /**
+   * The scale factor of the visual viewport.
+   * This is useful for scaling elements based on the current zoom level.
+   */
+  scale: number
+}
+
+/**
+ * Hook that tracks the window's visual viewport dimensions, position, and provides
+ * a CSS transform for positioning elements.
+ *
+ * Uses the Visual Viewport API to get accurate measurements, especially important
+ * for mobile devices where virtual keyboards can change the visible area.
+ * Only updates state when values actually change to optimize performance.
+ *
+ * @returns An object containing viewport properties and a CSS transform string
+ */
+export function useWindowSize(): WindowSizeState {
+  const [windowSize, setWindowSize] = useState<WindowSizeState>({
+    width: 0,
+    height: 0,
+    offsetTop: 0,
+    offsetLeft: 0,
+    scale: 0
+  })
+
+  const handleViewportChange = useThrottledCallback(() => {
+    if (typeof window === 'undefined') return
+
+    const vp = window.visualViewport
+    if (!vp) return
+
+    const { width = 0, height = 0, offsetTop = 0, offsetLeft = 0, scale = 0 } = vp
+
+    setWindowSize((prevState) => {
+      if (
+        width === prevState.width &&
+        height === prevState.height &&
+        offsetTop === prevState.offsetTop &&
+        offsetLeft === prevState.offsetLeft &&
+        scale === prevState.scale
+      ) {
+        return prevState
+      }
+
+      return { width, height, offsetTop, offsetLeft, scale }
+    })
+  }, 200)
+
+  useEffect(() => {
+    const visualViewport = window.visualViewport
+    if (!visualViewport) return
+
+    visualViewport.addEventListener('resize', handleViewportChange)
+
+    handleViewportChange()
+
+    return () => {
+      visualViewport.removeEventListener('resize', handleViewportChange)
+    }
+  }, [handleViewportChange])
+
+  return windowSize
+}