Socket
Socket
Sign inDemoInstall

@slate-editor/grid-plugin

Package Overview
Dependencies
Maintainers
2
Versions
5
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@slate-editor/grid-plugin - npm Package Compare versions

Comparing version 5.0.0-alpha.f7181996 to 5.0.0

CHANGELOG.md

26

package.json
{
"name": "@slate-editor/grid-plugin",
"version": "5.0.0-alpha.f7181996",
"description": "SlateJS grid block node content editable plugin.",
"version": "5.0.0",
"description": "SlateJS grid block node 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,7 @@ "prepare": "babel src --out-dir dist --copy-files"

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

@@ -21,0 +39,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) - Grid Plugin
The goal of this plugin is to offers an easy handling of SlateJS grid block node content editable. Providing a simple API and easy usage, basing on concept of plugin-centric by SlateJS framework.
<h1 align="center">@slate-editor/grid-plugin</h1>
# Usage
<div align="center">
#### SlateJS Grid Plugin
[SlateJS](https://github.com/ianstormtaylor/slate) grid plugin.
[![npm package](https://img.shields.io/npm/v/@slate-editor/grid-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/grid-plugin)
[![npm downloads](https://img.shields.io/npm/dt/@slate-editor/grid-plugin.svg?maxAge=60)](https://www.npmjs.com/package/@slate-editor/grid-plugin)
</div>
## Installation
The **@slate-editor/grid-plugin** is available as an [npm package](https://www.npmjs.com/package/@slate-editor/grid-plugin).
```
yarn add @slate-editor/grid-plugin
```
## Usage
Here is a quick example to get you started:
```js
import React, { Component } from 'react'
import GridPlugin from 'slate-grid-plugin'
import React from 'react'
import { SlateEditor, SlateToolbar, SlateContent } from 'slate-editor'
import { GridPlugin, GridButtonBar } from '@slate-editor/grid-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>
<GridButtonBar />
</SlateToolbar>
#### SlateJS Grid Plugin Button
```js
import React, { Component } from 'react'
import { GridButton } from 'slate-grid-plugin'
<SlateContent />
</SlateEditor>
)
class SlateEditor extends Component {
onChange(state) {
this.setState({ state })
}
render() {
return (
<div className="editor--toolbar">
<GridButton
state={this.state.state}
onChange={this.onChange.bind(this)}
/>
</div>
)
}
}
export default SlateRichTextEditor
```
# Keyboard Shortcut
## Keyboard Shortcut
| Platform | Action | Shortcut |
| OS | Action | Shortcut |
|--------------------------|-----------|----------------------------------------------|

@@ -66,5 +73,5 @@ | ![Apple Logo][apple] | Add Grid | <kbd>⌘</kbd> + <kbd>^</kbd> + <kbd>g</kbd> |

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

@@ -80,3 +87,3 @@ | GridNode | Component that holds the html that will render the content with grid style. |

# TODO
## TODO

@@ -83,0 +90,0 @@ - Make keyboard shortcut accepts customization

SocketSocket SOC 2 Logo

Product

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

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc