@rimelight/ui 0.0.43 → 0.0.44

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

@@ -1,196 +0,0 @@
-<script setup lang="ts">
-import { ref, computed, inject } from "vue"
-import { BLOCK_DEFINITIONS, CATEGORY_ORDER, type BlockDefinition } from "../utils/blocks"
-import { useI18n } from "../utils/editorHelpers"
-import { scv, cx } from "css-variants"
-import { SECTION_LEVEL_KEY } from "../composables/injectionKeys"
-import RLVButton from "../../button/RLVButton.vue"
-import RLVInput from "../../input/RLVInput.vue"
-
-export interface AddBlockModalProps {}
-defineProps<AddBlockModalProps>()
-
-export interface AddBlockModalEmits {
-  select: [definition: BlockDefinition]
-}
-const emit = defineEmits<AddBlockModalEmits>()
-
-const addBlockModalStyles = scv({
-  slots: [
-    "header",
-    "headerTitle",
-    "closeButton",
-    "body",
-    "search",
-    "categoryList",
-    "categoryHeader",
-    "blockGrid",
-    "blockItem",
-    "blockIcon",
-    "blockLabel",
-    "blockDescription",
-    "footerClass",
-    "typeBadge",
-    "emptyState"
-  ],
-  base: {
-    header: "flex items-center justify-between px-4 py-3 border-b border-default",
-    headerTitle: "text-base font-semibold leading-6",
-    closeButton: "-my-1",
-    body: "p-0 max-h-[70vh] flex flex-col overflow-hidden",
-    search: "p-4 border-b border-default",
-    categoryList: "overflow-y-auto flex-1 p-4 space-y-6 max-h-[50vh]",
-    categoryHeader: "text-xs font-bold text-dimmed uppercase tracking-wider mb-3",
-    blockGrid: "flex flex-col gap-2",
-    blockItem:
-      "flex items-start gap-3 p-3 rounded-lg border border-default hover:border-primary hover:bg-primary-50 dark:hover:bg-primary-950/20 transition-all cursor-pointer text-left w-full",
-    blockIcon:
-      "w-10 h-10 flex items-center justify-center rounded-md bg-neutral-100 dark:bg-neutral-900 text-neutral-500 group-hover:text-primary shrink-0",
-    blockLabel: "font-medium text-sm block text-default",
-    blockDescription: "text-xs text-dimmed block mt-0.5",
-    footerClass: "flex justify-end gap-2 p-4 border-t border-default",
-    typeBadge:
-      "text-[10px] font-mono text-dimmed px-1.5 py-0.5 bg-neutral-100 dark:bg-neutral-900 rounded shrink-0",
-    emptyState: "flex flex-col items-center justify-center py-12 text-center"
-  }
-})
-const styles = computed(() => addBlockModalStyles())
-
-const open = defineModel<boolean>("open", { default: false })
-const { t } = useI18n()
-const searchQuery = ref("")
-const sectionLevel = inject(
-  SECTION_LEVEL_KEY,
-  computed(() => 1)
-)
-const filteredBlocks = computed(() => {
-  let blocks = BLOCK_DEFINITIONS
-  if (sectionLevel.value >= 6) {
-    blocks = blocks.filter((b) => b.type !== "SectionBlock")
-  }
-  if (!searchQuery.value) return blocks
-  const query = searchQuery.value.toLowerCase()
-  return blocks.filter(
-    (block) =>
-      t(block.label).toLowerCase().includes(query) ||
-      block.type.toLowerCase().includes(query) ||
-      block.category.toLowerCase().includes(query) ||
-      (block.description && t(block.description).toLowerCase().includes(query))
-  )
-})
-const groupedBlocks = computed(() => {
-  const groups: Record<string, BlockDefinition[]> = {}
-  filteredBlocks.value.forEach((block) => {
-    const category = block.category
-    if (!groups[category]) {
-      groups[category] = []
-    }
-    groups[category]!.push(block)
-  })
-  const sortedGroups: Record<string, BlockDefinition[]> = {}
-  CATEGORY_ORDER.forEach((category) => {
-    if (groups[category]) {
-      sortedGroups[category] = groups[category]!
-    }
-  })
-  Object.keys(groups).forEach((category) => {
-    if (!sortedGroups[category]) {
-      sortedGroups[category] = groups[category]!
-    }
-  })
-  return sortedGroups
-})
-
-const handleSelect = (block: BlockDefinition) => {
-  emit("select", block)
-  open.value = false
-}
-
-defineOptions({ name: "AddBlockModal" })
-</script>
-
-<template>
-  <div
-    v-if="open"
-    class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
-    @click.self="open = false"
-  >
-    <div
-      class="bg-white dark:bg-neutral-900 border border-default rounded-2xl w-full max-w-lg shadow-xl overflow-hidden flex flex-col"
-    >
-      <div :class="styles.header">
-        <h3 :class="styles.headerTitle">
-          {{ t("page_editor.add_block", "Add Block") }}
-        </h3>
-        <RLVButton
-          color="neutral"
-          variant="ghost"
-          leading-leading-icon="i-lucide-x"
-          class="!p-1.5"
-          :class="styles.closeButton"
-          @click="open = false"
-        />
-      </div>
-      <div :class="styles.body">
-        <div :class="styles.search">
-          <RLVInput
-            v-model="searchQuery"
-            leading-icon="i-lucide-search"
-            :placeholder="t('page_editor.search_blocks', 'Search blocks...')"
-            autofocus
-            color="neutral"
-            class="w-full"
-          />
-        </div>
-        <div :class="styles.categoryList">
-          <template v-if="Object.keys(groupedBlocks).length > 0">
-            <div v-for="(blocksList, category) in groupedBlocks" :key="category" class="space-y-3">
-              <h4 :class="styles.categoryHeader">
-                {{ category }}
-              </h4>
-              <div :class="styles.blockGrid">
-                <button
-                  v-for="block in blocksList"
-                  :key="block.type"
-                  :class="styles.blockItem"
-                  @click="handleSelect(block)"
-                >
-                  <span :class="styles.blockIcon">
-                    <span :class="block.icon" class="size-5 shrink-0" />
-                  </span>
-                  <span class="flex-1 text-left">
-                    <span class="flex items-center justify-between gap-2">
-                      <span :class="styles.blockLabel">
-                        {{ t(block.label, block.type) }}
-                      </span>
-                      <span :class="styles.typeBadge">
-                        {{ block.type }}
-                      </span>
-                    </span>
-                    <span v-if="block.description" :class="styles.blockDescription">
-                      {{ t(block.description, "") }}
-                    </span>
-                  </span>
-                </button>
-              </div>
-            </div>
-          </template>
-          <div v-else :class="styles.emptyState">
-            <span class="i-lucide-search-slash size-10 text-neutral-400 mb-4" />
-            <p class="text-dimmed">
-              {{ t("page_editor.no_blocks_found", "No blocks found") }}
-            </p>
-          </div>
-        </div>
-      </div>
-      <div :class="styles.footerClass">
-        <RLVButton
-          color="neutral"
-          variant="ghost"
-          :label="t('common.cancel', 'Cancel')"
-          @click="open = false"
-        />
-      </div>
-    </div>
-  </div>
-</template>

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

