rt-native 1.0.100 → 1.0.101

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 +55 -28
  2. package/package.json +4 -4
package/README.md CHANGED
@@ -7,9 +7,10 @@
7
7
  ## Table of Contents
8
8
 
9
9
  1. [Files](#files)
10
- 2. [Quick Start](#quick-start)
11
- 3. [HTML Attributes](#html-attributes)
12
- 4. [JavaScript API](#javascript-api)
10
+ 2. [Installation](#installation)
11
+ 3. [Quick Start](#quick-start)
12
+ 4. [HTML Attributes](#html-attributes)
13
+ 5. [JavaScript API](#javascript-api)
13
14
  - [getValue()](#getvalue)
14
15
  - [getPlainText()](#getplaintext)
15
16
  - [setValue()](#setvalue)
@@ -18,8 +19,8 @@
18
19
  - [setPreviewCssFiles()](#setpreviewcssfiles)
19
20
  - [setPreviewCssFile()](#setpreviewcssfile)
20
21
  - [setPreviewCss()](#setpreviewcss)
21
- 5. [Events](#events)
22
- 6. [CSS Variables](#css-variables)
22
+ 6. [Events](#events)
23
+ 7. [CSS Variables](#css-variables)
23
24
  - [Toolbar](#toolbar-variables)
24
25
  - [Buttons](#button-variables)
25
26
  - [Content Area](#content-area-variables)
@@ -28,8 +29,8 @@
28
29
  - [Blockquote](#blockquote-variables)
29
30
  - [Code / Pre](#code--pre-variables)
30
31
  - [Modals & Dialogs](#modal--dialog-variables)
31
- 7. [Theming with CSS Classes](#theming-with-css-classes)
32
- 8. [configure() Reference](#configure-reference)
32
+ 8. [Theming with CSS Classes](#theming-with-css-classes)
33
+ 9. [configure() Reference](#configure-reference)
33
34
  - [toolbar](#toolbar-options)
34
35
  - [button](#button-options)
35
36
  - [content](#content-options)
@@ -39,12 +40,12 @@
39
40
  - [quote](#quote-options)
40
41
  - [code](#code-options)
41
42
  - [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)
43
+ 10. [Preview Window Styling](#preview-window-styling)
44
+ 11. [Toolbar Buttons](#toolbar-buttons)
45
+ 12. [Keyboard Shortcuts](#keyboard-shortcuts)
46
+ 13. [Accessibility](#accessibility)
47
+ 14. [Multiple Instances](#multiple-instances)
48
+ 15. [Browser Support](#browser-support)
48
49
 
49
50
  ---
50
51
 
@@ -53,8 +54,45 @@
53
54
  | File | Purpose |
54
55
  |---|---|
55
56
  | `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()`. |
57
+
58
+ ---
59
+
60
+ ## Installation
61
+
62
+ **npm**
63
+
64
+ ```bash
65
+ npm install rt-native
66
+ ```
67
+
68
+ ```html
69
+ <!DOCTYPE html>
70
+ <html lang="en">
71
+ <head>
72
+ <meta charset="UTF-8">
73
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
74
+ <title>Document</title>
75
+ <script type="module">
76
+ import '/node_modules/rt-native/rt-native.js';
77
+ </script>
78
+ </head>
79
+ <body>
80
+ <rt-native id="editor" height="400px"></rt-native>
81
+ </body>
82
+ </html>
83
+ ```
84
+
85
+ **CDN — unpkg**
86
+
87
+ ```html
88
+ <script src="https://unpkg.com/rt-native/rt-native.js"></script>
89
+ ```
90
+
91
+ **CDN — jsDelivr**
92
+
93
+ ```html
94
+ <script src="https://cdn.jsdelivr.net/npm/rt-native/rt-native.js"></script>
95
+ ```
58
96
 
59
97
  ---
60
98
 
@@ -201,7 +239,7 @@ Sets one or more CSS files to apply to **both the editor content area and the pr
201
239
 
202
240
  ```js
203
241
  // Load two stylesheets
204
- editor.setPreviewCssFiles('preview1.css', 'preview2.css');
242
+ editor.setPreviewCssFiles('/styles/content.css', '/styles/tables.css');
205
243
 
206
244
  // Load a single file
207
245
  editor.setPreviewCssFiles('/styles/my-content.css');
@@ -678,17 +716,6 @@ When you load preview CSS with `setPreviewCssFiles()` or `setPreviewCss()`, the
678
716
 
679
717
  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
718
 
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
719
  ### Writing your own preview CSS
693
720
 
694
721
  Write plain CSS — no special selectors, no ID prefixes, no scoping wrappers needed:
@@ -846,7 +873,7 @@ Each `<rt-native>` element is fully isolated. You can place as many on a page as
846
873
  document.getElementById('editor-1').configure({
847
874
  visibility: { clearAll: true, bold: true, italic: true }
848
875
  });
849
- document.getElementById('editor-2').setPreviewCssFiles('preview1.css', 'preview2.css');
876
+ document.getElementById('editor-2').setPreviewCssFiles('/styles/content.css');
850
877
  document.getElementById('editor-3').configure({ editor: { height: '400px' } });
851
878
  </script>
852
879
  ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rt-native",
3
- "version": "1.0.100",
3
+ "version": "1.0.101",
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",