@commonpub/editor 0.5.0 → 0.6.1

package/vue/components/blocks/GalleryBlock.vue

@@ -0,0 +1,235 @@
+<script setup lang="ts">
+/**
+ * Gallery block — multi-image grid with upload and reorder.
+ * Each image has src, alt, caption.
+ * File upload is abstracted via the onUpload callback prop.
+ */
+import { ref, computed } from 'vue';
+
+interface GalleryImage {
+  src: string;
+  alt: string;
+  caption: string;
+}
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+  onUpload?: (file: File) => Promise<{ url: string }>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const images = computed<GalleryImage[]>(() => {
+  const raw = props.content.images;
+  if (!Array.isArray(raw)) return [];
+  return raw as GalleryImage[];
+});
+
+function updateImages(newImages: GalleryImage[]): void {
+  emit('update', { images: newImages });
+}
+
+const uploading = ref(false);
+
+async function handleFileSelect(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  if (!input.files?.length) return;
+  if (!props.onUpload) return;
+
+  uploading.value = true;
+  const newImages = [...images.value];
+
+  for (const file of Array.from(input.files)) {
+    try {
+      const result = await props.onUpload(file);
+      newImages.push({
+        src: result.url,
+        alt: file.name.replace(/\.[^.]+$/, ''),
+        caption: '',
+      });
+    } catch {
+      // Skip failed uploads
+    }
+  }
+
+  updateImages(newImages);
+  uploading.value = false;
+  input.value = '';
+}
+
+function removeImage(index: number): void {
+  const newImages = images.value.filter((_, i) => i !== index);
+  updateImages(newImages);
+}
+
+function updateImageField(index: number, field: keyof GalleryImage, value: string): void {
+  const newImages = images.value.map((img, i) =>
+    i === index ? { ...img, [field]: value } : img,
+  );
+  updateImages(newImages);
+}
+</script>
+
+<template>
+  <div class="cpub-gallery-block">
+    <!-- Image grid -->
+    <div v-if="images.length > 0" class="cpub-gallery-grid">
+      <div v-for="(img, idx) in images" :key="idx" class="cpub-gallery-item">
+        <div class="cpub-gallery-img-wrap">
+          <img :src="img.src" :alt="img.alt" class="cpub-gallery-img" />
+          <button class="cpub-gallery-remove" title="Remove" @click="removeImage(idx)">
+            <i class="fa-solid fa-xmark"></i>
+          </button>
+        </div>
+        <input
+          class="cpub-gallery-field"
+          type="text"
+          :value="img.alt"
+          placeholder="Alt text..."
+          @input="updateImageField(idx, 'alt', ($event.target as HTMLInputElement).value)"
+        />
+        <input
+          class="cpub-gallery-field"
+          type="text"
+          :value="img.caption"
+          placeholder="Caption..."
+          @input="updateImageField(idx, 'caption', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </div>
+
+    <!-- Add images -->
+    <label class="cpub-gallery-add" :class="{ 'cpub-gallery-uploading': uploading }">
+      <input type="file" accept="image/*" multiple class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
+      <template v-if="uploading">
+        <i class="fa-solid fa-circle-notch fa-spin"></i>
+        <span>Uploading...</span>
+      </template>
+      <template v-else>
+        <i class="fa-solid fa-images"></i>
+        <span>{{ images.length > 0 ? 'Add more images' : 'Upload images for gallery' }}</span>
+      </template>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.cpub-gallery-block {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.cpub-gallery-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+  gap: 8px;
+}
+
+.cpub-gallery-item {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cpub-gallery-img-wrap {
+  position: relative;
+  aspect-ratio: 4/3;
+  overflow: hidden;
+  border: var(--border-width-default) solid var(--border);
+  background: var(--surface2);
+}
+
+.cpub-gallery-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.cpub-gallery-remove {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 22px;
+  height: 22px;
+  background: var(--text);
+  border: none;
+  color: var(--surface);
+  font-size: 10px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-gallery-img-wrap:hover .cpub-gallery-remove {
+  opacity: 1;
+}
+
+.cpub-gallery-remove:hover {
+  background: var(--red);
+}
+
+.cpub-gallery-field {
+  width: 100%;
+  padding: 4px 6px;
+  font-size: 10px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  outline: none;
+  font-style: italic;
+}
+
+.cpub-gallery-field:focus {
+  border-color: var(--accent);
+  font-style: normal;
+}
+
+.cpub-gallery-field::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-gallery-add {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  border: 2px dashed var(--border2);
+  cursor: pointer;
+  font-size: 12px;
+  color: var(--text-dim);
+  transition: all 0.12s;
+}
+
+.cpub-gallery-add:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+
+.cpub-gallery-add i {
+  font-size: 16px;
+}
+
+.cpub-gallery-uploading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.cpub-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>

package/vue/components/blocks/HeadingBlock.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+/**
+ * Heading block — editable heading with level selector.
+ */
+import { ref, computed, onMounted } from 'vue';
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const level = computed(() => (props.content.level as number) ?? 2);
+const text = computed(() => (props.content.text as string) ?? '');
+const headingEl = ref<HTMLElement | null>(null);
+
+function onTextInput(event: Event): void {
+  const el = event.target as HTMLElement;
+  emit('update', { text: el.textContent ?? '', level: level.value });
+}
+
+function cycleLevel(): void {
+  const next = level.value >= 4 ? 2 : level.value + 1;
+  emit('update', { text: text.value, level: next });
+}
+
+// Set initial text without v-text (which fights with contenteditable)
+onMounted(() => {
+  if (headingEl.value && text.value) {
+    headingEl.value.textContent = text.value;
+  }
+});
+</script>
+
+<template>
+  <div class="cpub-heading-block">
+    <button class="cpub-heading-level" title="Change heading level" aria-label="Change heading level" @click="cycleLevel">
+      H{{ level }}
+    </button>
+    <div
+      ref="headingEl"
+      class="cpub-heading-text"
+      :class="`cpub-heading-text--h${level}`"
+      contenteditable="true"
+      :data-placeholder="`Heading ${level}`"
+      @input="onTextInput"
+    />
+  </div>
+</template>
+
+<style scoped>
+.cpub-heading-block {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+}
+
+.cpub-heading-level {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--text-faint);
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border2);
+  padding: 2px 6px;
+  cursor: pointer;
+  flex-shrink: 0;
+  margin-top: 4px;
+  transition: all 0.1s;
+}
+
+.cpub-heading-level:hover {
+  border-color: var(--accent);
+  color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-heading-text {
+  flex: 1;
+  font-weight: 700;
+  outline: none;
+  min-height: 1.2em;
+  line-height: 1.3;
+}
+
+.cpub-heading-text:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-faint);
+  pointer-events: none;
+}
+
+.cpub-heading-text--h1 { font-size: 28px; }
+.cpub-heading-text--h2 { font-size: 22px; }
+.cpub-heading-text--h3 { font-size: 18px; }
+.cpub-heading-text--h4 { font-size: 15px; }
+</style>

