|
| 1 | +/** |
| 2 | + * @vitest-environment jsdom |
| 3 | + */ |
| 4 | +import { Editor } from '@tiptap/core' |
| 5 | +import { undoDepth } from '@tiptap/pm/history' |
| 6 | +import { afterEach, describe, expect, it } from 'vitest' |
| 7 | +import { createMarkdownContentExtensions } from '../extensions' |
| 8 | +import { getFindTally, RichMarkdownFind, setFindQuery, stepFindMatch } from './find-extension' |
| 9 | + |
| 10 | +let editor: Editor | null = null |
| 11 | +afterEach(() => { |
| 12 | + editor?.destroy() |
| 13 | + editor = null |
| 14 | +}) |
| 15 | + |
| 16 | +function mountEditor(markdown: string): Editor { |
| 17 | + const element = document.createElement('div') |
| 18 | + document.body.append(element) |
| 19 | + editor = new Editor({ |
| 20 | + element, |
| 21 | + extensions: [...createMarkdownContentExtensions(), RichMarkdownFind], |
| 22 | + }) |
| 23 | + editor.commands.setContent(markdown, { contentType: 'markdown' }) |
| 24 | + return editor |
| 25 | +} |
| 26 | + |
| 27 | +/** The painted highlights, in document order, with the active one marked. */ |
| 28 | +function paintedMatches(instance: Editor): string[] { |
| 29 | + return Array.from(instance.view.dom.querySelectorAll('.rich-find-match')).map((element) => |
| 30 | + element.classList.contains('rich-find-match-active') |
| 31 | + ? `[${element.textContent}]` |
| 32 | + : (element.textContent ?? '') |
| 33 | + ) |
| 34 | +} |
| 35 | + |
| 36 | +describe('RichMarkdownFind', () => { |
| 37 | + it('paints nothing until a term is set', () => { |
| 38 | + const instance = mountEditor('alpha beta alpha') |
| 39 | + expect(paintedMatches(instance)).toEqual([]) |
| 40 | + expect(getFindTally(instance.state).matches).toHaveLength(0) |
| 41 | + }) |
| 42 | + |
| 43 | + it('paints every match and marks the first one active', () => { |
| 44 | + const instance = mountEditor('alpha beta alpha') |
| 45 | + setFindQuery(instance, 'alpha') |
| 46 | + expect(paintedMatches(instance)).toEqual(['[alpha]', 'alpha']) |
| 47 | + }) |
| 48 | + |
| 49 | + it('steps the active match forward and backward, wrapping at both ends', () => { |
| 50 | + const instance = mountEditor('one one one') |
| 51 | + setFindQuery(instance, 'one') |
| 52 | + |
| 53 | + stepFindMatch(instance, 1) |
| 54 | + expect(paintedMatches(instance)).toEqual(['one', '[one]', 'one']) |
| 55 | + |
| 56 | + stepFindMatch(instance, 1) |
| 57 | + expect(paintedMatches(instance)).toEqual(['one', 'one', '[one]']) |
| 58 | + |
| 59 | + // Past the end wraps to the first, and back past the start wraps to the last. |
| 60 | + stepFindMatch(instance, 1) |
| 61 | + expect(paintedMatches(instance)).toEqual(['[one]', 'one', 'one']) |
| 62 | + stepFindMatch(instance, -1) |
| 63 | + expect(paintedMatches(instance)).toEqual(['one', 'one', '[one]']) |
| 64 | + }) |
| 65 | + |
| 66 | + it('re-searches when the document changes under a live search', () => { |
| 67 | + const instance = mountEditor('alpha') |
| 68 | + setFindQuery(instance, 'alpha') |
| 69 | + expect(getFindTally(instance.state).matches).toHaveLength(1) |
| 70 | + |
| 71 | + instance.commands.insertContentAt(instance.state.doc.content.size, ' and alpha again') |
| 72 | + expect(getFindTally(instance.state).matches).toHaveLength(2) |
| 73 | + expect(paintedMatches(instance)).toEqual(['[alpha]', 'alpha']) |
| 74 | + }) |
| 75 | + |
| 76 | + it('drops a match the document no longer contains, without leaving a stale highlight', () => { |
| 77 | + const instance = mountEditor('alpha beta') |
| 78 | + setFindQuery(instance, 'beta') |
| 79 | + expect(paintedMatches(instance)).toEqual(['[beta]']) |
| 80 | + |
| 81 | + instance.commands.setContent('alpha only', { contentType: 'markdown' }) |
| 82 | + expect(paintedMatches(instance)).toEqual([]) |
| 83 | + expect(getFindTally(instance.state).matches).toHaveLength(0) |
| 84 | + }) |
| 85 | + |
| 86 | + it('clamps the active index when an edit shrinks the match set', () => { |
| 87 | + const instance = mountEditor('x x x') |
| 88 | + setFindQuery(instance, 'x') |
| 89 | + stepFindMatch(instance, 2) |
| 90 | + expect(getFindTally(instance.state).activeIndex).toBe(2) |
| 91 | + |
| 92 | + instance.commands.setContent('x', { contentType: 'markdown' }) |
| 93 | + const tally = getFindTally(instance.state) |
| 94 | + expect(tally.matches).toHaveLength(1) |
| 95 | + expect(tally.activeIndex).toBe(0) |
| 96 | + expect(paintedMatches(instance)).toEqual(['[x]']) |
| 97 | + }) |
| 98 | + |
| 99 | + it('searches a term applied before any other transaction', () => { |
| 100 | + // The hook re-applies a pending term the moment the editor exists; setting a query as the very |
| 101 | + // first thing that happens to a fresh editor must land, not wait for a later transaction. |
| 102 | + const instance = mountEditor('alpha beta') |
| 103 | + setFindQuery(instance, 'beta') |
| 104 | + expect(getFindTally(instance.state).matches).toHaveLength(1) |
| 105 | + expect(paintedMatches(instance)).toEqual(['[beta]']) |
| 106 | + }) |
| 107 | + |
| 108 | + it('clears every highlight when the term is emptied', () => { |
| 109 | + const instance = mountEditor('alpha') |
| 110 | + setFindQuery(instance, 'alpha') |
| 111 | + expect(paintedMatches(instance)).toEqual(['[alpha]']) |
| 112 | + |
| 113 | + setFindQuery(instance, '') |
| 114 | + expect(paintedMatches(instance)).toEqual([]) |
| 115 | + }) |
| 116 | + |
| 117 | + it('never writes to the document, the selection, or the undo history', () => { |
| 118 | + const instance = mountEditor('alpha beta alpha') |
| 119 | + const before = instance.getMarkdown() |
| 120 | + const selectionBefore = instance.state.selection.from |
| 121 | + const undoBefore = undoDepth(instance.state) |
| 122 | + |
| 123 | + setFindQuery(instance, 'alpha') |
| 124 | + stepFindMatch(instance, 1) |
| 125 | + |
| 126 | + expect(instance.getMarkdown()).toBe(before) |
| 127 | + expect(instance.state.selection.from).toBe(selectionBefore) |
| 128 | + // A search that added an undo step would make the user's next Cmd+Z undo the search |
| 129 | + // instead of their real last edit. |
| 130 | + expect(undoDepth(instance.state)).toBe(undoBefore) |
| 131 | + }) |
| 132 | +}) |
0 commit comments