Node class extension (#52)

Author: matthiask

CHANGELOG.rst

@@ -4,6 +4,8 @@ Change log
 Next version
 ~~~~~~~~~~~~
 
+- Added a ``NodeClass`` extension for applying CSS classes to nodes.
+
 
 0.17 (2025-08-25)
 ~~~~~~~~~~~~~~~~~

django_prose_editor/config.py

@@ -152,6 +152,43 @@ def process_color_highlight(config, shared_config):
     add_tags_and_attributes(shared_config, tags, attributes)
 
 
+def process_node_class(config, shared_config):
+    """Process NodeClass extension configuration."""
+    if not isinstance(config, dict) or "cssClasses" not in config:
+        return
+
+    css_classes = config["cssClasses"]
+    if not isinstance(css_classes, dict):
+        return
+
+    # Map of node types to their HTML tags that need class attributes
+    node_type_tags = {
+        "paragraph": ["p"],
+        "heading": ["h1", "h2", "h3", "h4", "h5", "h6"],
+        "table": ["table"],
+        "tableRow": ["tr"],
+        "tableCell": ["td", "th"],
+        "tableHeader": ["th"],
+        "listItem": ["li"],
+        "bulletList": ["ul"],
+        "orderedList": ["ol"],
+        "blockquote": ["blockquote"],
+        "codeBlock": ["pre"],
+    }
+
+    # Collect all tags that need class attributes
+    tags_needing_class = set()
+
+    for node_type, classes in css_classes.items():
+        if node_type in node_type_tags and classes:
+            tags_needing_class.update(node_type_tags[node_type])
+
+    # Add class attribute to all relevant tags
+    if tags_needing_class:
+        attributes = {tag: ["class"] for tag in tags_needing_class}
+        add_tags_and_attributes(shared_config, [], attributes)
+
+
 # Default extension mapping with processors as the single source of truth
 EXTENSION_MAPPING = {
     # Core formatting
@@ -204,6 +241,7 @@ def process_color_highlight(config, shared_config):
     "Gapcursor": html_tags([]),
     "Menu": html_tags([]),
     "NoSpellCheck": html_tags([]),
+    "NodeClass": process_node_class,
     "TextClass": html_tags(["span"], {"span": ["class"]}),
     "Placeholder": html_tags([]),
 }

django_prose_editor/static/django_prose_editor/editor.css

@@ -1,10 +1,10 @@
 Custom Extensions and Menu Integration
-===============================
+======================================
 
 Creating custom extensions for django-prose-editor allows you to extend the editor with new functionality and integrate it with the menu system. This guide explains how to create custom extensions and add menu items for them.
 
 Basic Extension Structure
-------------------------
+-------------------------
 
 Extensions in django-prose-editor are based on Tiptap extensions. To create a custom extension:
 
@@ -77,7 +77,7 @@ Extensions can integrate with the menu system by implementing the ``addMenuItems
    The Menu extension uses an ``items`` creator function instead of the old ``addItems`` function. This provides more flexibility for custom menu layouts. See :doc:`menu` for details on creating custom menu structures.
 
 Menu Item Structure
-~~~~~~~~~~~~~~~~~~
+~~~~~~~~~~~~~~~~~~~
 
 Menu items are defined using the ``defineItem`` method with the following properties:
 
@@ -308,7 +308,7 @@ The base case of a hardcoded list of tags and attributes is handled by the
     ]
 
 Best Practices
--------------
+--------------
 
 1. **Group Related Items**: Use the menu group system to organize related items together
 2. **Conditional Display**: Use the ``hidden``, ``enabled``, and ``active`` methods to control when and how menu items appear

django_prose_editor/static/django_prose_editor/editor.css.map

@@ -31,6 +31,7 @@ django-prose-editor[sanitize]``) the following should get you started:
    sanitization
    custom_extensions
    menu
+   nodeclass
    textclass
    presets
    legacy