medium-draft - demo
A medium like rich text editor built upon draft-js with an emphasis on eliminating mouse usage by adding relevant keyboard shortcuts.
- Focus on keyboard shortcuts and auto transform of text blocks.
- Image addition with support for rich text captioning.
- Minimize mouse usage.
- Autolists.
- Proper handling of
RETURNpresses. - It also has implementations of some custom blocks like:
caption- Can be used as a caption for media blocks like image or video instead of nesteddraft-jsinstances for simplicity.block-quote-caption- Caption forblockquotes.todo- Todo text with a checkbox.
Following are the keyboard shortcuts to toggle block types (Alt and CTRL for Windows/Linux and Option and Command for OSX)
-
Alt/Option +
- 1 - Toggle Ordered list item
- * - Toggle Unordered list item
- @ - Add link to selected text.
- # - Toggle Header-three.
- < - Toggle Caption block.
- > - Toggle unstyled or paragraph block.
- H - Highlight selection.
These commands are not a part of the core editor but have been implemented in the example code that uses the medium-draft editor.
- Command/CTRL + S - Save current data to
localstorage. - Alt + Shift + L - Load previously saved data from
localstorage.
Special characters while typing: While typing in an empty block, if the content matches one of the following, that particular block's type and look will be changed to the corresponding block specified below
--- If current block isblockquote, it will be changed toblock-quote-caption, elsecaption.*.(An asterisk and a period)-unordered-list-item.*<SPACE>(An asterisk and a space)-unordered-list-item.-<SPACE>(A hyphen and a space)-unordered-list-item.1.(The number 1 and a period)-unordered-list-item.##-header-two.[]-todo.==-unstyled.
- npm.
npm install medium-draft.import Editor from 'medium-draft'
- Browser
- Include
<link rel="stylesheet" type="text/css" href="https://unpkg.com/medium-draft/dist/medium-draft.css">in<head> - Include
<script src="https://unpkg.com/medium-draft/dist/medium-draft.js"></script>. medium-draft is available in the global object asMediumDraft.
- Include
medium-draft sits on top of draft-js with some built in functionalities and blocks. Its API is almost the same as that of draft-js. You can take a look at the demo editor's code to see the implementation.
At the minimum, you need to provide editorState and onChange props, the same as draft-js.
import React from 'react';
import ReactDOM from 'react-dom';
import {
Editor,
createEditorState,
} from 'medium-draft';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
editorState: createEditorState(), // for empty content
};
/*
this.state = {
editorState: createEditorState(data), // with content
};
*/
this.onChange = (editorState) => {
this.setState({ editorState });
};
}
componentDidMount() {
this.refs.editor.focus();
}
render() {
const { editorState } = this.state;
return (
<Editor
ref="editor"
editorState={editorState}
onChange={this.onChange} />
);
}
};
ReactDOM.render(
<App />,
document.getElementById('app')
);- Figure out a way to show placeholder text for empty image captions.
- Currently, the toolbar that appears when text is selected needs to be fixed regarding its position in the viewport.
- Clone this repo
git clone https://github.com/brijeshb42/medium-draft.git. - Install node packages
npm install. - Start local demo
npm run dev. This will start a local server on port8080. - Build using
npm run build.
MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent