rj-editor 1.2.0 → 1.3.1

package/README.md

@@ -12,7 +12,7 @@ It provides a ready-to-use `RJTextEditor` component with a tabbed toolbar, text
 - Style controls: font size, font family, text color, background color, clear formatting.
 - Paragraph tools: alignment, ordered list, unordered list, indent, outdent, line and paragraph spacing.
 - Insert tools: table, link, image, YouTube video, and editable code blocks.
-- Code blocks: editable code blocks, language selection, and persistent copy controls in both the editor and rendered HTML.
+- Code blocks: editable code blocks, custom headers, language selection, syntax highlighting, lightweight completions, and persistent copy controls in both the editor and rendered HTML.
 - Table editing: add/remove rows and columns, merge/split cells, header row/column, cell background, vertical alignment, delete table.
 - Image editing: upload, drag-and-drop, paste from clipboard, resize, align, alt text, caption, link, border, border radius, shadow, object fit, wrapping, rotate, replace, delete.
 - Browser fullscreen mode.
@@ -87,7 +87,11 @@ export function Article({ html }: { html: string }) {
 }
 ```
 
-Exported code blocks keep their language header and copy button. Importing `rj-editor` automatically registers the lightweight delegated copy handler, so code block copy controls also work inside content rendered with `dangerouslySetInnerHTML`.
+Exported content includes inline styles for rich editor-only elements such as code blocks, inline code, tables, images, YouTube embeds, and equations. This lets saved HTML render correctly in pages that do not mount the editor stylesheet.
+
+Exported code blocks keep their header and copy button. Importing `rj-editor` automatically registers the lightweight delegated copy handler, so code block copy controls also work inside content rendered with `dangerouslySetInnerHTML`.
+
+If you sanitize saved HTML before rendering it, keep the exported `style`, `data-rj-editor-code-block`, and `data-rj-editor-code-copy` attributes if you want the built-in rendered styles and copy controls to remain active.
 
 Only render trusted or sanitized HTML. Sanitize untrusted user-provided HTML before passing it to `dangerouslySetInnerHTML`.
 
@@ -292,6 +296,8 @@ Available table tools:
 - set vertical alignment;
 - delete table.
 
+Exported tables include inline border, header background, selected-cell cleanup, and rounded corner styles. The exported table palette follows the active editor theme so tables rendered with `dangerouslySetInnerHTML` match the light or dark editor output.
+
 ## Links
 
 Links are created with a custom modal. The modal supports URL and display text fields and works correctly in fullscreen mode.
@@ -305,11 +311,20 @@ Paste a YouTube URL from the `Insert` tab to add an embedded video. The editor c
 Insert a code block from the `Insert` tab. Code blocks support:
 
 - direct editing inside the document;
-- language selection;
+- a custom header/title, for example `package.json`, `Terminal`, or `npm`;
+- searchable language selection with presets such as Plain Text, Terminal, JSON, Bash, Shell, PNPM, NPM, Yarn, Bun, JavaScript, JSX, TypeScript, TSX, HTML, CSS, YAML, Dockerfile, SQL, Python, Rust, and more;
+- syntax highlighting when a Prism grammar is available;
+- Bash-style highlighting aliases for Terminal, Shell, PNPM, NPM, Yarn, and Bun;
+- lightweight code completions for supported languages and command snippets;
 - a copy button that remains visible when the block is not focused;
 - a persistent copy button in exported HTML rendered with `dangerouslySetInnerHTML`;
+- normalized paste handling for common documentation code panels, including tabbed package-manager examples;
 - HTML round trips through `value` and `defaultValue` without copying toolbar controls into the editable content.
 
+The code block header title is independent from the selected language. Use the title for the label users should see, and use the language selector for syntax highlighting and completions.
+
+Completions appear while typing inside a code block. Use `ArrowUp` and `ArrowDown` to move through suggestions, `Enter` or `Tab` to apply one, and `Escape` to close the menu.
+
 ## Fullscreen
 
 The fullscreen button uses the browser Fullscreen API. The editor is opened in real fullscreen mode, not only enlarged with CSS.
@@ -447,7 +462,24 @@ Common variables:
 | `--rj-editor-warning-border` | Validation warning border color. |
 | `--rj-editor-table-border` | Table border color. |
 | `--rj-editor-table-header-bg` | Table header background. |
+| `--rj-editor-table-selected-bg` | Selected table cell background. |
+| `--rj-editor-inline-code-bg` | Inline code background. |
+| `--rj-editor-inline-code-border` | Inline code border color. |
+| `--rj-editor-inline-code-text` | Inline code text color. |
+| `--rj-editor-code-bg` | Code block background. |
+| `--rj-editor-code-header-bg` | Code block header background. |
+| `--rj-editor-code-border` | Code block border and scrollbar color. |
+| `--rj-editor-code-text` | Code block base text color. |
+| `--rj-editor-code-muted` | Code block header and muted text color. |
+| `--rj-editor-code-keyword` | Code token keyword color. |
+| `--rj-editor-code-string` | Code token string color. |
+| `--rj-editor-code-number` | Code token number color. |
+| `--rj-editor-code-comment` | Code token comment color. |
+| `--rj-editor-code-function` | Code token function/class color. |
+| `--rj-editor-code-operator` | Code token operator/property/punctuation color. |
+| `--rj-editor-code-tag` | Code token tag/deleted color. |
 | `--rj-editor-image-border` | Image selection border color. |
+| `--rj-editor-image-shadow` | Image shadow value. |
 | `--rj-editor-danger` | Dangerous action color. |
 
 Override only the dark theme by targeting the editor theme attribute: