@commonpub/editor 0.5.0 → 0.6.0

package/vue/components/EditorVisibility.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+/**
+ * Visibility radio group for editor panels.
+ * Reused across Article, Project, Explainer editors.
+ */
+defineProps<{
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const options = [
+  { value: 'public', label: 'Public', icon: 'fa-globe', desc: 'Visible to everyone' },
+  { value: 'members', label: 'Members', icon: 'fa-users', desc: 'Hub members only' },
+  { value: 'private', label: 'Private', icon: 'fa-lock', desc: 'Only you' },
+];
+</script>
+
+<template>
+  <div class="cpub-visibility-group" role="radiogroup" aria-label="Content visibility">
+    <label
+      v-for="opt in options"
+      :key="opt.value"
+      class="cpub-visibility-option"
+      :class="{ selected: modelValue === opt.value }"
+    >
+      <input
+        type="radio"
+        :value="opt.value"
+        :checked="modelValue === opt.value"
+        class="cpub-sr-only"
+        @change="emit('update:modelValue', opt.value)"
+      />
+      <i :class="['fa-solid', opt.icon, 'cpub-vis-icon']"></i>
+      <div class="cpub-vis-text">
+        <span class="cpub-vis-label">{{ opt.label }}</span>
+        <span class="cpub-vis-desc">{{ opt.desc }}</span>
+      </div>
+    </label>
+  </div>
+</template>
+
+<style scoped>
+.cpub-visibility-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.cpub-visibility-option {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: var(--border-width-default) solid var(--border2);
+  cursor: pointer;
+  transition: border-color 0.1s, background 0.1s;
+}
+
+.cpub-visibility-option:hover {
+  border-color: var(--border);
+  background: var(--surface2);
+}
+
+.cpub-visibility-option.selected {
+  border-color: var(--accent);
+  background: var(--accent-bg);
+}
+
+.cpub-vis-icon {
+  font-size: 12px;
+  color: var(--text-faint);
+  width: 16px;
+  text-align: center;
+}
+
+.cpub-visibility-option.selected .cpub-vis-icon {
+  color: var(--accent);
+}
+
+.cpub-vis-text {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+
+.cpub-vis-label {
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--text);
+}
+
+.cpub-vis-desc {
+  font-size: 10px;
+  color: var(--text-faint);
+}
+
+.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/BuildStepBlock.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+/**
+ * Build step block — numbered step with title and instruction text.
+ */
+import { computed } from 'vue';
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const stepNumber = computed(() => (props.content.stepNumber as number) ?? 1);
+const title = computed(() => (props.content.title as string) ?? '');
+const instructions = computed(() => (props.content.instructions as string) ?? '');
+const time = computed(() => (props.content.time as string) ?? '');
+
+function updateField(field: string, value: unknown): void {
+  emit('update', { ...props.content, [field]: value });
+}
+</script>
+
+<template>
+  <div class="cpub-step-block">
+    <div class="cpub-step-header">
+      <div class="cpub-step-num">{{ stepNumber }}</div>
+      <input
+        class="cpub-step-title"
+        type="text"
+        :value="title"
+        placeholder="Step title..."
+        @input="updateField('title', ($event.target as HTMLInputElement).value)"
+      />
+      <input
+        class="cpub-step-time"
+        type="text"
+        :value="time"
+        placeholder="Time"
+        @input="updateField('time', ($event.target as HTMLInputElement).value)"
+      />
+    </div>
+    <div class="cpub-step-body">
+      <textarea
+        class="cpub-step-instructions"
+        :value="instructions"
+        placeholder="Describe this step..."
+        rows="4"
+        @input="updateField('instructions', ($event.target as HTMLTextAreaElement).value)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-step-block {
+  border: var(--border-width-default) solid var(--accent-border);
+  border-left: 4px solid var(--accent);
+  background: var(--surface);
+}
+
+.cpub-step-header {
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 16px;
+  border-bottom: var(--border-width-default) solid var(--border2);
+  background: var(--accent-bg);
+}
+
+.cpub-step-num {
+  width: 32px; height: 32px;
+  background: var(--accent); color: var(--color-text-inverse);
+  font-family: var(--font-mono); font-size: 14px; font-weight: 700;
+  border-radius: 50%;
+  display: flex; align-items: center; justify-content: center;
+  flex-shrink: 0;
+}
+
+.cpub-step-title {
+  flex: 1; font-size: 14px; font-weight: 600;
+  background: transparent; border: none; outline: none;
+  color: var(--text);
+}
+.cpub-step-title::placeholder { color: var(--text-faint); }
+
+.cpub-step-time {
+  width: 80px; font-family: var(--font-mono); font-size: 10px;
+  background: transparent; border: var(--border-width-default) solid var(--border2);
+  padding: 3px 6px; color: var(--text-dim); outline: none;
+  text-align: center;
+}
+.cpub-step-time:focus { border-color: var(--accent); }
+.cpub-step-time::placeholder { color: var(--text-faint); }
+
+.cpub-step-body { padding: 14px 16px; }
+
+.cpub-step-instructions {
+  width: 100%; font-size: 13px; line-height: 1.65;
+  background: transparent; border: none; outline: none;
+  color: var(--text); resize: vertical;
+  font-family: var(--font-sans, system-ui);
+}
+.cpub-step-instructions::placeholder { color: var(--text-faint); }
+</style>