@@ -1,142 +0,0 @@
-<script setup lang="ts">
-import { inject, defineAsyncComponent } from "vue"
-import type { Block as BlockType } from "../types/blocks"
-import ParagraphBlockEditor from "./editor/ParagraphBlockEditor.vue"
-import ImageBlockEditor from "./editor/ImageBlockEditor.vue"
-import RLVButton from "../../button/RLVButton.vue"
-
-const SectionBlockEditor = defineAsyncComponent(() => import("./editor/SectionBlockEditor.vue"))
-const CalloutBlockEditor = defineAsyncComponent(() => import("./editor/CalloutBlockEditor.vue"))
-
-export interface BlockProps {
-  block: BlockType
-  index: number
-  total: number
-  containerId?: string | null
-}
-
-const props = defineProps<BlockProps>()
-
-const editorApi = inject<any>("block-editor-api")
-
-const updateProps = (newProps: Record<string, any>) => {
-  if (editorApi) {
-    editorApi.updateBlockProps(props.block.id, newProps)
-  }
-}
-
-const handleRemove = () => {
-  if (editorApi) editorApi.removeBlock(props.block.id)
-}
-
-const handleMoveUp = () => {
-  if (editorApi) editorApi.moveBlock(props.block.id, -1)
-}
-
-const handleMoveDown = () => {
-  if (editorApi) editorApi.moveBlock(props.block.id, 1)
-}
-
-const handleDuplicate = () => {
-  if (editorApi) editorApi.duplicateBlock(props.block.id)
-}
-
-const handleAddBefore = () => {
-  if (editorApi) editorApi.openAddBlockModal(props.block.id, "before")
-}
-
-const handleAddAfter = () => {
-  if (editorApi) editorApi.openAddBlockModal(props.block.id, "after")
-}
-
-defineOptions({ name: "Block" })
-</script>
-
-<template>
-  <div class="relative group/block my-2 w-full">
-    <div
-      class="absolute -top-3 left-1/2 -translate-x-1/2 z-10 opacity-0 group-hover/block:opacity-100 transition-opacity flex gap-1 bg-white dark:bg-neutral-800 border border-default rounded-full px-2 py-0.5 shadow-md"
-    >
-      <RLVButton
-        leading-icon="i-lucide-plus"
-        variant="ghost"
-        color="neutral"
-        class="!p-1 text-xs"
-        title="Add block before"
-        @click="handleAddBefore"
-      />
-      <RLVButton
-        leading-icon="i-lucide-arrow-up"
-        variant="ghost"
-        color="neutral"
-        class="!p-1 text-xs"
-        :disabled="index === 0"
-        title="Move up"
-        @click="handleMoveUp"
-      />
-      <RLVButton
-        leading-icon="i-lucide-arrow-down"
-        variant="ghost"
-        color="neutral"
-        class="!p-1 text-xs"
-        :disabled="index === total - 1"
-        title="Move down"
-        @click="handleMoveDown"
-      />
-      <RLVButton
-        leading-icon="i-lucide-copy"
-        variant="ghost"
-        color="neutral"
-        class="!p-1 text-xs"
-        title="Duplicate"
-        @click="handleDuplicate"
-      />
-      <RLVButton
-        leading-icon="i-lucide-trash"
-        variant="ghost"
-        color="danger"
-        class="!p-1 text-xs"
-        title="Delete"
-        @click="handleRemove"
-      />
-    </div>
-
-    <div class="w-full transition-all rounded-xl hover:ring-1 hover:ring-primary/40">
-      <SectionBlockEditor
-        v-if="block.type === 'SectionBlock'"
-        :props="block.props as any"
-        :container-id="block.id"
-        @update:props="updateProps"
-      />
-      <ParagraphBlockEditor
-        v-else-if="block.type === 'ParagraphBlock'"
-        :props="block.props as any"
-        @update:props="updateProps"
-      />
-      <CalloutBlockEditor
-        v-else-if="block.type === 'CalloutBlock'"
-        :props="block.props as any"
-        :container-id="block.id"
-        @update:props="updateProps"
-      />
-      <ImageBlockEditor
-        v-else-if="block.type === 'ImageBlock'"
-        :props="block.props as any"
-        @update:props="updateProps"
-      />
-    </div>
-
-    <div
-      class="absolute -bottom-3 left-1/2 -translate-x-1/2 z-10 opacity-0 group-hover/block:opacity-100 transition-opacity flex gap-1 bg-white dark:bg-neutral-800 border border-default rounded-full px-2 py-0.5 shadow-md"
-    >
-      <RLVButton
-        leading-icon="i-lucide-plus"
-        variant="ghost"
-        color="neutral"
-        class="!p-1 text-xs"
-        title="Add block after"
-        @click="handleAddAfter"
-      />
-    </div>
-  </div>
-</template>

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

