@ekrist1/vulse 0.1.6-alpha.3 → 0.1.7-alpha.4

package/src/admin/components/fields/VulseVideoNodeView.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { NodeViewWrapper, type NodeViewProps } from '@tiptap/vue-3';
+import { ref, watch } from 'vue';
+import { deleteCurrentNode, insertParagraphAfter, insertParagraphBefore } from './set-node-utils.js';
+import { sanitizeMediaSrc } from './url-utils.js';
+
+const props = defineProps<NodeViewProps>();
+
+const srcDraft = ref(String(props.node.attrs?.src ?? ''));
+const invalidSrc = ref(false);
+
+watch(
+  () => props.node.attrs?.src,
+  (value) => {
+    srcDraft.value = String(value ?? '');
+    invalidSrc.value = false;
+  },
+);
+
+function commitSrc() {
+  const sanitized = sanitizeMediaSrc(srcDraft.value);
+  if (!srcDraft.value.trim()) {
+    props.updateAttributes({ src: null });
+    invalidSrc.value = false;
+    return;
+  }
+  if (!sanitized) {
+    invalidSrc.value = true;
+    return;
+  }
+  invalidSrc.value = false;
+  srcDraft.value = sanitized;
+  props.updateAttributes({ src: sanitized });
+}
+
+function addAbove() {
+  insertParagraphBefore(props);
+}
+
+function addBelow() {
+  insertParagraphAfter(props);
+}
+
+function removeSet() {
+  deleteCurrentNode(props);
+}
+</script>
+
+<template>
+  <NodeViewWrapper
+    class="my-3 overflow-hidden rounded-lg border border-zinc-200 bg-zinc-50"
+    data-testid="video-node-view"
+  >
+    <div class="border-b border-zinc-200 px-3 py-2" contenteditable="false">
+      <div class="flex items-center justify-between gap-3">
+        <div class="text-xs font-medium uppercase tracking-wide text-zinc-500">Video</div>
+        <div class="flex items-center gap-2">
+          <button
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="video-add-above"
+            @click="addAbove"
+          >
+            Add text at top
+          </button>
+          <button
+            type="button"
+            class="rounded border border-zinc-300 bg-white px-2 py-1 text-xs text-zinc-600 hover:bg-zinc-100"
+            data-testid="video-add-below"
+            @click="addBelow"
+          >
+            Add text below
+          </button>
+          <button
+            type="button"
+            class="rounded border border-red-200 bg-white px-2 py-1 text-xs text-red-600 hover:bg-red-50"
+            data-testid="video-delete"
+            @click="removeSet"
+          >
+            Delete
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="grid gap-3 px-3 py-3" contenteditable="false">
+      <label class="grid gap-1 text-xs text-zinc-500">
+        <span>Video URL</span>
+        <input
+          v-model="srcDraft"
+          class="rounded border border-zinc-300 bg-white px-3 py-2 text-sm text-zinc-900"
+          placeholder="https://example.com/video.mp4"
+          data-testid="video-src"
+          @blur="commitSrc"
+        />
+      </label>
+      <div v-if="invalidSrc" class="text-xs text-red-600">
+        Enter a valid `http` or `https` URL.
+      </div>
+      <div class="text-xs text-zinc-500">
+        The video renders on the frontend using the saved source URL.
+      </div>
+    </div>
+  </NodeViewWrapper>
+</template>

package/src/admin/components/fields/blocks-editor-extensions.ts

@@ -0,0 +1,26 @@
+import StarterKit from '@tiptap/starter-kit';
+import { EmojiExtension } from './emoji-extension.js';
+import { VulseAccordionGroupExtension } from './vulse-accordion-group-extension.js';
+import { VulseAccordionExtension } from './vulse-accordion-extension.js';
+import { VulseCalloutExtension } from './vulse-callout-extension.js';
+import { VulseIframeExtension } from './vulse-iframe-extension.js';
+import { VulseLinkExtension } from './link-extension.js';
+import { VulseVideoExtension } from './vulse-video-extension.js';
+import { VulseSetExtension } from './vulse-set-extension.js';
+
+export const EMPTY_BLOCKS_DOC = {
+  type: 'doc',
+  content: [{ type: 'paragraph' }],
+} as const;
+
+export const blocksEditorExtensions = [
+  StarterKit,
+  VulseLinkExtension,
+  EmojiExtension,
+  VulseCalloutExtension,
+  VulseAccordionGroupExtension,
+  VulseAccordionExtension,
+  VulseIframeExtension,
+  VulseVideoExtension,
+  VulseSetExtension,
+];

