Sveltekit Tiptap Text Editor

This project merges rich-text editing with the power of AI text generation, offering users a smarter, faster way to enhance their writing directly within an intuitive web interface. It's a blend of cutting-edge technology and practical functionality!

Demo Download

SvelteKit TipTap Text Editor with AI Integration

This project integrates a TipTap text editor into a SvelteKit application, enhanced with AI-powered text generation via Cohere's API.

Dependencies

@tiptap/core
@tiptap/starter-kit
@tiptap/extension-text-style
@tiptap/extension-bold
@tiptap/extension-italic
svelte/store
axios
cohere-ai
dotenv

Development Dependencies:

tailwindcss
postcss
autoprefixer
@sveltejs/kit
@tsconfig/svelte
@types/node
svelte-check
vite
@sveltejs/vite-plugin-svelte
bits-ui
clsx
lucide-svelte
tailwind-merge
tailwind-variants
svelte-loading-spinners

Prerequisites

Ensure you have the following installed:

Node.js (v18.x or newer)
npm (included with Node.js)

Setup and Installation

1. Create or Clone the Project:

npx sv create sveltekit-tiptap-text-editor

Navigate to the Project Directory:

cd sveltekit-tiptap-text-editor

Install Project Dependencies:

npm install

Install Additional Required Packages:

npm install @tiptap/core @tiptap/starter-kit @tiptap/extension-text-style @tiptap/extension-bold @tiptap/extension-italic svelte/store npm install -D tailwindcss postcss autoprefixer dotenv

Initialize TailwindCSS:

npx tailwindcss init

Configure Tailwind: Update the tailwind.config.js file with the following configuration:

/** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js,svelte,ts}'], theme: { extend: {}, }, plugins: [], };

Set Up Cohere API Key:

Obtain your API key from Cohere's Dashboard.

Create a .env file in the root of the project and add your API key:

COHERE_API_TOKEN=your_api_key_here

Run the Development Server:

npm run dev

### Features

Rich Text Editing The TipTap text editor includes the following functionalities:

Bold Text: Apply bold styling to selected text.
Italic Text: Apply italic styling to selected text.
Strikethrough: Add strikethrough styling.
Dynamic Content Replacement: AI responses dynamically replace selected text or append content. AI Integration
Text Generation: Cohere API generates contextual text based on editor content.
Custom Prompts: Customize prompts for specific AI behavior.
Error Handling: Clear feedback for invalid API keys, empty prompts, or connection errors. UI and UX
Responsive Design: Tailored for different screen sizes using TailwindCSS.
Dynamic Error Messages: Highlight issues like missing API keys or invalid input.
Smooth Animations: Loading indicators for generating AI responses.

Usage Instructions:

Edit Text

-Use the TipTap editor to write or format text.

-Buttons for Bold, Italic, and Strike are available to style content. Select and Generate

-Highlight text and click Generate with AI to replace it with AI-generated content.

-Leave the text unselected to append generated content at the end.

-Custom AI Prompts

-Enter a custom prompt in the input field to tailor AI responses to specific needs.

-If no custom prompt is provided, a default prompt will be used.

-Clear Editor Content

-Use the Clear All button to reset the editor content to the placeholder: "Write your prompt here..."

-API Key and Environment Variables

-Security Best Practices:

-Store the API key in the .env file to avoid exposing it in client-side code.

-Use a server-side proxy for API calls in production environments to enhance security.

-Error Scenarios:

-Invalid API keys or expired tokens will trigger an error message.

-Ensure that your API token has sufficient access and is valid for your account.

Example Code

Editor Component Setup svelte Copy Edit

AI Response Handler

const cohereResponse = async (): Promise => { const response = await cohere.chat({ model: "command-r-plus", messages: [{ role: "user", content: "Your prompt here..." }], });

if (response?.message?.content) { editor.commands.insertContent(response.message.content); } };

Troubleshooting

Editor Does Not Initialize Ensure that the editor container (bind:this) is correctly bound. Check that all dependencies, including TipTap, are installed. AI Response Fails Verify that the COHERE_API_TOKEN in the .env file is valid. Check your internet connection and Cohere API quotas. Text Formatting Issues Ensure the appropriate extensions (e.g., StarterKit, Bold, Italic) are imported and included during editor initialization.

Custom Prompts (Examples)

You can use these custom prompts to enhance AI functionality. For example:

const prompt = selectedText ? ` Based on the following instruction: '${$customPrompt}', process the selected text as per the user's request. Selected Text: '${selectedText}'

## Here are the possible actions the AI can perform:

Replace Text: Modify the selected text based on the provided instruction.
Remove Similar Words: Identify and remove all redundant or similar words from the selected text.
Delete Text: Completely delete the selected text if requested.
Rewrite Text: Rewrite the selected text in a different tone, style, or format (e.g., formal, casual, technical, persuasive, etc.).
Summarize Text: Condense the selected text into a brief summary, retaining the most important information.
Expand Text: Add more details, explanations, or examples to the selected text.
Paraphrase Text: Rewrite the selected text with different phrasing while retaining its original meaning.
Fix Grammar and Spelling: Correct any grammar, punctuation, and spelling errors in the selected text.
Detect Redundancies: Identify and remove repetitive or redundant phrases or words from the selected text.
Improve Readability: Adjust the selected text to improve its readability and flow.
Change Tone: Alter the tone of the selected text (e.g., formal to casual, serious to humorous).
Translate: Translate the selected text into another language or make it bilingual.
Extract Keywords: Identify and list the key points, themes, or important terms from the selected text.
Make Bullet Points: Transform the selected text into a bullet-point list for better clarity and organization.
Remove Jargon: Simplify complex or technical terms in the selected text.
Highlight Key Points: Identify and highlight the most important parts of the selected text.
Analyze Sentiment: Detect the sentiment (positive, negative, or neutral) of the selected text.
Provide Feedback: Offer constructive feedback on the selected text's writing style, content, and tone.
Adapt to Target Audience: Modify the selected text to better suit a specific audience (e.g., kids, professionals, students).
Shorten Content: Make the selected text more concise without losing key information.
Add Examples: Enrich the selected text with real-world examples or scenarios.
Explain Complex Terms: Simplify complex phrases or terms in the selected text.
Generate Variants: Provide multiple alternative versions of the selected text.
Apply Formatting: Add formatting (HTML, Markdown) to the selected text (e.g., headers, lists, bold, italics).
Critique Text: Identify weaknesses in the selected text and suggest improvements.
Remove Offensive Content: Detect and remove any potentially offensive or inappropriate language from the selected text.
Detect Bias: Identify bias or subjectivity in the selected text and suggest neutral alternatives.
Convert Passive Voice to Active: Rewrite the selected text to use active voice for a more direct tone.
Generate Synonyms: Replace words in the selected text with synonyms for variety or better word choice.
Align with a Specific Style Guide: Rewrite the selected text to align with a particular style guide (e.g., APA, MLA, Chicago).
Replace Name: Replace all instances of the name 'Shanto' with 'Luna' throughout the entire text. : Based on the following instruction: '${$customPrompt}', generate or modify content as needed.

Here are the possible actions the AI can perform:

Write Content from Scratch: Generate new content based on the provided instruction.
Suggest Titles or Headlines: Create catchy titles or headlines based on the instruction.
Generate Questions: Formulate thought-provoking or quiz-style questions related to the topic.
Write Dialogues: Generate conversations or scripts for fictional or real scenarios.
Create Stories or Narratives: Write creative or fictional pieces.
Generate Explanations: Provide detailed explanations or descriptions of a concept.
Write Poems or Songs: Compose creative pieces like poetry, lyrics, or rhymes.
Create Analogies: Use comparisons to explain complex ideas simply.
Generate Outlines: Create an outline for essays, reports, or presentations.
Provide Inspiration: Generate motivational or inspirational messages related to the instruction.
Write Introductions: Draft introductory paragraphs for articles or essays.
Conclude Content: Summarize or create impactful conclusions.
Analyze Data: Provide insights or interpretations of data-based text.
Format for SEO: Write content optimized for search engines (e.g., keyword-rich text).
Tag Generation: Suggest tags, keywords, or hashtags related to the content.
Brainstorm Ideas: Provide a list of creative ideas for a given topic.
Craft Campaigns: Write promotional or marketing campaigns.
Generate Quotes or Sayings: Come up with unique quotes or proverbs related to the topic.
Write Descriptions: Generate concise descriptions for products, services, or ideas.
Provide Humor: Add jokes, puns, or lighthearted elements to the content. `

Top categories