@open-cloud-initiative/editor-x 0.0.1

package/components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

package/components/ui/spinner.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { type VariantProps, cva } from "class-variance-authority";
+import { type LucideProps, Loader2Icon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const spinnerVariants = cva("animate-spin text-muted-foreground", {
+  defaultVariants: {
+    size: "default",
+  },
+  variants: {
+    size: {
+      default: "size-4",
+      icon: "size-10",
+      lg: "size-6",
+      sm: "size-2",
+    },
+  },
+});
+
+export const Spinner = ({
+  className,
+  size,
+  ...props
+}: Partial<LucideProps & VariantProps<typeof spinnerVariants>>) => (
+  <Loader2Icon
+    className={cn(spinnerVariants({ size }), className)}
+    {...props}
+  />
+);

package/components/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

package/components/ui/toggle-group.tsx

@@ -0,0 +1,61 @@
+"use client"
+
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

package/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+"use client"
+
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const Toggle = React.forwardRef<
+  React.ElementRef<typeof TogglePrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, ...props }, ref) => (
+  <TogglePrimitive.Root
+    ref={ref}
+    className={cn(toggleVariants({ variant, size, className }))}
+    {...props}
+  />
+))
+
+Toggle.displayName = TogglePrimitive.Root.displayName
+
+export { Toggle, toggleVariants }

package/components/ui/tooltip.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+const TooltipProvider = TooltipPrimitive.Provider
+
+const Tooltip = TooltipPrimitive.Root
+
+const TooltipTrigger = TooltipPrimitive.Trigger
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        className
+      )}
+      {...props}
+    />
+  </TooltipPrimitive.Portal>
+))
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

package/components.json

@@ -0,0 +1,21 @@
+{
+    "$schema": "https://ui.shadcn.com/schema.json",
+    "style": "new-york",
+    "rsc": true,
+    "tsx": true,
+    "tailwind": {
+        "config": "tailwind.config.ts",
+        "css": "app/globals.css",
+        "baseColor": "stone",
+        "cssVariables": true,
+        "prefix": ""
+    },
+    "aliases": {
+        "components": "@/components",
+        "utils": "@/lib/utils",
+        "ui": "@/components/ui",
+        "lib": "@/lib",
+        "hooks": "@/hooks"
+    },
+    "iconLibrary": "lucide"
+}

package/config/site.ts

@@ -0,0 +1,15 @@
+export const siteConfig = {
+    name: 'Editor X',
+    url: 'https://open-cloud-initiative.github.io/editor-x/',
+    author: 'Sebastian Döll (@katallaxie)',
+    authorUrl: 'https://github.com/katallaxie',
+    links: {
+        github: 'https://github.com/open-cloud-initiative/editor-x',
+    },
+}
+
+export type SiteConfig = typeof siteConfig
+
+export const navConfig = {
+    mainNav: [{ title: siteConfig.name, path: '/' }],
+}

package/eslint.config.mjs

@@ -0,0 +1,20 @@
+import nextVitals from 'eslint-config-next/core-web-vitals'
+import prettier from 'eslint-config-prettier/flat'
+import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+const eslintConfig = defineConfig([
+    ...nextVitals,
+    prettier,
+    eslintPluginPrettierRecommended,
+    // Override default ignores of eslint-config-next.
+    globalIgnores([
+        // Default ignores of eslint-config-next:
+        '.next/**',
+        'out/**',
+        'build/**',
+        'next-env.d.ts',
+    ]),
+])
+
+export default eslintConfig

package/hooks/use-character-limit.ts

@@ -0,0 +1,28 @@
+"use client";
+
+import { ChangeEvent, useState } from "react";
+
+type UseCharacterLimitProps = {
+  maxLength: number;
+  initialValue?: string;
+};
+
+export function useCharacterLimit({ maxLength, initialValue = "" }: UseCharacterLimitProps) {
+  const [value, setValue] = useState(initialValue);
+  const [characterCount, setCharacterCount] = useState(initialValue.length);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const newValue = e.target.value;
+    if (newValue.length <= maxLength) {
+      setValue(newValue);
+      setCharacterCount(newValue.length);
+    }
+  };
+
+  return {
+    value,
+    characterCount,
+    handleChange,
+    maxLength,
+  };
+}

package/hooks/use-copy-to-clipboard.ts

@@ -0,0 +1,16 @@
+"use client"
+import { useState, useCallback } from "react"
+
+export function useCopyToClipboard() {
+  const [isCopied, setIsCopied] = useState(false)
+
+  const copyToClipboard = useCallback((text: string) => {
+    if (typeof window === "undefined") return
+    navigator.clipboard.writeText(text).then(() => {
+      setIsCopied(true)
+      setTimeout(() => setIsCopied(false), 2000)
+    })
+  }, [])
+
+  return { copyToClipboard, isCopied }
+} 

package/hooks/use-debounce.ts

@@ -0,0 +1,17 @@
+import { useState, useEffect } from "react";
+
+export function useDebounce<T>(value: T, delay: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}

package/hooks/use-image-upload.ts

