@rimelight/ui 0.0.37 → 0.0.38

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

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

@@ -0,0 +1,141 @@
+<script setup lang="ts">
+import { inject } from "vue"
+import type { Block as BlockType } from "../types/blocks"
+import ParagraphBlockEditor from "./editor/ParagraphBlockEditor.vue"
+import SectionBlockEditor from "./editor/SectionBlockEditor.vue"
+import CalloutBlockEditor from "./editor/CalloutBlockEditor.vue"
+import ImageBlockEditor from "./editor/ImageBlockEditor.vue"
+import RLVButton from "../../button/RLVButton.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

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

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

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import ParagraphBlockRenderer from "./renderer/ParagraphBlockRenderer.vue"
+import SectionBlockRenderer from "./renderer/SectionBlockRenderer.vue"
+import CalloutBlockRenderer from "./renderer/CalloutBlockRenderer.vue"
+import ImageBlockRenderer from "./renderer/ImageBlockRenderer.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

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from "vue"
+import type { CalloutBlockProps, CalloutVariant } from "../../types/blocks"
+
+const BlockEditRenderer = defineAsyncComponent(() => import("../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>