rn-rich-text-editor 0.0.1

package/README.md

@@ -0,0 +1,51 @@
+# React Native Rich Editor
+
+A rich text editor component for React Native using WebView.
+
+## Installation
+
+```bash
+npm install rn-rich-text-editor
+```
+
+## Usage
+
+```tsx
+import { RichEditor, RichToolbar, actions } from 'rn-rich-text-editor';
+
+function App() {
+  return (
+    <>
+      <RichEditor ref={editorRef} onMessage={handleMessage} />
+      <RichToolbar editorRef={editorRef} />
+    </>
+  );
+}
+```
+
+## API
+
+### RichEditor
+
+Main editor component.
+
+**Props:**
+- `onMessage?: (event: any) => void` - Callback for editor messages
+
+**Ref Methods:**
+- `sendAction(type: string)` - Send action to editor
+
+### RichToolbar
+
+Toolbar component for editor actions.
+
+**Props:**
+- `editorRef: RefObject` - Reference to RichEditor instance
+
+### Actions
+
+Predefined editor actions.
+
+## License
+
+MIT

package/dist/RichEditor.d.ts

@@ -0,0 +1 @@
+export declare const RichEditor: any;

package/dist/RichEditor.js

@@ -0,0 +1,49 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichEditor = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_webview_1 = require("react-native-webview");
+const createHTML_1 = require("./editor/createHTML");
+exports.RichEditor = (0, react_1.forwardRef)((props, ref) => {
+    const webRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        sendAction(type) {
+            var _a;
+            (_a = webRef.current) === null || _a === void 0 ? void 0 : _a.postMessage(JSON.stringify({ type }));
+        }
+    }));
+    return (react_1.default.createElement(react_native_webview_1.WebView, { ref: webRef, originWhitelist: ['*'], javaScriptEnabled: true, scrollEnabled: false, source: (0, createHTML_1.createHTML)(), onMessage: props.onMessage }));
+});

package/dist/RichToolbar.d.ts

@@ -0,0 +1 @@
+export declare function RichToolbar({ editor }: any): any;

package/dist/RichToolbar.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RichToolbar = RichToolbar;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const actions_1 = require("./actions");
+function RichToolbar({ editor }) {
+    return (react_1.default.createElement(react_native_1.View, { style: { flexDirection: 'row', padding: 8 } }, Object.values(actions_1.actions).map(action => (react_1.default.createElement(react_native_1.TouchableOpacity, { key: action, onPress: () => { var _a; return (_a = editor === null || editor === void 0 ? void 0 : editor.current) === null || _a === void 0 ? void 0 : _a.sendAction(action); } },
+        react_1.default.createElement(react_native_1.Text, { style: { marginHorizontal: 10 } }, action))))));
+}

package/dist/actions.d.ts

@@ -0,0 +1,9 @@
+export declare const actions: {
+    readonly setBold: "bold";
+    readonly setItalic: "italic";
+    readonly setUnderline: "underline";
+    readonly checkboxList: "checkboxList";
+    readonly insertLink: "link";
+    readonly keyboard: "keyboard";
+    readonly init: "init";
+};

package/dist/actions.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.actions = void 0;
+exports.actions = {
+    setBold: 'bold',
+    setItalic: 'italic',
+    setUnderline: 'underline',
+    checkboxList: 'checkboxList',
+    insertLink: 'link',
+    keyboard: 'keyboard',
+    init: 'init'
+};

package/dist/editor/contentCSS.d.ts

@@ -0,0 +1 @@
+export declare function getContentCSS(): string;

package/dist/editor/contentCSS.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContentCSS = getContentCSS;
+function getContentCSS() {
+    return `
+    <style>
+      img, video {
+        max-width: 100%;
+        display: block;
+        margin: 12px auto;
+      }
+      blockquote {
+        border-left: 4px solid #ddd;
+        padding-left: 12px;
+        margin: 12px 0;
+      }
+      pre {
+        background: #f4f4f4;
+        padding: 10px;
+        border-radius: 6px;
+        font-family: monospace;
+      }
+    </style>
+    `;
+}

package/dist/editor/createHTML.d.ts

@@ -0,0 +1,3 @@
+export declare function createHTML(): {
+    html: string;
+};

