@rimelight/ui 0.0.37 → 0.0.39

package/src/components/editor/types/blocks.ts

@@ -0,0 +1,100 @@
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+export type BlockType = "SectionBlock" | "ParagraphBlock" | "CalloutBlock" | "ImageBlock"
+
+export interface BaseBlock {
+  id: string
+  type: BlockType
+  isTemplated?: boolean
+  props: Record<string, any>
+}
+
+export interface SectionBlockProps {
+  level: HeadingLevel
+  title: string
+  description?: string
+  children: Block[]
+}
+
+export interface ParagraphBlockProps {
+  text: RichTextContent
+}
+
+export type CalloutVariant =
+  | "info"
+  | "success"
+  | "warning"
+  | "error"
+  | "commentary"
+  | "ideation"
+  | "source"
+
+export interface CalloutBlockProps {
+  variant: CalloutVariant
+  children: Block[]
+  to?: string
+  target?: string
+}
+
+export interface ImageBlockProps {
+  src: string
+  alt: string
+  caption?: string
+}
+
+export interface SectionBlock extends BaseBlock {
+  type: "SectionBlock"
+  props: SectionBlockProps
+}
+
+export interface ParagraphContentBlock extends BaseBlock {
+  type: "ParagraphBlock"
+  props: ParagraphBlockProps
+}
+
+export interface CalloutContentBlock extends BaseBlock {
+  type: "CalloutBlock"
+  props: CalloutBlockProps
+}
+
+export interface ImageContentBlock extends BaseBlock {
+  type: "ImageBlock"
+  props: ImageBlockProps
+}
+
+export type Block = SectionBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock
+
+export type InlineContentType = "text" | "link" | "mention"
+
+export interface BaseInlineContent {
+  type: InlineContentType
+  id: string
+  props: Record<string, any>
+}
+
+export interface InlineText extends BaseInlineContent {
+  type: "text"
+  props: {
+    content: string
+  }
+}
+
+export interface InlineLink extends BaseInlineContent {
+  type: "link"
+  props: {
+    href: string
+    target?: "_blank" | "_self"
+    content: string
+  }
+}
+
+export interface InlineMention extends BaseInlineContent {
+  type: "mention"
+  props: {
+    pageId: string
+  }
+}
+
+export type InlineContent = InlineText | InlineLink | InlineMention
+
+export type RichTextContent = InlineContent[]

package/src/components/editor/types/pages.ts

@@ -0,0 +1,89 @@
+import { type Block } from "./blocks"
+export type { Block }
+import { type Image, type Link } from "./schemas"
+
+export type Localized<T = string> = Record<string, T>
+
+declare global {
+  interface RimelightRegisterPageTypes {}
+}
+
+export interface RegisterPageTypes extends RimelightRegisterPageTypes {
+  Default: BasePageProperties
+}
+
+export type PageType = keyof RegisterPageTypes
+
+export interface Property<T = any> {
+  defaultValue: T | string | string[] | number | Localized | Localized[]
+  label: Localized
+  type: "number" | "text" | "text-array" | "enum" | "page" | "page-array"
+  options?: string[] | Localized[]
+  allowedPageTypes?: PageType[]
+  order?: number
+  visibleIf?: (properties: any) => boolean
+}
+
+export interface PropertyGroup {
+  label: Localized
+  order?: number
+  fields: Record<string, Property>
+  defaultOpen: boolean
+}
+
+export interface PageDefinition {
+  typeLabelKey: string
+  properties: Record<string, PropertyGroup>
+  initialBlocks?: () => Block[]
+}
+
+export interface BasePageProperties {
+  [key: string]: PropertyGroup | undefined
+}
+
+export interface BasePage {
+  id: string
+  slug: string
+  icon?: Image
+  banner?: Image
+  images?: Image[]
+  title: Localized
+  description?: Localized
+  tags?: Localized[]
+  links?: Link[]
+  authorsIds?: string[]
+  blocks: Block[]
+  postedAt?: Date | string | null
+  createdAt: Date | string
+  updatedAt: Date | string
+  status?: "published" | "draft" | "archived" | (string & {})
+}
+
+export interface Page extends BasePage {
+  type: PageType
+  properties: RegisterPageTypes[PageType]
+}
+
+export type SurroundItem = Pick<BasePage, "id" | "slug" | "title" | "description">
+
+export interface PageSurround {
+  previous: SurroundItem | null
+  next: SurroundItem | null
+}
+
+export interface PageVersion extends BasePage {
+  pageId: string
+  status: "pending" | "approved" | "rejected"
+  type: PageType
+  content: {
+    blocks: Block[]
+    properties: RegisterPageTypes[PageType]
+  }
+  createdBy: string
+  approvedBy?: string | null
+  approvedAt?: Date | string | null
+}
+
+export function definePageDefinition(definition: PageDefinition): PageDefinition {
+  return definition
+}

package/src/components/editor/types/schemas.ts

@@ -0,0 +1,36 @@
+import { z } from "astro/zod"
+
+export const LocalizedSchema = (schema: z.ZodTypeAny) => z.record(z.string(), schema)
+
+export const linkVariantEnum = z.enum(["solid", "outline", "subtle", "soft", "ghost", "link"])
+
+export const linkColorEnum = z.enum([
+  "primary",
+  "secondary",
+  "neutral",
+  "error",
+  "warning",
+  "success",
+  "info"
+])
+
+export const ImageSchema = z.object({
+  src: z.string().min(1, "Image source must be provided."),
+  alt: z.string().min(1, "Image alt text must be provided."),
+  width: z.number().int().min(1).optional(),
+  height: z.number().int().min(1).optional(),
+  name: LocalizedSchema(z.string()).optional()
+})
+export type Image = z.infer<typeof ImageSchema>
+
+export const LinkSchema = z.object({
+  label: z.string().min(1, "Link label must be provided."),
+  to: z.string().min(1, "Link destination must be provided."),
+  icon: z.string().optional(),
+  trailing: z.boolean().optional(),
+  color: linkColorEnum.optional(),
+  variant: linkVariantEnum.optional()
+})
+export type Link = z.infer<typeof LinkSchema>
+
+export type UserAvailability = "available" | "busy" | "invisible"

package/src/components/editor/utils/blocks.ts

@@ -0,0 +1,42 @@
+import type { BlockType } from "../types/blocks"
+
+export interface BlockDefinition {
+  type: BlockType
+  label: string
+  icon: string
+  category: string
+  description?: string
+}
+
+export const CATEGORY_ORDER = ["Layout", "Text", "Media", "Special"]
+
+export const BLOCK_DEFINITIONS: BlockDefinition[] = [
+  {
+    type: "SectionBlock",
+    label: "blocks.SectionBlock.label",
+    icon: "i-lucide-heading",
+    category: "Layout",
+    description: "blocks.SectionBlock.description"
+  },
+  {
+    type: "ParagraphBlock",
+    label: "blocks.ParagraphBlock.label",
+    icon: "i-lucide-pilcrow",
+    category: "Text",
+    description: "blocks.ParagraphBlock.description"
+  },
+  {
+    type: "ImageBlock",
+    label: "blocks.ImageBlock.label",
+    icon: "i-lucide-image",
+    category: "Media",
+    description: "blocks.ImageBlock.description"
+  },
+  {
+    type: "CalloutBlock",
+    label: "blocks.CalloutBlock.label",
+    icon: "i-lucide-info",
+    category: "Special",
+    description: "blocks.CalloutBlock.description"
+  }
+]

package/src/components/editor/utils/editorHelpers.ts

@@ -0,0 +1,24 @@
+import { ref } from "vue"
+
+function translate(key: string, fallback?: string) {
+  if (fallback !== undefined) return fallback
+  const parts = key.split(".")
+  return parts[parts.length - 1] || key
+}
+
+export function useI18n() {
+  const locale = ref("en")
+  return { t: translate, locale }
+}
+
+function addToast(options: { title?: string; description?: string; color?: string }) {
+  if (typeof window !== "undefined") {
+    console.log(
+      `[Toast ${options.color || "info"}]: ${options.title || ""} ${options.description || ""}`
+    )
+  }
+}
+
+export function useToast() {
+  return { add: addToast }
+}

package/src/components/editor/utils/page.ts

@@ -0,0 +1,219 @@
+import { type MaybeRefOrGetter, toValue } from "vue"
+import type {
+  Localized,
+  Page,
+  PageVersion,
+  BasePageProperties,
+  PageDefinition,
+  Property,
+  PropertyGroup
+} from "../types/pages"
+import type { Block, SectionBlock } from "../types/blocks"
+
+function getValue(value: object, key: string): unknown {
+  return Reflect.get(value, key)
+}
+
+export const getLocalizedContent = <T = string>(
+  field: Localized<T> | T | undefined,
+  currentLocale: MaybeRefOrGetter<string>
+): T | string => {
+  if (field === undefined || field === null) return ""
+  if (typeof field !== "object") return String(field)
+
+  const locale = toValue(currentLocale)
+
+  if (Object.keys(field).length === 0) return ""
+
+  const val = getValue(field, locale) ?? getValue(field, "en")
+  if (val !== undefined && val !== null) {
+    if (typeof val === "string") return val
+    if (typeof val === "object") {
+      const innerVal = getValue(val, locale) ?? getValue(val, "en")
+      if (typeof innerVal === "string") return innerVal
+      const firstString = Object.values(val).find((v) => typeof v === "string")
+      if (firstString !== undefined) return firstString
+    }
+  }
+
+  const firstVal = Object.values(field).find((v) => typeof v === "string" && v.trim() !== "")
+  if (firstVal !== undefined) return String(firstVal)
+
+  return ""
+}
+
+export function syncPageWithDefinition(page: Page, definition?: PageDefinition): Page {
+  if (!definition) return page
+
+  const updatedProperties: BasePageProperties = {}
+  const definitionGroups = definition.properties
+  const existingProperties: Record<string, PropertyGroup | undefined> = page.properties || {}
+
+  for (const [groupId, group] of Object.entries(definitionGroups)) {
+    const definitionGroup = group
+    let existingGroup = existingProperties[groupId]
+
+    if (!existingGroup) {
+      const lowerGroupId = groupId.toLowerCase()
+      const foundGroupKey = Object.keys(existingProperties).find(
+        (k) => k.toLowerCase() === lowerGroupId
+      )
+      if (foundGroupKey) {
+        existingGroup = existingProperties[foundGroupKey]
+      }
+    }
+
+    const updatedGroupFields: Record<string, Property> = {}
+    const definitionFields = definitionGroup.fields || {}
+
+    for (const [fieldId, field] of Object.entries(definitionFields)) {
+      const definitionField = field
+      let value = definitionField.defaultValue
+
+      if (existingGroup) {
+        if (existingGroup.fields?.[fieldId]?.defaultValue !== undefined) {
+          value = existingGroup.fields[fieldId].defaultValue
+        } else if (getValue(existingGroup, fieldId) !== undefined) {
+          value = getValue(existingGroup, fieldId)
+        } else {
+          const lowerFieldId = fieldId.toLowerCase()
+          const foundKey = Object.keys(existingGroup).find((k) => k.toLowerCase() === lowerFieldId)
+          if (foundKey && getValue(existingGroup, foundKey) !== undefined) {
+            value = getValue(existingGroup, foundKey)
+          }
+        }
+      }
+
+      updatedGroupFields[fieldId] = {
+        ...JSON.parse(JSON.stringify(definitionField)),
+        defaultValue: value
+      }
+    }
+
+    updatedProperties[groupId] = {
+      ...definitionGroup,
+      fields: updatedGroupFields
+    }
+  }
+
+  page.properties = updatedProperties
+
+  if (definition.initialBlocks) {
+    const templateBlocks = definition.initialBlocks()
+    const currentBlocks = page.blocks || []
+    const definitionTemplatedBlocks = templateBlocks.filter((b) => b.isTemplated)
+
+    let updatedBlocks = currentBlocks.filter((b: Block) => {
+      if (!b.isTemplated) return true
+      return definitionTemplatedBlocks.some((db: Block) => isSameBlock(b, db))
+    })
+
+    for (const db of definitionTemplatedBlocks) {
+      const existingIdx = updatedBlocks.findIndex((b: Block) => isSameBlock(b, db))
+      const dbIndexAtStart = templateBlocks.findIndex((b: Block) => b.id === db.id)
+
+      if (existingIdx === -1) {
+        updatedBlocks.splice(dbIndexAtStart, 0, { ...db })
+      } else {
+        const existing = updatedBlocks[existingIdx]
+        if (!existing) {
+          updatedBlocks.splice(dbIndexAtStart, 0, { ...db })
+          continue
+        }
+
+        if (existing.type === "SectionBlock" && db.type === "SectionBlock") {
+          const updated: SectionBlock = {
+            ...existing,
+            ...db,
+            props: {
+              ...db.props,
+              children: existing.props.children || db.props.children || []
+            }
+          }
+          updatedBlocks[existingIdx] = updated
+        } else {
+          updatedBlocks[existingIdx] = { ...db }
+        }
+      }
+    }
+
+    page.blocks = updatedBlocks
+  }
+
+  return page
+}
+
+function isSameBlock(a: any, b: any) {
+  if (a.id === b.id) return true
+  if (a.type !== b.type) return false
+  if (a.type === "SectionBlock" && b.type === "SectionBlock") {
+    return a.props.title === b.props.title
+  }
+  return false
+}
+
+export function dehydratePageProperties(properties: BasePageProperties): any {
+  const dehydrated: any = {}
+  for (const [groupKey, group] of Object.entries(properties)) {
+    if (!group?.fields) continue
+    dehydrated[groupKey] = {}
+    for (const [fieldKey, field] of Object.entries(group.fields)) {
+      dehydrated[groupKey][fieldKey] = field.defaultValue
+    }
+  }
+  return dehydrated
+}
+
+export function convertVersionToPage(version: PageVersion): Page {
+  const blocks = version.content?.blocks || version.blocks || []
+  const properties = version.content?.properties || getValue(version, "properties")
+  const rawAuthorIds = getValue(version, "authorIds")
+
+  return {
+    id: version.pageId || version.id,
+    type: version.type,
+    blocks: JSON.parse(JSON.stringify(blocks)),
+    properties: properties ? JSON.parse(JSON.stringify(properties)) : {},
+    authorsIds:
+      version.authorsIds ??
+      (Array.isArray(rawAuthorIds)
+        ? rawAuthorIds.filter((s): s is string => typeof s === "string")
+        : []),
+    createdAt: version.createdAt ? new Date(version.createdAt) : new Date(),
+    updatedAt: version.updatedAt ? new Date(version.updatedAt) : new Date(),
+    postedAt: version.postedAt ? new Date(version.postedAt) : null,
+    ...(version.banner ? { banner: version.banner } : {}),
+    ...(version.icon ? { icon: version.icon } : {}),
+    images: version.images || [],
+    title: version.title || { en: "" },
+    slug: version.slug || "",
+    description: version.description || { en: "" },
+    tags: version.tags || [],
+    links: version.links || []
+  }
+}
+
+export function getPageResolutionPath(idOrSlug: string): string {
+  if (
+    !idOrSlug ||
+    idOrSlug === "undefined" ||
+    idOrSlug === "null" ||
+    idOrSlug === "[object Object]"
+  )
+    return ""
+
+  let clean = idOrSlug.replace(/^(?:.*\/)?api\/pages\/(?:id|find)\//, "")
+  clean = clean.replace(/^\/|\/$/g, "")
+
+  const parts = clean.split("/")
+  if (parts.length >= 4) {
+    const threePart = parts.slice(0, 3).join("/")
+    const nextThreePart = parts.slice(3, 6).join("/")
+    if (threePart === nextThreePart) {
+      clean = parts.slice(3).join("/")
+    }
+  }
+
+  const isUuid = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(clean)
+  return isUuid ? `/api/pages/id/${clean}` : `/api/pages/find/${clean}`
+}

package/src/components/editor/utils/richTextHelpers.ts

@@ -0,0 +1,35 @@
+import type { RichTextContent, InlineText } from "../types/blocks"
+
+export function richTextToHtml(content: RichTextContent): string {
+  if (!Array.isArray(content)) return ""
+  return content
+    .map((item) => {
+      if (item.type === "text" || item.type === "link") {
+        return item.props.content
+      }
+      if (item.type === "mention") {
+        return ""
+      }
+      return ""
+    })
+    .join("")
+}
+
+export function parseHtmlToRichText(html: string): RichTextContent {
+  if (!html || html.trim().length === 0) {
+    return []
+  }
+
+  const newTextNode: InlineText = {
+    id:
+      typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+        ? crypto.randomUUID()
+        : Math.random().toString(36).substring(2, 15),
+    type: "text",
+    props: {
+      content: html.trim()
+    }
+  }
+
+  return [newTextNode]
+}