Clean up

src/Phrasebook/Block/OrderEditor.vue

@@ -10,9 +10,9 @@
       :blocks="vblocks"
     />
     <div class="row-1 wrap block-editor">
-      <div v-for="(b, i) in blocks" :key="i" class="row">
+      <div v-for="(b, i) in blocks" :key="i + '--' + Math.random()" class="row">
         <btn icon="edit" :is-on="block === b" @click="block = b" />
-        <VBlock :ref="(el) => vblocks.push(el)" :block="b" />
+        <VBlock :ref="(el) => (el ? vblocks.push(el) : null)" :block="b" />
       </div>
     </div>
   </EditorCard>

src/Phrasebook/Block/index.vue

@@ -42,19 +42,8 @@ export default defineComponent({
     const context = inject("context", {} as Ref<Context>);
 
     function switchState(nextState: undefined | State) {
-      const oldContext = [...Object.values(context.value)[0]].join(" ");
       applyConditions(state.value?.conditions, context, false);
       applyConditions(nextState?.conditions, context, true);
-      const newContext = [...Object.values(context.value)[0]].join(" ");
-      console.log(
-        state.value?.display[0].text,
-        "|",
-        oldContext,
-        ">",
-        newContext,
-        "|",
-        nextState?.display[0].text
-      );
       state.value = nextState;
     }
     watch(
@@ -68,7 +57,6 @@ export default defineComponent({
           );
           if (toRaw(nextState) !== toRaw(state.value)) switchState(nextState);
         } else if (state.value) switchState(undefined);
-        else console.log(props.block.states[0]?.display[0].text, "stayed off");
       },
       { immediate: true, deep: true }
     );

src/Phrasebook/Context/index.vue

@@ -85,7 +85,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.icon {
+div.icon {
   font-size: map-get($font-sizes, "small");
 }
 p:not(:last-child)::after {

src/Phrasebook/CorpusEditor.vue

@@ -32,7 +32,11 @@
           </div>
         </div>
       </EditorCard>
-      <BlocksOrderEditor v-model="block" v-model:phrase="phrase" />
+      <BlocksOrderEditor
+        :key="phrase.id"
+        v-model="block"
+        v-model:phrase="phrase"
+      />
       <ContextEditor v-if="phrase" v-model="phrase.context" />
     </div>
     <BlockEditor v-if="block" v-model="block" />