package/dist/editor/createHTML.js

@@ -0,0 +1,62 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createHTML = createHTML;
+const contentCSS_1 = require("./contentCSS");
+function createHTML() {
+    return {
+        html: `
+<!DOCTYPE html>
+<html>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+<style>
+  body { margin:0; font-family: system-ui; }
+  #editor {
+    padding: 12px;
+    min-height: 100%;
+    outline: none;
+  }
+  [placeholder]:empty::before {
+    content: attr(placeholder);
+    color: #999;
+  }
+</style>
+${(0, contentCSS_1.getContentCSS)()}
+</head>
+<body>
+  <div id="editor" contenteditable="true" placeholder="Start typing..."></div>
+
+<script>
+  const editor = document.getElementById('editor');
+
+  function post(type, data) {
+    window.ReactNativeWebView.postMessage(
+      JSON.stringify({ type, data })
+    );
+  }
+
+  editor.addEventListener('input', () => {
+    post('CONTENT_CHANGE', editor.innerHTML);
+    post('OFFSET_HEIGHT', editor.scrollHeight);
+  });
+
+  document.addEventListener('selectionchange', () => {
+    post('SELECTION_CHANGE', {
+      bold: document.queryCommandState('bold'),
+      italic: document.queryCommandState('italic'),
+      underline: document.queryCommandState('underline')
+    });
+  });
+
+  window.addEventListener('message', e => {
+    const msg = JSON.parse(e.data);
+    if (msg.type === 'bold') document.execCommand('bold');
+    if (msg.type === 'italic') document.execCommand('italic');
+    if (msg.type === 'underline') document.execCommand('underline');
+  });
+</script>
+</body>
+</html>
+    `
+    };
+}

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { RichEditor } from './RichEditor';
+export { RichToolbar } from './RichToolbar';
+export { actions } from './actions';
+export { createHTML } from './editor/createHTML';
+export { getContentCSS } from './editor/contentCSS';

package/dist/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getContentCSS = exports.createHTML = exports.actions = exports.RichToolbar = exports.RichEditor = void 0;
+var RichEditor_1 = require("./RichEditor");
+Object.defineProperty(exports, "RichEditor", { enumerable: true, get: function () { return RichEditor_1.RichEditor; } });
+var RichToolbar_1 = require("./RichToolbar");
+Object.defineProperty(exports, "RichToolbar", { enumerable: true, get: function () { return RichToolbar_1.RichToolbar; } });
+var actions_1 = require("./actions");
+Object.defineProperty(exports, "actions", { enumerable: true, get: function () { return actions_1.actions; } });
+var createHTML_1 = require("./editor/createHTML");
+Object.defineProperty(exports, "createHTML", { enumerable: true, get: function () { return createHTML_1.createHTML; } });
+var contentCSS_1 = require("./editor/contentCSS");
+Object.defineProperty(exports, "getContentCSS", { enumerable: true, get: function () { return contentCSS_1.getContentCSS; } });

package/dist/messages.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    readonly CONTENT_CHANGE: "CONTENT_CHANGE";
+    readonly SELECTION_CHANGE: "SELECTION_CHANGE";
+    readonly CONTENT_FOCUSED: "CONTENT_FOCUSED";
+    readonly CONTENT_BLUR: "CONTENT_BLUR";
+    readonly OFFSET_HEIGHT: "OFFSET_HEIGHT";
+};

package/dist/messages.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = void 0;
+exports.messages = {
+    CONTENT_CHANGE: 'CONTENT_CHANGE',
+    SELECTION_CHANGE: 'SELECTION_CHANGE',
+    CONTENT_FOCUSED: 'CONTENT_FOCUSED',
+    CONTENT_BLUR: 'CONTENT_BLUR',
+    OFFSET_HEIGHT: 'OFFSET_HEIGHT'
+};

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "rn-rich-text-editor",
+  "version": "0.0.1",
+  "description": "A rich text editor component for React Native",
+  "keywords": [
+    "react-native",
+    "rich-editor",
+    "text-editor",
+    "webview"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vishaal2002/rn-rich-text-editor.git"
+  },
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc -w"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "react-native-webview": "*"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}