@commonpub/layer 0.7.13 → 0.7.15

package/components/editors/ArticleEditor.vue

@@ -179,6 +179,7 @@ function closeMobileSidebars(): void {
 }
 
 // --- Canvas toolbar ---
+const canvasRef = ref<{ toggleMark: (mark: string) => void; toggleLink: () => void; getActiveMarks: () => Record<string, boolean> } | null>(null);
 const viewportMode = ref<'desktop' | 'tablet' | 'mobile'>('desktop');
 const canvasMaxWidth = computed(() => {
   if (viewportMode.value === 'mobile') return '375px';
@@ -259,6 +260,14 @@ const canvasMaxWidth = computed(() => {
     <div class="cpub-ae-center">
       <!-- Canvas toolbar -->
       <div class="cpub-ae-canvas-toolbar">
+        <!-- Text formatting -->
+        <button class="cpub-ae-tool-btn" title="Bold (Ctrl+B)" @click="canvasRef?.toggleMark('bold')"><i class="fa-solid fa-bold"></i></button>
+        <button class="cpub-ae-tool-btn" title="Italic (Ctrl+I)" @click="canvasRef?.toggleMark('italic')"><i class="fa-solid fa-italic"></i></button>
+        <button class="cpub-ae-tool-btn" title="Strikethrough" @click="canvasRef?.toggleMark('strike')"><i class="fa-solid fa-strikethrough"></i></button>
+        <button class="cpub-ae-tool-btn" title="Inline code" @click="canvasRef?.toggleMark('code')"><i class="fa-solid fa-code"></i></button>
+        <button class="cpub-ae-tool-btn" title="Link" @click="canvasRef?.toggleLink()"><i class="fa-solid fa-link"></i></button>
+        <div class="cpub-ae-toolbar-divider" />
+        <!-- Navigation -->
         <button class="cpub-ae-tool-btn" title="Previous block"><i class="fa-solid fa-chevron-up"></i></button>
         <button class="cpub-ae-tool-btn" title="Next block"><i class="fa-solid fa-chevron-down"></i></button>
         <div class="cpub-ae-toolbar-divider" />
@@ -272,7 +281,7 @@ const canvasMaxWidth = computed(() => {
       <!-- Scrollable canvas -->
       <div class="cpub-ae-canvas">
         <div class="cpub-ae-canvas-inner" :style="{ maxWidth: canvasMaxWidth }">
-          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas ref="canvasRef" :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 

package/components/editors/BlogEditor.vue

@@ -132,6 +132,7 @@ function closeMobileSidebars(): void {
 }
 
 // --- Canvas toolbar ---
+const canvasRef = ref<{ toggleMark: (mark: string) => void; toggleLink: () => void; getActiveMarks: () => Record<string, boolean> } | null>(null);
 const viewportMode = ref<'desktop' | 'tablet' | 'mobile'>('desktop');
 const canvasMaxWidth = computed(() => {
   if (viewportMode.value === 'mobile') return '375px';
@@ -158,6 +159,13 @@ const canvasMaxWidth = computed(() => {
     <div class="cpub-be-center">
       <!-- Canvas toolbar -->
       <div class="cpub-be-canvas-toolbar">
+        <!-- Text formatting -->
+        <button class="cpub-be-tool-btn" title="Bold (Ctrl+B)" @click="canvasRef?.toggleMark('bold')"><i class="fa-solid fa-bold"></i></button>
+        <button class="cpub-be-tool-btn" title="Italic (Ctrl+I)" @click="canvasRef?.toggleMark('italic')"><i class="fa-solid fa-italic"></i></button>
+        <button class="cpub-be-tool-btn" title="Strikethrough" @click="canvasRef?.toggleMark('strike')"><i class="fa-solid fa-strikethrough"></i></button>
+        <button class="cpub-be-tool-btn" title="Inline code" @click="canvasRef?.toggleMark('code')"><i class="fa-solid fa-code"></i></button>
+        <button class="cpub-be-tool-btn" title="Link" @click="canvasRef?.toggleLink()"><i class="fa-solid fa-link"></i></button>
+        <div class="cpub-be-toolbar-divider" />
         <div class="cpub-be-viewport-tabs">
           <button class="cpub-be-viewport-tab" :class="{ active: viewportMode === 'desktop' }" title="Desktop" @click="viewportMode = 'desktop'"><i class="fa-solid fa-desktop"></i></button>
           <button class="cpub-be-viewport-tab" :class="{ active: viewportMode === 'tablet' }" title="Tablet" @click="viewportMode = 'tablet'"><i class="fa-solid fa-tablet-screen-button"></i></button>
@@ -233,7 +241,7 @@ const canvasMaxWidth = computed(() => {
         </div>
 
         <!-- Block editor canvas -->
-        <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+        <BlockCanvas ref="canvasRef" :block-editor="blockEditor" :block-types="blockTypes" />
       </div>
 
       <!-- Word count bar -->
@@ -362,9 +370,15 @@ const canvasMaxWidth = computed(() => {
 .cpub-be-canvas-toolbar {
   display: flex; align-items: center; gap: 2px; padding: 4px 12px;
   background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); flex-shrink: 0; min-height: 32px;
-  justify-content: flex-end;
 }
-.cpub-be-viewport-tabs { display: flex; gap: 0; }
+.cpub-be-tool-btn {
+  width: 28px; height: 26px; display: flex; align-items: center; justify-content: center;
+  background: none; border: var(--border-width-default) solid transparent; color: var(--text-dim);
+  font-size: 11px; cursor: pointer;
+}
+.cpub-be-tool-btn:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
+.cpub-be-toolbar-divider { width: 2px; height: 18px; background: var(--border2); margin: 0 6px; }
+.cpub-be-viewport-tabs { display: flex; gap: 0; margin-left: auto; }
 .cpub-be-viewport-tab {
   width: 28px; height: 24px; display: flex; align-items: center; justify-content: center;
   background: none; border: var(--border-width-default) solid var(--border); border-left-width: 0; color: var(--text-faint);

package/components/editors/ProjectEditor.vue

@@ -122,6 +122,7 @@ watch(() => props.metadata.title, (v) => { if (v !== titleRef.value) titleRef.va
 watch(titleRef, (v) => updateMeta('title', v));
 
 // --- Canvas toolbar ---
+const canvasRef = ref<{ toggleMark: (mark: string) => void; toggleLink: () => void; getActiveMarks: () => Record<string, boolean> } | null>(null);
 const viewportMode = ref<'desktop' | 'tablet' | 'mobile'>('desktop');
 const canvasMaxWidth = computed(() => {
   if (viewportMode.value === 'mobile') return '375px';
@@ -163,6 +164,13 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
     <div class="cpub-pe-center">
       <!-- Canvas toolbar -->
       <div class="cpub-pe-canvas-toolbar">
+        <!-- Text formatting -->
+        <button class="cpub-pe-tool-btn" title="Bold (Ctrl+B)" @click="canvasRef?.toggleMark('bold')"><i class="fa-solid fa-bold"></i></button>
+        <button class="cpub-pe-tool-btn" title="Italic (Ctrl+I)" @click="canvasRef?.toggleMark('italic')"><i class="fa-solid fa-italic"></i></button>
+        <button class="cpub-pe-tool-btn" title="Strikethrough" @click="canvasRef?.toggleMark('strike')"><i class="fa-solid fa-strikethrough"></i></button>
+        <button class="cpub-pe-tool-btn" title="Inline code" @click="canvasRef?.toggleMark('code')"><i class="fa-solid fa-code"></i></button>
+        <button class="cpub-pe-tool-btn" title="Link" @click="canvasRef?.toggleLink()"><i class="fa-solid fa-link"></i></button>
+        <div class="cpub-pe-toolbar-divider" />
         <div class="cpub-pe-viewport-tabs">
           <button class="cpub-pe-viewport-tab" :class="{ active: viewportMode === 'desktop' }" title="Desktop" @click="viewportMode = 'desktop'"><i class="fa-solid fa-desktop"></i></button>
           <button class="cpub-pe-viewport-tab" :class="{ active: viewportMode === 'tablet' }" title="Tablet" @click="viewportMode = 'tablet'"><i class="fa-solid fa-tablet-screen-button"></i></button>
@@ -207,7 +215,7 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
             placeholder="Project title..."
           />
 
-          <BlockCanvas :block-editor="blockEditor" :block-types="blockTypes" />
+          <BlockCanvas ref="canvasRef" :block-editor="blockEditor" :block-types="blockTypes" />
         </div>
       </div>
 
@@ -359,9 +367,15 @@ const blockCount = computed(() => props.blockEditor.blocks.value.length);
 .cpub-pe-canvas-toolbar {
   display: flex; align-items: center; gap: 2px; padding: 4px 12px;
   background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); flex-shrink: 0; min-height: 32px;
-  justify-content: flex-end;
 }
-.cpub-pe-viewport-tabs { display: flex; gap: 0; }
+.cpub-pe-tool-btn {
+  width: 28px; height: 26px; display: flex; align-items: center; justify-content: center;
+  background: none; border: var(--border-width-default) solid transparent; color: var(--text-dim);
+  font-size: 11px; cursor: pointer;
+}
+.cpub-pe-tool-btn:hover { background: var(--surface2); border-color: var(--border2); color: var(--text); }
+.cpub-pe-toolbar-divider { width: 2px; height: 18px; background: var(--border2); margin: 0 6px; }
+.cpub-pe-viewport-tabs { display: flex; gap: 0; margin-left: auto; }
 .cpub-pe-viewport-tab {
   width: 28px; height: 24px; display: flex; align-items: center; justify-content: center;
   background: none; border: var(--border-width-default) solid var(--border); border-left-width: 0; color: var(--text-faint);

package/components/views/ArticleView.vue

@@ -780,8 +780,7 @@ useJsonLd({
 .cpub-cover-photo-img {
   width: 100%;
   display: block;
-  max-height: 420px;
-  object-fit: cover;
+  height: auto;
 }
 
 /* ── RESPONSIVE ── */

package/components/views/BlogView.vue

@@ -340,8 +340,7 @@ const hasSeries = computed(() => !!seriesTitle.value && seriesTotalParts.value >
 .cpub-cover-photo-img {
   width: 100%;
   display: block;
-  max-height: 420px;
-  object-fit: cover;
+  height: auto;
 }
 
 /* ── ENGAGEMENT ROW ── */

package/components/views/ProjectView.vue

@@ -939,8 +939,7 @@ async function handleBuild(): Promise<void> {
 .cpub-cover-photo-img {
   width: 100%;
   display: block;
-  max-height: 420px;
-  object-fit: cover;
+  height: auto;
 }
 
 /* ── PROSE ── */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/layer",
-  "version": "0.7.13",
+  "version": "0.7.15",
   "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.5.0",
-    "@commonpub/docs": "0.6.2",
     "@commonpub/config": "0.9.0",
+    "@commonpub/editor": "0.7.5",
+    "@commonpub/auth": "0.5.0",
+    "@commonpub/learning": "0.5.0",
     "@commonpub/explainer": "0.7.6",
-    "@commonpub/editor": "0.7.4",
+    "@commonpub/docs": "0.6.2",
     "@commonpub/schema": "0.9.5",
+    "@commonpub/ui": "0.8.5",
     "@commonpub/server": "2.27.7",
-    "@commonpub/protocol": "0.9.7",
-    "@commonpub/learning": "0.5.0",
-    "@commonpub/ui": "0.8.5"
+    "@commonpub/protocol": "0.9.7"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.9.1",