Fix issues with sometimes cause assignment of wrong position value

ts/components/ButtonGroup.svelte

@@ -41,15 +41,17 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         makeInterface(makeRegistration);
 
     $: for (const [index, item] of $items.entries()) {
-        if ($items.length === 1) {
+        item.position.update(() => {
-            item.position.set(ButtonPosition.Standalone);
+            if ($items.length === 1) {
-        } else if (index === 0) {
+                return ButtonPosition.Standalone;
-            item.position.set(ButtonPosition.Leftmost);
+            } else if (index === 0) {
-        } else if (index === $items.length - 1) {
+                return ButtonPosition.Leftmost;
-            item.position.set(ButtonPosition.Rightmost);
+            } else if (index === $items.length - 1) {
-        } else {
+                return ButtonPosition.Rightmost;
-            item.position.set(ButtonPosition.Center);
+            } else {
-        }
+                return ButtonPosition.Center;
+            }
+        });
     }
 
     setContext(buttonGroupKey, registerComponent);
@@ -99,7 +101,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     role="group"
 >
     <slot />
-    {#each $dynamicItems as item}
+    {#each $dynamicItems as item (item[0].id)}
         <ButtonGroupItem id={item[0].id} registration={item[1]}>
             <svelte:component this={item[0].component} {...item[0].props} />
         </ButtonGroupItem>

ts/components/registration.ts

@@ -50,8 +50,11 @@ export function makeInterface<T extends Registration>(
         index: number = registrations.length,
         registration = makeRegistration()
     ): T {
-        registrations.splice(index, 0, registration);
+        items.update((registrations) => {
-        items.set(registrations);
+            registrations.splice(index, 0, registration);
+            return registrations;
+        });
+
         return registration;
     }
 

ts/editor/Components.svelte

@@ -10,6 +10,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import WithState from "components/WithState.svelte";
 
     import * as contextKeys from "components/context-keys";
+    import * as editorContextKeys from "./context-keys";
 
     export const components = {
         IconButton,
@@ -17,6 +18,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         WithShortcut,
         WithContext,
         WithState,
-        contextKeys,
+        contextKeys: { ...contextKeys, ...editorContextKeys },
     };
 </script>