@commonpub/layer 0.21.10 → 0.21.11

package/components/blocks/BlockEmbedView.vue

@@ -1,21 +1,30 @@
 <script setup lang="ts">
 const props = defineProps<{ content: Record<string, unknown> }>();
 
-const url = computed(() => {
+// Translate common watch-page URLs into iframe-embeddable equivalents
+// so authors who paste a YouTube/Vimeo URL into the generic Embed block
+// don't end up with an iframe that the provider refuses to render
+// (X-Frame-Options / CSP frame-ancestors). Mirrors BlockVideoView.
+const embedUrl = computed(() => {
   const raw = (props.content.url as string) || '';
-  // Only allow http/https URLs — block javascript:, data:, etc.
-  if (raw && (raw.startsWith('https://') || raw.startsWith('http://'))) return raw;
+  if (!raw) return '';
+  const yt = raw.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
+  if (yt) return `https://www.youtube-nocookie.com/embed/${yt[1]}`;
+  const vimeo = raw.match(/vimeo\.com\/(\d+)/);
+  if (vimeo) return `https://player.vimeo.com/video/${vimeo[1]}`;
+  // Anything else: allow http(s) only (block javascript:, data:, etc.).
+  if (raw.startsWith('https://') || raw.startsWith('http://')) return raw;
   return '';
 });
 </script>
 
 <template>
-  <div v-if="url" class="cpub-block-embed">
+  <div v-if="embedUrl" class="cpub-block-embed">
     <div class="cpub-embed-label">
       <i class="fa-solid fa-globe"></i> Embed
     </div>
     <div class="cpub-embed-wrap">
-      <iframe :src="url" class="cpub-embed-iframe" frameborder="0" loading="lazy" title="Embedded content" />
+      <iframe :src="embedUrl" class="cpub-embed-iframe" frameborder="0" loading="lazy" title="Embedded content" />
     </div>
   </div>
 </template>

package/components/blocks/BlockVideoView.vue

@@ -7,8 +7,8 @@ const embedUrl = computed(() => {
   const u = url.value;
   if (!u) return '';
 
-  // YouTube — extract video ID and construct safe embed URL
-  const ytMatch = u.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]+)/);
+  // YouTube — handle watch + youtu.be + /embed/ + /v/ + /shorts/.
+  const ytMatch = u.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|v\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{6,})/);
   if (ytMatch) return `https://www.youtube-nocookie.com/embed/${ytMatch[1]}`;
 
   // Vimeo — extract video ID and construct safe embed URL

package/components/editors/ProjectEditor.vue

@@ -33,6 +33,13 @@ const blockTypes: BlockTypeGroup[] = [
       { type: 'downloads', label: 'Downloads', icon: 'fa-download', description: 'File attachments' },
     ],
   },
+  {
+    name: 'Media',
+    blocks: [
+      { type: 'video', label: 'Video', icon: 'fa-film', description: 'YouTube, Vimeo embed' },
+      { type: 'embed', label: 'Embed', icon: 'fa-globe', description: 'External embed (translates YouTube/Vimeo URLs)' },
+    ],
+  },
   {
     name: 'Rich',
     blocks: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.21.10",
+  "version": "0.21.11",
   "type": "module",
   "main": "./nuxt.config.ts",
   "files": [
@@ -50,16 +50,16 @@
     "vue": "^3.4.0",
     "vue-router": "^4.3.0",
     "zod": "^4.3.6",
+    "@commonpub/auth": "0.6.0",
     "@commonpub/docs": "0.6.3",
-    "@commonpub/explainer": "0.7.14",
-    "@commonpub/editor": "0.7.10",
+    "@commonpub/protocol": "0.10.1",
+    "@commonpub/schema": "0.16.0",
     "@commonpub/learning": "0.5.2",
-    "@commonpub/server": "2.54.1",
     "@commonpub/ui": "0.8.5",
+    "@commonpub/explainer": "0.7.15",
     "@commonpub/config": "0.13.0",
-    "@commonpub/auth": "0.6.0",
-    "@commonpub/schema": "0.16.0",
-    "@commonpub/protocol": "0.10.1"
+    "@commonpub/server": "2.54.2",
+    "@commonpub/editor": "0.7.10"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",