Skip to content

The letterpad editor - A high level abstraction of the draft editor with plugin architecture

Notifications You must be signed in to change notification settings

letterpad/editor

Repository files navigation

Letterpad Editor

This editor is an extract from the Letterpad CMS.

This editor gives a high level api of the draft 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"
      html="Hello World"
      onChange={(html: string) => {
        console.log(html);
      }}
    />
  );
};

export default MyEditor;

Parameters

  • theme: string

    default: dark

    Set the theme. Options - light | dark

  • setHelpers: (props: Helpers) => void

    You may want to store these props in some state, so that you can access them anytime. See below:

    import { Helpers } from "letterpad-editor/dist/types";
    import LetterpadEditor from "letterpad-editor";
    
    const MyEditor = () => {
      const [helpers, setHelpers] = useState<Helpers>();
    
      const insertImage = () => {
        helpers.pluginHelpers.imagePlugin.insertImage({
          src: "https://example.com/image.jpg",
          caption: "caption",
          width: 300,
          height: 200,
          placeholderSrc: "https://example.com/1x1.jpg"
        });
      };
    
      return (
        <div>
          <LetterpadEditor
            theme="dark"
            html="Hello World"
            setHelpers={setHelpers}
            onChange={(html: string) => {
              console.log(html);
            }}
          />
          <button onClick={insertImage}>Insert Image</button>
        </div>
      );
    };
    // Helpers
    {
      pluginHelpers, // instance of each plugin by name
      getPlugins, // a function returning a list of all the plugins
      getProps, // a function returning a list of all the props pass into the Editor
      setEditorState, // a function to update the EditorState
      getEditorState, // a function to get the current EditorState
      getReadOnly, // a function returning of the Editor is set to readOnly
      setReadOnly, // a function which allows to set the Editor to readOnly
      getEditorRef, // a function to get the editor reference
    }
  • onImageClick: ((insert: TypeInsertImageFn) => void)

    insert is a callback function to insert the image in the editor.

      ...
      onImageClick={insert => {
        // display file explorer
        // on select image, get the urls and some additional info
        insert({
          src,
          caption,
          width,
          height,
          placeholderSrc
        })
      }}
      ...

    Scenario: If a user is uploading an image, you might want to show some sort of a loading placeholder in the editor. And then when the image has uploaded, you will have to replace the placeholder. You can do so in this way.

    import { Helpers } from "letterpad-editor/dist/types";
    import LetterpadEditor from "letterpad-editor";
    
    const MyEditor = () => {
    const [helpers, setHelpers] = useState<Helpers>();
    
    const insertImage = () => {
      const image = getImageFromUser(); // implement this method.
      const {insertImage, updateImageBlock} = helpers.pluginHelpers.imagePlugin;
    
      const key = insertImage({
        src: "https://example.com/placeholder.svg"
      });
    
      const uploadedSrc = await uploadImageToServer(image);
    
      updateImageBlock(key, {
        src: uploadedSrc
      });
    };
    
    return (
      <div>
        <LetterpadEditor
          theme="dark"
          onChange={(html: string) => {
            console.log(html);
          }}
          html="Hello World"
          setHelpers={setHelpers}
        />
        <button onClick={insertImage}>Insert Image</button>
      </div>
    );
    };
  • onVideoClick: ((insert: (url:string) => void) => void)

  • onChange(html: string): (html:string) => void

    Receive html whenever there is a change in the editor.

  • html - string

    Load the initial html. If you want empty page, the enter empty string. If its null, it will load sample data.

Development

If you would like to contribute then setup your dev environment this way.

git clone [email protected]:letterpad/editor.git
cd editor
yarn install
yarn dev

About

The letterpad editor - A high level abstraction of the draft editor with plugin architecture

Resources

Stars

Watchers

Forks

Packages

No packages published