@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+interface UseImageUploadProps {
+  onUpload?: (url: string) => void;
+}
+
+export function useImageUpload({ onUpload }: UseImageUploadProps = {}) {
+  const previewRef = useRef<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [fileName, setFileName] = useState<string | null>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Dummy upload function that simulates a delay and returns the local preview URL
+  const dummyUpload = async (file: File, localUrl: string): Promise<string> => {
+    try {
+      setUploading(true);
+      // Simulate network delay
+      await new Promise(resolve => setTimeout(resolve, 1500));
+      
+      // Simulate random upload errors (20% chance)
+      if (Math.random() < 0.2) {
+        throw new Error("Upload failed - This is a demo error");
+      }
+      
+      setError(null);
+      // In a real implementation, this would be the URL from the server
+      return localUrl;
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : "Upload failed";
+      setError(errorMessage);
+      throw new Error(errorMessage);
+    } finally {
+      setUploading(false);
+    }
+  };
+
+  const handleThumbnailClick = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+
+  const handleFileChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (file) {
+        setFileName(file.name);
+        const localUrl = URL.createObjectURL(file);
+        setPreviewUrl(localUrl);
+        previewRef.current = localUrl;
+
+        try {
+          const uploadedUrl = await dummyUpload(file, localUrl);
+          onUpload?.(uploadedUrl);
+        } catch (err) {
+          URL.revokeObjectURL(localUrl);
+          setPreviewUrl(null);
+          setFileName(null);
+          return console.error(err)
+        }
+      }
+    },
+    [onUpload]
+  );
+
+  const handleRemove = useCallback(() => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl(null);
+    setFileName(null);
+    previewRef.current = null;
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    setError(null);
+  }, [previewUrl]);
+
+  useEffect(() => {
+    return () => {
+      if (previewRef.current) {
+        URL.revokeObjectURL(previewRef.current);
+      }
+    };
+  }, []);
+
+  return {
+    previewUrl,
+    fileName,
+    fileInputRef,
+    handleThumbnailClick,
+    handleFileChange,
+    handleRemove,
+    uploading,
+    error,
+  };
+}

package/hooks/use-media-querry.ts

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react'
+
+export function useMediaQuery(query: string): boolean {
+  const [matches, setMatches] = useState(false)
+
+  useEffect(() => {
+    const media = window.matchMedia(query)
+    if (media.matches !== matches) {
+      setMatches(media.matches)
+    }
+    const listener = () => setMatches(media.matches)
+    window.addEventListener('resize', listener)
+    return () => window.removeEventListener('resize', listener)
+  }, [matches, query])
+
+  return matches
+}
+

package/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+const MOBILE_BREAKPOINT = 768
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    }
+    mql.addEventListener("change", onChange)
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+    return () => mql.removeEventListener("change", onChange)
+  }, [])
+
+  return !!isMobile
+}

package/lib/content.ts

@@ -0,0 +1,39 @@
+export const content = `
+  <h1>Explore the Tiptap rich text editor with Shadcn UI components 📝</h1>
+  <p>This is a powerful editor that supports many features:</p>
+  <ul class="list-disc">
+      <li>
+          <p>
+              Rich text formatting with <strong>bold</strong>, <em>italic</em>, and
+              <u>underline</u>
+          </p>
+      </li>
+      <li>
+          <p>Different heading levels</p>
+      </li>
+      <li>
+          <p>Lists (ordered and unordered)</p>
+      </li>
+      <li>
+          <p>Text alignment options</p>
+      </li>
+      <li>
+          <p>Image uploads and management</p>
+      </li>
+  </ul>
+  <h2>Try It Out!</h2>
+  <p>
+      Type '/' to see available commands or use the toolbar above to format your
+      content.
+  </p>
+  <img src="https://res.cloudinary.com/sham007/image/upload/v1737910103/ProfileImages/724shots_so.jpg" alt="Example image"
+      width="100%" align="center" caption="SAAS landing page template" aspectratio="1.640340218712029" />
+  <p>
+      You can also add links like
+      <a target="_blank" rel="noopener noreferrer nofollow" href="https://ehtisham.vercel.app">this one</a>
+      and use text alignment options.
+  </p>
+  <pre><code class="language-javascript">// Example code block
+const greeting = "Hello, World!";
+console.log(greeting);</code></pre>
+`

package/lib/cookie-client.ts

@@ -0,0 +1,19 @@
+// Client-side cookie utilities.
+// These functions manage cookies in the browser only.
+// Server actions handle cookie updates on the server side.
+
+export function setClientCookie(key: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString()
+    document.cookie = `${key}=${value}; expires=${expires}; path=/`
+}
+
+export function getClientCookie(key: string) {
+    return document.cookie
+        .split('; ')
+        .find((row) => row.startsWith(`${key}=`))
+        ?.split('=')[1]
+}
+
+export function deleteClientCookie(key: string) {
+    document.cookie = `${key}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/`
+}

package/lib/localstorage-client.ts

@@ -0,0 +1,19 @@
+'use client'
+
+export function setLocalStorageValue(key: string, value: string) {
+    try {
+        window.localStorage.setItem(key, value)
+    } catch (error) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.error('[localStorage] Failed to write value:', error)
+        }
+    }
+}
+
+export function getLocalStorageValue(key: string): string | null {
+    try {
+        return window.localStorage.getItem(key)
+    } catch {
+        return null
+    }
+}