Create text editor test suite #3508

john-traas · 2025-03-25T10:14:23Z

Adds a test suite that can be used to setup test environments for the text-editor.

Summary by CodeRabbit

New Features
- Improved table styling robustness in the text editor.
Tests
- Added comprehensive test coverage for schema setup, editor state/view creation, content generation, command execution, event simulation, and table behavior to enhance reliability.
Documentation
- Introduced detailed guides for text-editor testing utilities with usage examples and best practices.
Chores
- Centralized exports for text-editor testing utilities to streamline imports.

coderabbitai · 2025-03-25T10:14:30Z

📝 Walkthrough

Walkthrough

This change set adds a comprehensive ProseMirror testing toolkit: schema builders, editor state/view builders, content generators, command testing utilities, and event simulators, along with corresponding Jest test suites and documentation. Additionally, a table plugin helper (createStyleAttribute) is now exported to support testing.

Changes

Cohort / File(s)	Summary
Table Plugin `src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts`, `.../plugins/table-plugin.spec.ts`	Exported createStyleAttribute; added tests for table plugins, node specs, and style attribute behavior.
Command Testing Utilities `src/components/text-editor/test-setup/command-tester.ts`, `.../command-tester.spec.ts`	Introduced CommandResult interface and helpers: getCommandResult, testCommand, testCommandWithView, createCommandTester; added tests covering success/failure cases and view-driven commands.
Content Generators `src/components/text-editor/test-setup/content-generator.ts`, `.../content-generator.spec.ts`	Added helpers to create EditorState from text, HTML, formatted text, bullet lists, headings, blockquotes, and code blocks; tests validate structure and schema interactions.
Editor State Builder `src/components/text-editor/test-setup/editor-state-builder.ts`, `.../editor-state-builder.spec.ts`	Added createEditorState, createEditorStateWithSelection, setTextSelection; tests verify empty/content/custom schema scenarios and selections.
Editor View Builder `src/components/text-editor/test-setup/editor-view-builder.ts`, `.../editor-view-builder.spec.ts`	Added createEditorView, createDispatchSpy, cleanupEditorView, mockProseMirrorDOMEnvironment; tests cover creation, dispatch behavior, cleanup, and DOM mocking.
Event Simulator `src/components/text-editor/test-setup/event-simulator.ts`, `.../event-simulator.spec.ts`	Added MockDataTransfer and simulators for keypress, paste, click, and drag-and-drop; tests validate event dispatching and payloads.
Schema Builder `src/components/text-editor/test-setup/schema-builder.ts`, `.../schema-builder.spec.ts`	Added createTestSchema and createCustomTestSchema with configurable nodes/marks; tests verify defaults and customization.
Test Utils Barrel `src/components/text-editor/test-setup/editor-test-utils.ts`	Re-exported all test utilities from schema, state/view builders, content generators, command tester, and event simulator.
Documentation `src/components/text-editor/test-setup/text-editor-test-suite-guide.md`, `.../text-editor-test-utils.md`	Added guides documenting the testing utilities, usage examples, and best practices.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor Tester
  participant State as EditorState
  participant View as EditorView
  participant Cmd as Command
  participant PM as ProseMirror

  rect rgba(224,240,255,0.5)
  note right of Tester: testCommand / getCommandResult
  Tester->>PM: Create State (optional content/plugins)
  PM-->>State: EditorState
  Tester->>Cmd: invoke(state, dispatch[, view])
  Cmd-->>Tester: boolean result
  alt result is true
    Cmd->>Tester: dispatch(tr)
    Tester->>State: state.apply(tr)
    State-->>Tester: newState
    Tester->>Tester: assertions (docContentAfter / size / includes)
  else result is false
    Tester-->>Tester: assertions on failure
  end
  end

  rect rgba(232,255,232,0.5)
  note over Tester,View: testCommandWithView
  Tester->>PM: create EditorView(state)
  PM-->>View: EditorView
  Tester->>Cmd: invoke(state, dispatch, view)
  Cmd->>Tester: dispatch(tr)
  Tester->>View: view.updateState(state.apply(tr))
  Tester-->>Tester: assertions on view.state
  end

sequenceDiagram
  autonumber
  actor Tester
  participant ES as EventSimulator
  participant View as EditorView
  participant DOM as view.dom

  rect rgba(255,245,225,0.6)
  note over Tester,View: simulateDragAndDrop
  Tester->>ES: simulateDragAndDrop(view, start, end, data?)
  ES->>DOM: mousedown
  ES->>DOM: dragstart (dataTransfer?)
  ES->>DOM: dragover
  ES->>DOM: drop
  ES->>DOM: mouseup
  DOM-->>Tester: dispatched events (handled flags)
  end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Suggested reviewers

jgroth
omaralweli

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "Create text editor test suite" accurately and concisely summarizes the main change in the diff — the addition of a comprehensive test suite and supporting test utilities for the text editor. It is short, specific to the primary intent, and clear for teammates scanning PR history. The wording avoids noise and matches the files and objectives described in the PR.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✨ Finishing touches

📝 Generate Docstrings

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch create-text-editor-test-suite

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-03-25T10:17:01Z

Documentation has been published to https://lundalogik.github.io/lime-elements/versions/PR-3508/

Copilot

Pull Request Overview

This PR adds a comprehensive test suite for the text editor, enhancing test coverage for editor view utilities, ProseMirror adapter plugins (including table support), event simulation helpers, schema/state builders, content generation utilities, and command testing utilities.

Introduces tests for editor view creation, dispatch spies, and cleanup routines.
Adds tests for plugins (e.g. table editing) and supporting helper functions.
Expands test coverage for state creation, content parsing and command execution.

Reviewed Changes

Copilot reviewed 14 out of 14 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
src/components/text-editor/test-setup/editor-view-builder.spec.ts	Tests for editor view creation and cleanup utilities
src/components/text-editor/prosemirror-adapter/plugins/table-plugin.spec.ts	Tests for table plugin functionality and style attribute helpers
src/components/text-editor/test-setup/schema-builder.spec.ts	Schema creation tests including custom configuration
src/components/text-editor/test-setup/event-simulator.ts	Event simulation functions for key, paste, click, and drag operations
src/components/text-editor/test-setup/command-tester.ts	Command tester utilities for verifying command outcomes
src/components/text-editor/test-setup/editor-state-builder.spec.ts	Tests for state creation, selection setting, and document generation
src/components/text-editor/test-setup/content-generator.spec.ts	Tests for generating documents from text, HTML, block elements, etc.
src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts	Updates to export the style attribute helper

Comments suppressed due to low confidence (2)

src/components/text-editor/test-setup/event-simulator.ts:105

[nitpick] Consider consistently using MockDataTransfer in test environments to avoid discrepancies between environments where DataTransfer might exist partially; this can help ensure uniform behavior in tests.

const dataTransfer = typeof DataTransfer !== 'undefined' ? new DataTransfer() : new MockDataTransfer();

src/components/text-editor/test-setup/content-generator.ts:79

[nitpick] Enhance the error message to include context (e.g. available mark types) so that debugging missing mark issues becomes easier.

throw new Error(`Mark type "${markSpec.type}" not found in schema`);

coderabbitai

Actionable comments posted: 6

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f556c7a and fb9a5ab.

