@commonpub/layer 0.7.6 → 0.7.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.6",
+  "version": "0.7.8",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -51,15 +51,15 @@
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
     "@commonpub/auth": "0.5.0",
-    "@commonpub/config": "0.9.0",
     "@commonpub/docs": "0.6.2",
-    "@commonpub/editor": "0.7.0",
+    "@commonpub/config": "0.9.0",
+    "@commonpub/editor": "0.7.1",
     "@commonpub/explainer": "0.7.4",
     "@commonpub/learning": "0.5.0",
     "@commonpub/schema": "0.9.4",
     "@commonpub/protocol": "0.9.7",
     "@commonpub/ui": "0.8.5",
-    "@commonpub/server": "2.27.5"
+    "@commonpub/server": "2.27.6"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",

package/pages/docs/[siteSlug]/edit.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
+import { provide } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
-import { BlockCanvas, EditorShell, useBlockEditor, type BlockTypeGroup } from '@commonpub/editor/vue';
+import { BlockCanvas, EditorShell, useBlockEditor, UPLOAD_HANDLER_KEY, type BlockTypeGroup } from '@commonpub/editor/vue';
 import type { PageTreeItem } from '../../../components/editors/DocsPageTree.vue';
 
 definePageMeta({ layout: false, middleware: 'auth' });
@@ -9,6 +10,15 @@ const route = useRoute();
 const siteSlug = computed(() => route.params.siteSlug as string);
 const { show: toast } = useToast();
 
+// Provide upload handler to block components (ImageBlock, GalleryBlock)
+provide(UPLOAD_HANDLER_KEY, async (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'content');
+  const res = await $fetch<{ url: string; width?: number | null; height?: number | null }>('/api/files/upload', { method: 'POST', body: formData });
+  return { url: res.url, width: res.width ?? null, height: res.height ?? null };
+});
+
 // ═══ DATA FETCHING ═══
 const { data: site, refresh: refreshSite } = await useFetch<{ id: string; name: string; slug: string; description: string; ownerId: string; versions?: Array<{ id: string; version: string; isDefault: boolean }> }>(() => `/api/docs/${siteSlug.value}`);
 
@@ -466,6 +476,22 @@ async function createVersion(): Promise<void> {
       </NuxtLink>
       <span class="cpub-docs-topbar-title">{{ site?.name ?? 'Docs' }}</span>
       <div class="cpub-docs-topbar-spacer" />
+      <button
+        class="cpub-docs-toolbar-btn"
+        title="Undo (Ctrl+Z)"
+        :disabled="!blockEditor.canUndo.value"
+        @click="blockEditor.undo()"
+      >
+        <i class="fa-solid fa-rotate-left" />
+      </button>
+      <button
+        class="cpub-docs-toolbar-btn"
+        title="Redo (Ctrl+Shift+Z)"
+        :disabled="!blockEditor.canRedo.value"
+        @click="blockEditor.redo()"
+      >
+        <i class="fa-solid fa-rotate-right" />
+      </button>
       <button
         v-if="selectedPageId"
         class="cpub-docs-toolbar-btn"

package/pages/u/[username]/[type]/[slug]/edit.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { Component } from 'vue';
+import { provide } from 'vue';
 import type { BlockTuple } from '@commonpub/editor';
-import { BlockCanvas, useBlockEditor } from '@commonpub/editor/vue';
+import { BlockCanvas, useBlockEditor, UPLOAD_HANDLER_KEY, SEARCH_PRODUCTS_KEY } from '@commonpub/editor/vue';
 import { isExplainerDocument, createEmptyDocument } from '@commonpub/explainer';
 import type { ExplainerDocument } from '@commonpub/explainer';
 import { ExplainerSectionEditor } from '@commonpub/explainer/vue';
@@ -93,6 +94,20 @@ const { errors: publishErrors, showErrors: showPublishErrors, validate, dismiss:
   getBlockTuples: getContentForSave as () => BlockTuple[],
 });
 
