fix: only apply custom counter number for the first list node (#180)

ocavue · Nov 21, 2023 · 7d227f8 · 7d227f8
1 parent 3f3df5d
commit 7d227f8
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/.changeset/tender-parrots-deliver.md b/.changeset/tender-parrots-deliver.md
@@ -0,0 +1,5 @@
+---
+'prosemirror-flat-list': patch
+---
+
+Only allow the first ordered list node in the sequence to have a custom counter number.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -19,7 +19,7 @@ jobs:
 
       - name: Emit .d.ts files
         run: nr --filter prosemirror-flat-list build
-          
+
       - name: Lint
         run: nr lint
 

diff --git a/packages/core/src/schema/to-dom.ts b/packages/core/src/schema/to-dom.ts
@@ -1,7 +1,6 @@
 import { DOMOutputSpec, Node as ProsemirrorNode } from 'prosemirror-model'
 
 import { ListAttributes } from '../types'
-import * as browser from '../utils/browser'
 
 /** @public */
 export interface ListToDOMOptions {
@@ -112,10 +111,7 @@ export function defaultAttributesGetter(node: ProsemirrorNode) {
     'data-list-collapsable': node.childCount >= 2 ? '' : undefined,
     style:
       attrs.order != null
-        ? // Safari (at least version <= 16.5) doesn't support `counter-set`
-          browser.safari
-          ? `counter-reset: prosemirror-flat-list-counter; counter-increment: prosemirror-flat-list-counter ${attrs.order};`
-          : `counter-set: prosemirror-flat-list-counter ${attrs.order};`
+        ? `--prosemirror-flat-list-order: ${attrs.order};`
         : undefined,
   }
 

diff --git a/packages/core/src/style.css b/packages/core/src/style.css
@@ -50,10 +50,29 @@
     counter-increment: prosemirror-flat-list-counter;
 
     /* 
-    Reset the counter for the first child of the list.
+    Reset the counter for the first list node in the sequence.
     */
+    &:first-child,
     :not(&) + & {
       counter-reset: prosemirror-flat-list-counter;
+
+      /* 
+      If the first list node has a custom order number, set the counter to that value.
+      */
+      &[data-list-order] {
+        @supports (counter-set: prosemirror-flat-list-counter 1) {
+          counter-set: prosemirror-flat-list-counter
+            var(--prosemirror-flat-list-order);
+        }
+
+        /* 
+        Safari (at least version <= 17.1) doesn't support `counter-set` 
+        */
+        @supports not (counter-set: prosemirror-flat-list-counter 1) {
+          counter-increment: prosemirror-flat-list-counter
+            var(--prosemirror-flat-list-order);
+        }
+      }
     }
   }