Fix #12: Allow specifying the available heading levels

matthiask · Aug 26, 2024 · bb3ac71 · bb3ac71
1 parent 18ce743
commit bb3ac71
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 8 deletions.
diff --git a/CHANGELOG.rst b/CHANGELOG.rst
@@ -9,6 +9,8 @@ Next version
 - Updated the ProseMirror dependencies.
 - Added extremely hacky german translations for the dialogs.
 - Added Django 5.1 to the CI matrix.
+- Allowed specifying the heading levels for the menu. The schema itself supports
+  all heading levels (1-6) as before.
 
 
 0.7 (2024-08-02)

diff --git a/README.rst b/README.rst
@@ -101,6 +101,7 @@ It's possible to slightly customize the field or widget by passing an optional
         "history": True,      # Enable undo and redo
         "html": True,         # Add a button which allows editing the raw HTML
         "typographic": True,  # Highlight typographic characters
+        "headingLevels": [1, 2, 3, 4, 5],  # Available heading levels
     }
 
 If you only want to support paragraphs, strong, emphasis, sub- and superset and

diff --git a/django_prose_editor/static/django_prose_editor/editor.js b/django_prose_editor/static/django_prose_editor/editor.js
diff --git a/src/editor.js b/src/editor.js
@@ -109,7 +109,7 @@ export function createEditor(textarea, config) {
     history(),
     menuPlugin(
       [
-        blockTypeMenuItems(schema),
+        blockTypeMenuItems(schema, config.headingLevels),
         listMenuItems(schema),
         linkMenuItems(schema),
         markMenuItems(schema),

diff --git a/src/menu.js b/src/menu.js
@@ -45,7 +45,7 @@ function materialButton(textContent, title) {
   })
 }
 
-export function blockTypeMenuItems(schema) {
+export function blockTypeMenuItems(schema, headingLevels) {
   if (!schema.nodes.heading) return []
 
   const heading = (level) => ({
@@ -58,12 +58,10 @@ export function blockTypeMenuItems(schema) {
     },
   })
 
+  const _levels = headingLevels || [1, 2, 3, 4, 5]
+
   return [
-    heading(1),
-    heading(2),
-    heading(3),
-    heading(4),
-    heading(5),
+    ..._levels.map(heading),
     {
       command: setBlockType(schema.nodes.paragraph),
       dom: materialButton("notes", "paragraph"),