rj-editor 1.1.8 → 1.2.0

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: syntax highlighting, language selection, and persistent copy controls in both the editor and rendered HTML.
+- Code blocks: editable code blocks, language selection, 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.
@@ -169,6 +169,7 @@ When validation fails, the editor border follows the Ant Design error state.
 | `onBlur` | `React.FocusEventHandler<HTMLDivElement>` | `undefined` | Called when the editor root loses focus. |
 | `onChange` | `(html, json, editorState) => void` | `undefined` | Called whenever editor content changes. |
 | `onFocus` | `React.FocusEventHandler<HTMLDivElement>` | `undefined` | Called when the editor root receives focus. |
+| `onUpload` | `(file: File) => Promise<string>` | base64 fallback | Uploads image files and returns the image URL to store in editor content. |
 | `placeholder` | `string` | Locale-based text | Placeholder shown when the editor is empty. |
 | `showFooter` | `boolean` | `false` | Shows the optional editor footer status bar. |
 | `translations` | `DeepPartial<RJEditorTranslations>` | `undefined` | Overrides translations for the active locale. |
@@ -218,13 +219,44 @@ For a fully custom footer, pass a render function:
 
 ## Images
 
-Images can be inserted from the local file picker, drag-and-drop, or clipboard paste. The image is stored as a base64 data URL inside the editor content.
+Images can be inserted from the local file picker, drag-and-drop, or clipboard paste. By default, the editor converts images to base64 data URLs and stores them inside the HTML content. For production, pass `onUpload` so images are uploaded to your own server or storage service and only the returned URL is stored in the content.
 
 Important details:
 
 - Maximum image size is `5MB`.
-- Base64 images increase HTML size.
-- For large production systems, a server upload flow or storage adapter is recommended.
+- If `onUpload` is not provided, base64 fallback keeps local/demo usage working.
+- `onUpload` is used for image insert, paste, drop, and replace actions.
+- While the upload promise is pending, the relevant image controls show loading and are disabled.
+- If the upload promise rejects, the image is not inserted/replaced and the editor shows the localized upload error.
+
+Upload example:
+
+```tsx
+<RJTextEditor
+  onUpload={async (file) => {
+    const formData = new FormData()
+    formData.append('file', file)
+
+    const response = await fetch('/api/uploads/images', {
+      method: 'POST',
+      body: formData,
+    })
+
+    if (!response.ok) {
+      throw new Error('Image upload failed')
+    }
+
+    const data = await response.json()
+    return data.url
+  }}
+/>
+```
+
+The returned string must be the final image URL used in exported HTML:
+
+```html
+<img src="https://cdn.example.com/uploads/image.webp" alt="..." />
+```
 
 Image tools include:
 
@@ -273,7 +305,6 @@ 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;
-- syntax highlighting;
 - language selection;
 - a copy button that remains visible when the block is not focused;
 - a persistent copy button in exported HTML rendered with `dangerouslySetInnerHTML`;

package/dist/components/RJTextEditor.d.ts

@@ -1,4 +1,5 @@
 import type { RJTextEditorProps } from './rj-text-editor/RJTextEditor.types';
 import './RJTextEditor.scss';
 export type { RJTextEditorProps } from './rj-text-editor/RJTextEditor.types';
-export declare function RJTextEditor({ autofocus, className, defaultValue, footer, footerItems, footerLanguageLabel, footerZoom, id, locale, locales, namespace, onBlur, onChange, onFocus, placeholder, showFooter, translations, theme, value, }: RJTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export type { RJEditorImageUploadHandler } from './rj-text-editor/RJEditorImageUploadContext';
+export declare function RJTextEditor({ autofocus, className, defaultValue, footer, footerItems, footerLanguageLabel, footerZoom, id, locale, locales, namespace, onBlur, onChange, onFocus, onUpload, placeholder, showFooter, translations, theme, value, }: RJTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/global/spin-indicator/SpinIndicator.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    size?: number;
+    className?: string;
+};
+export default function SpinIndicator({ size, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rj-text-editor/ImageUploadContext.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { type RJEditorImageUploadHandler } from './RJEditorImageUploadContext';
+type ImageUploadProviderProps = {
+    children: React.ReactNode;
+    onImageUpload?: RJEditorImageUploadHandler;
+};
+export declare function ImageUploadProvider({ children, onImageUpload, }: ImageUploadProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/rj-text-editor/RJEditorImageUploadContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type RJEditorImageUploadHandler = (file: File) => Promise<string>;
+export declare const ImageUploadContext: React.Context<RJEditorImageUploadHandler>;
+export declare function useRJEditorImageUpload(): RJEditorImageUploadHandler;

package/dist/components/rj-text-editor/RJTextEditor.types.d.ts

@@ -14,6 +14,7 @@ export type RJTextEditorProps = {
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
     onChange?: (html: string, json: string, editorState: EditorState) => void;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onUpload?: (file: File) => Promise<string>;
     locale?: RJEditorLocaleCode;
     locales?: Record<string, DeepPartial<RJEditorTranslations>>;
     placeholder?: string;

package/dist/components/rj-text-editor/createInitialConfig.d.ts

@@ -1,7 +1,7 @@
 import { LinkNode } from '@lexical/link';
 import { ListItemNode, ListNode } from '@lexical/list';
 import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
-import { CodeHighlightNode, CodeNode } from '@lexical/code';
+import { CodeHighlightNode, CodeNode } from '@lexical/code-core';
 import { TextNode, type LexicalEditor } from 'lexical';
 import { EquationNode, ExtendedTextNode, ImageNode, YouTubeNode, replaceTextNodeWithExtendedTextNode } from '../../nodes/index';
 type CreateInitialConfigOptions = {

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import './styles/main.scss';
 export { RJTextEditor } from './components/RJTextEditor';
 export { enTranslations, mergeTranslations, RJEditorI18nProvider, ruTranslations, useRJEditorI18n, uzTranslations, } from './i18n/index';
 export type { RJTextEditorProps } from './components/RJTextEditor';
+export type { RJEditorImageUploadHandler } from './components/RJTextEditor';
 export type { DeepPartial, RJEditorFooterItem, RJEditorFooterStats, RJEditorLocaleCode, RJEditorTheme, RJEditorTranslations, RJTextEditorFooterRender, RJTextEditorValue, } from './types/index';