From c7397d075b59b9d45fdb1ac1c0d8d34e82972724 Mon Sep 17 00:00:00 2001
From: ChrisChrisChris <chrischrischris@users.noreply.github.com>
Date: Sun, 23 Feb 2025 11:12:54 -0500
Subject: [PATCH] Support for value labels

---
 .gitignore                                             | 1 +
 blocks/edit/prose/plugins/slashMenu/keyAutocomplete.js | 8 +++++---
 blocks/edit/prose/plugins/slashMenu/slash-menu.js      | 4 ++--
 blocks/edit/prose/plugins/slashMenu/slashMenu.js       | 2 ++
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/.gitignore b/.gitignore
index 3ba8482..8b99066 100644
--- a/.gitignore
+++ b/.gitignore
@@ -104,3 +104,4 @@ typings/
 
 .DS_Store
 .idea/*
+.cursorrules
diff --git a/blocks/edit/prose/plugins/slashMenu/keyAutocomplete.js b/blocks/edit/prose/plugins/slashMenu/keyAutocomplete.js
index 8fcb269..3d72229 100644
--- a/blocks/edit/prose/plugins/slashMenu/keyAutocomplete.js
+++ b/blocks/edit/prose/plugins/slashMenu/keyAutocomplete.js
@@ -18,10 +18,12 @@ export function processKeyData(data) {
     const blocks = itemBlocks.split(',').map((block) => block.trim());
 
     const values = item.values.toLowerCase().split(',').map((v) => {
-      const val = v.trim();
+      const [label, val] = v.split('=').map((vb) => vb.trim());
+
       return {
-        title: val,
-        command: (state, dispatch) => insertAutocompleteText(state, dispatch, val),
+        title: label,
+        value: val || label,
+        command: (state, dispatch) => insertAutocompleteText(state, dispatch, val || label),
         class: 'key-autocomplete',
       };
     });
diff --git a/blocks/edit/prose/plugins/slashMenu/slash-menu.js b/blocks/edit/prose/plugins/slashMenu/slash-menu.js
index 580eded..ae6a9f1 100644
--- a/blocks/edit/prose/plugins/slashMenu/slash-menu.js
+++ b/blocks/edit/prose/plugins/slashMenu/slash-menu.js
@@ -197,14 +197,14 @@ export default class SlashMenu extends LitElement {
     return html`
       <div class="slash-menu-items">
         ${filteredItems.map((item, index) => {
-          const isColor = isColorCode(item.title);
+          const isColor = isColorCode(item.value);
           return html`
             <div
               class="slash-menu-item ${index === this.selectedIndex ? 'selected' : ''}"
               @click=${() => this.handleItemClick(item)}
             >
               ${isColor
-                ? createColorSquare(item.title)
+                ? createColorSquare(item.value)
                 : html`<span class="slash-menu-icon ${item.class || ''}"></span>`}
               <span class="slash-menu-label">
                 ${item.title}
diff --git a/blocks/edit/prose/plugins/slashMenu/slashMenu.js b/blocks/edit/prose/plugins/slashMenu/slashMenu.js
index fe3c01f..fad9778 100644
--- a/blocks/edit/prose/plugins/slashMenu/slashMenu.js
+++ b/blocks/edit/prose/plugins/slashMenu/slashMenu.js
@@ -27,6 +27,8 @@ class SlashMenuView {
     this.menu.addEventListener('reset-slashmenu', () => {
       // reset menu to default items
       this.menu.items = menuItems;
+      this.menu.left = 0;
+      this.menu.top = 0;
     });
   }