@commonpub/editor 0.6.1 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/editor",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "type": "module",
   "description": "TipTap block editor with 18+ maker-focused extensions for CommonPub",
   "license": "AGPL-3.0-or-later",
@@ -50,8 +50,8 @@
     "remark-rehype": "^11.1.2",
     "unified": "^11.0.5",
     "zod": "^4.3.6",
-    "@commonpub/schema": "0.9.2",
-    "@commonpub/config": "0.8.0"
+    "@commonpub/config": "0.9.0",
+    "@commonpub/schema": "0.9.4"
   },
   "peerDependencies": {
     "vue": "^3.4.0",
@@ -79,8 +79,10 @@
   },
   "devDependencies": {
     "@types/mdast": "^4.0.4",
+    "@vitejs/plugin-vue": "^6.0.5",
     "jsdom": "^25.0.0",
     "typescript": "^5.7.0",
+    "vite": "^6.4.1",
     "vitest": "^3.0.0",
     "vue": "^3.5.0"
   },
@@ -90,6 +92,7 @@
     "test": "vitest run",
     "lint": "eslint src/",
     "typecheck": "tsc --noEmit",
+    "playground": "vite --config playground/vite.config.ts",
     "clean": "rm -rf dist"
   }
 }

package/vue/components/BlockCanvas.vue

@@ -9,7 +9,7 @@
  * - Drag-and-drop reordering via BlockWrapper
  * - Floating text toolbar on selection (delegated to FloatingToolbar)
  */
-import { ref, inject, type Component } from 'vue';
+import { ref, inject, onMounted, onUnmounted, type Component } from 'vue';
 import type { EditorBlock, BlockTypeGroup } from '../types.js';
 import type { BlockEditor } from '../composables/useBlockEditor.js';
 import { BLOCK_COMPONENTS_KEY, UPLOAD_HANDLER_KEY, SEARCH_PRODUCTS_KEY } from '../provide.js';
