@commonpub/editor 0.7.3 → 0.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@commonpub/editor",
-  "version": "0.7.3",
+  "version": "0.7.4",
   "type": "module",
   "description": "TipTap block editor with 18+ maker-focused extensions for CommonPub",
   "license": "AGPL-3.0-or-later",

package/vue/components/BlockPicker.vue

@@ -24,6 +24,8 @@ const flatBlocks = computed(() => {
   return props.groups.flatMap((g) => g.blocks);
 });
 
+const isSearching = computed(() => search.value.trim().length > 0);
+
 const filteredBlocks = computed(() => {
   const q = search.value.toLowerCase();
   if (!q) return flatBlocks.value;
@@ -32,6 +34,13 @@ const filteredBlocks = computed(() => {
   );
 });
 
+/** Flat index of a block across all groups (for keyboard nav) */
+function globalIndex(groupIdx: number, blockIdx: number): number {
+  let idx = 0;
+  for (let g = 0; g < groupIdx; g++) idx += props.groups[g]!.blocks.length;
+  return idx + blockIdx;
+}
+
 watch(() => props.visible, (v) => {
   if (v) {
     search.value = '';
@@ -104,7 +113,29 @@ onUnmounted(() => {
       />
     </div>
     <div class="cpub-picker-body">
-      <template v-if="filteredBlocks.length > 0">
+      <!-- Grouped view (no search) -->
+      <template v-if="!isSearching && groups.length > 0">
+        <template v-for="(group, gi) in groups" :key="group.name">
+          <div class="cpub-picker-group-header">{{ group.name }}</div>
+          <button
+            v-for="(block, bi) in group.blocks"
+            :key="block.type + (block.attrs?.variant ?? '')"
+            :data-block="block.type"
+            class="cpub-picker-item"
+            :class="{ 'cpub-picker-item--active': globalIndex(gi, bi) === selectedIndex }"
+            @mouseenter="selectedIndex = globalIndex(gi, bi)"
+            @click="selectBlock(block)"
+          >
+            <span class="cpub-picker-icon"><i :class="['fa-solid', block.icon]"></i></span>
+            <span class="cpub-picker-text">
+              <span class="cpub-picker-label">{{ block.label }}</span>
+              <span v-if="block.description" class="cpub-picker-desc">{{ block.description }}</span>
+            </span>
+          </button>
+        </template>
+      </template>
+      <!-- Flat filtered view (searching) -->
+      <template v-else-if="filteredBlocks.length > 0">
         <button
           v-for="(block, i) in filteredBlocks"
           :key="block.type + (block.attrs?.variant ?? '')"
@@ -179,6 +210,21 @@ onUnmounted(() => {
   padding: 4px;
 }
 
+.cpub-picker-group-header {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  padding: 8px 10px 4px;
+  margin-top: 2px;
+}
+
+.cpub-picker-group-header:first-child {
+  margin-top: 0;
+}
+
 .cpub-picker-item {
   display: flex;
   align-items: center;

package/vue/components/BlockWrapper.vue

@@ -50,6 +50,15 @@ watch(() => props.selected, (sel) => {
 function onDragStart(event: DragEvent): void {
   event.dataTransfer?.setData('text/plain', props.block.id);
   event.dataTransfer!.effectAllowed = 'move';
+
+  // Custom drag preview showing block type
+  const preview = document.createElement('div');
+  preview.textContent = props.block.type.replace(/_/g, ' ');
+  preview.style.cssText = 'position:fixed;top:-999px;left:-999px;padding:6px 12px;background:#1a1a1a;color:#eee;font-family:monospace;font-size:11px;font-weight:600;text-transform:capitalize;border:2px solid #333;pointer-events:none;white-space:nowrap;';
+  document.body.appendChild(preview);
+  event.dataTransfer!.setDragImage(preview, 0, 0);
+  requestAnimationFrame(() => document.body.removeChild(preview));
+
   emit('drag-start', event);
 }