@acms-subir/core 0.0.1

package/src/components/editor/extensions/cards.tsx

@@ -0,0 +1,488 @@
+import { Node } from '@tiptap/react';
+import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { useState } from 'react';
+
+// Card nodes shared by the post editor. renderHTML emits the public markup
+// (`.pc-*` classes, styled in src/styles/cards.css); parseHTML round-trips it
+// so saved bodyHtml — and legacy markdown img/iframe output — loads back in.
+
+// ---- image ----------------------------------------------------------------
+
+export const ImageCard = Node.create({
+  name: 'imageCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      src: { default: '' },
+      srcset: { default: '' },
+      sizes: { default: '' },
+      alt: { default: '' },
+      caption: { default: '' },
+      width: { default: 0 },
+      height: { default: 0 },
+      // display width on the public page: normal (content column), wide
+      // (breaks out past the column), full (edge-to-edge bleed)
+      display: { default: 'normal' },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure.pc-image',
+        getAttrs: (el) => {
+          const img = (el as HTMLElement).querySelector('img');
+          if (!img) return false;
+          return {
+            src: img.getAttribute('src') ?? '',
+            srcset: img.getAttribute('srcset') ?? '',
+            sizes: img.getAttribute('sizes') ?? '',
+            alt: img.getAttribute('alt') ?? '',
+            width: Number(img.getAttribute('width') ?? 0),
+            height: Number(img.getAttribute('height') ?? 0),
+            caption: (el as HTMLElement).querySelector('figcaption')?.textContent ?? '',
+            display: (el as HTMLElement).getAttribute('data-width') ?? 'normal',
+          };
+        },
+      },
+      {
+        // legacy markdown images upgrade into cards on load
+        tag: 'img[src]',
+        getAttrs: (el) => ({
+          src: (el as HTMLElement).getAttribute('src') ?? '',
+          alt: (el as HTMLElement).getAttribute('alt') ?? '',
+        }),
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    const img: [string, Record<string, string | number>] = [
+      'img',
+      {
+        src: a.src,
+        alt: a.alt,
+        loading: 'lazy',
+        ...(a.srcset ? { srcset: a.srcset, sizes: a.sizes } : {}),
+        ...(a.width ? { width: a.width, height: a.height } : {}),
+      },
+    ];
+    const fig = { class: 'pc-image', ...(a.display !== 'normal' ? { 'data-width': a.display } : {}) };
+    return a.caption
+      ? ['figure', fig, img, ['figcaption', {}, a.caption]]
+      : ['figure', fig, img];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ImageCardView);
+  },
+});
+
+const IMAGE_WIDTHS = ['normal', 'wide', 'full'] as const;
+const IMAGE_WIDTH_LABEL: Record<string, string> = { normal: 'Normal', wide: 'Wide', full: 'Full bleed' };
+
+function ImageCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  return (
+    <NodeViewWrapper className={`pe-card pe-imagecard w-${a.display} ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <button
+          type="button"
+          title="Image width on the page"
+          onClick={() => {
+            const i = IMAGE_WIDTHS.indexOf(a.display as (typeof IMAGE_WIDTHS)[number]);
+            updateAttributes({ display: IMAGE_WIDTHS[(i + 1) % IMAGE_WIDTHS.length] });
+          }}
+        >
+          {IMAGE_WIDTH_LABEL[a.display] ?? 'Normal'}
+        </button>
+        <button
+          type="button"
+          title="Alt text"
+          className={a.alt ? 'has-value' : ''}
+          onClick={() => {
+            const alt = window.prompt('Alt text (for accessibility and SEO)', a.alt);
+            if (alt !== null) updateAttributes({ alt });
+          }}
+        >
+          ALT
+        </button>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <img src={a.src} srcSet={a.srcset || undefined} sizes={a.sizes || undefined} alt={a.alt} />
+      <input
+        className="pe-caption"
+        type="text"
+        placeholder="Add a caption (optional)"
+        value={a.caption}
+        onChange={(e) => updateAttributes({ caption: e.target.value })}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+// ---- embed ----------------------------------------------------------------
+
+export interface EmbedInfo {
+  provider: string;
+  embedSrc: string;
+  aspect: boolean; // true → 16:9, false → fixed height
+}
+
+export function detectEmbed(raw: string): EmbedInfo | null {
+  let url: URL;
+  try {
+    url = new URL(raw.trim());
+  } catch {
+    return null;
+  }
+  const host = url.hostname.replace(/^www\./, '');
+  if (host === 'youtube.com' || host === 'm.youtube.com' || host === 'youtu.be' || host === 'youtube-nocookie.com') {
+    const id =
+      host === 'youtu.be'
+        ? url.pathname.slice(1).split('/')[0]
+        : url.pathname.startsWith('/shorts/') || url.pathname.startsWith('/embed/')
+          ? url.pathname.split('/')[2]
+          : url.searchParams.get('v');
+    if (id) return { provider: 'youtube', embedSrc: `https://www.youtube-nocookie.com/embed/${id}`, aspect: true };
+  }
+  if (host === 'vimeo.com' || host === 'player.vimeo.com') {
+    const id = url.pathname.split('/').filter(Boolean).pop();
+    if (id && /^\d+$/.test(id)) return { provider: 'vimeo', embedSrc: `https://player.vimeo.com/video/${id}`, aspect: true };
+  }
+  if (host === 'loom.com' && url.pathname.startsWith('/share/')) {
+    return { provider: 'loom', embedSrc: `https://www.loom.com/embed/${url.pathname.split('/')[2]}`, aspect: true };
+  }
+  if (host === 'codepen.io' && url.pathname.includes('/pen/')) {
+    return { provider: 'codepen', embedSrc: raw.replace('/pen/', '/embed/'), aspect: false };
+  }
+  if (url.protocol === 'https:') {
+    return { provider: 'iframe', embedSrc: raw, aspect: false };
+  }
+  return null;
+}
+
+export const EmbedCard = Node.create({
+  name: 'embedCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      url: { default: '' },
+      embedSrc: { default: '' },
+      provider: { default: '' },
+      height: { default: 400 },
+      caption: { default: '' },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure.pc-embed',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          const iframe = e.querySelector('iframe');
+          return {
+            url: e.getAttribute('data-url') ?? iframe?.getAttribute('src') ?? '',
+            embedSrc: iframe?.getAttribute('src') ?? '',
+            provider: e.getAttribute('data-provider') ?? 'iframe',
+            height: Number(e.getAttribute('data-height') ?? 400),
+            caption: e.querySelector('figcaption')?.textContent ?? '',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    const aspect = a.provider === 'youtube' || a.provider === 'vimeo' || a.provider === 'loom';
+    const frame: [string, Record<string, string>, ...unknown[]] = [
+      'div',
+      { class: 'pc-embed-frame', style: aspect ? 'aspect-ratio:16/9' : `height:${a.height}px` },
+      ['iframe', {
+        src: a.embedSrc, loading: 'lazy', allowfullscreen: '',
+        allow: 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture',
+      }],
+    ];
+    const attrs = { class: 'pc-embed', 'data-provider': a.provider, 'data-url': a.url, 'data-height': String(a.height) };
+    return a.caption
+      ? ['figure', attrs, frame, ['figcaption', {}, a.caption]]
+      : ['figure', attrs, frame];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(EmbedCardView);
+  },
+});
+
+function EmbedCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  const [draft, setDraft] = useState('');
+  const [error, setError] = useState('');
+
+  if (!a.embedSrc) {
+    return (
+      <NodeViewWrapper className={`pe-card pe-embedcard is-empty ${selected ? 'is-selected' : ''}`}>
+        <form
+          className="pe-embed-form"
+          contentEditable={false}
+          onSubmit={(e) => {
+            e.preventDefault();
+            const info = detectEmbed(draft);
+            if (!info) return setError('That doesn’t look like an embeddable URL.');
+            updateAttributes({ url: draft.trim(), embedSrc: info.embedSrc, provider: info.provider });
+          }}
+        >
+          <span className="pe-embed-label">Embed</span>
+          <input
+            autoFocus
+            type="url"
+            placeholder="Paste a YouTube, Vimeo, Loom, CodePen or iframe URL…"
+            value={draft}
+            onChange={(e) => { setDraft(e.target.value); setError(''); }}
+            onKeyDown={(e) => { if (e.key === 'Escape') deleteNode(); }}
+          />
+          <button type="submit" className="pe-btn primary sm">Embed</button>
+          {error && <span className="pe-embed-error">{error}</span>}
+        </form>
+      </NodeViewWrapper>
+    );
+  }
+
+  const aspect = a.provider === 'youtube' || a.provider === 'vimeo' || a.provider === 'loom';
+  return (
+    <NodeViewWrapper className={`pe-card pe-embedcard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">{a.provider}</span>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div className="pc-embed-frame" style={aspect ? { aspectRatio: '16/9' } : { height: a.height }}>
+        <iframe src={a.embedSrc} title={a.url} allowFullScreen />
+      </div>
+      <input
+        className="pe-caption"
+        type="text"
+        placeholder="Add a caption (optional)"
+        value={a.caption}
+        onChange={(e) => updateAttributes({ caption: e.target.value })}
+      />
+    </NodeViewWrapper>
+  );
+}
+
+// ---- button ---------------------------------------------------------------
+
+export const ButtonCard = Node.create({
+  name: 'buttonCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return {
+      label: { default: '' },
+      href: { default: '' },
+      align: { default: 'center' },
+    };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.pc-buttoncard',
+        getAttrs: (el) => {
+          const e = el as HTMLElement;
+          const link = e.querySelector('a');
+          return {
+            label: link?.textContent ?? '',
+            href: link?.getAttribute('href') ?? '',
+            align: e.getAttribute('data-align') ?? 'center',
+          };
+        },
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    const a = node.attrs;
+    return [
+      'div',
+      { class: 'pc-buttoncard', 'data-align': a.align, style: `text-align:${a.align}` },
+      ['a', { class: 'pc-btncard', href: a.href }, a.label || 'Button'],
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(ButtonCardView);
+  },
+});
+
+function ButtonCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const a = node.attrs;
+  return (
+    <NodeViewWrapper className={`pe-card pe-buttoncard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <button
+          type="button"
+          onClick={() => updateAttributes({ align: a.align === 'center' ? 'left' : 'center' })}
+          title="Toggle alignment"
+        >
+          {a.align === 'center' ? 'Centered' : 'Left'}
+        </button>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      <div className="pe-button-fields" contentEditable={false}>
+        <input
+          type="text"
+          placeholder="Button label"
+          value={a.label}
+          onChange={(e) => updateAttributes({ label: e.target.value })}
+        />
+        <input
+          type="url"
+          placeholder="https://…"
+          value={a.href}
+          onChange={(e) => updateAttributes({ href: e.target.value })}
+        />
+      </div>
+      <div className="pc-buttoncard" style={{ textAlign: a.align as 'center' | 'left' }}>
+        <span className="pc-btncard">{a.label || 'Button'}</span>
+      </div>
+    </NodeViewWrapper>
+  );
+}
+
+// ---- callout --------------------------------------------------------------
+
+const CALLOUT_EMOJI = ['💡', '⚠️', '📌', '🔥', '✅', '❓', '🎉'];
+
+export const Callout = Node.create({
+  name: 'callout',
+  group: 'block',
+  content: 'inline*',
+  defining: true,
+
+  addAttributes() {
+    return { emoji: { default: '💡', renderHTML: () => ({}) } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'aside.pc-callout',
+        getAttrs: (el) => ({ emoji: (el as HTMLElement).getAttribute('data-emoji') ?? '💡' }),
+        contentElement: '.pc-callout-body',
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    return [
+      'aside',
+      { class: 'pc-callout', 'data-emoji': node.attrs.emoji },
+      ['span', { class: 'pc-callout-emoji' }, node.attrs.emoji],
+      ['div', { class: 'pc-callout-body' }, 0],
+    ];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(CalloutView);
+  },
+});
+
+function CalloutView({ node, updateAttributes }: NodeViewProps) {
+  return (
+    <NodeViewWrapper className="pe-callout pc-callout">
+      <button
+        type="button"
+        className="pc-callout-emoji"
+        contentEditable={false}
+        title="Change emoji"
+        onClick={() => {
+          const i = CALLOUT_EMOJI.indexOf(node.attrs.emoji);
+          updateAttributes({ emoji: CALLOUT_EMOJI[(i + 1) % CALLOUT_EMOJI.length] });
+        }}
+      >
+        {node.attrs.emoji}
+      </button>
+      <NodeViewContent className="pc-callout-body" />
+    </NodeViewWrapper>
+  );
+}
+
+// ---- raw HTML -------------------------------------------------------------
+
+export const HtmlCard = Node.create({
+  name: 'htmlCard',
+  group: 'block',
+  atom: true,
+  draggable: true,
+
+  addAttributes() {
+    return { html: { default: '' } };
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'div.pc-html',
+        getAttrs: (el) => ({ html: (el as HTMLElement).innerHTML }),
+      },
+    ];
+  },
+
+  renderHTML({ node }) {
+    // Serialized client-side only (save runs in the browser), so a real DOM
+    // node lets the raw HTML pass through ProseMirror's serializer intact.
+    if (typeof document !== 'undefined') {
+      const el = document.createElement('div');
+      el.className = 'pc-html';
+      el.innerHTML = node.attrs.html;
+      return { dom: el };
+    }
+    return ['div', { class: 'pc-html' }];
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(HtmlCardView);
+  },
+});
+
+function HtmlCardView({ node, updateAttributes, deleteNode, selected }: NodeViewProps) {
+  const [editing, setEditing] = useState(!node.attrs.html);
+  return (
+    <NodeViewWrapper className={`pe-card pe-htmlcard ${selected ? 'is-selected' : ''}`} data-drag-handle>
+      <div className="pe-card-tools" contentEditable={false}>
+        <span className="pe-provider">HTML</span>
+        <button type="button" onClick={() => setEditing((v) => !v)}>{editing ? 'Preview' : 'Edit'}</button>
+        <button type="button" title="Remove" onClick={() => deleteNode()}>✕</button>
+      </div>
+      {editing ? (
+        <textarea
+          className="pe-html-input"
+          contentEditable={false}
+          rows={6}
+          placeholder="<div>Raw HTML — rendered as-is on the public page</div>"
+          value={node.attrs.html}
+          onChange={(e) => updateAttributes({ html: e.target.value })}
+        />
+      ) : (
+        <iframe
+          className="pe-html-preview"
+          sandbox="allow-scripts"
+          title="HTML preview"
+          srcDoc={`<style>body{margin:8px;font-family:Inter,system-ui,sans-serif;color:#1a1d25;background:#f4f5f8}</style>${node.attrs.html}`}
+        />
+      )}
+    </NodeViewWrapper>
+  );
+}

package/src/components/editor/extensions/codeBlock.tsx

@@ -0,0 +1,70 @@
+import { CodeBlockLowlight } from '@tiptap/extension-code-block-lowlight';
+import { NodeViewWrapper, NodeViewContent, ReactNodeViewRenderer } from '@tiptap/react';
+import type { NodeViewProps } from '@tiptap/react';
+import { createLowlight, common } from 'lowlight';
+
+// Highlighted code block. lowlight's `common` grammar set is shared with the
+// server-side pass (src/lib/highlightCode.ts) so the editor and the published
+// page tokenize identically. renderHTML stays the stock
+// `<pre><code class="language-x">` so saved bodyHtml round-trips.
+
+const lowlight = createLowlight(common);
+
+// Curated subset of lowlight `common` — value must be a registered grammar
+// name ('' = plain text, no highlighting).
+const LANGUAGES: [value: string, label: string][] = [
+  ['', 'Plain text'],
+  ['xml', 'HTML'],
+  ['css', 'CSS'],
+  ['javascript', 'JavaScript'],
+  ['typescript', 'TypeScript'],
+  ['json', 'JSON'],
+  ['bash', 'Bash'],
+  ['python', 'Python'],
+  ['sql', 'SQL'],
+  ['go', 'Go'],
+  ['rust', 'Rust'],
+  ['php', 'PHP'],
+  ['ruby', 'Ruby'],
+  ['java', 'Java'],
+  ['c', 'C'],
+  ['cpp', 'C++'],
+  ['csharp', 'C#'],
+  ['swift', 'Swift'],
+  ['kotlin', 'Kotlin'],
+  ['yaml', 'YAML'],
+  ['markdown', 'Markdown'],
+  ['diff', 'Diff'],
+];
+
+function CodeBlockView({ node, updateAttributes }: NodeViewProps) {
+  const language = node.attrs.language ?? '';
+  return (
+    <NodeViewWrapper className="pe-codeblock">
+      <select
+        className="pe-codeblock-lang"
+        contentEditable={false}
+        value={LANGUAGES.some(([v]) => v === language) ? language : ''}
+        onChange={(e) => updateAttributes({ language: e.target.value || null })}
+      >
+        {LANGUAGES.map(([value, label]) => (
+          <option key={value} value={value}>
+            {label}
+          </option>
+        ))}
+      </select>
+      <pre>
+        <NodeViewContent as="code" />
+      </pre>
+    </NodeViewWrapper>
+  );
+}
+
+export const CodeBlock = CodeBlockLowlight.extend({
+  addNodeView() {
+    return ReactNodeViewRenderer(CodeBlockView);
+  },
+}).configure({
+  lowlight,
+  defaultLanguage: null,
+});