Mini Editor - Enhanced Rich Text Editor

A powerful, modular Vue 3 rich text editor with comprehensive translation support, customizable toolbar, preview functionality, and enhanced media handling.

✨ Features

🎨 Core Features

Rich Text Editing: Bold, italic, underline, strikethrough
Text Formatting: Headings (H1-H5), text color, highlight colors
Lists & Alignment: Bullet lists, numbered lists, text alignment
Multilingual Support: Arabic and English with RTL/LTR switching
Media Support: Images, videos, audio with size controls
HTML Paste: Paste HTML code directly into the editor
Preview Mode: Preview content in a popup modal
Undo/Redo: Full undo/redo functionality
Clear Formatting: Remove all formatting with one click

🔧 Modular Architecture

Separate Toolbar Component: Customizable toolbar with show/hide options
Preview Component: Standalone preview modal
Media Uploader: Enhanced media upload with multiple tabs
Unified Icon System: Centralized icon management
CSS Separation: All styles moved to external CSS file

🎛️ Toolbar Customization

Control which buttons appear in the toolbar:

<MiniEditor
  :show-bold="true"
  :show-italic="true"
  :show-underline="false"
  :show-headings="true"
  :show-media="true"
  :show-preview="true"
  :show-language-switcher="true"
  :show-text-color="true"
  :show-highlight="true"
  :show-bullet-list="true"
  :show-numbered-list="true"
  :show-align-right="true"
  :show-align-center="true"
  :show-align-left="true"
  :show-undo="true"
  :show-redo="true"
  :show-clear-formatting="true"
/>

📱 Enhanced Media Upload

File Upload: Drag & drop or click to upload
URL Input: Paste media URLs directly
HTML Paste: Paste HTML code for custom media
Size Controls: Adjust width/height with presets
Preview: See media before inserting
Multiple Formats: Images, videos, audio files

🌐 Translation System

Built-in Translations: Arabic and English
Custom Translations: Override any translation
Exportable Utilities: Use translation functions in your app
RTL/LTR Support: Automatic direction switching

📦 Installation

npm install @hebamuh28/mini-editor
# or
yarn add @hebamuh28/mini-editor
# or
pnpm add @hebamuh28/mini-editor

🚀 Quick Start

<template>
  <div>
    <MiniEditor 
      v-model="content" 
      label="My Editor"
      placeholder="Start typing..."
    />
    <pre>{{ content }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { MiniEditor } from '@hebamuh28/mini-editor'

const content = ref({ ar: '', en: '' })
</script>

📖 Advanced Usage

Full Featured Editor

<MiniEditor 
  v-model="content" 
  label="Full Featured Editor"
  placeholder="Start typing here..."
  :show-language-switcher="true"
  :show-text-color="true"
  :show-highlight="true"
  :show-bold="true"
  :show-italic="true"
  :show-underline="true"
  :show-strike="true"
  :show-bullet-list="true"
  :show-numbered-list="true"
  :show-align-right="true"
  :show-align-center="true"
  :show-align-left="true"
  :show-headings="true"
  :show-media="true"
  :show-undo="true"
  :show-redo="true"
  :show-clear-formatting="true"
  :show-preview="true"
/>

Minimal Editor

<MiniEditor 
  v-model="content" 
  label="Minimal Editor"
  placeholder="Basic formatting only..."
  :show-language-switcher="false"
  :show-text-color="false"
  :show-highlight="false"
  :show-bold="true"
  :show-italic="true"
  :show-underline="false"
  :show-strike="false"
  :show-bullet-list="true"
  :show-numbered-list="true"
  :show-align-right="false"
  :show-align-center="false"
  :show-align-left="false"
  :show-headings="false"
  :show-media="false"
  :show-undo="true"
  :show-redo="true"
  :show-clear-formatting="false"
  :show-preview="false"
/>

Custom Translations

<template>
  <MiniEditor 
    v-model="content" 
    label="Custom Translations"
    :translations="customTranslations"
  />
</template>

<script setup>
import { ref } from 'vue'
import { MiniEditor } from '@hebamuh28/mini-editor'

const content = ref({ ar: '', en: '' })

const customTranslations = {
  ar: {
    switchLanguage: "تغيير اللغة",
    textColor: "لون النص",
    highlight: "تظليل",
    bold: "عريض",
    italic: "مائل",
    // ... more translations
  },
  en: {
    switchLanguage: "Change Language",
    textColor: "Text Color",
    highlight: "Highlight",
    bold: "Bold",
    italic: "Italic",
    // ... more translations
  }
}
</script>

Using Translation Utilities

import { 
  defaultTranslations, 
  mergeTranslations, 
  getTranslation,
  langConfig 
} from '@hebamuh28/mini-editor'

// Merge custom translations with defaults
const customTranslations = mergeTranslations(defaultTranslations, {
  ar: { bold: "عريض جداً" },
  en: { bold: "Very Bold" }
})

// Get specific translation
const boldText = getTranslation('bold', 'ar', customTranslations)

// Language configuration
console.log(langConfig.ar.label) // "العربية"

🎨 Styling

The editor uses Tailwind CSS classes and custom CSS. All styles are in editor.css:

/* Custom styles */
.editor-area {
  min-height: 120px;
  max-height: 260px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  font-family: "Tajawal", sans-serif;
}

.toolbar-btn {
  background: #f3f4f6;
  border: none;
  border-radius: 6px;
  padding: 5px 7px;
  transition: background 0.2s;
}

📋 Props

Prop	Type	Default	Description
`modelValue`	`Object`	Required	Content object with `ar` and `en` keys
`label`	`String`	-	Editor label
`hint`	`String`	-	Help text shown with info icon
`required`	`Boolean`	`false`	Show required indicator
`placeholder`	`String`	-	Placeholder text
`translations`	`Object`	Built-in	Custom translations
`showLanguageSwitcher`	`Boolean`	`true`	Show language switcher
`defaultLanguage`	`'ar' \| 'en'`	`'ar'`	Default language
`showTextColor`	`Boolean`	`true`	Show text color button
`showHighlight`	`Boolean`	`true`	Show highlight button
`showBold`	`Boolean`	`true`	Show bold button
`showItalic`	`Boolean`	`true`	Show italic button
`showUnderline`	`Boolean`	`true`	Show underline button
`showStrike`	`Boolean`	`true`	Show strikethrough button
`showBulletList`	`Boolean`	`true`	Show bullet list button
`showNumberedList`	`Boolean`	`true`	Show numbered list button
`showAlignRight`	`Boolean`	`true`	Show align right button
`showAlignCenter`	`Boolean`	`true`	Show align center button
`showAlignLeft`	`Boolean`	`true`	Show align left button
`showHeadings`	`Boolean`	`true`	Show heading buttons
`showMedia`	`Boolean`	`true`	Show media upload button
`showUndo`	`Boolean`	`true`	Show undo button
`showRedo`	`Boolean`	`true`	Show redo button
`showClearFormatting`	`Boolean`	`true`	Show clear formatting button
`showPreview`	`Boolean`	`true`	Show preview button

🎯 Events

Event	Payload	Description
`update:modelValue`	`Object`	Content updated
`languageChange`	`String`	Language switched

🏗️ Architecture

Components

MiniEditor.vue: Main editor component
MiniEditorToolbar.vue: Customizable toolbar
MiniEditorPreview.vue: Preview modal
MediaUploader.vue: Enhanced media upload
Icon.vue: Unified icon system

Utilities

translations.ts: Translation management
editor.css: All editor styles
types/index.ts: TypeScript definitions

🔧 Development

# Install dependencies
pnpm install

# Run development server
pnpm run dev

# Build for production
pnpm run build

# Run tests
pnpm run test

# Publish package
pnpm publish

Testing

Unit Tests

Run the unit tests:

npm run test

Integration Tests

Run comprehensive integration tests that simulate real-world package consumption:

npm run test:integration

The integration tests check:

✅ All required files exist in dist/
✅ Package.json exports are correctly configured
✅ Import syntax is valid for ES and UMD modules
✅ CSS file is valid and contains expected content
✅ Types field points to existing files
✅ Files field includes all necessary directories
✅ All export paths are valid
✅ Module compatibility (ES/UMD formats)
✅ Package size optimization warnings
✅ Common build issues (source maps, console.log, etc.)

These tests run automatically before publishing to catch issues that would break consumer projects.

📄 License

MIT License - see LICENSE file for details.

🤝 Contributing

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

📞 Support

If you have any questions or need help, please open an issue on GitHub.

Version: 1.2.0
Size: 91.71 kB (gzipped)
Dependencies: Vue 3, Tailwind CSS
Browser Support: Modern browsers with ES6+ support

Name		Name	Last commit message	Last commit date
Latest commit History 65 Commits
.github/workflows		.github/workflows
src		src
test		test
.gitignore		.gitignore
CHANGELOG.md		CHANGELOG.md
README.md		README.md
hebamuh28-mini-editor-1.2.2.tgz		hebamuh28-mini-editor-1.2.2.tgz
index.html		index.html
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts
vitest.config.ts		vitest.config.ts

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Mini Editor - Enhanced Rich Text Editor

✨ Features

🎨 Core Features

🔧 Modular Architecture

🎛️ Toolbar Customization

📱 Enhanced Media Upload

🌐 Translation System

📦 Installation

🚀 Quick Start

📖 Advanced Usage

Full Featured Editor

Minimal Editor

Custom Translations

Using Translation Utilities

🎨 Styling

📋 Props

🎯 Events

🏗️ Architecture

Components

Utilities

🔧 Development

Testing

Unit Tests

Integration Tests

📄 License

🤝 Contributing

📞 Support

About

Uh oh!

Releases

Packages

Languages

hebamuh68/mini-editor

Folders and files

Latest commit

History

Repository files navigation

Mini Editor - Enhanced Rich Text Editor

✨ Features

🎨 Core Features

🔧 Modular Architecture

🎛️ Toolbar Customization

📱 Enhanced Media Upload

🌐 Translation System

📦 Installation

🚀 Quick Start

📖 Advanced Usage

Full Featured Editor

Minimal Editor

Custom Translations

Using Translation Utilities

🎨 Styling

📋 Props

🎯 Events

🏗️ Architecture

Components

Utilities

🔧 Development

Testing

Unit Tests

Integration Tests

📄 License

🤝 Contributing

📞 Support

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Languages

Packages