rt-native 1.0.106 → 1.0.107

package/README.md

@@ -33,22 +33,12 @@
    - [Code / Pre](#code--pre-variables)
    - [Modals & Dialogs](#modal--dialog-variables)
 8. [Theming with CSS Classes](#theming-with-css-classes)
-9. [configure() Reference](#configure-reference)
-   - [toolbar](#toolbar-options)
-   - [button](#button-options)
-   - [content](#content-options)
-   - [editor](#editor-options)
-   - [scroll](#scroll-options)
-   - [modal](#modal-options)
-   - [quote](#quote-options)
-   - [code](#code-options)
-   - [visibility](#visibility-options)
-10. [Preview Window Styling](#preview-window-styling)
-11. [Toolbar Buttons](#toolbar-buttons)
-12. [Keyboard Shortcuts](#keyboard-shortcuts)
-13. [Accessibility](#accessibility)
-14. [Multiple Instances](#multiple-instances)
-15. [Browser Support](#browser-support)
+9. [Preview Window Styling](#preview-window-styling)
+10. [Toolbar Buttons](#toolbar-buttons)
+11. [Keyboard Shortcuts](#keyboard-shortcuts)
+12. [Accessibility](#accessibility)
+13. [Multiple Instances](#multiple-instances)
+14. [Browser Support](#browser-support)
 
 ---
 
@@ -157,13 +147,8 @@ npm install rt-native
 
 <!-- Accessible label -->
 <rt-native aria-label="Article body"></rt-native>
-
-<!-- Declarative config (JSON attribute) -->
-<rt-native config='{"editor":{"height":"500px"},"visibility":{"embedMedia":false}}'></rt-native>
 ```
 
-> **Note:** **width** and **height** are shorthand for --rtb-editor-width and --rtb-editor-height. They can also be set via CSS variables or **configure({ editor: { width, height } })**.
-
 ---
 
 ## JavaScript API
@@ -197,21 +182,95 @@ editor.setValue('');   // clear
 
 ### configure()
 
-Applies appearance and behaviour options. Can be called at any time — style changes take effect immediately via CSS custom properties; visibility changes trigger a minimal toolbar re-render.
+Controls which toolbar buttons are rendered. All buttons are visible by default except the **status bar** (wordCount), which is hidden by default and revealed with the Toggle Status Bar button.
+
+Use `clearAll: true` to hide everything first, then opt individual buttons back in.
 
 ```js
+// Hide specific buttons
 editor.configure({
-    toolbar:    { /* ... */ },
-    button:     { /* ... */ },
-    content:    { /* ... */ },
-    editor:     { /* ... */ },
-    scroll:     { /* ... */ },
-    modal:      { /* ... */ },
-    visibility: { /* ... */ },
+    visibility: {
+        embedMedia:  false,
+        table:       false,
+        imageUpload: false,
+    }
+});
+
+// Pass every key explicitly as true to restore full toolbar
+editor.configure({
+    visibility: {
+        clearAll: true,
+        font: true, size: true, format: true, textStylesDivider: true,
+        bold: true, italic: true, underline: true, strikethrough: true,
+        subscript: true, superscript: true, formatDivider: true,
+        textColor: true, textColorDivider: true,
+        alignLeft: true, alignCenter: true, alignRight: true,
+        alignJustify: true, alignDivider: true,
+        copy: true, cut: true, paste: true, delete: true,
+        selectAll: true, actionDivider: true,
+        orderedList: true, unorderedList: true, indent: true, listDivider: true,
+        link: true, image: true, imageUpload: true,
+        quote: true, codeBlock: true, embedMedia: true,
+        table: true, horizontalRule: true, mediaDivider: true,
+        undo: true, redo: true, historyDivider: true,
+        saveHtml: true, htmlView: true, preview: true, statusBarToggle: true,
+        wordCount: true,
+    }
 });
 ```
 
-See [configure() Reference](#configure-reference) for the full option list.
+**All visibility keys:**
+
+| Key | Controls |
+|---|---|
+| font | Font family dropdown |
+| size | Font size dropdown |
+| format | Paragraph / heading format dropdown |
+| textStylesDivider | Divider after the three dropdowns |
+| bold | Bold button |
+| italic | Italic button |
+| underline | Underline button |
+| strikethrough | Strikethrough button |
+| subscript | Subscript button |
+| superscript | Superscript button |
+| formatDivider | Divider after text-format buttons |
+| textColor | Text color, background color, and remove-color buttons |
+| textColorDivider | Divider after color buttons |
+| alignLeft | Align left button |
+| alignCenter | Align center button |
+| alignRight | Align right button |
+| alignJustify | Justify button |
+| alignDivider | Divider after alignment buttons |
+| cut | Cut button |
+| copy | Copy button |
+| paste | Paste button |
+| delete | Delete button |
+| selectAll | Select all button |
+| actionDivider | Divider after clipboard buttons |
+| orderedList | Ordered list button |
+| unorderedList | Unordered list button |
+| indent | Increase / decrease indent buttons |
+| listDivider | Divider after list buttons |
+| link | Insert link and remove link buttons |
+| image | Insert image button |
+| imageUpload | Upload / embed image button |
+| quote | Block quote button |
+| codeBlock | Code block button |
+| embedMedia | Embed media (audio / PDF / iframe) button |
+| video | Video embed button |
+| table | Insert table button |
+| horizontalRule | Insert horizontal rule button |
+| mediaDivider | Divider after insert buttons |
+| undo | Undo button |
+| redo | Redo button |
+| historyDivider | Divider after undo / redo |
+| statusBarToggle | Toggle Status Bar button |
+| saveHtml | Save HTML file button |
+| htmlView | Toggle HTML source view button |
+| preview | Preview button |
+| wordCount | Status bar (word / character count) — hidden by default |
+
+> **Divider auto-hiding:** Dividers are only rendered when at least one button in their group is visible *and* the divider's own key is true.
 
 ### setReadOnly()
 
@@ -639,228 +698,6 @@ rt-native.fluent-dark {
 ```html
 <rt-native class="fluent-dark" id="editor" height="400px"></rt-native>
 ```
-
----
-
-## configure() Reference
-
-**configure()** accepts a single options object. Every property is optional. Calling **configure()** multiple times merges with the previous state.
-
-### toolbar options
-
-```js
-editor.configure({
-    toolbar: {
-        backgroundColor:              '#f5f5f5',
-        borderStyle:                  'solid',
-        borderWidth:                  '1px',
-        borderColor:                  '#ddd',
-        borderRadius:                 '4px',
-        dropdownBackgroundColor:      '#fff',
-        dropdownTextColor:            '#000',
-        dropdownBackgroundColorHover: '#e5e5e5',
-        dropdownTextColorHover:       '#000',
-    }
-});
-```
-
-### button options
-
-```js
-editor.configure({
-    button: {
-        textColor:               '#333',
-        textSize:                '14px',
-        textFont:                'Arial, sans-serif',
-        backgroundColor:         'transparent',
-        backgroundColorHover:    '#ddd',
-        backgroundColorSelected: '#ccc',
-        borderStyle:             'solid',
-        borderWidth:             '1px',
-        borderColor:             '#ccc',
-        borderColorHover:        '#aaa',
-        borderColorSelected:     '#aaa',
-        borderRadius:            '4px',
-    }
-});
-```
-
-### content options
-
-```js
-editor.configure({
-    content: {
-        textColor:       '#222',
-        textSize:        '16px',
-        textFont:        'Georgia, serif',
-        backgroundColor: '#fff',
-        boxShadow:       'none',
-    }
-});
-```
-
-### editor options
-
-```js
-editor.configure({
-    editor: {
-        width:              '100%',
-        height:             '500px',
-        borderStyle:        'solid',
-        borderWidth:        '1px',
-        borderColor:        '#ccc',
-        borderRadius:       '6px',
-        boxShadow:          '0 2px 8px rgba(0,0,0,0.1)',
-        removeResizeHandle: false,   // true = hide the resize grip
-    }
-});
-```
-
-### scroll options
-
-```js
-editor.configure({
-    scroll: {
-        width:               '8px',
-        opacity:             '0.8',
-        backgroundColor:     'transparent',
-        thumbBackground:     '#bbb',
-        thumbBackgroundHover:'#888',
-        thumbBorderRadius:   '4px',
-    }
-});
-```
-
-### modal options
-
-```js
-editor.configure({
-    modal: {
-        backgroundColor:        '#fff',
-        textColor:              '#000',
-        textSize:               '15px',
-        textFont:               'Arial, sans-serif',
-        textboxBackgroundColor: '#fafafa',
-        textboxTextColor:       '#000',
-        textboxBorderColor:     '#ccc',
-        checkboxAccentColor:    '#0066cc',
-    }
-});
-```
-
-### quote options
-
-```js
-editor.configure({
-    quote: {
-        backgroundColor: '#f9f9f9',
-        borderColor:     '#ccc',
-        borderWidth:     '5px',
-    }
-});
-```
-
-### code options
-
-```js
-editor.configure({
-    code: {
-        backgroundColor: '#f9f9f9',
-        borderRadius:    '10px',
-    }
-});
-```
-
-### visibility options
-
-Controls which toolbar buttons are rendered. All buttons are visible by default except the **status bar** (wordCount), which is hidden by default and revealed with the Toggle Status Bar button.
-
-Use `clearAll: true` to hide everything first, then opt individual buttons back in.
-
-```js
-// Hide specific buttons
-editor.configure({
-    visibility: {
-        embedMedia:  false,
-        table:       false,
-        imageUpload: false,
-    }
-});
-
-// Essentials-only toolbar
-editor.configure({
-    visibility: {
-        clearAll:      true,   // hide all first
-        bold:          true,
-        italic:        true,
-        underline:     true,
-        formatDivider: true,
-        alignLeft:     true,
-        alignCenter:   true,
-        alignRight:    true,
-        alignDivider:  true,
-        undo:          true,
-        redo:          true,
-        historyDivider:true,
-        htmlView:      true,
-        preview:       true,
-    }
-});
-```
-
-**All visibility keys:**
-
-| Key | Controls |
-|---|---|
-| font | Font family dropdown |
-| size | Font size dropdown |
-| format | Paragraph / heading format dropdown |
-| textStylesDivider | Divider after the three dropdowns |
-| bold | Bold button |
-| italic | Italic button |
-| underline | Underline button |
-| strikethrough | Strikethrough button |
-| subscript | Subscript button |
-| superscript | Superscript button |
-| formatDivider | Divider after text-format buttons |
-| textColor | Text color, background color, and remove-color buttons |
-| textColorDivider | Divider after color buttons |
-| alignLeft | Align left button |
-| alignCenter | Align center button |
-| alignRight | Align right button |
-| alignJustify | Justify button |
-| alignDivider | Divider after alignment buttons |
-| cut | Cut button |
-| copy | Copy button |
-| paste | Paste button |
-| delete | Delete button |
-| selectAll | Select all button |
-| actionDivider | Divider after clipboard buttons |
-| orderedList | Ordered list button |
-| unorderedList | Unordered list button |
-| indent | Increase / decrease indent buttons |
-| listDivider | Divider after list buttons |
-| link | Insert link and remove link buttons |
-| image | Insert image button |
-| imageUpload | Upload / embed image button |
-| quote | Block quote button |
-| codeBlock | Code block button |
-| embedMedia | Embed media (audio / PDF / iframe) button |
-| video | Video embed button |
-| table | Insert table button |
-| horizontalRule | Insert horizontal rule button |
-| mediaDivider | Divider after insert buttons |
-| undo | Undo button |
-| redo | Redo button |
-| historyDivider | Divider after undo / redo |
-| statusBarToggle | Toggle Status Bar button |
-| saveHtml | Save HTML file button |
-| htmlView | Toggle HTML source view button |
-| preview | Preview button |
-| wordCount | Status bar (word / character count) — hidden by default |
-
-> **Divider auto-hiding:** Dividers are only rendered when at least one button in their group is visible *and* the divider's own key is true.
-
 ---
 
 ## Preview Window Styling
@@ -871,28 +708,6 @@ When you load preview CSS with **setPreviewCssFiles()** or **setPreviewCss()**,
 
 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.
 
-### Writing your own preview CSS
-
-Write plain CSS — no special selectors, no ID prefixes, no scoping wrappers needed:
-
-```css
-/* my-content.css */
-p {
-    font-family: Georgia, serif;
-    line-height: 1.8;
-    margin-bottom: 1em;
-}
-
-h1, h2, h3 { color: #0a2540; }
-
-blockquote {
-    border-left: 4px solid #0070f3;
-    background: #f0f7ff;
-    padding: 12px 20px;
-    font-style: italic;
-}
-```
-
 ```js
 editor.setPreviewCssFiles('my-content.css');
 ```
@@ -1029,7 +844,6 @@ Each rt-native element is fully isolated. You can place as many on a page as nee
         visibility: { clearAll: true, bold: true, italic: true }
     });
     document.getElementById('editor-2').setPreviewCssFiles('/styles/content.css');
-    document.getElementById('editor-3').configure({ editor: { height: '400px' } });
 </script>
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rt-native",
-  "version": "1.0.106",
+  "version": "1.0.107",
   "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.",
   "main": "rt-native.js",
   "exports": {