editium 1.0.1

package/dist/types.d.ts

@@ -0,0 +1,99 @@
+import { BaseElement, BaseText } from 'slate';
+export type FormatType = 'bold' | 'italic' | 'underline' | 'code' | 'strikethrough' | 'superscript' | 'subscript';
+export type AlignmentType = 'left' | 'center' | 'right' | 'justify';
+export type BlockType = 'paragraph' | 'heading-one' | 'heading-two' | 'heading-three' | 'heading-four' | 'heading-five' | 'heading-six' | 'heading-seven' | 'heading-eight' | 'bulleted-list' | 'numbered-list' | 'list-item' | 'blockquote' | 'code-block' | 'horizontal-rule' | 'image' | 'table' | 'table-row' | 'table-cell';
+export type ToolbarItem = FormatType | BlockType | AlignmentType | 'link' | 'indent' | 'outdent' | 'undo' | 'redo' | 'separator' | 'view-output' | 'text-color' | 'bg-color' | 'table' | 'find-replace' | 'fullscreen';
+export declare const ALL_TOOLBAR_ITEMS: ToolbarItem[];
+export interface CustomElement extends BaseElement {
+    type: BlockType;
+    url?: string;
+    align?: AlignmentType;
+    children: CustomText[];
+}
+export interface CustomText extends BaseText {
+    text: string;
+    bold?: boolean;
+    italic?: boolean;
+    underline?: boolean;
+    code?: boolean;
+    strikethrough?: boolean;
+    superscript?: boolean;
+    subscript?: boolean;
+    color?: string;
+    backgroundColor?: string;
+    search?: boolean;
+    searchCurrent?: boolean;
+}
+export interface LinkElement extends BaseElement {
+    type: 'link';
+    url: string;
+    title?: string;
+    target?: '_blank' | '_self';
+    children: CustomText[];
+}
+export interface ImageElement extends BaseElement {
+    type: 'image';
+    url: string;
+    alt?: string;
+    width?: number;
+    height?: number;
+    align?: AlignmentType;
+    children: CustomText[];
+}
+export interface TableElement extends BaseElement {
+    type: 'table';
+    align?: AlignmentType;
+    width?: number;
+    children: TableRowElement[];
+}
+export interface TableRowElement extends BaseElement {
+    type: 'table-row';
+    children: TableCellElement[];
+}
+export interface TableCellElement extends BaseElement {
+    type: 'table-cell';
+    align?: AlignmentType;
+    children: (CustomElement | CustomText)[];
+}
+export interface EditiumProps {
+    /** Initial editor content. Default: empty paragraph with empty text node */
+    initialValue?: string | CustomElement[];
+    /** Callback when content changes. Default: undefined (no callback) */
+    onChange?: (html: string, json: CustomElement[]) => void;
+    /** Toolbar items to display. Default: 'all' */
+    toolbar?: ToolbarItem[] | 'all';
+    /** Placeholder text when editor is empty. Default: 'Start typing...' */
+    placeholder?: string;
+    /** CSS class name for the editor container. Default: '' */
+    className?: string;
+    /** Inline styles for the editor container. Default: {} */
+    style?: React.CSSProperties;
+    /** Whether the editor is read-only. Default: false */
+    readOnly?: boolean;
+    /** Custom image upload handler. Default: undefined */
+    onImageUpload?: (file: File) => Promise<string>;
+    /** Search query string for highlighting. Default: '' */
+    searchQuery?: string;
+    /** Array of search match locations. Default: [] */
+    searchMatches?: Array<{
+        path: any;
+        offset: number;
+        text: string;
+    }>;
+    /** Index of current search match. Default: 0 */
+    currentMatchIndex?: number;
+    /** Whether to show word count. Default: true */
+    showWordCount?: boolean;
+    /** Editor height. Default: '200px' */
+    height?: string | number;
+    /** Minimum editor height. Default: '150px' */
+    minHeight?: string | number;
+    /** Maximum editor height. Default: '250px' */
+    maxHeight?: string | number;
+}
+declare module 'slate' {
+    interface CustomTypes {
+        Element: CustomElement | LinkElement | ImageElement | TableElement | TableRowElement | TableCellElement;
+        Text: CustomText;
+    }
+}

package/dist/utils.d.ts

@@ -0,0 +1,55 @@
+import { Editor, Path } from 'slate';
+import { CustomElement, FormatType, BlockType, LinkElement, AlignmentType, ImageElement } from './types';
+export declare const isAlignmentActive: (editor: Editor, alignment: AlignmentType) => boolean;
+export declare const toggleAlignment: (editor: Editor, alignment: AlignmentType) => void;
+export declare const indentListItem: (editor: Editor) => void;
+export declare const outdentListItem: (editor: Editor) => void;
+export declare const isMarkActive: (editor: Editor, format: FormatType) => boolean;
+export declare const isBlockActive: (editor: Editor, format: BlockType) => boolean;
+export declare const toggleMark: (editor: Editor, format: FormatType) => void;
+export declare const applyColor: (editor: Editor, color: string | null) => void;
+export declare const applyBackgroundColor: (editor: Editor, color: string | null) => void;
+export declare const getActiveColor: (editor: Editor) => string | null;
+export declare const getActiveBackgroundColor: (editor: Editor) => string | null;
+export declare const toggleBlock: (editor: Editor, format: BlockType) => void;
+export declare const insertHorizontalRule: (editor: Editor) => void;
+export declare const insertImage: (editor: Editor, url: string, alt?: string, width?: number) => void;
+export declare const isValidImageUrl: (url: string) => boolean;
+export declare const insertLink: (editor: Editor, url: string, title?: string, target?: "_blank" | "_self") => void;
+export declare const isLinkActive: (editor: Editor) => boolean;
+export declare const getLinkAtCursor: (editor: Editor) => LinkElement | null;
+export declare const unwrapLink: (editor: Editor) => void;
+export declare const wrapLink: (editor: Editor, url: string, title?: string, target?: "_blank" | "_self") => void;
+export declare const insertTable: (editor: Editor, rows?: number, cols?: number) => void;
+export declare const isInTable: (editor: Editor) => boolean;
+export declare const addTableRow: (editor: Editor) => void;
+export declare const removeTableRow: (editor: Editor) => void;
+export declare const addTableColumn: (editor: Editor) => void;
+export declare const removeTableColumn: (editor: Editor) => void;
+export declare const setTableAlignment: (editor: Editor, alignment: AlignmentType) => void;
+export declare const findAllMatches: (editor: Editor, searchQuery: string) => Array<{
+    path: Path;
+    offset: number;
+    text: string;
+}>;
+export declare const navigateToMatch: (editor: Editor, match: {
+    path: Path;
+    offset: number;
+    text: string;
+}) => void;
+export declare const replaceMatch: (editor: Editor, match: {
+    path: Path;
+    offset: number;
+    text: string;
+}, replaceText: string) => void;
+export declare const replaceAllMatches: (editor: Editor, matches: Array<{
+    path: Path;
+    offset: number;
+    text: string;
+}>, replaceText: string) => void;
+export declare const serializeToHtml: (nodes: (CustomElement | LinkElement | ImageElement)[]) => string;
+export declare const defaultInitialValue: CustomElement[];
+export declare const getTextContent: (nodes: any[]) => string;
+export declare const countWords: (text: string) => number;
+export declare const countCharacters: (text: string) => number;
+export declare const countCharactersNoSpaces: (text: string) => number;

package/package.json

@@ -0,0 +1,105 @@
+{
+  "name": "editium",
+  "version": "1.0.1",
+  "type": "module",
+  "description": "A powerful and feature-rich React rich text editor component built with Slate.js, featuring comprehensive formatting options, tables, images, find & replace, and more",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "vanilla",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:watch": "rollup -c -w",
+    "dev": "npm run build:watch",
+    "example": "cd example && npm start",
+    "prepublishOnly": "npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest run --coverage",
+    "semantic-release": "semantic-release"
+  },
+  "keywords": [
+    "react",
+    "editor",
+    "rich-text",
+    "slate",
+    "wysiwyg",
+    "text-editor",
+    "contenteditable",
+    "markdown",
+    "formatting",
+    "tables",
+    "images",
+    "find-replace",
+    "fullscreen",
+    "word-count",
+    "character-count",
+    "slate-editor",
+    "react-editor",
+    "text-formatting",
+    "content-editor",
+    "document-editor"
+  ],
+  "author": {
+    "name": "NabarupDev",
+    "url": "https://github.com/NabarupDev"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NabarupDev/Editium.git"
+  },
+  "bugs": {
+    "url": "https://github.com/NabarupDev/Editium/issues"
+  },
+  "homepage": "https://github.com/NabarupDev/Editium#readme",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "slate": "^0.103.0",
+    "slate-history": "^0.100.0",
+    "slate-react": "^0.108.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.6",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^18.2.45",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^5.0.4",
+    "@vitest/ui": "^3.2.4",
+    "conventional-changelog-conventionalcommits": "^9.1.0",
+    "jsdom": "^27.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "semantic-release": "^24.2.9",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.3",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=14.0.0",
+    "npm": ">=6.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/vanilla/README.md

