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