@seyamali/aurelia-editor 0.1.3 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +27 -45
- package/dist/aurelia-editor.js +1 -1
- package/dist/aurelia-editor.umd.cjs +63 -63
- package/dist/{code-block-popover-ui-u3iuYqYp.js → code-block-popover-ui-W3roaHxo.js} +1 -1
- package/dist/core/engine.d.ts +9 -0
- package/dist/{horizontal-rule-plugin-Ct8iq55t.js → horizontal-rule-plugin-DAMp-RQD.js} +1 -1
- package/dist/{index-BrE44rnx.js → index-C42uz2Y9.js} +1084 -1065
- package/dist/{state-logic-DmJ5y08x.js → state-logic-CqZk3p3d.js} +1 -1
- package/dist/{table-popover-ui-BoxmjrtM.js → table-popover-ui-Bw-6zN8p.js} +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
[](https://opensource.org/licenses/MIT)
|
|
5
5
|
[](https://www.typescriptlang.org/)
|
|
6
6
|
|
|
7
|
-
**Aurelia Editor** is a powerful, customizable, and framework-agnostic rich text editor built on top of [Lexical](https://lexical.dev/). It is designed for modern content creation, offering a clean, "Notion-style" interface combined with enterprise-grade features like MS Word compatibility,
|
|
7
|
+
**Aurelia Editor** is a powerful, customizable, and framework-agnostic rich text editor built on top of [Lexical](https://lexical.dev/). It is designed for modern content creation, offering a clean, "Notion-style" interface combined with enterprise-grade features like High-Fidelity Design Preservation, MS Word compatibility, and advanced layout tools.
|
|
8
8
|
|
|
9
9
|

|
|
10
10
|
|
|
@@ -14,53 +14,36 @@
|
|
|
14
14
|
|
|
15
15
|
**Aurelia Editor** delivers a premium writing experience with a "batteries-included" philosophy:
|
|
16
16
|
|
|
17
|
+
### 🎯 High-Fidelity Design (Same-to-Same)
|
|
18
|
+
* **Design Preservation**: Paste complex HTML layouts from tools or websites and preserve them 100%—including styles, meta tags, and scripts.
|
|
19
|
+
* **Clean Export**: Strips Lexical-specific internal attributes and pollution, ensuring production-ready HTML.
|
|
20
|
+
* **CSS Sandboxing**: Prefixes and scopes custom CSS to the editor container, preventing global style leaks.
|
|
21
|
+
|
|
17
22
|
### 📝 Core Editing
|
|
18
23
|
* **Rich Text**: Bold, Italic, Underline, Strikethrough, Subscript, Superscript, Inline Code.
|
|
19
24
|
* **Typography**: Hierarchical headings (H1-H6), Blockquotes, Dividers.
|
|
20
25
|
* **Fonts & Color**: Custom font families, text colors, and background highlights.
|
|
21
26
|
* **Lists**: Nested bullet and numbered lists with indentation controls.
|
|
22
27
|
* **Case Converter**: Toggle text between Uppercase, Lowercase, and Title Case.
|
|
23
|
-
* **Clear Formatting**: Instantly strip styles from copied text.
|
|
24
28
|
|
|
25
29
|
### 🖼️ Media & Embeds
|
|
26
30
|
* **Smart Images**: Drag & drop upload, resize, alignment positioning, captions, and link support.
|
|
27
31
|
* **Video Embedding**: YouTube integration with preview.
|
|
28
32
|
* **HTML Snippets**: Insert raw HTML for custom widgets or layouts.
|
|
29
|
-
* **Files**: Support for generic file attachments (extensible).
|
|
30
33
|
|
|
31
34
|
### 📊 Structured Content
|
|
32
35
|
* **Advanced Tables**: Header rows, cell merging, splitting, column resizing, and row/column management.
|
|
33
36
|
* **Code Blocks**: Syntax highlighting for multiple languages with copy support.
|
|
34
37
|
* **Table of Contents**: Auto-generated TOC based on document headings with scroll-spy.
|
|
35
38
|
* **Footnotes**: Academic-style referencing and footnotes.
|
|
36
|
-
* **Page Layout**: Page breaks and print-ready styles.
|
|
37
39
|
|
|
38
40
|
### 🚀 Productivity Tools
|
|
39
41
|
* **Slash Commands**: Type `/` to access a unified menu for all tools.
|
|
40
42
|
* **Format Painter**: Copy and paste styles between text blocks.
|
|
41
43
|
* **Find & Replace**: Search with match highlighting and bulk replacement.
|
|
42
44
|
* **Autosave**: Automatic local backup to prevent data loss.
|
|
43
|
-
* **Mentions & Tags**: Support for `@user` mentions or custom tags (configurable).
|
|
44
45
|
* **Placeholders / Merge Fields**: Insert dynamic variables like `{{FirstName}}`.
|
|
45
|
-
* **Emoji Picker**: Built-in library for expressive writing.
|
|
46
|
-
|
|
47
|
-
### 👀 View & Analysis
|
|
48
|
-
* **Document Outline**: Sidebar navigation for long documents.
|
|
49
|
-
* **Minimap**: VS Code-style minimap for quick scrolling.
|
|
50
|
-
* **Zen Mode**: Distraction-free full-screen writing.
|
|
51
|
-
* **Source View**: Edit the underlying HTML directly.
|
|
52
|
-
* **Word Count**: Real-time statistics.
|
|
53
46
|
|
|
54
|
-
### 🔄 Collaboration & History
|
|
55
|
-
* **Track Changes**: Suggestion mode (Accept/Reject changes).
|
|
56
|
-
* **Revision History**: visual history of edits (if backend connected).
|
|
57
|
-
* **Comments**: Threaded comments support (framework ready).
|
|
58
|
-
|
|
59
|
-
### 📤 Import / Export
|
|
60
|
-
* **PDF Export**: High-fidelity client-side PDF generation.
|
|
61
|
-
* **Word Support**: Import `.docx` files and export content to Word.
|
|
62
|
-
* **Markdown**: Full Markdown shortcut support (`##`, `*`, `>`).
|
|
63
|
-
|
|
64
47
|
---
|
|
65
48
|
|
|
66
49
|
## 📦 Installation
|
|
@@ -75,36 +58,35 @@ npm install @seyamali/aurelia-editor
|
|
|
75
58
|
|
|
76
59
|
## 🛠️ Usage
|
|
77
60
|
|
|
78
|
-
### Basic Setup
|
|
79
|
-
Initialize the editor
|
|
61
|
+
### Basic Setup (Recommended)
|
|
62
|
+
Initialize the full-featured editor (including toolbar and layout) with a single command:
|
|
80
63
|
|
|
81
64
|
```typescript
|
|
82
65
|
import { AureliaEditor } from '@seyamali/aurelia-editor';
|
|
83
|
-
import '@seyamali/aurelia-editor/dist/
|
|
66
|
+
import '@seyamali/aurelia-editor/dist/aurelia-editor.css';
|
|
84
67
|
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
theme: 'default',
|
|
88
|
-
placeholder: 'Start writing...'
|
|
89
|
-
});
|
|
68
|
+
// 1. Get container
|
|
69
|
+
const container = document.getElementById('editor-root');
|
|
90
70
|
|
|
91
|
-
|
|
71
|
+
// 2. Initialize (Static factory method)
|
|
72
|
+
const editor = await AureliaEditor.create(container);
|
|
92
73
|
```
|
|
93
74
|
|
|
94
|
-
### Retrieval &
|
|
95
|
-
|
|
75
|
+
### Retrieval & Fidelity (Framework Integration)
|
|
76
|
+
To interact with the editor in React, Angular, or Vue, use these high-fidelity helper methods:
|
|
96
77
|
|
|
97
78
|
```typescript
|
|
98
|
-
//
|
|
99
|
-
|
|
79
|
+
// --- GET CONTENT ---
|
|
80
|
+
// Returns clean, production-ready, high-fidelity HTML
|
|
81
|
+
const html = await editor.getHtml();
|
|
100
82
|
|
|
101
|
-
//
|
|
102
|
-
|
|
83
|
+
// --- SET CONTENT ---
|
|
84
|
+
// Sets high-fidelity HTML and injects associated styles/metadata
|
|
85
|
+
await editor.setHtml(initialHtml);
|
|
103
86
|
|
|
104
|
-
//
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
});
|
|
87
|
+
// --- GET STATE ---
|
|
88
|
+
// Get the internal Lexical JSON state
|
|
89
|
+
const jsonState = editor.getInternalEditor().getEditorState().toJSON();
|
|
108
90
|
```
|
|
109
91
|
|
|
110
92
|
---
|
|
@@ -114,13 +96,13 @@ editor.on('update', (content) => {
|
|
|
114
96
|
Aurelia Editor features a dynamic toolbar system. You can switch between built-in presets or define your own configuration.
|
|
115
97
|
|
|
116
98
|
### Toolbar Presets
|
|
117
|
-
Available presets: `standard`, `minimal`, `blogging`, `full`.
|
|
99
|
+
Available presets: `standard`, `minimal`, `blogging`, `documentation`, `full`.
|
|
118
100
|
|
|
119
101
|
```typescript
|
|
120
102
|
import { ToolbarConfigManager } from '@seyamali/aurelia-editor';
|
|
121
103
|
|
|
122
|
-
// Switch to a
|
|
123
|
-
ToolbarConfigManager.applyPreset('
|
|
104
|
+
// Switch to a documentation-focused interface
|
|
105
|
+
ToolbarConfigManager.applyPreset('documentation');
|
|
124
106
|
```
|
|
125
107
|
|
|
126
108
|
---
|
package/dist/aurelia-editor.js
CHANGED