tiptapify 0.3.4 → 0.4.0

package/src/extensions/components/style/color/colors.test.ts

@@ -0,0 +1,191 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { Editor } from '@tiptap/vue-3'
+import { Document } from '@tiptap/extension-document'
+import { Highlight } from '@tiptap/extension-highlight'
+import { Paragraph } from '@tiptap/extension-paragraph'
+import { Text } from '@tiptap/extension-text'
+import { TextStyleKit } from '@tiptap/extension-text-style'
+import { UndoRedo } from '@tiptap/extensions'
+import {
+  addRecent,
+  loadRecent,
+  moveInGrid,
+  normalizeHex,
+  palettes,
+  RECENT_LIMIT,
+  sameColor,
+  saveRecent,
+  writeColor,
+} from '@tiptapify/extensions/components/style/color/colors'
+
+describe('palettes', () => {
+  it('start with the cell that removes the color, then rows of at most 8 valid colors', () => {
+    for (const rows of Object.values(palettes)) {
+      expect(rows[0][0].value).toBeNull()
+
+      const colors = rows.flat().slice(1).map(swatch => swatch.value)
+      expect(colors.every(color => normalizeHex(color) === color)).toBe(true)
+      expect(new Set(colors).size).toBe(colors.length)
+      expect(rows.every(row => row.length <= 8)).toBe(true)
+    }
+  })
+
+  it('name every swatch', () => {
+    const names = Object.values(palettes).flat(2).map(swatch => swatch.name)
+
+    expect(names.every(Boolean)).toBe(true)
+    expect(names).toContain('default')
+    expect(names).toContain('no_highlight')
+    expect(names).toContain('names.dark_red')
+  })
+})
+
+describe('normalizeHex', () => {
+  it.each([
+    ['#abc', '#aabbcc'],
+    ['#AABBCC', '#aabbcc'],
+    [' #0f0 ', '#00ff00'],
+    ['1D4ED8', '#1d4ed8'],
+  ])('reads %s as %s', (input, expected) => {
+    expect(normalizeHex(input)).toBe(expected)
+  })
+
+  it.each(['', '#', '#ab', '#abcd', '#abcdeg', 'red', 'rgb(0, 0, 0)', null, undefined])('rejects %s', input => {
+    expect(normalizeHex(input)).toBeNull()
+  })
+})
+
+describe('sameColor', () => {
+  it('compares hex colors in any notation and other colors as text', () => {
+    expect(sameColor('#FFF', '#ffffff')).toBe(true)
+    expect(sameColor('#fff', '#fffffe')).toBe(false)
+    expect(sameColor('rgb(0, 0, 0)', 'RGB(0, 0, 0)')).toBe(true)
+    expect(sameColor('rgb(0, 0, 0)', '#000000')).toBe(false)
+  })
+})
+
+describe('recent colors', () => {
+  afterEach(() => {
+    localStorage.clear()
+    vi.restoreAllMocks()
+  })
+
+  it('puts the newest first without duplicates and keeps the limit', () => {
+    let list: string[] = []
+    for (let index = 0; index < RECENT_LIMIT + 2; index++) {
+      list = addRecent(list, `#00000${index}`)
+    }
+
+    expect(list).toHaveLength(RECENT_LIMIT)
+    expect(list[0]).toBe('#000009')
+    expect(addRecent(list, '#000005')[0]).toBe('#000005')
+    expect(addRecent(list, '#000005')).toHaveLength(RECENT_LIMIT)
+    expect(addRecent(['#aabbcc'], '#ABC')).toEqual(['#aabbcc'])
+    expect(addRecent(['#aabbcc'], 'nope')).toEqual(['#aabbcc'])
+  })
+
+  it('are remembered per kind', () => {
+    saveRecent('text', ['#b91c1c', '#1d4ed8'])
+
+    expect(loadRecent('text')).toEqual(['#b91c1c', '#1d4ed8'])
+    expect(loadRecent('highlight')).toEqual([])
+  })
+
+  it('skip junk in storage', () => {
+    localStorage.setItem('tiptapify:recent-colors:text', JSON.stringify(['#ABC', 'red', 42, '#aabbcc']))
+    expect(loadRecent('text')).toEqual(['#aabbcc'])
+
+    localStorage.setItem('tiptapify:recent-colors:text', '{broken')
+    expect(loadRecent('text')).toEqual([])
+
+    localStorage.setItem('tiptapify:recent-colors:text', '{"a":1}')
+    expect(loadRecent('text')).toEqual([])
+  })
+
+  it('work without storage', () => {
+    vi.spyOn(Storage.prototype, 'getItem').mockImplementation(() => {
+      throw new Error('blocked')
+    })
+    vi.spyOn(Storage.prototype, 'setItem').mockImplementation(() => {
+      throw new Error('blocked')
+    })
+
+    expect(() => saveRecent('text', ['#000000'])).not.toThrow()
+    expect(loadRecent('text')).toEqual([])
+  })
+})
+
+describe('moveInGrid', () => {
+  const rows = [3, 8, 8]
+
+  it('runs left/right through the rows like text', () => {
+    expect(moveInGrid(rows, { row: 0, col: 2 }, 'ArrowRight')).toEqual({ row: 1, col: 0 })
+    expect(moveInGrid(rows, { row: 1, col: 0 }, 'ArrowLeft')).toEqual({ row: 0, col: 2 })
+    expect(moveInGrid(rows, { row: 0, col: 0 }, 'ArrowLeft')).toEqual({ row: 0, col: 0 })
+    expect(moveInGrid(rows, { row: 2, col: 7 }, 'ArrowRight')).toEqual({ row: 2, col: 7 })
+  })
+
+  it('keeps the column up/down where the row is long enough', () => {
+    expect(moveInGrid(rows, { row: 1, col: 6 }, 'ArrowDown')).toEqual({ row: 2, col: 6 })
+    expect(moveInGrid(rows, { row: 1, col: 6 }, 'ArrowUp')).toEqual({ row: 0, col: 2 })
+    expect(moveInGrid(rows, { row: 0, col: 1 }, 'ArrowUp')).toEqual({ row: 0, col: 1 })
+    expect(moveInGrid(rows, { row: 2, col: 1 }, 'ArrowDown')).toEqual({ row: 2, col: 1 })
+  })
+
+  it('jumps to the row ends with Home/End and ignores other keys', () => {
+    expect(moveInGrid(rows, { row: 1, col: 4 }, 'Home')).toEqual({ row: 1, col: 0 })
+    expect(moveInGrid(rows, { row: 1, col: 4 }, 'End')).toEqual({ row: 1, col: 7 })
+    expect(moveInGrid(rows, { row: 1, col: 4 }, 'a')).toBeNull()
+    expect(moveInGrid(rows, { row: 5, col: 0 }, 'ArrowRight')).toBeNull()
+  })
+})
+
+describe('writeColor', () => {
+  let editor: Editor
+
+  function makeEditor(content: string): Editor {
+    editor = new Editor({
+      element: document.createElement('div'),
+      content,
+      extensions: [Document, Paragraph, Text, TextStyleKit, Highlight.configure({ multicolor: true }), UndoRedo],
+    })
+    editor.commands.selectAll()
+
+    return editor
+  }
+
+  afterEach(() => editor?.destroy())
+
+  it('sets and removes the text color', () => {
+    makeEditor('<p>Hello</p>')
+
+    writeColor(editor, 'text', '#b91c1c')
+    expect(editor.getAttributes('textStyle').color).toBe('#b91c1c')
+
+    writeColor(editor, 'text', null)
+    expect(editor.getAttributes('textStyle').color).toBeFalsy()
+  })
+
+  it('sets and removes the highlight', () => {
+    makeEditor('<p>Hello</p>')
+
+    writeColor(editor, 'highlight', '#fde68a')
+    expect(editor.getAttributes('highlight').color).toBe('#fde68a')
+
+    writeColor(editor, 'highlight', null)
+    expect(editor.isActive('highlight')).toBe(false)
+  })
+
+  it('keeps previews out of undo', () => {
+    makeEditor('<p><span style="color: #1d4ed8">Hello</span></p>')
+
+    writeColor(editor, 'text', '#b91c1c', { history: false })
+    expect(editor.getAttributes('textStyle').color).toBe('#b91c1c')
+    expect(editor.can().undo()).toBe(false)
+
+    writeColor(editor, 'text', '#1d4ed8', { history: false })
+    writeColor(editor, 'text', '#15803d')
+    editor.commands.undo()
+    expect(editor.getAttributes('textStyle').color).toBe('#1d4ed8')
+  })
+})