package/src/admin/components/fields/emoji-extension.ts

@@ -0,0 +1,54 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    emoji: {
+      insertEmoji: (value: string, label?: string) => ReturnType;
+    };
+  }
+}
+
+export const EmojiExtension = Node.create({
+  name: 'emoji',
+  group: 'inline',
+  inline: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      value: {
+        default: '🙂',
+        parseHTML: (element: HTMLElement) =>
+          element.getAttribute('data-value') ?? element.textContent ?? '🙂',
+        renderHTML: (attrs: { value: string }) => ({ 'data-value': attrs.value }),
+      },
+      label: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.getAttribute('aria-label'),
+        renderHTML: (attrs: { label?: string | null }) =>
+          attrs.label ? { 'aria-label': attrs.label } : {},
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'span[data-vulse-emoji]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const value = (HTMLAttributes['data-value'] as string | undefined) ?? '🙂';
+    return ['span', mergeAttributes(HTMLAttributes, { 'data-vulse-emoji': '' }), value];
+  },
+
+  addCommands() {
+    return {
+      insertEmoji:
+        (value: string, label?: string) =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { value, ...(label ? { label } : {}) },
+          }),
+    };
+  },
+});

package/src/admin/components/fields/link-extension.ts

@@ -0,0 +1,48 @@
+import { Mark, mergeAttributes } from '@tiptap/core';
+import { sanitizeLinkHref } from './url-utils.js';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseLink: {
+      setVulseLink: (href: string) => ReturnType;
+      unsetVulseLink: () => ReturnType;
+    };
+  }
+}
+
+export const VulseLinkExtension = Mark.create({
+  name: 'link',
+  inclusive: false,
+
+  addAttributes() {
+    return {
+      href: {
+        default: null,
+        parseHTML: (element: HTMLElement) =>
+          sanitizeLinkHref(element.getAttribute('href') ?? '') ?? null,
+        renderHTML: (attrs: { href?: string | null }) => (attrs.href ? { href: attrs.href } : {}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'a[href]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['a', mergeAttributes(HTMLAttributes), 0];
+  },
+
+  addCommands() {
+    return {
+      setVulseLink:
+        (href: string) =>
+        ({ commands }) =>
+          commands.setMark(this.name, { href }),
+      unsetVulseLink:
+        () =>
+        ({ commands }) =>
+          commands.unsetMark(this.name),
+    };
+  },
+});

package/src/admin/components/fields/set-node-utils.ts

@@ -0,0 +1,115 @@
+import type { JSONContent } from '@tiptap/core';
+import type { NodeViewProps } from '@tiptap/vue-3';
+
+function nodePos(props: NodeViewProps): number | null {
+  const getPos = props.getPos;
+  if (typeof getPos !== 'function') return null;
+  const pos = getPos();
+  return typeof pos === 'number' ? pos : null;
+}
+
+function nodeEndPos(props: NodeViewProps): number | null {
+  const pos = nodePos(props);
+  return pos === null ? null : pos + props.node.nodeSize;
+}
+
+function nodeContentEndPos(props: NodeViewProps): number | null {
+  const pos = nodePos(props);
+  return pos === null ? null : pos + props.node.nodeSize - 1;
+}
+
+function insertParagraphAt(props: NodeViewProps, pos: number): void {
+  const paragraphType = props.editor.schema.nodes.paragraph;
+  if (!paragraphType) return;
+
+  const paragraph = paragraphType.create();
+  const { view, state } = props.editor;
+  view.dispatch(state.tr.insert(pos, paragraph));
+  props.editor.commands.focus();
+  props.editor.commands.setTextSelection(pos + 1);
+}
+
+export function insertContentAfter(
+  props: NodeViewProps,
+  content: JSONContent | JSONContent[],
+): void {
+  const after = nodeEndPos(props);
+  if (after === null) return;
+  props.editor.chain().focus().insertContentAt(after, content).run();
+}
+
+export function appendContentInside(
+  props: NodeViewProps,
+  content: JSONContent | JSONContent[],
+): void {
+  const end = nodeContentEndPos(props);
+  if (end === null) return;
+  props.editor.chain().focus().insertContentAt(end, content).run();
+}
+
+export function insertParagraphBefore(props: NodeViewProps): void {
+  const pos = nodePos(props);
+  if (pos === null) return;
+  insertParagraphAt(props, pos);
+}
+
+export function insertParagraphAfter(props: NodeViewProps): void {
+  const after = nodeEndPos(props);
+  if (after === null) return;
+  insertParagraphAt(props, after);
+}
+
+export function deleteCurrentNode(props: NodeViewProps): void {
+  props.deleteNode();
+}
+
+export function parentNodeInfo(props: NodeViewProps): {
+  name: string;
+  childCount: number;
+  index: number;
+  pos: number | null;
+} | null {
+  const pos = nodePos(props);
+  const doc = props.editor.state?.doc;
+  if (pos === null || !doc || typeof doc.resolve !== 'function') return null;
+
+  const $pos = doc.resolve(pos);
+  if ($pos.depth < 1) return null;
+
+  return {
+    name: $pos.parent.type.name,
+    childCount: $pos.parent.childCount,
+    index: $pos.index($pos.depth),
+    pos: $pos.before($pos.depth),
+  };
+}
+
+export function deleteCurrentNodeOrParentIfOnlyChild(
+  props: NodeViewProps,
+  parentName: string,
+): void {
+  const parent = parentNodeInfo(props);
+  const doc = props.editor.state?.doc;
+  if (
+    parent?.name === parentName &&
+    parent.childCount === 1 &&
+    parent.pos !== null &&
+    doc &&
+    typeof doc.nodeAt === 'function'
+  ) {
+    const parentNode = doc.nodeAt(parent.pos);
+    if (!parentNode) {
+      props.deleteNode();
+      return;
+    }
+
+    props.editor
+      .chain()
+      .focus()
+      .deleteRange({ from: parent.pos, to: parent.pos + parentNode.nodeSize })
+      .run();
+    return;
+  }
+
+  props.deleteNode();
+}

package/src/admin/components/fields/url-utils.ts

@@ -0,0 +1,85 @@
+const LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
+const MEDIA_PROTOCOLS = new Set(['http:', 'https:']);
+const RELATIVE_PREFIXES = ['/', './', '../', '#', '?'];
+
+export interface ParsedIframeCode {
+  code: string;
+  src: string;
+  title: string;
+  width?: string;
+  height?: string;
+  allow?: string;
+  loading?: string;
+  referrerpolicy?: string;
+  frameborder?: string;
+  allowfullscreen?: boolean;
+}
+
+function hasRelativePrefix(value: string): boolean {
+  return RELATIVE_PREFIXES.some((prefix) => value.startsWith(prefix));
+}
+
+function tryParseUrl(value: string): URL | null {
+  try {
+    return new URL(value);
+  } catch {
+    return null;
+  }
+}
+
+export function sanitizeLinkHref(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (hasRelativePrefix(trimmed)) return trimmed;
+  const parsed = tryParseUrl(trimmed);
+  if (!parsed || !LINK_PROTOCOLS.has(parsed.protocol)) return null;
+  return parsed.toString();
+}
+
+export function sanitizeMediaSrc(value: string): string | null {
+  const trimmed = value.trim();
+  if (!trimmed) return null;
+  if (hasRelativePrefix(trimmed)) return trimmed;
+  const parsed = tryParseUrl(trimmed);
+  if (!parsed || !MEDIA_PROTOCOLS.has(parsed.protocol)) return null;
+  return parsed.toString();
+}
+
+function parseAttributes(source: string): Record<string, string> {
+  const attrs: Record<string, string> = {};
+  const pattern = /([a-zA-Z_:][-a-zA-Z0-9_:.]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'=<>`]+)))?/g;
+
+  for (const match of source.matchAll(pattern)) {
+    const name = match[1]?.toLowerCase();
+    if (!name) continue;
+    const value = match[2] ?? match[3] ?? match[4] ?? '';
+    attrs[name] = value;
+  }
+
+  return attrs;
+}
+
+export function parseIframeCode(raw: string): ParsedIframeCode | null {
+  const trimmed = raw.trim();
+  if (!trimmed) return null;
+
+  const match = trimmed.match(/<iframe\b([^>]*)>(?:\s*<\/iframe>)?/i);
+  if (!match) return null;
+
+  const attrs = parseAttributes(match[1] ?? '');
+  const src = sanitizeMediaSrc(attrs.src ?? '');
+  if (!src) return null;
+
+  return {
+    code: trimmed,
+    src,
+    title: attrs.title?.trim() || 'Embedded content',
+    ...(attrs.width ? { width: attrs.width } : {}),
+    ...(attrs.height ? { height: attrs.height } : {}),
+    ...(attrs.allow ? { allow: attrs.allow } : {}),
+    ...(attrs.loading ? { loading: attrs.loading } : {}),
+    ...(attrs.referrerpolicy ? { referrerpolicy: attrs.referrerpolicy } : {}),
+    ...(attrs.frameborder ? { frameborder: attrs.frameborder } : {}),
+    ...(Object.hasOwn(attrs, 'allowfullscreen') ? { allowfullscreen: true } : {}),
+  };
+}

package/src/admin/components/fields/vulse-accordion-extension.ts

@@ -0,0 +1,64 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import VulseAccordionNodeView from './VulseAccordionNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseAccordion: {
+      insertVulseAccordion: (summary?: string) => ReturnType;
+    };
+  }
+}
+
+export const VulseAccordionExtension = Node.create({
+  name: 'vulseAccordion',
+  group: 'block',
+  content: 'block+',
+  defining: true,
+  isolating: true,
+
+  addAttributes() {
+    return {
+      summary: {
+        default: 'Accordion',
+        parseHTML: (element: HTMLElement) =>
+          element.querySelector('summary')?.textContent?.trim() || 'Accordion',
+        renderHTML: (attrs: { summary?: string }) => ({
+          'data-summary': attrs.summary ?? 'Accordion',
+        }),
+      },
+      open: {
+        default: false,
+        parseHTML: (element: HTMLElement) => element.hasAttribute('open'),
+        renderHTML: (attrs: { open?: boolean }) => (attrs.open ? { open: 'open' } : {}),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'details[data-vulse-accordion]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const { summary = 'Accordion', ...rest } = HTMLAttributes;
+    return [
+      'details',
+      mergeAttributes(rest, { 'data-vulse-accordion': '' }),
+      ['summary', {}, String(summary)],
+      ['div', { 'data-vulse-accordion-content': '' }, 0],
+    ];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseAccordionNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseAccordion:
+        (summary = 'Accordion') =>
+        ({ commands }) =>
+          commands.insertVulseAccordionGroup(summary),
+    };
+  },
+});

package/src/admin/components/fields/vulse-accordion-group-extension.ts

@@ -0,0 +1,49 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import VulseAccordionGroupNodeView from './VulseAccordionGroupNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseAccordionGroup: {
+      insertVulseAccordionGroup: (summary?: string) => ReturnType;
+    };
+  }
+}
+
+export const VulseAccordionGroupExtension = Node.create({
+  name: 'vulseAccordionGroup',
+  group: 'block',
+  content: 'vulseAccordion+',
+  defining: true,
+  isolating: true,
+
+  parseHTML() {
+    return [{ tag: 'div[data-vulse-accordion-group]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['div', mergeAttributes(HTMLAttributes, { 'data-vulse-accordion-group': '' }), 0];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseAccordionGroupNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseAccordionGroup:
+        (summary = 'Accordion') =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            content: [
+              {
+                type: 'vulseAccordion',
+                attrs: { summary, open: false },
+                content: [{ type: 'paragraph' }],
+              },
+            ],
+          }),
+    };
+  },
+});

