appleple / smartblock

intuitive block based wysiwyg editor built with React and ProseMirror

SmartBlock

SmartBlock.js is a JavaScript block based editor which enables you to write contents easily on websites even with SmartPhone.

IE11 / Edge	Firefox	Chrome	Safari	iOS Safari

ScreenShot

Features

• Easy to use with SmartPhone
• Fully customizable
• Block based
• Keep clean HTML and wipe out unnecessary tags
• Get the result as HTML or JSON
• copy and paste contents

Install

$ npm install smartblock --save

Usage

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

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

Try it on CodeSandbox

Customize

You can add custom block like this

import * as React from 'react';
import { Extensions, CustomBlock, CustomMark } from 'smartblock';
Extensions.push(new CustomBlock({  
  tagName: 'div',
  className: '.alert',
  icon: <SomeIconComponent />
});

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

You can add custom inline element like this

import * as React from 'react';
import { Extension, CustomBlock, CustomMark } from 'smartblock';
import 'smartblock/css/smartblock.css';
Extension.push(new CustomMark({  
  tagName: 'span',
  className: '.small',
  icon: <SomeIconComponent />
});

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

Options

Props	description	type	default
extensions	Array of extensions which extend the feature of SmartBlock	Extension[]	array of extensions
onChange	Callback function which is called when the content of the editor is changed. You can get both html and json	Function
onInit	Callback function which is called when the editor is initialized	Function
json	The editor contents will be initialized with the json data	Object	{}
HTML	The editor contents will be initialized with the HTML	String	''
showTitle	Title will be shown	Boolean	false
showBackBtn	Btn to support history back will be shown	Boolean	false
autoSave	The HTML will be stored to the localstorage every time the content is changed	Boolean	false
getEditorRef	Get the editor ref object	Function

Download

Download ZIP

Github

https://github.com/appleple/smartblock

Contributor

@steelydylan

License

Code and documentation copyright 2020 by appleple, Inc. Code released under the MIT License.

smartblock's Issues

i18n対応

The images on the document page on github gets 404

For instance here:
https://appleple.github.io/smartblock/blocks

The images are not there.

Image Extension Key Prop Error & Link Error

Hello!
Thank you for this great editor. Today, I was testing the Extensions and I encountered two errors,

• First error occurred when I added the new Image({}) extension which says an Element needs a key prop (for which I'm guessing the .smartblock-menu element doesn't have a key prop).

• Second Error is when I select a node and add want to add a link to it. Like this:

Which gives the following error in the console:

But the link error occurs only when a part of block is selected not when the whole block is selected.

Any idea about these?

Thanks in advance.

How to import HTML into Editor

I have got HTML output from editor. But my issue is I fetched an API and setState the props to state. Then i want to render HTML (from database) into Text Editor. I only got null value.

Smartblocks is not compatible with Next.js

Smartblocks i great, unfotunately I can't use it with Next,js, due to to css imports.

When it's included Nestjs gives the following error

./node_modules/prosemirror-tables/style/tables.css
Global CSS cannot be imported from within node_modules.
Read more: https://err.sh/next.js/css-npm
Location: node_modules/smartblock/lib/extensions/default-plugins.js

The explanation under https://err.sh/next.js/css-npm is

Why This Error Occurred
One of your dependencies (node_modules) imports a CSS file.

This normally happens when a package's source files are accidentally consumed, instead of the built package.

Possible Ways to Fix It
Reach out to the maintainer and ask for them to publish a compiled version of their dependency.

Compiled dependencies do not have references to CSS files, or any other files that require bundler-specific integrations.

The dependency should also provide instructions about what CSS needs to be imported by you, in your application.

Importing CSS files within node_modules cannot be supported because we cannot know the correct behavior:

Should the file be consumed as Global CSS or CSS Modules?
If Global, in what order does the file need to be injected?
If Modules, what are the emitted class names? As-is, camel-case, snake case?
Etc...

Using the image block with standard Javascript

HI I'm trying to use smart block app with image upload capabilities.

I've tried the following

`

SmartBlock.Extensions.push(new SmartBlock.Image({
    imgClassName: 'img'
}));

SmartBlock.Editor('#app', {
    html: '<h2>Hello World</h2><p>hello</p>',
    extensions: SmartBlock.Extensions,
    onChange: function (result) {
        console.log(result.json, result.html);
    }
});

`

but get the following error.

RangeError: Adding different instances of a keyed plugin (plugin$1)

I can't work out what I'm doing wrong. Sorry, I can't work out the react way of doing it, so stuck with standard js.

spaces get removed while typing

While writing in a paragraph block, all spaces will get removed while typing.
This only happens when the block in question is the last block, and there are no space characters after the text cursor.
This also happens in the demo text editor displayed in smartblock homepage.
Web browser: Firefox 14 in Ubuntu.

Image on React

Cannot import the Image extension from smartblock.

Attempted import error: 'Image' is not exported from 'smartblock' (imported as 'Image').
ERROR in ./src/App.js 7:16-21
export 'Image' (imported as 'Image') was not found in 'smartblock' (possible exports: Blockquote, BulletList, Button, Code, CustomBlock, CustomMark, DefaultKeys, DefaultPlugins, EditMenu, Editor, Embed, Emphasis, Extension, Extensions, GlobalStyle, Heading1, Heading1Icon, Heading2, Heading2Icon, Heading3, Heading3Icon, Heading4, Heading4Icon, Heading5, Heading5Icon, Heading6, Heading6Icon, InlineMenu, Link, ListItem, Menu, MoveDown, MoveUp, OrderedList, Paragraph, Plugin, SmartBlock, Strike, Strong, Table, Trash, Underline, blockActive, canInsert, createTable, findNodePosition, findSelectedNodeWithType, getParentNodePosFromState, getViewport, isInput, liftListItem, markActive)

クラス名対応

テストコード追加

How to add a block?

How can an end user add a block?

Is there a keyboard shortcut for that?

Is it possible to add a new block in between?

Fresh install & Fatal error

Hi, my project requires Smartblock.

After installing the library, project cannot render because of a prosemirrorState.PluginKey is not a constructor

Here is my react version:

{
  "react": "^18.2.0",
   "react-dom": "^18.2.0",
   "react-i18next": "^13.0.1",
   "react-router-dom": "^6.10.0",
   "react-scripts": "5.0.1"
}

Thanks

Register to Github Actions

extensions にタグ単体の extension（Paragraph など） が CustomBlock より前に追加されていると、html props の値を解析時にタグ単体の extension として解析され、CustomBlock で指定したクラス属性が消えてしまう問題の修正

以下のように記述すると、リロード時に CustomBlock で指定したクラス名が消える

Extension.push(new CustomBlock({  
  tagName: 'p',
  className: 'hogehoge',
  icon: <SomeIconComponent />
});

Paragraph などタグ単体の extension と CustomBlock を区別するための仕組みが必要。

Uncaught RangeError: Duplicate use of selection JSON ID cell

I follow this example:

import ReactDom from 'react-dom';
import React from "react";
import {SmartBlock} from "smartblock";

let html = document.currentScript.getAttribute('data-html');
let element = document.currentScript.getAttribute('data-element');
const extensions = [
    new Heading1()
];

var app = document.getElementById("hello");

ReactDom.render(
    <SmartBlock
        extensions={extensions}
        html={`<ul>
      <li>list item 1</li>
      <li>list item 2</li>
    </ul>`}
        onChange={({ json, html }) => { console.log(json, html);}}
    />, app);

and I have this error

Uncaught RangeError: Duplicate use of selection JSON ID cell
    at Function.jsonID (editor.js:57012:34)
    at Object../node_modules/smartblock/node_modules/prosemirror-tables/dist/index.js (editor.js:112042:28)
    at __webpack_require__ (editor.js:145477:42)
    at Module../node_modules/smartblock/lib/extensions/table/index.js (editor.js:110215:76)
    at __webpack_require__ (editor.js:145477:42)
    at Module../node_modules/smartblock/lib/extensions/index.js (editor.js:108961:64)
    at __webpack_require__ (editor.js:145477:42)
    at Module../node_modules/smartblock/lib/components/smart-block.js (editor.js:106010:70)
    at __webpack_require__ (editor.js:145477:42)
    at Module../node_modules/smartblock/lib/index.js (editor.js:110802:81)

Package.json
"smartblock": "^1.0.8",