+// --- Provide upload + search handlers to block components via inject ---
+provide(UPLOAD_HANDLER_KEY, async (file: File) => {
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('purpose', 'content');
+  const res = await $fetch<{ url: string; width?: number | null; height?: number | null }>('/api/files/upload', { method: 'POST', body: formData });
+  return { url: res.url, width: res.width ?? null, height: res.height ?? null };
+});
+
+provide(SEARCH_PRODUCTS_KEY, async (query: string) => {
+  const res = await $fetch<{ items: Array<{ id: string; name: string; slug: string; description: string | null; category: string | null; imageUrl: string | null; purchaseUrl: string | null }> }>(`/api/products?q=${encodeURIComponent(query)}&limit=10`);
+  return res.items ?? [];
+});
+
 // --- Specialized editor component map ---
 const editorMap: Record<string, Component> = {
   article: resolveComponent('EditorsArticleEditor') as Component,
@@ -389,6 +404,24 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
           <i class="fa-solid fa-exclamation-triangle"></i> Save failed
         </span>
       </div>
+      <div v-if="!isExplainer" class="cpub-topbar-undo-redo">
+        <button
+          class="cpub-topbar-icon-btn"
+          title="Undo (Ctrl+Z)"
+          :disabled="!blockEditor.canUndo.value"
+          @click="blockEditor.undo()"
+        >
+          <i class="fa-solid fa-rotate-left"></i>
+        </button>
+        <button
+          class="cpub-topbar-icon-btn"
+          title="Redo (Ctrl+Shift+Z)"
+          :disabled="!blockEditor.canRedo.value"
+          @click="blockEditor.redo()"
+        >
+          <i class="fa-solid fa-rotate-right"></i>
+        </button>
+      </div>
       <div class="cpub-mode-tabs">
         <button :class="['cpub-mode-tab', { active: mode === 'write' }]" @click="mode = 'write'">Write</button>
         <button :class="['cpub-mode-tab', { active: mode === 'preview' }]" @click="enterPreview">Preview</button>
@@ -604,6 +637,37 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
 .cpub-autosave-status--saved { color: var(--green); }
 .cpub-autosave-status--error { color: var(--red); }
 
+.cpub-topbar-undo-redo {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  margin-right: 4px;
+  flex-shrink: 0;
+}
+
+.cpub-topbar-icon-btn {
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: var(--border-width-default) solid transparent;
+  color: var(--text-dim);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+}
+.cpub-topbar-icon-btn:hover:not(:disabled) {
+  background: var(--surface2);
+  border-color: var(--border2);
+  color: var(--text);
+}
+.cpub-topbar-icon-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
 .cpub-mode-tabs {
   display: flex;
   background: var(--surface2);
@@ -721,6 +785,7 @@ async function handleUrlImport(result: ImportedContent): Promise<void> {
   .cpub-editor-back { margin-left: 0; }
   .cpub-topbar-title-input { max-width: none; font-size: 12px; padding: 3px 6px; }
   .cpub-autosave-status { display: none; }
+  .cpub-topbar-undo-redo { display: none; }
   .cpub-mode-tabs { margin: 0 6px; padding: 1px; }
   .cpub-mode-tab { padding: 4px 10px; font-size: 10px; }
   .cpub-topbar-spacer { display: none; }

package/server/{routes/u/[username]/[type]/[slug].ts → middleware/content-ap.ts}

@@ -3,11 +3,13 @@ import { contentItems, users } from '@commonpub/schema';
 import { eq, and, isNull } from 'drizzle-orm';
 
 /**
- * New-format content AP Article endpoint.
- * URI: /u/{username}/{type}/{slug}
+ * Middleware: serve ActivityPub Article JSON-LD for content URIs.
  *
- * Serves Article JSON-LD when requested with AP Accept header.
- * Browsers see the Nuxt page instead (this handler returns nothing for non-AP requests).
+ * Matches /u/{username}/{type}/{slug} with AP Accept headers.
+ * Non-AP requests pass through to the Nuxt page renderer.
+ *
+ * This MUST be a middleware (not a server route) because a server route
+ * returning undefined sends HTTP 204, which prevents the Nuxt page from rendering.
  */
 export default defineEventHandler(async (event) => {
   const accept = getRequestHeader(event, 'accept') ?? '';
@@ -17,12 +19,14 @@ export default defineEventHandler(async (event) => {
 
   if (!isAPRequest) return;
 
+  const path = getRequestURL(event).pathname;
+  const match = path.match(/^\/u\/([a-zA-Z0-9_-]+)\/([a-z]+)\/([a-z0-9][a-z0-9_-]*)$/);
+  if (!match) return;
+
   const config = useConfig();
   if (!config.features.federation) return;
 
-  const username = getRouterParam(event, 'username');
-  const type = getRouterParam(event, 'type');
-  const slug = getRouterParam(event, 'slug');
+  const [, username, type, slug] = match;
   if (!username || !type || !slug) return;
 
   const db = useDB();
@@ -51,7 +55,7 @@ export default defineEventHandler(async (event) => {
 
   setResponseHeader(event, 'content-type', 'application/activity+json');
 
-  const article = contentToArticle(
+  return contentToArticle(
     {
       id: row.content.id,
       type: row.content.type,
@@ -68,6 +72,4 @@ export default defineEventHandler(async (event) => {
     { username: row.author.username, displayName: row.author.displayName ?? row.author.username },
     domain,
   );
-
-  return article;
 });