@rimelight/ui 0.0.42 → 0.0.44

package/src/components/editor/blocks/editor/ImageBlockEditor.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import type { ImageBlockProps } from "../../types/blocks"
-import RLVInput from "../../../input/RLVInput.vue"
-
-const props = defineProps<{ props: ImageBlockProps }>()
-const emit = defineEmits<{ "update:props": [value: ImageBlockProps] }>()
-
-const src = computed({
-  get: () => props.props.src || "",
-  set: (val: string) => emit("update:props", { ...props.props, src: val })
-})
-
-const alt = computed({
-  get: () => props.props.alt || "",
-  set: (val: string) => emit("update:props", { ...props.props, alt: val })
-})
-
-const caption = computed({
-  get: () => props.props.caption || "",
-  set: (val: string) => emit("update:props", { ...props.props, caption: val })
-})
-
-defineOptions({ name: "ImageBlockEditor" })
-</script>
-
-<template>
-  <div
-    class="w-full flex flex-col gap-3 p-4 border border-default rounded-xl bg-white dark:bg-neutral-900"
-  >
-    <div class="flex flex-col gap-1">
-      <label class="text-xs font-bold text-dimmed uppercase">Image URL</label>
-      <RLVInput v-model="src" placeholder="https://..." class="w-full" />
-    </div>
-
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-      <div class="flex flex-col gap-1">
-        <label class="text-xs font-bold text-dimmed uppercase">Alt Text</label>
-        <RLVInput v-model="alt" placeholder="Alt description" class="w-full" />
-      </div>
-
-      <div class="flex flex-col gap-1">
-        <label class="text-xs font-bold text-dimmed uppercase">Caption</label>
-        <RLVInput v-model="caption" placeholder="Image caption" class="w-full" />
-      </div>
-    </div>
-
-    <div
-      v-if="src"
-      class="mt-2 flex justify-center bg-neutral-100 dark:bg-neutral-800 p-2 rounded-lg"
-    >
-      <img :src="src" :alt="alt" class="max-h-48 object-cover rounded border border-default" />
-    </div>
-  </div>
-</template>

package/src/components/editor/blocks/editor/ParagraphBlockEditor.vue

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import type { ParagraphBlockProps } from "../../types/blocks"
-import { richTextToHtml, parseHtmlToRichText } from "../utils/richTextHelpers"
-
-const props = defineProps<{ props: ParagraphBlockProps }>()
-const emit = defineEmits<{ "update:props": [value: ParagraphBlockProps] }>()
-
-const textValue = computed({
-  get: () => richTextToHtml(props.props?.text || []),
-  set: (val: string) => {
-    emit("update:props", {
-      ...props.props,
-      text: parseHtmlToRichText(val)
-    })
-  }
-})
-
-defineOptions({ name: "ParagraphBlockEditor" })
-</script>
-
-<template>
-  <div class="w-full">
-    <textarea
-      v-model="textValue"
-      placeholder="Type paragraph text here..."
-      rows="3"
-      class="w-full p-3 bg-white dark:bg-neutral-900 border border-default rounded-lg text-sm text-neutral-900 dark:text-neutral-100 focus:outline-none focus:ring-2 focus:ring-primary resize-y"
-    />
-  </div>
-</template>

package/src/components/editor/blocks/editor/SectionBlockEditor.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent } from "vue"
-import type { SectionBlockProps } from "../../types/blocks"
-import RLVInput from "../../../input/RLVInput.vue"
-import RLVButton from "../../../button/RLVButton.vue"
-import { useI18n } from "../utils/editorHelpers"
-
-const BlockEditRenderer = defineAsyncComponent(() => import("../BlockEditRenderer.vue"))
-
-const props = defineProps<{ props: SectionBlockProps; containerId?: string | null }>()
-const emit = defineEmits<{ "update:props": [value: SectionBlockProps] }>()
-
-const { t } = useI18n()
-
-const title = computed({
-  get: () => props.props.title || "",
-  set: (val: string) => emit("update:props", { ...props.props, title: val })
-})
-
-const description = computed({
-  get: () => props.props.description || "",
-  set: (val: string) => emit("update:props", { ...props.props, description: val })
-})
-
-const level = computed({
-  get: () => props.props.level || 2,
-  set: (val: number) => emit("update:props", { ...props.props, level: val as any })
-})
-
-const children = computed({
-  get: () => props.props.children || [],
-  set: (val: any[]) => emit("update:props", { ...props.props, children: val })
-})
-
-defineOptions({ name: "SectionBlockEditor" })
-</script>
-
-<template>
-  <div
-    class="w-full flex flex-col gap-4 border border-default rounded-xl p-4 bg-neutral-50/50 dark:bg-neutral-900/30"
-  >
-    <div class="flex items-center gap-3">
-      <select
-        v-model.number="level"
-        class="bg-white dark:bg-neutral-800 border border-default rounded-lg px-2 py-1 text-xs font-bold focus:outline-none"
-      >
-        <option :value="1">H1</option>
-        <option :value="2">H2</option>
-        <option :value="3">H3</option>
-        <option :value="4">H4</option>
-      </select>
-      <RLVInput v-model="title" placeholder="Section Title" class="flex-1 font-bold text-lg" />
-    </div>
-
-    <RLVInput
-      v-model="description"
-      placeholder="Section description (optional)..."
-      class="text-sm text-dimmed"
-    />
-
-    <div class="pl-4 border-l-2 border-primary-500/30 flex flex-col gap-4 mt-2">
-      <BlockEditRenderer v-model:blocks="children" :container-id="containerId" />
-    </div>
-  </div>
-</template>

package/src/components/editor/blocks/nodes/LinkNode.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { useI18n } from "../../utils/editorHelpers"
-import { getLocalizedContent } from "../../utils/page"
-
-const props = defineProps<{ node: any }>()
-const { locale } = useI18n()
-
-const href = computed(() => props.node?.props?.href || props.node?.href || props.node?.to || "#")
-const target = computed(() => props.node?.props?.target || props.node?.target || "_self")
-const contentText = computed(() => {
-  const n = props.node
-  const val = n?.props?.content ?? n?.content ?? n?.label ?? href.value
-  return getLocalizedContent(val, locale.value)
-})
-
-defineOptions({ name: "LinkNode" })
-</script>
-
-<template>
-  <a
-    :href="href"
-    :target="target"
-    class="text-primary underline hover:text-primary-600 transition-colors"
-  >
-    {{ contentText }}
-  </a>
-</template>

package/src/components/editor/blocks/nodes/TextNode.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import { useI18n } from "../../utils/editorHelpers"
-import { getLocalizedContent } from "../../utils/page"
-
-const props = defineProps<{ node: any }>()
-const { locale } = useI18n()
-
-const textContent = computed(() => {
-  const n = props.node
-  if (!n) return ""
-  if (typeof n === "string") return n
-  const val = n.props?.content ?? n.content ?? n.text ?? n.value
-  return getLocalizedContent(val, locale.value)
-})
-
-defineOptions({ name: "TextNode" })
-</script>
-
-<template>
-  <span>{{ textContent }}</span>
-</template>

package/src/components/editor/blocks/renderer/CalloutBlockRenderer.vue

@@ -1,66 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent } from "vue"
-
-const BlockViewRenderer = defineAsyncComponent(() => import("../BlockViewRenderer.vue"))
-
-const props = defineProps<{ props: any }>()
-
-const calloutProps = computed(() => props.props || {})
-const calloutChildren = computed(() => {
-  const p = props.props
-  if (!p) return []
-  return p.children || p.blocks || p.slots?.default || []
-})
-
-const variantClasses = computed(() => {
-  switch (calloutProps.value.variant) {
-    case "success":
-      return "bg-green-500/10 border-green-500/30 text-green-700 dark:text-green-300"
-    case "warning":
-      return "bg-amber-500/10 border-amber-500/30 text-amber-700 dark:text-amber-300"
-    case "error":
-      return "bg-red-500/10 border-red-500/30 text-red-700 dark:text-red-300"
-    case "commentary":
-      return "bg-purple-500/10 border-purple-500/30 text-purple-700 dark:text-purple-300"
-    case "ideation":
-      return "bg-indigo-500/10 border-indigo-500/30 text-indigo-700 dark:text-indigo-300"
-    case "source":
-      return "bg-neutral-500/10 border-neutral-500/30 text-neutral-700 dark:text-neutral-300"
-    default:
-      return "bg-blue-500/10 border-blue-500/30 text-blue-700 dark:text-blue-300"
-  }
-})
-
-const iconName = computed(() => {
-  switch (calloutProps.value.variant) {
-    case "success":
-      return "i-lucide-check-circle"
-    case "warning":
-      return "i-lucide-alert-triangle"
-    case "error":
-      return "i-lucide-alert-circle"
-    case "commentary":
-      return "i-lucide-message-square"
-    case "ideation":
-      return "i-lucide-lightbulb"
-    case "source":
-      return "i-lucide-file-code"
-    default:
-      return "i-lucide-info"
-  }
-})
-
-defineOptions({ name: "CalloutBlockRenderer" })
-</script>
-
-<template>
-  <div class="p-4 rounded-xl border flex gap-3 my-4 backdrop-blur-sm" :class="variantClasses">
-    <span :class="[iconName, 'size-5 shrink-0 mt-0.5']" />
-    <div class="flex-1 min-w-0">
-      <BlockViewRenderer
-        v-if="calloutChildren && calloutChildren.length"
-        :blocks="calloutChildren"
-      />
-    </div>
-  </div>
-</template>

package/src/components/editor/blocks/renderer/ImageBlockRenderer.vue

@@ -1,20 +0,0 @@
-<script setup lang="ts">
-import type { ImageBlockProps } from "../../types/blocks"
-
-defineProps<{ props: ImageBlockProps }>()
-defineOptions({ name: "ImageBlockRenderer" })
-</script>
-
-<template>
-  <figure class="my-6 flex flex-col items-center">
-    <img
-      v-if="props.src"
-      :src="props.src"
-      :alt="props.alt || ''"
-      class="rounded-xl border border-default shadow-md max-w-full h-auto object-cover max-h-[500px]"
-    />
-    <figcaption v-if="props.caption" class="text-xs text-dimmed mt-2 text-center italic">
-      {{ props.caption }}
-    </figcaption>
-  </figure>
-</template>

package/src/components/editor/blocks/renderer/ParagraphBlockRenderer.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import TextRenderer from "../TextRenderer.vue"
-
-const props = defineProps<{ props: any }>()
-const textContent = computed(() => {
-  const p = props.props
-  if (!p) return ""
-  return p.text ?? p.content ?? p.value ?? ""
-})
-
-defineOptions({ name: "ParagraphBlockRenderer" })
-</script>
-
-<template>
-  <p
-    class="text-base text-neutral-800 dark:text-neutral-200 leading-relaxed my-2 whitespace-pre-wrap"
-  >
-    <TextRenderer :content="textContent" />
-  </p>
-</template>

package/src/components/editor/blocks/renderer/SectionBlockRenderer.vue

@@ -1,55 +0,0 @@
-<script setup lang="ts">
-import { computed, defineAsyncComponent } from "vue"
-import { useI18n } from "../../utils/editorHelpers"
-import { getLocalizedContent } from "../../utils/page"
-
-const BlockViewRenderer = defineAsyncComponent(() => import("../BlockViewRenderer.vue"))
-
-const props = defineProps<{ props: any }>()
-const { locale } = useI18n()
-
-const headingTag = computed(() => `h${props.props?.level || 2}`)
-const headingClasses = computed(() => {
-  switch (Number(props.props?.level || 2)) {
-    case 1:
-      return "text-3xl font-extrabold tracking-tight mt-8 mb-4 border-b pb-2 text-neutral-900 dark:text-white"
-    case 2:
-      return "text-2xl font-bold tracking-tight mt-6 mb-3 text-neutral-900 dark:text-white"
-    case 3:
-      return "text-xl font-semibold mt-4 mb-2 text-neutral-900 dark:text-white"
-    default:
-      return "text-lg font-medium mt-3 mb-2 text-neutral-900 dark:text-white"
-  }
-})
-
-const titleText = computed(() => getLocalizedContent(props.props?.title, locale.value))
-const descriptionText = computed(() => getLocalizedContent(props.props?.description, locale.value))
-const sectionChildren = computed(() => {
-  const p = props.props
-  if (!p) return []
-  return p.children || p.blocks || p.slots?.default || []
-})
-
-defineOptions({ name: "SectionBlockRenderer" })
-</script>
-
-<template>
-  <div class="my-4">
-    <component
-      :is="headingTag"
-      v-if="titleText"
-      :class="headingClasses"
-      :id="typeof titleText === 'string' ? titleText.toLowerCase().replace(/\s+/g, '-') : undefined"
-    >
-      {{ titleText }}
-    </component>
-
-    <p v-if="descriptionText" class="text-sm text-dimmed mb-4 italic">
-      {{ descriptionText }}
-    </p>
-
-    <div v-if="sectionChildren && sectionChildren.length" class="flex flex-col gap-2">
-      <BlockViewRenderer :blocks="sectionChildren" />
-    </div>
-  </div>
-</template>

package/src/components/editor/composables/injectionKeys.ts

@@ -1,3 +0,0 @@
-import type { InjectionKey, ComputedRef } from "vue"
-
-export const SECTION_LEVEL_KEY = Symbol("section-level") as InjectionKey<ComputedRef<number>>

package/src/components/editor/composables/useBlockEditor.ts

@@ -1,261 +0,0 @@
-import { type Ref, computed, ref, shallowRef } from "vue"
-import type { Block } from "../types/pages"
-
-function findBlockLocation(
-  blocks: Block[],
-  id: string
-): { parentArray: Block[]; index: number } | null {
-  for (let i = 0; i < blocks.length; i++) {
-    const block = blocks[i]
-    if (!block) continue
-    if (block.id === id) {
-      return { parentArray: blocks, index: i }
-    }
-    if ("children" in block.props && Array.isArray(block.props.children)) {
-      const result = findBlockLocation(block.props.children, id)
-      if (result) return result
-    }
-  }
-  return null
-}
-
-function regenerateIds(block: Block): void {
-  block.id =
-    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-      ? crypto.randomUUID()
-      : Math.random().toString(36).substring(2)
-
-  if ("children" in block.props && Array.isArray(block.props.children)) {
-    block.props.children.forEach((child: Block) => regenerateIds(child))
-  }
-}
-
-function createDefaultBlock(type: Block["type"]): Block {
-  const id =
-    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
-      ? crypto.randomUUID()
-      : Math.random().toString(36).substring(2)
-  switch (type) {
-    case "SectionBlock":
-      return {
-        id,
-        type: "SectionBlock",
-        props: {
-          level: 2,
-          title: "New Section",
-          children: []
-        }
-      }
-    case "ParagraphBlock":
-      return {
-        id,
-        type: "ParagraphBlock",
-        props: {
-          text: []
-        }
-      }
-    case "CalloutBlock":
-      return {
-        id,
-        type: "CalloutBlock",
-        props: {
-          variant: "info",
-          children: []
-        }
-      }
-    case "ImageBlock":
-      return {
-        id,
-        type: "ImageBlock",
-        props: {
-          src: "https://placehold.co/600x400",
-          alt: "Placeholder Image"
-        }
-      }
-    default:
-      return {
-        id,
-        type: "ParagraphBlock",
-        props: { text: [] }
-      }
-  }
-}
-
-export function useBlockEditor(
-  initialBlocks: Ref<Block[]>,
-  { maxHistorySize = 100, onMutation }: { maxHistorySize?: number; onMutation?: () => void } = {}
-) {
-  const history = shallowRef<Block[][]>([])
-  const future = shallowRef<Block[][]>([])
-  const committedBlocks = ref<Block[]>(JSON.parse(JSON.stringify(initialBlocks.value)))
-
-  const canUndo = computed(() => history.value.length > 0)
-  const canRedo = computed(() => future.value.length > 0)
-
-  const captureSnapshot = () => {
-    const snapshot: Block[] = JSON.parse(JSON.stringify(initialBlocks.value))
-    future.value = []
-    const newHistory = [...history.value, snapshot]
-    if (newHistory.length > maxHistorySize) {
-      newHistory.shift()
-    }
-    history.value = newHistory
-  }
-
-  const executeMutation = (mutationFn: () => void) => {
-    if (onMutation) {
-      onMutation()
-    } else {
-      captureSnapshot()
-    }
-    mutationFn()
-  }
-
-  const undo = () => {
-    if (history.value.length === 0) return
-    const currentState: Block[] = JSON.parse(JSON.stringify(initialBlocks.value))
-    future.value = [currentState, ...future.value]
-    const previousState = history.value[history.value.length - 1]
-    if (previousState) {
-      initialBlocks.value.splice(0, initialBlocks.value.length, ...previousState)
-      const newHistory = [...history.value]
-      newHistory.pop()
-      history.value = newHistory
-    }
-  }
-
-  const redo = () => {
-    if (future.value.length === 0) return
-    const currentState: Block[] = JSON.parse(JSON.stringify(initialBlocks.value))
-    let newHistory = [...history.value, currentState]
-    if (newHistory.length > maxHistorySize) {
-      newHistory.shift()
-    }
-    history.value = newHistory
-    const nextState = future.value[0]
-    if (nextState) {
-      initialBlocks.value.splice(0, initialBlocks.value.length, ...nextState)
-      const newFuture = [...future.value]
-      newFuture.shift()
-      future.value = newFuture
-    }
-  }
-
-  const updateBlockProps = (id: string, newProps: Record<string, any>) => {
-    executeMutation(() => {
-      const loc = findBlockLocation(initialBlocks.value, id)
-      if (!loc) return
-      const oldBlock = loc.parentArray[loc.index]
-      if (!oldBlock) return
-      Object.assign(oldBlock.props, newProps)
-    })
-  }
-
-  const removeBlock = (id: string) => {
-    executeMutation(() => {
-      const loc = findBlockLocation(initialBlocks.value, id)
-      if (!loc) return
-      loc.parentArray.splice(loc.index, 1)
-    })
-  }
-
-  const moveBlock = (id: string, direction: -1 | 1) => {
-    executeMutation(() => {
-      const loc = findBlockLocation(initialBlocks.value, id)
-      if (!loc) return
-      const { parentArray, index } = loc
-      const newIndex = index + direction
-      if (newIndex >= 0 && newIndex < parentArray.length) {
-        const movedBlock = parentArray.splice(index, 1)[0]
-        if (movedBlock) {
-          parentArray.splice(newIndex, 0, movedBlock)
-        }
-      }
-    })
-  }
-
-  const duplicateBlock = (id: string) => {
-    executeMutation(() => {
-      const loc = findBlockLocation(initialBlocks.value, id)
-      if (!loc) return
-      const original = loc.parentArray[loc.index]
-      const clone: Block = JSON.parse(JSON.stringify(original))
-      regenerateIds(clone)
-      loc.parentArray.splice(loc.index + 1, 0, clone)
-    })
-  }
-
-  const insertBlock = (
-    newBlockType: Block["type"],
-    targetId: string | null = null,
-    position: "before" | "after" = "after"
-  ) => {
-    executeMutation(() => {
-      const newBlock = createDefaultBlock(newBlockType)
-      if (!targetId) {
-        initialBlocks.value.push(newBlock)
-        return
-      }
-      const loc = findBlockLocation(initialBlocks.value, targetId)
-      if (!loc) return
-      const { parentArray, index } = loc
-      const insertIndex = position === "after" ? index + 1 : index
-      parentArray.splice(insertIndex, 0, newBlock)
-    })
-  }
-
-  const commitChanges = (): Block[] => {
-    const committedSnapshot: Block[] = JSON.parse(JSON.stringify(initialBlocks.value))
-    committedBlocks.value = committedSnapshot
-    return committedSnapshot
-  }
-
-  const relocateBlock = (
-    blockId: string,
-    targetContainerId: string | null,
-    targetIndex: number
-  ) => {
-    executeMutation(() => {
-      const sourceLoc = findBlockLocation(initialBlocks.value, blockId)
-      if (!sourceLoc) return
-      const block = sourceLoc.parentArray[sourceLoc.index]
-      if (!block) return
-      sourceLoc.parentArray.splice(sourceLoc.index, 1)
-
-      let targetArray: Block[]
-      if (targetContainerId === null) {
-        targetArray = initialBlocks.value
-      } else {
-        const targetLoc = findBlockLocation(initialBlocks.value, targetContainerId)
-        if (!targetLoc) {
-          sourceLoc.parentArray.splice(sourceLoc.index, 0, block)
-          return
-        }
-        const targetBlock = targetLoc.parentArray[targetLoc.index]
-        if (!targetBlock || !("children" in targetBlock.props)) {
-          sourceLoc.parentArray.splice(sourceLoc.index, 0, block)
-          return
-        }
-        targetArray = targetBlock.props.children
-      }
-
-      const safeIndex = Math.max(0, Math.min(targetIndex, targetArray.length))
-      targetArray.splice(safeIndex, 0, block)
-    })
-  }
-
-  return {
-    updateBlockProps,
-    removeBlock,
-    moveBlock,
-    duplicateBlock,
-    insertBlock,
-    relocateBlock,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    committedBlocks,
-    commitChanges
-  }
-}