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

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d3f085c · Mar 25, 2025
Mar 17, 2025
Mar 17, 2025
Mar 25, 2025
Mar 23, 2025
Mar 23, 2025
Mar 17, 2025
Sep 9, 2024
Jul 5, 2024
Mar 23, 2025
Jul 9, 2024
Mar 25, 2025
Mar 17, 2025
Mar 25, 2025
Mar 29, 2024

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