text-marker-range
TypeScript icon, indicating that this package has built-in type declarations

0.0.19 • Public • Published

Highlighting text and save range.

package-example

Props

Props Description
text any text
textId unique text id
markers saved markers

Emit

Emit Description
handleNewHighlight NewMarker

Usage

<script setup lang="ts">
  import { ref } from "vue";
  import { TextKey } from "text-marker-range";

  import type { NewMarker } from "text-marker-range";

  import "text-marker-range/style.css";

  const storageName = "texthighlight";

  type savedHighlight = Required<NewMarker>;
  const savedMarkers = ref<savedHighlight[]>([]);

  import { loremThird } from "./fixture/index"; // any text

  function handleNewHighlight(createdRange: NewMarker) {
    const markers = getStorage();

    if (markers) {
      const parseHighlights = JSON.parse(markers);
      parseHighlights.push({ ...createdRange, id: Date.now() });
      setStorage(parseHighlights);
    } else {
      setStorage([{ ...createdRange, id: Date.now() }]);
    }
  }

  function setStorage(item: NewMarker[]) {
    localStorage.setItem(storageName, JSON.stringify(item));
  }

  function getStorage() {
    return localStorage.getItem(storageName);
  }

  const markers = getStorage();

  if (markers) {
    savedMarkers.value = JSON.parse(markers);
  }
  </script>

  <template>
    <TextKey
      :text="loremThird"
      :textId="1"
      :markers="savedMarkers"
      @handleNewHighlight="handleNewHighlight"
    />
  </template>

Package Sidebar

Install

npm i text-marker-range

Weekly Downloads

4

Version

0.0.19

License

MIT

Unpacked Size

29.4 kB

Total Files

16

Last publish

Collaborators

  • alivadi