editium 1.0.1
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/LICENSE +21 -0
- package/README.md +424 -0
- package/dist/Editium.d.ts +4 -0
- package/dist/ResizableImage.d.ts +9 -0
- package/dist/TableElement.d.ts +21 -0
- package/dist/Toolbar.d.ts +31 -0
- package/dist/index.d.ts +6 -0
- package/dist/index.esm.js +3128 -0
- package/dist/index.esm.js.map +1 -0
- package/dist/index.js +3154 -0
- package/dist/index.js.map +1 -0
- package/dist/types.d.ts +99 -0
- package/dist/utils.d.ts +55 -0
- package/package.json +105 -0
- package/vanilla/README.md +409 -0
- package/vanilla/build-bundle.js +41 -0
- package/vanilla/editium.bundle.js +3257 -0
- package/vanilla/editium.css +772 -0
- package/vanilla/editium.js +2453 -0
- package/vanilla/example/README.md +69 -0
- package/vanilla/example/demo.css +351 -0
- package/vanilla/example/demo.js +122 -0
- package/vanilla/example/index.html +202 -0
- package/vanilla/package.json +30 -0
|
@@ -0,0 +1,202 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Editium</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
|
8
|
+
<link rel="stylesheet" href="../editium.css">
|
|
9
|
+
<link rel="stylesheet" href="demo.css">
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div class="container">
|
|
13
|
+
<header>
|
|
14
|
+
<h1>Editium</h1>
|
|
15
|
+
</header>
|
|
16
|
+
|
|
17
|
+
<div class="demo-section">
|
|
18
|
+
<h2>Your Editor</h2>
|
|
19
|
+
<div id="editor"></div>
|
|
20
|
+
</div>
|
|
21
|
+
|
|
22
|
+
<!-- Installation Section -->
|
|
23
|
+
<section class="installation-section">
|
|
24
|
+
<div style="max-width: 800px; margin: 0 auto;">
|
|
25
|
+
<h2>Getting Started</h2>
|
|
26
|
+
|
|
27
|
+
<p style="color: #666; font-size: 16px; line-height: 1.6; margin-bottom: 30px; font-weight: 400;">
|
|
28
|
+
Choose your preferred installation method and start building with Editium
|
|
29
|
+
</p>
|
|
30
|
+
|
|
31
|
+
<!-- Installation Method Tabs -->
|
|
32
|
+
<div class="tab-container">
|
|
33
|
+
<!-- Tab Headers -->
|
|
34
|
+
<div class="tab-headers">
|
|
35
|
+
<button class="tab-btn active" onclick="switchInstallTab(event, 'npm')">NPM</button>
|
|
36
|
+
<button class="tab-btn" onclick="switchInstallTab(event, 'yarn')">Yarn</button>
|
|
37
|
+
<button class="tab-btn" onclick="switchInstallTab(event, 'pnpm')">PNPM</button>
|
|
38
|
+
<button class="tab-btn" onclick="switchInstallTab(event, 'cdn')">CDN</button>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- Tab Content -->
|
|
42
|
+
<div class="tab-content">
|
|
43
|
+
<!-- NPM Tab -->
|
|
44
|
+
<div id="npm-tab" class="tab-pane active">
|
|
45
|
+
<p style="color: #666; font-size: 14px; margin-bottom: 16px;">Install via Node Package Manager</p>
|
|
46
|
+
<div class="code-block">
|
|
47
|
+
<code>npm install editium</code>
|
|
48
|
+
<button class="copy-btn" onclick="copyToClipboard('npm install editium', this)">Copy</button>
|
|
49
|
+
</div>
|
|
50
|
+
</div>
|
|
51
|
+
|
|
52
|
+
<!-- Yarn Tab -->
|
|
53
|
+
<div id="yarn-tab" class="tab-pane">
|
|
54
|
+
<p style="color: #666; font-size: 14px; margin-bottom: 16px;">Install via Yarn package manager</p>
|
|
55
|
+
<div class="code-block">
|
|
56
|
+
<code>yarn add editium</code>
|
|
57
|
+
<button class="copy-btn" onclick="copyToClipboard('yarn add editium', this)">Copy</button>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- PNPM Tab -->
|
|
62
|
+
<div id="pnpm-tab" class="tab-pane">
|
|
63
|
+
<p style="color: #666; font-size: 14px; margin-bottom: 16px;">Install via PNPM package manager</p>
|
|
64
|
+
<div class="code-block">
|
|
65
|
+
<code>pnpm add editium</code>
|
|
66
|
+
<button class="copy-btn" onclick="copyToClipboard('pnpm add editium', this)">Copy</button>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
|
|
70
|
+
<!-- CDN Tab -->
|
|
71
|
+
<div id="cdn-tab" class="tab-pane">
|
|
72
|
+
<!-- CDN Sub-tabs -->
|
|
73
|
+
<div class="cdn-subtabs">
|
|
74
|
+
<button class="cdn-subtab-btn active" onclick="switchCdnTab(event, 'bundle')">Bundled (Recommended)</button>
|
|
75
|
+
<button class="cdn-subtab-btn" onclick="switchCdnTab(event, 'separate')">Separate Files</button>
|
|
76
|
+
</div>
|
|
77
|
+
|
|
78
|
+
<!-- Bundle Tab -->
|
|
79
|
+
<div id="bundle-tab" class="cdn-tab-pane active">
|
|
80
|
+
<p style="color: #666; font-size: 14px; margin-bottom: 16px;">Single file includes CSS, icons, and JavaScript</p>
|
|
81
|
+
<h4 style="font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 500;">unpkg</h4>
|
|
82
|
+
<div class="code-block">
|
|
83
|
+
<code><script src="https://unpkg.com/editium/vanilla/editium.bundle.js"></script></code>
|
|
84
|
+
<button class="copy-btn" onclick="copyToClipboard('<script src="https://unpkg.com/editium/vanilla/editium.bundle.js"></script>', this)">Copy</button>
|
|
85
|
+
</div>
|
|
86
|
+
<h4 style="font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 500; margin-top: 16px;">jsDelivr</h4>
|
|
87
|
+
<div class="code-block">
|
|
88
|
+
<code><script src="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.bundle.js"></script></code>
|
|
89
|
+
<button class="copy-btn" onclick="copyToClipboard('<script src="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.bundle.js"></script>', this)">Copy</button>
|
|
90
|
+
</div>
|
|
91
|
+
</div>
|
|
92
|
+
|
|
93
|
+
<!-- Separate Files Tab -->
|
|
94
|
+
<div id="separate-tab" class="cdn-tab-pane">
|
|
95
|
+
<p style="color: #666; font-size: 14px; margin-bottom: 16px;">For custom configurations</p>
|
|
96
|
+
<h4 style="font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 500;">unpkg</h4>
|
|
97
|
+
<div class="code-block">
|
|
98
|
+
<code><link rel="stylesheet" href="https://unpkg.com/editium/vanilla/editium.css"></code>
|
|
99
|
+
<button class="copy-btn" onclick="copyToClipboard('<link rel="stylesheet" href="https://unpkg.com/editium/vanilla/editium.css">', this)">Copy</button>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="code-block">
|
|
102
|
+
<code><script src="https://unpkg.com/editium/vanilla/editium.js"></script></code>
|
|
103
|
+
<button class="copy-btn" onclick="copyToClipboard('<script src="https://unpkg.com/editium/vanilla/editium.js"></script>', this)">Copy</button>
|
|
104
|
+
</div>
|
|
105
|
+
<h4 style="font-size: 13px; color: #888; margin-bottom: 8px; font-weight: 500; margin-top: 16px;">jsDelivr</h4>
|
|
106
|
+
<div class="code-block">
|
|
107
|
+
<code><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.css"></code>
|
|
108
|
+
<button class="copy-btn" onclick="copyToClipboard('<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.css">', this)">Copy</button>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="code-block">
|
|
111
|
+
<code><script src="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.js"></script></code>
|
|
112
|
+
<button class="copy-btn" onclick="copyToClipboard('<script src="https://cdn.jsdelivr.net/npm/editium/vanilla/editium.js"></script>', this)">Copy</button>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
</div>
|
|
117
|
+
</div>
|
|
118
|
+
|
|
119
|
+
<!-- Quick Usage Section with Tabs -->
|
|
120
|
+
<div class="tab-container" style="margin-top: 30px;">
|
|
121
|
+
<!-- Usage Tab Headers -->
|
|
122
|
+
<div class="usage-tab-headers">
|
|
123
|
+
<div style="display: flex;">
|
|
124
|
+
<button class="tab-btn active" onclick="switchUsageTab(event, 'react')">React</button>
|
|
125
|
+
<button class="tab-btn" onclick="switchUsageTab(event, 'vanilla')">Vanilla JS</button>
|
|
126
|
+
</div>
|
|
127
|
+
<button class="copy-btn" id="usage-copy-btn" onclick="copyUsageCode(this)">Copy</button>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<!-- Usage Tab Content -->
|
|
131
|
+
<div class="tab-content">
|
|
132
|
+
<!-- React Usage -->
|
|
133
|
+
<div id="react-tab" class="usage-pane active">
|
|
134
|
+
<pre><code>import { Editium } from 'editium';
|
|
135
|
+
|
|
136
|
+
function App() {
|
|
137
|
+
return (
|
|
138
|
+
<Editium
|
|
139
|
+
initialValue={[]}
|
|
140
|
+
toolbar="all"
|
|
141
|
+
placeholder="Start typing..."
|
|
142
|
+
height="300px"
|
|
143
|
+
minHeight="200px"
|
|
144
|
+
maxHeight="400px"
|
|
145
|
+
showWordCount={true}
|
|
146
|
+
onChange={(html, json) => {
|
|
147
|
+
console.log(html, json);
|
|
148
|
+
}}
|
|
149
|
+
/>
|
|
150
|
+
);
|
|
151
|
+
}</code></pre>
|
|
152
|
+
</div>
|
|
153
|
+
|
|
154
|
+
<!-- Vanilla JS Usage -->
|
|
155
|
+
<div id="vanilla-tab" class="usage-pane">
|
|
156
|
+
<pre><code>const editor = new Editium({
|
|
157
|
+
container: document.getElementById('editor'),
|
|
158
|
+
placeholder: 'Start typing...',
|
|
159
|
+
toolbar: 'all',
|
|
160
|
+
height: '300px',
|
|
161
|
+
minHeight: '200px',
|
|
162
|
+
maxHeight: '400px',
|
|
163
|
+
showWordCount: true,
|
|
164
|
+
onChange: (data) => {
|
|
165
|
+
console.log(data.html, data.json);
|
|
166
|
+
}
|
|
167
|
+
});</code></pre>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
</section>
|
|
173
|
+
|
|
174
|
+
<!-- Footer -->
|
|
175
|
+
<footer>
|
|
176
|
+
<div class="footer-content">
|
|
177
|
+
<div class="footer-brand">
|
|
178
|
+
<h3>Editium</h3>
|
|
179
|
+
<p>A powerful and flexible rich text editor for React and Vanilla JavaScript</p>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<div class="footer-links">
|
|
183
|
+
<h4>Resources</h4>
|
|
184
|
+
<div class="footer-links-list">
|
|
185
|
+
<a href="https://github.com/NabarupDev/Editium#readme" target="_blank" rel="noopener noreferrer">Documentation</a>
|
|
186
|
+
<a href="https://github.com/NabarupDev/Editium" target="_blank" rel="noopener noreferrer">GitHub</a>
|
|
187
|
+
<a href="https://www.npmjs.com/package/editium" target="_blank" rel="noopener noreferrer">NPM Package</a>
|
|
188
|
+
</div>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="footer-bottom">
|
|
193
|
+
<p>© <span id="year"></span> Editium • MIT License</p>
|
|
194
|
+
<p>Built with ❤️ by <a href="https://github.com/NabarupDev" target="_blank" rel="noopener noreferrer">Nabarup</a></p>
|
|
195
|
+
</div>
|
|
196
|
+
</footer>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<script src="../editium.js"></script>
|
|
200
|
+
<script src="demo.js"></script>
|
|
201
|
+
</body>
|
|
202
|
+
</html>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "editium-vanilla",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Editium - Vanilla JavaScript Rich Text Editor (part of editium package)",
|
|
5
|
+
"private": true,
|
|
6
|
+
"main": "editium.bundle.js",
|
|
7
|
+
"files": [
|
|
8
|
+
"editium.js",
|
|
9
|
+
"editium.css",
|
|
10
|
+
"editium.bundle.js",
|
|
11
|
+
"build-bundle.js",
|
|
12
|
+
"example/",
|
|
13
|
+
"README.md"
|
|
14
|
+
],
|
|
15
|
+
"scripts": {
|
|
16
|
+
"build": "node build-bundle.js"
|
|
17
|
+
},
|
|
18
|
+
"keywords": [
|
|
19
|
+
"editor",
|
|
20
|
+
"rich-text",
|
|
21
|
+
"wysiwyg",
|
|
22
|
+
"vanilla-js",
|
|
23
|
+
"contenteditable",
|
|
24
|
+
"text-editor",
|
|
25
|
+
"html-editor",
|
|
26
|
+
"javascript"
|
|
27
|
+
],
|
|
28
|
+
"author": "Nabarup",
|
|
29
|
+
"license": "MIT"
|
|
30
|
+
}
|