slate-vue3 0.1.4 → 0.1.6

package/README.md

@@ -17,235 +17,73 @@
 </p>
 <br/>
 
-
 # Why use it?
-1. :sparkles: Highly customizable features, use slate core at the bottom level  
-2. :zap: The latest version of the core, use vue to reduce the number of re-renderings  
+
+1. :sparkles: Highly customizable features, use slate core at the bottom level
+2. :zap: The latest version of the core, use vue to reduce the number of re-renderings
 3. :coffee: This library provides the same usage as slate-react, design tends to be stable
-4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
+4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/examples) of all of the examples
 
 # How to use?
 
 ## 1. Install slate-vue3
+
 ```sh
 npm install slate-vue3
 ```
-## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/)
+
+## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/examples/rich-text)
+
 ```vue
 <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"
+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(initialValue)))
+    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">
+  <Slate
+    :editor="editor"
+    :render-element="renderElement"
+    :render-leaf="defaultRenderLeaf"
+    :render-placeholder="defaultRenderPlaceHolder"
+  >
     <Editable />
   </Slate>
 </template>
 ```
 
-# Component Props
-## Slate
-### editor
-> slate-editor instance, add DOM specific behaviors to the editor
-```typescript
-const initialValue: Descendant[] = [{
-  type: 'paragraph',
-  children: [ { text: 'This is editable plain text, just like a <textarea>!' } ]
-}]
-const editor: DOMEditor = withDOM(createEditor(initialValue))
-```
-
-### decorate
-> another type of text-level formatting, split text into leaves
-```typescript
-function (entry: NodeEntry) => DecoratedRange[]
-```
-
-### renderElement
-> a function used to render a custom component for a specific type of Element node in the Slate.js document model
-```typescript
-export interface RenderElementProps {
-  children: VNode
-  element: Element
-  attributes: HTMLAttributes & {
-    "data-slate-node": "element"
-    "data-slate-inline"?: true
-    "data-slate-void"?: true
-    dir?: "rtl"
-    ref: any
-  };
-}
-
-function renderElement (props: RenderElementProps) => VNode
-```
-
-### renderLeaf
-> customize the rendering of leaf nodes in the document tree of your Slate editor
-```typescript
-export interface RenderLeafProps {
-  children: VNode
-  leaf: Text
-  text: Text
-  attributes: HTMLAttributes & {
-    "data-slate-leaf": true
-  };
-}
-```
-
-### renderPlaceholder
-> customize how the placeholder of the Slate.js Editable component is rendered when the editor is empty
-```typescript
-export interface RenderPlaceholderProps {
-  children?: string
-  attributes: HTMLAttributes & VNodeProps & {
-    "data-slate-placeholder": boolean
-    dir?: "rtl"
-  };
-}
-```
-
-## Editable
-> customize style of editablearea, you can inherient other HTMLAttribute on it
-```typescript
-interface EditableProps extends HTMLAttributes {
-  role?: string
-  readOnly: boolean
-  placeholder?: string
-  style?: CSSProperties
-  scrollSelectionIntoView: (
-    editor: DOMEditor,
-    domRange: globalThis.Range
-  ) => void
-  is: string
-}
-```
-
-# Component Emits
-
-## onchange
-> any change in slate will trigger it
-```typescript
-const onchange: (event: { operation?: Operation }) => void
-```
-
-## onvaluechange
-> slate children change in slate will trigger it
-```typescript
-const onvaluechange: (event: { operation?: Operation }) => void
-```
-
-## onselectionchange
-> slate selection change in slate will trigger it
-```typescript
-const onselectionchange: (event: { operation?: Operation }) => void
-```
-
-# Hooks in slate-vue3
-
-## [useComposing](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-composing.ts)
-> Get the current composing state of the editor. It deals with compositionstart, compositionupdate, compositionend events
-```typescript
-const useComposing: () => Ref<boolean, boolean>
-
-const composing = useComposing()
-```
-
-## [useFocused](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-focus.ts)
-> Get the current focused state of the editor
-```typescript
-const useFocused: () => Ref<boolean, boolean>
-
-const focused = useFocused()
-```
-
-## [useReadOnly](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-read-only.ts)
-> Get the current readOnly state of the editor
-```typescript
-const useReadOnly: () => Ref<boolean, boolean>
-
-const readonly = useReadOnly()
-```
-
-## [useSelected](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selected.ts)
-> Get the current selected state of an element
-```typescript
-const useSelected: () => ComputedRef<boolean>
-
-const selected = useSelected()
-```
-
-## [useEditor](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-editor.ts)
-> Get the current editor object from the context. Context whenever changes occur in the editor
-```typescript
-const useEditor: () => DOMEditor
-
-const editor = useEditor()
-```
-
-## [useSelection](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-selection.ts)
-> Get the current editor selection from the context
-
-```typescript
-const useSelection: () => ComputedRef<BaseSelection>
-
-const selection = useSelection()
-```
-
-
-## [useInheritRef](https://github.com/Guan-Erjia/slate-vue3/blob/master/packages/slate-vue/src/hooks/use-inherit-ref.ts)
-> Automatically bind ref to the real node when the component is mounted，This is important when rendering element nodes directly
-```typescript
-const useInheritRef: (attribute: VNodeProps) => VNodeProps
-
-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)
-  }
-}
-```
-
 # FAQ
+
 ### 1. Why do I have to pass renderFunction into <Slate /> component ?
-This ensures that your rich text is as expected, and slave-vue3 provides some default rendering functions, you can directly use the default rendering behavior
+
+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
-
-# Directory Structure
 
