@open-cloud-initiative/editor-x 0.0.1

package/registry/editor/lib/preferences-config.ts

@@ -0,0 +1,72 @@
+/**
+ * How each preference should be saved.
+ *
+ * "client-cookie"  → write cookie on the browser only.
+ * "server-cookie"  → write cookie through a Server Action.
+ * "localStorage"   → save only on the client (non-layout stuff).
+ * "none"           → no saving, resets on reload.
+ *
+ * Layout-critical prefs (sidebar_variant / sidebar_collapsible)
+ * must stay consistent during SSR → so they can’t use localStorage.
+ * Others are flexible and can use any persistence.
+ */
+
+import type { ThemeMode, ThemePreset } from './theme'
+
+export type PreferencePersistence = 'none' | 'client-cookie' | 'server-cookie' | 'localStorage'
+
+/**
+ * All available preference keys and their value types.
+ */
+export type PreferenceValueMap = {
+    theme_mode: ThemeMode
+    theme_preset: ThemePreset
+}
+
+export type PreferenceKey = keyof PreferenceValueMap
+
+/**
+ * Layout-critical keys → these affect SSR UI (sidebar shape)
+ * so they must be accessible on the server.
+ */
+export const LAYOUT_CRITICAL_KEYS = [] as const
+export type LayoutCriticalKey = (typeof LAYOUT_CRITICAL_KEYS)[number]
+
+/**
+ * Everything else is non-critical and can be read from the client.
+ */
+export type NonCriticalKey = Exclude<PreferenceKey, LayoutCriticalKey>
+
+/**
+ * Layout-critical cannot use "localStorage" because SSR needs the value.
+ * So remove it from allowed persistence types for those keys.
+ */
+type LayoutCriticalPersistence = Exclude<PreferencePersistence, 'localStorage'>
+
+/**
+ * Final config:
+ * - layout-critical keys → restricted persistence
+ * - non-critical keys → can use any persistence
+ */
+type PreferencePersistenceConfig = {
+    [K in LayoutCriticalKey]: LayoutCriticalPersistence
+} & {
+    [K in NonCriticalKey]: PreferencePersistence
+}
+
+/**
+ * Default preference values on first load.
+ */
+export const PREFERENCE_DEFAULTS: PreferenceValueMap = {
+    theme_mode: 'light',
+    theme_preset: 'default',
+}
+
+/**
+ * How each preference is persisted.
+ * You can change these per-key.
+ */
+export const PREFERENCE_PERSISTENCE: PreferencePersistenceConfig = {
+    theme_mode: 'client-cookie',
+    theme_preset: 'client-cookie',
+}

package/registry/editor/lib/preferences-storage.ts

@@ -0,0 +1,20 @@
+'use client'
+
+import { setLocalStorageValue } from './localstorage-client'
+import { PREFERENCE_PERSISTENCE, type PreferenceKey } from './preferences-config'
+
+export async function persistPreference(key: PreferenceKey, value: string) {
+    const mode = PREFERENCE_PERSISTENCE[key]
+
+    switch (mode) {
+        case 'none':
+            return
+
+        case 'localStorage':
+            setLocalStorageValue(key, value)
+            return
+
+        default:
+            return
+    }
+}

package/registry/editor/lib/theme-utils.ts

@@ -0,0 +1,12 @@
+export function applyThemeMode(value: 'light' | 'dark') {
+    const doc = document.documentElement
+    doc.classList.add('disable-transitions')
+    doc.classList.toggle('dark', value === 'dark')
+    requestAnimationFrame(() => {
+        doc.classList.remove('disable-transitions')
+    })
+}
+
+export function applyThemePreset(value: string) {
+    document.documentElement.setAttribute('data-theme-preset', value)
+}

package/registry/editor/lib/theme.ts

