Getting Started
Extensions
API
Community

GitHub Download

version 1.3.2

SmartBlock

Props

SmartBlock Component can have following props

export type AppProps = {
  onChange?(output: Output): void;
  onTitleChange?(title: string): void;
  onInit?(json: { schema: Schema }): void;
  json?: OutputJson;
  html?: string;
  markdown?: string;
  showdown?: showdown;
  extensions?: Extension[];
  showBackBtn?: boolean;
  autoSave?: boolean;
  showTitle?: boolean;
  titleText?: string;
  titlePlaceholder?: string;
  outputMarkdown?: boolean;
  full?: boolean;
  getEditorRef?(div: React.MutableRefObject<HTMLDivElement>): void;
}

Props to Render title

Sometimes, You may want to edit the title and the content separetelly.

title

import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { 
  SmartBlock, 
} from 'smartblock';

render(<>
  <SmartBlock 
    showTitle
    titleText="Title Here"
    html={'<h2>Hello World</h2><p>hello</p>'}
    onChange={({ json, html }) => { 
      console.log(json, html);
    }}  
  />
</>, document.getElementById("app"));

Use markdown for I/O

You can use markdown library showdown to import and export markdown

import showdown from 'showdown';
import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { SmartBlock, Extensions } from 'smartblock';

render(<>
  <SmartBlock 
    extensions={Extensions}
    showdown={showdown}
    markdown={`# Hello World`}
    outputMarkdown
    onChange={({ markdown }) => { console.log(markdown);}}  
  />
</>, document.getElementById("app"));

AutoSave

The content will be stored on the localStorage. Once stored, Regardless of the html props, the content will be loaded from localStorage.

import * as showdown from 'showdown';
import * as React from 'react';
import { render } from 'react-dom';
import 'smartblock/css/smartblock.css';
import { SmartBlock, Extensions } from 'smartblock';

render(<>
  <SmartBlock 
    extensions={Extensions}
    autoSave
    html={"Hello World"}
    onChange={({ html }) => { console.log(html);}}  
  />
</>, document.getElementById("app"));

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