package/vue/components/blocks/CalloutBlock.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+/**
+ * Callout block — variant picker (info/tip/warning/danger) + editable body.
+ */
+import { computed } from 'vue';
+import { sanitizeBlockHtml } from '../../utils.js';
+
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const html = computed(() => (props.content.html as string) ?? '');
+const variant = computed(() => (props.content.variant as string) ?? 'info');
+
+const variants = [
+  { value: 'info', icon: 'fa-circle-info', label: 'Info', color: 'var(--accent)' },
+  { value: 'tip', icon: 'fa-lightbulb', label: 'Tip', color: 'var(--green)' },
+  { value: 'warning', icon: 'fa-triangle-exclamation', label: 'Warning', color: 'var(--yellow)' },
+  { value: 'danger', icon: 'fa-circle-exclamation', label: 'Danger', color: 'var(--red)' },
+] as const;
+
+const currentVariant = computed(() => variants.find((v) => v.value === variant.value) ?? variants[0]);
+
+function cycleVariant(): void {
+  const idx = variants.findIndex((v) => v.value === variant.value);
+  const next = variants[(idx + 1) % variants.length]!;
+  emit('update', { html: html.value, variant: next.value });
+}
+
+function onBodyInput(event: Event): void {
+  const el = event.target as HTMLElement;
+  emit('update', { html: sanitizeBlockHtml(el.innerHTML), variant: variant.value });
+}
+</script>
+
+<template>
+  <div class="cpub-callout-block" :class="`cpub-callout--${variant}`">
+    <button
+      class="cpub-callout-icon-btn"
+      :title="`${currentVariant.label} — click to change`"
+      :style="{ color: currentVariant.color }"
+      @click="cycleVariant"
+    >
+      <i :class="['fa-solid', currentVariant.icon]"></i>
+    </button>
+    <div class="cpub-callout-body">
+      <div class="cpub-callout-label" :style="{ color: currentVariant.color }">{{ currentVariant.label }}</div>
+      <div
+        class="cpub-callout-text"
+        contenteditable="true"
+        data-placeholder="Callout text..."
+        @input="onBodyInput"
+        v-html="html"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-callout-block {
+  display: flex;
+  gap: 12px;
+  padding: 14px 16px;
+  border: var(--border-width-default) solid var(--border2);
+  border-left-width: 5px;
+}
+
+.cpub-callout--info { border-left-color: var(--accent); background: var(--accent-bg); }
+.cpub-callout--tip { border-left-color: var(--green); background: var(--green-bg); }
+.cpub-callout--warning { border-left-color: var(--yellow); background: var(--yellow-bg); }
+.cpub-callout--danger { border-left-color: var(--red); background: var(--red-bg); }
+
+.cpub-callout-icon-btn {
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  border: none;
+  font-size: 14px;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  transition: transform 0.15s;
+}
+
+.cpub-callout-icon-btn:hover {
+  transform: scale(1.15);
+}
+
+.cpub-callout-body {
+  flex: 1;
+  min-width: 0;
+}
+
+.cpub-callout-label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 4px;
+}
+
+.cpub-callout-text {
+  font-size: 13px;
+  line-height: 1.65;
+  color: var(--text);
+  outline: none;
+  min-height: 1.65em;
+}
+
+.cpub-callout-text:empty::before {
+  content: attr(data-placeholder);
+  color: var(--text-faint);
+  pointer-events: none;
+}
+</style>

package/vue/components/blocks/CheckpointBlock.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+
+const label = computed(() => (props.content.label as string) ?? '');
+
+function updateLabel(value: string): void {
+  emit('update', { ...props.content, label: value });
+}
+</script>
+
+<template>
+  <div class="cpub-checkpoint-edit">
+    <div class="cpub-checkpoint-edit-header"><i class="fa-solid fa-circle-check"></i> Checkpoint</div>
+    <div class="cpub-checkpoint-edit-body">
+      <input class="cpub-checkpoint-input" :value="label" placeholder="e.g. Section 1 complete — you understand backpropagation!" @input="updateLabel(($event.target as HTMLInputElement).value)" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.cpub-checkpoint-edit { border: var(--border-width-default) solid var(--green-border); background: var(--surface); }
+.cpub-checkpoint-edit-header { padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--green-bg); border-bottom: var(--border-width-default) solid var(--green-border); display: flex; align-items: center; gap: 8px; color: var(--green); }
+.cpub-checkpoint-edit-body { padding: 12px; }
+.cpub-checkpoint-input { width: 100%; font-size: 13px; background: transparent; border: none; border-bottom: var(--border-width-default) solid var(--border2); padding: 6px 0; outline: none; color: var(--text); }
+.cpub-checkpoint-input::placeholder { color: var(--text-faint); }
+</style>

