@acms-subir/core 0.1.0 → 0.3.0

package/src/components/editor/LivePane.tsx

@@ -0,0 +1,122 @@
+import { useEffect, useRef, useState } from 'react';
+
+// Side-by-side live preview. Reloads on every autosave (tick), keeps the
+// reader's scroll position across reloads, briefly highlights the first
+// block whose text changed, and follows the writer's caret: `focusText` is
+// the text of the block being edited, matched against the rendered page.
+// The iframe is same-origin (/preview/…), so reading its DOM is allowed.
+
+const BLOCKS = 'main :is(p, h1, h2, h3, h4, li, blockquote, pre, figcaption, td)';
+const DEVICES = [
+  { key: 'desktop', label: 'Desktop width', d: 'M3 4h18v12H3zM8 20h8M12 16v4' },
+  { key: 'phone', label: 'Phone width', d: 'M7 2h10v20H7zM11 18h2' },
+] as const;
+const FLASH_BG = 'rgb(238 93 32 / 12%)';
+
+const norm = (s: string | null | undefined) => (s ?? '').replace(/\s+/g, ' ').trim();
+
+interface Props {
+  src: string;
+  // public path shown in the header, e.g. /posts/my-slug
+  path: string;
+  tick: number;
+  focusText: string;
+}
+
+export function LivePane({ src, path, tick, focusText }: Props) {
+  const [device, setDevice] = useState<'desktop' | 'phone'>(() => {
+    try { return localStorage.getItem('pe-split-device') === 'phone' ? 'phone' : 'desktop'; } catch { return 'desktop'; }
+  });
+  const [updatedAt, setUpdatedAt] = useState(Date.now());
+  const [, force] = useState(0);
+  const frame = useRef<HTMLIFrameElement>(null);
+  const prevTexts = useRef<string[] | null>(null);
+  const scrollY = useRef(0);
+
+  // relative "updated" label ticks every 10s
+  useEffect(() => {
+    const t = setInterval(() => force((n) => n + 1), 10_000);
+    return () => clearInterval(t);
+  }, []);
+
+  const blocks = () => {
+    let doc: Document | null = null;
+    try { doc = frame.current?.contentDocument ?? null; } catch { doc = null; }
+    return doc ? [...doc.querySelectorAll<HTMLElement>(BLOCKS)] : [];
+  };
+
+  const flash = (el: HTMLElement) => {
+    el.style.transition = 'background-color 1.6s ease, box-shadow 1.6s ease';
+    el.style.backgroundColor = FLASH_BG;
+    el.style.boxShadow = `0 0 0 5px ${FLASH_BG}`;
+    el.style.borderRadius = '4px';
+    setTimeout(() => { el.style.backgroundColor = 'transparent'; el.style.boxShadow = '0 0 0 5px transparent'; }, 900);
+  };
+
+  const reveal = (el: HTMLElement) => {
+    const win = frame.current?.contentWindow;
+    if (!win) return;
+    const r = el.getBoundingClientRect();
+    if (r.top < 0 || r.bottom > win.innerHeight) el.scrollIntoView({ block: 'center', behavior: 'smooth' });
+  };
+
+  // follow the caret: scroll the block being edited into view
+  useEffect(() => {
+    const want = norm(focusText);
+    if (want.length < 3) return;
+    const head = want.slice(0, 40);
+    const el = blocks().find((b) => {
+      const t = norm(b.textContent);
+      return t.length >= 3 && (t === want || t.startsWith(head) || want.startsWith(t.slice(0, 40)));
+    });
+    if (el) reveal(el);
+  }, [focusText]);
+
+  const onLoad = () => {
+    setUpdatedAt(Date.now());
+    const all = blocks();
+    if (!frame.current?.contentWindow) return;
+    const texts = all.map((b) => b.textContent?.trim() ?? '');
+    const prev = prevTexts.current;
+    prevTexts.current = texts;
+    const win = frame.current.contentWindow;
+    // the iframe is recreated on every autosave: restore where the reader was
+    win.scrollTo(0, scrollY.current);
+    win.addEventListener('scroll', () => { scrollY.current = win.scrollY; }, { passive: true });
+    if (!prev) return;
+    const idx = texts.findIndex((t, i) => t !== prev[i]);
+    if (idx < 0) return;
+    flash(all[idx]);
+    reveal(all[idx]);
+  };
+
+  const pick = (d: 'desktop' | 'phone') => {
+    setDevice(d);
+    try { localStorage.setItem('pe-split-device', d); } catch { /* private mode */ }
+  };
+  const secs = Math.round((Date.now() - updatedAt) / 1000);
+  const ago = secs < 10 ? 'just now' : secs < 60 ? `${Math.floor(secs / 10) * 10}s ago` : `${Math.floor(secs / 60)}m ago`;
+
+  return (
+    <aside className="pe-splitpane" aria-label="Live preview">
+      <div className="pe-split-bar">
+        <span className="pe-live" title={`Updated ${ago}`}><i />Live</span>
+        <span className="pe-live-path">{path}</span>
+        <small className="pe-live-ago">{ago}</small>
+        <div className="pe-seg" role="group" aria-label="Preview width">
+          {DEVICES.map((d) => (
+            <button key={d.key} type="button" aria-pressed={device === d.key} title={d.label} aria-label={d.label} onClick={() => pick(d.key)}>
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d={d.d} /></svg>
+            </button>
+          ))}
+        </div>
+        <a className="pe-btn ghost sm pe-icon-btn" href={src} target="_blank" rel="noopener" title="Open preview in a new tab" aria-label="Open preview in a new tab">
+          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5" /></svg>
+        </a>
+      </div>
+      <div className={`pe-split-stage ${device}`}>
+        <iframe ref={frame} key={tick} src={src} title="Live preview" onLoad={onLoad} />
+      </div>
+    </aside>
+  );
+}