package/src/extensions/components/style/color/colors.ts

@@ -0,0 +1,168 @@
+import { Editor } from '@tiptap/vue-3'
+
+export type ColorKind = 'text' | 'highlight'
+
+// `value: null` is the "Default" / "No highlight" cell that removes the color; `name` is a key under `style.color`
+export type Swatch = { value: string | null, name: string }
+
+export type GridPosition = { row: number, col: number }
+
+export const RECENT_LIMIT = 8
+
+const hues = ['red', 'orange', 'amber', 'green', 'teal', 'blue', 'purple', 'pink']
+
+function hueRow(prefix: string, values: string[]): Swatch[] {
+  return values.map((value, index) => ({ value, name: `names.${prefix}${hues[index]}` }))
+}
+
+// Rows of 8: text colors stay readable on a light page, highlights are pastel so black text stays readable on them
+export const palettes: Record<ColorKind, Swatch[][]> = {
+  text: [
+    [
+      { value: null, name: 'default' },
+      { value: '#000000', name: 'names.black' },
+      { value: '#404040', name: 'names.dark_grey' },
+      { value: '#595959', name: 'names.grey' },
+      { value: '#808080', name: 'names.medium_grey' },
+      { value: '#a6a6a6', name: 'names.light_grey' },
+      { value: '#d9d9d9', name: 'names.pale_grey' },
+      { value: '#ffffff', name: 'names.white' },
+    ],
+    hueRow('dark_', ['#b91c1c', '#c2410c', '#a16207', '#15803d', '#0f766e', '#1d4ed8', '#7e22ce', '#be185d']),
+    hueRow('', ['#ef4444', '#f97316', '#eab308', '#22c55e', '#14b8a6', '#3b82f6', '#a855f7', '#ec4899']),
+  ],
+  highlight: [
+    [
+      { value: null, name: 'no_highlight' },
+      { value: '#ededed', name: 'names.pale_grey' },
+      { value: '#d4d4d4', name: 'names.light_grey' },
+    ],
+    hueRow('light_', ['#fecaca', '#fed7aa', '#fde68a', '#bbf7d0', '#99f6e4', '#bfdbfe', '#e9d5ff', '#fbcfe8']),
+    hueRow('', ['#fca5a5', '#fdba74', '#fcd34d', '#86efac', '#5eead4', '#93c5fd', '#d8b4fe', '#f9a8d4']),
+  ],
+}
+
+/**
+ * `#rgb` / `#rrggbb` (the `#` may be omitted, as copied from design tools) to lowercase `#rrggbb`, else null.
+ */
+export function normalizeHex(input: string | null | undefined): string | null {
+  const match = /^#?([\da-f]{3}|[\da-f]{6})$/i.exec(String(input ?? '').trim())
+  if (!match) {
+    return null
+  }
+
+  const digits = match[1].length === 3 ? match[1].replace(/./g, digit => digit + digit) : match[1]
+
+  return `#${digits.toLowerCase()}`
+}
+
+// Colors pasted from other sites may be `rgb()` or names: those match only themselves
+export function sameColor(a: string | null | undefined, b: string | null | undefined): boolean {
+  const left = normalizeHex(a) ?? String(a ?? '').trim().toLowerCase()
+  const right = normalizeHex(b) ?? String(b ?? '').trim().toLowerCase()
+
+  return left === right
+}
+
+export function addRecent(list: string[], color: string, limit = RECENT_LIMIT): string[] {
+  const hex = normalizeHex(color)
+  if (!hex) {
+    return list
+  }
+
+  return [hex, ...list.filter(item => item !== hex)].slice(0, limit)
+}
+
+function storage(): Storage | null {
+  try {
+    return window.localStorage
+  } catch {
+    return null
+  }
+}
+
+function recentKey(kind: ColorKind): string {
+  return `tiptapify:recent-colors:${kind}`
+}
+
+// Storage may be blocked (private mode, sandboxed iframe) or hold junk: the picker then starts without recent colors
+export function loadRecent(kind: ColorKind): string[] {
+  try {
+    const stored = JSON.parse(storage()?.getItem(recentKey(kind)) ?? '[]')
+    if (!Array.isArray(stored)) {
+      return []
+    }
+
+    const colors = stored.map(item => normalizeHex(String(item))).filter((item): item is string => !!item)
+
+    return [...new Set(colors)].slice(0, RECENT_LIMIT)
+  } catch {
+    return []
+  }
+}
+
+export function saveRecent(kind: ColorKind, list: string[]): void {
+  try {
+    storage()?.setItem(recentKey(kind), JSON.stringify(list.slice(0, RECENT_LIMIT)))
+  } catch {
+    // remembered for this session only
+  }
+}
+
+/**
+ * The next swatch for an arrow / Home / End key in rows of different lengths, or null for other keys.
+ * Left/right run through the rows like text, up/down keep the column where the row is long enough.
+ */
+export function moveInGrid(rowLengths: number[], position: GridPosition, key: string): GridPosition | null {
+  const flat = rowLengths.flatMap((length, row) => Array.from({ length }, (_, col) => ({ row, col })))
+  const index = flat.findIndex(cell => cell.row === position.row && cell.col === position.col)
+  if (index === -1 || !flat.length) {
+    return null
+  }
+
+  const rowAt = (row: number): GridPosition => ({ row, col: Math.min(position.col, rowLengths[row] - 1) })
+
+  switch (key) {
+    case 'ArrowRight':
+      return flat[Math.min(index + 1, flat.length - 1)]
+    case 'ArrowLeft':
+      return flat[Math.max(index - 1, 0)]
+    case 'ArrowDown':
+      return position.row < rowLengths.length - 1 ? rowAt(position.row + 1) : position
+    case 'ArrowUp':
+      return position.row > 0 ? rowAt(position.row - 1) : position
+    case 'Home':
+      return { row: position.row, col: 0 }
+    case 'End':
+      return { row: position.row, col: rowLengths[position.row] - 1 }
+    default:
+      return null
+  }
+}
+
+/**
+ * Sets (or with null removes) the text or highlight color of the selection.
+ * A preview (`history: false`) is left out of undo, so only applied colors become undo steps.
+ */
+export function writeColor(editor: Editor, kind: ColorKind, value: string | null, { history = true, focus = false } = {}): void {
+  let chain = editor.chain()
+  if (focus) {
+    chain = chain.focus()
+  }
+
+  if (kind === 'text') {
+    chain = value ? chain.setColor(value) : chain.unsetColor()
+  } else {
+    chain = value ? chain.setHighlight({ color: value }) : chain.unsetHighlight()
+  }
+
+  if (!history) {
+    chain = chain.command(({ tr }) => {
+      tr.setMeta('addToHistory', false)
+
+      return true
+    })
+  }
+
+  chain.run()
+}

package/src/extensions/components/style/highlight/Button.vue

@@ -47,9 +47,7 @@ const selectedColor = computed(() => editor.value.getAttributes('highlight').col
     />
   </VBtn>
 
-  <VMenu :activator="`#tiptapify-highlight-button-${editor.instanceId}`">
-    <StyleColor :font-color="false" :background-color="true" :color="selectedColor" />
-  </VMenu>
+  <StyleColor kind="highlight" :activator="`#tiptapify-highlight-button-${editor.instanceId}`" :color="selectedColor" />
 </template>
 
 <style lang="scss" scoped>