@@ -0,0 +1,50 @@
+export const THEME_MODE_OPTIONS = [
+    { label: 'Light', value: 'light' },
+    { label: 'Dark', value: 'dark' },
+] as const
+
+export const THEME_MODE_VALUES = THEME_MODE_OPTIONS.map((o) => o.value)
+export type ThemeMode = (typeof THEME_MODE_VALUES)[number]
+
+// --- generated:themePresets:start ---
+
+export const THEME_PRESET_OPTIONS = [
+    {
+        label: 'Default',
+        value: 'default',
+        primary: {
+            light: 'oklch(0.205 0 0)',
+            dark: 'oklch(0.922 0 0)',
+        },
+    },
+    {
+        label: 'Brutalist',
+        value: 'brutalist',
+        primary: {
+            light: 'oklch(0.6489 0.237 26.9728)',
+            dark: 'oklch(0.7044 0.1872 23.1858)',
+        },
+    },
+    {
+        label: 'Soft Pop',
+        value: 'soft-pop',
+        primary: {
+            light: 'oklch(0.5106 0.2301 276.9656)',
+            dark: 'oklch(0.6801 0.1583 276.9349)',
+        },
+    },
+    {
+        label: 'Tangerine',
+        value: 'tangerine',
+        primary: {
+            light: 'oklch(0.64 0.17 36.44)',
+            dark: 'oklch(0.64 0.17 36.44)',
+        },
+    },
+] as const
+
+export const THEME_PRESET_VALUES = THEME_PRESET_OPTIONS.map((p) => p.value)
+
+export type ThemePreset = (typeof THEME_PRESET_OPTIONS)[number]['value']
+
+// --- generated:themePresets:end ---

package/registry/editor/lib/tiptap-utils.ts

@@ -0,0 +1,45 @@
+import { type Editor } from "@tiptap/core";
+
+export const NODE_HANDLES_SELECTED_STYLE_CLASSNAME =
+  "node-handles-selected-style";
+
+export function isValidUrl(url: string) {
+  return /^https?:\/\/\S+$/.test(url);
+}
+
+export const duplicateContent = (editor: Editor) => {
+  const { view } = editor;
+  const { state } = view;
+  const { selection } = state;
+
+  editor
+    .chain()
+    .insertContentAt(
+      selection.to,
+      /* eslint-disable */
+      // @ts-nocheck
+      selection.content().content.firstChild?.toJSON(),
+      {
+        updateSelection: true,
+      }
+    )
+    .focus(selection.to)
+    .run();
+};
+
+export function getUrlFromString(str: string) {
+  if (isValidUrl(str)) {
+    return str;
+  }
+  try {
+    if (str.includes(".") && !str.includes(" ")) {
+      return new URL(`https://${str}`).toString();
+    }
+  } catch {
+    return null;
+  }
+}
+
+export function absoluteUrl(path: string) {
+  return `${process.env.NEXT_PUBLIC_APP_URL}${path}`;
+}

package/registry/editor/lib/utils.ts

@@ -0,0 +1,11 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+// pnpx shadcn add dropdown-menu tooltip scroll-area popover separator dropdown-menu label input drawer checkbox separator command tabs dropdown-menu
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs))
+}
+
+export function absoluteUrl(path: string) {
+    return `${process.env.NEXT_PUBLIC_APP_URL}${path}`
+}

package/registry/editor/page.tsx

@@ -0,0 +1,9 @@
+import ExampleEditor from './components/rich-text-editor'
+
+export default function Page() {
+    return (
+        <div className="mx-auto w-full container flex flex-col justify-center items-center py-5">
+            <ExampleEditor />
+        </div>
+    )
+}

package/registry.json

@@ -0,0 +1,93 @@
+{
+  "name": "Editor X",
+  "homepage": "https://open-cloud-initiative.github.io/editor-x",
+  "items": [
+    {
+      "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+      "name": "editor-x",
+      "type": "registry:ui",
+      "title": "editor-x",
+      "author": "Sebastian Döll (@katallaxie)",
+      "dependencies": [
+        "@floating-ui/dom",
+        "@radix-ui/react-checkbox",
+        "@radix-ui/react-collapsible",
+        "@radix-ui/react-dialog",
+        "@radix-ui/react-dropdown-menu",
+        "@radix-ui/react-label",
+        "@radix-ui/react-popover",
+        "@radix-ui/react-scroll-area",
+        "@radix-ui/react-separator",
+        "@radix-ui/react-slot",
+        "@radix-ui/react-tabs",
+        "@radix-ui/react-toggle",
+        "@radix-ui/react-toggle-group",
+        "@radix-ui/react-tooltip",
+        "@tiptap/core",
+        "@tiptap/extension-code-block-lowlight",
+        "@tiptap/extension-color",
+        "@tiptap/extension-floating-menu",
+        "@tiptap/extension-heading",
+        "@tiptap/extension-image",
+        "@tiptap/extension-link",
+        "@tiptap/extension-list",
+        "@tiptap/extension-placeholder",
+        "@tiptap/extension-subscript",
+        "@tiptap/extension-superscript",
+        "@tiptap/extension-table",
+        "@tiptap/extension-text-align",
+        "@tiptap/extension-text-style",
+        "@tiptap/extension-typography",
+        "@tiptap/extension-underline",
+        "@tiptap/markdown",
+        "@tiptap/pm",
+        "@tiptap/react",
+        "@tiptap/starter-kit",
+        "@tiptap/suggestion",
+        "class-variance-authority",
+        "clsx",
+        "cmdk",
+        "fuse.js",
+        "lowlight",
+        "lucide-react",
+        "next",
+        "next-themes",
+        "postcss-nested",
+        "react-resizable-panels",
+        "shadcn",
+        "tailwind-merge",
+        "tailwindcss-animate",
+        "tippy.js",
+        "vaul",
+        "zustand"
+      ],
+      "devDependencies": [
+        "@eslint/eslintrc",
+        "@tailwindcss/postcss",
+        "@tiptap/extension-highlight",
+        "@total-typescript/ts-reset",
+        "@types/node",
+        "@typescript-eslint/parser",
+        "babel-plugin-react-compiler",
+        "eslint",
+        "eslint-config-google",
+        "eslint-config-next",
+        "eslint-config-prettier",
+        "eslint-import-resolver-typescript",
+        "eslint-plugin-import",
+        "eslint-plugin-prettier",
+        "postcss",
+        "prettier",
+        "prettier-eslint",
+        "prettier-plugin-tailwindcss",
+        "tailwindcss",
+        "tw-animate-css"
+      ],
+      "registryDependencies": [],
+      "files": [],
+      "css": {
+
+      }
+    }
+  ]
+}

package/reset.d.ts

@@ -0,0 +1 @@
+import "@total-typescript/ts-reset";

package/scripts/generate-theme-presets.ts

@@ -0,0 +1,128 @@
+/**
+ * Script: generate-theme-presets.ts
+ *
+ * This script scans the /styles/presets directory for CSS files containing theme definitions.
+ * It extracts `label:`, `value:`, and primary color definitions (`--primary`) for both light and dark modes.
+ * These primary colors are used to visually represent each theme in the UI (e.g., colored dots or theme previews).
+ * Default theme colors are fetched from /app/globals.css.
+ * All extracted metadata is injected into a marked section of the /lib/preferences/theme.ts file.
+ *
+ * Usage:
+ * - During local development, run manually after adding any new theme preset:
+ *     npm run generate:presets
+ * - Ensure that each new CSS preset includes `label:` and `value:` comments.
+ * - This generation step is currently automated using a Husky pre-push hook.
+ * - You may optionally integrate it directly into a build step if preferred.
+ */
+
+import { execFileSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+
+const presetDir = path.resolve(__dirname, '../styles/presets')
+
+if (!fs.existsSync(presetDir)) {
+    console.error(`❌ Preset directory not found at: ${presetDir}`)
+    process.exit(1)
+}
+
+const outputPath = path.resolve(__dirname, '../lib/preferences/theme.ts')
+
+const files = fs.readdirSync(presetDir).filter((file) => file.endsWith('.css'))
+
+if (files.length === 0) {
+    console.warn('⚠️ No preset CSS files found. Only default preset will be included.')
+}
+
+const presets = files.map((file) => {
+    const filePath = path.join(presetDir, file)
+    const content = fs.readFileSync(filePath, 'utf8')
+
+    const labelMatch = content.match(/label:\s*(.+)/)
+    const valueMatch = content.match(/value:\s*(.+)/)
+
+    if (!labelMatch) {
+        console.warn(`⚠️ No 'label:' found in ${file}, using filename as fallback.`)
+    }
+    if (!valueMatch) {
+        console.warn(`⚠️ No 'value:' found in ${file}, using filename as fallback.`)
+    }
+
+    const label = labelMatch?.[1]?.trim() ?? file.replace('.css', '')
+    const value = valueMatch?.[1]?.trim() ?? file.replace('.css', '')
+
+    const lightPrimaryMatch = content.match(/:root\[data-theme-preset="[^"]*"\][\s\S]*?--primary:\s*([^;]+);/)
+    const darkPrimaryMatch = content.match(/\.dark:root\[data-theme-preset="[^"]*"\][\s\S]*?--primary:\s*([^;]+);/)
+
+    const primary = {
+        light: lightPrimaryMatch?.[1]?.trim() ?? '',
+        dark: darkPrimaryMatch?.[1]?.trim() ?? '',
+    }
+
+    if (!lightPrimaryMatch || !darkPrimaryMatch) {
+        console.warn(`⚠️ Missing --primary for ${file} (light or dark). Check CSS syntax.`)
+    }
+
+    return { label, value, primary }
+})
+
+const globalStylesPath = path.resolve(__dirname, '../app/globals.css')
+
+let globalContent = ''
+try {
+    globalContent = fs.readFileSync(globalStylesPath, 'utf8')
+} catch (err) {
+    console.error(`❌ Could not read globals.css at ${globalStylesPath}`)
+    console.error(err)
+    process.exit(1)
+}
+
+const defaultLightPrimaryRegex = /:root\s*{[^}]*--primary:\s*([^;]+);/
+const defaultDarkPrimaryRegex = /\.dark\s*{[^}]*--primary:\s*([^;]+);/
+
+const defaultLightPrimaryMatch = defaultLightPrimaryRegex.exec(globalContent)
+const defaultDarkPrimaryMatch = defaultDarkPrimaryRegex.exec(globalContent)
+
+const defaultPrimary = {
+    light: defaultLightPrimaryMatch?.[1]?.trim() ?? '',
+    dark: defaultDarkPrimaryMatch?.[1]?.trim() ?? '',
+}
+
+presets.unshift({ label: 'Default', value: 'default', primary: defaultPrimary })
+
+const generatedBlock = `// --- generated:themePresets:start ---
+
+export const THEME_PRESET_OPTIONS = ${JSON.stringify(presets, null, 2)} as const;
+
+export const THEME_PRESET_VALUES = THEME_PRESET_OPTIONS.map((p) => p.value);
+
+export type ThemePreset = (typeof THEME_PRESET_OPTIONS)[number]["value"];
+
+// --- generated:themePresets:end ---`
+
+const fileContent = fs.readFileSync(outputPath, 'utf8')
+
+const updated = fileContent.replace(
+    /\/\/ --- generated:themePresets:start ---[\s\S]*?\/\/ --- generated:themePresets:end ---/,
+    generatedBlock,
+)
+
+async function main() {
+    const formatted = execFileSync('npx', ['@biomejs/biome', 'format', '--stdin-file-path', outputPath], {
+        input: updated,
+        encoding: 'utf8',
+    })
+
+    if (formatted === fileContent) {
+        console.log('ℹ️  No changes in theme.ts')
+        return
+    }
+
+    fs.writeFileSync(outputPath, formatted)
+    console.log('✅ theme.ts updated with new theme presets')
+}
+
+main().catch((err) => {
+    console.error('❌ Unexpected error while generating theme presets:', err)
+    process.exit(1)
+})

package/scripts/theme-boot.tsx

@@ -0,0 +1,105 @@
+/**
+ * Boot script that reads user preference values (theme mode, theme preset,
+ * content layout, navbar style) from cookies or localStorage based on the
+ * configured persistence mode.
+ *
+ * Runs early in <head> to apply the correct data attributes before hydration,
+ * preventing layout or theme flicker and keeping RootLayout fully static.
+ */
+import { PREFERENCE_DEFAULTS, PREFERENCE_PERSISTENCE } from '@/lib/preferences-config'
+
+export function ThemeBootScript() {
+    const persistence = JSON.stringify({
+        theme_mode: PREFERENCE_PERSISTENCE.theme_mode,
+        theme_preset: PREFERENCE_PERSISTENCE.theme_preset,
+    })
+
+    const defaults = JSON.stringify({
+        theme_mode: PREFERENCE_DEFAULTS.theme_mode,
+        theme_preset: PREFERENCE_DEFAULTS.theme_preset,
+    })
+
+    const code = `
+    (function () {
+      try {
+        var root = document.documentElement;
+        var PERSISTENCE = ${persistence};
+        var DEFAULTS = ${defaults};
+
+        function readCookie(name) {
+          var match = document.cookie.split("; ").find(function(c) {
+            return c.indexOf(name + "=") === 0;
+          });
+          return match ? match.split("=")[1] : null;
+        }
+
+        function readLocal(name) {
+          try {
+            return window.localStorage.getItem(name);
+          } catch (e) {
+            return null;
+          }
+        }
+
+        function readPreference(key, fallback) {
+          var mode = PERSISTENCE[key];
+          var value = null;
+
+          if (mode === "localStorage") {
+            value = readLocal(key);
+          }
+
+          if (!value && (mode === "client-cookie" || mode === "server-cookie")) {
+            value = readCookie(key);
+          }
+
+          if (!value || typeof value !== "string") {
+            return fallback;
+          }
+
+          return value;
+        }
+
+        var rawMode = readPreference("theme_mode", DEFAULTS.theme_mode);
+        var rawPreset = readPreference("theme_preset", DEFAULTS.theme_preset);
+        var rawContentLayout = readPreference("content_layout", DEFAULTS.content_layout);
+        var rawNavbarStyle = readPreference("navbar_style", DEFAULTS.navbar_style);
+        var rawSidebarVariant = readPreference("sidebar_variant", DEFAULTS.sidebar_variant);
+        var rawSidebarCollapsible = readPreference("sidebar_collapsible", DEFAULTS.sidebar_collapsible);
+
+        var mode = (rawMode === "dark" || rawMode === "light") ? rawMode : "light";
+        var preset = rawPreset || DEFAULTS.theme_preset;
+        var contentLayout = rawContentLayout || DEFAULTS.content_layout;
+        var navbarStyle = rawNavbarStyle || DEFAULTS.navbar_style;
+        var sidebarVariant = rawSidebarVariant || DEFAULTS.sidebar_variant;
+        var sidebarCollapsible = rawSidebarCollapsible || DEFAULTS.sidebar_collapsible;
+
+        root.classList.remove("light", "dark");
+        root.classList.add(mode);
+        root.setAttribute("data-theme-preset", preset);
+        root.setAttribute("data-content-layout", contentLayout);
+        root.setAttribute("data-navbar-style", navbarStyle);
+        root.setAttribute("data-sidebar-variant", sidebarVariant);
+        root.setAttribute("data-sidebar-collapsible", sidebarCollapsible);
+
+        root.style.colorScheme = mode === "dark" ? "dark" : "light";
+
+        var prefs = {
+          themeMode: mode,
+          themePreset: preset,
+          contentLayout: contentLayout,
+          navbarStyle: navbarStyle,
+          sidebarVariant: sidebarVariant,
+          sidebarCollapsible: sidebarCollapsible,
+        };
+
+        window.__PREFERENCES__ = prefs;
+      } catch (e) {
+        console.warn("ThemeBootScript error:", e);
+      }
+    })();
+  `
+
+    /* biome-ignore lint/security/noDangerouslySetInnerHtml: required for pre-hydration boot script */
+    return <script dangerouslySetInnerHTML={{ __html: code }} />
+}

package/server/server-actions.ts

@@ -0,0 +1,27 @@
+'use server'
+
+import { cookies } from 'next/headers';
+
+export async function getValueFromCookie(key: string): Promise<string | undefined> {
+    const cookieStore = await cookies()
+    return cookieStore.get(key)?.value
+}
+
+export async function setValueToCookie(
+    key: string,
+    value: string,
+    options: { path?: string; maxAge?: number } = {},
+): Promise<void> {
+    const cookieStore = await cookies()
+    cookieStore.set(key, value, {
+        path: options.path ?? '/',
+        maxAge: options.maxAge ?? 60 * 60 * 24 * 7, // default: 7 days
+    })
+}
+
+export async function getPreference<T extends string>(key: string, allowed: readonly T[], fallback: T): Promise<T> {
+    const cookieStore = await cookies()
+    const cookie = cookieStore.get(key)
+    const value = cookie ? cookie.value.trim() : undefined
+    return allowed.includes(value as T) ? (value as T) : fallback
+}

package/stores/preferences/preferences-provider.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { THEME_PRESET_VALUES } from '@/lib/theme'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { type StoreApi, useStore } from 'zustand'
+
+import { createPreferencesStore, type PreferencesState } from './preferences-store'
+
+const PreferencesStoreContext = createContext<StoreApi<PreferencesState> | null>(null)
+
+function getSafeValue<T extends string>(raw: string | null, allowed: readonly T[]): T | undefined {
+    if (!raw) return undefined
+    return allowed.includes(raw as T) ? (raw as T) : undefined
+}
+
+function readDomState(): Partial<PreferencesState> {
+    const root = document.documentElement
+
+    const mode = root.classList.contains('dark') ? 'dark' : 'light'
+
+    return {
+        themeMode: mode,
+        themePreset: getSafeValue(root.getAttribute('data-theme-preset'), THEME_PRESET_VALUES),
+    }
+}
+
+export const PreferencesStoreProvider = ({
+    children,
+    themeMode,
+    themePreset,
+}: {
+    children: React.ReactNode
+    themeMode: PreferencesState['themeMode']
+    themePreset: PreferencesState['themePreset']
+}) => {
+    const [store] = useState<StoreApi<PreferencesState>>(() => createPreferencesStore({ themeMode, themePreset }))
+
+    useEffect(() => {
+        const domState = readDomState()
+
+        store.setState((prev) => ({
+            ...prev,
+            ...domState,
+            isSynced: true,
+        }))
+    }, [store])
+
+    return <PreferencesStoreContext.Provider value={store}>{children}</PreferencesStoreContext.Provider>
+}
+
+export const usePreferencesStore = <T,>(selector: (state: PreferencesState) => T): T => {
+    const store = useContext(PreferencesStoreContext)
+    if (!store) throw new Error('Missing PreferencesStoreProvider')
+    return useStore(store, selector)
+}

package/stores/preferences/preferences-store.ts

@@ -0,0 +1,23 @@
+import { createStore } from 'zustand/vanilla'
+
+import { PREFERENCE_DEFAULTS } from '@/lib/preferences-config'
+import type { ThemeMode, ThemePreset } from '@/lib/theme'
+
+export type PreferencesState = {
+    themeMode: ThemeMode
+    themePreset: ThemePreset
+    setThemeMode: (mode: ThemeMode) => void
+    setThemePreset: (preset: ThemePreset) => void
+    isSynced: boolean
+    setIsSynced: (val: boolean) => void
+}
+
+export const createPreferencesStore = (init?: Partial<PreferencesState>) =>
+    createStore<PreferencesState>()((set) => ({
+        themeMode: init?.themeMode ?? PREFERENCE_DEFAULTS.theme_mode,
+        themePreset: init?.themePreset ?? PREFERENCE_DEFAULTS.theme_preset,
+        setThemeMode: (mode) => set({ themeMode: mode }),
+        setThemePreset: (preset) => set({ themePreset: preset }),
+        isSynced: init?.isSynced ?? false,
+        setIsSynced: (val) => set({ isSynced: val }),
+    }))