@illinois-grad/grad-vue-rte

@illinois-grad/grad-vue-rte

Rich Text Editor components for Graduate College apps using Tiptap.

This is a companion package to @illinois-grad/grad-vue that provides components which depend on rich text editing capabilities. By keeping these components in a separate package, we keep the main library lightweight for projects that don't need rich text editing features.

Features

• Vue 3: Built with Vue.js version 3 and the Composition API.
• Tiptap Integration: Uses Tiptap for rich text editing capabilities.
• Accessibility-First: All components are built with consideration for all users.

Installation

npm install @illinois-grad/grad-vue-rte

Note: This package has peer dependencies on several Tiptap packages which will be installed automatically.

Usage

Import All Components In Vue.js

import { createApp } from 'vue'
import GradVueRTE from '@illinois-grad/grad-vue-rte'
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css'
import App from './App.vue'

const app = createApp(App)
app.use(GradVueRTE)

Import All Components in Nuxt.js

Add grad-vue-rte.ts into your plugins folder:

import GradVueRTE from '@illinois-grad/grad-vue-rte';
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css';

export default defineNuxtPlugin(async (nuxt) => {
    nuxt.vueApp.use(GradVueRTE);
});

Import Individual Components

import { GChatInput } from '@illinois-grad/grad-vue-rte'
import '@illinois-grad/grad-vue-rte/grad-vue-rte.css'

Components

GChatInput

A chat input component with rich text editing capabilities.

Props:

• placeholder (string, default: "Type a comment"): Placeholder text for the input
• disabled (boolean, default: false): Whether the input is disabled
• maxRows (number, default: 5): Maximum number of rows for the editor
• label (string, default: "Comment input"): Accessible label for the editor
• expandable (boolean, default: false): Adds a large, responsive composer for long messages

Events:

• send: Emitted when the user presses Enter (without Shift) or clicks the send button

v-model:

• Binds to the editor content as a Tiptap JSON object

When expandable is enabled, use the expand button or press Ctrl+Shift+F while focus is inside the input. The expanded composer opens as a bottom-right popover on desktop and fills the viewport on small screens. Press Escape or click outside the composer to close it.

Example:

<template>
  <GChatInput 
    v-model="comment"
    placeholder="Enter your comment"
    expandable
    @send="handleSend"
  />
</template>

<script setup>
import { ref } from 'vue'
import { GChatInput } from '@illinois-grad/grad-vue-rte'

const comment = ref('')

function handleSend(content) {
  console.log('Comment sent:', content)
  comment.value = ''
}
</script>

Development

This package is part of the grad-vue monorepo. See the main README for development instructions.

License

MIT - University of Illinois Graduate College