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

1. Clone the repository:

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

2. Install dependencies:

   npm install

3. Start the development server:

   npm run dev

4. 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

Dependencies

• Vue 3.4+
• TipTap 2.9+
• Tailwind CSS 3.4+
• Various TipTap extensions for enhanced functionality

Browser Support

Supports all modern browsers (Chrome, Firefox, Safari, Edge).

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT