@meta-1/editor 0.0.28 → 1.0.0

package/src/components/tiptap-ui-primitive/avatar/avatar.tsx

@@ -0,0 +1,239 @@
+"use client"
+
+import {
+  Children,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useState,
+} from "react"
+import "./avatar.css"
+
+type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error"
+type Size = "default" | "sm" | "lg" | "xl"
+
+interface AvatarContextValue {
+  imageLoadingStatus: ImageLoadingStatus
+  onImageLoadingStatusChange: (status: ImageLoadingStatus) => void
+  size: Size
+}
+
+interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
+  size?: Size
+  userColor?: string
+}
+
+interface AvatarImageProps
+  extends Omit<
+    React.ImgHTMLAttributes<HTMLImageElement>,
+    "onLoadingStatusChange" | "src"
+  > {
+  src?: string
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void
+}
+
+interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {
+  delayMs?: number
+}
+
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  maxVisible?: number
+  children: React.ReactNode
+}
+
+const AvatarContext = createContext<AvatarContextValue | undefined>(undefined)
+
+const useAvatarContext = () => {
+  const context = useContext(AvatarContext)
+  if (!context) {
+    throw new Error("Avatar components must be used within an Avatar.Root")
+  }
+  return context
+}
+
+const useImageLoadingStatus = (
+  src?: string,
+  referrerPolicy?: React.HTMLAttributeReferrerPolicy
+): ImageLoadingStatus => {
+  const initialStatus = !src ? "error" : "loading"
+  const [loadingStatus, setLoadingStatus] =
+    useState<ImageLoadingStatus>(initialStatus)
+
+  useLayoutEffect(() => {
+    if (!src) {
+      return
+    }
+
+    let isMounted = true
+    const image = new window.Image()
+
+    const updateStatus = (status: ImageLoadingStatus) => () => {
+      if (!isMounted) return
+      setLoadingStatus(status)
+    }
+
+    image.onload = updateStatus("loaded")
+    image.onerror = updateStatus("error")
+    image.src = src
+    if (referrerPolicy) image.referrerPolicy = referrerPolicy
+
+    return () => {
+      isMounted = false
+    }
+  }, [src, referrerPolicy])
+
+  return loadingStatus
+}
+
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
+  (
+    { children, className = "", size = "default", userColor, ...props },
+    ref
+  ) => {
+    const [imageLoadingStatus, setImageLoadingStatus] =
+      useState<ImageLoadingStatus>("idle")
+
+    const onImageLoadingStatusChange = useCallback(
+      (status: ImageLoadingStatus) => {
+        setImageLoadingStatus(status)
+      },
+      []
+    )
+
+    const contextValue = useMemo(
+      () => ({
+        imageLoadingStatus,
+        onImageLoadingStatusChange,
+        size,
+      }),
+      [imageLoadingStatus, onImageLoadingStatusChange, size]
+    )
+
+    const style = userColor
+      ? ({ "--dynamic-user-color": userColor } as React.CSSProperties)
+      : undefined
+
+    return (
+      <AvatarContext.Provider value={contextValue}>
+        <span
+          {...props}
+          ref={ref}
+          className={`tiptap-avatar ${className}`}
+          style={style}
+          data-size={size}
+        >
+          <span className="tiptap-avatar-item">{children}</span>
+        </span>
+      </AvatarContext.Provider>
+    )
+  }
+)
+
+Avatar.displayName = "Avatar"
+
+export const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
+  ({ onLoadingStatusChange, src, className = "", ...props }, ref) => {
+    const { onImageLoadingStatusChange } = useAvatarContext()
+    const imageLoadingStatus = useImageLoadingStatus(src, props.referrerPolicy)
+
+    useLayoutEffect(() => {
+      if (imageLoadingStatus !== "idle") {
+        onLoadingStatusChange?.(imageLoadingStatus)
+        onImageLoadingStatusChange(imageLoadingStatus)
+      }
+    }, [imageLoadingStatus, onLoadingStatusChange, onImageLoadingStatusChange])
+
+    if (imageLoadingStatus !== "loaded") return null
+
+    return (
+      <img
+        {...props}
+        ref={ref}
+        src={src}
+        className={`tiptap-avatar-image ${className}`}
+      />
+    )
+  }
+)
+
+AvatarImage.displayName = "AvatarImage"
+
+export const AvatarFallback = forwardRef<HTMLSpanElement, AvatarFallbackProps>(
+  ({ delayMs, className = "", children, ...props }, ref) => {
+    const context = useAvatarContext()
+    const [canRender, setCanRender] = useState(delayMs === undefined)
+
+    useEffect(() => {
+      if (delayMs !== undefined) {
+        const timerId = window.setTimeout(() => setCanRender(true), delayMs)
+        return () => window.clearTimeout(timerId)
+      }
+    }, [delayMs])
+
+    if (!canRender || context.imageLoadingStatus === "loaded") return null
+
+    return (
+      <>
+        <span className={`tiptap-avatar-bg ${className}`} />
+        <span
+          {...props}
+          ref={ref}
+          className={`tiptap-avatar-fallback ${className}`}
+        >
+          {children}
+        </span>
+      </>
+    )
+  }
+)
+
+AvatarFallback.displayName = "AvatarFallback"
+
+export const AvatarGroup: React.FC<AvatarGroupProps> = ({
+  maxVisible,
+  children,
+  className = "",
+  ...props
+}) => {
+  const childrenArray = Children.toArray(children)
+  const visibleAvatars = maxVisible
+    ? childrenArray.slice(0, maxVisible)
+    : childrenArray
+  const remainingCount = childrenArray.length - visibleAvatars.length
+
+  let avatarProps: AvatarProps = {}
+
+  Children.forEach(children, (child) => {
+    if (
+      isValidElement(child) &&
+      child.type &&
+      typeof child.type !== "string" &&
+      (child.type as { displayName?: string }).displayName === "Avatar"
+    ) {
+      avatarProps = { ...avatarProps, ...(child.props as AvatarProps) }
+      return
+    }
+  })
+
+  return (
+    <div
+      {...props}
+      className={`tiptap-avatar-group ${className}`}
+      data-max-user-visible={maxVisible}
+    >
+      {visibleAvatars}
+      {remainingCount > 0 && (
+        <Avatar {...avatarProps}>
+          <AvatarFallback>+{remainingCount}</AvatarFallback>
+        </Avatar>
+      )}
+    </div>
+  )
+}
+
+AvatarGroup.displayName = "AvatarGroup"

package/src/components/tiptap-ui-primitive/avatar/index.tsx

@@ -0,0 +1 @@
+export * from "./avatar"

package/src/components/tiptap-ui-primitive/badge/badge-colors.css

@@ -0,0 +1,358 @@
+@import "tailwindcss";
+
+/* Default variant - White background */
+.tiptap-badge {
+  @apply bg-white border-gray-200 text-gray-600;
+}
+
+.dark .tiptap-badge {
+  @apply bg-black border-gray-700 text-gray-400;
+}
+
+.tiptap-badge .tiptap-badge-icon {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-badge .tiptap-badge-icon {
+  @apply text-gray-400;
+}
+
+/* Default - Subdued appearance */
+.tiptap-badge[data-appearance="subdued"] {
+  @apply bg-white border-gray-200 text-gray-500;
+}
+
+.dark .tiptap-badge[data-appearance="subdued"] {
+  @apply bg-black border-gray-700 text-gray-500;
+}
+
+.tiptap-badge[data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-badge[data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+/* Default - Emphasized appearance */
+.tiptap-badge[data-appearance="emphasized"] {
+  @apply bg-white border-gray-700 text-gray-700;
+}
+
+.dark .tiptap-badge[data-appearance="emphasized"] {
+  @apply bg-black border-gray-500 text-gray-300;
+}
+
+.tiptap-badge[data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-600;
+}
+
+.dark .tiptap-badge[data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-400;
+}
+
+/* Ghost variant */
+.tiptap-badge[data-style="ghost"] {
+  @apply bg-transparent border-gray-200 text-gray-600;
+}
+
+.dark .tiptap-badge[data-style="ghost"] {
+  @apply bg-transparent border-gray-700 text-gray-400;
+}
+
+.tiptap-badge[data-style="ghost"] .tiptap-badge-icon {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-badge[data-style="ghost"] .tiptap-badge-icon {
+  @apply text-gray-400;
+}
+
+/* Ghost - Subdued */
+.tiptap-badge[data-style="ghost"][data-appearance="subdued"] {
+  @apply bg-transparent border-gray-200 text-gray-500;
+}
+
+.dark .tiptap-badge[data-style="ghost"][data-appearance="subdued"] {
+  @apply bg-transparent border-gray-700 text-gray-500;
+}
+
+.tiptap-badge[data-style="ghost"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-badge[data-style="ghost"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+/* Ghost - Emphasized */
+.tiptap-badge[data-style="ghost"][data-appearance="emphasized"] {
+  @apply bg-transparent border-gray-700 text-gray-700;
+}
+
+.dark .tiptap-badge[data-style="ghost"][data-appearance="emphasized"] {
+  @apply bg-transparent border-gray-500 text-gray-300;
+}
+
+.tiptap-badge[data-style="ghost"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-600;
+}
+
+.dark .tiptap-badge[data-style="ghost"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-400;
+}
+
+/* Gray variant */
+.tiptap-badge[data-style="gray"] {
+  @apply bg-gray-100 border-gray-200 text-gray-600;
+}
+
+.dark .tiptap-badge[data-style="gray"] {
+  @apply bg-gray-800 border-gray-700 text-gray-400;
+}
+
+.tiptap-badge[data-style="gray"] .tiptap-badge-icon {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-badge[data-style="gray"] .tiptap-badge-icon {
+  @apply text-gray-400;
+}
+
+/* Gray - Subdued */
+.tiptap-badge[data-style="gray"][data-appearance="subdued"] {
+  @apply bg-gray-50 border-gray-200 text-gray-500;
+}
+
+.dark .tiptap-badge[data-style="gray"][data-appearance="subdued"] {
+  @apply bg-gray-900 border-gray-700 text-gray-500;
+}
+
+.tiptap-badge[data-style="gray"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+.dark .tiptap-badge[data-style="gray"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-500;
+}
+
+/* Gray - Emphasized */
+.tiptap-badge[data-style="gray"][data-appearance="emphasized"] {
+  @apply bg-gray-700 border-gray-600 text-white;
+}
+
+.dark .tiptap-badge[data-style="gray"][data-appearance="emphasized"] {
+  @apply bg-gray-900 border-gray-600 text-white;
+}
+
+.tiptap-badge[data-style="gray"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-white;
+}
+
+.dark .tiptap-badge[data-style="gray"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-white;
+}
+
+/* Green variant */
+.tiptap-badge[data-style="green"] {
+  @apply bg-green-100 border-green-300 text-green-800;
+}
+
+.dark .tiptap-badge[data-style="green"] {
+  @apply bg-green-950 border-green-800 text-green-300;
+}
+
+.tiptap-badge[data-style="green"] .tiptap-badge-icon {
+  @apply text-green-800;
+}
+
+.dark .tiptap-badge[data-style="green"] .tiptap-badge-icon {
+  @apply text-green-300;
+}
+
+/* Green - Subdued */
+.tiptap-badge[data-style="green"][data-appearance="subdued"] {
+  @apply bg-green-50 border-green-200 text-green-700;
+}
+
+.dark .tiptap-badge[data-style="green"][data-appearance="subdued"] {
+  @apply bg-green-950/50 border-green-900 text-green-400;
+}
+
+.tiptap-badge[data-style="green"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-green-700;
+}
+
+.dark .tiptap-badge[data-style="green"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-green-400;
+}
+
+/* Green - Emphasized */
+.tiptap-badge[data-style="green"][data-appearance="emphasized"] {
+  @apply bg-green-600 border-green-700 text-green-50;
+}
+
+.dark .tiptap-badge[data-style="green"][data-appearance="emphasized"] {
+  @apply bg-green-700 border-green-600 text-green-950;
+}
+
+.tiptap-badge[data-style="green"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-green-50;
+}
+
+.dark .tiptap-badge[data-style="green"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-green-950;
+}
+
+/* Yellow variant (mapped to amber) */
+.tiptap-badge[data-style="yellow"] {
+  @apply bg-amber-100 border-amber-300 text-amber-800;
+}
+
+.dark .tiptap-badge[data-style="yellow"] {
+  @apply bg-amber-950 border-amber-800 text-amber-300;
+}
+
+.tiptap-badge[data-style="yellow"] .tiptap-badge-icon {
+  @apply text-amber-800;
+}
+
+.dark .tiptap-badge[data-style="yellow"] .tiptap-badge-icon {
+  @apply text-amber-300;
+}
+
+/* Yellow - Subdued */
+.tiptap-badge[data-style="yellow"][data-appearance="subdued"] {
+  @apply bg-amber-50 border-amber-200 text-amber-700;
+}
+
+.dark .tiptap-badge[data-style="yellow"][data-appearance="subdued"] {
+  @apply bg-amber-950/50 border-amber-900 text-amber-400;
+}
+
+.tiptap-badge[data-style="yellow"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-amber-700;
+}
+
+.dark .tiptap-badge[data-style="yellow"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-amber-400;
+}
+
+/* Yellow - Emphasized */
+.tiptap-badge[data-style="yellow"][data-appearance="emphasized"] {
+  @apply bg-amber-500 border-amber-600 text-amber-950;
+}
+
+.dark .tiptap-badge[data-style="yellow"][data-appearance="emphasized"] {
+  @apply bg-amber-600 border-amber-500 text-amber-950;
+}
+
+.tiptap-badge[data-style="yellow"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-amber-950;
+}
+
+.dark .tiptap-badge[data-style="yellow"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-amber-950;
+}
+
+/* Red variant */
+.tiptap-badge[data-style="red"] {
+  @apply bg-red-100 border-red-300 text-red-800;
+}
+
+.dark .tiptap-badge[data-style="red"] {
+  @apply bg-red-950 border-red-800 text-red-300;
+}
+
+.tiptap-badge[data-style="red"] .tiptap-badge-icon {
+  @apply text-red-800;
+}
+
+.dark .tiptap-badge[data-style="red"] .tiptap-badge-icon {
+  @apply text-red-300;
+}
+
+/* Red - Subdued */
+.tiptap-badge[data-style="red"][data-appearance="subdued"] {
+  @apply bg-red-50 border-red-200 text-red-700;
+}
+
+.dark .tiptap-badge[data-style="red"][data-appearance="subdued"] {
+  @apply bg-red-950/50 border-red-900 text-red-400;
+}
+
+.tiptap-badge[data-style="red"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-red-700;
+}
+
+.dark .tiptap-badge[data-style="red"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-red-400;
+}
+
+/* Red - Emphasized */
+.tiptap-badge[data-style="red"][data-appearance="emphasized"] {
+  @apply bg-red-600 border-red-700 text-red-50;
+}
+
+.dark .tiptap-badge[data-style="red"][data-appearance="emphasized"] {
+  @apply bg-red-700 border-red-600 text-red-950;
+}
+
+.tiptap-badge[data-style="red"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-red-50;
+}
+
+.dark .tiptap-badge[data-style="red"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-red-950;
+}
+
+/* Brand variant (using blue as brand color) */
+.tiptap-badge[data-style="brand"] {
+  @apply bg-blue-100 border-blue-300 text-blue-800;
+}
+
+.dark .tiptap-badge[data-style="brand"] {
+  @apply bg-blue-950 border-blue-800 text-blue-300;
+}
+
+.tiptap-badge[data-style="brand"] .tiptap-badge-icon {
+  @apply text-blue-800;
+}
+
+.dark .tiptap-badge[data-style="brand"] .tiptap-badge-icon {
+  @apply text-blue-300;
+}
+
+/* Brand - Subdued */
+.tiptap-badge[data-style="brand"][data-appearance="subdued"] {
+  @apply bg-blue-50 border-blue-200 text-blue-700;
+}
+
+.dark .tiptap-badge[data-style="brand"][data-appearance="subdued"] {
+  @apply bg-blue-950/50 border-blue-900 text-blue-400;
+}
+
+.tiptap-badge[data-style="brand"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-blue-700;
+}
+
+.dark .tiptap-badge[data-style="brand"][data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-blue-400;
+}
+
+/* Brand - Emphasized */
+.tiptap-badge[data-style="brand"][data-appearance="emphasized"] {
+  @apply bg-blue-600 border-blue-700 text-blue-50;
+}
+
+.dark .tiptap-badge[data-style="brand"][data-appearance="emphasized"] {
+  @apply bg-blue-500 border-blue-400 text-blue-950;
+}
+
+.tiptap-badge[data-style="brand"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-100;
+}
+
+.dark .tiptap-badge[data-style="brand"][data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-900;
+}

package/src/components/tiptap-ui-primitive/badge/badge-group.css

@@ -0,0 +1,18 @@
+@import "tailwindcss";
+
+.tiptap-badge-group {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.tiptap-badge-group {
+  [data-orientation="vertical"] {
+    flex-direction: column;
+  }
+
+  [data-orientation="horizontal"] {
+    flex-direction: row;
+  }
+}

package/src/components/tiptap-ui-primitive/badge/badge.css

@@ -0,0 +1,93 @@
+@import "tailwindcss";
+
+.tiptap-badge {
+  @apply text-[0.625rem] font-bold leading-[1.15] h-5 min-w-[1.25rem] px-1 flex items-center justify-center border border-solid rounded-md;
+  font-feature-settings:
+    "salt" on,
+    "cv01" on;
+  transition-property: background, color, opacity;
+  transition-duration: 150ms;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* button size large */
+.tiptap-badge[data-size="large"] {
+  @apply text-xs h-6 min-w-[1.5rem] px-1.5 rounded-md;
+}
+
+/* button size small */
+.tiptap-badge[data-size="small"] {
+  @apply h-4 min-w-[1rem] px-0.5 rounded;
+}
+
+/* trim / expand text of the button */
+.tiptap-badge-text {
+  @apply px-0.5 flex-grow text-left;
+}
+
+.tiptap-badge[data-text-trim="on"] .tiptap-badge-text {
+  @apply overflow-hidden text-ellipsis;
+}
+
+/* standard icon, what is used */
+.tiptap-badge-icon {
+  @apply pointer-events-none flex-shrink-0 w-2.5 h-2.5;
+}
+
+.tiptap-badge[data-size="large"] .tiptap-badge-icon {
+  @apply w-3 h-3;
+}
+
+/* --------------------------------------------
+----------- BADGE COLOR SETTINGS -------------
+-------------------------------------------- */
+
+.tiptap-badge {
+  @apply bg-gray-100 border-gray-200 text-gray-700;
+}
+
+.dark .tiptap-badge {
+  @apply bg-gray-800 border-gray-700 text-gray-300;
+}
+
+.tiptap-badge .tiptap-badge-icon {
+  @apply text-gray-600;
+}
+
+.dark .tiptap-badge .tiptap-badge-icon {
+  @apply text-gray-400;
+}
+
+/* Emphasized */
+.tiptap-badge[data-appearance="emphasized"] {
+  @apply bg-blue-600 border-blue-700 text-white;
+}
+
+.dark .tiptap-badge[data-appearance="emphasized"] {
+  @apply bg-blue-500 border-blue-400 text-white;
+}
+
+.tiptap-badge[data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-200;
+}
+
+.dark .tiptap-badge[data-appearance="emphasized"] .tiptap-badge-icon {
+  @apply text-blue-100;
+}
+
+/* Subdued */
+.tiptap-badge[data-appearance="subdued"] {
+  @apply bg-gray-50 border-gray-100 text-gray-500;
+}
+
+.dark .tiptap-badge[data-appearance="subdued"] {
+  @apply bg-gray-900 border-gray-800 text-gray-500;
+}
+
+.tiptap-badge[data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-400;
+}
+
+.dark .tiptap-badge[data-appearance="subdued"] .tiptap-badge-icon {
+  @apply text-gray-600;
+}