diff --git a/README.md b/README.md index c9610ec0f..929d6b2dc 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,142 @@ This editor empowers you to seamlessly customize, extend, and tailor its behavio - The soul invested in the development of this editor 💙 - ...and other features -## Examples +## Getting Started + +First install the peer dependencies and the Yoopta core package with at least one plugin + +```bash +## slate and slate-react - peer dependecies +## @yoopta/editor - core package +## @yoopta/paragraph - default plugin +yarn add slate slate-react @yoopta/editor @yoopta/paragraph +# or +npm install slate slate-react @yoopta/editor @yoopta/paragraph +``` + +### Plugins: + +```jsx +import YooptaEditor from '@yoopta/editor'; +import Paragraph from '@yoopta/paragraph'; +import { useState } from 'react'; + +// List of plugins should be defined outside component +const plugins = [Paragraph]; + +// Your custom styles +const styles = { width: 640, margin: '0 auto', padding: '40px 10px' }; + +export default function Editor() { + const [value, setValue] = useState([]); + + return ( +
+ setValue(val)} + plugins={plugins} + placeholder="Type text.." + /> +
+ ); +} +``` + +Here is list of available plugins + +- @yoopta/paragraph +- @yoopta/blockquote +- @yoopta/code +- @yoopta/embed +- @yoopta/image +- @yoopta/link +- @yoopta/file +- @yoopta/callout +- @yoopta/video +- @yoopta/lists +- @yoopta/headings + +***[Check code with plugins](https://github.com/Darginec05/Yopta-Editor/blob/master/web/src/examples/withBasicExample.tsx#L27)*** + +### Tools +Yoopta-Editor provides useful tools that can help you when working with the editor + +```jsx +// IMPORT TOOLS +import LinkTool from '@yoopta/link-tool'; +import ActionMenu from '@yoopta/action-menu-list'; +import Toolbar from '@yoopta/toolbar'; + +// Tools should be defined outside component +const TOOLS = { + Toolbar: , + ActionMenu: , + LinkTool: , +}; + +export default function Editor() { + const [value, setValue] = useState([]); + + return ( +
+ setValue(val)} + plugins={plugins} + placeholder="Type text.." + tools={TOOLS} + /> +
+ ); +} +``` + +Here is list of available tools + +- @yoopta/link-tool +- @yoopta/action-menu-list +- @yoopta/toolbar +- *@yoopta/chat-gpt-assistant* - **soon** + +***[Check code with tools](https://github.com/Darginec05/Yopta-Editor/blob/master/web/src/examples/withBasicExample.tsx#L76)*** +### Marks +Marks are simple text formatters + +```jsx +// IMPORT MARKS +import { Bold, Italic, CodeMark, Underline, Strike } from '@yoopta/marks'; + +export default function Editor() { + const [value, setValue] = useState([]); + const MARKS = [Bold, Italic, CodeMark, Underline, Strike]; + + return ( +
+ setValue(val)} + placeholder="Type text.." + plugins={plugins} + tools={TOOLS} + marks={MARKS} + /> +
+ ); +} +``` + +Here is list of available marks from **@yoopta/marks** package + +- Bold +- Italic +- CodeMark +- Underline +- Strike + +***[Check code with marks](https://github.com/Darginec05/Yopta-Editor/blob/master/web/src/examples/withBasicExample.tsx#L85)*** + +## Examples - DEMO's In this section, we provide you with some examples of using the Yoopta-Editor in your projects. These examples will help you get started quickly and show you how easy it is to integrate and customize the editor to your needs.