rj-editor 0.1.1 → 1.0.0

package/README.md

@@ -1,51 +1,342 @@
 # RJ Editor
 
-Lexical asosida qurilgan React rich text editor komponenti.
+`rj-editor` - React uchun qurilgan rich text editor kutubxonasi. U maqola yozish, admin panel, CMS, blog, ta'lim platformasi yoki hujjatga yaqin matn kiritish tajribasi kerak bo'lgan React loyihalar uchun mo'ljallangan.
 
-## Install
+Editor bitta `RJTextEditor` komponenti orqali matn formatlash, jadval, link, rasm, YouTube video, fullscreen, i18n, theme va Ant Design Form integratsiyasini beradi.
+
+## Demo
+
+`RJTextEditor` imkoniyatlarini live demo orqali sinab ko'rish mumkin. Demo editorni Ant Design `Form.Item` ichida ishlatadi, `onChange` orqali HTML outputni ko'rsatadi va form submit qilinganda editor qiymatini preview sifatida chiqaradi.
+
+**Live demo:** [https://rj-editor.vercel.app](https://rj-editor.vercel.app)
+
+Demo'ni lokal ishga tushirish:
+
+```bash
+git clone https://github.com/RavshanJumaqulov/rj-editor.git
+cd rj-editor
+npm install
+npm run dev
+```
+
+Keyin browserda Vite ko'rsatgan lokal manzilni oching. Odatda:
+
+```txt
+http://localhost:5173
+```
+
+Demo sahifada quyidagilarni tekshirish mumkin:
+
+- `RJTextEditor`ni oddiy component sifatida ishlatish;
+- Ant Design `Form.Item` bilan qiymat yig'ish;
+- HTML outputni real vaqt rejimida olish;
+- table, image, link, YouTube, fullscreen va contextual toolbarlarni sinash;
+- `defaultValue`/`value` orqali saqlangan HTML kontentni qayta editorga yuklash.
+
+Demo kodi: [`src/App.tsx`](https://github.com/RavshanJumaqulov/rj-editor/blob/main/src/App.tsx)
+
+## Imkoniyatlar
+
+- Rich text: bold, italic, underline, strikethrough, subscript, superscript.
+- Style controls: font size, font family, text color, background color, clear formatting.
+- Paragraph tools: alignment, ordered/unordered list, indent/outdent, line and paragraph spacing.
+- Insert tools: table, link, image, YouTube video.
+- Table tools: row/column qo'shish va o'chirish, merge/split, header row/column, cell background, vertical alignment, table delete.
+- Image tools: local image upload, drag-and-drop, paste from clipboard, base64 saqlash, resize, alignment, alt text, caption, link, border, radius, shadow, crop mode, wrapping, rotate, replace, delete.
+- Browser fullscreen mode.
+- Ant Design `Form.Item` bilan ishlash.
+- `uz`, `en`, `ru` lokalizatsiya va custom translation qo'shish.
+- Theme qilish uchun CSS custom property'lar.
+
+## O'rnatish
 
 ```bash
 npm install rj-editor
 ```
 
-## Usage
+React va ReactDOM peer dependency hisoblanadi. Loyihangizda ular o'rnatilgan bo'lishi kerak.
+
+```bash
+npm install react react-dom
+```
+
+## Tez Boshlash
 
 ```tsx
-import { RJTextEditor } from 'rj-editor'
-import 'rj-editor/style.css'
+import { RJTextEditor } from "rj-editor";
 
 export function App() {
   return (
     <RJTextEditor
       autofocus
-      onChange={(value) => {
-        console.log(value.html)
-        console.log(value.json)
+      locale="uz"
+      placeholder="Maqolangizni shu yerga yozing..."
+      onChange={(html) => {
+        console.log(html);
       }}
-      placeholder="Matn yozing..."
     />
-  )
+  );
 }
 ```
 
-## Props
+Style faylni alohida import qilish shart emas. `RJTextEditor` import qilinganda kutubxona style'lari build ichida ulanadi.
 
-```ts
-type RJTextEditorProps = {
-  autofocus?: boolean
-  className?: string
-  namespace?: string
-  onChange?: (value: RJTextEditorValue) => void
-  placeholder?: string
+## Default Value
+
+Editorga dastlabki HTML qiymat berish mumkin.
+
+```tsx
+<RJTextEditor
+  defaultValue="<p>Salom, dunyo!</p>"
+  onChange={(html) => console.log(html)}
+/>
+```
+
+## Controlled Value
+
+`value` prop orqali editorni controlled holatda ishlatish mumkin. `onChange` signature o'zgarmaydi: birinchi argument doim HTML string bo'ladi.
+
+```tsx
+import { useState } from "react";
+import { RJTextEditor } from "rj-editor";
+
+export function App() {
+  const [content, setContent] = useState("<p>Dastlabki matn</p>");
+
+  return <RJTextEditor value={content} onChange={(html) => setContent(html)} />;
+}
+```
+
+## Ant Design Form Bilan Ishlatish
+
+`RJTextEditor` Ant Design `Form.Item` ichida oddiy input kabi ishlaydi. Form `name` bo'yicha editor HTML qiymatini yig'adi.
+
+```tsx
+import { Button, Form } from "antd";
+import { RJTextEditor } from "rj-editor";
+
+export function ArticleForm() {
+  return (
+    <Form
+      layout="vertical"
+      onFinish={(values) => {
+        console.log(values.content);
+      }}
+    >
+      <Form.Item
+        label="Maqola"
+        name="content"
+        rules={[{ required: true, message: "Maqola matnini kiriting" }]}
+      >
+        <RJTextEditor placeholder="Maqolangizni yozing..." />
+      </Form.Item>
+
+      <Button htmlType="submit" type="primary">
+        Saqlash
+      </Button>
+    </Form>
+  );
 }
 ```
 
-## Style
+Validatsiya xatolik holatida editor borderi Ant Design error rangiga kiradi.
+
+## Props
+
+| Prop           | Type                                                | Default              | Izoh                                                                   |
+| -------------- | --------------------------------------------------- | -------------------- | ---------------------------------------------------------------------- |
+| `autofocus`    | `boolean`                                           | `false`              | Editor ochilganda avtomatik focus beradi.                              |
+| `className`    | `string`                                            | `undefined`          | Root editor wrapper uchun qo'shimcha class.                            |
+| `defaultValue` | `string`                                            | `undefined`          | Editorning dastlabki HTML qiymati.                                     |
+| `id`           | `string`                                            | `undefined`          | Root editor wrapper uchun `id`. Form.Item bilan kelganda ham ishlaydi. |
+| `locale`       | `'uz' \| 'en' \| 'ru' \| string`                    | `'uz'`               | Editor tili.                                                           |
+| `locales`      | `Record<string, DeepPartial<RJEditorTranslations>>` | `undefined`          | Qo'shimcha custom locale'lar.                                          |
+| `namespace`    | `string`                                            | `'RJEditor'`         | Editor instance uchun namespace qiymati.                               |
+| `onBlur`       | `React.FocusEventHandler<HTMLDivElement>`           | `undefined`          | Root wrapper blur eventi.                                              |
+| `onChange`     | `(html, json, editorState) => void`                 | `undefined`          | Editor kontenti o'zgarganda chaqiriladi.                               |
+| `onFocus`      | `React.FocusEventHandler<HTMLDivElement>`           | `undefined`          | Root wrapper focus eventi.                                             |
+| `placeholder`  | `string`                                            | Locale bo'yicha matn | Bo'sh editor ichida ko'rinadigan matn.                                 |
+| `translations` | `DeepPartial<RJEditorTranslations>`                 | `undefined`          | Joriy locale tarjimalarini qisman override qilish.                     |
+| `value`        | `string`                                            | `undefined`          | Controlled HTML qiymat.                                                |
+
+## onChange
 
-Paket CSS faylini alohida import qiladi:
+`onChange` uchta argument qaytaradi:
 
 ```ts
-import 'rj-editor/style.css'
+type OnChange = (
+  html: string,
+  json: string,
+  editorState: unknown,
+) => void;
+```
+
+- `html` - kontentning HTML string ko'rinishi. Serverga saqlash va keyin `defaultValue` yoki `value` sifatida qayta berish uchun qulay.
+- `json` - editor holatining JSON string ko'rinishi.
+- `editorState` - editorning joriy runtime holati.
+
+## Toolbar
+
+Toolbar tablar asosida ishlaydi:
+
+- `Home` - asosiy text formatlash va paragraph tool'lar.
+- `Insert` - table, link, image va YouTube video qo'shish.
+- `Image` - rasm tanlanganda chiqadigan contextual tab.
+- `Table` - cursor table ichida bo'lganda chiqadigan contextual tab.
+
+`Image` va `Table` tablari faqat kerakli context mavjud bo'lganda ko'rinadi. Bu Word'dagi contextual toolbar tajribasiga yaqinroq UX beradi.
+
+## Rasm Bilan Ishlash
+
+Rasm hozircha serverga yuklanmaydi. Local fayl tanlanganda, drag-and-drop qilinganda yoki clipboard'dan paste qilinganda rasm `base64` ko'rinishida editor ichidagi image node `src` qiymatiga yoziladi.
+
+Muhim cheklovlar:
+
+- Maksimal rasm hajmi: `5MB`.
+- Base64 HTML/JSON hajmini oshiradi.
+- Katta production loyihalarda keyinchalik server upload yoki storage adapter qo'shish tavsiya qilinadi.
+
+Mavjud image amallari:
+
+- alignment: left, center, right;
+- width percent qiymati;
+- 25%, 50%, 100% quick resize;
+- alt text;
+- caption;
+- image link;
+- border;
+- border radius;
+- shadow;
+- object fit: contain, cover, fill;
+- text wrapping: top-bottom va square;
+- rotate left/right;
+- replace image;
+- delete image.
+
+## Table Bilan Ishlash
+
+`Insert > Table` orqali jadvalni grid selector yordamida yoki row/column qiymatlarini qo'lda kiritib yaratish mumkin. Table ichida cursor turganda `Table` tab avtomatik ko'rinadi.
+
+Mavjud table amallari:
+
+- row/column qo'shish;
+- row/column o'chirish;
+- cell merge/split;
+- header row/header column;
+- cell background;
+- vertical alignment;
+- table delete.
+
+## Link Qo'shish
+
+Link qo'shish browser `prompt` orqali emas, kutubxona ichidagi custom `Modal` orqali ishlaydi. Modal fullscreen holatida ham to'g'ri layer'da ochiladi va draggable.
+
+## YouTube Video Qo'shish
+
+`Insert` tab orqali YouTube video linkini kiritish mumkin. Editor YouTube URL'dan video id ni ajratib olib, embed iframe ko'rinishida joylaydi.
+
+## Fullscreen
+
+Toolbar yuqori o'ng qismidagi fullscreen tugmasi browser Fullscreen API orqali editorni fullscreen holatiga o'tkazadi. Bu faqat CSS bilan kattalashtirish emas, browser miqyosidagi fullscreen rejimidir.
+
+## I18n
+
+Kutubxona ichida `uz`, `en`, `ru` tarjimalar mavjud.
+
+```tsx
+<RJTextEditor locale="uz" />
+<RJTextEditor locale="en" />
+<RJTextEditor locale="ru" />
+```
+
+Joriy locale tarjimalarini qisman override qilish:
+
+```tsx
+<RJTextEditor
+  locale="uz"
+  translations={{
+    placeholders: {
+      editor: "Matnni shu yerga kiriting...",
+    },
+  }}
+/>
+```
+
+Yangi locale qo'shish:
+
+```tsx
+<RJTextEditor
+  locale="kaa"
+  locales={{
+    kaa: {
+      placeholders: {
+        editor: "Maqalanı usı jerge jazıń...",
+      },
+      tabs: {
+        home: "Bas bet",
+        insert: "Qosıw",
+      },
+    },
+  }}
+/>
+```
+
+## Theme
+
+Kutubxona ranglarni CSS custom property sifatida chiqaradi. Loyihangizda theme qilish uchun `--rj-*` o'zgaruvchilarini override qiling.
+
+```scss
+:root {
+  --rj-color-brand: #2563eb;
+  --rj-color-brand-tint: #eaf2ff;
+  --rj-color-surface: #ffffff;
+  --rj-color-surface-soft: #f8fafc;
+  --rj-color-border: #d9dde5;
+  --rj-color-text: #111827;
+
+  --rj-editor-bg: var(--rj-color-surface);
+  --rj-editor-border: var(--rj-color-border);
+  --rj-editor-text: var(--rj-color-text);
+  --rj-editor-toolbar-bg: var(--rj-color-surface-soft);
+}
 ```
 
-Theme qilish uchun `--rj-*` CSS variable qiymatlarini override qilish mumkin.
+Ko'p ishlatiladigan variable'lar:
+
+| Variable                               | Vazifasi                              |
+| -------------------------------------- | ------------------------------------- |
+| `--rj-editor-bg`                       | Editor content background.            |
+| `--rj-editor-border`                   | Editor border rangi.                  |
+| `--rj-editor-text`                     | Asosiy text rangi.                    |
+| `--rj-editor-placeholder`              | Placeholder rangi.                    |
+| `--rj-editor-toolbar-bg`               | Toolbar background.                   |
+| `--rj-editor-toolbar-button-bg`        | Toolbar button background.            |
+| `--rj-editor-toolbar-button-active-bg` | Active button background.             |
+| `--rj-editor-link`                     | Link rangi.                           |
+| `--rj-editor-focus-border`             | Focus/active border rangi.            |
+| `--rj-editor-error-border`             | Form validation error border rangi.   |
+| `--rj-editor-warning-border`           | Form validation warning border rangi. |
+| `--rj-editor-table-border`             | Table border rangi.                   |
+| `--rj-editor-table-header-bg`          | Table header background.              |
+| `--rj-editor-image-border`             | Image selection/border rangi.         |
+| `--rj-editor-danger`                   | Delete/clear action rangi.            |
+
+## Browser Support
+
+`rj-editor` browser muhitida ishlaydi. SSR loyihalarda komponentni client-only render qilish tavsiya qilinadi, chunki editor DOM, selection, clipboard va Fullscreen API kabi browser imkoniyatlariga tayanadi.
+
+## Publish Checklist
+
+Kutubxonani npm'ga chiqarishdan oldin:
+
+1. `npm run lint`
+2. `npm run build`
+3. `npm pack --dry-run`
+4. `package.json` ichida `version` qiymatini yangilash
+5. `npm publish`
+
+Agar npm 2FA yoqilgan bo'lsa, publish uchun OTP yoki 2FA bypass yoqilgan granular access token kerak bo'ladi.
+
+## License
+
+License ma'lumoti `package.json` ichida ko'rsatilishi kerak.

package/dist/assets/icons/AttachmentIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function AttachmentIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/BorderRadiusIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function BorderRadiusIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ChevronSelectorHorizontalIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ChevronSelectorHorizontalIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ChevronSelectorVerticalIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ChevronSelectorVerticalIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ImageIcon03.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ImageIcon03(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ImageIdentLeftIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ImageIdentLeftIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ImageWrapTopBottomIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ImageWrapTopBottomIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/LayoutGridIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function LayoutGridIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/LeftIndentIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function LeftIndentIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/LineHeightIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function LineHeightIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/MaximizeIcon02.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function MaximizeIcon02(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/MinimizeIcon02.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function MinimizeIcon02(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/PaintPourIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function PaintPourIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/PaletteIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function PaletteIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/ParagraphSpacingIco.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function ParagraphSpacingIco(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/RefreshCcwIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function RefreshCcwIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/RefreshCcwIcon05.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function RefreshCcwIcon05(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/RefreshCwIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function RefreshCwIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/RightIndentIcon01.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function RightIndentIcon01(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/SubscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function SubscriptIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/SupscriptIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function SupscriptIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/TrashIcon03.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function TrashIcon03(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/VerticalAlignBottomIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function VerticalAlignBottomIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/VerticalAlignMiddleIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function VerticalAlignMiddleIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/VerticalAlignTopIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function VerticalAlignTopIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/assets/icons/YoutubeIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function YoutubeIcon(props: React.SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/RJTextEditor.d.ts

@@ -1,10 +1,4 @@
-import type { RJTextEditorValue } from '@/types';
+import type { RJTextEditorProps } from './rj-text-editor/RJTextEditor.types';
 import './RJTextEditor.scss';
-export type RJTextEditorProps = {
-    autofocus?: boolean;
-    className?: string;
-    namespace?: string;
-    onChange?: (value: RJTextEditorValue) => void;
-    placeholder?: string;
-};
-export declare function RJTextEditor({ autofocus, className, namespace, onChange, placeholder, }: RJTextEditorProps): import("react/jsx-runtime").JSX.Element;
+export type { RJTextEditorProps } from './rj-text-editor/RJTextEditor.types';
+export declare function RJTextEditor({ autofocus, className, defaultValue, id, locale, locales, namespace, onBlur, onChange, onFocus, placeholder, translations, value, }: RJTextEditorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/equation/EquationComponent.d.ts

@@ -0,0 +1,10 @@
+import { type NodeKey } from 'lexical';
+import React from 'react';
+import type { EquationDisplayMode } from '@/types';
+type EquationComponentProps = {
+    displayMode: EquationDisplayMode;
+    equation: string;
+    nodeKey: NodeKey;
+};
+export declare const EquationComponent: React.MemoExoticComponent<({ displayMode, equation, nodeKey, }: EquationComponentProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/global/input-number/InputNumber.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type InputNumberProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue' | 'inputMode' | 'onChange' | 'prefix' | 'suffix' | 'type' | 'value'> & {
+    decimalScale?: number;
+    defaultValue?: number;
+    integerOnly?: boolean;
+    locale?: boolean;
+    max?: number;
+    min?: number;
+    onChange?: (value: number) => void;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    value?: number;
+};
+export default function InputNumber({ className, decimalScale, defaultValue, integerOnly, locale, max, min, onBlur, onChange, prefix, suffix, value, ...props }: InputNumberProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/global/input-number/index.d.ts

@@ -0,0 +1,2 @@
+export { default as InputNumber } from './InputNumber';
+export type { InputNumberProps } from './InputNumber';

package/dist/components/global/modal/Modal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type ModalProps = {
+    cancelText?: string;
+    children: React.ReactNode;
+    okText?: string;
+    onCancel: () => void;
+    onOk?: () => void;
+    open: boolean;
+    title?: React.ReactNode;
+    width?: number;
+};
+export declare function Modal({ cancelText, children, okText, onCancel, onOk, open, title, width, }: ModalProps): React.ReactPortal | null;

package/dist/components/global/modal/index.d.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps } from './Modal';

package/dist/components/image/ImageComponent.d.ts

@@ -0,0 +1,21 @@
+import { type NodeKey } from 'lexical';
+import type { ImageAlignment, ImageObjectFit, ImageTextWrap } from '@/types';
+type ImageComponentProps = {
+    alignment: ImageAlignment;
+    altText: string;
+    aspectRatioLocked: boolean;
+    borderEnabled: boolean;
+    borderRadius: number;
+    caption: string;
+    height?: number;
+    linkUrl: string;
+    nodeKey: NodeKey;
+    objectFit: ImageObjectFit;
+    rotation: number;
+    shadowEnabled: boolean;
+    src: string;
+    textWrap: ImageTextWrap;
+    width: number;
+};
+export declare function ImageComponent({ alignment, altText, aspectRatioLocked, borderEnabled, borderRadius, caption, height, linkUrl, nodeKey, objectFit, rotation, shadowEnabled, src, textWrap, width, }: ImageComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+import React from 'react';
+type HtmlValuePluginProps = {
+    lastHtmlRef: React.MutableRefObject<string | undefined>;
+    value?: string;
+};
+export declare function HtmlValuePlugin({ lastHtmlRef, value, }: HtmlValuePluginProps): null;
+export {};

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

@@ -0,0 +1,18 @@
+import type React from 'react';
+import type { EditorState } from 'lexical';
+import type { DeepPartial, RJEditorLocaleCode, RJEditorTranslations } from '@/types';
+export type RJTextEditorProps = {
+    autofocus?: boolean;
+    className?: string;
+    defaultValue?: string;
+    id?: string;
+    namespace?: string;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onChange?: (html: string, json: string, editorState: EditorState) => void;
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    locale?: RJEditorLocaleCode;
+    locales?: Record<string, DeepPartial<RJEditorTranslations>>;
+    placeholder?: string;
+    translations?: DeepPartial<RJEditorTranslations>;
+    value?: string;
+};

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { RJTextEditorProps } from './RJTextEditor.types';
+type RJTextEditorContentProps = {
+    autofocus: boolean;
+    className?: string;
+    editorRef: React.RefObject<HTMLDivElement | null>;
+    id?: string;
+    isFullscreen: boolean;
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    onChange?: RJTextEditorProps['onChange'];
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    onToggleFullscreen: () => void;
+    placeholder?: string;
+    value?: string;
+};
+export declare function RJTextEditorContent({ autofocus, className, editorRef, id, isFullscreen, onBlur, onChange, onFocus, onToggleFullscreen, placeholder, value, }: RJTextEditorContentProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+import { LinkNode } from '@lexical/link';
+import { ListItemNode, ListNode } from '@lexical/list';
+import { TableCellNode, TableNode, TableRowNode } from '@lexical/table';
+import { TextNode, type LexicalEditor } from 'lexical';
+import { EquationNode, ExtendedTextNode, ImageNode, YouTubeNode, replaceTextNodeWithExtendedTextNode } from '@/nodes';
+type CreateInitialConfigOptions = {
+    defaultValue?: string;
+    namespace: string;
+    value?: string;
+};
+export declare function createInitialConfig({ defaultValue, namespace, value, }: CreateInitialConfigOptions): {
+    namespace: string;
+    nodes: (typeof EquationNode | typeof ExtendedTextNode | typeof ImageNode | typeof YouTubeNode | typeof LinkNode | typeof ListNode | typeof ListItemNode | typeof TableCellNode | typeof TableNode | typeof TableRowNode | {
+        replace: typeof TextNode;
+        with: typeof replaceTextNodeWithExtendedTextNode;
+        withKlass: typeof ExtendedTextNode;
+    })[];
+    onError(error: Error): never;
+    editorState: ((editor: LexicalEditor) => void) | undefined;
+    theme: {
+        paragraph: string;
+        text: {
+            bold: string;
+            italic: string;
+            strikethrough: string;
+            subscript: string;
+            superscript: string;
+            underline: string;
+        };
+        list: {
+            ol: string;
+            ul: string;
+            listitem: string;
+        };
+        equation: string;
+        image: string;
+        youtube: string;
+        table: string;
+        tableCell: string;
+        tableCellHeader: string;
+        tableCellSelected: string;
+        tableRow: string;
+        tableScrollableWrapper: string;
+        tableSelection: string;
+    };
+};
+export {};