<template>
  <div>
    Lesezeichen: <span>{{ content }}</span>
    <div v-if="item.note">Notiz: {{ item.note.text }}</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
interface Item {
  content: string;
  note: {
    text: string;
  };
}
export interface Props {
  item: Item;
}
const props = defineProps<Props>();
const stripHtml = (htmlString) => {
  return htmlString.replace(/<[^>]*>?/gm, '') || '';
};

const content = computed(() => {
  const strippedText = stripHtml(props.item.content) || '';
  if (strippedText.length > 50) {
    return strippedText.substring(0, 50) + '...';
  }
  return strippedText;
});
</script>
