Range Kit Vue

GitHub | 中文

Vue bindings for range-kit, providing composables and components to easily integrate robust range selection and highlighting into Vue applications.

Demo

Features

• Vue Composables:
  • useSelectionRestore: Manage selection persistence and restoration.
  • useSearchHighlight: Implement search functionality with highlighting.
  • useSelectionCallbacks: Handle selection events.
• Components:
  • SelectionPopover: Ready-to-use popover component for selection actions.

Installation

npm install range-kit-vue range-kit
# or
pnpm add range-kit-vue range-kit
# or
yarn add range-kit-vue range-kit

Usage

Basic Example

<script setup lang="ts">
import { ref } from 'vue';
import { useSearchHighlight, SelectionPopover } from 'range-kit-vue';
import 'range-kit-vue/styles';

const containerRef = ref(null);

// Initialize Search Highlight
const {
  searchKeywords,
  searchResults,
  addSearchKeyword,
  clearSearchHighlights
} = useSearchHighlight({
  getInstance: () => null, // Provide your SelectionManager instance if needed
  containers: ['#content-area'],
  selectionStyles: {
    default: { backgroundColor: 'yellow' }
  }
});
</script>

<template>
  <div>
    <div id="content-area">
      <p>Select some text here to see range-kit in action.</p>
    </div>
    
    <!-- Popover component integration -->
    <SelectionPopover 
      <!-- props configuration -->
    />
  </div>
</template>

License

Apache-2.0