@@ -118,7 +118,16 @@ function closePicker(): void {
 
 function onPickerSelect(type: string, attrs?: Record<string, unknown>): void {
   if (slashCommandBlockId.value) {
-    props.blockEditor.replaceBlock(slashCommandBlockId.value, type, attrs);
+    // Only replace if the block is empty — otherwise insert below to preserve content
+    const block = props.blockEditor.blocks.value.find((b) => b.id === slashCommandBlockId.value);
+    const html = (block?.content?.html as string) ?? '';
+    const isEmpty = !html.replace(/<[^>]*>/g, '').trim();
+    if (isEmpty) {
+      props.blockEditor.replaceBlock(slashCommandBlockId.value, type, attrs);
+    } else {
+      const idx = props.blockEditor.getBlockIndex(slashCommandBlockId.value);
+      props.blockEditor.addBlock(type, attrs, idx + 1);
+    }
   } else {
     props.blockEditor.addBlock(type, attrs, pickerInsertIndex.value);
   }
@@ -300,6 +309,30 @@ function needsUpload(type: string): boolean {
 function needsSearch(type: string): boolean {
   return type === 'partsList';
 }
+
+// --- Undo/Redo keyboard shortcuts ---
+function onKeydown(event: KeyboardEvent): void {
+  const mod = event.metaKey || event.ctrlKey;
+  if (!mod || event.key.toLowerCase() !== 'z') return;
+
+  // Don't intercept when an element with its own undo is focused:
+  // - ProseMirror (TipTap text blocks have their own undo)
+  // - textarea/input (native browser undo for code blocks, math, titles, etc.)
+  const el = document.activeElement;
+  if (el?.closest('.ProseMirror')) return;
+  const tag = el?.tagName;
+  if (tag === 'TEXTAREA' || tag === 'INPUT' || tag === 'SELECT') return;
+
+  event.preventDefault();
+  if (event.shiftKey) {
+    props.blockEditor.redo();
+  } else {
+    props.blockEditor.undo();
+  }
+}
+
+onMounted(() => { document.addEventListener('keydown', onKeydown); });
+onUnmounted(() => { document.removeEventListener('keydown', onKeydown); });
 </script>
 
 <template>

package/vue/composables/useBlockEditor.ts

@@ -42,6 +42,67 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
   const blocks = ref<EditorBlock[]>([]);
   const selectedBlockId = ref<string | null>(null);
 
+  // --- Undo/Redo History ---
+  const MAX_HISTORY = 50;
+  const history: Array<{ blocks: EditorBlock[]; selectedBlockId: string | null }> = [];
+  const historyIndex = ref(-1);
+  const isRestoring = ref(false);
+
+  function cloneBlocks(): EditorBlock[] {
+    return blocks.value.map((b) => ({
+      id: b.id,
+      type: b.type,
+      content: JSON.parse(JSON.stringify(b.content)),
+    }));
+  }
+
+  /** Save current state snapshot to history (call AFTER mutation) */
+  function pushHistory(): void {
+    if (isRestoring.value) return;
+    // Truncate any future states if we branched from an earlier point
+    if (historyIndex.value < history.length - 1) {
+      history.splice(historyIndex.value + 1);
+    }
+    history.push({ blocks: cloneBlocks(), selectedBlockId: selectedBlockId.value });
+    if (history.length > MAX_HISTORY) {
+      history.shift();
+    }
+    historyIndex.value = history.length - 1;
+  }
+
+  function undo(): boolean {
+    if (historyIndex.value <= 0) return false;
+    historyIndex.value--;
+    const snapshot = history[historyIndex.value]!;
+    isRestoring.value = true;
+    blocks.value.splice(0, blocks.value.length, ...snapshot.blocks.map((b) => ({
+      id: b.id,
+      type: b.type,
+      content: JSON.parse(JSON.stringify(b.content)),
+    })));
+    selectedBlockId.value = snapshot.selectedBlockId;
+    isRestoring.value = false;
+    return true;
+  }
+
+  function redo(): boolean {
+    if (historyIndex.value >= history.length - 1) return false;
+    historyIndex.value++;
+    const snapshot = history[historyIndex.value]!;
+    isRestoring.value = true;
+    blocks.value.splice(0, blocks.value.length, ...snapshot.blocks.map((b) => ({
+      id: b.id,
+      type: b.type,
+      content: JSON.parse(JSON.stringify(b.content)),
+    })));
+    selectedBlockId.value = snapshot.selectedBlockId;
+    isRestoring.value = false;
+    return true;
+  }
+
+  const canUndo = computed(() => historyIndex.value > 0);
+  const canRedo = computed(() => historyIndex.value < history.length - 1);
+
   // Merge custom defaults with built-in defaults
   const defaults = options?.blockDefaults
     ? { ...BLOCK_DEFAULTS, ...options.blockDefaults }
@@ -54,12 +115,19 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
       type,
       content: { ...content },
     }));
+    // Reset history — loading new content is not an undoable operation
+    history.splice(0, history.length);
+    historyIndex.value = -1;
+    pushHistory();
   }
 
   if (initialBlocks && initialBlocks.length > 0) {
     fromBlockTuples(initialBlocks);
   }
 
+  // Capture initial state as first history entry
+  pushHistory();
+
   // --- Serialize back to BlockTuples ---
   function toBlockTuples(): BlockTuple[] {
     return blocks.value.map((b) => [b.type, { ...b.content }]);
@@ -82,6 +150,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     }
 
     selectedBlockId.value = block.id;
+    pushHistory();
     return block.id;
   }
 
@@ -98,6 +167,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
 
     blocks.value.splice(idx, 1, newBlock);
     selectedBlockId.value = newBlock.id;
+    pushHistory();
     return newBlock.id;
   }
 
@@ -108,11 +178,13 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     if (selectedBlockId.value === id) {
       selectedBlockId.value = null;
     }
+    pushHistory();
   }
 
   function clearBlocks(): void {
     blocks.value.splice(0, blocks.value.length);
     selectedBlockId.value = null;
+    pushHistory();
   }
 
   function updateBlock(id: string, content: Record<string, unknown>): void {
@@ -127,6 +199,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     if (toIndex < 0 || toIndex >= blocks.value.length) return;
     const [moved] = blocks.value.splice(fromIndex, 1);
     blocks.value.splice(toIndex, 0, moved!);
+    pushHistory();
   }
 
   function moveBlockUp(id: string): void {
@@ -150,6 +223,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     };
     blocks.value.splice(idx + 1, 0, clone);
     selectedBlockId.value = clone.id;
+    pushHistory();
   }
 
   function selectBlock(id: string | null): void {
@@ -184,6 +258,10 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     getBlockIndex,
     toBlockTuples,
     fromBlockTuples,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
   };
 }