@@ -1,26 +0,0 @@
-<script setup lang="ts">
-import type { Block as BlockType } from "../types/blocks"
-import Block from "./Block.vue"
-
-export interface BlockEditRendererProps {
-  blocks: BlockType[]
-  containerId?: string | null
-}
-
-defineProps<BlockEditRendererProps>()
-defineEmits<{
-  start: []
-  end: []
-  change: [any]
-}>()
-
-defineOptions({ name: "BlockEditRenderer" })
-</script>
-
-<template>
-  <div class="flex flex-col gap-4 w-full">
-    <template v-for="(block, index) in blocks" :key="block.id">
-      <Block :block="block" :index="index" :total="blocks.length" :container-id="containerId" />
-    </template>
-  </div>
-</template>

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

@@ -1,141 +0,0 @@
-<script setup lang="ts">
-import { provide, ref, computed } from "vue"
-import type { Block } from "../types/blocks"
-import { useBlockEditor } from "../composables/useBlockEditor"
-import { type BlockDefinition } from "../utils/blocks"
-import { useI18n } from "../utils/editorHelpers"
-import { scv, cx } from "css-variants"
-import BlockEditRenderer from "./BlockEditRenderer.vue"
-import AddBlockModal from "./AddBlockModal.vue"
-import RLVButton from "../../button/RLVButton.vue"
-
-export interface BlockEditorProps {
-  historyLimit?: number
-  containerId?: string | null
-}
-const { historyLimit, containerId = null } = defineProps<BlockEditorProps>()
-
-export interface BlockEditorEmits {
-  save: []
-  mutation: []
-  start: []
-  end: []
-  change: [any]
-}
-const emit = defineEmits<BlockEditorEmits>()
-
-const blockEditorStyles = scv({
-  slots: ["root", "footerClass"],
-  base: {
-    root: "flex flex-col gap-8 w-full",
-    footerClass: "flex flex-col items-center justify-center gap-4 p-4"
-  }
-})
-const styles = computed(() => blockEditorStyles())
-
-const blocks = defineModel<Block[]>({ required: true })
-const { t } = useI18n()
-const {
-  removeBlock,
-  moveBlock,
-  duplicateBlock,
-  updateBlockProps,
-  insertBlock,
-  relocateBlock,
-  undo,
-  redo,
-  canUndo,
-  canRedo
-} = useBlockEditor(blocks, { maxHistorySize: historyLimit, onMutation: () => emit("mutation") })
-
-const isAddBlockModalOpen = ref(false)
-const addBlockTarget = ref<{ id: string | null; position: "before" | "after" }>({
-  id: null,
-  position: "after"
-})
-
-provide("block-editor-api", {
-  removeBlock,
-  moveBlock,
-  duplicateBlock,
-  updateBlockProps,
-  insertBlock,
-  relocateBlock,
-  canUndo,
-  canRedo,
-  undo,
-  redo,
-  openAddBlockModal
-})
-
-defineExpose({ undo, redo, canUndo, canRedo })
-
-function uuidv7(): string {
-  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
-    return crypto.randomUUID()
-  }
-  return Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15)
-}
-
-function regenerateIds(block: Block): void {
-  block.id = uuidv7()
-  if (block.props && "children" in block.props && Array.isArray(block.props.children)) {
-    block.props.children.forEach((child: Block) => regenerateIds(child))
-  }
-}
-
-function openAddBlockModal(targetId: string | null = null, position: "before" | "after" = "after") {
-  addBlockTarget.value = { id: targetId, position }
-  isAddBlockModalOpen.value = true
-}
-
-const handleBlockSelect = (definition: BlockDefinition) => {
-  insertBlock(definition.type, addBlockTarget.value.id, addBlockTarget.value.position)
-}
-
-const handleDragStart = () => {
-  emit("start")
-}
-
-const handleDragEnd = async () => {
-  emit("end")
-  emit("mutation")
-}
-
-const handleBlockChange = (event: any) => {
-  if (event.added) {
-    const block = event.added.element
-    if (block) {
-      regenerateIds(block)
-    }
-  }
-  emit("change", event)
-  if (event.added || event.removed || event.moved) {
-    emit("mutation")
-  }
-}
-
-defineOptions({ name: "BlockEditor" })
-</script>
-
-<template>
-  <div :class="styles.root">
-    <BlockEditRenderer
-      v-model:blocks="blocks"
-      :container-id="containerId"
-      @start="handleDragStart"
-      @end="handleDragEnd"
-      @change="handleBlockChange"
-    />
-    <div v-if="blocks && blocks.length > 0" :class="styles.footerClass">
-      <RLVButton
-        color="neutral"
-        :label="t('page_editor.add_block', 'Add Block')"
-        variant="outline"
-        leading-leading-icon="i-lucide-plus"
-        @click="openAddBlockModal()"
-      />
-    </div>
-    <AddBlockModal v-model:open="isAddBlockModalOpen" @select="handleBlockSelect" />
-  </div>
-</template>

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

