Skip to content

Blazingly fast block style wysiwyg editor that returns markdown

License

Notifications You must be signed in to change notification settings

victrme/pocket-editor

Repository files navigation

Github - Npm - Example


This is yet another wysiwyg editor, it focuses mainly on two things:

  • Very fast load time
  • Reliable markdown output

Install

npm install pocket-editor

What you can do

interface Options {
  text?: string
  id?: string
  defer?: true | number 
}

class PocketEditor {
  constructor(selector: string, options?: Options)
  get value(): string
  set value(string): void
  oninput: ((content: string) => void) => void
}

How to use

<body>
    <div id="wrapper"></div>
</body>
import PocketEditor from "pocket-editor"
import "pocket-editor/style.css"

const editor = new PocketEditor("#wrapper")

editor.value = "## Hello world !!"

editor.oninput((content) => {
    console.log(content)
})

Keybindings

Keybind Action
Ctrl + Shift + 1 To big heading
Ctrl + Shift + 2 To medium heading
Ctrl + Shift + 3 To small heading
Ctrl + Shift + 4 To bullet list
Ctrl + Shift + 5 To todo list
Ctrl + Shift + 6 To normal line

Ctrl is Cmd key on MacOS

Developement

# Install pnpm to use these scripts
npm i -g pnpm

# First install all
pnpm i -r

pnpm dev
pnpm preview
pnpm build