0.0.19 • Published 1 year ago

text-marker-range v0.0.19

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year ago

Highlighting text and save range.

package-example

Props

PropsDescription
textany text
textIdunique text id
markerssaved markers

Emit

EmitDescription
handleNewHighlightNewMarker

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>
0.0.19

1 year ago

0.0.18

1 year ago

0.0.17

1 year ago

0.0.16

1 year ago

0.0.15

1 year ago

0.0.14

1 year ago

0.0.13

1 year ago

0.0.12

1 year ago

0.0.11

1 year ago

0.0.10

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago