slate-vue3

slate-react library implemented with vue3

How to use?

1. install slate-vue3

npm install slate-vue3

2. now, you can use it in vue-sfc

<script setup lang="ts">
import { withDOM, Slate, Editable, defaultRenderLeaf, defaultRenderPlaceHolder, createEditor, withHistory } from "slate-vue"
import { h } from "vue";

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

<template>
  <Slate :editor="editor" :render-element="renderElement" :render-leaf="defaultRenderLeaf"
    :render-placeholder="defaultRenderPlaceHolder">
    <Editable />
  </Slate>
</template>

3. check out the live demo of all of the examples

Why use it?

• The most comprehensive rich text feature customization, following slate-react
• Use vue internal response implementation to reduce the number of re-renderings
• You can easily use vue-devtools to debug in a vue project
• This library provides the same usage as slate-react

Hooks

useComposing

const useComposing : ( ) => Ref

import { useComposing } from 'slate-vue'

const composing = useComposing()

Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events.

useFocused

const useFocused : ( ) => Ref

import { useFocused } from 'slate-vue'

const focused = useFocused()

Get the current focused state of the editor.

useReadOnly

const useReadOnly : ( ) => Ref

import { useReadOnly } from 'slate-vue'

const readonly = useReadOnly()

Get the current readOnly state of the editor.

useSelected

const useSelected : ( ) => ComputedRef

import { useSelected } from 'slate-vue'

const selected = useSelected()

Get the current selected state of an element.

useEditor

const useEditor : ( ) => Editor

import { useEditor } from 'slate-vue'

const editor = useEditor()

Get the current editor object from the context. Context whenever changes occur in the editor.

useSelection

const useSelection : ( ) => ComputedRef

import { useSelection } from 'slate-vue'

const selection = useSelection()

Get the current editor selection from the context.

useInheritRef

const useInheritRef : ( attr: HTMLAttribute ) => HTMLAttribute

const renderElement = (props: RenderElementProps) => {
  const { attributes, children, element } = props
  switch (element.type) {
    case 'image':
      return h(ImageComp, { element, ...useInheritRef(attributes) }, () => children)
    default:
      return h('p', attributes, children)
  }
}

Automatically bind ref to the real node when the component is mounted，This is important when rendering element nodes directly

Packages

• slate slate core logic, update synchronously with slate
• slate-dom Implementation of slate on dom, update synchronously with slate-dom
• slate-vue Vue components for rendering slate editors
• slate-history Provide undo redo functions, replace Weakmap to UnProxyWeakmap
• share-tools for special processing of Proxy data, obtain the raw pointer, isPlainObject declare

compact files of slate

reactive implement

• packages/slate/src/interfaces/text.ts 115:115
• packages/slate/src/create-editor.ts 94:94
• packages/slate/src/transforms-node/set-nodes.ts 18:18
• packages/slate/src/interfaces/text.ts 116:116

remove immer

• packages/slate/src/interfaces/node.ts 365:365
• packages/slate/src/interfaces/point.ts 103:103
• packages/slate/src/interfaces/range.ts 224:224
• packages/slate/src/interfaces/transforms/general.ts 322:333

rewrite implement for WeakMap

• packages/share-tools/index.ts
• packages/slate-dom/src/utils/weak-maps.ts

import types from globalThis in slate-dom

• packages/slate-dom/src/index.ts
• packages/slate-dom/src/plugin/dom-editor.ts
• packages/slate-dom/src/utils/dom.ts

other compact

• packages/slate/src/core/normalize-node.ts
• packages/slate-dom/src/plugin/dom-editor.ts 421:441