# social-editor

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

Latest version **1.3.6** (published 2024-09-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install social-editor
pnpm add social-editor
yarn add social-editor
bun add social-editor
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.6 |
| Published | 2024-09-20 |
| First published | 2022-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 24 |
| Unpacked size | 604.5 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| Maintainers | seeratawan |
| Keywords | editor, social, library, web, ui |

## Links

- npm: https://www.npmjs.com/package/social-editor
- Repository: https://www.seeratawan.me/
- Homepage: https://social-editor-box.netlify.app/
- npm.io page: https://npm.io/package/social-editor

## Dependencies (24)

- [million](https://npm.io/package/million.md) ^1.4.4
- [linkifyjs](https://npm.io/package/linkifyjs.md) ^3.0.5
- [striptags](https://npm.io/package/striptags.md) ^3.2.0
- [url-regex](https://npm.io/package/url-regex.md) ^5.0.0
- [html-to-text](https://npm.io/package/html-to-text.md) ^8.2.0
- [twitter-text](https://npm.io/package/twitter-text.md) ^3.1.0
- [click-outside](https://npm.io/package/click-outside.md) ^2.0.2
- [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^0.3.1
- [prosemirror-view](https://npm.io/package/prosemirror-view.md) ^1.23.6
- [prosemirror-model](https://npm.io/package/prosemirror-model.md) ^1.16.1
- [prosemirror-state](https://npm.io/package/prosemirror-state.md) ^1.3.4
- [prosemirror-keymap](https://npm.io/package/prosemirror-keymap.md) ^1.1.5
- [prosemirror-history](https://npm.io/package/prosemirror-history.md) ^1.2.0
- [prosemirror-suggest](https://npm.io/package/prosemirror-suggest.md) ^1.0.7
- [prosemirror-commands](https://npm.io/package/prosemirror-commands.md) ^1.2.1
- [prosemirror-mentions](https://npm.io/package/prosemirror-mentions.md) ^1.0.2
- [prosemirror-gapcursor](https://npm.io/package/prosemirror-gapcursor.md) ^1.2.1
- [prosemirror-transform](https://npm.io/package/prosemirror-transform.md) ^1.3.4
- [html-to-formatted-text](https://npm.io/package/html-to-formatted-text.md) ^2.7.0
- [linkify-plugin-hashtag](https://npm.io/package/linkify-plugin-hashtag.md) ^3.0.4
- [linkify-plugin-mention](https://npm.io/package/linkify-plugin-mention.md) ^3.0.4
- [prosemirror-dropcursor](https://npm.io/package/prosemirror-dropcursor.md) ^1.4.0
- [prosemirror-inputrules](https://npm.io/package/prosemirror-inputrules.md) ^1.1.3
- [prosemirror-autocomplete](https://npm.io/package/prosemirror-autocomplete.md) ^0.3.1

## Alternatives

- [raw-loader](https://npm.io/package/raw-loader.md) — 4.3M weekly downloads
- [plop](https://npm.io/package/plop.md) — 1.4M weekly downloads
- [webpack-deadcode-plugin](https://npm.io/package/webpack-deadcode-plugin.md) — 80.3K weekly downloads
- [@storybook/preact-vite](https://npm.io/package/@storybook/preact-vite.md) — 54.2K weekly downloads
- [vite-plugin-transform](https://npm.io/package/vite-plugin-transform.md) — 2.4K weekly downloads

## Recent versions

- 1.3.6 (latest) — 2024-09-20
- 1.3.5 — 2024-09-20
- 1.3.4 — 2023-11-28
- 1.3.3 — 2023-08-31
- 1.3.2 — 2023-02-13
- 1.3.1 — 2023-01-16
- 1.3.0 — 2022-11-10
- 1.3.0-beta.6 — 2022-11-03
- 1.3.0-beta.5 — 2022-11-01
- 1.3.0-beta.4 — 2022-11-01
- 1.3.0-beta.3 — 2022-11-01
- 1.3.0-beta.2 — 2022-10-28
- 1.3.0-beta.1 — 2022-10-27
- 1.2.20 — 2022-10-14
- 1.2.19 — 2022-09-27
- … 42 more at https://npm.io/package/social-editor/versions

## README

# Social Editor 
> A headless editor framework for building editors like facebook and twitter with @mentions, #hashtags and auto-linking support, based on [Prosemirror](https://prosemirror.net/).

![preview](https://i.postimg.cc/q7XP1RFC/thumb.png)
## Usage

### Install

```bash  
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";  
```  
```html  
<!--  Editor Element   -->  
<div id="app"></div>  
```  
```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 => '<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](#options) for configuration
### Example
- [Codesandbox](https://codesandbox.io/s/social-editor-box-demo-vmmzn8)

### 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](https://github.com/twitter/twitter-text) 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
![ContentStudio](https://blog.contentstudio.io/wp-content/themes/contentstudio-blog-theme/theme/assets/img/contentstudio-logo-original.webp)

# 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**](https://webpack.js.org/configuration/output/) documentation.

---
_Source: https://npm.io/package/social-editor · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._