@commonpub/editor 0.4.3 → 0.6.0

package/vue/components/EditorBlocks.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+/**
+ * Reusable block library sidebar for editors.
+ * Renders a searchable list of insertable blocks grouped by category.
+ * Clicking a block adds it to the end of the document via the block editor composable.
+ */
+import { ref, computed } from 'vue';
+import type { BlockDef, BlockGroup } from '../types.js';
+import type { BlockEditor } from '../composables/useBlockEditor.js';
+
+const props = defineProps<{
+  groups: BlockGroup[];
+  blockEditor: BlockEditor;
+}>();
+
+const blockSearch = ref('');
+
+const filteredGroups = computed(() => {
+  const q = blockSearch.value.toLowerCase();
+  if (!q) return props.groups;
+  return props.groups
+    .map((g) => ({ ...g, blocks: g.blocks.filter((b) => b.label.toLowerCase().includes(q)) }))
+    .filter((g) => g.blocks.length > 0);
+});
+
+function insertBlock(block: BlockDef): void {
+  const selectedId = props.blockEditor.selectedBlockId.value;
+  if (selectedId) {
+    const idx = props.blockEditor.getBlockIndex(selectedId);
+    props.blockEditor.addBlock(block.type, block.attrs, idx + 1);
+  } else {
+    props.blockEditor.addBlock(block.type, block.attrs);
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-block-library">
+    <div class="cpub-bl-search">
+      <i class="fa-solid fa-magnifying-glass cpub-bl-search-icon"></i>
+      <input
+        v-model="blockSearch"
+        type="text"
+        placeholder="Search blocks..."
+        class="cpub-bl-search-input"
+        aria-label="Search blocks"
+      />
+    </div>
+    <div class="cpub-bl-groups">
+      <div v-for="group in filteredGroups" :key="group.name" class="cpub-bl-group">
+        <div class="cpub-bl-group-label">{{ group.name }}</div>
+        <div class="cpub-bl-blocks">
+          <button
+            v-for="block in group.blocks"
+            :key="block.type + (block.attrs?.variant ?? '')"
+            :data-block="block.type"
+            class="cpub-bl-block"
+            :class="group.variant"
+            :title="block.label"
+            @click="insertBlock(block)"
+          >
+            <span class="cpub-bl-block-icon"><i :class="['fa-solid', block.icon]"></i></span>
+            <span class="cpub-bl-block-label">{{ block.label }}</span>
+            <span class="cpub-bl-block-drag"><i class="fa-solid fa-grip-dots-vertical"></i></span>
+          </button>
+        </div>
+      </div>
+      <div v-if="filteredGroups.length === 0" class="cpub-bl-empty">
+        No blocks match "{{ blockSearch }}"
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-block-library {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.cpub-bl-search {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+  padding: 5px 9px;
+  margin: 10px 8px 4px;
+}
+
+.cpub-bl-search-icon {
+  font-size: 10px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+}
+
+.cpub-bl-search-input {
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 12px;
+  color: var(--text);
+  width: 100%;
+}
+
+.cpub-bl-search-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-bl-groups {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.cpub-bl-group {
+  padding: 4px 0;
+}
+
+.cpub-bl-group-label {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+  padding: 6px 12px 4px;
+}
+
+.cpub-bl-blocks {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cpub-bl-block {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  padding: 10px 10px;
+  cursor: pointer;
+  border: var(--border-width-default) solid transparent;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 12px;
+  user-select: none;
+  transition: background 0.1s;
+  text-align: left;
+  width: 100%;
+  margin: 0 4px;
+}
+
+.cpub-bl-block:hover {
+  background: var(--surface2);
+  border-color: var(--border2);
+  color: var(--text);
+}
+
+.cpub-bl-block-icon {
+  width: 22px;
+  height: 22px;
+  background: var(--surface3);
+  border: var(--border-width-default) solid var(--border2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 9px;
+  color: var(--text-faint);
+  flex-shrink: 0;
+  transition: background 0.1s, color 0.1s;
+}
+
+.cpub-bl-block:hover .cpub-bl-block-icon {
+  background: var(--accent-bg);
+  border-color: var(--accent-border);
+  color: var(--accent);
+}
+
+.cpub-bl-block-label {
+  font-size: 11px;
+  flex: 1;
+}
+
+.cpub-bl-block-drag {
+  font-size: 9px;
+  color: var(--text-faint);
+  opacity: 0;
+  transition: opacity 0.1s;
+}
+
+.cpub-bl-block:hover .cpub-bl-block-drag {
+  opacity: 1;
+}
+
+.cpub-bl-empty {
+  font-size: 11px;
+  color: var(--text-faint);
+  padding: 12px;
+  text-align: center;
+}
+
+@media (hover: none) {
+  .cpub-bl-block-drag { opacity: 1; }
+}
+
+/* Per-block-type icon colors */
+[data-block="heading"] .cpub-bl-block-icon { color: var(--teal); background: color-mix(in srgb, var(--teal) 10%, transparent); }
+[data-block="text"] .cpub-bl-block-icon,
+[data-block="paragraph"] .cpub-bl-block-icon { color: var(--text-dim); background: var(--surface2); }
+[data-block="image"] .cpub-bl-block-icon { color: #38bdf8; background: rgba(56, 189, 248, 0.08); }
+[data-block="code"] .cpub-bl-block-icon,
+[data-block="code_block"] .cpub-bl-block-icon { color: #c084fc; background: rgba(192, 132, 252, 0.08); }
+[data-block="callout"] .cpub-bl-block-icon { color: #fbbf24; background: rgba(251, 191, 36, 0.08); }
+[data-block="quote"] .cpub-bl-block-icon,
+[data-block="blockquote"] .cpub-bl-block-icon { color: #94a3b8; background: rgba(148, 163, 184, 0.08); }
+[data-block="embed"] .cpub-bl-block-icon { color: #f472b6; background: rgba(244, 114, 182, 0.08); }
+[data-block="video"] .cpub-bl-block-icon { color: #fb923c; background: rgba(251, 146, 60, 0.08); }
+[data-block="divider"] .cpub-bl-block-icon,
+[data-block="horizontal_rule"] .cpub-bl-block-icon,
+[data-block="horizontalRule"] .cpub-bl-block-icon { color: var(--text-faint); background: var(--surface2); }
+[data-block="gallery"] .cpub-bl-block-icon { color: #2dd4bf; background: rgba(45, 212, 191, 0.08); }
+[data-block="quiz"] .cpub-bl-block-icon { color: #4ade80; background: rgba(74, 222, 128, 0.08); }
+[data-block="slider"] .cpub-bl-block-icon,
+[data-block="interactiveSlider"] .cpub-bl-block-icon { color: #818cf8; background: rgba(129, 140, 248, 0.08); }
+[data-block="math"] .cpub-bl-block-icon,
+[data-block="mathNotation"] .cpub-bl-block-icon { color: #e879f9; background: rgba(232, 121, 249, 0.08); }
+[data-block="markdown"] .cpub-bl-block-icon { color: var(--text-dim); background: var(--surface2); }
+[data-block="buildStep"] .cpub-bl-block-icon { color: var(--accent); background: var(--accent-bg); }
+[data-block="partsList"] .cpub-bl-block-icon { color: #fb7185; background: rgba(251, 113, 133, 0.08); }
+[data-block="toolList"] .cpub-bl-block-icon { color: #a78bfa; background: rgba(167, 139, 250, 0.08); }
+[data-block="downloads"] .cpub-bl-block-icon { color: #22d3ee; background: rgba(34, 211, 238, 0.08); }
+[data-block="sectionHeader"] .cpub-bl-block-icon { color: var(--accent); background: var(--accent-bg); }
+[data-block="checkpoint"] .cpub-bl-block-icon { color: #34d399; background: rgba(52, 211, 153, 0.08); }
+</style>

package/vue/components/EditorSection.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Collapsible section for editor property panels.
+ * Reused across all editor types.
+ */
+defineProps<{
+  title: string;
+  icon: string;
+  open?: boolean;
+}>();
+
+const emit = defineEmits<{
+  toggle: [];
+}>();
+</script>
+
+<template>
+  <div class="cpub-ep-section" :class="{ collapsed: !open }">
+    <button class="cpub-ep-section-header" @click="emit('toggle')">
+      <i :class="['fa', icon, 'cpub-ep-sec-icon']"></i>
+      <span class="cpub-ep-sec-label">{{ title }}</span>
+      <i class="fa-solid fa-chevron-down cpub-ep-sec-arrow"></i>
+    </button>
+    <div v-if="open" class="cpub-ep-section-body">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-ep-section {
+  border-bottom: var(--border-width-default) solid var(--border);
+}
+
+.cpub-ep-section-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 10px 12px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  color: var(--text);
+  font-size: 11px;
+  font-family: var(--font-mono);
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  text-align: left;
+}
+
+.cpub-ep-section-header:hover {
+  background: var(--surface2);
+}
+
+.cpub-ep-sec-icon {
+  font-size: 10px;
+  color: var(--text-faint);
+  width: 14px;
+  text-align: center;
+}
+
+.cpub-ep-sec-label {
+  flex: 1;
+}
+
+.cpub-ep-sec-arrow {
+  font-size: 9px;
+  color: var(--text-faint);
+  transition: transform 0.15s;
+}
+
+.collapsed .cpub-ep-sec-arrow {
+  transform: rotate(-90deg);
+}
+
+.cpub-ep-section-body {
+  padding: 8px 12px 14px;
+}
+</style>

package/vue/components/EditorShell.vue

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+defineProps<{
+  showLeftSidebar?: boolean;
+  showRightSidebar?: boolean;
+}>();
+
+const leftOpen = ref(false);
+const rightOpen = ref(false);
+
+function toggleLeft(): void {
+  leftOpen.value = !leftOpen.value;
+  if (leftOpen.value) rightOpen.value = false;
+}
+
+function toggleRight(): void {
+  rightOpen.value = !rightOpen.value;
+  if (rightOpen.value) leftOpen.value = false;
+}
+</script>
+
+<template>
+  <div class="cpub-editor-shell-wrapper">
+    <div class="cpub-editor-shell-inner">
+      <!-- Mobile sidebar toggles -->
+      <div class="cpub-editor-mobile-toggles">
+        <button v-if="showLeftSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle blocks panel" @click="toggleLeft">
+          <i class="fa-solid fa-layer-group"></i>
+        </button>
+        <button v-if="showRightSidebar" class="cpub-editor-toggle-btn" aria-label="Toggle properties panel" @click="toggleRight">
+          <i class="fa-solid fa-sliders"></i>
+        </button>
+      </div>
+
+      <!-- Left sidebar -->
+      <aside
+        v-if="showLeftSidebar"
+        class="cpub-editor-left"
+        :class="{ 'cpub-editor-sidebar-open': leftOpen }"
+        aria-label="Editor sidebar"
+      >
+        <slot name="left" />
+      </aside>
+
+      <!-- Overlay for mobile sidebars -->
+      <div v-if="leftOpen || rightOpen" class="cpub-editor-overlay" @click="leftOpen = false; rightOpen = false" />
+
+      <div class="cpub-editor-center">
+        <slot />
+      </div>
+
+      <!-- Right sidebar -->
+      <aside
+        v-if="showRightSidebar"
+        class="cpub-editor-right"
+        :class="{ 'cpub-editor-sidebar-open': rightOpen }"
+        aria-label="Properties"
+      >
+        <slot name="right" />
+      </aside>
+    </div>
+
+    <!-- Status bar -->
+    <div v-if="$slots.status" class="cpub-editor-status-bar">
+      <slot name="status" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-editor-shell-wrapper {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+}
+
+.cpub-editor-shell-inner {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+.cpub-editor-status-bar {
+  height: 28px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-top: var(--border-width-default) solid var(--border);
+  display: flex;
+  align-items: center;
+  padding: 0 12px;
+  gap: 14px;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-editor-left {
+  width: 220px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-right: var(--border-width-default) solid var(--border);
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.cpub-editor-center {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-6);
+  background: var(--bg);
+}
+
+.cpub-editor-right {
+  width: 280px;
+  flex-shrink: 0;
+  background: var(--surface);
+  border-left: var(--border-width-default) solid var(--border);
+  overflow-y: auto;
+  padding: var(--space-4);
+}
+
+.cpub-editor-mobile-toggles {
+  display: none;
+}
+
+.cpub-editor-overlay {
+  display: none;
+}
+
+@media (max-width: 1024px) {
+  .cpub-editor-left,
+  .cpub-editor-right {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    z-index: var(--z-modal, 200);
+    transform: translateX(-100%);
+    transition: transform 0.2s ease;
+  }
+
+  .cpub-editor-left {
+    left: 0;
+  }
+
+  .cpub-editor-right {
+    right: 0;
+    left: auto;
+    transform: translateX(100%);
+  }
+
+  .cpub-editor-left.cpub-editor-sidebar-open {
+    transform: translateX(0);
+  }
+
+  .cpub-editor-right.cpub-editor-sidebar-open {
+    transform: translateX(0);
+  }
+
+  .cpub-editor-overlay {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: var(--color-surface-overlay-light);
+    z-index: calc(var(--z-modal, 200) - 1);
+  }
+
+  .cpub-editor-mobile-toggles {
+    display: flex;
+    position: fixed;
+    bottom: var(--space-4);
+    right: var(--space-4);
+    gap: var(--space-2);
+    z-index: var(--z-fixed, 100);
+  }
+
+  .cpub-editor-toggle-btn {
+    width: 44px;
+    height: 44px;
+    border: var(--border-width-default) solid var(--border);
+    background: var(--surface);
+    color: var(--text-dim);
+    font-size: 16px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--shadow-md, var(--shadow-md));
+  }
+
+  .cpub-editor-toggle-btn:hover {
+    background: var(--surface2);
+    color: var(--text);
+  }
+}
+</style>

package/vue/components/EditorTagInput.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+/**
+ * Reusable tag input for editor panels.
+ * Used by Article, Blog, Project editors.
+ */
+import { ref } from 'vue';
+
+const props = defineProps<{
+  tags: string[];
+}>();
+
+const emit = defineEmits<{
+  'update:tags': [tags: string[]];
+}>();
+
+const tagInput = ref('');
+
+function addTag(e: KeyboardEvent): void {
+  if (e.key === 'Enter' || e.key === ',') {
+    e.preventDefault();
+    const val = tagInput.value.trim().replace(/,$/, '');
+    if (val && !props.tags.includes(val)) {
+      emit('update:tags', [...props.tags, val]);
+    }
+    tagInput.value = '';
+  }
+}
+
+function removeTag(idx: number): void {
+  emit('update:tags', props.tags.filter((_: string, i: number) => i !== idx));
+}
+</script>
+
+<template>
+  <div class="cpub-tag-input-wrap">
+    <div class="cpub-tag-chips">
+      <span v-for="(tag, i) in tags" :key="i" class="cpub-tag-chip">
+        {{ tag }}
+        <button class="cpub-tag-remove" aria-label="Remove tag" @click="removeTag(i)">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </span>
+    </div>
+    <input
+      v-model="tagInput"
+      type="text"
+      class="cpub-tag-input"
+      placeholder="Add tag..."
+      aria-label="Add tag"
+      @keydown="addTag"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-tag-input-wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cpub-tag-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+
+.cpub-tag-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  font-family: var(--font-mono);
+  padding: 2px 8px;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+}
+
+.cpub-tag-chip:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+
+.cpub-tag-remove {
+  background: none;
+  border: none;
+  color: var(--text-faint);
+  cursor: pointer;
+  font-size: 9px;
+  padding: 0;
+  line-height: 1;
+}
+
+.cpub-tag-remove:hover {
+  color: var(--red);
+}
+
+.cpub-tag-input {
+  width: 100%;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  padding: 5px 8px;
+  font-size: 11px;
+  color: var(--text);
+  outline: none;
+}
+
+.cpub-tag-input:focus {
+  border-color: var(--accent);
+}
+
+.cpub-tag-input::placeholder {
+  color: var(--text-faint);
+}
+</style>