Social Editor

> A headless editor framework for building editors like facebook and twitter with @mentions, #hashtags and auto-linking support, based on Prosemirror.

!preview

Usage

$3

``bash
yarn add social-editor`

or

`bash
npm install social-editor`



$3


`javascript



import SocialEditor from "social-editor";
`
`html

`
`javascript
// creating instance of a plugin
let elem = document.getElementById('app');
let editor = new SocialEditor(elem, {
//options
getSuggestions: (type, text, done) => {
if (type === 'mention') {
// pass dummy mention suggestions
done([
{name: 'Seerat', username: '@seerat', id: '123124', tab:'facebook', verification_status: true, fan_count: '12M', picture: 'https://www.w3schools.com/howto/img_avatar.png' },
{name: 'John Doe', username: '@johndoe', id: '123123', tab:'facebook', verification_status: true, fan_count: '12M', picture: 'https://www.w3schools.com/howto/img_avatar.png' },
])
} else if (type === 'tag') {
// pass dummy tag suggestions
done([{tag: 'WikiLeaks'}, {tag: 'NetNeutrality'}])
}
},
getMentionSuggestionsHTML: items => '

'+
items.map(i => '

'+i.name+'

').join('')+
'

',
getTagSuggestionsHTML: items => '

'+
items.map(i => '

'+i.tag+'

').join('')+
'

',
//...
})
`
Check out options for configuration

$3

- Codesandbox

$3

|Option|Type|Default|Description|Required|
|--|--|--|--|--|
|placeholder|string|'Type Anything Here!'|Specifies a short hint that describes the expected value of a social text area| false |
|initialValue|string||Specifies the value of social text area| false |
|max|number|0|Specifies the maximum value for an social text area (Note: 0 === no-limit)| false |
|twitterText|boolean|false|Specifies to use twitterText library to tokenize and parse text intend of native parser | false |
|getMentionSuggestionsHTML|function|() => {}|Specifies a html template for rendered mentions| false |
|getTagSuggestionsHTML|function|() => {}|Specifies a html template for rendered tags| false |
|getSuggestions|function|() => {}|Specifies the data for suggestions| false |
|getSuggestionsLoader|function|() => {}|Specifies the html for waitng loader| false |

$3

|Option|Params|Description|
|--|--|--|
|onUpdate|{ text, html,templateText,count,links,hashtags }|Emits when change occurs in social text area|
|onCreate|-|Emits when social text area is in ready state|
|onPaste|-|Emits when content pasted in social text area|

$3

!ContentStudio

Contribution Guide

- Use npm install command to install dependencies.
- Execute command npm run start to run webpack development server and top open preview in the browser.
- Execute command npm run build to create plugin distribution files in the dist directory.
- Tweak configuration inside config` folder if necessary.
- Configure plugin API using this documentation.