diff --git a/src/components/BSMap.vue b/src/components/BSMap.vue
index da83c6b..f3cd127 100644
--- a/src/components/BSMap.vue
+++ b/src/components/BSMap.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="$style.map" :style="style">
-    <BSRow v-for="({ row, id }, index) in rows" :key="id" :src="row" :row="index"
+    <BSRow v-for="({ row, id }, index) in rows" :key="id" :src="row" :focused="isFocused(index)"
       @select="(offset, length) => handleSelect(index, offset, length)" />
   </div>
 </template>
@@ -41,6 +41,14 @@ const style = computed(() => ({
   '--bs-map-cols': cols.value,
 }) as CSSProperties);
 
+function isFocused(row: number): boolean {
+  const { selection } = editorStore;
+  return (
+    typeof selection != 'undefined' &&
+    selection.row == row
+  );
+}
+
 function handleSelect(row: number, offset: number, length: number): void {
   editorStore.selection = {
     row: row,
diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue
index 0da93ce..f38b110 100644
--- a/src/components/BSMap/BSCell.vue
+++ b/src/components/BSMap/BSCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
+  <BSSelectable v-slot="{ selectable }" :focused="props.focused">
     <div :class="[selectable, $style.cell]" :title="props.src" :style="style" @click="() => emit('select')">
       <BSIcon v-for="(icon, index) in (parts?.icons || [])" :key="index" :class="$style.icon" :src="icon"
         @ratio="(ratio: number) => updateRatio(index, ratio)" />
@@ -23,8 +23,7 @@ import BSIcon from './BSIcon.vue';
 
 const props = defineProps<{
   src: string;
-  row: number;
-  offset: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{
diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue
index 9988b17..04b5232 100644
--- a/src/components/BSMap/BSRow.vue
+++ b/src/components/BSMap/BSRow.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="$style.row">
     <div :class="$style.cells" :style="rowStyle">
-      <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part" :row="row" :offset="offset"
-        @select="() => emit('select', offset, part.length)" />
+      <BSCell v-for="({ part, offset }, index) in cells" :key="index" :src="part"
+        :focused="isFocused(offset, part.length)" @select="() => emit('select', offset, part.length)" />
     </div>
     <div :class="$style.texts">
-      <BSText v-for="({ part, offset, align }, index) in  texts" :key="index" :src="part" :align="align" :row="row"
-        :offset="offset" @select="() => emit('select', offset, part.length)" />
+      <BSText v-for="({ part, offset, align }, index) in  texts" :key="index" :src="part" :align="align"
+        :focused="isFocused(offset, part.length)" @select="() => emit('select', offset, part.length)" />
     </div>
   </div>
 </template>
@@ -14,6 +14,7 @@
 <script lang="ts" setup>
 import { computed, defineEmits, defineProps } from 'vue';
 
+import { useEditorStore } from '@/stores/editor';
 import splitWithOffset from '@/utils/splitWithOffset';
 import styleFromParams from '@/utils/styleFromParams';
 
@@ -22,13 +23,15 @@ import BSText from './BSText.vue';
 
 const props = defineProps<{
   src: string;
-  row: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{
   (e: 'select', offset: number, length: number): void;
 }>();
 
+const editorStore = useEditorStore();
+
 const parts = computed(() => {
   const [cells, ...texts] = splitWithOffset(props.src, '~~');
   return { cells, texts };
@@ -41,6 +44,16 @@ const texts = computed(() => parts.value.texts
   .map((part, index, { length }) => ({ ...part, align: length == 1 ? 2 : index + 1 }))
   .filter(({ part }) => !!part));
 
+function isFocused(offset: number, length: number): boolean {
+  const { selection } = editorStore;
+  return (
+    props.focused &&
+    typeof selection != 'undefined' &&
+    selection.offset >= offset &&
+    selection.offset <= offset + length
+  );
+}
+
 const rowStyle = computed(() => styleFromParams(parts.value.texts[4]?.part));
 </script>
 
diff --git a/src/components/BSMap/BSSelectable.vue b/src/components/BSMap/BSSelectable.vue
index 2ea1a8b..35c2b88 100644
--- a/src/components/BSMap/BSSelectable.vue
+++ b/src/components/BSMap/BSSelectable.vue
@@ -1,32 +1,16 @@
 <template>
   <slot :selectable="{
     [$style.selectable]: true,
-    [$style.focused]: focused,
+    [$style.focused]: props.focused,
   }" />
 </template>
 
 <script lang="ts" setup>
-import { computed, defineProps } from 'vue';
-
-import { useEditorStore } from '@/stores/editor';
+import { defineProps } from 'vue';
 
 const props = defineProps<{
-  row: number;
-  offset: number;
-  length: number;
+  focused: boolean;
 }>();
-
-const editorStore = useEditorStore();
-
-const focused = computed(() => {
-  const { selection } = editorStore;
-  return (
-    typeof selection != 'undefined' &&
-    selection.row == props.row &&
-    selection.offset >= props.offset &&
-    selection.offset <= props.offset + props.length
-  );
-});
 </script>
 
 <style lang="scss" module>
diff --git a/src/components/BSMap/BSText.vue b/src/components/BSMap/BSText.vue
index db6ddfa..2db86ef 100644
--- a/src/components/BSMap/BSText.vue
+++ b/src/components/BSMap/BSText.vue
@@ -1,5 +1,5 @@
 <template>
-  <BSSelectable v-slot="{ selectable }" :row="props.row" :offset="props.offset" :length="props.src.length">
+  <BSSelectable v-slot="{ selectable }" :focused="props.focused">
     <div :class="[selectable, $style.text]" :data-align="align" :title="props.src" @click="() => emit('select')">
       {{ props.src }}
     </div>
@@ -14,8 +14,7 @@ import BSSelectable from './BSSelectable.vue';
 const props = defineProps<{
   src: string;
   align: number;
-  row: number;
-  offset: number;
+  focused: boolean;
 }>();
 
 const emit = defineEmits<{