social-editor

Social Editor

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

Usage

Install

yarn add social-editor```  
  
or  
  
```bash  
npm install social-editor```  
  
### Import  
```javascript  
<!--  Including file   -->  
<script type="text/javascript" src="social-editor-box/dist/SocialEditor.js"></script>  
<!--or-->  
import SocialEditor from "social-editor";  

<!--  Editor Element   -->  
<div id="app"></div>  

// 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 => '<div class="suggestion-item-list">'+  
	   items.map(i => '<div class="suggestion-item">'+i.name+'</div>').join('')+  
	   '</div>',  
	getTagSuggestionsHTML: items => '<div class="suggestion-item-list">'+  
	    items.map(i => '<div class="suggestion-item">'+i.tag+'</div>').join('')+  
	    '</div>',
	//...
})  

Check out options for configuration

Example

• Codesandbox

Options

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	<empty 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

Events

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

Used By

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.