Skip to content
The letterpad editor - A high level abstraction of the slate editor with plugin architecture
TypeScript JavaScript HTML Shell CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci add umd to workspace for publish (#84) Jun 4, 2019
.github Removed package-lock (#42) Mar 3, 2019
cypress Editor structural change (#90) Jan 29, 2020
examples/demo-1 Embed Rework (#94) Feb 1, 2020
public Fix markup semantics (#69) Apr 16, 2019
scripts [ci skip] Generated Build May 19, 2019
src Css fixes and add image caption in html (#107) Feb 18, 2020
test-utils fix the deploy bug and replace classnames in css (#96) Feb 1, 2020
.DS_Store Remove unused imports (#102) Feb 2, 2020
.editorconfig more ts files Feb 22, 2019
.gitignore Add umd bundles to publish (#83) Jun 4, 2019
CHANGELOG.md Css fixes and add image caption in html (#107) Feb 18, 2020
LICENSE Fixed Toolbar state, dependencies and removed package-lock.json May 27, 2019
Readme.md fix the deploy bug and replace classnames in css (#96) Feb 1, 2020
cypress.json Cypress tests (#70) Apr 15, 2019
index.html feat: change default font of editor to Lora nad Montserrat (#92) Jan 31, 2020
index.tsx Added .ts files to dist for npm Jun 3, 2019
package.json Css fixes and add image caption in html (#107) Feb 18, 2020
postcss.config.js Fixed Toolbar state, dependencies and removed package-lock.json May 27, 2019
snapshots.js Editor structural change (#90) Jan 29, 2020
tsconfig.build.json refactor: move examples to separate directory (#44) Mar 3, 2019
tsconfig.compiler.json Fix types (#106) Feb 9, 2020
tsconfig.json Cypress tests (#70) Apr 15, 2019
webpack.config.demo.js Add umd bundles to publish (#83) Jun 4, 2019
webpack.config.js Editor structural change (#90) Jan 29, 2020
webpack.config.prod.js Editor structural change (#90) Jan 29, 2020
yarn.lock Remove unused imports (#102) Feb 2, 2020

Readme.md

Letterpad Editor

This editor is an extract from the Letterpad CMS.

Build Status

This editor gives a high level api of the slate editor along with a flexible plugin architecture.

How to use

// using yarn
yarn add letterpad-editor

//using npm
npm install letterpad-editor

Now you can use this in your react project

import React from "react";
import LetterpadEditor from "letterpad-editor";

const MyEditor = () => {
  return (
    <LetterpadEditor
      theme="dark"
      spellCheck={false}
      defaultFont={true}
      onChange={(html: string) => {
        console.log(html);
      }}
      html="Hello World"
    />
  );
};

export default MyEditor;
Props Description
defaultValue Markdown content
placeholder Override the default text. (default: "Write something nice")
readOnly Setting this to true will not allow the user to edit
autoFocus Focus the document automatically on load
spellCheck Allow spellchecking. (default: true)
plugins Allow additional plugins matching SlateJS API
schema Allow additional schema to be passed to Slate Editor
dark Set this to true to use the dark theme. (default: light)
style You can pass css string to override the defaults. eg. "body {font-size: 18px}"
Look for base.css to see the default css

Callback options

Props Description
uploadImage This function is called a user uploads an image.
<Editor 
uploadImage={async file => {
const result = await upload(file);
}
/>
onSave(done: boolean) This is called when the user uses shortcut keys (Ctrl+S or Cmd+S) to save the document. (Ctrl+Enter or Cmd+Enter) is to save and exist and sets done to true.
onChange(() => value) This is called when the content is edited. Remember that callback is a function and when its called, it serializes the JSON value to markdown
onClickLink(href) This callback can be used to override link handling. You may want to open external link in new tab and internal link in the same tab.
getLinkComponent(Node) The editor automatically detects a wide variety of links (youtube, soundcloud, vimeo, gist, figma, etc). However, you may override this by returning a component

Development

git clone git@github.com:letterpad/editor.git
cd editor
yarn install
yarn dev

Tests

Most part is covered with integration tests using Cypress.

# Run all tests locally
yarn bundle # build the bundle
yarn testServer
yarn cy:run # validate the bundle
You can’t perform that action at this time.