package/vue/components/blocks/CodeBlock.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+/**
+ * Code block — textarea with language selector, filename, and copy button.
+ * Styled to match the mockup's dark terminal aesthetic.
+ */
+import { ref, computed } from 'vue';
+const props = defineProps<{
+  content: Record<string, unknown>;
+}>();
+
+const emit = defineEmits<{
+  update: [content: Record<string, unknown>];
+}>();
+
+const code = computed(() => (props.content.code as string) ?? '');
+const language = computed(() => (props.content.language as string) ?? '');
+const filename = computed(() => (props.content.filename as string) ?? '');
+
+const languages = [
+  '', 'javascript', 'typescript', 'python', 'c', 'cpp', 'rust', 'go',
+  'java', 'bash', 'html', 'css', 'json', 'yaml', 'sql', 'markdown',
+];
+
+const copied = ref(false);
+
+function updateField(field: string, value: string): void {
+  emit('update', { ...props.content, [field]: value });
+}
+
+async function copyCode(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(code.value);
+    copied.value = true;
+    setTimeout(() => { copied.value = false; }, 1500);
+  } catch {
+    // clipboard API not available
+  }
+}
+</script>
+
+<template>
+  <div class="cpub-code-block">
+    <div class="cpub-code-header">
+      <select
+        class="cpub-code-lang"
+        :value="language"
+        aria-label="Programming language"
+        @change="updateField('language', ($event.target as HTMLSelectElement).value)"
+      >
+        <option v-for="lang in languages" :key="lang" :value="lang">
+          {{ lang || 'Plain text' }}
+        </option>
+      </select>
+      <input
+        class="cpub-code-filename"
+        type="text"
+        :value="filename"
+        placeholder="filename.ext"
+        aria-label="Filename"
+        @input="updateField('filename', ($event.target as HTMLInputElement).value)"
+      />
+      <button class="cpub-code-copy" @click="copyCode">
+        <i :class="copied ? 'fa-solid fa-check' : 'fa-regular fa-copy'"></i>
+        {{ copied ? 'Copied' : 'Copy' }}
+      </button>
+    </div>
+    <textarea
+      class="cpub-code-body"
+      :value="code"
+      placeholder="// Write your code here..."
+      spellcheck="false"
+      aria-label="Code content"
+      @input="updateField('code', ($event.target as HTMLTextAreaElement).value)"
+    />
+  </div>
+</template>
+
+<style scoped>
+/* Dark code editor context — scoped white-on-dark tokens */
+.cpub-code-block {
+  --code-fg-faint: rgba(255, 255, 255, 0.2);
+  --code-fg-dim: rgba(255, 255, 255, 0.5);
+  --code-fg: rgba(255, 255, 255, 0.8);
+  --code-border: rgba(255, 255, 255, 0.15);
+  --code-surface: rgba(255, 255, 255, 0.08);
+  --code-surface-dim: rgba(255, 255, 255, 0.04);
+
+  background: var(--text);
+  border: var(--border-width-default) solid var(--border);
+  overflow: hidden;
+}
+
+.cpub-code-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: var(--code-surface-dim);
+  border-bottom: var(--border-width-default) solid var(--code-surface);
+}
+
+.cpub-code-lang {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  appearance: none;
+  padding: 2px 4px;
+}
+
+.cpub-code-lang option {
+  background: var(--text);
+  color: var(--surface);
+}
+
+.cpub-code-filename {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--text-faint);
+  background: transparent;
+  border: none;
+  outline: none;
+  flex: 1;
+  padding: 2px 4px;
+}
+
+.cpub-code-filename::placeholder {
+  color: var(--code-fg-faint);
+}
+
+.cpub-code-copy {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  color: var(--code-fg-dim);
+  background: transparent;
+  border: var(--border-width-default) solid var(--code-border);
+  padding: 3px 8px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  flex-shrink: 0;
+  transition: all 0.1s;
+}
+
+.cpub-code-copy:hover {
+  color: var(--code-fg);
+  background: var(--code-surface);
+}
+
+.cpub-code-body {
+  width: 100%;
+  min-height: 120px;
+  padding: 14px 16px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--surface);
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: vertical;
+  tab-size: 2;
+  white-space: pre;
+  overflow-x: auto;
+}
+
+.cpub-code-body::placeholder {
+  color: var(--code-fg-faint);
+}
+</style>

