slate-vue3

slate-react library implemented with vue3

Why use it?

• :sparkles: Highly customizable features, use slate core at the bottom level
• :zap: Use vue3 for high-performance rendering, and later connect to vapor mode
• :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 { h } from "vue";
import {
  Slate,
  Editable,
  defaultRenderLeaf,
  defaultRenderPlaceHolder,
} from "slate-vue3";
import { createEditor } from "slate-vue3/core";
import { withDOM } from "slate-vue3/dom";
import { withHistory } from "slate-vue3/history";

const initialValue = [
  {
    type: "paragraph",
    children: [{ text: "Let's start" }],
  },
];
const renderElement = ({ attributes, children }) =>
  h("p", attributes, children);
const editor = withHistory(withDOM(createEditor()));
editor.children = initialValue;
</script>

<template>
  <Slate
    :editor="editor"
    :render-element="renderElement"
    :render-leaf="defaultRenderLeaf"
    :render-placeholder="defaultRenderPlaceHolder"
  >
    <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/core		slate's core data model logic.
slate-vue3/dom		DOM implementation of slate
slate-vue3/history		a plugin that adds undo/redo history to slate.
slate-vue3/hyperscript		a hyperscript tool to write JSX slate documents!
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.

FAQ

1. Why do I have to pass renderFunction into component ?

This ensures that your rich text is as expected, and slate-vue3 provides some default rendering functions, you can directly use the default rendering behavior

2. Can I use jsx in slate-vue3 ?

Of coures yes, but we do not recommend it unless you have already configured jsx in the project, as a branch, using the h function directly is already simple enough

3. Why do rendering functions not use vue components ?

Vue uses lazy updates, rendering with components generates additional state, which can cause unexpected results during updates, it would be better to use functions as branches directly