Support for value labels

.gitignore

@@ -104,3 +104,4 @@ typings/
 
 .DS_Store
 .idea/*
+.cursorrules

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',
       };
     });

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}

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;
     });
   }