open-text-editor-latest 1.0.1 → 1.0.3

package/README.md

@@ -1,16 +1,93 @@
-# React + Vite
+# Open Text Editor
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+A lightweight, pluggable React contentEditable rich text editor.
 
-Currently, two official plugins are available:
+Quick start and full usage are in `docs/USAGE.md`. Short summary:
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+# Open Text Editor
 
-## React Compiler
+A lightweight, pluggable React contentEditable rich text editor.
 
-The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+Quick start and full usage are in [docs/USAGE.md](docs/USAGE.md). Below is a concise summary for using the `OpenTextEditor` component exported by this package.
 
-## Expanding the ESLint configuration
+**Install**
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+```bash
+npm install open-text-editor-latest
+```
+
+**Peer dependencies**
+
+This package requires React as a peer dependency (supported: `^18 || ^19`). Install them if your project doesn't already include React:
+
+```bash
+npm install react@^18 react-dom@^18
+# or for React 19 consumers:
+npm install react@^19 react-dom@^19
+```
+
+**Basic usage**
+
+```jsx
+import React, { useRef } from 'react'
+import OpenTextEditor from 'open-text-editor-latest'
+
+function App(){
+	const editorRef = useRef(null)
+
+	return (
+		<OpenTextEditor
+			ref={editorRef}
+			initialValue={`<p>Hello from OpenTextEditor</p>`}
+			onChange={(html) => console.log('content changed', html)}
+			placeholder="Start typing..."
+		/>
+	)
+}
+
+export default App
+```
+
+**Imperative API (via `ref`)**
+
+The editor exposes useful helpers when mounted with `ref`:
+
+- `focus()` — focus the editor
+- `getHtml()` — return current editor HTML
+- `setHtml(html)` — replace editor content
+- `insertHtml(html)` — insert HTML at the current selection
+- `execCommand(command, value)` — run low-level `document.execCommand`
+- `insertTable(rows, cols)` — insert a table programmatically
+- `tableAction(action)` — run table actions when a table cell is active
+
+**Build and publish**
+
+To build the library bundles (ESM/CJS/UMD):
+
+```bash
+npm run build:lib
+```
+
+Create a local package tarball for testing:
+
+```bash
+npm pack
+```
+
+Publish to npm (when ready):
+
+```bash
+npm publish --access public
+```
+
+See [docs/USAGE.md](docs/USAGE.md) and [docs/PUBLISH.md](docs/PUBLISH.md) for more details on configuration, plugins and publishing.
+
+---
+
+Project files of interest:
+
+- `src/editor/OpentextEditor.jsx` — main editor component (default export `OpenTextEditor`).
+- `src/editor/plugins/` — plugin scaffolding and built-in plugin placeholders.
+- `build/vite.lib.config.js` — library build configuration used by `npm run build:lib`.
+
+If you'd like, I can wire the plugin registration API into the editor so built-in plugins are auto-registered.

package/docs/PUBLISH.md

@@ -1,27 +1,31 @@
 # Publishing to npm
 
-Steps to publish a new version of `open-text-editor`:
+Steps to publish a new version of `open-text-editor-latest`:
 
-1. Update version in `package.json` (semver).
-2. Commit your changes and push to the repository.
+1. Update `version` in `package.json` (follow semver).
+2. Commit your changes and push to your git repository.
 3. Ensure you are logged in to npm: `npm login`.
-4. Run the build script (prepare runs automatically for `npm publish`):
+4. Build the library (the `prepare` step is run automatically by `npm publish`, but you can run it manually to verify):
 
 ```bash
 npm run build:lib
 ```
 
-5. Publish:
+5. Publish to npm (public package):
 
 ```bash
 npm publish --access public
 ```
 
-Notes:
-- The library build externalizes `react` and `react-dom` so they are peer dependencies. Consumers must install React separately.
-- If you want to test a local tarball before publishing:
+Notes
+- The library build externalizes `react` and `react-dom`; they are declared as peer dependencies. Consumers must install React separately.
+- To test a local tarball before publishing, run:
 
 ```bash
 npm pack
-npm install -g ./open-text-editor-0.1.0.tgz
+# then install the produced tarball in another project (replace <version>):
+npm install ./open-text-editor-latest-<version>.tgz
 ```
+
+- If you encounter npm tag/version errors (for example when attempting to publish a lower version than already published), either bump the package version in `package.json` or publish with an explicit tag: `npm publish --tag next --access public`.
+

package/docs/USAGE.md

