Skip to content

Commit

Permalink
Merge branch 'master' of github.com:Darginec05/Editor-Yopta into 131-…
Browse files Browse the repository at this point in the history
…feature-simplify-api-for-creating-custom-plugin
  • Loading branch information
Darginec05 committed May 26, 2024
2 parents ed6b56e + 4c15abd commit ee3e3e6
Show file tree
Hide file tree
Showing 39 changed files with 2,150 additions and 254 deletions.
14 changes: 14 additions & 0 deletions .github/FUNDING.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
# These are supported funding model platforms

github: [Darginec05] # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2]
patreon: # Replace with a single Patreon username
open_collective: # Replace with a single Open Collective username
ko_fi: # Replace with a single Ko-fi username
tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
polar: # Replace with a single Polar username
buy_me_a_coffee: # Replace with a single Buy Me a Coffee username
custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']
6 changes: 5 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<a href="https://www.producthunt.com/products/yoopta-edtior?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-yoopta&#0045;edtior" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=453627&theme=light" alt="Yoopta&#0032;Edtior - Open&#0045;source&#0032;WYSIWYG&#0032;editor&#0032;setting&#0032;a&#0032;new&#0032;standard | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

[![RepoRater](https://repo-rater.eddiehub.io/api/badge?owner=Darginec05&name=Yoopta-Editor)](https://repo-rater.eddiehub.io/rate?owner=Darginec05&name=Yoopta-Editor)
![npm](https://img.shields.io/npm/v/@yoopta/editor)
![license](https://img.shields.io/npm/l/@yoopta/editor)
![downloads](https://img.shields.io/npm/dm/@yoopta/editor)
[![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/Darginec05)

# Welcome to Yoopta-Editor@v4🎉

Expand Down Expand Up @@ -41,7 +45,7 @@ All of this is customizable, extensible, and easy to set up!

- Core

- **@yoopta/editor**
- [**@yoopta/editor**](https://github.com/Darginec05/Yoopta-Editor/blob/master/packages/core/editor/README.md)

- Plugins

Expand Down
334 changes: 259 additions & 75 deletions packages/core/editor/README.md
Original file line number Diff line number Diff line change
@@ -1,99 +1,283 @@
<h2 align="center">Yoopta-Editor v1 🎉</h2>
<p align="center">Yoopta-Editor - is an open source notion-like editor 💥</p>
<div align="center">
<img width="574" alt="Screen Shot 2023-01-25 at 16 04 29" src="https://user-images.githubusercontent.com/29093118/215324525-882bf403-646c-4267-bb5f-c0f37509ac09.png">
</div>
# Core package

<div align="center">
This is core package for Yoopta-Editor

</div>
### Installation

<p align="center">
<a target="_blank" rel="noopener noreferrer" href="https://yopage.co/blog/0zntIA46L4/W0epdDpnRa">Full docs</a> |
<a target="_blank" rel="noopener noreferrer" href="https://yopage.co/blog/0zntIA46L4/qOQqVaxxRZ">Get started</a> |
<a target="_blank" rel="noopener noreferrer" href="https://yopage.co/blog/0zntIA46L4/kUoZ2DoHnG">API</a> |
<a target="_blank" rel="noopener noreferrer" href="https://yopage.co/blog/0zntIA46L4/qo9nK4lDG5">FAQs</a> |
<a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/basic">Examples</a>
</p>
```bash
yarn add @yoopta/editor
```

### Features
### Usage

- 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 />`. <br>
`<YooptaEditor />` - it's for building beautiful content <br>
`<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
```tsx
import YooptaEditor, { createYooptaEditor, YooEditor } from '@yoopta/editor';
// plugins
import Paragraph from '@yoopta/paragraph';

### Install
const plugins = [Paragraph];

yarn add yoopta-editor
or
npm install yoopta-editor
const Editor = () => {
// create instance
const editor: YooEditor = useMemo(() => createYooptaEditor(), []);

### Peer dependencies
return <YooptaEditor editor={editor} plugins={plugins} />;
};
```

yarn add react react-dom slate slate-react
or
npm install react react-dom slate slate-react
### YooptaEditor component props

### Quickstart
```ts
type Props = {
/**
* Instance of editor
*/
editor: YooEditor;
/**
* Optional custom id. Useful for multiple instances
*/
id?: string;
/**
* List of plugins
*/
plugins: YooptaPlugin[];
/**
* List of marks from @yoopta/marks
*/
marks?: YooptaMark<any>[];
/**
* Optional value of editor. DEFAULT - [undefined]
*/
value?: YooptaContentValue;
/**
* Autofocus when editor is ready. DEFAULT - [true]
*/
autoFocus?: boolean;
/**
* Additional className for your needs. DEFAULT - [.yoopta-editor]
*/
className?: string;
/**
* Box for selection area to select by mouse several blocks. DEFAULT - [document]
*/
selectionBoxRoot?: HTMLElement | React.MutableRefObject<HTMLElement | null> | false;
children?: React.ReactNode;
tools?: Partial<Tools>;
placeholder?: string;
readOnly?: boolean;
width?: number | string;
};
```

```jsx
import { YooptaEditor } from '@yoopta/editor';
import { useState } from 'react';
### API from editor instance

import 'yoopta-editor/dist/index.css';
```tsx
type YooEditor<TNodes> = {
/**
* Unique identifier for the editor instance.
*/
id: string;

function App() {
const [editorValue, setEditorValue] = useState([]);
/**
* Inserts a single block of data into the editor.
*/
insertBlock: (data: YooptaBlockData, options?: YooptaEditorTransformOptions) => void;

const onChange = (data) => setEditorValue(data);
/**
* Inserts multiple blocks of data into the editor at once.
*/
insertBlocks: (blocks: YooptaBlockData[], options?: YooptaEditorTransformOptions) => void;

return (
<div>
<YooptaEditor value={editorValue} onChange={onChange} />
</div>
);
}
```
/**
* Splits the current block at the cursor's position.
*/
splitBlock: (options?: YooptaEditorTransformOptions) => void;

/**
* Updates a block with new data based on its id.
*/
updateBlock: (id: string, data: Partial<YooptaBlockData>) => void;

/**
* Deletes a block from the editor.
*/
deleteBlock: (options?: DeleteBlockOptions) => void;

/**
* Duplicates a block within the editor.
*/
duplicateBlock: (options?: DuplicateBlockOptions) => void;

/**
* Retrieves a block's data based on provided options.
*/
getBlock: (options?: YooptaEditorTransformOptions) => void;

/**
* Toggles a block's type in the editor.
*/
toggleBlock: (toBlockType?: string, options?: ToggleBlockOptions) => void;

/**
* Increases the depth of a block, typically used for nested structures like lists.
*/
increaseBlockDepth: (options?: YooptaEditorTransformOptions) => void;

/**
* Decreases the depth of a block.
*/
decreaseBlockDepth: (options?: YooptaEditorTransformOptions) => void;

/**
* Applies any staged changes to the editor.
*/
applyChanges: () => void;

/**
* Moves a block to a different position within the editor.
*/
moveBlock: (blockId: string, to: YooptaBlockPath) => void;

/**
* Focuses on a block based on its id.
*/
focusBlock: (id: string, options?: FocusBlockOptions) => void;

/**
* Current selection path in the editor.
*/
selection: YooptaBlockPath | null;

/**
* Array of currently selected block indices.
*/
selectedBlocks: number[] | null;

/**
* Holds the structured data representing the editor's content.
*/
children: Record<string, YooptaBlockData>;

### Check out other DEMO's 👇
/**
* Retrieves the entire editor's value.
*/
getEditorValue: () => TNodes;

- <a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/basic">Basic usage</a>
- <a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/offline">Offline mode</a>
- <a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/media">Working with media</a>
- <a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/render">Just rendering</a>
- <a target="_blank" rel="noopener noreferrer" href="https://yoopta-editor.vercel.app/styling">Custom styling</a>
<br>
<br>
/**
* Sets the editor's content.
*/
setEditorValue: (value: YooptaContentValue) => void;

<div style="padding: 10px">❗ Yoopta-Editor is on <span style="color: #007aff">BETA</span> 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 ☝ <br>
Read more about future plans <a target="_blank" rel="noopener noreferrer" href="https://yopage.co/blog/0zntIA46L4/5iK8VNiBI8">"What's next Lebovski?"</a>
</div>
<br>
<div style="padding: 10px; marging: 10px">
📝 This WYSIWYG editor build on top of <a target="_blank" rel="noopener noreferrer" href="https://github.com/ianstormtaylor/slate">Slate JS framework</a> <br>
💙 SlateJS - is the best tool for building rich-text editors. It has beautiful design and great API
</div>
/**
* Sets the selection path in the editor.
*/
setSelection: (path: YooptaBlockPath | null, options?: SetSelectionOptions) => void;

## Donation.
/**
* Sets or clears the selection for a block.
*/
setBlockSelected: (path: number[] | null, options?: BlockSelectedOptions) => void;

### If you like this open source project you can support me using <a href="https://buy.stripe.com/9AQcQo6G57dyexGeUU">Stripe link</a> 💙
/**
* Map of individual block editors.
*/
blockEditorsMap: YooptaPluginsEditorMap;

### Used by
/**
* Definitions of all blocks in the editor.
*/
blocks: YooptaBlocks;

- <a href="https://tapflow.co/">Tapflow - The perfect tool for building and selling online courses</a>
- <a href="https://equalize.team">Equalize.team</a>
- <a href="https://yopage.co/">Yopage.co - blogging platform</a>
/**
* Formatting options available in the editor.
*/
formats: YooptaFormats;

### License
/**
* Keyboard shortcuts configured for the editor.
*/
shortcuts: Record<string, YooptaBlock>;

MIT LICENSE
/**
* Registered plugins.
*/
plugins: Record<string, Plugin<string, unknown>>;

/**
* Subscribes to an event.
*/
on: (event: YooEditorEvents, fn: (payload: any) => void) => void;

/**
* Subscribes once to an event.
*/
once: (event: YooEditorEvents, fn: (payload: any) => void) => void;

/**
* Unsubscribes from an event.
*/
off: (event: YooEditorEvents, fn: (payload: any) => void) => void;

/**
* Emits an event.
*/
emit: (event: YooEditorEvents, payload: any) => void;

/**
* Indicates if the editor is read-only.
*/
readOnly: boolean;

/**
* Returns whether the editor is focused.
*/
isFocused: () => boolean;

/**
* Blurs the editor, removing focus.
*/
blur: (options?: EditorBlurOptions) => void;

/**
* Focuses the editor.
*/
focus: () => void;
};
```

### Hooks from @yoopta/editor

```ts
/**
* Hook to access the Yoopta editor instance. Must be used in children components of <YooptaEditor />.
* @returns {YooEditor} The editor instance.
*/
useYooptaEditor();

/**
* Hook to check if the editor is in read-only mode.
* @returns {boolean} True if the editor is read-only.
*/
useYooptaReadOnly();

/**
* Hook to check if the editor is focused.
* @returns {boolean} True if the editor is focused.
*/
useYooptaFocused();

/**
* Hook to get the data for a specific block by its ID.
* @param {string} blockId The ID of the block.
* @returns {YooptaBlockData | undefined} The data of the block, or undefined if not found.
*/
useBlockData(blockId);

/**
* Hook to get the options for a plugin.
* @template TOptions The type of options expected.
* @param {string} blockType The block type associated with the plugin.
* @returns {PluginOptions<TOptions>} The options of the plugin.
*/
useYooptaPluginOptions<TOptions>(blockType);
```
Loading

0 comments on commit ee3e3e6

Please sign in to comment.