JSPM

Package Exports

@yoopta/editor
@yoopta/editor/dist/index.es.js
@yoopta/editor/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@yoopta/editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Yoopta-Editor v1 🎉

Yoopta-Editor - is an open source notion-like editor 💥

Full docs | Get started | API | FAQs | Examples

Features

Triggering by "/" to show list of elements and search needed element by typing
Drag and drop beetween elements
Redo/Undo your changes (Ctrl-Z/Ctrl-V)
Offline ready mode
Shortcuts
A cool representation of the data in JSON format, so you can easily save the content data to the database and validate You can import two plugins from library: <YooptaEditor /> and <YooptaRender />.
<YooptaEditor /> - it's for building beautiful content
<YooptaRender /> - it's just for rendering from your saved data, without any editor tools and libraries, so it make you page loading faster
Custom styling ...and other

Install

yarn add yoopta-editor
or
npm install yoopta-editor

Peer dependencies

yarn add react react-dom slate slate-react
or
npm install react react-dom slate slate-react

Quickstart

import { YooptaEditor } from '@yoopta/editor';
import { useState } from 'react';

import 'yoopta-editor/dist/index.css';

function App() {
  const [editorValue, setEditorValue] = useState([]);

  const onChange = (data) => setEditorValue(data);

  return (
    <div>
      <YooptaEditor value={editorValue} onChange={onChange} />
    </div>
  );
}

Check out other DEMO's 👇

❗ Yoopta-Editor is on BETA version now. The core functionality works, but you may encounter some bugs. I have big plans for the v2 version with a lot of cool features and improvements. Let's build together the best open source editor ever ☝
Read more about future plans "What's next Lebovski?"

📝 This WYSIWYG editor build on top of Slate JS framework
💙 SlateJS - is the best tool for building rich-text editors. It has beautiful design and great API

@yoopta/editor

Package Exports

Readme

Yoopta-Editor v1 🎉

Features

Install

Peer dependencies

Quickstart

Check out other DEMO's 👇

Donation.

If you like this open source project you can support me using Stripe link 💙

Used by

License