📒 Files selected for processing (14)

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.spec.ts (1 hunks)
src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts (1 hunks)
src/components/text-editor/test-setup/command-tester.spec.ts (1 hunks)
src/components/text-editor/test-setup/command-tester.ts (1 hunks)
src/components/text-editor/test-setup/content-generator.spec.ts (1 hunks)
src/components/text-editor/test-setup/content-generator.ts (1 hunks)
src/components/text-editor/test-setup/editor-state-builder.spec.ts (1 hunks)
src/components/text-editor/test-setup/editor-state-builder.ts (1 hunks)
src/components/text-editor/test-setup/editor-view-builder.spec.ts (1 hunks)
src/components/text-editor/test-setup/editor-view-builder.ts (1 hunks)
src/components/text-editor/test-setup/event-simulator.spec.ts (1 hunks)
src/components/text-editor/test-setup/event-simulator.ts (1 hunks)
src/components/text-editor/test-setup/schema-builder.spec.ts (1 hunks)
src/components/text-editor/test-setup/schema-builder.ts (1 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

`**/*.{ts,tsx}`: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

**/*.{ts,tsx}: Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts
src/components/text-editor/test-setup/schema-builder.spec.ts
src/components/text-editor/test-setup/schema-builder.ts
src/components/text-editor/test-setup/editor-state-builder.spec.ts
src/components/text-editor/test-setup/event-simulator.spec.ts
src/components/text-editor/prosemirror-adapter/plugins/table-plugin.spec.ts
src/components/text-editor/test-setup/content-generator.spec.ts
src/components/text-editor/test-setup/command-tester.spec.ts
src/components/text-editor/test-setup/event-simulator.ts
src/components/text-editor/test-setup/command-tester.ts
src/components/text-editor/test-setup/editor-state-builder.ts
src/components/text-editor/test-setup/editor-view-builder.ts
src/components/text-editor/test-setup/content-generator.ts
src/components/text-editor/test-setup/editor-view-builder.spec.ts

🧬 Code Definitions (7)

src/components/text-editor/test-setup/schema-builder.spec.ts (1)

src/components/text-editor/test-setup/schema-builder.ts (2)

createTestSchema (12-33)

createCustomTestSchema (42-87)

src/components/text-editor/test-setup/editor-state-builder.spec.ts (1)

src/components/text-editor/test-setup/editor-state-builder.ts (4)

createEditorState (14-29)

createEditorStateWithSelection (41-59)

setTextSelection (69-77)

createDocumentWithText (100-107)

src/components/text-editor/test-setup/event-simulator.spec.ts (1)

src/components/text-editor/test-setup/event-simulator.ts (6)

simulateKeyPress (63-84)

KeyModifiers (48-53)

PasteData (89-93)

simulatePaste (102-139)

simulateClick (152-191)

simulateDragAndDrop (204-288)

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.spec.ts (1)

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts (3)

getTableEditingPlugins (4-10)

getTableNodes (22-31)

createStyleAttribute (12-20)

src/components/text-editor/test-setup/content-generator.spec.ts (1)

src/components/text-editor/test-setup/content-generator.ts (8)

createDocWithText (13-18)

createDocWithHTML (27-31)

MarkSpec (36-39)

createDocWithFormattedText (49-61)

createDocWithBulletList (97-118)

createDocWithHeading (128-144)

createDocWithBlockquote (153-166)

createDocWithCodeBlock (175-187)

src/components/text-editor/test-setup/command-tester.spec.ts (1)

src/components/text-editor/test-setup/command-tester.ts (4)

getCommandResult (29-60)

testCommand (74-120)

testCommandWithView (130-185)

createCommandTester (193-202)

src/components/text-editor/test-setup/editor-view-builder.spec.ts (1)

src/components/text-editor/test-setup/editor-view-builder.ts (4)

cleanupEditorView (84-93)

createEditorView (14-46)

createDispatchSpy (54-75)

mockProseMirrorDOMEnvironment (101-143)

🪛 Biome (1.9.4)

src/components/text-editor/test-setup/content-generator.spec.ts

[error] 119-119: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/components/text-editor/test-setup/editor-state-builder.ts

[error] 101-101: This type annotation is trivially inferred from its initialization.

Safe fix: Remove the type annotation.

(lint/style/noInferrableTypes)

src/components/text-editor/test-setup/editor-view-builder.ts

[error] 90-90: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

src/components/text-editor/test-setup/content-generator.ts

[error] 130-130: This type annotation is trivially inferred from its initialization.

Safe fix: Remove the type annotation.

(lint/style/noInferrableTypes)

src/components/text-editor/test-setup/editor-view-builder.spec.ts

[error] 210-210: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

[error] 211-211: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

🔇 Additional comments (54)

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.ts (1)

12-12: Good job making this function accessible for tests.

Making createStyleAttribute function exportable is a clean modification that allows it to be used in your test suite while maintaining its existing functionality.

src/components/text-editor/test-setup/schema-builder.spec.ts (1)

1-81: Well-structured test suite for schema builders.

The tests are comprehensive and cover the important functionality of both createTestSchema and createCustomTestSchema. Good job verifying the presence of expected nodes and marks, and testing the customization options.

src/components/text-editor/test-setup/editor-state-builder.spec.ts (1)

1-115: Thorough test coverage for editor state utilities.

The test suite effectively validates all the key functions of the editor state builder, covering various scenarios including content creation, selection handling, and custom schema support. Good job with the detailed assertions that verify both the object types and the expected content.

src/components/text-editor/test-setup/schema-builder.ts (1)

1-87: Well-implemented and documented schema builder utilities.

The schema builder functions are well-designed with good flexibility, especially in createCustomTestSchema which offers numerous customization options. The JSDoc comments clearly explain the purpose and usage of each function.

src/components/text-editor/prosemirror-adapter/plugins/table-plugin.spec.ts (5)

1-14: Imports look good and follow the correct pattern.

All imports correctly use relative paths as required by the coding guidelines, which will ensure the production build works correctly.

16-26: Good test setup with proper cleanup.

The test suite correctly implements afterEach to clean up resources, preventing memory leaks and test interference.

28-70: Comprehensive tests for table editing plugins.

The tests thoroughly verify that:

Plugins are returned when tables are enabled

An empty array is returned when tables are disabled

The plugin works correctly with an editor state

This ensures the table editing functionality will behave as expected under different configurations.

72-116: Well-structured tests for table node specifications.

These tests thoroughly validate the table node specs, including:

Verifying the expected node types exist

Confirming the nodes can be integrated into a schema

Checking for custom cell attributes used for styling

This ensures table structures will render correctly with proper styling capabilities.

118-169: Thorough testing of the style attribute helper.

The tests provide excellent coverage of the createStyleAttribute function, verifying:

Retrieval of style values from DOM elements

Setting style values on attribute objects

Appending to existing style attributes

Proper handling of falsy values

This validates that table cell styling will work correctly in all scenarios.

src/components/text-editor/test-setup/event-simulator.spec.ts (6)

1-11: Imports correctly use relative paths.

All imports from the lime-elements module use relative paths as required by the coding guidelines.

13-41: Good test setup with proper cleanup.

The test suite correctly:

Sets up test environment with beforeEach

Cleans up resources with afterEach

Initializes an editor view for consistent testing

This approach prevents test interference and memory leaks.

43-84: Well-designed tests for key press simulation.

The tests validate:

Basic key press functionality

Correct handling of modifier keys (ctrl, shift, alt, meta)

The use of spies to verify event dispatching ensures the implementation works as expected.

86-133: Thorough testing of paste operations.

The tests verify:

Pasting plain text content

Pasting HTML content

Proper clipboard data handling

The detailed validation of clipboard data ensures paste operations will work correctly.

135-171: Comprehensive mouse click simulation tests.

The tests validate:

Basic click functionality at specific coordinates

Support for different mouse buttons

Support for different click types (single/double)

This ensures the editor will correctly handle various mouse interactions.

173-234: Complete drag and drop operation tests.

The tests verify:

The full sequence of drag-and-drop events

Correct coordinates for start and end positions

Proper handling of drag data

The validation of event sequencing is particularly valuable for ensuring smooth drag-and-drop functionality.

src/components/text-editor/test-setup/content-generator.spec.ts (8)

1-12: Imports correctly use relative paths.

All imports from within the lime-elements module use relative paths as required by the coding guidelines.

14-41: Good tests for plain text document creation.

The tests validate:

Creation of documents with plain text

Document structure verification

Support for custom schemas

This ensures the basic document creation functionality works correctly.

43-72: Thorough HTML content parsing tests.

The tests verify:

Parsing of complex HTML structures

Correct document structure creation

Proper handling of empty/invalid HTML

This ensures the editor can properly handle HTML content from various sources.

74-140: Comprehensive formatted text tests.

The tests validate:

Application of multiple marks to text

Handling of marks with attributes (links)

Error handling for invalid mark types

The nested assertions provide detailed validation of the document structure.

🧰 Tools

🪛 Biome (1.9.4)

[error] 119-119: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

142-179: Well-structured bullet list tests.

The tests verify:

Creation of lists with multiple items

Proper document structure

Handling of empty lists

The checks on child nodes ensure the list structure is correctly created.

181-208: Good heading creation tests.

The tests validate:

Creation of headings with specific text

Support for different heading levels

Default level handling

This ensures headings will be correctly generated in the document.

210-235: Thorough blockquote tests.

The test validates:

Creation of blockquotes with text

Correct document structure (blockquote containing a paragraph)

This ensures blockquote formatting will work as expected.

237-254: Complete code block tests.

The test verifies:

Creation of code blocks with specific content

Correct document structure

This ensures code blocks will be properly formatted in the document.

src/components/text-editor/test-setup/command-tester.spec.ts (5)

1-9: Imports correctly use relative paths.

All imports from within the lime-elements module use relative paths as required by the coding guidelines.

11-50: Well-designed command result tests.

The tests thoroughly validate:

Handling of commands that cannot be applied

Processing of commands that generate transactions

Verification of state changes

This ensures the command execution framework works correctly.

52-114: Comprehensive command testing functionality.

The tests verify:

Command applicability determination

Document content validation after command execution

Document size changes tracking

The tests avoid relying on specific content ordering, making them more robust.

116-172: Thorough testing of view-dependent commands.

The tests validate:

Commands that require an editor view context

State updates through view

Proper cleanup of resources

The test correctly uses afterEach for cleanup, preventing memory leaks.

174-208: Well-structured tests for command tester factory.

The tests verify:

Creation of reusable command testers

Application across different document states

Content validation after command execution

This ensures the command tester factory pattern works correctly.

src/components/text-editor/test-setup/editor-view-builder.ts (4)

1-4: Import usage looks good.

The imports correctly use relative paths as required by the coding guidelines for lime-elements.

14-46: Function implementation LGTM.

The createEditorView function is well-implemented, providing all the necessary functionality to create an editor view for testing purposes with good defaults and options.

48-75: Dispatch spy implementation is clean and efficient.

The function appropriately creates a Jest mock with auto-update capability and handles view reference tracking correctly.

95-143: Thorough DOM environment mocking.

The mock implementation covers all the necessary DOM methods and properties needed for ProseMirror to function in a test environment.

src/components/text-editor/test-setup/editor-state-builder.ts (5)

1-5: Imports look good.

The imports correctly use relative paths as required by the coding guidelines.

6-29: Well-implemented state creation function.

The createEditorState function properly handles optional parameters and creates a document from content or an empty one as needed.

31-59: Selection state creation looks good.

The function correctly creates an editor state with a text selection at the specified positions.

61-77: Clean implementation of text selection.

The function properly creates and applies a text selection to an existing state.

79-91: Document parsing implementation is solid.

The helper function correctly converts HTML content to a ProseMirror document node.

src/components/text-editor/test-setup/command-tester.ts (6)

1-4: Imports look good.

The imports correctly use relative paths as required by the coding guidelines.

5-20: Well-documented interface.

The CommandResult interface is clearly defined with thorough documentation explaining all possible states.

22-60: Command result extraction is well implemented.

The function correctly handles command execution and captures the relevant transaction and state information.

62-120: Thorough command testing implementation.

The function provides comprehensive verification of command execution results, including content checks, size validation, and expected applicability.

122-185: DOM-aware command testing looks good.

The implementation correctly handles the view context needed for some commands and properly manages the DOM elements.

187-202: Utility function for command testing is clean.

The function creates a reusable tester for a specific command, which helps reduce boilerplate in tests.

src/components/text-editor/test-setup/content-generator.ts (6)

1-5: Imports look good.

The imports correctly use relative paths as required by the coding guidelines.

6-31: Document creation utilities look good.

The functions for creating documents with plain text and HTML content are well-implemented.

33-61: Formatted text handling is comprehensive.

The interface and function for applying marks to text are well-designed and implemented.

63-88: Mark application is implemented correctly.

The helper function properly creates text nodes with applied marks and includes good error handling.

90-118: Bullet list creation works well.

The function properly maps text items to list nodes and constructs a valid bullet list structure.

146-187: Blockquote and code block implementations are solid.

The functions correctly create the appropriate node structures for blockquotes and code blocks.

src/components/text-editor/test-setup/event-simulator.ts (2)

8-43: Well-implemented mock class for DataTransfer.

The MockDataTransfer class is well-designed, properly implementing the core functionality of the DataTransfer interface needed for testing. Good job including the dynamic getter for items.length to reflect the actual files array length.

45-84: Good implementation of key press simulation.

The KeyModifiers interface and simulateKeyPress function provide a clean and flexible way to simulate keyboard interactions in tests. The double-bang operator ensures proper boolean conversion for the modifiers.

src/components/text-editor/test-setup/editor-view-builder.spec.ts (3)

1-9: Properly using relative imports for internal module files.

The imports follow the coding guidelines correctly by using relative paths for imports from the same module, which is essential for avoiding production build failures.

11-24: Good test setup with proper cleanup.

The test suite has proper setup and teardown to prevent memory leaks. The afterEach hook ensures that resources are properly cleaned up between tests, which is a good testing practice.

192-247: Well-structured tests for mockProseMirrorDOMEnvironment.

The tests properly verify both the creation of mock DOM elements when none exist and preservation of existing DOM elements. Good use of beforeEach and afterEach hooks to preserve and restore the original window and document objects.

🧰 Tools

🪛 Biome (1.9.4)

[error] 210-210: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

[error] 211-211: Avoid the delete operator which can impact performance.

Unsafe fix: Use an undefined assignment instead.

(lint/performance/noDelete)

src/components/text-editor/test-setup/editor-view-builder.ts

src/components/text-editor/test-setup/editor-state-builder.ts

src/components/text-editor/test-setup/content-generator.ts

src/components/text-editor/test-setup/event-simulator.ts

src/components/text-editor/test-setup/editor-view-builder.spec.ts

src/components/text-editor/test-setup/content-generator.ts

coderabbitai

Actionable comments posted: 5

♻️ Duplicate comments (1)

src/components/text-editor/test-setup/event-simulator.ts (1)
148-163: Simplify redundant conditional check.

There's a redundant condition check at line 161. The condition typeof document.elementFromPoint === 'undefined' is already checked at line 148, making the nested check unnecessary.
if (typeof document.elementFromPoint === 'undefined') {
    // For tests, just pretend the click always hits the editor
    // This prevents errors when ProseMirror calls elementFromPoint
    (view.dom as any).getBoundingClientRect = () => ({
        left: 0,
        top: 0,
        right: 200,
        bottom: 200,
        width: 200,
        height: 200,
    });

    // Mock elementFromPoint to avoid errors
-   if (typeof document.elementFromPoint === 'undefined') {
-       (document as any).elementFromPoint = () => view.dom;
-   }
+   (document as any).elementFromPoint = () => view.dom;
}

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between fb9a5ab and ec8558a.

📒 Files selected for processing (10)

src/components/text-editor/test-setup/command-tester.spec.ts (1 hunks)
src/components/text-editor/test-setup/command-tester.ts (1 hunks)
src/components/text-editor/test-setup/content-generator.spec.ts (1 hunks)
src/components/text-editor/test-setup/content-generator.ts (1 hunks)
src/components/text-editor/test-setup/editor-view-builder.spec.ts (1 hunks)
src/components/text-editor/test-setup/editor-view-builder.ts (1 hunks)
src/components/text-editor/test-setup/event-simulator.spec.ts (1 hunks)
src/components/text-editor/test-setup/event-simulator.ts (1 hunks)
src/components/text-editor/test-setup/text-editor-test-suite-guide.md (1 hunks)
src/components/text-editor/test-setup/text-editor-test-utils.md (1 hunks)

📓 Path-based instructions (1)

**/*.{ts,tsx}

⚙️ CodeRabbit Configuration File

Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

Files:

src/components/text-editor/test-setup/command-tester.spec.ts
src/components/text-editor/test-setup/editor-view-builder.ts
src/components/text-editor/test-setup/event-simulator.ts
src/components/text-editor/test-setup/command-tester.ts
src/components/text-editor/test-setup/editor-view-builder.spec.ts
src/components/text-editor/test-setup/content-generator.ts
src/components/text-editor/test-setup/content-generator.spec.ts
src/components/text-editor/test-setup/event-simulator.spec.ts

🧠 Learnings (3)

src/components/text-editor/test-setup/event-simulator.ts (1)

Learnt from: adrianschmidt
PR: #3547
File: src/components/text-editor/examples/text-editor-with-inline-images-file-storage.tsx:46-46
Timestamp: 2025-05-02T07:14:19.314Z
Learning: When reviewing TypeScript/JavaScript code, don't suggest converting object literals to constants when the object is mutable and will be modified later in the code. Due to reference semantics, this can cause unintended side effects where the "constant" version is also modified.

src/components/text-editor/test-setup/editor-view-builder.spec.ts (3)

Learnt from: adrianschmidt
PR: #3547
File: src/components/text-editor/examples/text-editor-with-inline-images-file-storage.tsx:46-46
Timestamp: 2025-05-02T07:14:19.314Z
Learning: When reviewing TypeScript/JavaScript code, don't suggest converting object literals to constants when the object is mutable and will be modified later in the code. Due to reference semantics, this can cause unintended side effects where the "constant" version is also modified.

Learnt from: adrianschmidt
PR: #3607
File: docs-index.html:0-0
Timestamp: 2025-07-16T13:28:26.858Z
Learning: Before suggesting any code changes as "safe," thoroughly analyze the entire codebase context, including dependencies, usage patterns, and potential side effects. What appears to be a simple performance optimization might break existing functionality due to execution order or timing dependencies.

Learnt from: adrianschmidt
PR: #3607
File: docs-index.html:0-0
Timestamp: 2025-07-16T13:28:26.858Z
Learning: When suggesting script optimizations like adding defer or async attributes, always analyze the entire HTML file to check for dependencies between external scripts and inline scripts. Scripts loaded with defer execute after DOM parsing but before DOMContentLoaded, which can break synchronous dependencies with inline scripts that expect variables to be immediately available.

src/components/text-editor/test-setup/content-generator.ts (2)

Learnt from: adrianschmidt
PR: #3530
File: src/components/text-editor/examples/text-editor-composite.tsx:4-7
Timestamp: 2025-04-17T09:39:36.254Z
Learning: For lime-elements, example files should import types from the public API using '@limetech/lime-elements' rather than defining duplicate types locally. This includes types like EditorUiType which are part of the component's public API.

Learnt from: adrianschmidt
PR: #3464
File: src/components/text-editor/prosemirror-adapter/plugins/image/inserter.ts:1-11
Timestamp: 2025-03-04T14:27:29.714Z
Learning: In example components (typically found in src/components/*/examples/), imports of lime-elements exports should use @limetech/lime-elements instead of relative paths. This is because example components aren't included in type declarations and are used in documentation to show developers how to properly use lime-elements components.

🧬 Code Graph Analysis (5)

src/components/text-editor/test-setup/command-tester.spec.ts (2)

src/components/text-editor/test-setup/command-tester.ts (4)

getCommandResult (29-58)

testCommand (72-118)

testCommandWithView (128-179)

createCommandTester (187-196)

src/components/text-editor/test-setup/editor-view-builder.ts (1)

cleanupEditorView (78-85)

src/components/text-editor/test-setup/editor-view-builder.ts (1)

src/components/text-editor/test-setup/schema-builder.ts (1)

createTestSchema (12-33)

src/components/text-editor/test-setup/command-tester.ts (1)

src/components/text-editor/test-setup/editor-view-builder.ts (1)

createEditorView (14-45)

src/components/text-editor/test-setup/editor-view-builder.spec.ts (1)

src/components/text-editor/test-setup/editor-view-builder.ts (4)

cleanupEditorView (78-85)

createEditorView (14-45)

createDispatchSpy (53-69)

mockProseMirrorDOMEnvironment (93-135)

src/components/text-editor/test-setup/content-generator.ts (1)

src/components/text-editor/test-setup/schema-builder.ts (1)

createTestSchema (12-33)

🪛 LanguageTool

src/components/text-editor/test-setup/text-editor-test-utils.md

[grammar] ~1-~1: Use correct spacing
Context: # Text Editor Testing Utilities This directory contains utility function...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~3-~3: Use correct spacing
Context: ...e text editor component and its related components. ## Core Testing Utilities 1. **Schema Setu...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~5-~5: Use correct spacing
Context: ...ts related components. ## Core Testing Utilities 1. Schema Setup - createTestSchema()...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~7-~7: Use correct spacing
Context: ... ## Core Testing Utilities 1. Schema Setup - createTestSchema() - Creates a ProseMirror schema with all n...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~8-~8: Use hyphens correctly
Context: ...Mirror schema with all needed marks and nodes - createCustomTestSchema(options) - Creates a custom schema with specified...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~9-~9: There might be a mistake here.
Context: ... Creates a custom schema with specified extensions 2. Editor State Utilities - `createEdi...

(QB_NEW_EN_OTHER)

[grammar] ~11-~11: Use correct spacing
Context: ...specified extensions 2. Editor State Utilities - createEditorState(content?, schema?) - Creates an editor state with optional c...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~12-~12: Use hyphens correctly
Context: ...- Creates an editor state with optional content - createEditorStateWithSelection(content, from, to, schema?) - Creates an editor state with a specifi...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~13-~13: There might be a mistake here.
Context: ...Creates an editor state with a specific selection 3. Editor View Utilities - `createEdit...

(QB_NEW_EN_OTHER)

[grammar] ~15-~15: Use correct spacing
Context: ... a specific selection 3. Editor View Utilities - createEditorView(state, dispatchSpy?) - Creates a ProseMirror editor view with ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~16-~16: Use hyphens correctly
Context: ...r editor view with an optional dispatch spy - cleanupEditorView(view) - Properly destroys an editor view to pr...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~17-~17: There might be a mistake here.
Context: ...stroys an editor view to prevent memory leaks 4. Content Generation - `createDocWith...

(QB_NEW_EN_OTHER)

[grammar] ~19-~19: Use correct spacing
Context: ...w to prevent memory leaks 4. Content Generation - createDocWithText(text, schema?) - Creates a document with plain text -...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~20-~20: Use hyphens correctly
Context: ...hema?)- Creates a document with plain text -createDocWithHTML(html, schema?)` - Creates a document from HTML string ...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~21-~21: There might be a problem here.
Context: ...ml, schema?)- Creates a document from HTML string -createDocWithFormattedText(text, marks, schema?)` - Creates a document with marked text 5...

(QB_NEW_EN_MERGED_MATCH)

[grammar] ~22-~22: There might be a mistake here.
Context: ...ema?)- Creates a document with marked text 5. **Command Testing** -testCommand(comm...

(QB_NEW_EN_OTHER)

[grammar] ~24-~24: Use correct spacing
Context: ...document with marked text 5. Command Testing - testCommand(command, state, expected) - Tests a command and verifies the result...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~25-~25: Use correct spacing
Context: ...ed)- Tests a command and verifies the result -getCommandResult(command, state)` - Gets the result of applying a command ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~26-~26: Use correct spacing
Context: ...state)- Gets the result of applying a command -testCommandWithView(command, state, expected)` - Tests a command that requires view cont...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~27-~27: Use correct spacing
Context: ...)- Tests a command that requires view context -createCommandTester(command)` - Creates a reusable tester for a specifi...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~28-~28: Use correct spacing
Context: ...reates a reusable tester for a specific command 6. Mocks - createDispatchSpy() - Cre...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~31-~31: Use hyphens correctly
Context: ...- Creates a Jest spy for the dispatch function -createMockEditorView()- Creates a mocked editor view -mo...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~32-~32: Use hyphens correctly
Context: ...EditorView()- Creates a mocked editor view -mockProseMirrorDOMEnvironment()` - Sets up the DOM environment for ProseM...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~33-~33: There might be a mistake here.
Context: ...nt()- Sets up the DOM environment for ProseMirror 7. **Selection Helpers** -setTextSelecti...

(QB_NEW_EN_OTHER)

[grammar] ~35-~35: Use correct spacing
Context: ...ronment for ProseMirror 7. Selection Helpers - setTextSelection(state, from, to) - Creates a text selection - `setNodeS...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~36-~36: Use correct spacing
Context: ...tion(state, from, to)- Creates a text selection -setNodeSelection(state, pos)` - Creates a node selection 8. **Event Si...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~37-~37: Use correct spacing
Context: ...Selection(state, pos)- Creates a node selection 8. **Event Simulation** -simulateKeyPres...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~39-~39: Use correct spacing
Context: ... - Creates a node selection 8. Event Simulation - simulateKeyPress(view, key, modifiers?) - Simulates a key press on the editor ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~40-~40: Use correct spacing
Context: ...fiers?)- Simulates a key press on the editor -simulatePaste(view, content)` - Simulates pasting content into the edit...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~42-~42: Use correct spacing
Context: ...clientY, options?)- Simulates a mouse click -simulateDragAndDrop(view, startX, startY, endX, endY, dragData?)` - Simulates drag and drop ## Usage Examp...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~43-~43: Use correct spacing
Context: ... endY, dragData?)` - Simulates drag and drop ## Usage Example ```typescript import { ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~45-~45: Use correct spacing
Context: ...?)` - Simulates drag and drop ## Usage Example typescript import { createTestSchema, createEditorState, createEditorView, simulateKeyPress, cleanupEditorView } from '../test-setup/test-utils'; describe('Text Editor', () => { let schema, state, view; beforeEach(() => { schema = createTestSchema(); state = createEditorState('Test content', schema); view = createEditorView(state); }); afterEach(() => { cleanupEditorView(view); }); it('should apply bold formatting with keyboard shortcut', () => { // Setup test case // Simulate keypress // Assert results }); }); ## Command Testing Example ```typescript i...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~77-~77: Use correct spacing
Context: ...sults }); }); ## Command Testing Example typescript import { createEditorState, testCommand, createCommandTester } from '../test-setup/test-utils'; import { toggleMark } from 'prosemirror-commands'; describe('Text Editor Commands', () => { it('should toggle bold mark when applicable', () => { // Create state with selected text const state = createEditorStateWithSelection('

Test content

', 1, 5); // Get the bold mark from schema const boldMark = state.schema.marks.strong; const toggleBold = toggleMark(boldMark); // Test the command testCommand(toggleBold, state, { shouldApply: true, // Additional expectations if needed }); }); it('should test multiple states with the same command', () => { // Create a reusable tester for a command const testToggleBold = createCommandTester(toggleMark(schema.marks.strong)); // Test with different states testToggleBold(state1, { shouldApply: true }); testToggleBold(state2, { shouldApply: false }); }); }); ## Event Simulation Example typescript ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~114-~114: Use correct spacing
Context: ... }); }); }); ## Event Simulation Example typescript import { createEditorState, createEditorView, simulateKeyPress, simulatePaste, cleanupEditorView } from '../test-setup/test-utils'; describe('Text Editor Event Handling', () => { let view, container; beforeEach(() => { const state = createEditorState('

Test content

'); const result = createEditorView(state); view = result.view; container = result.container; }); afterEach(() => { cleanupEditorView(view, container); }); it('should handle Ctrl+B keyboard shortcut', () => { // Select some text first // ... // Simulate pressing Ctrl+B for bold simulateKeyPress(view, 'b', { ctrl: true }); // Verify text is now bold // ... }); it('should handle paste events correctly', () => { // Simulate pasting HTML content simulatePaste(view, { text: 'Plain text version', html: '

Formatted HTML content

' }); // Verify pasted content was properly processed // ... }); }); ```

(QB_NEW_EN_OTHER_ERROR_IDS_5)

src/components/text-editor/test-setup/text-editor-test-suite-guide.md

[grammar] ~1-~1: Use correct spacing
Context: # Text Editor Testing Suite Guide This document serves as the practical gu...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~3-~3: Use correct spacing
Context: ...ing tests using the text editor testing utilities. ## Overview Our testing suite provides a c...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~7-~7: There might be a mistake here.
Context: ...effectively test your ProseMirror-based components: - Schema setup for testing - Editor state...

(QB_NEW_EN_OTHER)

[grammar] ~14-~14: Use correct spacing
Context: ... testing - Event simulation - Mocks and helpers ## Available Utilities ### 1. Schema Setup...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~16-~16: Use correct spacing
Context: ...ation - Mocks and helpers ## Available Utilities ### 1. Schema Setup - createTestSchema() ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~18-~18: Use correct spacing
Context: ... ## Available Utilities ### 1. Schema Setup - createTestSchema() - Creates a standard ProseMirror schema...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~20-~20: Use hyphens correctly
Context: ...Mirror schema with all needed marks and nodes - createCustomTestSchema(options) - Creates a custom schema with specified...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~21-~21: There might be a mistake here.
Context: ... Creates a custom schema with specified extensions typescript // Create a standard schema with all marks and nodes const schema = createTestSchema(); // Create a custom schema with only specific features const customSchema = createCustomTestSchema({ addLists: true, // Add ordered and bullet list support addStrikethrough: true, // Add strikethrough mark addUnderline: false // Skip underline mark }); ### 2. Editor State Utilities - `createEdit...

(QB_NEW_EN_OTHER)

[grammar] ~35-~35: Use correct spacing
Context: ...rline mark }); ``` ### 2. Editor State Utilities - createEditorState(content?, schema?, plugins?) - Creates an editor state with optional...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~37-~37: Use correct spacing
Context: ...- Creates an editor state with optional content - createEditorStateWithSelection(content, from, to, schema?, plugins?) - Creates an editor state with a specific...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~38-~38: Use correct spacing
Context: ...Creates an editor state with a specific selection - setTextSelection(state, from, to?) - Sets a text selection on an existing st...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~39-~39: Use correct spacing
Context: ... - Sets a text selection on an existing state - createDocumentWithText(text?, schema?) - Creates a simple document with text ``...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~40-~40: Use correct spacing
Context: ...ema?)- Creates a simple document with text ```typescript // Create an empty editor state const emptyState = createEditorState(); // Create state with HTML content const state = createEditorState('This is bold text.'); // Create state with selection (from position 5 to 10) const stateWithSelection = createEditorStateWithSelection( 'Select this text', 5, 10 ); // Add a text selection to an existing state const newState = setTextSelection(state, 1, 5); ``` ### 3. Editor View Utilities -createEdito...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~60-~60: Use correct spacing
Context: ...n(state, 1, 5); ``` ### 3. Editor View Utilities - createEditorView(state?, dispatchSpy?, parentElement?) - Creates a ProseMirror editor view wit...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~62-~62: Use correct spacing
Context: ...rror editor view with optional dispatch spy - createDispatchSpy(autoUpdate?) - Creates a Jest spy function for trackin...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~63-~63: Use correct spacing
Context: ...Jest spy function for tracking dispatch calls - cleanupEditorView(view, container?) - Properly destroys an editor view to pre...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~64-~64: Use correct spacing
Context: ...stroys an editor view to prevent memory leaks - mockProseMirrorDOMEnvironment() - Sets up the DOM environment for ProseMi...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~65-~65: Use correct spacing
Context: ... the DOM environment for ProseMirror in Node.js typescript // Create a view with state const { view, container } = createEditorView(state); // Create a view with dispatch tracking const dispatchSpy = createDispatchSpy(true); // autoUpdate=true const { view: viewWithSpy } = createEditorView(state, dispatchSpy); // Create a view with custom parent element const parent = document.createElement('div'); const { view: viewWithParent } = createEditorView(state, null, parent); // Clean up after testing cleanupEditorView(view, container); // Mock DOM environment for Node.js tests const cleanup = mockProseMirrorDOMEnvironment(); // ... test code ... cleanup(); // Restore original environment ### 4. Content Generation - `createDocWithT...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~88-~88: Use correct spacing
Context: ...riginal environment ``` ### 4. Content Generation - createDocWithText(text, schema?) - Creates a document with plain text - ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~90-~90: Use correct spacing
Context: ...hema?)- Creates a document with plain text -createDocWithHTML(html, schema?)- Creates a document from HTML string -...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~91-~91: There might be a problem here.
Context: ...ml, schema?)- Creates a document from HTML string -createDocWithFormattedText(text, marks, schema?)- Creates a document with marked text -...

(QB_NEW_EN_MERGED_MATCH)

[grammar] ~92-~92: Use correct spacing
Context: ...ema?)- Creates a document with marked text -createDocWithBulletList(items, schema?)` - Creates a document with a bullet list -...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~93-~93: Use correct spacing
Context: ...a?)- Creates a document with a bullet list -createDocWithHeading(text, level?, schema?)- Creates a document with a heading -cr...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~94-~94: Use correct spacing
Context: ..., schema?)- Creates a document with a heading -createDocWithBlockquote(text, schema?)` - Creates a document with a blockquote - ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~95-~95: Use correct spacing
Context: ..., schema?)- Creates a document with a blockquote -createDocWithCodeBlock(code, schema?)- Creates a document with a code block ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~96-~96: Use correct spacing
Context: ...ema?)- Creates a document with a code block ```typescript // Create documents with different content types const textDoc = createDocWithText('Simple text'); const htmlDoc = createDocWithHTML('HTML content'); // Create a document with formatted text const formattedDoc = createDocWithFormattedText('Bold and italic text', [ { type: 'strong', attrs: {} }, // Apply to all text { type: 'em', attrs: {}, from: 0, to: 4 } // Only apply to "Bold" ]); // Create various structured documents const listDoc = createDocWithBulletList(['Item 1', 'Item 2', 'Item 3']); const headingDoc = createDocWithHeading('Section Title', 2); // h2 const quoteDoc = createDocWithBlockquote('Famous quote here'); const codeDoc = createDocWithCodeBlock('function test() { return true; }'); ``` ### 5. Command Testing -testCommand(comma...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~116-~116: Use correct spacing
Context: ...{ return true; }'); ``` ### 5. Command Testing - testCommand(command, state, expected) - Tests a command and verifies the resu...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~118-~118: Use correct spacing
Context: ...ed)- Tests a command and verifies the result -getCommandResult(command, state)` - Gets the result of applying a command -...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~119-~119: Use correct spacing
Context: ...state)- Gets the result of applying a command -testCommandWithView(command, state, expected)` - Tests a command that requires view cont...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~120-~120: Use correct spacing
Context: ...)- Tests a command that requires view context -createCommandTester(command)` - Creates a reusable tester for a specifi...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~121-~121: Use correct spacing
Context: ...reates a reusable tester for a specific command typescript // Test if a command can be applied const result = getCommandResult(toggleMark(schema.marks.strong), state); expect(result.canApply).toBe(true); // Test a command with expectations testCommand(toggleMark(schema.marks.strong), state, { shouldApply: true, // Command should apply docChanged: true, // Document should change selectionChanged: false, // Selection should not change storedMarksChanged: false // Stored marks should not change }); // Create a reusable command tester const testBold = createCommandTester(toggleMark(schema.marks.strong)); testBold(state1, { shouldApply: true }); testBold(state2, { shouldApply: false }); // Test a command that requires view context testCommandWithView(someViewCommand, state, { shouldApply: true, // other expectations... }); ### 6. Mocks - createDispatchSpy() - Crea...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~148-~148: Use correct spacing
Context: .../ other expectations... }); ``` ### 6. Mocks - createDispatchSpy() - Creates a Jest spy for the dispatch f...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~150-~150: Use hyphens correctly
Context: ...- Creates a Jest spy for the dispatch function -mockProseMirrorDOMEnvironment()` - Sets up the DOM environment for ProseM...

(QB_NEW_EN_OTHER_ERROR_IDS_29)

[grammar] ~151-~151: There might be a mistake here.
Context: ...nt()- Sets up the DOM environment for ProseMirror ```typescript // Create a dispatch spy with auto-updating state const dispatchSpy = createDispatchSpy(true); const { view } = createEditorView(state, dispatchSpy); // Execute a command that should dispatch someCommand(view.state, view.dispatch, view); // Verify dispatch was called expect(dispatchSpy).toHaveBeenCalled(); // Get the latest state after updates const updatedState = dispatchSpy.state; ``` ### 7. Selection Helpers -setTextSelectio...

(QB_NEW_EN_OTHER)

[grammar] ~168-~168: Use correct spacing
Context: ...ispatchSpy.state; ``` ### 7. Selection Helpers - setTextSelection(state, from, to) - Creates a text selection - `setNodeSe...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~170-~170: Use correct spacing
Context: ...tion(state, from, to)- Creates a text selection -setNodeSelection(state, pos)` - Creates a node selection (planned) ```...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~171-~171: Use correct spacing
Context: ...state, pos)- Creates a node selection (planned) ```typescript // Create a state with a selection let state = createEditorState('Select this text'); // Apply a text selection from position 3 to 9 state = setTextSelection(state, 3, 9); expect(state.selection.from).toBe(3); expect(state.selection.to).toBe(9); ``` ### 8. Event Simulation -simulateKeyPress...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~183-~183: Use correct spacing
Context: ...election.to).toBe(9); ``` ### 8. Event Simulation - simulateKeyPress(view, key, modifiers?) - Simulates a key press on the editor -...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~185-~185: Use correct spacing
Context: ...fiers?)- Simulates a key press on the editor -simulatePaste(view, content)` - Simulates pasting content into the edit...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~187-~187: Use correct spacing
Context: ...clientY, options?)- Simulates a mouse click -simulateDragAndDrop(view, startX, startY, endX, endY, dragData?)` - Simulates drag and drop ```typescript ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~188-~188: Use correct spacing
Context: ... endY, dragData?)` - Simulates drag and drop typescript // Simulate keyboard shortcuts simulateKeyPress(view, 'b', { ctrl: true }); // Ctrl+B for bold simulateKeyPress(view, 'z', { ctrl: true }); // Ctrl+Z for undo simulateKeyPress(view, 'Tab'); // Tab key // Simulate paste with both text and HTML simulatePaste(view, { text: 'Plain text', html: 'Formatted HTML' }); // Simulate mouse interactions simulateClick(view, 100, 150); // Click at x=100, y=150 simulateDragAndDrop(view, 50, 50, 200, 50); // Drag from x=50 to x=200 ## Common Testing Patterns ### Basic Test ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~207-~207: Use correct spacing
Context: ...om x=50 to x=200 ## Common Testing Patterns ### Basic Test Setup typescript import {...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~209-~209: Use correct spacing
Context: ...Common Testing Patterns ### Basic Test Setup typescript import { createTestSchema, createEditorState, createEditorView, cleanupEditorView } from '../test-setup/test-utils'; describe('Text Editor', () => { let schema, state, view, container; beforeEach(() => { schema = createTestSchema(); state = createEditorState('Test content', schema); const result = createEditorView(state); view = result.view; container = result.container; }); afterEach(() => { cleanupEditorView(view, container); }); it('should render content correctly', () => { expect(view.dom.textContent).toContain('Test content'); }); }); ### Testing Commands ```typescript import {...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~240-~240: Use correct spacing
Context: ...t content'); }); }); ### Testing Commands typescript import { createTestSchema, createEditorStateWithSelection, testCommand } from '../test-setup/test-utils'; import { toggleMark } from 'prosemirror-commands'; describe('Bold Command', () => { let schema; beforeEach(() => { schema = createTestSchema(); }); it('should apply bold to selected text', () => { // Create state with text selection const state = createEditorStateWithSelection('

Test content

', 1, 5); // Test the bold command const boldMark = schema.marks.strong; testCommand(toggleMark(boldMark), state, { shouldApply: true, docChanged: true }); }); it('should toggle off bold when already applied', () => { // Create state with bold text and selection const state = createEditorStateWithSelection( '

Test content

', 1, 5 ); // Test the bold command (should toggle off) const boldMark = schema.marks.strong; testCommand(toggleMark(boldMark), state, { shouldApply: true, docChanged: true }); // Verify bold was removed (use the resulting state from testCommand) // ... }); }); ### Testing Keyboard Shortcuts typescrip...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~289-~289: Use correct spacing
Context: ...... }); }); ### Testing Keyboard Shortcuts typescript import { createTestSchema, createEditorState, createEditorView, setTextSelection, simulateKeyPress, cleanupEditorView } from '../test-setup/test-utils'; describe('Keyboard Shortcuts', () => { let schema, view, container; beforeEach(() => { schema = createTestSchema(); const state = createEditorState('

Test content

', schema); const result = createEditorView(state); view = result.view; container = result.container; }); afterEach(() => { cleanupEditorView(view, container); }); it('should apply bold with Ctrl+B', () => { // Set selection const newState = setTextSelection(view.state, 1, 5); view.dispatch(newState.tr); // Simulate Ctrl+B simulateKeyPress(view, 'b', { ctrl: true }); // Verify result const textNode = view.state.doc.nodeAt(1); const hasBold = textNode.marks.some(mark => mark.type.name === 'strong'); expect(hasBold).toBe(true); }); it('should create a list when pressing Tab in a list item', () => { // Set up a list state const listState = createEditorState( '

First item
Second item

' ); // Update view with list state view.updateState(listState); // Set cursor in second list item const pos = 25; // Position inside second list item view.dispatch(view.state.tr.setSelection( TextSelection.create(view.state.doc, pos) )); // Simulate Tab key simulateKeyPress(view, 'Tab'); // Verify the second item was indented const listDepth = findListDepth(view.state, pos); expect(listDepth).toBe(2); // Now nested }); }); // Helper function to find list depth function findListDepth(state, pos) { let depth = 0; let node = state.doc.resolve(pos).node(0); // Implementation details... return depth; } ### Testing Paste Handling typescript im...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~363-~363: Use correct spacing
Context: ... return depth; } ### Testing Paste Handling typescript import { createEditorState, createEditorView, simulatePaste, cleanupEditorView } from '../test-setup/test-utils'; describe('Paste Handling', () => { let view, container; beforeEach(() => { const state = createEditorState('

Existing content

'); const result = createEditorView(state); view = result.view; container = result.container; // Position cursor at end of paragraph const endPos = 17; view.dispatch(view.state.tr.setSelection( TextSelection.create(view.state.doc, endPos) )); }); afterEach(() => { cleanupEditorView(view, container); }); it('should handle plain text paste', () => { simulatePaste(view, { text: 'Pasted text' }); expect(view.state.doc.textContent).toBe('Existing contentPasted text'); }); it('should handle HTML paste', () => { simulatePaste(view, { text: 'Pasted text with bold', html: 'Pasted text with bold' }); expect(view.state.doc.textContent).toBe('Existing contentPasted text with bold'); // Check if "bold" has the strong mark const textPos = view.state.doc.textContent.indexOf('bold'); const nodeWithMark = view.state.doc.nodeAt(textPos); const hasBold = nodeWithMark.marks.some(mark => mark.type.name === 'strong'); expect(hasBold).toBe(true); }); }); ### Testing Lists typescript import { ...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~416-~416: Use correct spacing
Context: ....toBe(true); }); }); ### Testing Lists typescript import { createTestSchema, createDocWithBulletList, createEditorState, createEditorView, simulateKeyPress, cleanupEditorView } from '../test-setup/test-utils'; import { wrapInList } from 'prosemirror-schema-list'; describe('List Functionality', () => { let schema, view, container; beforeEach(() => { schema = createTestSchema(); const listItems = ['First item', 'Second item', 'Third item']; const doc = createDocWithBulletList(listItems, schema); const state = createEditorState(doc); const result = createEditorView(state); view = result.view; container = result.container; }); afterEach(() => { cleanupEditorView(view, container); }); it('should indent list item on Tab', () => { // Position cursor in second list item const secondItemPos = findPositionInListItem(view.state, 1); view.dispatch(view.state.tr.setSelection( TextSelection.create(view.state.doc, secondItemPos) )); // Simulate Tab simulateKeyPress(view, 'Tab'); // Verify second item is now a sublist of first item const listStructure = getListStructure(view.state); expect(listStructure).toEqual({ items: [ { text: 'First item', children: [ { text: 'Second item', children: [] } ]}, { text: 'Third item', children: [] } ] }); }); it('should outdent list item on Shift+Tab', () => { // First, indent second item const secondItemPos = findPositionInListItem(view.state, 1); view.dispatch(view.state.tr.setSelection( TextSelection.create(view.state.doc, secondItemPos) )); simulateKeyPress(view, 'Tab'); // Then outdent it with Shift+Tab simulateKeyPress(view, 'Tab', { shift: true }); // Verify structure is back to flat list const listStructure = getListStructure(view.state); expect(listStructure).toEqual({ items: [ { text: 'First item', children: [] }, { text: 'Second item', children: [] }, { text: 'Third item', children: [] } ] }); }); // Helper functions function findPositionInListItem(state, itemIndex) { // Implementation to find cursor position in specific list item return 0; // Placeholder } function getListStructure(state) { // Implementation to extract list structure return { items: [] }; // Placeholder } }); ``` ## Implementation Status | Category | Util...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~503-~503: Use correct spacing
Context: ...ceholder } }); ``` ## Implementation Status | Category | Utility | Status | |-------...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~538-~538: Use correct spacing
Context: ...agAndDrop()` | ✅ Implemented | ## Best Practices 1. Setup and Cleanup - Always clean up...

(QB_NEW_EN_OTHER_ERROR_IDS_5)

[grammar] ~541-~541: There might be a mistake here.
Context: ...tor views after tests to prevent memory leaks - Create schema once per test suite when p...

(QB_NEW_EN_OTHER)

[grammar] ~542-~542: There might be a mistake here.
Context: ... Create schema once per test suite when possible - Use beforeEach and afterEach for con...

(QB_NEW_EN_OTHER)

[grammar] ~543-~543: There might be a mistake here.
Context: ...nd afterEach for consistent setup and cleanup 2. Content Creation - Use the appropri...

(QB_NEW_EN_OTHER)

[grammar] ~546-~546: There might be a mistake here.
Context: ...ontent generation utility for your test case - Create realistic content for more robust...

(QB_NEW_EN_OTHER)

[grammar] ~547-~547: There might be a mistake here.
Context: ...reate realistic content for more robust tests - Use HTML strings for complex document st...

(QB_NEW_EN_OTHER)

[grammar] ~548-~548: There might be a mistake here.
Context: ...- Use HTML strings for complex document structures 3. Command Testing - Test commands in ...

(QB_NEW_EN_OTHER)

[grammar] ~551-~551: There might be a mistake here.
Context: ...ds in isolation with testCommand when possible - Test both positive and negative cases (w...

(QB_NEW_EN_OTHER)

[grammar] ~552-~552: Use articles correctly
Context: ... both positive and negative cases (when command should and shouldn't apply) - Verify...

(QB_NEW_EN_OTHER_ERROR_IDS_11)

[grammar] ~552-~552: There might be a mistake here.
Context: ...ases (when command should and shouldn't apply) - Verify document structure after command ...

(QB_NEW_EN_OTHER)

[grammar] ~553-~553: There might be a mistake here.
Context: ...Verify document structure after command application 4. Event Handling - For keyboard short...

(QB_NEW_EN_OTHER)

[grammar] ~556-~556: There might be a mistake here.
Context: ...n is set up correctly before simulating keys - When testing paste events, include both ...

(QB_NEW_EN_OTHER)

[grammar] ~557-~557: There might be a mistake here.
Context: ...aste events, include both text and HTML variants - For mouse events, calculate positions re...

(QB_NEW_EN_OTHER)

[grammar] ~558-~558: There might be a mistake here.
Context: ...late positions relative to the document structure 5. State Management - Remember that ed...

(QB_NEW_EN_OTHER)

[typographical] ~561-~561: To join two clauses or set off examples, consider using an em dash.
Context: ...nt** - Remember that editor state is immutable - always use transactions - Use `view.d...

(QB_NEW_EN_DASH_RULE_EM)

[grammar] ~561-~561: There might be a mistake here.
Context: ... editor state is immutable - always use transactions - Use view.dispatch(tr) to update the vi...

(QB_NEW_EN_OTHER)

[grammar] ~562-~562: There might be a mistake here.
Context: ...view.dispatch(tr)to update the view's state - UsedispatchSpywithautoUpdate=true`...

(QB_NEW_EN_OTHER)

[grammar] ~563-~563: There might be a mistake here.
Context: ...withautoUpdate=true` to track state changes 6. Test Organization - Group related t...

(QB_NEW_EN_OTHER)

[grammar] ~566-~566: There might be a mistake here.
Context: ...Organization** - Group related tests logically - Test edge cases (empty documents, select...

(QB_NEW_EN_OTHER)

[grammar] ~567-~567: There might be a mistake here.
Context: ...e cases (empty documents, selections at boundaries) - Test interactions between features (e.g....

(QB_NEW_EN_OTHER)

[grammar] ~568-~568: There might be a mistake here.
Context: ...g., how lists interact with other block types) 7. Debugging Tips - Use `console.log(J...

(QB_NEW_EN_OTHER)

[grammar] ~571-~571: There might be a mistake here.
Context: ....state.doc.toJSON()))to view document structure - Check selection ranges withconsole.log...

(QB_NEW_EN_OTHER)

[grammar] ~573-~573: Use correct spacing
Context: ... - Add debug elements to show editor content: container.appendChild(view.dom)

(QB_NEW_EN_OTHER_ERROR_IDS_5)

🪛 GitHub Check: Lint

src/components/text-editor/test-setup/command-tester.spec.ts

[failure] 145-145:
Delete ,

[failure] 117-117:
Delete ,

[failure] 81-81:
Delete ,

[failure] 44-44:
Delete ,

src/components/text-editor/test-setup/command-tester.ts

[warning] 120-120:
Missing JSDoc @param "expected.docContentAfter" declaration

[warning] 120-120:
Missing JSDoc @param "expected.shouldApply" declaration

[failure] 91-91:
Delete ,

[failure] 80-80:
Delete ,

[warning] 64-64:
Missing @param "expected.includesContent"

[warning] 64-64:
Missing @param "expected.docSizeAfter"

[warning] 64-64:
Missing @param "expected.docContentAfter"

[warning] 64-64:
Missing @param "expected.shouldApply"

[warning] 60-60:
Missing JSDoc @param "expected.includesContent" declaration

[warning] 60-60:
Missing JSDoc @param "expected.docSizeAfter" declaration

[warning] 60-60:
Missing JSDoc @param "expected.docContentAfter" declaration

[warning] 60-60:
Missing JSDoc @param "expected.shouldApply" declaration

[failure] 41-41:
Delete ,

[failure] 31-31:
Delete ,

🪛 Biome (1.9.4)

src/components/text-editor/test-setup/content-generator.ts

[error] 122-122: This type annotation is trivially inferred from its initialization.

Safe fix: Remove the type annotation.

(lint/style/noInferrableTypes)

src/components/text-editor/test-setup/content-generator.spec.ts

[error] 115-115: Change to an optional chain.

Unsafe fix: Change to an optional chain.

(lint/complexity/useOptionalChain)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{ts,tsx}

⚙️ CodeRabbit Configuration File

Imports from other files in the same module (lime-elements) must use relative paths. Using absolute paths for imports will cause the production build to fail.

Files:

src/components/text-editor/test-setup/command-tester.spec.ts
src/components/text-editor/test-setup/editor-view-builder.ts
src/components/text-editor/test-setup/event-simulator.ts
src/components/text-editor/test-setup/command-tester.ts
src/components/text-editor/test-setup/editor-view-builder.spec.ts
src/components/text-editor/test-setup/content-generator.ts
src/components/text-editor/test-setup/content-generator.spec.ts
src/components/text-editor/test-setup/event-simulator.spec.ts