@malaya_jeeva/rich-text-editor 1.0.12 → 1.0.13

package/README.md

@@ -26,7 +26,13 @@ export default function Page() {
   const [value, setValue] = useState('')
 
   return (
-    <RichTextEditor value={value} onChange={setValue} />
+    <RichTextEditor
+      value={value}
+      onChange={setValue}
+      placeholder="Write something..."
+      height={400}
+      theme="light"
+    />
   )
 }
 ```
@@ -45,11 +51,14 @@ export default function Page() {
 
 ## ⚙️ Props
 
-| Prop       | Type                      | Required | Description                              |
-| ---------- | ------------------------- | -------- | ---------------------------------------- |
-| `value`    | `string`                  | No       | Initial HTML content (read on first mount only) |
-| `onChange` | `(value: string) => void` | No       | Fires with full `innerHTML` on every change |
-| `toolbar`  | `ToolbarItem[]`           | No       | Controls which toolbar buttons are shown. If omitted, all buttons are shown |
+| Prop          | Type                          | Required | Default              | Description                                                                 |
+| ------------- | ----------------------------- | -------- | -------------------- | --------------------------------------------------------------------------- |
+| `value`       | `string`                      | No       | —                    | Initial HTML content (read on first mount only)                             |
+| `onChange`    | `(value: string) => void`     | No       | —                    | Fires with full `innerHTML` on every change                                 |
+| `toolbar`     | `ToolbarItem[]`               | No       | all items            | Controls which toolbar buttons are shown. If omitted, all buttons are shown |
+| `placeholder` | `string`                      | No       | `"Start typing..."`  | Placeholder text shown when the editor is empty                             |
+| `height`      | `number \| string`            | No       | auto (max `350px`)   | Editor content area height — `500`, `"400px"`, `"60vh"` etc.               |
+| `theme`       | `"light" \| "dark" \| "auto"` | No       | `"auto"`             | Color theme. `"auto"` follows the OS `prefers-color-scheme` setting         |
 
 ### Type export
 
@@ -59,6 +68,44 @@ import type { RichTextEditorProps, ToolbarItem } from '@malaya_jeeva/rich-text-e
 
 ---
 
+## 📐 Height
+
+Control the height of the editor content area via the `height` prop. Accepts a number (pixels) or any valid CSS string.
+
+```tsx
+<RichTextEditor height={500} />         // 500px fixed
+<RichTextEditor height="60vh" />        // viewport-relative
+<RichTextEditor height="400px" />       // explicit px string
+<RichTextEditor />                      // default — grows with content, caps at 350px
+```
+
+---
+
+## 💬 Placeholder
+
+Set the placeholder text shown when the editor is empty.
+
+```tsx
+<RichTextEditor placeholder="Write something..." />
+// omit it — defaults to "Start typing..."
+```
+
+---
+
+## 🌗 Theme
+
+Three options: `"light"`, `"dark"`, or `"auto"` (default).
+
+```tsx
+<RichTextEditor theme="light" />   // always light
+<RichTextEditor theme="dark" />    // always dark
+<RichTextEditor />                 // auto — follows OS prefers-color-scheme
+```
+
+> When `theme="auto"` (or the prop is omitted) the editor automatically switches between light and dark based on the user's OS setting — no extra code needed.
+
+---
+
 ## 🛠️ Toolbar Customization
 
 Pass a `toolbar` array to control exactly which buttons appear. If the prop is omitted, **all buttons are shown** — fully backward compatible.

package/dist/index.d.mts

@@ -6,8 +6,10 @@ type RichTextEditorProps = {
     onChange?: (value: string) => void;
     toolbar?: ToolbarItem[];
     theme?: "light" | "dark";
+    height?: number | string;
+    placeholder?: string;
 };
 
-declare function RichTextEditor({ value, onChange, toolbar, theme }: RichTextEditorProps): ReactElement;
+declare function RichTextEditor({ value, onChange, toolbar, theme, height, placeholder }: RichTextEditorProps): ReactElement;
 
 export { type RichTextEditorProps, RichTextEditor as default };

package/dist/index.d.ts

@@ -6,8 +6,10 @@ type RichTextEditorProps = {
     onChange?: (value: string) => void;
     toolbar?: ToolbarItem[];
     theme?: "light" | "dark";
+    height?: number | string;
+    placeholder?: string;
 };
 
-declare function RichTextEditor({ value, onChange, toolbar, theme }: RichTextEditorProps): ReactElement;
+declare function RichTextEditor({ value, onChange, toolbar, theme, height, placeholder }: RichTextEditorProps): ReactElement;
 
 export { type RichTextEditorProps, RichTextEditor as default };

package/dist/index.js

@@ -2,7 +2,21 @@
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -164,7 +178,7 @@ var CSS = `
   .rte-linkbar{min-width:340px;}
   .rte-linkbar input{flex:1;height:26px;border:1px solid var(--rte-linkinput-border);border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:var(--rte-linkinput-bg);color:var(--rte-linkinput);min-width:0;}
   .rte-area{position:relative;background:var(--rte-area-bg);}
-  .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
+  .rte-body{height:200px;overflow-y: auto;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
   .rte-body h1{font-size:26px;font-weight:600;margin:0.6em 0 0.2em;}
   .rte-body h2{font-size:20px;font-weight:600;margin:0.6em 0 0.2em;}
   .rte-body h3{font-size:16px;font-weight:600;margin:0.6em 0 0.2em;}
@@ -208,7 +222,7 @@ var CSS = `
   .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
   .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
   .rte-body blockquote{background-color: rgb(245, 243, 255);
-    border-left: 4px solid rgb(100, 80, 220);
+    border-left: 4px solid rgb(100, 80, 220); 
     margin: 8px 0;
     padding: 10px 16px;
     font-style: italic;
@@ -1188,13 +1202,14 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
 
 // src/RichTextEditor.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-function RichTextEditor({ value, onChange, toolbar, theme }) {
+function RichTextEditor({ value, onChange, toolbar, theme, height, placeholder = "Start typing..." }) {
   var _a;
   const editorRef = (0, import_react5.useRef)(null);
   const editorAreaRef = (0, import_react5.useRef)(null);
   const savedRangeRef = (0, import_react5.useRef)(null);
   const dragStartCell = (0, import_react5.useRef)(null);
   const isDragging = (0, import_react5.useRef)(false);
+  const isMounting = (0, import_react5.useRef)(true);
   const [isCode, setIsCode] = (0, import_react5.useState)(false);
   const [codeVal, setCodeVal] = (0, import_react5.useState)("");
   const [fmt, setFmt] = (0, import_react5.useState)({ block: "p" });
@@ -1281,7 +1296,9 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
     else setLinkInfoFP(null);
     const txt = (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.innerText) != null ? _b : "";
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
-    onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+    if (!isMounting.current) {
+      onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+    }
   }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
   const fixListInParagraph = (0, import_react5.useCallback)(() => {
     var _a2;
@@ -1719,8 +1736,9 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
   (0, import_react5.useEffect)(() => {
     if (editorRef.current) {
       document.execCommand("defaultParagraphSeparator", false, "p");
-      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
+      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "");
       refresh();
+      isMounting.current = false;
     }
   }, []);
   const canMerge = selCells.length >= 2;
@@ -1729,7 +1747,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
   const show = (key) => !toolbar || toolbar.includes(key);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { style: { padding: "1rem 0" }, children: [
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("style", { children: CSS }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: __spreadValues({ border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, height != null && { maxHeight: "none" }), children: [
       /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "rte-toolbar", children: [
         !isCode && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
           show("bold") && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
@@ -1851,7 +1869,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             value: codeVal,
             onChange: (e) => setCodeVal(e.target.value),
             spellCheck: false,
-            style: { display: isCode ? "block" : "none" }
+            style: __spreadValues({ display: isCode ? "block" : "none" }, height != null && { height, minHeight: 0 })
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -1861,7 +1879,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             className: "rte-body",
             contentEditable: true,
             suppressContentEditableWarning: true,
-            "data-ph": "Start typing...",
+            "data-ph": placeholder,
             onMouseDown: handleEditorMouseDown,
             onMouseMove: handleEditorMouseMove,
             onMouseUp: () => {
@@ -1882,7 +1900,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             onDragOver: (e) => {
               if (e.dataTransfer.types.includes("Files")) e.preventDefault();
             },
-            style: { display: isCode ? "none" : "block" }
+            style: __spreadValues({ display: isCode ? "none" : "block" }, height != null && { height, minHeight: 0 })
           }
         ),
         !isCode && selectedImg && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(

package/dist/index.mjs

@@ -1,3 +1,20 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+
 // src/RichTextEditor.tsx
 import {
   useState as useState5,
@@ -143,7 +160,7 @@ var CSS = `
   .rte-linkbar{min-width:340px;}
   .rte-linkbar input{flex:1;height:26px;border:1px solid var(--rte-linkinput-border);border-radius:3px;padding:0 8px;font-size:13px;outline:none;font-family:var(--font-sans);background:var(--rte-linkinput-bg);color:var(--rte-linkinput);min-width:0;}
   .rte-area{position:relative;background:var(--rte-area-bg);}
-  .rte-body{min-height:280px;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
+  .rte-body{height:200px;overflow-y: auto;outline:none;font-size:15px;line-height:1.75;color:var(--rte-body);caret-color:var(--rte-body);padding:18px 20px;}
   .rte-body h1{font-size:26px;font-weight:600;margin:0.6em 0 0.2em;}
   .rte-body h2{font-size:20px;font-weight:600;margin:0.6em 0 0.2em;}
   .rte-body h3{font-size:16px;font-weight:600;margin:0.6em 0 0.2em;}
@@ -187,7 +204,7 @@ var CSS = `
   .rte-ie-remove{flex:1;height:26px;background:#fdecea;color:#c0392b;border:1px solid #f5c6c2;border-radius:4px;font-size:11px;cursor:pointer;}
   .rte-handle{position:absolute;width:10px;height:10px;background:#fff;border:2px solid #1a5fb4;border-radius:2px;pointer-events:all;z-index:53;}
   .rte-body blockquote{background-color: rgb(245, 243, 255);
-    border-left: 4px solid rgb(100, 80, 220);
+    border-left: 4px solid rgb(100, 80, 220); 
     margin: 8px 0;
     padding: 10px 16px;
     font-style: italic;
@@ -1167,13 +1184,14 @@ function ImageEditor({ img, containerRef, onClose, onDelete, onChange }) {
 
 // src/RichTextEditor.tsx
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-function RichTextEditor({ value, onChange, toolbar, theme }) {
+function RichTextEditor({ value, onChange, toolbar, theme, height, placeholder = "Start typing..." }) {
   var _a;
   const editorRef = useRef4(null);
   const editorAreaRef = useRef4(null);
   const savedRangeRef = useRef4(null);
   const dragStartCell = useRef4(null);
   const isDragging = useRef4(false);
+  const isMounting = useRef4(true);
   const [isCode, setIsCode] = useState5(false);
   const [codeVal, setCodeVal] = useState5("");
   const [fmt, setFmt] = useState5({ block: "p" });
@@ -1260,7 +1278,9 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
     else setLinkInfoFP(null);
     const txt = (_b = (_a2 = editorRef.current) == null ? void 0 : _a2.innerText) != null ? _b : "";
     setWords(txt.trim() ? txt.trim().split(/\s+/).length : 0);
-    onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+    if (!isMounting.current) {
+      onChange == null ? void 0 : onChange(sanitizeScriptTags((_d = (_c = editorRef.current) == null ? void 0 : _c.innerHTML) != null ? _d : ""));
+    }
   }, [onChange, calcFloat, linkBar, sanitizeScriptTags]);
   const fixListInParagraph = useCallback3(() => {
     var _a2;
@@ -1698,8 +1718,9 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
   useEffect3(() => {
     if (editorRef.current) {
       document.execCommand("defaultParagraphSeparator", false, "p");
-      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "<p>Start writing here...</p>");
+      editorRef.current.innerHTML = sanitizeScriptTags(value != null ? value : "");
       refresh();
+      isMounting.current = false;
     }
   }, []);
   const canMerge = selCells.length >= 2;
@@ -1708,7 +1729,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
   const show = (key) => !toolbar || toolbar.includes(key);
   return /* @__PURE__ */ jsxs6("div", { style: { padding: "1rem 0" }, children: [
     /* @__PURE__ */ jsx7("style", { children: CSS }),
-    /* @__PURE__ */ jsxs6("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: { border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, children: [
+    /* @__PURE__ */ jsxs6("div", { className: `customeditor${theme ? ` rte-${theme}` : ""}`, style: __spreadValues({ border: "1px solid #d8d8d8", borderRadius: 4, boxShadow: "0 1px 3px rgba(0,0,0,0.06)" }, height != null && { maxHeight: "none" }), children: [
       /* @__PURE__ */ jsxs6("div", { className: "rte-toolbar", children: [
         !isCode && /* @__PURE__ */ jsxs6(Fragment4, { children: [
           show("bold") && /* @__PURE__ */ jsx7(Btn, { onClick: () => exec("bold"), title: "Bold (Ctrl+B)", active: fmt.bold, style: { fontWeight: 800, fontFamily: "Georgia,serif" }, children: "B" }),
@@ -1830,7 +1851,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             value: codeVal,
             onChange: (e) => setCodeVal(e.target.value),
             spellCheck: false,
-            style: { display: isCode ? "block" : "none" }
+            style: __spreadValues({ display: isCode ? "block" : "none" }, height != null && { height, minHeight: 0 })
           }
         ),
         /* @__PURE__ */ jsx7(
@@ -1840,7 +1861,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             className: "rte-body",
             contentEditable: true,
             suppressContentEditableWarning: true,
-            "data-ph": "Start typing...",
+            "data-ph": placeholder,
             onMouseDown: handleEditorMouseDown,
             onMouseMove: handleEditorMouseMove,
             onMouseUp: () => {
@@ -1861,7 +1882,7 @@ function RichTextEditor({ value, onChange, toolbar, theme }) {
             onDragOver: (e) => {
               if (e.dataTransfer.types.includes("Files")) e.preventDefault();
             },
-            style: { display: isCode ? "none" : "block" }
+            style: __spreadValues({ display: isCode ? "none" : "block" }, height != null && { height, minHeight: 0 })
           }
         ),
         !isCode && selectedImg && /* @__PURE__ */ jsx7(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@malaya_jeeva/rich-text-editor",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "Custom React Rich Text Editor",
   "main": "dist/index.js",
   "module": "dist/index.mjs",