urdu-web-editor

Urdu Rich Text Editor for web based on lexical

Install

npm install --save urdu-web-editor

Usage

import React, { useState, useCallback, Component } from 'react'

import Editor from 'urdu-web-editor'

class Example extends Component {
  const [value, setValue] = useState(null);
  const onSave = useCallback((newContents) => {
    console.log('onSave:', newContents)
  });

  const onChange = useCallback((newContents) => {
    console.log('onChange:', newContents)
  });

  const uiConfiguration = {
    "richText" : true,
    "format": "raw",
    "language" : "en",
    "placeholder" : null,
    "toolbar" : {
      "showAlignment": true,
      "showBlockFormat": true,
      "showFontFormat": true,
      "showInsert": true,
      "showListFormat": true,
      "showUndoRedo": true,
      "showExtraFormat": true,
      "showInsertLink": true,
      "showSave": true,
    },
    "spellchecker" : {
      "enabled": false,
      "language" : "en",
      "punctuationCorrections": () => [],
      "autoCorrections": () => [],
      "wordList" : () => [],
    }
  };

  render() {
    return <Editor initialValue={value}
        onChange={onChange}
        onSave={onSave}
        configuration={uiConfiguration} />
  }
}

Properties

Value

It is the value that you want to set for the editor. Its value depends on the format. If the type of editor and format used.

• If using plain text editor, it must be plain text.
• If using rich text editor with raw format, provided value must be a valid lexical state json
• If using rich text editor with markdown format, provided value must be a valid markdown

Pass null if initializing an empty editor

OnChange

Callback function called when any change in editor takes place, parameter passed in the callback function is the formatted value from editor. This value can be passed back into value property.

OnSave

This callback function is called when save button is clicked on the editor. This will only work if the showSave is set to true in the configuration object

Configuration

Configuration object to customize the functionality and ui of the editor. Its structure is as follows:

  {
    "richText" : false,
    "format": "raw",
    "language" : "en",
    "placeholder" : null,
    "toolbar" : {
      "fonts" : null,
      "defaultFont": null,
      "showAlignment": true,
      "showBlockFormat": true,
      "showFontFormat": true,
      "showInsert": true,
      "showListFormat": true,
      "showUndoRedo": true,
      "showExtraFormat": true,
      "showInsertLink": true,
      "showSave": false,
    },
    "spellchecker" : {
      "enabled": false,
      "language" : "en",
      "punctuationCorrections": () => [],
      "autoCorrections": () => [],
      "wordList" : () => [],
    }
  }

richText

Type : boolean

Default value : false

Set it to true to use rich text editor. Otherwise plain text editor is used.

format

Type : string

Default value : raw

Possible values : raw, markdown

Set the format of output from editor when richText is set to true. The value, onChange and onSave will use this property to import or export editor contents in the selected format.

language

Type : string

Default value : en

Possible values : en, ur

This is the two letter language code to use for user interface. Editor features and layout will be modified based on language.

placeholder

Type: string

Default value : null

Text to use when there is no value present. By default a generic message will be used while placeholder is not specified or is null.

toolbar

Type : object

Default value :

{
  "fonts" : null,
  "defaultFont": null,
  "showAlignment": true,
  "showBlockFormat": true,
  "showFontFormat": true,
  "showInsert": true,
  "showListFormat": true,
  "showUndoRedo": true,
  "showExtraFormat": true,
  "showInsertLink": true,
  "showSave": false,
}

| Property | type | Default Value | Description | | ----- | ----- | ----- | ---------------| | fonts | object | null | List of fonts to show. If null a standard list of fonts is shown. | | defaultFont | string | null | Font-face value of default font. If this property is null first font is selected as default font. | | showAlignment | bool | true | Show/hide text alignment controls | | showBlockFormat | bool | true | Show/hide text alignment controls | | showFontFormat | bool | true | Show/hide text alignment controls | | showInsert | bool | true | Show/hide text insert menu | | showListFormat | bool | true | Show/hide text list formatting controls | | showUndoRedo | bool | true | Show/hide text undo and redo controls | | showExtraFormat | bool | true | Show/hide extra formatting options of superscript, subscript and strike through | | showInsertLink | bool | true | Show/hide insert link button | | showSave | bool | false | Show/hide save button |

Default font list and value of font-face

[
  { "value": "Arial", "label": "Arial" },
  { "value": "Courier New", "label": "Courier New" },
  { "value": "Georgia", "label": "Georgia" },
  { "value": "Times New Roman", "label": "Times New Roman" },
  { "value": "Trebuchet MS", "label": "Trebuchet MS" },
  { "value": "Verdana", "label": "Verdana" },
]

spellchecker

Type : object

Default value :

{
  "enabled": false,
  "language : "en",
  "punctuationCorrections": (lang) => [],
  "autoCorrections": (lang) => [],
  "wordList" : (lang) => [],
}

| Property | type | Default Value | Description | | ----- | ----- | ----- | ---------------| | enabled | bool | false | Enable/disable language tools including spell checker | | language | string | en | Two character language code to use for language tools including spell checker. | | punctuationCorrections | function(language) | [] | Function to load punctuation correction list. See below for details. | | autoCorrections | function(language) | [] | Function to load automatic correction list. See below for details. | | wordList | function(language) | [] | Function to load word list for spell checking. It is a simple string array. |

Punctuation and auto correct function response structure

[{
  "incorrectText": "",
  "correctText": "",
  "completeWord": true
}]

Development

Install dependencies

npm install

Develop library

npm start

License

MIT © umerfaruk