@commonpub/editor 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/editor",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "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/config": "0.8.0",
-    "@commonpub/schema": "0.9.2"
+    "@commonpub/config": "0.9.0",
+    "@commonpub/schema": "0.9.3"
   },
   "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

@@ -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);
   }

package/vue/components/blocks/MarkdownBlock.vue

@@ -4,11 +4,11 @@ import { markdownToBlockTuples } from '@commonpub/editor';
 import type { BlockTuple } from '@commonpub/editor';
 
 const props = defineProps<{
-  content: { source: string };
+  content: Record<string, unknown>;
 }>();
 
 const emit = defineEmits<{
-  update: [content: { source: string }];
+  update: [content: Record<string, unknown>];
 }>();
 
 /** Type-safe block content accessors — cast content to record for dynamic key access */
@@ -20,10 +20,10 @@ function bNum(block: BlockTuple, key: string): number {
 }
 
 const viewMode = ref<'edit' | 'split' | 'preview'>('split');
-const source = ref(props.content.source || '');
+const source = ref((props.content.source as string) || '');
 
-watch(() => props.content.source, (val) => {
-  if (val !== source.value) source.value = val;
+watch(() => props.content.source as string, (val) => {
+  if (val !== source.value) source.value = val ?? '';
 });
 
 const previewBlocks = computed(() => {

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 }
@@ -60,6 +121,9 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     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 +146,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     }
 
     selectedBlockId.value = block.id;
+    pushHistory();
     return block.id;
   }
 
@@ -98,6 +163,7 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
 
     blocks.value.splice(idx, 1, newBlock);
     selectedBlockId.value = newBlock.id;
+    pushHistory();
     return newBlock.id;
   }
 
@@ -108,11 +174,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 +195,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 +219,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 +254,10 @@ export function useBlockEditor(initialBlocks?: BlockTuple[], options?: BlockEdit
     getBlockIndex,
     toBlockTuples,
     fromBlockTuples,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
   };
 }