@globalpress/globalpress-editor NPM

Globalpress Editor

Globalpress Editor is a powerful Vue 3-based rich text editor component built with TipTap. It provides a comprehensive set of text editing features with a modern, customizable interface.

Features

Rich Text Editing: Full-featured text editing powered by TipTap
Task Lists: Support for interactive task lists and checkboxes
Text Alignment: Control text alignment (left, center, right)
Character Count: Built-in character and word counting functionality
Bubble Menu: Context-sensitive formatting menu that appears when text is selected
Command Palette: Quick access to editor commands and formatting options
Custom Toolbar: Fully customizable toolbar with reusable button components
Placeholder Support: Configurable placeholder text when editor is empty
Tailwind Integration: Styled with Tailwind CSS for easy customization
TypeScript Support: Built with type safety in mind

Installation

npm install globalpress-editor

Setup

1. Install Required Dependencies

npm install -D tailwindcss postcss autoprefixer @tailwindcss/typography

2. Configure Tailwind CSS

Create or update your tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./src/**/*.{vue,js,ts,jsx,tsx}",
    "./node_modules/globalpress-editor/**/*.{vue,js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/typography')
  ],
}

3. Import Styles

In your app's entry file (e.g., App.vue):

<script setup>
import { GlobalpressEditorComponent } from 'globalpress-editor'
</script>

<style>
/* Import Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Import editor styles */
@import 'globalpress-editor/dist/style.css';
</style>

<template>
  <GlobalpressEditorComponent />
</template>

Usage

GlobalpressEditorComponent Props

initialContent

Type: Object
Default:

{
  type: "doc",
  content: [
    {
      type: "paragraph",
      content: [
        {
          type: "text",
          text: "Welcome to the editor! Try using the bold, italic, underline, and strike buttons above. You can also create bullet and ordered lists.",
        },
      ],
    },
  ],
}

Description: Initial content to populate the editor with. Should follow the TipTap JSON structure.

Editor Configuration

The editor comes pre-configured with the following extensions:

StarterKit: Includes essential editing features with custom configurations:
- Dropcursor with dark gray color and 2px width
- Bullet and ordered lists with mark preservation
- Custom list item styling
Text Formatting:
- Underline support
- Strikethrough support
- Text alignment for headings and paragraphs
Task Lists:
- Nested task list support
- Interactive checkboxes
- Custom styling for completed tasks
Command System:
- Slash commands for quick actions
- Custom suggestion handling
Placeholder Text:
- Dynamic placeholders based on node type
- Default placeholder: 'Write something, or "/" for commands'
Character Count:
- Built-in character counting
- Word count display
Bubble Menu:
- Context-sensitive formatting options
- Appears on text selection

Available Components

EditorToolbar

A customizable toolbar component that provides formatting controls.

EditorBubbleMenu

A context menu that appears when text is selected, providing quick formatting options.

CharWordCountBadge

Displays character and word count information.

CommandList

Provides a command palette interface for quick access to editor functions.

Styling

The editor uses Tailwind CSS for styling and includes the @tailwindcss/typography plugin for rich text styling. The default styles provide a clean, modern interface that can be customized through Tailwind's configuration.

Key styling features:

Responsive design
Custom editor wrapper with subtle shadow and border
Interactive task list checkboxes
Dynamic placeholder text styling
Word count badge styling

Development

Clone the repository:

git clone https://github.com/yourusername/globalpress-editor.git

Install dependencies:
```
npm install
```
Start the development server:
```
npm run dev
```
Build: The project supports two build modes:
```
# Build the library for distribution
npm run build

# Build a demo version with index.html
npm run build:demo
```
- build: Creates a library build that can be imported into other projects
- build:demo: Creates a standalone demo build that includes an index.html file, useful for showcasing the component