package/vue/components/blocks/DividerBlock.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+/**
+ * Divider block — horizontal rule. No editing needed.
+ */
+</script>
+
+<template>
+  <div class="cpub-divider-block">
+    <hr class="cpub-divider-line" />
+  </div>
+</template>
+
+<style scoped>
+.cpub-divider-block {
+  padding: 8px 0;
+}
+
+.cpub-divider-line {
+  border: none;
+  border-top: var(--border-width-default) solid var(--border2);
+}
+</style>

package/vue/components/blocks/DownloadsBlock.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+interface FileItem { name: string; url: string; size?: string; type?: string; }
+const files = computed(() => (props.content.files as FileItem[]) ?? []);
+function addFile(): void { emit('update', { files: [...files.value, { name: '', url: '' }] }); }
+function removeFile(i: number): void { emit('update', { files: files.value.filter((_: FileItem, idx: number) => idx !== i) }); }
+function updateFile(i: number, field: string, value: string): void {
+  const updated = [...files.value];
+  updated[i] = { ...updated[i]!, [field]: value };
+  emit('update', { files: updated });
+}
+</script>
+<template>
+  <div class="cpub-downloads-block">
+    <div class="cpub-dl-header"><i class="fa-solid fa-download"></i> Downloads <button class="cpub-dl-add" @click="addFile"><i class="fa-solid fa-plus"></i></button></div>
+    <div v-for="(file, i) in files" :key="i" class="cpub-dl-item">
+      <i class="fa-solid fa-file cpub-dl-file-icon"></i>
+      <input class="cpub-dl-name" :value="file.name" placeholder="Filename..." @input="updateFile(i, 'name', ($event.target as HTMLInputElement).value)" />
+      <input class="cpub-dl-url" :value="file.url" placeholder="URL..." @input="updateFile(i, 'url', ($event.target as HTMLInputElement).value)" />
+      <button class="cpub-dl-remove" @click="removeFile(i)"><i class="fa-solid fa-xmark"></i></button>
+    </div>
+    <div v-if="files.length === 0" class="cpub-dl-empty" @click="addFile"><i class="fa-solid fa-plus"></i> Add downloadable file</div>
+  </div>
+</template>
+<style scoped>
+.cpub-downloads-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-dl-header { padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--surface2); border-bottom: var(--border-width-default) solid var(--border2); display: flex; align-items: center; gap: 8px; }
+.cpub-dl-header i { color: var(--accent); }
+.cpub-dl-add { margin-left: auto; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 11px; }
+.cpub-dl-add:hover { color: var(--accent); }
+.cpub-dl-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: var(--border-width-default) solid var(--border2); }
+.cpub-dl-file-icon { color: var(--text-faint); font-size: 12px; }
+.cpub-dl-name { flex: 1; font-size: 12px; font-weight: 500; background: transparent; border: none; outline: none; color: var(--text); }
+.cpub-dl-url { flex: 2; font-size: 11px; background: transparent; border: none; outline: none; color: var(--text-dim); font-family: var(--font-mono); }
+.cpub-dl-name::placeholder, .cpub-dl-url::placeholder { color: var(--text-faint); }
+.cpub-dl-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; }
+.cpub-dl-remove:hover { color: var(--red); }
+.cpub-dl-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; }
+.cpub-dl-empty:hover { color: var(--accent); }
+</style>

package/vue/components/blocks/EmbedBlock.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{ content: Record<string, unknown> }>();
+const emit = defineEmits<{ update: [content: Record<string, unknown>] }>();
+const url = computed(() => (props.content.url as string) ?? '');
+function updateField(field: string, value: string): void { emit('update', { ...props.content, [field]: value }); }
+</script>
+<template>
+  <div class="cpub-embed-block">
+    <div class="cpub-embed-header"><i class="fa-solid fa-globe"></i> Embed</div>
+    <input class="cpub-embed-url" type="url" :value="url" placeholder="Paste embed URL..." @input="updateField('url', ($event.target as HTMLInputElement).value)" />
+  </div>
+</template>
+<style scoped>
+.cpub-embed-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
+.cpub-embed-header { padding: 8px 12px; font-size: 12px; font-weight: 600; background: var(--surface2); border-bottom: var(--border-width-default) solid var(--border2); display: flex; align-items: center; gap: 8px; }
+.cpub-embed-header i { color: var(--accent); }
+.cpub-embed-url { width: 100%; padding: 8px 12px; font-size: 12px; background: transparent; border: none; color: var(--text); outline: none; }
+.cpub-embed-url:focus { background: var(--accent-bg); }
+.cpub-embed-url::placeholder { color: var(--text-faint); }
+</style>