rimelight-components 2.0.47 → 2.0.49

package/dist/runtime/composables/useBlockEditor.js

@@ -0,0 +1,163 @@
+import { computed, ref, shallowRef } from "vue";
+import { v7 as uuidv7 } from "uuid";
+function findBlockLocation(blocks, id) {
+  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.id = uuidv7();
+  if ("children" in block.props && Array.isArray(block.props.children)) {
+    block.props.children.forEach((child) => regenerateIds(child));
+  }
+}
+export function useBlockEditor(initialBlocks, maxHistorySize = 100) {
+  const history = shallowRef([]);
+  const future = shallowRef([]);
+  const committedBlocks = ref(JSON.parse(JSON.stringify(initialBlocks.value)));
+  const captureSnapshot = () => {
+    const snapshot = 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) => {
+    captureSnapshot();
+    mutationFn();
+  };
+  const undo = () => {
+    if (history.value.length === 0) return;
+    const currentState = 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 = 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 canUndo = computed(() => history.value.length > 0);
+  const canRedo = computed(() => future.value.length > 0);
+  const updateBlockProps = (id, newProps) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      const oldBlock = loc.parentArray[loc.index];
+      if (!oldBlock) return;
+      const newPropsObject = {
+        ...oldBlock.props,
+        ...newProps
+      };
+      const newBlock = {
+        id: oldBlock.id,
+        // Explicitly carry over the required BaseBlock properties
+        type: oldBlock.type,
+        // Explicitly carry over the required BaseBlock properties
+        props: newPropsObject
+      };
+      loc.parentArray.splice(loc.index, 1, newBlock);
+    });
+  };
+  const removeBlock = (id) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      loc.parentArray.splice(loc.index, 1);
+    });
+  };
+  const moveBlock = (id, direction) => {
+    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) => {
+    executeMutation(() => {
+      const loc = findBlockLocation(initialBlocks.value, id);
+      if (!loc) return;
+      const original = loc.parentArray[loc.index];
+      const clone = JSON.parse(JSON.stringify(original));
+      regenerateIds(clone);
+      loc.parentArray.splice(loc.index + 1, 0, clone);
+    });
+  };
+  const insertBlock = (newBlockType, targetId = null, position = "after") => {
+    executeMutation(() => {
+      const newBlock = {
+        id: uuidv7(),
+        type: newBlockType,
+        props: getDefaultPropsForType(newBlockType)
+      };
+      if (!targetId) {
+        initialBlocks.value.push(newBlock);
+        return;
+      }
+      const loc = findBlockLocation(initialBlocks.value, targetId);
+      if (loc) {
+        const insertIndex = position === "after" ? loc.index + 1 : loc.index;
+        loc.parentArray.splice(insertIndex, 0, newBlock);
+      }
+    });
+  };
+  const commitChanges = () => {
+    const committedSnapshot = JSON.parse(JSON.stringify(initialBlocks.value));
+    committedBlocks.value = committedSnapshot;
+    return committedSnapshot;
+  };
+  return {
+    // Mutations
+    updateBlockProps,
+    removeBlock,
+    moveBlock,
+    duplicateBlock,
+    insertBlock,
+    // History
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    // State
+    committedBlocks,
+    commitChanges
+  };
+}
+function getDefaultPropsForType(type) {
+  return { children: [] };
+}

package/dist/runtime/types/blocks.d.ts

@@ -6,7 +6,7 @@ export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
  * All valid block types the application can render.
  * This union type is the single source of truth for component names.
  */