@@ -1,71 +0,0 @@
-<script setup lang="ts">
-import { defineAsyncComponent } from "vue"
-import ParagraphBlockRenderer from "./renderer/ParagraphBlockRenderer.vue"
-import ImageBlockRenderer from "./renderer/ImageBlockRenderer.vue"
-
-const SectionBlockRenderer = defineAsyncComponent(
-  () => import("./renderer/SectionBlockRenderer.vue")
-)
-const CalloutBlockRenderer = defineAsyncComponent(
-  () => import("./renderer/CalloutBlockRenderer.vue")
-)
-
-export interface BlockViewRendererProps {
-  blocks: any[]
-}
-
-defineProps<BlockViewRendererProps>()
-
-function normalizeBlockType(type: string = ""): string {
-  if (!type) return ""
-  return type.toLowerCase().replace(/block$/, "")
-}
-
-function normalizeProps(block: any): any {
-  if (!block) return {}
-  const merged = {
-    ...block.attrs,
-    ...block.props
-  }
-  if (!merged.text && merged.content) {
-    merged.text = merged.content
-  }
-  if (!merged.children) {
-    if (Array.isArray(block.children)) {
-      merged.children = block.children
-    } else if (Array.isArray(block.blocks)) {
-      merged.children = block.blocks
-    } else if (block.slots?.default && Array.isArray(block.slots.default)) {
-      merged.children = block.slots.default
-    } else if (block.slots?.main && Array.isArray(block.slots.main)) {
-      merged.children = block.slots.main
-    }
-  }
-  return merged
-}
-
-defineOptions({ name: "BlockViewRenderer" })
-</script>
-
-<template>
-  <div class="flex flex-col gap-2 w-full">
-    <template v-for="(block, index) in blocks" :key="block.id || index">
-      <SectionBlockRenderer
-        v-if="normalizeBlockType(block.type) === 'section'"
-        :props="normalizeProps(block)"
-      />
-      <ParagraphBlockRenderer
-        v-else-if="normalizeBlockType(block.type) === 'paragraph'"
-        :props="normalizeProps(block)"
-      />
-      <CalloutBlockRenderer
-        v-else-if="normalizeBlockType(block.type) === 'callout'"
-        :props="normalizeProps(block)"
-      />
-      <ImageBlockRenderer
-        v-else-if="normalizeBlockType(block.type) === 'image'"
-        :props="normalizeProps(block)"
-      />
-    </template>
-  </div>
-</template>

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

