lumina-slides 9.0.6 → 9.0.8

package/src/components/studio/StudioJsonEditor.vue

@@ -83,6 +83,7 @@
 <script setup lang="ts">
 import { ref, watch, computed } from 'vue';
 import { useEditor } from '../../composables/useEditor';
+import { prepareDeckForExport } from '../../utils/prepareDeckForExport';
 
 const props = defineProps<{
     isOpen: boolean;
@@ -97,15 +98,21 @@ const error = ref<string | null>(null);
 const isDirty = ref(false);
 const textareaRef = ref<HTMLTextAreaElement | null>(null);
 
-// Get initial content
+// Get initial content (same format as export: ids added, dragKey removed)
 const refreshContent = () => {
     try {
+        const deck = editor.store.state.deck;
+        if (!deck) {
+            jsonContent.value = mode.value === 'deck' ? '{}' : '';
+            return;
+        }
+        const prepared = prepareDeckForExport(deck);
         if (mode.value === 'slide') {
             const index = editor.store.state.currentIndex;
-            const slide = editor.store.state.deck?.slides[index];
+            const slide = prepared.slides?.[index];
             jsonContent.value = slide ? JSON.stringify(slide, null, 4) : '';
         } else {
-            jsonContent.value = JSON.stringify(editor.store.state.deck, null, 4);
+            jsonContent.value = JSON.stringify(prepared, null, 4);
         }
         error.value = null;
         isDirty.value = false;

package/src/components/studio/StudioToolbar.vue

@@ -83,12 +83,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onMounted, watch, toRaw } from 'vue';
-import { useRoute } from 'vue-router';
+import { computed, inject, ref, onMounted, watch } from 'vue';
+import { routeLocationKey } from 'vue-router';
 import { useEditor } from '../../composables/useEditor';
 import { useAuth } from '../../composables/useAuth';
 import { saveDeck, updateDeck } from '../../utils/firebase';
 import type { Deck } from '../../core/types';
+import { prepareDeckForExport } from '../../utils/prepareDeckForExport';
 // import SaveSuccessModal from './SaveSuccessModal.vue';
 import StudioJsonEditor from './StudioJsonEditor.vue';
 
@@ -96,7 +97,7 @@ const props = withDefaults(defineProps<{ embedMode?: boolean }>(), { embedMode:
 const emit = defineEmits<{ save: [deck: Deck] }>();
 
 const editor = useEditor();
-const route = useRoute();
+const route = inject(routeLocationKey) ?? { params: {} as Record<string, string | string[]> };
 const { user } = useAuth();
 const isSaving = ref(false);
 // const showSaveModal = ref(false);
@@ -160,10 +161,10 @@ const addElement = (type: string) => {
 };
 
 const emitSave = () => {
-    const rawDeck = toRaw(editor.store.state.deck);
+    const rawDeck = editor.store.state.deck;
     if (!rawDeck) return;
     isSaving.value = true;
-    const deckCopy = JSON.parse(JSON.stringify(rawDeck)) as Deck;
+    const deckCopy = prepareDeckForExport(rawDeck);
     emit('save', deckCopy);
     isSaving.value = false;
 };
@@ -171,14 +172,13 @@ const emitSave = () => {
 const saveToFirestore = async () => {
     isSaving.value = true;
     try {
-        // Use toRaw to strip Vue proxies for a cleaner JSON stringify
-        const rawDeck = toRaw(editor.store.state.deck);
+        const rawDeck = editor.store.state.deck;
         if (!rawDeck) {
             alert('No deck found to save.');
             return;
         }
 
-        const deckToSave = JSON.parse(JSON.stringify(rawDeck));
+        const deckToSave = prepareDeckForExport(rawDeck);
 
 
 
@@ -226,7 +226,8 @@ const exportDeck = () => {
     const deck = editor.store.state.deck;
     if (!deck) return;
 
-    const json = JSON.stringify(deck, null, 2);
+    const deckForExport = prepareDeckForExport(deck);
+    const json = JSON.stringify(deckForExport, null, 2);
     const blob = new Blob([json], { type: 'application/json' });
     const url = URL.createObjectURL(blob);
 

package/src/utils/prepareDeckForExport.ts

@@ -0,0 +1,47 @@
+/**
+ * Prepares a deck for export: strips internal dragKey and adds explicit element ids.
+ * Used by Studio export, save, and JSON view.
+ * - slide.ids: path → id for every element
+ * - each element object that can have an id (features[i], timeline[i], elements[i], nodes[i], etc.) gets id set
+ */
+import { toRaw } from 'vue';
+import type { Deck, BaseSlideData } from '../core/types';
+import { getElementPaths, resolveId, pathToKey, getValueAt } from '../core/elementResolver';
+
+/** Recursively remove all dragKey properties from an object (mutates in place). */
+export function stripDragKeys(obj: unknown): void {
+    if (obj == null || typeof obj !== 'object') return;
+    if (Array.isArray(obj)) {
+        obj.forEach(stripDragKeys);
+        return;
+    }
+    delete (obj as Record<string, unknown>)['dragKey'];
+    Object.values(obj as Record<string, unknown>).forEach(stripDragKeys);
+}
+
+/** Prepare deck for export: clone, strip dragKey, add slide.ids, and set id on each element object. */
+export function prepareDeckForExport(deck: Deck): Deck {
+    const clone = JSON.parse(JSON.stringify(toRaw(deck))) as Deck;
+    stripDragKeys(clone);
+    const slides = clone.slides ?? [];
+    slides.forEach((slide: BaseSlideData, slideIndex: number) => {
+        const paths = getElementPaths(slide);
+        if (paths.length === 0) return;
+        const slideAny = slide as { ids?: Record<string, string> };
+        if (!slideAny.ids) slideAny.ids = {};
+        paths.forEach((path) => {
+            const pathKey = pathToKey(path);
+            const resolvedId = resolveId(slide, slideIndex, path);
+            slideAny.ids![pathKey] = resolvedId;
+
+            // Set id on the element object when it's an object (e.g. features[0], elements[0], nodes[0])
+            if (path.length > 0 && path[0] !== 'slide') {
+                const value = getValueAt(slide, path);
+                if (value != null && typeof value === 'object' && !Array.isArray(value)) {
+                    (value as Record<string, string>).id = resolvedId;
+                }
+            }
+        });
+    });
+    return clone;
+}