@novacraft-engineering/mailbox 0.1.0 → 0.2.1

package/app/mail/RichEditor.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
-import { EditorContent, NodeViewWrapper, ReactNodeViewRenderer, useEditor, type Editor, type NodeViewProps } from '@tiptap/react'
+import { useCallback, useEffect, useRef, useState, useSyncExternalStore } from 'react'
+import { EditorContent, Extension, NodeViewWrapper, ReactNodeViewRenderer, useEditor, type Editor, type NodeViewProps } from '@tiptap/react'
 import StarterKit from '@tiptap/starter-kit'
 import Underline from '@tiptap/extension-underline'
 import Link from '@tiptap/extension-link'
@@ -9,8 +9,8 @@ import Image from '@tiptap/extension-image'
 import { CLIENT_BRAND } from '@/lib/brand.client'
 import TextAlign from '@tiptap/extension-text-align'
 import { FontFamily, FontSize, TextStyle } from '@tiptap/extension-text-style'
-import { BUILTIN_FONTS, FONT_SIZES, fontStack, type BaseFont } from '@/lib/fonts'
-import MailSelect from './MailSelect'
+import { LINE_SPACINGS, BUILTIN_FONTS, FONT_SIZES, fontStack, lineSpacingOf, paragraphGap, type BaseFont } from '@/lib/fonts'
+import MailSelect, { GLYPH } from './MailSelect'
 import { Color } from '@tiptap/extension-color'
 import Highlight from '@tiptap/extension-highlight'
 import { Table, TableCell, TableHeader, TableRow } from '@tiptap/extension-table'
@@ -19,6 +19,19 @@ import styles from './page.module.css'
 
 const TEXT_COLOURS = ['#030712', '#b91c1c', '#1d4ed8', '#047857', '#b45309', '#6d28d9', '#6b7280']
 const HIGHLIGHTS = ['#FEF08A', '#BBF7D0', '#BFDBFE', '#FBCFE8', '#FED7AA']
+const PHONE = '(max-width: 720px)'
+function usePhone(): boolean {
+  return useSyncExternalStore(
+    onChange => {
+      const media = window.matchMedia(PHONE)
+      media.addEventListener('change', onChange)
+      return () => media.removeEventListener('change', onChange)
+    },
+    () => window.matchMedia(PHONE).matches,
+    () => false,
+  )
+}
+
 function Group({ children }: { children: React.ReactNode }) {
   return <div className={styles.rteGroup}>{children}</div>
 }