-- [slate](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate)
-  slate core logic, update synchronously with slate
-- [slate-dom](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-dom)
-  Implementation of slate on dom, update synchronously with slate-dom
-- [slate-vue](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-vue)
-  Vue components for rendering slate editors
-- [slate-history](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-history)
-  Same with slate-history
-- [slate-hyperscript](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/slate-hyperscript)
-  Same with slate-history
-- [share-tools](https://github.com/Guan-Erjia/slate-vue3/tree/master/packages/share-tools)
-  for special processing of Proxy data, obtain the raw pointer, isPlainObject declare
+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
 
 # Compact Slate
 

package/dist/core.js

@@ -1,4 +1,4 @@
-import { a6, a7, a8, d, e, f, a, h, aj, c, i, j, k, ap, ak, l, m, o, p, q, g, b, r, t, u, v, w, x, aq, y, a9, z, A, B, C, D, E, F, G, H, I, J, aa, K, ab, al, ac, L, M, N, O, n, P, S, Q, R, V, T, U, W, X, _, Y, Z, $, ad, am, ae, a0, an, ao, a5, s, af, a1, a2, a3, ag, ah, a4, ai } from "./create-editor-BFFWnObb.js";
+import { a6, a7, a8, d, e, f, a, h, aj, c, i, j, k, ap, ak, l, m, o, p, q, g, b, r, t, u, v, w, x, aq, y, a9, z, A, B, C, D, E, F, G, H, I, J, aa, K, ab, al, ac, L, M, N, O, n, P, S, Q, R, V, T, U, W, X, _, Y, Z, $, ad, am, ae, a0, an, ao, a5, s, af, a1, a2, a3, ag, ah, a4, ai } from "./create-editor-C4ZucdMc.js";
 import { E as E2, a as a10, N as N2, O as O2, P as P2, b as b2, R as R2, S as S2, T as T2, c as c2, i as i2 } from "./batch-dirty-paths-X-eP3GRL.js";
 import { L as L2, S as S3 } from "./location-CeJ1rJSq.js";
 export {

package/dist/{create-editor-BFFWnObb.js → create-editor-C4ZucdMc.js}

@@ -2393,9 +2393,9 @@ const wrapNodes = (editor, element, options = {}) => {
     }
   });
 };
-const createEditor = (children) => {
+const createEditor = () => {
   const editor = reactive({
-    children,
+    children: [],
     operations: [],
     selection: null,
     marks: null,

package/dist/hyperscript.js

@@ -2,7 +2,7 @@ var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
 import { t as toRawWeakMap, T as Text, R as Range, N as Node, a as Element, d as isPlainObject } from "./batch-dirty-paths-X-eP3GRL.js";
-import { c as createEditor$1 } from "./create-editor-BFFWnObb.js";
+import { c as createEditor$1 } from "./create-editor-C4ZucdMc.js";
 import "vue";
 const ANCHOR = new toRawWeakMap();
 const FOCUS = new toRawWeakMap();
@@ -155,7 +155,7 @@ const createEditor = (makeEditor) => (tagName, attributes, children) => {
   }
   const descendants = resolveDescendants(otherChildren);
   const selection = {};
-  const editor = makeEditor(descendants);
+  const editor = makeEditor();
   Object.assign(editor, attributes);
   editor.children = descendants;
   for (const [node, path] of Node.texts(editor)) {

package/dist/slate/create-editor.d.ts

@@ -1,5 +1,5 @@
-import { Editor, Descendant } from './';
+import { Editor } from './';
 /**
  * Create a new Slate `Editor` object.
  */
-export declare const createEditor: (children: Descendant[]) => Editor;
+export declare const createEditor: () => Editor;

package/dist/slate-hyperscript/creators.d.ts

@@ -45,6 +45,6 @@ export declare function createText(tagName: string, attributes: {
 /**
  * Create a top-level `Editor` object.
  */
-export declare const createEditor: (makeEditor: (desc: Descendant[]) => Editor) => (tagName: string, attributes: {
+export declare const createEditor: (makeEditor: () => Editor) => (tagName: string, attributes: {
     [key: string]: any;
 }, children: any[]) => Editor;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -67,11 +67,9 @@
     "vue": "^3.5.13"
   },
   "devDependencies": {
+    "@faker-js/faker": "^9.6.0",
     "@liveblocks/client": "^2.21.0",
     "@liveblocks/yjs": "^2.21.0",
-    "y-protocols": "^1.0.6",
-    "yjs": "^13.6.24",
-    "@faker-js/faker": "^9.6.0",
     "@playwright/test": "^1.50.1",
     "@testing-library/vue": "^8.1.0",
     "@types/is-hotkey": "^0.1.10",
@@ -84,11 +82,17 @@
     "is-url": "^1.2.4",
     "jsdom": "^26.0.0",
     "prismjs": "^1.30.0",
+    "remark-gfm": "^4.0.1",
+    "remark-parse": "^11.0.0",
+    "remark-slate-transformer": "^0.9.0",
     "typescript": "~5.8.2",
+    "unified": "^11.0.5",
     "vite": "^6.2.3",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.5",
-    "vue-router": "^4.5.0"
+    "vue-router": "^4.5.0",
+    "y-protocols": "^1.0.6",
+    "yjs": "^13.6.24"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -97,6 +101,7 @@
     "type": "git",
     "url": "git+https://github.com/Guan-Erjia/slate-vue3.git"
   },
+  "homepage": "https://guan-erjia.github.io/slate-vue3",
   "keywords": [
     "slate-vue3",
     "slate-vue",