@rimelight/ui 0.0.37 → 0.0.39

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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,31 @@
+<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

@@ -0,0 +1,65 @@
+<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

@@ -0,0 +1,28 @@
+<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

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,20 @@
+<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

@@ -0,0 +1,21 @@
+<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

@@ -0,0 +1,55 @@
+<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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,261 @@
+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
+  }
+}