npm.io
1.1.1 • Published 2 years ago

eddies

Licence
—
Version
1.1.1
Deps
23
Size
204 kB
Vulns
1
Weekly
0
Stars
12
SummaryDependencyVersions

Logo

Eddies

Fully featured, modern and extensible editor

Quick start

pnpm install eddies

Why Eddies?

The reason to use Eddies is very easy implementation. For those who don't want to build the whole editor from scratch, Eddies allows you to use editor with one line of code. Eddies has support for different types of markup (bold, italic, underline, etc.), also has visual components that make writing easier (bubble menu, text counter, etc.) and extensions (syntax highlighting, emojis). You can style the editor very easily with css variables or classes.

Using editor:

import { Editor } from "eddies";

export default function Page() {
  return (
    <div className="m-5">
      <Editor />
    </div>
  );
}

Props

Prop Type Description
className? string The class name to use for the editor.
theme? "light" | "dark" Defines the editor's theme.
showCharacterCount? boolean Show character count.
limit? number The limit of characters.
menu? boolean Shows menu above the editor.
bubbleMenuItems? BubbleMenuItem[] Items that will be displayed in bubble menu.
slashMenuCommands? SlashCommandItem[] Slash menu commands.
onReady? (editor: EddiesEditor) => void Triggered when the editor is ready.
onContentChange? (editor: EddiesEditor) => void Triggered on every content change.
initialValue? Content Content shown every time the editor is created.
extensions Extensions Extensions to add to the editor.
placeholder? PlaceholderOptions The placeholder text when the editor is empty.
isEditable? boolean Disables the editor.
autofocus? FocusPosition Auto focus settings
keyboardShortcuts? Record<string, KeyboardShortcutCommand> Custom keyboard shortcuts.
tiptapOptions? Partial<TiptapEditorOptions> Editor props to pass to the editor.

MIT malezjaa

Logo by iconixar

Keywords

editormarkdownhtmltiptaptypescript