@@ -1,31 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "../utils/editorHelpers"
-import { getLocalizedContent } from "../utils/page"
-import TextNode from "./nodes/TextNode.vue"
-import LinkNode from "./nodes/LinkNode.vue"
-import PageMention from "../PageMention.vue"
-
-export interface TextRendererProps {
-  content: any
-}
-
-defineProps<TextRendererProps>()
-const { locale } = useI18n()
-defineOptions({ name: "TextRenderer" })
-</script>
-
-<template>
-  <span v-if="Array.isArray(content)">
-    <template v-for="(item, index) in content" :key="item.id || index">
-      <TextNode v-if="item.type === 'text'" :node="item" />
-      <LinkNode v-else-if="item.type === 'link'" :node="item" />
-      <PageMention
-        v-else-if="item.type === 'mention'"
-        :page-id="item.props?.pageId || item.pageId"
-      />
-      <span v-else>{{ getLocalizedContent(item, locale) }}</span>
-    </template>
-  </span>
-  <span v-else-if="typeof content === 'string'">{{ content }}</span>
-  <span v-else-if="content">{{ getLocalizedContent(content, locale) }}</span>
-</template>

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

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { computed } from "vue"
-import type { CalloutBlockProps, CalloutVariant } from "../../types/blocks"
-
-import BlockEditRenderer from "../BlockEditRenderer.vue"
-
-const props = defineProps<{ props: CalloutBlockProps; containerId?: string | null }>()
-const emit = defineEmits<{ "update:props": [value: CalloutBlockProps] }>()
-
-const variant = computed({
-  get: () => props.props.variant || "info",
-  set: (val: CalloutVariant) => emit("update:props", { ...props.props, variant: val })
-})
-
-const children = computed({
-  get: () => props.props.children || [],
-  set: (val: any[]) => emit("update:props", { ...props.props, children: val })
-})
-
-const variants: CalloutVariant[] = [
-  "info",
-  "success",
-  "warning",
-  "error",
-  "commentary",
-  "ideation",
-  "source"
-]
-
-defineOptions({ name: "CalloutBlockEditor" })
-</script>
-
-<template>
-  <div
-    class="w-full flex flex-col gap-3 border border-default rounded-xl p-4 bg-white dark:bg-neutral-900"
-  >
-    <div class="flex items-center gap-2">
-      <label class="text-xs font-bold uppercase tracking-wider text-dimmed">Callout Type:</label>
-      <select
-        v-model="variant"
-        class="bg-neutral-100 dark:bg-neutral-800 border border-default rounded px-2 py-1 text-xs font-medium focus:outline-none"
-      >
-        <option v-for="v in variants" :key="v" :value="v">
-          {{ v.toUpperCase() }}
-        </option>
-      </select>
-    </div>
-
-    <div class="p-3 rounded-lg border border-dashed border-default">
-      <BlockEditRenderer v-model:blocks="children" :container-id="containerId" />
-    </div>
-  </div>
-</template>