webeditor-basic

A lightweight, modern, zero-external-icon-dependency Rich Text Editor component for Vue 3 and Nuxt 3/4, built on top of TipTap.

✨ Features

• ⚡ Vue 3 & TypeScript: Native support built with <script setup lang="ts"> and complete type definitions.

• 🎨 Zero Icon Dependencies: Embedded, lightweight SVG icons — no FontAwesome or Lucide icons required.

• 🔄 Two-Way Binding: Full v-model support with automatic external state synchronization.

• 🛠️ Rich Formatting Controls:

• Text Styling: Bold, Italic, Underline, Strikethrough, Inline Code

• Headings: H1, H2, H3

• Lists & Blocks: Bulleted List, Numbered List, Blockquote, Code Block, Horizontal Divider

• Hyperlinks: Insert, edit, or remove links (_blank target)

• History: Undo & Redo stack management

• Utility: One-click "Clear Formatting" and customizable placeholder text

• 📦 Clean Output: Emits clean semantic HTML.

🏗️ Architecture & Component Structure

webeditor-basic/
├── src/
│   ├── WebEditor.vue     # Core TipTap editor component (Toolbar + Canvas)
│   ├── index.ts          # Library entry point (Exports WebEditor component)
│   ├── App.vue           # Local dev playground harness (Excluded from npm)
│   └── main.ts           # Local playground entry point (Excluded from npm)
├── dist/                 # Generated distribution files
│   ├── webeditor-basic.js # ESM bundle
│   ├── style.css         # Component stylesheet
│   └── index.d.ts        # TypeScript declarations generated via vue-tsc
├── index.html            # Vite playground HTML shell
├── vite.config.ts        # Library build configuration
├── tsconfig.json         # TypeScript compiler setup
└── package.json          # Package manifest & scripts

Component Breakdown (WebEditor.vue)

1. Toolbar (.webeditor-toolbar):

• Organized into logical groups separated by vertical dividers:
• History: Undo / Redo buttons with disabled state handlers (editor.can().undo()).
• Formatting: Toggle marks (toggleBold(), toggleItalic(), toggleUnderline(), toggleStrike(), toggleCode()).
• Headings: Set heading levels 1–3 (toggleHeading({ level })).
• Lists & Blocks: Unordered list, ordered list, blockquote, code block, and horizontal rule.
• Actions: Link prompt handler and clearFormatting() helper (unsetAllMarks().clearNodes()).

2. Editor Canvas (.webeditor-content):

• Powered by TipTap's <EditorContent> component.
• ProseMirror editor container styled with clean typography, code block highlights, quote borders, and empty placeholder state support (data-placeholder).

🚀 Installation

Install webeditor-basic along with its TipTap peer dependencies:

npm install webeditor-basic @tiptap/vue-3 @tiptap/starter-kit @tiptap/extension-underline @tiptap/extension-link @tiptap/extension-placeholder

💻 Usage

Vue 3 (Vite)

<script setup lang="ts">
import { ref } from 'vue'
import { WebEditor } from 'webeditor-basic'
import 'webeditor-basic/style.css'

const content = ref('<p>Hello World! Edit me...</p>')
</script>

<template>
  <main style="max-width: 800px; margin: 40px auto;">
    <h2>Rich Text Editor</h2>
    <WebEditor v-model="content" placeholder="Type something incredible..." />

    <div style="margin-top: 20px;">
      <h3>HTML Output:</h3>
      <pre>{{ content }}</pre>
    </div>
  </main>
</template>

Nuxt 3 / Nuxt 4

Because TipTap relies on DOM APIs, wrap the component in <ClientOnly> when rendering in Nuxt SSR applications:

<script setup lang="ts">
import { ref } from 'vue'
import { WebEditor } from 'webeditor-basic'
import 'webeditor-basic/style.css'

const content = ref('')
</script>

<template>
  <ClientOnly placeholder="Loading editor...">
    <WebEditor v-model="content" />
  </ClientOnly>
</template>

🎛️ Component API

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | modelValue | string | '' | The HTML content string bound to the editor (v-model). | | placeholder | string | 'Start typing...' | Placeholder text displayed when the editor canvas is empty. |

Events

| Event | Payload | Description | | --- | --- | --- | | update:modelValue | (value: string) | Emitted whenever the editor content changes. |

🛠️ Development & Local Playground

The project includes an isolated local dev environment so you can test component features with Hot Module Replacement (HMR) without pre-building or packing the package.

1. Run Dev Playground

npm run dev

Open http://localhost:5173 to test live changes in src/WebEditor.vue.

2. Build for Distribution

npm run build

Compiles production bundles to dist/ using Vite and outputs TypeScript types using vue-tsc.

📄 License

MIT