feat: Indexes on labels for lists and partials.

package.json

@@ -96,7 +96,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "@blinkk/selective-edit": "^3.0.1",
+    "@blinkk/selective-edit": "^3.1.0",
     "@toast-ui/editor": "^3.0.2",
     "bent": "^7.3.12",
     "codemirror": "^5.62.2",

src/sass/selective/_selective.sass

@@ -23,6 +23,12 @@
   border: $le-border-size-medium dashed var(--color-warning)
   color: var(--color-warning)
 
+.selective__index
+  margin-right: $le-space-small
+
+  &::after
+    content: '.'
+
 @import './field'
 @import './fields'
 @import './mixins'

src/sass/selective/field/_generic_partials.sass

@@ -16,7 +16,7 @@
 
         > .selective__list__fields__header > .selective__list__item__preview,
         > .selective__list__item__preview
-          span
+          .selective__field__partials__preview
             margin-left: $le-space-small
             font-size: $le-font-size-small
 

src/ts/projectType/generic/field/partials.ts

@@ -22,10 +22,8 @@ import {
   findPreviewValue,
 } from '@blinkk/selective-edit/dist/utility/preview';
 
-import {
-  EVENT_RENDER_COMPLETE,
-  EVENT_UNLOCK,
-} from '@blinkk/selective-edit/dist/selective/events';
+import {EVENT_RENDER_COMPLETE} from '../../../editor/events';
+import {EVENT_UNLOCK} from '@blinkk/selective-edit/dist/selective/events';
 import {PartialData} from '../../../editor/api';
 import cloneDeep from 'lodash.clonedeep';
 import merge from 'lodash.merge';
@@ -357,6 +355,9 @@ class GenericPartialListFieldItem extends ListFieldItem {
     data: DeepObject,
     index?: number
   ): TemplateResult {
+    const indexLabel = html`${index !== undefined
+      ? html`<span class="selective__index">${index + 1}</span>`
+      : ''}`;
     const partialValue = this.fields.value;
     const partialKey = partialValue?.partial;
     if (partialKey && this.listField.partials) {
@@ -371,10 +372,14 @@ class GenericPartialListFieldItem extends ListFieldItem {
       );
 
       if (partial.editor?.label) {
-        return html`${partial.editor?.label}
-        ${previewValue ? html`<span>${previewValue}</span>` : ''}`;
+        return html`${indexLabel}${partial.editor?.label}
+        ${previewValue
+          ? html`<span class="selective__field__partials__preview"
+              >${previewValue}</span
+            >`
+          : ''}`;
       }
-      return html`${partialKey}`;
+      return html`${indexLabel}${partialKey}`;
     }
 
     return super.templatePreviewValue(editor, data, index);

yarn.lock

@@ -208,10 +208,10 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
-"@blinkk/selective-edit@^3.0.1":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@blinkk/selective-edit/-/selective-edit-3.0.1.tgz#fe54b76144f6abfde508d33276e5468c0580c9c9"
-  integrity sha512-WbW/r3v53iTdAoPBxRuIMNh3P4nvyamSQLDVswoFwhFZY/U2TONF11VwvHr3QL9DcsGe51N5Qph0nXkvAwWitA==
+"@blinkk/selective-edit@^3.1.0":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@blinkk/selective-edit/-/selective-edit-3.1.0.tgz#6c8e52347db8e0c17d7fcc25c364cd34175a92b7"
+  integrity sha512-btUdFpjio592QsUYpBCPfwY+yy+7ASuTSVDNkekkFCa9EfoqCYlutBGknqsabWnJvTCRaemU1NuDhmYTGftiLQ==
   dependencies:
     json-stable-stringify "^1.0.1"
     lit-html "^1.4.1"