Socket
Socket
Sign inDemoInstall

@slate-editor/bold-plugin

Package Overview
Dependencies
9
Maintainers
2
Versions
11
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 5.0.0-alpha.f7181996 to 5.0.0

CHANGELOG.md

25

package.json
{
"name": "@slate-editor/bold-plugin",
"version": "5.0.0-alpha.f7181996",
"description": "SlateJS framework bold plugin",
"version": "5.0.0",
"description": "SlateJS bold mark plugin.",
"main": "dist/index.js",

@@ -12,2 +12,17 @@ "repository": "https://github.com/nossas/slate-editor",

},
"files": [
"README.md",
"CHANGELOG.md",
"dist"
],
"keywords": [
"slate",
"rich-text",
"editor",
"react",
"slate-plugins"
],
"bugs": {
"url": "https://github.com/nossas/slate-editor/issues"
},
"scripts": {

@@ -17,4 +32,6 @@ "prepare": "babel src --out-dir dist --copy-files"

"dependencies": {
"@slate-editor/utils": "^5.0.0-alpha.f7181996",
"react": "^16.2.0"
"@slate-editor/utils": "^5.0.0",
"classnames": "^2.2.5",
"react": "^16.2.0",
"react-fontawesome": "^1.6.1"
},

@@ -21,0 +38,0 @@ "devDependencies": {

101

README.md

@@ -1,13 +0,45 @@

<img src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg" alt="Nossas Cidades logo" title="Nossas Cidades" align="right" height="70"/>
<img src="https://avatars2.githubusercontent.com/u/1479357?v=3&s=250" alt="Nossas Cidades logo" title="Nossas Cidades" align="right" height="70"/>
<div align="center">
<a href="https://www.en.nossas.org" rel="noopener" target="_blank">
<img
width="200"
src="https://s3.amazonaws.com/hub-central/uploads/logo-nossas-20170517185909.svg"
alt="Nossas logo"
title="Nossas"
/>
</a>
</div>
<div align="center">
<img
src="https://www.psdmockups.com/wp-content/uploads/2016/07/slatejs-520x292.jpg"
alt="Nossas Cidades logo"
title="Nossas Cidades"
height="50"
/>
</div>
# [SlateJS](https://github.com/ianstormtaylor/slate) - Bold Plugin
The goal of this plugin is to offers an easy handling of SlateJS bold mark node content editable. Providing a simple API and easy usage, basing on concept of plugin-centric by SlateJS framework.
<h1 align="center">@slate-editor/bold-plugin</h1>
# Usage
<div align="center">
#### SlateJS Bold Plugin
[SlateJS](https://github.com/ianstormtaylor/slate) bold plugin.
[![npm package](https://img.shields.io/npm/v/@slate-editor/bold-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/bold-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/bold-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/bold-plugin)
</div>
## Installation
The **@slate-editor/bold-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/bold-plugin).
```
yarn add @slate-editor/bold-plugin
```
## Usage
Here is a quick example to get you started:
```js
import React, { Component } from 'react'
import BoldPlugin from 'slate-bold-plugin'
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { BoldPlugin, BoldButtonBar } from '@slate-editor/bold-plugin'

@@ -18,43 +50,18 @@ const plugins = [

class SlateEditor extends Component {
onChange(state) {
this.setState({ state })
}
render() {
return (
<Editor
plugins={plugins}
state={this.state.state}
onChange={this.onChange.bind(this)}
/>
)
}
}
```
const SlateRichTextEditor = () => (
<SlateEditor plugins={plugins}>
<SlateToolbar>
<BoldButtonBar />
</SlateToolbar>
#### SlateJS Bold Plugin Button
```js
import React, { Component } from 'react'
import { BoldButton } from 'slate-bold-plugin'
<SlateContent />
</SlateEditor>
)
class SlateEditor extends Component {
onChange(state) {
this.setState({ state })
}
render() {
return (
<div className="editor--toolbar">
<BoldButton
state={this.state.state}
onChange={this.onChange.bind(this)}
/>
</div>
)
}
}
export default SlateRichTextEditor
```
# Keyboard Shortcut
## Keyboard Shortcut
| Platform | Shortcut |
| OS | Shortcut |
|--------------------------|----------|

@@ -64,5 +71,5 @@ | ![Apple Logo][apple] | `⌘`+`b` |

# API
## API
| Target | Description |
| Name | Description |
|----------------------|---------------------------------------------------------------------------|

@@ -74,3 +81,3 @@ | BoldMark | Component that holds the html that will wrap the content with bold style. |

# TODO
## TODO

@@ -77,0 +84,0 @@ - Make keyboard shortcut accepts customization

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc