@devbycrux/editor 0.1.0

package/src/text/__tests__/TextFormattingToolbar.test.tsx

@@ -0,0 +1,416 @@
+// @vitest-environment jsdom
+/// <reference types="vitest/globals" />
+import { render, screen, fireEvent } from '@testing-library/react'
+import {
+  isBold,
+  isItalic,
+  nextCase,
+  isStyleProp,
+  isColorProp,
+  nonColorTextEntries,
+  TextFormattingToolbar,
+} from '../TextFormattingToolbar'
+import type { OverlayElement } from '../../types'
+
+function makeOverlay(props: Record<string, unknown> = {}): OverlayElement {
+  return {
+    id: 'el-1',
+    type: 'overlay',
+    frame: 0,
+    x: 0,
+    y: 0,
+    w: 200,
+    h: 100,
+    rotation: 0,
+    overlay: { template: 'assets/test.jsx', props },
+  }
+}
+
+const SLIDE_ID = 'slide-1'
+
+function renderToolbar(
+  props: Record<string, unknown>,
+  updateOverlayProp: ReturnType<typeof vi.fn>,
+) {
+  return render(
+    <TextFormattingToolbar
+      slideId={SLIDE_ID}
+      element={makeOverlay(props)}
+      updateOverlayProp={updateOverlayProp}
+    />,
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Pure helper unit tests
+// ---------------------------------------------------------------------------
+
+describe('isBold', () => {
+  it.each([
+    ['700', true],
+    ['bold', true],
+    [700, true],
+    ['600', true],
+    ['400', false],
+    [400, false],
+    ['normal', false],
+    [undefined, false],
+    ['', false],
+  ])('isBold(%s) → %s', (input, expected) => {
+    expect(isBold(input)).toBe(expected)
+  })
+})
+
+describe('isItalic', () => {
+  it.each([
+    ['italic', true],
+    ['normal', false],
+    ['oblique', false],
+    [undefined, false],
+  ])('isItalic(%s) → %s', (input, expected) => {
+    expect(isItalic(input)).toBe(expected)
+  })
+})
+
+describe('nextCase', () => {
+  it.each([
+    ['none', 'uppercase'],
+    ['uppercase', 'lowercase'],
+    ['lowercase', 'capitalize'],
+    ['capitalize', 'none'],
+    ['unknown', 'uppercase'],
+  ])('nextCase(%s) → %s', (input, expected) => {
+    expect(nextCase(input)).toBe(expected)
+  })
+})
+
+describe('isStyleProp', () => {
+  it.each([
+    ['fontWeight', true],
+    ['fontStyle', true],
+    ['textTransform', true],
+    ['textAlign', true],
+    ['title', false],
+    ['bg', false],
+    ['color', false],
+    ['', false],
+  ])('isStyleProp(%s) → %s', (key, expected) => {
+    expect(isStyleProp(key)).toBe(expected)
+  })
+})
+
+describe('isColorProp', () => {
+  it('returns true for hex values', () => {
+    expect(isColorProp('anything', '#ff0000')).toBe(true)
+    expect(isColorProp('anything', '#abc')).toBe(true)
+    expect(isColorProp('foo', '#AABBCC')).toBe(true)
+  })
+
+  it('returns true for name-matched color keys', () => {
+    expect(isColorProp('bg', 'white')).toBe(true)
+    expect(isColorProp('accent', 'blue')).toBe(true)
+    expect(isColorProp('foreground', 'dark')).toBe(true)
+    expect(isColorProp('background', 'light')).toBe(true)
+    expect(isColorProp('color', 'red')).toBe(true)
+  })
+
+  it('returns false for plain text values with non-matching keys', () => {
+    expect(isColorProp('title', 'Hello world')).toBe(false)
+    expect(isColorProp('subtitle', 'Some text')).toBe(false)
+  })
+})
+
+describe('nonColorTextEntries', () => {
+  it('filters out colors, style props, and non-strings', () => {
+    const result = nonColorTextEntries({
+      title: 'hi',
+      bg: '#fff',
+      fontWeight: '700',
+      count: 5,
+    })
+    expect(result).toEqual([['title', 'hi']])
+  })
+
+  it('keeps multiple valid text entries', () => {
+    const result = nonColorTextEntries({ title: 'Hello', subtitle: 'World' })
+    expect(result).toEqual([
+      ['title', 'Hello'],
+      ['subtitle', 'World'],
+    ])
+  })
+
+  it('returns empty array when all entries are filtered out', () => {
+    const result = nonColorTextEntries({
+      fontStyle: 'italic',
+      bg: '#000',
+      count: 3,
+    })
+    expect(result).toEqual([])
+  })
+})
+
+// ---------------------------------------------------------------------------
+// TextFormattingToolbar component tests
+// ---------------------------------------------------------------------------
+
+describe('TextFormattingToolbar — bold button', () => {
+  it('7. bold button writes fontWeight "700" then "400" on second click', () => {
+    const updateFn = vi.fn(() => Promise.resolve())
+    const { rerender } = render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={makeOverlay({ title: 'Hello', fontWeight: '400' })}
+        updateOverlayProp={updateFn}
+      />,
+    )
+    const boldBtn = screen.getByRole('button', { name: /bold/i })
+    fireEvent.click(boldBtn)
+    expect(updateFn).toHaveBeenCalledWith(SLIDE_ID, 'el-1', 'fontWeight', '700')
+
+    rerender(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={makeOverlay({ title: 'Hello', fontWeight: '700' })}
+        updateOverlayProp={updateFn}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /bold/i }))
+    expect(updateFn).toHaveBeenCalledWith(SLIDE_ID, 'el-1', 'fontWeight', '400')
+  })
+
+  it('8. bold aria-pressed is true for bold-weight values, false otherwise', () => {
+    const boldCases: Array<[unknown, boolean]> = [
+      ['700', true],
+      ['bold', true],
+      [700, true],
+      ['600', true],
+      ['400', false],
+      [400, false],
+      ['normal', false],
+      [undefined, false],
+      ['', false],
+    ]
+
+    for (const [fontWeight, expectedPressed] of boldCases) {
+      const props: Record<string, unknown> = { title: 'Hi' }
+      if (fontWeight !== undefined) props.fontWeight = fontWeight
+      const { unmount } = render(
+        <TextFormattingToolbar
+          slideId={SLIDE_ID}
+          element={makeOverlay(props)}
+          updateOverlayProp={vi.fn(() => Promise.resolve())}
+        />,
+      )
+      if (fontWeight === undefined) {
+        // fontWeight absent → bold button is hidden (prop not in contract)
+        expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument()
+      } else {
+        const boldBtn = screen.getByRole('button', { name: /bold/i })
+        expect(boldBtn.getAttribute('aria-pressed')).toBe(String(expectedPressed))
+      }
+      unmount()
+    }
+  })
+})
+
+describe('TextFormattingToolbar — italic button', () => {
+  it('9. italic button writes fontStyle "italic" then "normal" on second click', () => {
+    const updateFn = vi.fn(() => Promise.resolve())
+    const { rerender } = render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={makeOverlay({ title: 'Hello', fontStyle: 'normal' })}
+        updateOverlayProp={updateFn}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /italic/i }))
+    expect(updateFn).toHaveBeenCalledWith(SLIDE_ID, 'el-1', 'fontStyle', 'italic')
+
+    rerender(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={makeOverlay({ title: 'Hello', fontStyle: 'italic' })}
+        updateOverlayProp={updateFn}
+      />,
+    )
+    fireEvent.click(screen.getByRole('button', { name: /italic/i }))
+    expect(updateFn).toHaveBeenCalledWith(SLIDE_ID, 'el-1', 'fontStyle', 'normal')
+  })
+})
+
+describe('TextFormattingToolbar — case button', () => {
+  it('10. case button cycles none → uppercase → lowercase → capitalize → none', () => {
+    const updateFn = vi.fn(() => Promise.resolve())
+
+    const { rerender } = render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={makeOverlay({ title: 'Hello', textTransform: 'none' })}
+        updateOverlayProp={updateFn}
+      />,
+    )
+    const getCaseBtn = () => screen.getByRole('button', { name: /text case/i })
+    fireEvent.click(getCaseBtn())
+    expect(updateFn).toHaveBeenLastCalledWith(SLIDE_ID, 'el-1', 'textTransform', 'uppercase')
+
+    const steps: Array<[string, string]> = [
+      ['none', 'uppercase'],
+      ['uppercase', 'lowercase'],
+      ['lowercase', 'capitalize'],
+      ['capitalize', 'none'],
+    ]
+    for (const [current, expected] of steps) {
+      rerender(
+        <TextFormattingToolbar
+          slideId={SLIDE_ID}
+          element={makeOverlay({ title: 'Hello', textTransform: current })}
+          updateOverlayProp={updateFn}
+        />,
+      )
+      fireEvent.click(getCaseBtn())
+      expect(updateFn).toHaveBeenLastCalledWith(SLIDE_ID, 'el-1', 'textTransform', expected)
+    }
+  })
+})
+
+describe('TextFormattingToolbar — alignment buttons', () => {
+  it('11. each alignment button writes the matching textAlign value', () => {
+    const updateFn = vi.fn(() => Promise.resolve())
+    renderToolbar({ title: 'Hello', textAlign: 'center' }, updateFn)
+
+    fireEvent.click(screen.getByRole('radio', { name: /align left/i }))
+    expect(updateFn).toHaveBeenLastCalledWith(SLIDE_ID, 'el-1', 'textAlign', 'left')
+
+    fireEvent.click(screen.getByRole('radio', { name: /align center/i }))
+    expect(updateFn).toHaveBeenLastCalledWith(SLIDE_ID, 'el-1', 'textAlign', 'center')
+
+    fireEvent.click(screen.getByRole('radio', { name: /align right/i }))
+    expect(updateFn).toHaveBeenLastCalledWith(SLIDE_ID, 'el-1', 'textAlign', 'right')
+  })
+
+  it('12. no alignment button is highlighted (aria-checked false) when textAlign is unset', () => {
+    // textAlign must be present for the radiogroup to render, but the value
+    // should not match any button. Use an empty string to make the prop present
+    // but unmatched so none of the three alignment buttons show as checked.
+    renderToolbar({ title: 'Hello', textAlign: '' }, vi.fn(() => Promise.resolve()))
+
+    const radios = screen.getAllByRole('radio')
+    expect(radios).toHaveLength(3)
+    for (const radio of radios) {
+      expect(radio.getAttribute('aria-checked')).toBe('false')
+    }
+  })
+})
+
+describe('TextFormattingToolbar — ARIA', () => {
+  it('15. toolbar has role="toolbar", alignment group has role="radiogroup", B/I have aria-pressed', () => {
+    renderToolbar(
+      { title: 'Hello', fontWeight: '400', fontStyle: 'normal', textAlign: 'center' },
+      vi.fn(() => Promise.resolve()),
+    )
+
+    expect(screen.getByRole('toolbar', { name: /text formatting/i })).toBeInTheDocument()
+    expect(screen.getByRole('radiogroup', { name: /text alignment/i })).toBeInTheDocument()
+
+    const boldBtn = screen.getByRole('button', { name: /bold/i })
+    expect(boldBtn).toHaveAttribute('aria-pressed')
+
+    const italicBtn = screen.getByRole('button', { name: /italic/i })
+    expect(italicBtn).toHaveAttribute('aria-pressed')
+  })
+})
+
+describe('TextFormattingToolbar — adaptive rendering by element prop schema', () => {
+  function fullCompliantOverlay(): OverlayElement {
+    return {
+      id: 'el-1', type: 'overlay', frame: 0, x: 0, y: 0, w: 200, h: 100, rotation: 0,
+      overlay: {
+        template: 'assets/static-text.jsx',
+        props: {
+          text: 'hi', fontSize: '64', fontFamily: 'Inter', fontWeight: '400',
+          fontStyle: 'normal', color: '#000', textAlign: 'center',
+          textTransform: 'none', bgColor: 'transparent',
+        },
+      },
+    };
+  }
+
+  it('renders all standard controls when every contract prop is present', () => {
+    render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={fullCompliantOverlay()}
+        updateOverlayProp={vi.fn(() => Promise.resolve())}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /bold/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /italic/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /text case/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/text color/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/font size/i)).toBeInTheDocument();
+    expect(screen.getByLabelText(/font family/i)).toBeInTheDocument();
+    expect(screen.getByRole('radio', { name: /align left/i })).toBeInTheDocument();
+  });
+
+  it('hides each control whose target prop is absent from the element', () => {
+    const partial = makeOverlay({ text: 'hi', fontSize: '64' });
+    render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={partial}
+        updateOverlayProp={vi.fn(() => Promise.resolve())}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /italic/i })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /text case/i })).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/text color/i)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/font size/i)).toBeInTheDocument();
+    expect(screen.queryByLabelText(/font family/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole('radio', { name: /align left/i })).not.toBeInTheDocument();
+  });
+
+  it('shows a fallback hint when no standard contract props are present', () => {
+    const noncompliant = makeOverlay({ headline: 'hi', headlineSize: '92', fg: '#000' });
+    render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={noncompliant}
+        updateOverlayProp={vi.fn(() => Promise.resolve())}
+      />,
+    );
+    expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument();
+    expect(screen.queryByLabelText(/font size/i)).not.toBeInTheDocument();
+    expect(screen.getByText(/property panel/i)).toBeInTheDocument();
+  });
+
+  it('shows the fallback hint when `text` is the only standard prop (no style controls available)', () => {
+    // Realistic legacy carousel: text key carries a color hex (mis-used by an
+    // older agent), no fontSize/color/weight/etc. on the element. Without the
+    // hint here, the operator sees an empty toolbar with no signal about why.
+    const textOnly = makeOverlay({ text: '#f8fafc', copy: 'real content', size: 58 });
+    render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={textOnly}
+        updateOverlayProp={vi.fn(() => Promise.resolve())}
+      />,
+    );
+    expect(screen.queryByLabelText(/font size/i)).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /bold/i })).not.toBeInTheDocument();
+    expect(screen.getByText(/property panel/i)).toBeInTheDocument();
+  });
+
+  it('keeps the delete button regardless of contract compliance (when onDelete is supplied)', () => {
+    const noncompliant = makeOverlay({ headline: 'hi' });
+    render(
+      <TextFormattingToolbar
+        slideId={SLIDE_ID}
+        element={noncompliant}
+        updateOverlayProp={vi.fn(() => Promise.resolve())}
+        onDelete={vi.fn()}
+      />,
+    );
+    expect(screen.getByRole('button', { name: /delete text overlay/i })).toBeInTheDocument();
+  });
+});