package/src/components/editor/MobileToolbar.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import type { Editor } from '@tiptap/react';
+
+// Phone formatting bar, pinned just above the on-screen keyboard. The layout
+// viewport doesn't shrink when the keyboard opens (iOS), so the bar follows
+// visualViewport instead. Only shown on touch devices while the body has
+// focus; desktop keeps the selection bubble menu.
+
+interface Props {
+  editor: Editor;
+  onLink: () => void;
+  onImage: () => void;
+}
+
+const I = {
+  plus: 'M12 5v14M5 12h14',
+  h: 'M5 5v14M15 5v14M5 12h10M19 10v9',
+  list: 'M9 6h11M9 12h11M9 18h11M4 6h.01M4 12h.01M4 18h.01',
+  quote: 'M7 7h4v4c0 3-2 5-4 6M14 7h4v4c0 3-2 5-4 6',
+  link: 'M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1.5 1.5M14 10a4 4 0 0 0-6 0l-3 3a4 4 0 0 0 6 6l1.5-1.5',
+  image: 'M3 5h18v14H3zM3 15l5-5 4 4 3-3 6 6',
+  undo: 'M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3',
+  down: 'M6 9l6 6 6-6',
+};
+const Svg = ({ d }: { d: string }) => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round"><path d={d} /></svg>
+);
+
+export function MobileToolbar({ editor, onLink, onImage }: Props) {
+  const [touch] = useState(() => typeof matchMedia !== 'undefined' && matchMedia('(pointer: coarse)').matches);
+  const [focused, setFocused] = useState(false);
+  const [bottom, setBottom] = useState(0);
+  const [, rerender] = useState(0);
+
+  useEffect(() => {
+    if (!touch) return;
+    const onFocus = () => setFocused(true);
+    const onBlur = () => setTimeout(() => setFocused(editor.isFocused), 120);
+    const onTx = () => rerender((n) => n + 1);
+    editor.on('focus', onFocus);
+    editor.on('blur', onBlur);
+    editor.on('transaction', onTx);
+    const vv = window.visualViewport;
+    const place = () => {
+      if (!vv) return;
+      setBottom(Math.max(0, window.innerHeight - (vv.height + vv.offsetTop)));
+    };
+    vv?.addEventListener('resize', place);
+    vv?.addEventListener('scroll', place);
+    place();
+    return () => {
+      editor.off('focus', onFocus);
+      editor.off('blur', onBlur);
+      editor.off('transaction', onTx);
+      vv?.removeEventListener('resize', place);
+      vv?.removeEventListener('scroll', place);
+    };
+  }, [editor, touch]);
+
+  if (!touch || !focused) return null;
+
+  // keep focus in the editor: act on mousedown/touch before blur fires
+  const btn = (key: string, label: string, active: boolean, run: () => void, child: React.ReactNode) => (
+    <button
+      key={key}
+      type="button"
+      aria-label={label}
+      aria-pressed={active}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={run}
+    >
+      {child}
+    </button>
+  );
+  const c = () => editor.chain().focus();
+
+  return (
+    <div className="pe-mtoolbar" style={{ bottom }} role="toolbar" aria-label="Formatting">
+      {btn('insert', 'Insert block', false, () => c().insertContent('/').run(), <Svg d={I.plus} />)}
+      <span className="pe-mtoolbar-sep" />
+      {btn('bold', 'Bold', editor.isActive('bold'), () => c().toggleBold().run(), <b>B</b>)}
+      {btn('italic', 'Italic', editor.isActive('italic'), () => c().toggleItalic().run(), <i>I</i>)}
+      {btn('h2', 'Heading', editor.isActive('heading', { level: 2 }), () => c().toggleHeading({ level: 2 }).run(), <Svg d={I.h} />)}
+      {btn('list', 'Bulleted list', editor.isActive('bulletList'), () => c().toggleBulletList().run(), <Svg d={I.list} />)}
+      {btn('quote', 'Quote', editor.isActive('blockquote'), () => c().toggleBlockquote().run(), <Svg d={I.quote} />)}
+      {btn('link', 'Link', editor.isActive('link'), onLink, <Svg d={I.link} />)}
+      {btn('image', 'Image', false, onImage, <Svg d={I.image} />)}
+      {btn('undo', 'Undo', false, () => c().undo().run(), <Svg d={I.undo} />)}
+      <span className="pe-mtoolbar-sep" />
+      {btn('done', 'Hide keyboard', false, () => editor.commands.blur(), <Svg d={I.down} />)}
+    </div>
+  );
+}