rt-native 1.0.100 → 1.0.103

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.
Files changed (2) hide show
  1. package/README.md +58 -28
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -1,5 +1,8 @@
1
1
  # `<rt-native>` — Native Web Component Rich Text Editor
2
2
 
3
+ **Author:** Ryan Kueter
4
+ **Updated:** April, 2026
5
+
3
6
  `rt-native.js` HTML Editor is a free native web component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, so see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. No frameworks, no build step, no dependencies — drop **one script tag** into any HTML page and you're done.
4
7
 
5
8
  ---
@@ -7,9 +10,10 @@
7
10
  ## Table of Contents
8
11
 
9
12
  1. [Files](#files)
10
- 2. [Quick Start](#quick-start)
11
- 3. [HTML Attributes](#html-attributes)
12
- 4. [JavaScript API](#javascript-api)
13
+ 2. [Installation](#installation)
14
+ 3. [Quick Start](#quick-start)
15
+ 4. [HTML Attributes](#html-attributes)
16
+ 5. [JavaScript API](#javascript-api)
13
17
  - [getValue()](#getvalue)
14
18
  - [getPlainText()](#getplaintext)
15
19
  - [setValue()](#setvalue)
@@ -18,8 +22,8 @@
18
22
  - [setPreviewCssFiles()](#setpreviewcssfiles)
19
23
  - [setPreviewCssFile()](#setpreviewcssfile)
20
24
  - [setPreviewCss()](#setpreviewcss)
21
- 5. [Events](#events)
22
- 6. [CSS Variables](#css-variables)
25
+ 6. [Events](#events)
26
+ 7. [CSS Variables](#css-variables)
23
27
  - [Toolbar](#toolbar-variables)
24
28
  - [Buttons](#button-variables)
25
29
  - [Content Area](#content-area-variables)
@@ -28,8 +32,8 @@
28
32
  - [Blockquote](#blockquote-variables)
29
33
  - [Code / Pre](#code--pre-variables)
30
34
  - [Modals & Dialogs](#modal--dialog-variables)
31
- 7. [Theming with CSS Classes](#theming-with-css-classes)
32
- 8. [configure() Reference](#configure-reference)
35
+ 8. [Theming with CSS Classes](#theming-with-css-classes)
36
+ 9. [configure() Reference](#configure-reference)
33
37
  - [toolbar](#toolbar-options)
34
38
  - [button](#button-options)
35
39
  - [content](#content-options)
@@ -39,12 +43,12 @@
39
43
  - [quote](#quote-options)
40
44
  - [code](#code-options)
41
45
  - [visibility](#visibility-options)
42
- 9. [Preview Window Styling](#preview-window-styling)
43
- 10. [Toolbar Buttons](#toolbar-buttons)
44
- 11. [Keyboard Shortcuts](#keyboard-shortcuts)
45
- 12. [Accessibility](#accessibility)
46
- 13. [Multiple Instances](#multiple-instances)
47
- 14. [Browser Support](#browser-support)
46
+ 10. [Preview Window Styling](#preview-window-styling)
47
+ 11. [Toolbar Buttons](#toolbar-buttons)
48
+ 12. [Keyboard Shortcuts](#keyboard-shortcuts)
49
+ 13. [Accessibility](#accessibility)
50
+ 14. [Multiple Instances](#multiple-instances)
51
+ 15. [Browser Support](#browser-support)
48
52
 
49
53
  ---
50
54
 
@@ -53,8 +57,45 @@
53
57
  | File | Purpose |
54
58
  |---|---|
55
59
  | `rt-native.js` | **The only required file.** Contains the complete editor engine, web component wrapper, all CSS defaults, and all dialog styles — everything is self-contained. |
56
- | `preview1.css` | Optional. Example preview stylesheet — base text, headings, links, blockquotes, and code/pre styles. Load with `setPreviewCssFiles()`. |
57
- | `preview2.css` | Optional. Example preview stylesheet — tables, lists, images, and horizontal rules. Load with `setPreviewCssFiles()`. |
60
+
61
+ ---
62
+
63
+ ## Installation
64
+
65
+ **npm**
66
+
67
+ ```bash
68
+ npm install rt-native
69
+ ```
70
+
71
+ ```html
72
+ <!DOCTYPE html>
73
+ <html lang="en">
74
+ <head>
75
+ <meta charset="UTF-8">
76
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
77
+ <title>Document</title>
78
+ <script type="module">
79
+ import '/node_modules/rt-native/rt-native.js';
80
+ </script>
81
+ </head>
82
+ <body>
83
+ <rt-native id="editor" height="400px"></rt-native>
84
+ </body>
85
+ </html>
86
+ ```
87
+
88
+ **CDN — unpkg**
89
+
90
+ ```html
91
+ <script src="https://unpkg.com/rt-native/rt-native.js"></script>
92
+ ```
93
+
94
+ **CDN — jsDelivr**
95
+
96
+ ```html
97
+ <script src="https://cdn.jsdelivr.net/npm/rt-native/rt-native.js"></script>
98
+ ```
58
99
 
59
100
  ---
60
101
 
@@ -201,7 +242,7 @@ Sets one or more CSS files to apply to **both the editor content area and the pr
201
242
 
202
243
  ```js
203
244
  // Load two stylesheets
204
- editor.setPreviewCssFiles('preview1.css', 'preview2.css');
245
+ editor.setPreviewCssFiles('/styles/content.css', '/styles/tables.css');
205
246
 
206
247
  // Load a single file
207
248
  editor.setPreviewCssFiles('/styles/my-content.css');
@@ -678,17 +719,6 @@ When you load preview CSS with `setPreviewCssFiles()` or `setPreviewCss()`, the
678
719
 
679
720
  2. **Preview window** — Content is rendered inside an `<iframe srcdoc>` with a completely isolated browsing context. The preview shows exactly what a reader would see in production with a clean browser baseline.
680
721
 
681
- ### Using the example stylesheets
682
-
683
- ```js
684
- editor.setPreviewCssFiles('preview1.css', 'preview2.css');
685
- ```
686
-
687
- | File | Covers |
688
- |---|---|
689
- | `preview1.css` | `p`, `strong`, `em`, `h1`–`h6`, `a`, `blockquote`, `code`, `pre` |
690
- | `preview2.css` | `table`, `thead`, `th`, `td`, `ul`, `ol`, `li`, `img`, `hr` |
691
-
692
722
  ### Writing your own preview CSS
693
723
 
694
724
  Write plain CSS — no special selectors, no ID prefixes, no scoping wrappers needed:
@@ -846,7 +876,7 @@ Each `<rt-native>` element is fully isolated. You can place as many on a page as
846
876
  document.getElementById('editor-1').configure({
847
877
  visibility: { clearAll: true, bold: true, italic: true }
848
878
  });
849
- document.getElementById('editor-2').setPreviewCssFiles('preview1.css', 'preview2.css');
879
+ document.getElementById('editor-2').setPreviewCssFiles('/styles/content.css');
850
880
  document.getElementById('editor-3').configure({ editor: { height: '400px' } });
851
881
  </script>
852
882
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rt-native",
3
- "version": "1.0.100",
3
+ "version": "1.0.103",
4
4
  "description": "rt-native HTML Editor is a free native web component that provides accessibility features and a wide variety of elements and customizations that make it one of the most robust and flexible HTML editors available. It allows the programmer to apply custom .css files to the preview window, so see how the content will be displayed in production. The editor uses embedded .svg Google Font Icons and the shadow DOM to isolate the HTML from inheriting the existing page styles. No frameworks, no build step, no dependencies — drop one script tag into any HTML page and you're done.",
5
5
  "main": "rt-native.js",
6
6
  "exports": {
@@ -13,11 +13,11 @@
13
13
  ],
14
14
  "keywords": [
15
15
  "rich-text-editor",
16
- "rich-textbox",
17
- "text-editor",
16
+ "rich-textbox",
17
+ "text-editor",
18
18
  "web-component",
19
19
  "custom-element",
20
- "html-editor",
20
+ "html-editor",
21
21
  "wysiwyg",
22
22
  "editor",
23
23
  "contenteditable",