package/src/theme.ts

@@ -0,0 +1,93 @@
+/**
+ * editor-core / theme — the default theme for the editor running inside Montaj,
+ * plus the `applyTheme` helper that projects an `EditorTheme` onto an element as
+ * CSS custom properties.
+ *
+ * ── CSS variable naming convention ───────────────────────────────────────────
+ * Every token is written as a custom property prefixed `--editor-`:
+ *   colors   →  --editor-bg, --editor-surface, --editor-accent,
+ *               --editor-text, --editor-border, --editor-selection
+ *   fonts    →  --editor-font-sans, --editor-font-serif, --editor-font-display
+ *   radii    →  --editor-radius-{sm|md|lg}
+ *   spacing  →  --editor-space-{n}   (n = scale step)
+ *
+ * Optional tokens (serif/display fonts) are only written when present, so a
+ * host can detect their absence via an empty `getPropertyValue`. Editor styles
+ * reference these vars exclusively, which is what lets a host re-theme the same
+ * component without forking its CSS.
+ */
+import type { EditorTheme } from './types'
+
+/**
+ * Montaj's default editor theme. Values mirror Montaj's existing Tailwind /
+ * `index.css` palette, which is dark-first:
+ *   background  gray-900  (#111827, matches `surface.DEFAULT`)
+ *   surface     gray-800  (#1f2937, matches `surface.raised`)
+ *   border      gray-700  (#374151, matches `surface.overlay`)
+ *   text        gray-100  (#f3f4f6, matches `html.dark` text)
+ *   accent      indigo-500 (#6366f1) — Montaj's interactive accent
+ *   selection   indigo-400 (#818cf8) — element-selection highlight
+ *   font        Inter (the configured `fontFamily.sans`)
+ */
+export const defaultMontajTheme: EditorTheme = {
+  colors: {
+    background: '#111827',
+    surface: '#1f2937',
+    accent: '#6366f1',
+    text: '#f3f4f6',
+    border: '#374151',
+    selection: '#818cf8',
+  },
+  fonts: {
+    sans: "'Inter', system-ui, -apple-system, sans-serif",
+  },
+  radii: {
+    sm: '0.25rem',
+    md: '0.5rem',
+    lg: '0.75rem',
+  },
+  spacing: {
+    1: '0.25rem',
+    2: '0.5rem',
+    3: '0.75rem',
+    4: '1rem',
+    6: '1.5rem',
+    8: '2rem',
+  },
+}
+
+/**
+ * Write `theme`'s tokens onto `el` as CSS custom properties following the
+ * convention documented at the top of this file. Idempotent — calling it again
+ * with a different theme overwrites the previously-set vars.
+ */
+export function applyTheme(el: HTMLElement, theme: EditorTheme): void {
+  const { style } = el
+
+  // Colors
+  style.setProperty('--editor-bg', theme.colors.background)
+  style.setProperty('--editor-surface', theme.colors.surface)
+  style.setProperty('--editor-accent', theme.colors.accent)
+  style.setProperty('--editor-text', theme.colors.text)
+  style.setProperty('--editor-border', theme.colors.border)
+  style.setProperty('--editor-selection', theme.colors.selection)
+
+  // Fonts — sans is required; serif/display are written only when present.
+  style.setProperty('--editor-font-sans', theme.fonts.sans)
+  if (theme.fonts.serif !== undefined) {
+    style.setProperty('--editor-font-serif', theme.fonts.serif)
+  }
+  if (theme.fonts.display !== undefined) {
+    style.setProperty('--editor-font-display', theme.fonts.display)
+  }
+
+  // Radii
+  style.setProperty('--editor-radius-sm', theme.radii.sm)
+  style.setProperty('--editor-radius-md', theme.radii.md)
+  style.setProperty('--editor-radius-lg', theme.radii.lg)
+
+  // Spacing scale — one var per step.
+  for (const [step, value] of Object.entries(theme.spacing)) {
+    style.setProperty(`--editor-space-${step}`, value)
+  }
+}