slate-vue3

[!IMPORTANT] 🚧 Major Refactor Notice

This project has undergone a large-scale refactor. The core library and all surrounding ecosystem packages have been fully replaced with implementations identical to the official Slate. If you are on an older version, please read the migration guide carefully — legacy APIs may no longer be compatible.

Why use it?

1. :sparkles: Highly customizable features, use slate core at the bottom level
2. :zap: Use vue3 for high-performance rendering, and later connect to vapor mode
3. :coffee: The latest version of the core, design tends to be stable

How to use?

1. Install slate-vue3

npm install slate-vue3

2. Now, you can use it in vue-sfc :point_right: live demo

<script setup lang="ts">
import { Slate, Editable, createReactiveEditor } from "slate-vue3";

const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "Let's start" }],
  },
];
const editor = createReactiveEditor();
editor.children = initialValue;
</script>

<template>
  <Slate :editor>
    <Editable />
  </Slate>
</template>

Examples

To get a sense for how you might use Slate, check out a few of the examples:

• Rich text — the features you'd expect from a basic editor.
• Collaborative editing — to achieve collaborative editing and cursor.
• Markdown preview — to add key handlers for Markdown-like shortcuts.
• Inlines — wrap text in inline nodes with associated data.
• Images — to use void (text-less) nodes to add images.
• Hovering toolbar — a hovering toolbar can be implemented.
• Tables — to nest blocks to render more advanced components.
• Paste HTML — to use an HTML serializer to handle pasted HTML.
• Mentions — to use inline void nodes for simple @-mentions.
• See all the examples...

If you have an idea for an example that shows a common use case, pull request it!

Documentation

This document serves only as a supplement to the slate document and mainly provides case studies and differences between slate-vue3 and slate-react

If you're using slate for the first time, check out the Getting Started walkthroughs and the Concepts to familiarize yourself with slate's architecture and mental models.

• Walkthroughs
• Concepts
• FAQ
• Resources

Sub packages

Due to the complexity of maintaining multiple packages and the lack of reusability of sub packages in other frameworks, slate-vue3 does not use workspace and only performs sub packaging during packaging

Package	Version	Description
slate-vue3/dom		DOM implementation of slate
slate-vue3/yjs		integration of slate-yjs

Contributing!

Welcome to provide suggestions on the issue, it would be even better if PR could be mentioned along with it

slate-vue3 is MIT-licensed.