@commonpub/layer 0.7.2 → 0.7.3

package/components/editors/blocks/TextBlock.vue

@@ -1,201 +0,0 @@
-<script setup lang="ts">
-/**
- * Text/paragraph block — inline TipTap editor for rich text.
- * Supports bold, italic, code, strike, link, lists.
- * Detects "/" at start of empty block to trigger slash command menu.
- */
-import { Editor } from '@tiptap/core';
-import { Document } from '@tiptap/extension-document';
-import { Text } from '@tiptap/extension-text';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import { Bold } from '@tiptap/extension-bold';
-import { Italic } from '@tiptap/extension-italic';
-import { Code } from '@tiptap/extension-code';
-import { Strike } from '@tiptap/extension-strike';
-import { Link } from '@tiptap/extension-link';
-import { History } from '@tiptap/extension-history';
-import { Placeholder } from '@tiptap/extension-placeholder';
-import { BulletList } from '@tiptap/extension-bullet-list';
-import { OrderedList } from '@tiptap/extension-ordered-list';
-import { ListItem } from '@tiptap/extension-list-item';
-import { Extension } from '@tiptap/core';
-
-const props = defineProps<{
-  content: Record<string, unknown>;
-}>();
-
-const emit = defineEmits<{
-  update: [content: Record<string, unknown>];
-  'slash-command': [];
-  'selection-change': [hasSelection: boolean, rect: DOMRect | null];
-  'enter-at-end': [];
-  'backspace-empty': [];
-}>();
-
-const editorEl = ref<HTMLElement | null>(null);
-let editor: Editor | null = null;
-
-onMounted(() => {
-  if (!editorEl.value) return;
-
-  editor = new Editor({
-    element: editorEl.value,
-    extensions: [
-      Document,
-      Text,
-      Paragraph,
-      Bold,
-      Italic,
-      Code,
-      Strike,
-      Link.configure({ openOnClick: false }),
-      History,
-      BulletList,
-      OrderedList,
-      ListItem,
-      Placeholder.configure({ placeholder: 'Type / for commands...' }),
-      Extension.create({
-        name: 'blockKeyboard',
-        addKeyboardShortcuts() {
-          return {
-            'Enter': ({ editor: e }) => {
-              // If cursor is at the very end of the document and last node is an empty paragraph, create new block
-              const { state } = e;
-              const { $from } = state.selection;
-              const atEnd = $from.pos === state.doc.content.size - 1;
-              const isEmpty = state.doc.textContent.length === 0;
-              const lastNode = state.doc.lastChild;
-              const lastIsEmptyP = lastNode?.type.name === 'paragraph' && lastNode.textContent === '';
-
-              // If we're at end and the text has content, emit to create a new block below
-              if (atEnd && !isEmpty) {
-                emit('enter-at-end');
-                return true;
-              }
-              return false;
-            },
-            'Backspace': ({ editor: e }) => {
-              // If block is completely empty, emit to delete this block
-              if (e.isEmpty) {
-                emit('backspace-empty');
-                return true;
-              }
-              return false;
-            },
-          };
-        },
-      }),
-    ],
-    content: (props.content.html as string) || '',
-    onUpdate: ({ editor: e }) => {
-      const html = e.getHTML();
-      const text = e.getText();
-
-      // Detect slash command: "/" typed at start of otherwise-empty block
-      if (text === '/') {
-        // Clear the slash character and trigger command menu
-        e.commands.clearContent(true);
-        emit('slash-command');
-        return;
-      }
-
-      emit('update', { html });
-    },
-    onSelectionUpdate: ({ editor: e }) => {
-      const { from, to } = e.state.selection;
-      const hasSelection = from !== to;
-
-      if (hasSelection) {
-        // Get the bounding rect of the selection for floating toolbar positioning
-        const view = e.view;
-        const start = view.coordsAtPos(from);
-        const end = view.coordsAtPos(to);
-        const rect = new DOMRect(
-          Math.min(start.left, end.left),
-          start.top,
-          Math.abs(end.right - start.left),
-          end.bottom - start.top,
-        );
-        emit('selection-change', true, rect);
-      } else {
-        emit('selection-change', false, null);
-      }
-    },
-  });
-});
-
-onUnmounted(() => {
-  editor?.destroy();
-});
-
-// Sync external content changes (e.g. undo at the block level)
-watch(() => props.content.html, (newHtml) => {
-  if (editor && newHtml !== editor.getHTML()) {
-    editor.commands.setContent((newHtml as string) || '', false);
-  }
-});
-
-/** Expose the TipTap editor instance for the floating toolbar */
-function getEditor(): Editor | null {
-  return editor;
-}
-
-defineExpose({ getEditor });
-</script>
-
-<template>
-  <div ref="editorEl" class="cpub-text-block" />
-</template>
-
-<style scoped>
-.cpub-text-block {
-  font-size: 15px;
-  line-height: 1.75;
-  color: var(--text);
-  min-height: 1.75em;
-}
-
-.cpub-text-block :deep(.tiptap) {
-  outline: none;
-  min-height: 1.75em;
-}
-
-.cpub-text-block :deep(.tiptap p) {
-  margin-bottom: 0.5em;
-}
-
-.cpub-text-block :deep(.tiptap p:last-child) {
-  margin-bottom: 0;
-}
-
-.cpub-text-block :deep(.tiptap p.is-editor-empty:first-child::before) {
-  content: attr(data-placeholder);
-  color: var(--text-faint);
-  pointer-events: none;
-  float: left;
-  height: 0;
-}
-
-.cpub-text-block :deep(.tiptap strong) {
-  font-weight: 600;
-}
-
-.cpub-text-block :deep(.tiptap code) {
-  font-family: var(--font-mono);
-  font-size: 0.9em;
-  padding: 1px 4px;
-  background: var(--surface3);
-  border: var(--border-width-default) solid var(--border2);
-}
-
-.cpub-text-block :deep(.tiptap a) {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.cpub-text-block :deep(.tiptap ul),
-.cpub-text-block :deep(.tiptap ol) {
-  padding-left: 1.5em;
-  margin-bottom: 0.5em;
-}
-</style>

package/components/editors/blocks/ToolListBlock.vue

@@ -1,70 +0,0 @@
-<script setup lang="ts">
-/**
- * Tool list block — list of required tools with name and notes.
- */
-interface Tool { name: string; url?: string; required?: boolean; notes?: string; }
-
-const props = defineProps<{
-  content: Record<string, unknown>;
-}>();
-
-const emit = defineEmits<{
-  update: [content: Record<string, unknown>];
-}>();
-
-const tools = computed(() => (props.content.tools as Tool[]) ?? []);
-
-function updateTool(index: number, field: string, value: unknown): void {
-  const updated = [...tools.value];
-  updated[index] = { ...updated[index]!, [field]: value };
-  emit('update', { tools: updated });
-}
-
-function addTool(): void {
-  emit('update', { tools: [...tools.value, { name: '', required: true }] });
-}
-
-function removeTool(index: number): void {
-  emit('update', { tools: tools.value.filter((_: Tool, i: number) => i !== index) });
-}
-</script>
-
-<template>
-  <div class="cpub-tools-block">
-    <div class="cpub-tools-header">
-      <i class="fa-solid fa-wrench cpub-tools-icon"></i>
-      <span class="cpub-tools-title">Tools Required</span>
-      <button class="cpub-tools-add" @click="addTool"><i class="fa-solid fa-plus"></i> Add tool</button>
-    </div>
-    <div class="cpub-tools-list">
-      <div v-for="(tool, i) in tools" :key="i" class="cpub-tool-item">
-        <input class="cpub-tool-name" type="text" :value="tool.name" placeholder="Tool name..." @input="updateTool(i, 'name', ($event.target as HTMLInputElement).value)" />
-        <input class="cpub-tool-note" type="text" :value="tool.notes ?? ''" placeholder="Notes..." @input="updateTool(i, 'notes', ($event.target as HTMLInputElement).value)" />
-        <button class="cpub-tool-remove" @click="removeTool(i)"><i class="fa-solid fa-xmark"></i></button>
-      </div>
-      <div v-if="tools.length === 0" class="cpub-tools-empty" @click="addTool">
-        <i class="fa-solid fa-plus"></i> Add your first tool
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cpub-tools-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
-.cpub-tools-header { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: var(--border-width-default) solid var(--border2); background: var(--surface2); }
-.cpub-tools-icon { font-size: 12px; color: var(--accent); }
-.cpub-tools-title { font-size: 12px; font-weight: 600; flex: 1; }
-.cpub-tools-add { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; background: transparent; border: var(--border-width-default) solid var(--border2); color: var(--text-dim); cursor: pointer; display: flex; align-items: center; gap: 4px; }
-.cpub-tools-add:hover { border-color: var(--accent); color: var(--accent); }
-.cpub-tools-list { padding: 8px; }
-.cpub-tool-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-bottom: var(--border-width-default) solid var(--border2); }
-.cpub-tool-item:last-child { border-bottom: none; }
-.cpub-tool-name { flex: 1; font-size: 12px; font-weight: 500; background: transparent; border: none; outline: none; color: var(--text); }
-.cpub-tool-name::placeholder { color: var(--text-faint); }
-.cpub-tool-note { flex: 1; font-size: 11px; background: transparent; border: none; outline: none; color: var(--text-dim); }
-.cpub-tool-note::placeholder { color: var(--text-faint); }
-.cpub-tool-remove { background: none; border: none; color: var(--text-faint); cursor: pointer; font-size: 10px; }
-.cpub-tool-remove:hover { color: var(--red); }
-.cpub-tools-empty { padding: 20px; text-align: center; font-size: 12px; color: var(--text-faint); cursor: pointer; }
-.cpub-tools-empty:hover { color: var(--accent); background: var(--accent-bg); }
-</style>

package/components/editors/blocks/VideoBlock.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-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-video-block">
-    <div class="cpub-video-header"><i class="fa-solid fa-film"></i> Video Embed</div>
-    <input class="cpub-video-url" type="url" :value="url" placeholder="Paste YouTube or Vimeo URL..." @input="updateField('url', ($event.target as HTMLInputElement).value)" />
-    <div v-if="url" class="cpub-video-preview"><i class="fa-solid fa-play"></i> {{ url }}</div>
-  </div>
-</template>
-<style scoped>
-.cpub-video-block { border: var(--border-width-default) solid var(--border2); background: var(--surface); }
-.cpub-video-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-video-header i { color: var(--accent); }
-.cpub-video-url { width: 100%; padding: 8px 12px; font-size: 12px; background: transparent; border: none; border-bottom: var(--border-width-default) solid var(--border2); color: var(--text); outline: none; }
-.cpub-video-url:focus { border-bottom-color: var(--accent); }
-.cpub-video-url::placeholder { color: var(--text-faint); }
-.cpub-video-preview { padding: 32px; text-align: center; font-size: 12px; color: var(--text-dim); background: var(--text); color: var(--surface); display: flex; align-items: center; justify-content: center; gap: 8px; }
-</style>

package/composables/useBlockEditor.ts

@@ -1,187 +0,0 @@
-/**
- * Block editor composable — manages an array of content blocks with full CRUD operations.
- * Blocks are stored as { id, type, content } and serialized to/from BlockTuple format for persistence.
- */
-import type { BlockTuple } from '@commonpub/editor';
-
-export interface EditorBlock {
-  id: string;
-  type: string;
-  content: Record<string, unknown>;
-}
-
-/** Default content values when creating a new block of each type */
-const BLOCK_DEFAULTS: Record<string, () => Record<string, unknown>> = {
-  paragraph: () => ({ html: '' }),
-  heading: () => ({ text: '', level: 2 }),
-  code_block: () => ({ code: '', language: '', filename: '' }),
-  image: () => ({ src: '', alt: '', caption: '' }),
-  blockquote: () => ({ html: '', attribution: '' }),
-  callout: () => ({ html: '', variant: 'info' }),
-  gallery: () => ({ images: [] }),
-  video: () => ({ url: '', platform: 'youtube', caption: '' }),
-  embed: () => ({ url: '', type: 'generic', html: '' }),
-  horizontal_rule: () => ({}),
-  partsList: () => ({ parts: [] }),
-  buildStep: () => ({ stepNumber: 1, instructions: '', image: '', time: '' }),
-  toolList: () => ({ tools: [] }),
-  downloads: () => ({ files: [] }),
-  quiz: () => ({ question: '', options: [], feedback: '' }),
-  interactiveSlider: () => ({ label: '', min: 0, max: 100, step: 1, defaultValue: 50, states: [] }),
-  checkpoint: () => ({ message: '' }),
-  mathNotation: () => ({ expression: '', display: false }),
-  bulletList: () => ({ html: '' }),
-  orderedList: () => ({ html: '' }),
-  sectionHeader: () => ({ tag: '', title: '', body: '' }),
-};
-
-function generateId(): string {
-  return `blk-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`;
-}
-
-export function useBlockEditor(initialBlocks?: BlockTuple[]) {
-  const blocks = ref<EditorBlock[]>([]);
-  const selectedBlockId = ref<string | null>(null);
-
-  // --- Init from BlockTuples ---
-  function fromBlockTuples(tuples: BlockTuple[]): void {
-    blocks.value = tuples.map(([type, content]) => ({
-      id: generateId(),
-      type,
-      content: { ...content },
-    }));
-  }
-
-  if (initialBlocks && initialBlocks.length > 0) {
-    fromBlockTuples(initialBlocks);
-  }
-
-  // --- Serialize back to BlockTuples ---
-  function toBlockTuples(): BlockTuple[] {
-    return blocks.value.map((b) => [b.type, { ...b.content }]);
-  }
-
-  // --- Mutations ---
-
-  function addBlock(type: string, attrs?: Record<string, unknown>, atIndex?: number): string {
-    const defaults = BLOCK_DEFAULTS[type]?.() ?? {};
-    const block: EditorBlock = {
-      id: generateId(),
-      type,
-      content: { ...defaults, ...attrs },
-    };
-
-    if (atIndex !== undefined && atIndex >= 0 && atIndex <= blocks.value.length) {
-      blocks.value.splice(atIndex, 0, block);
-    } else {
-      blocks.value.push(block);
-    }
-
-    selectedBlockId.value = block.id;
-    return block.id;
-  }
-
-  /** Replace a block with a new block type (used by slash command) */
-  function replaceBlock(id: string, newType: string, attrs?: Record<string, unknown>): string {
-    const idx = blocks.value.findIndex((b) => b.id === id);
-    if (idx === -1) return addBlock(newType, attrs);
-
-    const defaults = BLOCK_DEFAULTS[newType]?.() ?? {};
-    const newBlock: EditorBlock = {
-      id: generateId(),
-      type: newType,
-      content: { ...defaults, ...attrs },
-    };
-
-    blocks.value.splice(idx, 1, newBlock);
-    selectedBlockId.value = newBlock.id;
-    return newBlock.id;
-  }
-
-  function removeBlock(id: string): void {
-    const idx = blocks.value.findIndex((b) => b.id === id);
-    if (idx === -1) return;
-    blocks.value.splice(idx, 1);
-    if (selectedBlockId.value === id) {
-      selectedBlockId.value = null;
-    }
-  }
-
-  function clearBlocks(): void {
-    blocks.value.splice(0, blocks.value.length);
-    selectedBlockId.value = null;
-  }
-
-  function updateBlock(id: string, content: Record<string, unknown>): void {
-    const block = blocks.value.find((b) => b.id === id);
-    if (block) {
-      block.content = { ...block.content, ...content };
-    }
-  }
-
-  function moveBlock(fromIndex: number, toIndex: number): void {
-    if (fromIndex < 0 || fromIndex >= blocks.value.length) return;
-    if (toIndex < 0 || toIndex >= blocks.value.length) return;
-    const [moved] = blocks.value.splice(fromIndex, 1);
-    blocks.value.splice(toIndex, 0, moved!);
-  }
-
-  function moveBlockUp(id: string): void {
-    const idx = blocks.value.findIndex((b) => b.id === id);
-    if (idx > 0) moveBlock(idx, idx - 1);
-  }
-
-  function moveBlockDown(id: string): void {
-    const idx = blocks.value.findIndex((b) => b.id === id);
-    if (idx < blocks.value.length - 1) moveBlock(idx, idx + 1);
-  }
-
-  function duplicateBlock(id: string): void {
-    const idx = blocks.value.findIndex((b) => b.id === id);
-    if (idx === -1) return;
-    const original = blocks.value[idx]!;
-    const clone: EditorBlock = {
-      id: generateId(),
-      type: original.type,
-      content: JSON.parse(JSON.stringify(original.content)),
-    };
-    blocks.value.splice(idx + 1, 0, clone);
-    selectedBlockId.value = clone.id;
-  }
-
-  function selectBlock(id: string | null): void {
-    selectedBlockId.value = id;
-  }
-
-  function getBlockIndex(id: string): number {
-    return blocks.value.findIndex((b) => b.id === id);
-  }
-
-  const isEmpty = computed(() => blocks.value.length === 0);
-
-  const selectedBlock = computed(() =>
-    blocks.value.find((b) => b.id === selectedBlockId.value) ?? null,
-  );
-
-  return {
-    blocks: readonly(blocks) as Readonly<Ref<EditorBlock[]>>,
-    selectedBlockId: readonly(selectedBlockId),
-    selectedBlock,
-    isEmpty,
-    addBlock,
-    removeBlock,
-    clearBlocks,
-    updateBlock,
-    moveBlock,
-    moveBlockUp,
-    moveBlockDown,
-    duplicateBlock,
-    replaceBlock,
-    selectBlock,
-    getBlockIndex,
-    toBlockTuples,
-    fromBlockTuples,
-  };
-}
-
-export type BlockEditor = ReturnType<typeof useBlockEditor>;