@@ -0,0 +1,409 @@
+# Editium Vanilla JavaScript Editor
+
+A lightweight, powerful rich text editor built with pure vanilla JavaScript. Zero dependencies, framework-agnostic, and production-ready.
+
+## Features
+
+- **Zero Dependencies** - Pure vanilla JavaScript, no external frameworks required
+- **Lightweight** - Minimal footprint with maximum functionality
+- **Rich Text Editing** - Comprehensive formatting options (bold, italic, underline, strikethrough, etc.)
+- **Advanced Features** - Tables, images, code blocks, and more
+- **Customizable** - Flexible toolbar and styling options
+- **Production Ready** - Battle-tested and reliable
+- **Multiple Formats** - Export to HTML, plain text, or JSON
+- **Keyboard Shortcuts** - Efficient editing with standard shortcuts
+- **Responsive** - Works seamlessly on all screen sizes
+- **Accessible** - ARIA support and keyboard navigation
+
+## Installation
+
+### CDN (Recommended)
+
+**Single Bundle** - All-in-one file including JavaScript, CSS, and icons:
+
+```html
+<script src="https://unpkg.com/editium@1.0.0/vanilla/editium.bundle.js"></script>
+```
+
+**Alternative CDNs:**
+```html
+<!-- jsDelivr -->
+<script src="https://cdn.jsdelivr.net/npm/editium@1.0.0/vanilla/editium.bundle.js"></script>
+```
+
+**Separate Files** - For more control:
+
+```html
+<!-- unpkg -->
+<link rel="stylesheet" href="https://unpkg.com/editium@1.0.0/vanilla/editium.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+<script src="https://unpkg.com/editium@1.0.0/vanilla/editium.js"></script>
+
+<!-- jsDelivr -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editium@1.0.0/vanilla/editium.css">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
+<script src="https://cdn.jsdelivr.net/npm/editium@1.0.0/vanilla/editium.js"></script>
+```
+
+### NPM
+
+```bash
+npm install editium
+```
+
+```javascript
+import 'editium/vanilla/editium.css';
+import Editium from 'editium/vanilla/editium.js';
+
+const editor = new Editium({
+  container: document.getElementById('editor'),
+  placeholder: 'Start typing...',
+  toolbar: 'all'
+});
+```
+
+### Self-Hosted
+
+Download the files from the [GitHub repository](https://github.com/NabarupDev/Editium) and include them in your project:
+
+```html
+<link rel="stylesheet" href="path/to/editium.css">
+<script src="path/to/editium.js"></script>
+```
+
+## Quick Start
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Editium Editor</title>
+  <script src="https://unpkg.com/editium@1.0.0/vanilla/editium.bundle.js"></script>
+</head>
+<body>
+  <div id="editor"></div>
+
+  <script>
+    const editor = new Editium({
+      container: document.getElementById('editor'),
+      placeholder: 'Start typing...',
+      toolbar: 'all',
+      showWordCount: true
+    });
+  </script>
+</body>
+</html>
+```
+
+## Configuration
+
+### Options
+
+```javascript
+const editor = new Editium({
+  container: document.getElementById('editor'),
+  placeholder: 'Start typing...',
+  toolbar: 'all',
+  showWordCount: true,
+  readOnly: false,
+  className: 'custom-class',
+  height: '300px',
+  minHeight: '200px',
+  maxHeight: '400px',
+  onChange: (content) => {
+    console.log('Content changed:', content);
+  },
+  onImageUpload: async (file) => {
+    const url = await uploadToServer(file);
+    return url;
+  }
+});
+```
+
+### Available Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `container` | HTMLElement | required | DOM element to attach the editor |
+| `placeholder` | string | `''` | Placeholder text when editor is empty |
+| `toolbar` | string \| array | `'all'` | Toolbar configuration ('all' or array of items) |
+| `showWordCount` | boolean | `false` | Display word and character count |
+| `readOnly` | boolean | `false` | Make editor read-only |
+| `className` | string | `''` | Custom CSS class for wrapper |
+| `height` | string \| number | `'200px'` | Default editor height |
+| `minHeight` | string \| number | `'150px'` | Minimum height before content shrinks |
+| `maxHeight` | string \| number | `'250px'` | Maximum height before scrolling |
+| `onChange` | function | `null` | Callback when content changes |
+| `onImageUpload` | function | `null` | Custom image upload handler |
+
+### Height Configuration
+
+Heights can be specified as strings (`'300px'`, `'20rem'`, `'50vh'`) or numbers (`300` converts to `'300px'`).
+
+```javascript
+const editor = new Editium({
+  container: document.getElementById('editor'),
+  height: 400,
+  minHeight: 200,
+  maxHeight: 600
+});
+```
+
+## Toolbar
+
+### Predefined Toolbar
+
+```javascript
+toolbar: 'all'
+```
+
+### Custom Toolbar
+
+```javascript
+toolbar: [
+  'bold', 'italic', 'underline',
+  'separator',
+  'heading-one', 'heading-two',
+  'separator',
+  'bulleted-list', 'numbered-list',
+  'separator',
+  'link', 'image', 'table',
+  'separator',
+  'undo', 'redo'
+]
+```
+
+### Available Items
+
+#### Text Formatting
+- `bold`, `italic`, `underline`, `strikethrough`
+- `code`, `superscript`, `subscript`
+
+#### Block Formats
+- `paragraph`
+- `heading-one`, `heading-two`, `heading-three`, `heading-four`, `heading-five`, `heading-six`
+- `blockquote`, `code-block`
+
+#### Alignment
+- `left`, `center`, `right`, `justify`
+
+#### Colors
+- `text-color`, `bg-color`
+
+#### Lists
+- `bulleted-list`, `numbered-list`
+- `indent`, `outdent`
+
+#### Insert
+- `link`, `image`, `table`, `horizontal-rule`
+
+#### History
+- `undo`, `redo`
+
+#### View
+- `preview`, `view-html`, `view-json`, `find-replace`, `fullscreen`
+
+#### Other
+- `separator`
+
+## API
+
+```javascript
+// Get content
+const html = editor.getHTML();
+const text = editor.getText();
+const json = editor.getJSON();
+
+// Set content
+editor.setContent('<p>New content</p>');
+
+// Clear and focus
+editor.clear();
+editor.focus();
+
+// Cleanup
+editor.destroy();
+```
+
+## Usage Examples
+
+### Basic Editor
+
+```html
+<div id="basic-editor"></div>
+
+<script>
+  const basicEditor = new Editium({
+    container: document.getElementById('basic-editor'),
+    placeholder: 'Write something...',
+    toolbar: ['bold', 'italic', 'underline', 'separator', 'link']
+  });
+</script>
+```
+
+### Full-Featured Editor
+
+```html
+<div id="full-editor"></div>
+
+<script>
+  const fullEditor = new Editium({
+    container: document.getElementById('full-editor'),
+    placeholder: 'Start writing your document...',
+    toolbar: 'all',
+    showWordCount: true,
+    onChange: (content) => {
+      console.log('Content updated:', content.html);
+    }
+  });
+</script>
+```
+
+### Read-Only Viewer
+
+```html
+<div id="viewer"></div>
+
+<script>
+  const viewer = new Editium({
+    container: document.getElementById('viewer'),
+    readOnly: true,
+    toolbar: []
+  });
+  
+  viewer.setContent('<h1>Document Title</h1><p>Document content...</p>');
+</script>
+```
+
+## Advanced Features
+
+### Custom Image Upload Handler
+
+```html
+<div id="editor-with-upload"></div>
+
+<script>
+  const editorWithUpload = new Editium({
+    container: document.getElementById('editor-with-upload'),
+    toolbar: 'all',
+    onImageUpload: async (file) => {
+      const formData = new FormData();
+      formData.append('image', file);
+      
+      const response = await fetch('/api/upload', {
+        method: 'POST',
+        body: formData
+      });
+      
+      const data = await response.json();
+      return data.url;
+    }
+  });
+</script>
+```
+
+### Saving and Loading Content
+
+```html
+<div id="editor"></div>
+<button onclick="saveContent()">Save</button>
+
+<script>
+  const editor = new Editium({
+    container: document.getElementById('editor'),
+    toolbar: 'all'
+  });
+  
+  function saveContent() {
+    const content = {
+      html: editor.getHTML(),
+      text: editor.getText(),
+      json: editor.getJSON()
+    };
+    
+    localStorage.setItem('editorContent', JSON.stringify(content));
+    
+    // Or send to server
+    fetch('/api/save', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(content)
+    });
+  }
+  
+  // Load saved content
+  const savedContent = localStorage.getItem('editorContent');
+  if (savedContent) {
+    const content = JSON.parse(savedContent);
+    editor.setContent(content.html);
+  }
+</script>
+```
+
+## Keyboard Shortcuts
+
+- `Ctrl/Cmd + B` - Bold
+- `Ctrl/Cmd + I` - Italic
+- `Ctrl/Cmd + U` - Underline
+- `Ctrl/Cmd + Z` - Undo
+- `Ctrl/Cmd + Y` - Redo
+- `F11` - Toggle fullscreen
+- `Ctrl/Cmd + F` - Find & Replace
+
+## Customization
+
+Custom styling example:
+
+```css
+/* Customize wrapper */
+.editium-wrapper {
+  border: 2px solid #007bff;
+  border-radius: 8px;
+}
+
+/* Customize toolbar */
+.editium-toolbar {
+  background-color: #f0f0f0;
+}
+
+/* Customize editor area */
+.editium-editor {
+  min-height: 300px;
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+/* Custom placeholder color */
+.editium-editor:empty:before {
+  color: #999;
+}
+```
+
+## Browser Compatibility
+
+- Chrome (latest)
+- Firefox (latest)
+- Safari (latest)
+- Edge (latest)
+
+## Links
+
+- **NPM Package**: https://www.npmjs.com/package/editium
+- **GitHub Repository**: https://github.com/NabarupDev/Editium
+- **Issues**: https://github.com/NabarupDev/Editium/issues
+- **unpkg CDN**: https://unpkg.com/editium@1.0.0/vanilla/
+- **jsDelivr CDN**: https://cdn.jsdelivr.net/npm/editium@1.0.0/vanilla/
+
+## License
+
+MIT License - See [LICENSE](../LICENSE) file for details.
+
+## Contributing
+
+Contributions are welcome! Please submit a Pull Request.
+
+---
+
+Made with ❤️ by [NabarupDev](https://github.com/NabarupDev)