Add documentation for using Milkdown with various frameworks
- Created a new document for using components in Milkdown. - Added a guide for using plugins in Milkdown, including toggling plugins programmatically and listing official plugins. - Introduced a recipe for integrating Milkdown with Angular, including installation steps and component creation. - Added a recipe for using Milkdown with Next.js, detailing installation and component setup. - Created a guide for integrating Milkdown with NuxtJS, including installation and component creation. - Added a comprehensive guide for using Milkdown with React, covering both Crepe and core Milkdown usage. - Introduced a recipe for SolidJS integration with Milkdown, including installation and component creation. - Added a guide for using Milkdown with Svelte, detailing installation and component setup. - Created a comprehensive guide for integrating Milkdown with Vue, covering both Crepe and core Milkdown usage. - Added a recipe for using Milkdown with Vue2, including installation and component creation.
This commit is contained in:
28
milkdown-docs/plugin/using-components.md
Normal file
28
milkdown-docs/plugin/using-components.md
Normal file
@@ -0,0 +1,28 @@
|
||||
# Using Components
|
||||
|
||||
Components are features work out of the box that built on top of plugins.
|
||||
Each component is a separate module. You can use them by importing them from `@milkdown/kit/component/*`.
|
||||
All components can be used just like plugins.
|
||||
|
||||
```ts
|
||||
import { imageBlock } from "@milkdown/kit/component/image-block";
|
||||
import { Editor } from "@milkdown/kit/core";
|
||||
|
||||
Editor.make().use(/* some other plugins */).use(imageBlock).create();
|
||||
```
|
||||
|
||||
Components are designed to be headless, which means they are not opinionated about the UI.
|
||||
You can use them to build your own editor UI. Components are built by web components and can be used in any framework.
|
||||
|
||||
---
|
||||
|
||||
# List of Components
|
||||
|
||||
| Name | Description |
|
||||
| ------------------------------------------------ | ---------------------------------------------------------- |
|
||||
| [Code Block](/docs/api/component-code-block) | Render code by [Codemirror](https://codemirror.net/) |
|
||||
| [Image Block](/docs/api/component-image-block) | Render an image as a block |
|
||||
| [Image Inline](/docs/api/component-image-inline) | Provide placeholder and uploader features for inline image |
|
||||
| [Link Tooltip](/docs/api/component-link-tooltip) | Provide edit and preview feature for link |
|
||||
| [List Item](/docs/api/component-list-item-block) | Renderers bullet, ordered and task list by custom renderer |
|
||||
| [Table Block](/docs/api/component-table-block) | Render table and provides table editing features |
|
||||
Reference in New Issue
Block a user