-
-
Notifications
You must be signed in to change notification settings - Fork 132
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' of github.com:Darginec05/Editor-Yopta into 131-…
…feature-simplify-api-for-creating-custom-plugin
- Loading branch information
Showing
39 changed files
with
2,150 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
``` |
Oops, something went wrong.