package/src/admin/components/fields/vulse-callout-extension.ts

@@ -0,0 +1,53 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import VulseCalloutNodeView from './VulseCalloutNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseCallout: {
+      insertVulseCallout: (tone?: 'info' | 'warn') => ReturnType;
+    };
+  }
+}
+
+export const VulseCalloutExtension = Node.create({
+  name: 'vulseCallout',
+  group: 'block',
+  content: 'block+',
+  defining: true,
+
+  addAttributes() {
+    return {
+      tone: {
+        default: 'info',
+        parseHTML: (el: HTMLElement) => el.getAttribute('data-tone') ?? 'info',
+        renderHTML: (attrs: { tone: string }) => ({ 'data-tone': attrs.tone }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'aside[data-vulse-callout]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['aside', mergeAttributes(HTMLAttributes, { 'data-vulse-callout': '' }), 0];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseCalloutNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseCallout:
+        (tone: 'info' | 'warn' = 'info') =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: { tone },
+            content: [{ type: 'paragraph' }],
+          }),
+    };
+  },
+});

package/src/admin/components/fields/vulse-iframe-extension.ts

@@ -0,0 +1,96 @@
+import { Node, mergeAttributes } from '@tiptap/core';
+import { VueNodeViewRenderer } from '@tiptap/vue-3';
+import { parseIframeCode, sanitizeMediaSrc } from './url-utils.js';
+import VulseIframeNodeView from './VulseIframeNodeView.vue';
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    vulseIframe: {
+      insertVulseIframe: (src?: string, title?: string) => ReturnType;
+    };
+  }
+}
+
+export const VulseIframeExtension = Node.create({
+  name: 'vulseIframe',
+  group: 'block',
+  atom: true,
+  selectable: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      code: {
+        default: null,
+        parseHTML: (element: HTMLElement) => element.outerHTML,
+        renderHTML: () => ({}),
+      },
+      src: {
+        default: null,
+        parseHTML: (element: HTMLElement) =>
+          sanitizeMediaSrc(element.getAttribute('src') ?? '') ?? null,
+        renderHTML: (attrs: { src?: string | null }) => (attrs.src ? { src: attrs.src } : {}),
+      },
+      title: {
+        default: 'Embedded content',
+        parseHTML: (element: HTMLElement) => element.getAttribute('title') ?? 'Embedded content',
+        renderHTML: (attrs: { title?: string | null }) => ({
+          title: attrs.title ?? 'Embedded content',
+        }),
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: 'iframe[data-vulse-embed="iframe"]' }, { tag: 'iframe[src]' }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const parsed = parseIframeCode(String(HTMLAttributes.code ?? ''));
+    const src = parsed?.src ?? (HTMLAttributes.src as string | null | undefined) ?? null;
+    const title =
+      parsed?.title ?? (HTMLAttributes.title as string | null | undefined) ?? 'Embedded content';
+    if (!src) return ['div', { 'data-vulse-embed': 'iframe' }];
+
+    return [
+      'iframe',
+      mergeAttributes(
+        {
+          'data-vulse-embed': 'iframe',
+          loading: parsed?.loading ?? 'lazy',
+          allowfullscreen: parsed?.allowfullscreen ? 'true' : 'true',
+          frameborder: parsed?.frameborder ?? '0',
+          src,
+          title,
+        },
+        parsed?.width ? { width: parsed.width } : {},
+        parsed?.height ? { height: parsed.height } : {},
+        parsed?.allow ? { allow: parsed.allow } : {},
+        parsed?.referrerpolicy ? { referrerpolicy: parsed.referrerpolicy } : {},
+        HTMLAttributes,
+      ),
+    ];
+  },
+
+  addNodeView() {
+    return VueNodeViewRenderer(VulseIframeNodeView);
+  },
+
+  addCommands() {
+    return {
+      insertVulseIframe:
+        (src = '', title = 'Embedded content') =>
+        ({ commands }) =>
+          commands.insertContent({
+            type: this.name,
+            attrs: {
+              code: src
+                ? `<iframe src="${sanitizeMediaSrc(src) ?? ''}" title="${title}"></iframe>`
+                : null,
+              src: sanitizeMediaSrc(src),
+              title,
+            },
+          }),
+    };
+  },
+});