Reuse tiptap ordered list type (#103)

Author: matthiask

AGENTS.md

@@ -79,6 +79,8 @@ const isNodeType = (editor, typeName) => {
 
 Commit without the `Co-Authored-By` attribution line (no `--co-author` / no `Co-Authored-By: Claude` trailer).
 
+Committing feature by feature (one focused commit per logical change, rather than one large batched commit) is appreciated.
+
 ## Testing Workflow
 
 1. Make code changes

django_prose_editor/static/django_prose_editor/editor.js

@@ -5,37 +5,37 @@
   "license": "MIT",
   "dependencies": {
     "@rslib/core": "^0.23.2",
-    "@tiptap/core": "^3.30.2",
-    "@tiptap/extension-blockquote": "^3.30.2",
-    "@tiptap/extension-bold": "^3.30.2",
-    "@tiptap/extension-bubble-menu": "^3.30.2",
-    "@tiptap/extension-code": "^3.30.2",
-    "@tiptap/extension-code-block": "^3.30.2",
-    "@tiptap/extension-color": "^3.30.2",
-    "@tiptap/extension-document": "^3.30.2",
-    "@tiptap/extension-hard-break": "^3.30.2",
-    "@tiptap/extension-heading": "^3.30.2",
-    "@tiptap/extension-highlight": "^3.30.2",
-    "@tiptap/extension-horizontal-rule": "^3.30.2",
-    "@tiptap/extension-image": "^3.30.2",
-    "@tiptap/extension-invisible-characters": "^3.30.2",
-    "@tiptap/extension-italic": "^3.30.2",
-    "@tiptap/extension-link": "^3.30.2",
-    "@tiptap/extension-list": "^3.30.2",
-    "@tiptap/extension-paragraph": "^3.30.2",
-    "@tiptap/extension-strike": "^3.30.2",
-    "@tiptap/extension-subscript": "^3.30.2",
-    "@tiptap/extension-superscript": "^3.30.2",
-    "@tiptap/extension-table": "^3.30.2",
-    "@tiptap/extension-text": "^3.30.2",
-    "@tiptap/extension-text-align": "^3.30.2",
-    "@tiptap/extension-text-style": "^3.30.2",
-    "@tiptap/extension-underline": "^3.30.2",
-    "@tiptap/extensions": "^3.30.2",
-    "@tiptap/pm": "^3.30.2",
+    "@tiptap/core": "^3.30.3",
+    "@tiptap/extension-blockquote": "^3.30.3",
+    "@tiptap/extension-bold": "^3.30.3",
+    "@tiptap/extension-bubble-menu": "^3.30.3",
+    "@tiptap/extension-code": "^3.30.3",
+    "@tiptap/extension-code-block": "^3.30.3",
+    "@tiptap/extension-color": "^3.30.3",
+    "@tiptap/extension-document": "^3.30.3",
+    "@tiptap/extension-hard-break": "^3.30.3",
+    "@tiptap/extension-heading": "^3.30.3",
+    "@tiptap/extension-highlight": "^3.30.3",
+    "@tiptap/extension-horizontal-rule": "^3.30.3",
+    "@tiptap/extension-image": "^3.30.3",
+    "@tiptap/extension-invisible-characters": "^3.30.3",
+    "@tiptap/extension-italic": "^3.30.3",
+    "@tiptap/extension-link": "^3.30.3",
+    "@tiptap/extension-list": "^3.30.3",
+    "@tiptap/extension-paragraph": "^3.30.3",
+    "@tiptap/extension-strike": "^3.30.3",
+    "@tiptap/extension-subscript": "^3.30.3",
+    "@tiptap/extension-superscript": "^3.30.3",
+    "@tiptap/extension-table": "^3.30.3",
+    "@tiptap/extension-text": "^3.30.3",
+    "@tiptap/extension-text-align": "^3.30.3",
+    "@tiptap/extension-text-style": "^3.30.3",
+    "@tiptap/extension-underline": "^3.30.3",
+    "@tiptap/extensions": "^3.30.3",
+    "@tiptap/pm": "^3.30.3",
     "autoprefixer": "^10.5.4",
     "postcss": "^8.5.26",
-    "prosemirror-changeset": "^2.4.1",
+    "prosemirror-changeset": "^2.4.2",
     "prosemirror-commands": "^1.7.2",
     "prosemirror-dropcursor": "^1.8.3",
     "prosemirror-gapcursor": "^1.4.1",

django_prose_editor/static/django_prose_editor/editor.js.map

@@ -105,28 +105,32 @@ export const OrderedList = TiptapOrderedList.configure({
 
   addAttributes() {
     const listTypes = this.options.listTypes
+    const valid_types = listTypes.map(({ type }) => type)
+    const parentAttributes = this.parent?.() ?? {}
+    // Tiptap's own parseHTML (as of 3.27) already sniffs the HTML `type`
+    // attribute as well as `list-style-type` CSS on the <ol> and on its
+    // first <li> (the pattern Google Docs pastes use). Reuse it as a
+    // fallback instead of reimplementing that detection ourselves.
+    const parentParseHTML = parentAttributes.type?.parseHTML
 
     return {
-      ...this.parent?.(),
-      // TODO we could try removing this; we still would need the data-type to
-      // be rendered, but the parsing could be reused now that Tiptap 3.27 has
-      // added support for the type attribute as well.
+      ...parentAttributes,
       type: {
         default: null,
         parseHTML: (element) => {
-          const typeAttribute = element.getAttribute("type"),
-            dataType = element.dataset.type?.replace("latin", "alpha"),
-            valid_types = listTypes.map(({ type }) => type)
-
+          // Our own data-type is authoritative when present: it is the only
+          // encoding that survives round-tripping through our renderHTML,
+          // and unlike the HTML `type` attribute it isn't ambiguous under
+          // case-insensitive attribute matching in some browsers (e.g.
+          // between `type="a"` and `type="A"`).
+          const dataType = element.dataset.type?.replace("latin", "alpha")
           if (dataType && valid_types.includes(dataType)) {
             return dataType
           }
 
-          if (
-            typeAttribute &&
-            valid_types.includes(htmlToCssMap[typeAttribute])
-          ) {
-            return htmlToCssMap[typeAttribute]
+          const htmlType = parentParseHTML?.(element)
+          if (htmlType && valid_types.includes(htmlToCssMap[htmlType])) {
+            return htmlToCssMap[htmlType]
           }
 
           return valid_types[0]

package.json

@@ -300,6 +300,48 @@ def test_prose_editor_ordered_list_without_type_attribute(page, live_server):
     assert not console_errors, f"Unexpected console errors: {console_errors}"
 
 
+@pytest.mark.django_db
+@pytest.mark.e2e
+def test_prose_editor_ordered_list_html_type_attribute_only(page, live_server):
+    """An <ol type="..."> without data-type (e.g. hand-written HTML) is normalized."""
+    _login(page, live_server)
+
+    model = TableProseEditorModel.objects.create(
+        description='<ol type="A"><li>First item</li></ol>'
+    )
+
+    page.goto(
+        f"{live_server.url}/admin/testapp/tableproseeditormodel/{model.id}/change/"
+    )
+
+    editor = page.locator(".prose-editor > .ProseMirror")
+    ol_element = editor.locator("ol")
+    expect(ol_element).to_have_attribute("data-type", "upper-alpha")
+    expect(ol_element).to_have_attribute("type", "A")
+
+
+@pytest.mark.django_db
+@pytest.mark.e2e
+def test_prose_editor_ordered_list_css_list_style_type_paste(page, live_server):
+    """An <ol> with only CSS list-style-type (typical of Word/Google Docs pastes)
+    is normalized using Tiptap's own upstream parsing, without a data-type attribute."""
+    _login(page, live_server)
+
+    model = TableProseEditorModel.objects.create(
+        description=(
+            '<ol style="list-style-type: upper-roman"><li>First item</li></ol>'
+        )
+    )
+
+    page.goto(
+        f"{live_server.url}/admin/testapp/tableproseeditormodel/{model.id}/change/"
+    )
+
+    editor = page.locator(".prose-editor > .ProseMirror")
+    ol_element = editor.locator("ol")
+    expect(ol_element).to_have_attribute("data-type", "upper-roman")
+
+
 @pytest.mark.django_db
 @pytest.mark.e2e
 def test_configurable_prose_editor_admin(page, live_server):