MYsNevise

English · فارسی

Rich React WYSIWYG editor with strong Persian / RTL support — full toolbar, light/dark themes, color palettes, HTML source mode, Iranian (Jalali) tools, and Print / Word / PDF export.

MYsNevise is free. Install and use the core editor at no cost. Many more features are available with a small paid license.

npm install mysnevise

Table of contents

• Pricing
• Install
• Quick start
• Styles
• Props
• Telemetry API key
• License
• HTML content
• Features
• Theme & color palette
• Requirements
• TypeScript
• More examples
• Build from source
• Notes
• License (legal)

Install

npm install mysnevise
# or
yarn add mysnevise
# or
pnpm add mysnevise

react and react-dom must be installed in your app (peer dependency, 16.8+).

Pricing

| Plan | Cost | What you get | |------|------|----------------| | Free | $0 | Install from npm and use the editor for everyday work | | More features | small fee | Advanced capabilities and full mode via an optional license |

The editor works without a license. The paid plan is only for extra features.

Quick start

import { HtmlEditor } from 'mysnevise'
import 'mysnevise/style.css'

export default function Page() {
  return <HtmlEditor />
}

With optional license:

import { HtmlEditor } from 'mysnevise'
import 'mysnevise/style.css'

export default function Page() {
  return (
    <HtmlEditor
      licenseKey="YOUR_LICENSE_KEY"
      licenseValidateUrl="https://example.com/api/license/validate"
    />
  )
}

Styles

Component styles ship separately and must be imported once in your app:

import 'mysnevise/style.css'

Without this import, the editor renders without proper styling.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | ALI-WAS-RIGHT-AND-HE-STILL-IS | Sent as header X-Html-Editor-Api-Key on telemetry load | | licenseKey | string | — | License key; sent with licenseValidateUrl | | licenseValidateUrl | string | — | POST validation URL. If empty, license check is skipped | | siteUrl | string | window.location.origin | Site id for license validation | | locale | EditorLocale | stored / fa | Controlled UI language | | onLocaleChange | (locale) => void | — | Locale change callback | | palette | ColorPaletteId | — | Controlled color palette (firoozeh, lapis, ruby, saffron, emerald, classic, custom) | | defaultPalette | ColorPaletteId | firoozeh (or stored) | Initial palette when uncontrolled | | onPaletteChange | (id) => void | — | Palette change callback | | customPalette | { accent: string; gold: string } | — | Controlled custom palette colors | | defaultCustomPalette | { accent: string; gold: string } | turquoise / gold | Initial custom colors when uncontrolled | | onCustomPaletteChange | (colors) => void | — | Custom palette change callback |

import type { HtmlEditorProps } from 'mysnevise'

const props: HtmlEditorProps = {
  apiKey: '...',
  licenseKey: '...',
  licenseValidateUrl: 'https://...',
  siteUrl: 'https://my-site.example',
  locale: 'en',
  defaultPalette: 'firoozeh',
}

Telemetry API key

On load, the editor calls the telemetry endpoint and sends the API key in a request header (not in the JSON body):

POST https://api.usefpour.com/api/m/v1/html-editor/telemetry/load
Content-Type: application/json
X-Html-Editor-Api-Key: ALI-WAS-RIGHT-AND-HE-STILL-IS

{ "siteUrl": "https://your-page.example/" }

If apiKey is omitted or blank, the built-in default is used.

License

Behavior

| Condition | Result | |-----------|--------| | licenseValidateUrl empty / undefined | Full editor, no license check | | URL set but licenseKey empty | Free mode + banner | | Validation succeeds | Full mode | | Network / reject / server error | Free mode + banner |

In free mode the editor remains usable; a free-mode banner is shown. Many more features unlock with a small paid license.

Server API contract

Request:

POST {licenseValidateUrl}
Content-Type: application/json
Accept: application/json

{
  "licenseKey": "YOUR_KEY",
  "siteUrl": "https://your-site.example"
}

Suggested success response:

{ "ok": true }

or:

{ "valid": true }

Reject response:

{
  "ok": false,
  "message": "License expired."
}

Rules:

• Non-2xx HTTP → invalid license
• JSON body with ok or valid explicitly false → rejected
• Network error → free mode with error message

Vite env example

VITE_LICENSE_KEY=your-key
VITE_LICENSE_VALIDATE_URL=https://example.com/api/license/validate
VITE_HTML_EDITOR_API_KEY=your-api-key

<HtmlEditor
  apiKey={import.meta.env.VITE_HTML_EDITOR_API_KEY}
  licenseKey={import.meta.env.VITE_LICENSE_KEY}
  licenseValidateUrl={import.meta.env.VITE_LICENSE_VALIDATE_URL}
/>

HTML content

v1.0.0: public value / onChange props are not in the public API yet. Content is kept inside the editor.

Current behavior

• On load, an internal sample text is shown.
• Visual edits sync HTML from the DOM into internal state.
• The HTML source footer button opens raw HTML editing.
• Print, Word, and PDF use the current HTML.

Getting HTML from the UI

1. Click HTML source.
2. Copy the full HTML from the textarea.
3. Return to visual edit to apply source changes.

Planned for a later version

// Planned — not available in v1.0.0
<HtmlEditor
  value={html}
  defaultValue="<p>Initial content</p>"
  onChange={(nextHtml) => setHtml(nextHtml)}
/>

Features

Text formatting

• Bold, italic, underline, strikethrough
• Subscript / superscript
• Text color & highlight
• Clear formatting
• Format painter

Paragraph & structure

• Paragraph, headings 1–3, preformatted code
• Adjustable line height
• Bulleted / numbered lists
• Todo list
• Blockquote, horizontal rule, page break (print)
• Increase / decrease indent
• Footnotes with auto references

Alignment & direction

• Left / center / right / justify
• Block RTL and LTR (mixed Persian/English docs)

Media & links

• Links with caption + URL
• Images from URL or local file
• Image resize handles
• Image context menu: wrap modes (Square, Tight, Behind text, In front of text, …), alignment, effects
• Video / audio from URL
• Tables (rows, cols, border width/color)

Quick insert

• Emoji (search + progressive load)
• Unicode symbols
• Gregorian date / time / date-time
• Iranian tools group: Jalali date, Jalali date-time, long Jalali date

View & export

• Light / dark theme (editor only)
• Preset color palettes
• Fullscreen (Esc to exit)
• Word wrap & spell check
• Print
• Download Word (.doc)
• Download PDF

History

• Undo / redo (Ctrl+Z / Ctrl+Y)

UI language

Toolbar and messages follow locale (Persian default, plus English, Arabic, Chinese, and other major languages). custom palette colors can be passed with customPalette.

Theme & color palette

Theme and palette are changeable from the toolbar and stored in localStorage:

| Key | Value | |-----|--------| | mysnevise-theme | light or dark | | mysnevise-palette | palette id | | mysnevise-palette-custom | custom accent / gold colors | | mysnevise-locale | locale id (fa, en, ar, …) |

Available palettes:

| Id | Label | |----|--------| | firoozeh | Turquoise (default) | | lapis | Lapis | | ruby | Ruby | | saffron | Saffron | | emerald | Emerald | | classic | Classic |

Requirements

| Item | Version | |------|---------| | React | >= 16.8.0 | | React DOM | >= 16.8.0 | | Browser | Modern with contentEditable + fetch |

Runtime dependencies (installed automatically with this package):

• lucide-react — icons
• emojibase / emojibase-data — emoji data
• html2canvas + jspdf — PDF export

TypeScript

Types ship with the package:

import {
  HtmlEditor,
  type HtmlEditorProps,
  type ColorPaletteId,
  type EditorLocale,
  DEFAULT_HTML_EDITOR_API_KEY,
} from 'mysnevise'

| Path | Description | |------|-------------| | mysnevise | Component & types | | mysnevise/style.css | Required styles |

ESM and CommonJS:

// ESM
import { HtmlEditor } from 'mysnevise'

// CJS
const { HtmlEditor } = require('mysnevise')

More examples

Editor only (no license)

import { HtmlEditor } from 'mysnevise'
import 'mysnevise/style.css'

export function Demo() {
  return (
    <main style={{ maxWidth: 960, margin: '0 auto', padding: 24 }}>
      <HtmlEditor locale="en" defaultPalette="firoozeh" />
    </main>
  )
}

License + custom siteUrl

<HtmlEditor
  licenseKey={process.env.NEXT_PUBLIC_MYS_LICENSE_KEY}
  licenseValidateUrl="https://license.example.com/validate"
  siteUrl="https://app.example.com"
/>

Forms (until onChange lands)

Until content props exist, copy HTML via HTML source in the UI, or wait for a controlled API in a later release.

Build from source

npm install
npm run build:lib

Output goes to dist/ (what gets published to npm).

| Script | Purpose | |--------|---------| | npm run dev | Vite demo | | npm run build:lib | Library build for publish | | npm run prepublishOnly | Runs build:lib before publish |

Notes

1. Always import mysnevise/style.css.
2. The editor is free; without licenseValidateUrl it loads fully. Extra features are available for a small fee.
3. PDF export depends on DOM/canvas — do not call it during SSR (client component).
4. Built on contentEditable + document.execCommand; complex documents may differ slightly across browsers.
5. Telemetry API key is the X-Html-Editor-Api-Key header, not a body field.

License (legal)

MIT © MYS Components