@@ -0,0 +1,81 @@
+Open Text Editor — Usage
+
+Install
+
+```bash
+npm install open-text-editor-latest
+```
+
+Basic usage
+
+```jsx
+import React, { useRef } from 'react'
+import OpenTextEditor from 'open-text-editor-latest'
+
+export default function App(){
+  const ref = useRef(null)
+
+  return (
+    <div style={{padding:20}}>
+      <OpenTextEditor
+        ref={ref}
+        initialValue={`<p>Hello</p>`}
+        onChange={(html) => console.log('changed', html)}
+      />
+    </div>
+  )
+}
+```
+
+Props
+- `initialValue` (string): optional initial HTML content
+- `onChange` (html: string) => void: optional change handler
+- `className` (string): optional additional class names applied to the editor container
+
+Peer dependencies
+
+This package expects React as a peer dependency (supported ranges: `^18 || ^19`). Install them if your project doesn't already include React:
+
+```bash
+npm install react@^18 react-dom@^18
+# or for React 19 consumers:
+npm install react@^19 react-dom@^19
+```
+
+Imperative API (via `ref`)
+
+When mounted with a `ref`, the editor exposes a small imperative API:
+
+- `focus()` — focus the editor
+- `getHtml()` — return current editor HTML
+- `setHtml(html)` — replace editor content
+- `insertHtml(html)` — insert HTML at the current selection
+- `execCommand(command, value)` — run low-level `document.execCommand`
+- `insertTable(rows, cols)` — insert a table programmatically
+- `tableAction(action)` — run table actions when a table cell is active
+
+Plugins
+
+Built-in plugin placeholders live in the source at `src/editor/plugins`. See [docs/editor/developer.md](editor/developer.md) for the plugin contract and examples.
+
+Building from source
+
+```bash
+git clone https://github.com/danu20002/open-text-editor.git
+cd open-text-editor
+npm install
+npm run build:lib
+```
+
+Local test
+
+```bash
+npm pack
+# install the generated tarball (replace <version> with the package version):
+npm install ./open-text-editor-latest-<version>.tgz
+```
+
+Publishing
+
+See [docs/PUBLISH.md](PUBLISH.md) for publish steps and notes about peer dependencies.
+

package/docs/editor/developer.md

@@ -1,31 +1,37 @@
-# Developer Guide — Plugins & Extensibility
+**Developer Guide — Plugins & Extensibility**
 
-This document explains how to create and register plugins for `open-text-editor`.
+This document explains the intended plugin contract and where built-in plugin placeholders live in the source tree.
 
 Plugin contract
-- Export a default function that receives an `editorApi` and returns an object with:
+- A plugin should export a default function that accepts an `editorApi` object and returns an object with:
   - `name` — plugin id string
-  - `install(editor)` — called when plugin is enabled; attach commands, buttons, event listeners here
+  - `install()` — called when the plugin is enabled; register commands, toolbar buttons, or event listeners here
 
 Example plugin skeleton
 ```js
 export default function myPlugin(editorApi) {
   return {
     name: 'my-plugin',
-    install(editor) {
-      // add command
-      editor.execCommand = editor.execCommand || editorApi.execCommand
-      // add toolbar button by calling editorApi.addToolbarButton(...)
+    install() {
+      // Example: add a simple command that inserts a timestamp
+      const insertTimestamp = () => editorApi.insertHtml(`<time>${new Date().toISOString()}</time>`)
+      // Optionally expose commands or UI wiring via editorApi
+      editorApi.registerCommand && editorApi.registerCommand('insert-timestamp', insertTimestamp)
     }
   }
 }
 ```
 
-Registering plugins
-- Built-in plugins live in `src/editor/plugins` and are available through the registry `import plugins from 'open-text-editor/src/editor/plugins'`.
-- Consumers can supply plugins by passing them to the editor constructor or mounting API (future API plans). For now, import and compose in your app.
+Built-in plugins
+- Built-in plugin placeholders are in the source at `src/editor/plugins/` (part of this repo). Consumers installing the package get the compiled library; to inspect or extend built-ins, open the repository and edit or copy the plugin files from that folder.
+
+Registering plugins (current status)
+- This release provides plugin scaffolding in source. Runtime plugin registration APIs (for consumer-supplied plugins) are planned; for now you can compose plugins in your app by importing their code or by modifying the source plugin folder when building from source.
 
 Best practices
 - Keep plugins small and focused.
 - Prefer declarative UI for toolbar buttons (icon, tooltip, command).
 - Clean up event listeners and DOM mutations during uninstall.
+
+If you want, I can implement a runtime `editorApi.registerPlugin()` and `editorApi.addToolbarButton()` API in `src/editor/OpentextEditor.jsx` so consumers can register plugins dynamically. Say the word and I will wire it up and add examples.
+

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "open-text-editor-latest",
   "private": false,
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "A lightweight, pluggable React contentEditable rich text editor",
   "scripts": {
@@ -34,7 +34,7 @@
     "vite": "^7.2.4"
   },
   "main": "dist/index.cjs.js",
-  "module": "dist/index.esm.js",
+  "module": "dist/index.es.js",
   "files": [
     "dist/",
     "src/editor/",
@@ -64,7 +64,7 @@
   },
   "exports": {
     ".": {
-      "import": "./dist/index.esm.js",
+      "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     }
   }