<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  text: {
    type: String,
    required: true,
  },
  start: {
    type: Number,
    required: true,
  },
  size: {
    type: Number,
    required: true,
  },
  onOffsetClicked: {
    type: Function,
    required: true,
  },
});

const before = computed(() => props.text.substring(0, props.start));
const hl = computed(() =>
  props.text.substring(props.start, props.start + props.size)
);
const end = computed(() => props.text.substring(props.start + props.size));

const handleClick = (offset: number) => {
  const selection = window.getSelection();
  if (!selection) return;
  props.onOffsetClicked(selection.anchorOffset + offset);
};
</script>

<template>
  <div>
    <span @click="handleClick(0)">{{ before }}</span>
    <span @click="handleClick(before.length)" class="hl">
      {{ hl }}
    </span>
    <span @click="handleClick(before.length + hl.length)">
      {{ end }}
    </span>
  </div>
</template>

<style lang="css" scoped>
.hl {
  color: #ffffff;
  background-color: #4b5563;
}
</style>
