🔍 Code Extractor

Converts Quill Delta operations (rich text format) to HTML markup while preserving the order and structure of formatted text, headers, lists, and inline styles.

Purpose

This function transforms Quill editor's Delta format (a JSON-based representation of rich text) into standard HTML. It handles inline formatting (bold, italic, underline, code, links), block-level elements (headers, paragraphs, lists), and properly groups consecutive list items into ul/ol tags. The function is designed to maintain the exact order of content as it appears in the Delta format, making it suitable for document export and rendering operations.

Source Code

def delta_to_html(ops):
    """Convert Quill Delta ops to HTML while preserving order"""
    html_parts = []
    current_paragraph = []
    
    for i, op in enumerate(ops):
        if 'insert' not in op:
            continue
            
        text = op['insert']
        attributes = op.get('attributes', {})
        
        # Handle line breaks and special characters
        if text == '\n':
            # Process the current paragraph content first
            if current_paragraph:
                content = ''.join(current_paragraph).strip()
                current_paragraph = []
                
                # Check for block formatting on this newline
                if 'header' in attributes:
                    level = attributes['header']
                    if content:
                        html_parts.append(f"<h{level}>{content}</h{level}>")
                elif 'list' in attributes:
                    # Handle list items - add immediately to preserve order
                    if content:
                        html_parts.append(f"<li>{content}</li>")
                else:
                    # Regular paragraph
                    if content:
                        html_parts.append(f"<p>{content}</p>")
        else:
            # Regular text with formatting
            formatted_text = text
            
            # Apply text formatting
            if 'bold' in attributes and attributes['bold']:
                formatted_text = f"<strong>{formatted_text}</strong>"
            if 'italic' in attributes and attributes['italic']:
                formatted_text = f"<em>{formatted_text}</em>"
            if 'underline' in attributes and attributes['underline']:
                formatted_text = f"<u>{formatted_text}</u>"
            if 'code' in attributes and attributes['code']:
                formatted_text = f"<code>{formatted_text}</code>"
            if 'link' in attributes:
                href = attributes['link']
                formatted_text = f'<a href="{href}">{formatted_text}</a>'
            
            current_paragraph.append(formatted_text)
    
    # Handle any remaining content
    if current_paragraph:
        content = ''.join(current_paragraph).strip()
        if content:
            html_parts.append(f"<p>{content}</p>")
    
    # Post-process to group consecutive list items into proper lists
    result_parts = []
    i = 0
    while i < len(html_parts):
        current_part = html_parts[i]
        
        if current_part.startswith('<li>'):
            # Found a list item - collect all consecutive list items
            list_items = []
            while i < len(html_parts) and html_parts[i].startswith('<li>'):
                # Extract content from <li>content</li>
                content = html_parts[i][4:-5]  # Remove <li> and </li>
                list_items.append(content)
                i += 1
            
            # Create the list
            items_html = ''.join(f"<li>{item}</li>" for item in list_items)
            result_parts.append(f"<ul>{items_html}</ul>")
        else:
            result_parts.append(current_part)
            i += 1
    
    return ''.join(result_parts)

Parameters

Parameter Details

ops: A list of Quill Delta operation dictionaries. Each operation should have an 'insert' key containing the text/content and an optional 'attributes' key containing formatting information. Example: [{'insert': 'Hello'}, {'insert': 'World', 'attributes': {'bold': True}}, {'insert': '\n'}]. The '\n' character indicates line breaks and can carry block-level formatting attributes like 'header' or 'list'.

Return Value

Returns a string containing the HTML representation of the input Delta operations. The HTML includes properly nested tags for formatting (strong, em, u, code, a), block elements (h1-h6, p, ul, li), and maintains the original content order. Empty or whitespace-only content is filtered out. List items are automatically grouped into ul tags.

Usage Example

# Example 1: Simple text with formatting
ops = [
    {'insert': 'Hello '},
    {'insert': 'World', 'attributes': {'bold': True}},
    {'insert': '\n'}
]
html_output = delta_to_html(ops)
print(html_output)  # Output: <p>Hello <strong>World</strong></p>

# Example 2: Header and list
ops = [
    {'insert': 'My Title', 'attributes': {}},
    {'insert': '\n', 'attributes': {'header': 2}},
    {'insert': 'First item', 'attributes': {}},
    {'insert': '\n', 'attributes': {'list': 'bullet'}},
    {'insert': 'Second item', 'attributes': {}},
    {'insert': '\n', 'attributes': {'list': 'bullet'}}
]
html_output = delta_to_html(ops)
print(html_output)  # Output: <h2>My Title</h2><ul><li>First item</li><li>Second item</li></ul>

# Example 3: Mixed formatting
ops = [
    {'insert': 'Visit '},
    {'insert': 'our site', 'attributes': {'link': 'https://example.com', 'italic': True}},
    {'insert': ' for more info.'},
    {'insert': '\n'}
]
html_output = delta_to_html(ops)
print(html_output)  # Output: <p>Visit <a href="https://example.com"><em>our site</em></a> for more info.</p>

Best Practices

• Ensure the input 'ops' parameter is a valid list of Quill Delta operations with proper structure (each op should have an 'insert' key)
• The function expects newline characters ('\n') to carry block-level formatting attributes (header, list) rather than the text content itself
• Consecutive list items are automatically grouped into a single <ul> tag, so no manual grouping is needed
• The function strips whitespace from paragraph content, so empty paragraphs won't be rendered
• Nested formatting is applied in a specific order: bold, italic, underline, code, link - be aware that this may affect the final HTML structure
• The function currently only supports unordered lists (ul). If ordered lists are needed, the code would need modification to check for 'ordered' list type
• HTML special characters in the text content are not escaped by this function - consider using html.escape() on text content if needed for security
• The function does not validate or sanitize URLs in link attributes - implement URL validation if accepting user input

Tags

Similar Components

AI-powered semantic similarity - components with related functionality:

• function convert_quill_delta_to_html 92.5% similar

  Converts Quill Delta format (rich text editor format) to HTML, with fallback handling for plain text, JSON strings, and already-formatted HTML content.

  From: /tf/active/vicechatdev/vice_ai/new_app.py

• function html_to_markdown_v1 63.1% similar

  Converts HTML markup to Markdown syntax, handling headers, code blocks, text formatting, links, lists, and paragraphs with proper spacing.

  From: /tf/active/vicechatdev/vice_ai/new_app.py

• function html_to_markdown 62.4% similar

  Converts HTML text back to Markdown format using regex-based pattern matching and replacement, handling headers, code blocks, formatting, links, lists, and HTML entities.

  From: /tf/active/vicechatdev/vice_ai/complex_app.py

• function simple_markdown_to_html 61.7% similar

  Converts a subset of Markdown syntax to clean HTML, supporting headers, bold text, unordered lists, and paragraphs.

  From: /tf/active/vicechatdev/vice_ai/new_app.py

• function export_to_docx 61.1% similar

  Exports a document with text and data sections to Microsoft Word DOCX format, preserving formatting, structure, and metadata.

  From: /tf/active/vicechatdev/vice_ai/new_app.py