-export type BlockType = "SectionBlock" | "ParagraphBlock" | "CalloutBlock" | "ImageBlock" | "QuoteBlock" | "UnorderedListBlock" | "CardBlock" | "CollapsibleCardBlock";
+export type BlockType = "TestBlock" | "SectionBlock" | "ParagraphBlock" | "CalloutBlock" | "ImageBlock" | "QuoteBlock" | "UnorderedListBlock" | "CardBlock" | "CollapsibleCardBlock";
 /**
  * Defines the common structure for any content block object.
  * The 'type' must be one of the registered BlockType values.
@@ -16,6 +16,9 @@ export interface BaseBlock {
     type: BlockType;
     props: Record<string, any>;
 }
+export interface TestBlockProps {
+    text: string;
+}
 export interface SectionBlockProps {
     level: HeadingLevel;
     title: string;
@@ -56,6 +59,10 @@ export interface CollapsibleCardBlockProps {
     name?: string;
     children: Block[];
 }
+export interface TestBlock extends BaseBlock {
+    type: "TestBlock";
+    props: TestBlockProps;
+}
 export interface SectionBlock extends BaseBlock {
     type: "SectionBlock";
     props: SectionBlockProps;
@@ -92,7 +99,7 @@ export interface QuoteContentBlock extends BaseBlock {
  * The full union type for a single block. This allows for type-checking the
  * payload based on the block 'type'.
  */
-export type Block = SectionBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock | QuoteContentBlock | UnorderedListContentBlock | CardBlockContent | CollapsibleCardContentBlock;
+export type Block = TestBlock | SectionBlock | ParagraphContentBlock | CalloutContentBlock | ImageContentBlock | QuoteContentBlock | UnorderedListContentBlock | CardBlockContent | CollapsibleCardContentBlock;
 /**
  * Text Rendering Components
  */

package/dist/runtime/utils/richTextHelpers.d.ts

@@ -0,0 +1,16 @@
+import type { RichTextContent } from "../types/blocks.js";
+/**
+ * Helper: Converts RichTextContent array into a plain string for a simple contenteditable area.
+ * For complex editors, this would generate full HTML/DOM nodes, preserving links/mentions.
+ * For now, we only extract the text content.
+ */
+export declare function richTextToHtml(content: RichTextContent): string;
+/**
+ * Helper: Converts a plain string from a contenteditable area back into RichTextContent.
+ *
+ * NOTE: For full rich text support, this function must parse complex HTML (<a>, <b>, <span>)
+ * and generate the correct InlineLink, InlineMention, and InlineText objects.
+ * Since we are only simulating the text content change, we convert the entire string
+ * into a single InlineText element.
+ */
+export declare function parseHtmlToRichText(html: string): RichTextContent;

package/dist/runtime/utils/richTextHelpers.js

@@ -0,0 +1,17 @@
+import { v7 as uuidv7 } from "uuid";
+export function richTextToHtml(content) {
+  return content.map((item) => item.props.content).join("");
+}
+export function parseHtmlToRichText(html) {
+  if (html.trim().length === 0) {
+    return [];
+  }
+  const newTextNode = {
+    id: uuidv7(),
+    type: "text",
+    props: {
+      content: html.trim()
+    }
+  };
+  return [newTextNode];
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "rimelight-components",
   "description": "A component library by Rimelight Entertainment.",
-  "version": "2.0.47",
+  "version": "2.0.49",
   "type": "module",
   "repository": {
     "type": "git",
@@ -79,34 +79,32 @@
   },
   "dependencies": {
     "@nuxt/image": "^1.11.0",
-    "@nuxt/kit": "^4.2.0",
-    "@nuxt/ui": "^4.1.0",
-    "@nuxtjs/i18n": "^10.1.2",
-    "@vueuse/core": "^14.0.0",
-    "@vueuse/nuxt": "^14.0.0",
+    "@nuxt/kit": "^4.2.2",
+    "@nuxt/ui": "^4.2.1",
+    "@nuxtjs/i18n": "^10.2.1",
+    "@vueuse/core": "^14.1.0",
+    "@vueuse/nuxt": "^14.1.0",
     "date-fns": "^4.1.0",
     "defu": "^6.1.4",
-    "nuxt": "^4.2.0",
-    "pinia": "^3.0.4",
-    "tailwind-variants": "^3.1.1",
-    "vue": "^3.5.22"
+    "nuxt": "^4.2.2",
+    "tailwind-variants": "^3.2.2",
+    "uuid": "^13.0.0",
+    "vue": "^3.5.25"
   },
   "devDependencies": {
-    "@nuxt/devtools": "^3.0.1",
+    "@nuxt/devtools": "^3.1.1",
     "@nuxt/module-builder": "^1.0.2",
-    "@nuxt/schema": "^4.2.0",
-    "@nuxt/test-utils": "^3.20.1",
-    "@prettier/plugin-oxc": "^0.0.4",
+    "@nuxt/schema": "^4.2.2",
+    "@nuxt/test-utils": "^3.21.0",
     "@types/node": "latest",
     "changelogen": "^0.6.2",
-    "oxlint": "^1.25.0",
-    "prettier": "^3.6.2",
-    "prettier-plugin-tailwindcss": "^0.7.1",
-    "release-it": "^19.0.5",
-    "tailwind-merge": "^3.3.1",
+    "oxfmt": "^0.18.0",
+    "oxlint": "^1.33.0",
+    "release-it": "^19.1.0",
+    "tailwind-merge": "^3.4.0",
     "typescript": "~5.9.3",
-    "vitest": "^4.0.6",
-    "vue-tsc": "^3.1.2"
+    "vitest": "^4.0.15",
+    "vue-tsc": "^3.1.8"
   },
   "trustedDependencies": [
     "@parcel/watcher",

package/dist/runtime/components/renderers/BlockEditor.vue

@@ -1,63 +0,0 @@
-<script setup>
-import { inject, provide } from "vue";
-import { getBlockEditorComponent } from "../../utils/blockMapper";
-const { blocks } = defineProps({
-  blocks: { type: Array, required: true }
-});
-const { removeBlock, moveBlock } = inject("blockEditorMutators", {
-  removeBlock: (id) => console.warn(`[Renderer] removeBlock not provided. Cannot delete block ${id}.`),
-  moveBlock: (id, newIndex) => console.warn(`[Renderer] moveBlock not provided. Cannot move block ${id}.`)
-});
-provide("blockEditorMutators", { removeBlock, moveBlock });
-const getComponent = (block) => {
-  if (!block || !block.type || block.type.length === 0) {
-    console.error(
-      "[EditorBlockRenderer] Block object is missing the critical 'type' field."
-    );
-    return null;
-  }
-  const resolvedComponent = getBlockEditorComponent(block.type);
-  if (!resolvedComponent) {
-    console.error(
-      `[EditorBlockRenderer] Editor component resolution failed for block type: ${block.type}`
-    );
-    return null;
-  }
-  return resolvedComponent;
-};
-</script>
-
-<template>
-  <div class="flex flex-col gap-lg editor-block-renderer">
-    <UEmpty
-        v-if="!blocks || blocks.length === 0"
-        variant="naked"
-        icon="lucide:pencil-line"
-        title="Start adding content blocks."
-        description="There is no content yet. Use the '+' button below to add your first block."
-    />
-    <div v-else class="flex flex-col gap-md ml-10">
-      <template v-for="block in blocks" :key="block.id">
-        <RCBlock v-if="getComponent(block)" :id="block.id">
-          <component
-              :is="getComponent(block)"
-              v-bind="block.props"
-              :is-editing="true"
-              :key="block.id"
-              :type="block.type"
-              class="block-editor-container"
-          />
-        </RCBlock>
-        <template v-else>
-          <UAlert
-            color="warning"
-            variant="subtle"
-            icon="lucide:octagon-alert"
-            title="Editor Rendering Error"
-            :description="`Editor component for type \'${block.type || 'UNKNOWN_OR_MISSING'}\' was not found. Please ensure the block name is correct and the editor component exists in the \'editor\' subdirectory.`"
-          />
-        </template>
-      </template>
-    </div>
-  </div>
-</template>

package/dist/runtime/composables/useBlockContentEditor.d.ts

@@ -1,32 +0,0 @@
-import { type Ref } from "vue";
-import { type Block } from "../types/blocks.js";
-/**
- * Defines the contract for the consuming application's save function.
- * This allows the composable to trigger persistence without knowing the API details.
- * It's assumed the callback will handle the necessary API calls and error handling.
- */
-type SaveCallback = (blocks: Block[]) => Promise<void> | void;
-export interface UseBlockContentEditorOptions {
-    /** The initial array of blocks loaded from the database/API. */
-    initialBlocks: Block[];
-    /** The function the editor calls to persist changes. It is debounced internally. */
-    saveCallback: SaveCallback;
-    /** Optional. The debounce delay in milliseconds (default: 1000ms). */
-    debounceDelay?: number;
-}
-/**
- * Manages the reactive state, updates, and debounced persistence of a block content array.
- * This composable is decoupled from data fetching and specific API endpoints.
- *
- * @param options Configuration object including initial blocks and a save callback.
- */
-export declare const useBlockContentEditor: ({ initialBlocks, saveCallback, debounceDelay, }: UseBlockContentEditorOptions) => {
-    blocks: Ref<Block[], Block[]>;
-    isSaving: Ref<boolean, boolean>;
-    lastSavedAt: Ref<Date | null, Date | null>;
-    hasUnsavedChanges: Ref<boolean, boolean>;
-    addBlock: (newBlock: Block, index?: number) => void;
-    removeBlock: (blockId: string) => void;
-    moveBlock: (blockId: string, newIndex: number) => void;
-};
-export {};

package/dist/runtime/composables/useBlockContentEditor.js

@@ -1,63 +0,0 @@
-import { ref, watch } from "vue";
-import { useDebounceFn } from "@vueuse/core";
-export const useBlockContentEditor = ({
-  initialBlocks,
-  saveCallback,
-  debounceDelay = 1e3
-}) => {
-  const blocks = ref(JSON.parse(JSON.stringify(initialBlocks)));
-  const isSaving = ref(false);
-  const lastSavedAt = ref(null);
-  const hasUnsavedChanges = ref(false);
-  const persistChanges = async (currentBlocks) => {
-    isSaving.value = true;
-    hasUnsavedChanges.value = false;
-    try {
-      await saveCallback(currentBlocks);
-      lastSavedAt.value = /* @__PURE__ */ new Date();
-      console.log("Blocks persisted successfully via callback.");
-    } catch (error) {
-      console.error("[BlockEditor] Error during persistence callback:", error);
-      hasUnsavedChanges.value = true;
-    } finally {
-      isSaving.value = false;
-    }
-  };
-  const debouncedSave = useDebounceFn(() => {
-    persistChanges(JSON.parse(JSON.stringify(blocks.value)));
-  }, debounceDelay);
-  watch(
-    blocks,
-    () => {
-      hasUnsavedChanges.value = true;
-      debouncedSave();
-    },
-    { deep: true }
-    // Crucial: Watch nested changes (e.g., text inside a ParagraphBlock)
-  );
-  const addBlock = (newBlock, index = blocks.value.length) => {
-    blocks.value.splice(index, 0, newBlock);
-  };
-  const removeBlock = (blockId) => {
-    blocks.value = blocks.value.filter((block) => block.id !== blockId);
-  };
-  const moveBlock = (blockId, newIndex) => {
-    const oldIndex = blocks.value.findIndex((block) => block.id === blockId);
-    if (oldIndex === -1) return;
-    const [blockToMove] = blocks.value.splice(oldIndex, 1);
-    blocks.value.splice(newIndex, 0, blockToMove);
-  };
-  return {
-    // Core Data
-    blocks,
-    // The array the EditorBlockRenderer will use
-    // Status
-    isSaving,
-    lastSavedAt,
-    hasUnsavedChanges,
-    // Editor Actions (Mutators)
-    addBlock,
-    removeBlock,
-    moveBlock
-  };
-};