@@ -576,9 +589,15 @@ function TableTools({ editor }: { editor: Editor }) {
 
 type Pop = 'link' | 'image' | 'table' | null
 
-function Toolbar({ editor, uploadImage, fonts = [] }: { editor: Editor; uploadImage?: (file: File) => Promise<string>; fonts?: string[] }) {
+function Toolbar({ editor, uploadImage, fonts = [], baseFont }: { editor: Editor; uploadImage?: (file: File) => Promise<string>; fonts?: string[]; baseFont?: BaseFont }) {
   const [pop, setPop] = useState<Pop>(null)
   const popRef = useRef<HTMLDivElement>(null)
+  const phone = usePhone()
+  const [palette, setPalette] = useState(false)
+  const currentFamily = (editor.getAttributes('textStyle').fontFamily as string | undefined)?.replace(/^['"]|['"]$/g, '') ?? ''
+  const defaultFamily = baseFont?.family || 'Arial'
+  const defaultSize = (baseFont?.size || '15px').replace('px', '')
+  const defaultSpacing = String(lineSpacingOf(baseFont))
 
   useEffect(() => {
     if (!pop) return
@@ -606,14 +625,16 @@ function Toolbar({ editor, uploadImage, fonts = [] }: { editor: Editor; uploadIm
   }, [editor])
 
   return (
+    <>
     <div className={styles.rteToolbar} role="toolbar" aria-label="Formatting">
       <Group>
         <MailSelect
           buttonClassName={styles.rteSelect}
           ariaLabel="Font"
-          placeholder="Font"
-          value={(editor.getAttributes('textStyle').fontFamily as string | undefined)?.replace(/^['"]|['"]$/g, '') ?? ''}
-          options={[{ value: '', label: 'Default font' }, ...[...BUILTIN_FONTS, ...fonts.filter(font => !BUILTIN_FONTS.includes(font))].map(font => ({ value: font, label: font }))]}
+          label="Font"
+          prefix={GLYPH.font}
+          value={currentFamily}
+          options={[{ value: '', label: `${defaultFamily} (default)`, closed: defaultFamily }, ...[...BUILTIN_FONTS, ...fonts.filter(font => !BUILTIN_FONTS.includes(font))].map(font => ({ value: font, label: font }))]}
           optionStyle={font => (font ? { fontFamily: `'${font}', Arial, sans-serif` } : {})}
           onChange={family => {
             if (family) editor.chain().focus().setFontFamily(family).run()
@@ -623,16 +644,33 @@ function Toolbar({ editor, uploadImage, fonts = [] }: { editor: Editor; uploadIm
         <MailSelect
           buttonClassName={`${styles.rteSelect} ${styles.rteSizeSelect}`}
           ariaLabel="Font size"
-          placeholder="Size"
+          label="Size"
+          placeholder={defaultSize}
+          prefix={GLYPH.size}
           editable
           value={(editor.getAttributes('textStyle').fontSize as string | undefined) ?? ''}
-          options={[{ value: '', label: 'Default' }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
+          options={[{ value: '', label: `${defaultSize} (default)`, closed: defaultSize }, ...FONT_SIZES.map(size => ({ value: size, label: size.replace('px', '') }))]}
           onChange={raw => {
             const size = /^\d+(\.\d+)?$/.test(raw) ? `${raw}px` : raw
-            if (!size || size === 'Default') editor.chain().focus().unsetFontSize().run()
+            if (!size || /default/i.test(size)) editor.chain().focus().unsetFontSize().run()
             else if (/^\d+(\.\d+)?(px|pt|em|rem|%)$/.test(size)) editor.chain().focus().setFontSize(size).run()
           }}
         />
+        <MailSelect
+          buttonClassName={`${styles.rteSelect} ${styles.rteSizeSelect}`}
+          ariaLabel="Line height"
+          label="Line height"
+          placeholder={defaultSpacing}
+          prefix={GLYPH.spacing}
+          editable
+          value={editor.getAttributes('paragraph').lineSpacing ? String(editor.getAttributes('paragraph').lineSpacing) : ''}
+          options={[{ value: '', label: `${defaultSpacing} (default)`, closed: defaultSpacing }, ...LINE_SPACINGS.map(spacing => ({ value: String(spacing), label: String(spacing) }))]}
+          onChange={raw => {
+            const spacing = parseFloat(raw)
+            if (!raw.trim() || /default/i.test(raw)) editor.chain().focus().updateAttributes('paragraph', { lineSpacing: null }).run()
+            else if (isSpacing(spacing)) editor.chain().focus().updateAttributes('paragraph', { lineSpacing: spacing }).run()
+          }}
+        />
       </Group>
 
       <Group>
@@ -650,46 +688,57 @@ function Toolbar({ editor, uploadImage, fonts = [] }: { editor: Editor; uploadIm
         </Btn>
       </Group>
 
-      <Group>
-        <span className={styles.rteSwatches} role="group" aria-label="Text colour">
-          {TEXT_COLOURS.map(colour => (
-            <button
-              key={colour}
-              type="button"
-              title={`Text ${colour}`}
-              aria-label={`Text colour ${colour}`}
-              className={styles.rteSwatch}
-              style={{ background: colour }}
-              onMouseDown={event => event.preventDefault()}
-              onClick={() => editor.chain().focus().setColor(colour).run()}
-            />
-          ))}
-          <label className={styles.rteSwatchCustom} title="Any other colour">
-            <input
-              type="color"
-              aria-label="Choose any text colour"
-              onChange={event => editor.chain().focus().setColor(event.target.value).run()}
-            />
-          </label>
-        </span>
-        <span className={styles.rteSwatches} role="group" aria-label="Highlight">
-          {HIGHLIGHTS.map(colour => (
-            <button
-              key={colour}
-              type="button"
-              title={`Highlight ${colour}`}
-              aria-label={`Highlight ${colour}`}
-              className={`${styles.rteSwatch} ${styles.rteSwatchHi}`}
-              style={{ background: colour }}
-              onMouseDown={event => event.preventDefault()}
-              onClick={() => editor.chain().focus().toggleHighlight({ color: colour }).run()}
-            />
-          ))}
-        </span>
-        <Btn title="Clear formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}>
-          ✕
-        </Btn>
-      </Group>
+      {phone ? (
+        <Group>
+          <Btn title="Colours" active={palette} onClick={() => setPalette(open => !open)}>
+            <span className={styles.rteColourDot} aria-hidden />
+          </Btn>
+          <Btn title="Clear formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}>
+            ✕
+          </Btn>
+        </Group>
+      ) : (
+        <Group>
+          <span className={styles.rteSwatches} role="group" aria-label="Text colour">
+            {TEXT_COLOURS.map(colour => (
+              <button
+                key={colour}
+                type="button"
+                title={`Text ${colour}`}
+                aria-label={`Text colour ${colour}`}
+                className={styles.rteSwatch}
+                style={{ background: colour }}
+                onMouseDown={event => event.preventDefault()}
+                onClick={() => editor.chain().focus().setColor(colour).run()}
+              />
+            ))}
+            <label className={styles.rteSwatchCustom} title="Any other colour">
+              <input
+                type="color"
+                aria-label="Choose any text colour"
+                onChange={event => editor.chain().focus().setColor(event.target.value).run()}
+              />
+            </label>
+          </span>
+          <span className={styles.rteSwatches} role="group" aria-label="Highlight">
+            {HIGHLIGHTS.map(colour => (
+              <button
+                key={colour}
+                type="button"
+                title={`Highlight ${colour}`}
+                aria-label={`Highlight ${colour}`}
+                className={`${styles.rteSwatch} ${styles.rteSwatchHi}`}
+                style={{ background: colour }}
+                onMouseDown={event => event.preventDefault()}
+                onClick={() => editor.chain().focus().toggleHighlight({ color: colour }).run()}
+              />
+            ))}
+          </span>
+          <Btn title="Clear formatting" onClick={() => editor.chain().focus().unsetAllMarks().clearNodes().run()}>
+            ✕
+          </Btn>
+        </Group>
+      )}
 
       <Group>
         <Btn title="Bullet list" active={editor.isActive('bulletList')} onClick={() => editor.chain().focus().toggleBulletList().run()}>
@@ -750,9 +799,73 @@ function Toolbar({ editor, uploadImage, fonts = [] }: { editor: Editor; uploadIm
         </Btn>
       </Group>
     </div>
+    {phone && (
+      <div className={`${styles.rtePalette} ${palette ? styles.rtePaletteOpen : ''}`} aria-hidden={!palette}>
+        <span className={styles.rtePaletteGroup} role="group" aria-label="Text colour">
+          {TEXT_COLOURS.slice(0, 6).map(colour => (
+            <button
+              key={colour}
+              type="button"
+              title={`Text ${colour}`}
+              aria-label={`Text colour ${colour}`}
+              className={styles.rteSwatch}
+              style={{ background: colour }}
+              tabIndex={palette ? 0 : -1}
+              onMouseDown={event => event.preventDefault()}
+              onClick={() => editor.chain().focus().setColor(colour).run()}
+            />
+          ))}
+          <label className={styles.rteSwatchCustom} title="Any other colour">
+            <input type="color" aria-label="Choose any text colour" tabIndex={palette ? 0 : -1} onChange={event => editor.chain().focus().setColor(event.target.value).run()} />
+          </label>
+        </span>
+        <span className={styles.rtePaletteGroup} role="group" aria-label="Highlight">
+          {HIGHLIGHTS.slice(0, 4).map(colour => (
+            <button
+              key={colour}
+              type="button"
+              title={`Highlight ${colour}`}
+              aria-label={`Highlight ${colour}`}
+              className={`${styles.rteSwatch} ${styles.rteSwatchHi}`}
+              style={{ background: colour }}
+              tabIndex={palette ? 0 : -1}
+              onMouseDown={event => event.preventDefault()}
+              onClick={() => editor.chain().focus().toggleHighlight({ color: colour }).run()}
+            />
+          ))}
+        </span>
+      </div>
+    )}
+    </>
   )
 }
 
+const isSpacing = (value: number) => Number.isFinite(value) && value >= 0.8 && value <= 3
+
+const LineSpacing = Extension.create({
+  name: 'lineSpacing',
+  addGlobalAttributes() {
+    return [
+      {
+        types: ['paragraph'],
+        attributes: {
+          lineSpacing: {
+            default: null,
+            parseHTML: (element: HTMLElement) => {
+              const value = parseFloat(element.style.lineHeight)
+              return isSpacing(value) ? value : null
+            },
+            renderHTML: (attributes: Record<string, unknown>) => {
+              const value = attributes.lineSpacing as number | null
+              return value ? { style: `line-height:${value};margin:0 0 ${paragraphGap(value)};` } : {}
+            },
+          },
+        },
+      },
+    ]
+  },
+})
+
 export default function RichEditor({
   html,
   onChange,
@@ -811,6 +924,7 @@ export default function RichEditor({
       TextStyle,
       FontFamily,
       FontSize,
+      LineSpacing,
       Color,
       Highlight.configure({ multicolor: true }),
       Link.configure({ openOnClick: false, autolink: true }),
@@ -849,10 +963,10 @@ export default function RichEditor({
   return (
     <div
       className={styles.rte}
-      style={{ '--rte-font': fontStack(baseFont?.family ?? ''), '--rte-size': baseFont?.size || '15px' } as React.CSSProperties}
+      style={{ '--rte-font': fontStack(baseFont?.family ?? ''), '--rte-size': baseFont?.size || '15px', '--rte-lead': String(lineSpacingOf(baseFont)), '--rte-gap': paragraphGap(lineSpacingOf(baseFont)) } as React.CSSProperties}
     >
       {fontFaceCss && <style>{fontFaceCss}</style>}
-      <Toolbar editor={editor} uploadImage={uploadImage} fonts={fonts} />
+      <Toolbar editor={editor} uploadImage={uploadImage} fonts={fonts} baseFont={baseFont} />
       <EditorContent editor={editor} className={styles.rteContent} />
     </div>
   )

package/app/mail/Ticker.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { useEffect, useRef, type ReactNode } from 'react'
+import styles from './page.module.css'
+
+/**
+ * One line of text that, when it does not fit, glides back and forth instead of ending in
+ * an ellipsis. Measured on mount and whenever the host or its text changes size.
+ */
+export default function Ticker({ className, title, children }: { className?: string; title?: string; children: ReactNode }) {
+  const host = useRef<HTMLSpanElement>(null)
+  const text = useRef<HTMLSpanElement>(null)
+  useEffect(() => {
+    const outer = host.current
+    const inner = text.current
+    if (!outer || !inner) return
+    const measure = () => {
+      const shift = inner.scrollWidth - outer.clientWidth
+      if (shift > 4) {
+        outer.dataset.ticker = 'on'
+        outer.style.setProperty('--ticker-shift', `${shift}px`)
+        outer.style.setProperty('--ticker-duration', `${Math.min(18, Math.max(6, shift / 20))}s`)
+        outer.style.setProperty('--ticker-delay', `-${(inner.textContent?.length ?? 0) % 7}s`)
+      } else {
+        delete outer.dataset.ticker
+        outer.style.removeProperty('--ticker-shift')
+      }
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(outer)
+    observer.observe(inner)
+    return () => observer.disconnect()
+  }, [children])
+  return (
+    <span ref={host} className={`${className ?? ''} ${styles.tickerHost}`} title={title}>
+      <span ref={text} className={styles.tickerText}>{children}</span>
+    </span>
+  )
+}