Document Import System with Validation

Build a document import system that safely processes external documents by validating their structure and handling potential errors gracefully.

Requirements

Create a system that:

1. Accepts documents in both HTML and JSON formats
2. Validates document structure before loading into the editor
3. Handles invalid content gracefully with appropriate error reporting
4. Provides recovery mechanisms when content doesn't match the expected schema
5. Configures the editor to emit validation errors instead of throwing exceptions

Functionality

Your system should provide:

• A function createValidatedEditor(element, options) that initializes an editor with validation enabled
• A function importDocument(editor, content, format) that safely imports content with validation
  • format can be "html" or "json"
  • Returns an object with { success: boolean, error?: string }
• An event listener setup that captures and logs validation errors
• Automatic content recovery for unknown or invalid nodes

Test Cases

Test 1: Valid HTML Import { @test }

• Import a valid HTML document: <p>Hello <strong>world</strong></p>
• Editor should successfully load the content
• Function should return { success: true }

@test

Test 2: Valid JSON Import { @test }

• Import a valid JSON document with structure: { "type": "doc", "content": [{ "type": "paragraph", "content": [{ "type": "text", "text": "Test" }] }] }
• Editor should successfully load the content
• Function should return { success: true }

@test

Test 3: Invalid HTML Handling { @test }

• Import HTML with invalid/unknown tags: <p>Text <unknowntag>invalid</unknowntag></p>
• System should handle the error gracefully
• Should emit a content error event
• Function should return { success: false, error: "..." }

@test

Test 4: Malformed JSON Handling { @test }

• Import malformed JSON structure (missing required fields)
• System should detect validation error
• Function should return { success: false, error: "..." }

@test

Implementation Notes

• Use only standard editor paragraphs and text formatting (bold, italic) to keep the schema simple
• Configure the editor to validate content on initialization
• Ensure all error events are properly captured and not thrown as exceptions

@generates

API

import { Editor } from '@tiptap/core';

/**
 * Creates an editor instance with content validation enabled.
 * Configures the editor to emit errors instead of throwing exceptions.
 */
export function createValidatedEditor(
  element: HTMLElement | null,
  options?: { onError?: (error: Error) => void }
): Editor;

/**
 * Safely imports a document into the editor with validation.
 * Returns success status and error message if validation fails.
 */
export function importDocument(
  editor: Editor,
  content: string,
  format: 'html' | 'json'
): { success: boolean; error?: string };

Dependencies { .dependencies }

@tiptap/core { .dependency }

Provides the rich text editor framework with content validation capabilities.

@tiptap/starter-kit { .dependency }

Provides basic extensions for text editing (Document, Paragraph, Text, Bold, Italic).