Urdu Rich Text Editor for web based on lexical
npm install --save urdu-web-editor
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} />
}
}
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
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.
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 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" : () => [],
}
}
Type : boolean
Default value : false
Set it to true to use rich text editor. Otherwise plain text editor is used.
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.
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.
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
.
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 |
[
{ "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" },
]
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. |
[{
"incorrectText": "",
"correctText": "",
"completeWord": true
}]
npm install
npm start
MIT © umerfaruk