@daneshnaik/rich-text-editor 1.0.2 → 1.0.4

package/README.md

@@ -84,6 +84,72 @@ function App() {
 export default App;
 ```
 
+### Exporting / Printing (Only toolbar + page)
+
+The package includes CSS helpers so consumers can print or export only the editor canvas and toolbar (no surrounding app chrome).
+
+- Print: the package defines `@media print` rules that automatically hide other page content and show only `.editor-toolbar` and `.editor-container`.
+- Programmatic export: use the `export-only` helper class on `document.body` to hide everything except the editor, then trigger `window.print()` or your capture routine.
+
+Example button (optional):
+
+```jsx
+import React from 'react';
+import ExportButton from './components/ExportButton'; // or from package export when bundled
+
+function MyEditorPage() {
+  return (
+    <div>
+      <RichTextEditor />
+      <ExportButton />
+    </div>
+  );
+}
+
+export default MyEditorPage;
+```
+
+If you're bundling the library for npm, include the `ExportButton` in your published module exports so consumers can import it directly from the package.
+
+### New: sizing & drag-and-drop support
+
+
+The editor now accepts a few props to allow consuming apps to control the editor canvas size and to support drag-and-drop from the host application.
+
+- `width` (string): set the page width (e.g. `800px` or `100%`).
+- `height` (string): set the minimum page height (e.g. `1123px`).
+- `fullBleed` (boolean, default: `true`): when `true`, removes the side gutters so the page sits edge-to-edge in its container. The editor now defaults to full-bleed so embedding apps receive the editor + toolbar only (no centered page gaps).
+- `onComponentDrop` (function): optional callback called when something is dropped onto the editor. Receives `(info, event)` where `info` contains `{ html, text, files, types }`.
+
+Example usage:
+
+```jsx
+import React from 'react';
+import RichTextEditor from '@daneshnaik/rich-text-editor';
+import ExportButton from '@daneshnaik/rich-text-editor/ExportButton';
+import '@daneshnaik/rich-text-editor/dist/style.css';
+
+function MyEditorPage() {
+  const handleDrop = (info, ev) => {
+    // info.html / info.text / info.files available
+    console.log('dropped', info);
+  };
+
+  return (
+    <div style={{ width: '100%', height: '100vh' }}>
+      <RichTextEditor width="100%" height="900px" fullBleed={true} onComponentDrop={handleDrop} />
+      <ExportButton />
+    </div>
+  );
+}
+
+export default MyEditorPage;
+```
+
+Notes:
+- If the dropped data contains `text/html`, it will be inserted as HTML at the caret location. Plain text is inserted as text. Image files dropped will be read and inserted as data-URL images.
+- The `fullBleed` mode keeps the editor from centering and removes left/right page gutters; you can also pass an exact `width` to control the page size.
+
 ## Requirements
 
 - React 18.0.0 or higher