Getting Started
Extensions
API
Community

GitHub Download

version 1.3.2

SmartBlock

Utils

Extensions are not only blocks or marks, You can extend the SmartBlock by Util Extensions SmartBlock already has all util extensions as default but if you don’t need it you can import what you really need and pass it to the SmartBlock component.

MoveUp

move up

import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { 
  SmartBlock, 
  Paragraph,
  DefaultKeys, // Util Extension
  DefaultPlugins, // Util Extension
  MoveUp, // Util Extension
} from 'smartblock';

const extensions = [
  new Paragraph(),
  new DefaultKeys(),
  new DefaultPlugins(),
  new MoveUp()
];

render(<>
  <SmartBlock 
    extensions={extensions}
    html={'<p>Hello world</p>'}
    onChange={({ json, html }) => { console.log(json, html);}}  
  />
</>, document.getElementById("app"));

MoveDown

move down

import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { 
  SmartBlock, 
  Paragraph,
  DefaultKeys, // Util Extension
  DefaultPlugins, // Util Extension
  MoveDown, // Util Extension
} from 'smartblock';

const extensions = [
  new Paragraph(),
  new DefaultKeys(),
  new DefaultPlugins(),
  new MoveDown()
];

render(<>
  <SmartBlock 
    extensions={extensions}
    html={'<p>Hello world</p>'}
    onChange={({ json, html }) => { console.log(json, html);}}  
  />
</>, document.getElementById("app"));

Trash

trash

import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { 
  SmartBlock, 
  Paragraph,
  DefaultKeys, // Util Extension
  DefaultPlugins, // Util Extension
  Trash, // Util Extension
} from 'smartblock';

const extensions = [
  new Paragraph(),
  new DefaultKeys(),
  new DefaultPlugins(),
  new Trash()
];

render(<>
  <SmartBlock 
    extensions={extensions}
    html={'<p>Hello world</p>'}
    onChange={({ json, html }) => { console.log(json, html);}}  
  />
</>, document.getElementById("app"));

Option

You can change message when someone push the trash button with smartphone

new Trash({
  i18n: {
    remove_block: 'Are you sure you want to remove the block?'
  }
})

Document

Usage, introduction of other functions, component introduction etc.
are described in detail in the document.

Get Started

View on GitHub

SmartBlock was developed by @appleplecom and is open source (MIT license) on GitHub.
Please send us feedback, requests, bug reports and pull requests!

If you like it, please press Star ;)

GitHub page

If you like our project, we glad to have star! :)

GitHub
SmartBlock

A modern block styled editor built with React.
SmartBlock is provided with MIT license. Made by @appleple ♥ OSS