package/vue/components/blocks/ImageBlock.vue

@@ -0,0 +1,272 @@
+<script setup lang="ts">
+/**
+ * Image block — upload placeholder or image preview with alt text and caption.
+ * File upload is abstracted via the onUpload callback prop.
+ */
+import { ref, computed } from 'vue';
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+  onUpload?: (file: File) => Promise<{ url: string; width?: number | null; height?: number | null }>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const src = computed(() => (props.content.src as string) ?? '');
+const alt = computed(() => (props.content.alt as string) ?? '');
+const caption = computed(() => (props.content.caption as string) ?? '');
+const hasImage = computed(() => !!src.value);
+
+function updateField(field: string, value: string): void {
+  emit('update', { ...props.content, [field]: value });
+}
+
+const uploading = ref(false);
+const uploadError = ref('');
+
+async function handleFileSelect(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement;
+  const file = input.files?.[0];
+  if (!file) return;
+  if (!props.onUpload) {
+    uploadError.value = 'No upload handler provided';
+    return;
+  }
+
+  uploading.value = true;
+  uploadError.value = '';
+
+  try {
+    const result = await props.onUpload(file);
+
+    emit('update', {
+      src: result.url,
+      alt: alt.value || file.name.replace(/\.[^.]+$/, ''),
+      caption: caption.value,
+    });
+  } catch (err: unknown) {
+    uploadError.value = (err as { data?: { statusMessage?: string } })?.data?.statusMessage ?? 'Upload failed';
+  } finally {
+    uploading.value = false;
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-image-block">
+    <!-- No image — upload placeholder -->
+    <template v-if="!hasImage">
+      <label class="cpub-image-placeholder" :class="{ 'cpub-image-uploading': uploading }">
+        <input type="file" accept="image/*" class="cpub-sr-only" :disabled="uploading" @change="handleFileSelect" />
+        <template v-if="uploading">
+          <i class="fa-solid fa-circle-notch fa-spin cpub-image-placeholder-icon"></i>
+          <span class="cpub-image-placeholder-text">Uploading...</span>
+        </template>
+        <template v-else>
+          <i class="fa-regular fa-image cpub-image-placeholder-icon"></i>
+          <span class="cpub-image-placeholder-text">Click to upload image or drag and drop</span>
+          <span class="cpub-image-placeholder-hint">JPG, PNG, WebP, GIF · 10 MB max</span>
+        </template>
+      </label>
+      <div v-if="uploadError" class="cpub-image-error">{{ uploadError }}</div>
+      <div class="cpub-image-url-row">
+        <input
+          class="cpub-image-url-input"
+          type="url"
+          placeholder="Or paste image URL..."
+          :value="src"
+          @input="updateField('src', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </template>
+
+    <!-- Has image — show preview -->
+    <template v-else>
+      <div class="cpub-image-preview">
+        <img :src="src" :alt="alt" class="cpub-image-preview-img" />
+        <button class="cpub-image-remove" title="Remove image" @click="updateField('src', '')">
+          <i class="fa-solid fa-xmark"></i>
+        </button>
+      </div>
+      <div class="cpub-image-fields">
+        <input
+          class="cpub-image-field"
+          type="text"
+          :value="alt"
+          placeholder="Alt text (describes the image)..."
+          aria-label="Image alt text"
+          @input="updateField('alt', ($event.target as HTMLInputElement).value)"
+        />
+        <input
+          class="cpub-image-field"
+          type="text"
+          :value="caption"
+          placeholder="Caption (optional)..."
+          aria-label="Image caption"
+          @input="updateField('caption', ($event.target as HTMLInputElement).value)"
+        />
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.cpub-image-block {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+.cpub-image-placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 36px 24px;
+  border: 2px dashed var(--border2);
+  background: var(--surface2);
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.cpub-image-placeholder:hover {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-image-placeholder-icon {
+  font-size: 28px;
+  color: var(--text-faint);
+}
+
+.cpub-image-placeholder:hover .cpub-image-placeholder-icon {
+  color: var(--accent);
+}
+
+.cpub-image-placeholder-text {
+  font-size: 12px;
+  color: var(--text-dim);
+}
+
+.cpub-image-placeholder-hint {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.cpub-image-uploading {
+  pointer-events: none;
+  opacity: 0.7;
+}
+
+.cpub-image-error {
+  padding: 6px 10px;
+  font-size: 11px;
+  color: var(--red);
+  background: var(--red-bg);
+  border: var(--border-width-default) solid var(--red-border);
+}
+
+.cpub-image-url-row {
+  padding: 8px 0 0;
+}
+
+.cpub-image-url-input {
+  width: 100%;
+  padding: 6px 10px;
+  font-size: 12px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border);
+  color: var(--text);
+  outline: none;
+}
+
+.cpub-image-url-input:focus {
+  border-color: var(--accent);
+}
+
+.cpub-image-url-input::placeholder {
+  color: var(--text-faint);
+}
+
+.cpub-image-preview {
+  position: relative;
+}
+
+.cpub-image-preview-img {
+  width: 100%;
+  max-height: 500px;
+  object-fit: contain;
+  display: block;
+  background: var(--surface2);
+  border: var(--border-width-default) solid var(--border);
+}
+
+.cpub-image-remove {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  width: 28px;
+  height: 28px;
+  background: var(--text);
+  border: none;
+  color: var(--surface);
+  font-size: 12px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  transition: opacity 0.12s;
+}
+
+.cpub-image-preview:hover .cpub-image-remove {
+  opacity: 1;
+}
+
+.cpub-image-remove:hover {
+  background: var(--red);
+}
+
+.cpub-image-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding-top: 6px;
+}
+
+.cpub-image-field {
+  width: 100%;
+  padding: 5px 8px;
+  font-size: 11px;
+  background: var(--surface);
+  border: var(--border-width-default) solid var(--border2);
+  color: var(--text-dim);
+  outline: none;
+  font-style: italic;
+}
+
+.cpub-image-field:focus {
+  border-color: var(--accent);
+  color: var(--text);
+  font-style: normal;
+}
+
+.cpub-image-field::placeholder {
+  color: var(--text-faint);
+  font-style: italic;
+}
+
+.cpub-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+</style>