slate-vue3 0.0.24 → 0.0.26

package/README.md

@@ -3,27 +3,46 @@
 <p align="center">
   slate-<a style="color: #087ea4" href="https://react.dev/">react</a> library implemented with <a style="color: #42b883" href="https://vuejs.org/">vue3</a>
 </p>
+
+<p align="center">
+  <a href="https://unpkg.com/slate-vue3/dist/index.js">
+    <img src="http://img.badgesize.io/https://unpkg.com/slate-vue3/dist/index.js?compression=gzip&amp;label=size">
+  </a>
+  <a href="https://join.slack.com/t/slate-js/shared_invite/zt-f8t986ip-7dA1DyiqPpzootz1snKXkw">
+    <img src="https://img.shields.io/badge/slack-slate--js-brightgreen.svg?logo=slack">
+  </a>
+  <a href="./packages/slate-vue3/package.json">
+    <img src="https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=version&colorB=007ec6">
+  </a>
+</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  
+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
+
 # How to use?
 
-## 1. install slate-vue3
+## 1. Install slate-vue3
 ```sh
 npm install slate-vue3
 ```
-## 2. now, you can use it in vue-sfc
+## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/)
 ```vue
 <script setup lang="ts">
 import { withDOM, Slate, Editable, defaultRenderLeaf, defaultRenderPlaceHolder, createEditor, withHistory } from "slate-vue3"
-import { h } from "vue";
+import { h } from "vue"
 
 const initialValue = [
   {
-    type: 'paragraph',
-    children: [{ text: 'Let us start'}]
+    type: "paragraph",
+    children: [{ text: "Let's start"}]
   }
 ]
-const renderElement = ({ attributes, children }) => h('p', attributes, children)
+const renderElement = ({ attributes, children }) => h("p", attributes, children)
 const editor = withHistory(withDOM(createEditor(initialValue)))
 </script>
 
@@ -34,71 +53,151 @@ const editor = withHistory(withDOM(createEditor(initialValue)))
   </Slate>
 </template>
 ```
-## 3. check out the :point_right:[**live demo**](https://guan-erjia.github.io/slate-vue3/) of all of the examples
-![example](https://guan-erjia.github.io/slate-vue3/example.png)
 
-# 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  
-3. :coffee: This library provides the same usage as slate-react, design tends to be stable
+# 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))
+```
 
-# Hooks
-## [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.
+### 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
+  };
+}
+```
 
-const useComposing : ( ) => Ref<boolean>
-```javascript
-import { useComposing } from 'slate-vue3'
+### 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
+export 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: Descendant[]) => void
+```
+
+## onvaluechange
+> slate children change in slate will trigger it
+```typescript
+const onvaluechange: (event: Descendant[]) => void
+```
+
+## onselectionchange
+> slate selection change in slate will trigger it
+```typescript
+const onselectionchange: (event: Selection) => 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.
-
-const useFocused : ( ) => Ref<boolean>
-```javascript
-import { useFocused } from 'slate-vue3'
+> 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.
-
-const useReadOnly : ( ) => Ref<boolean>
-```javascript
-import { useReadOnly } from 'slate-vue3'
+> 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.
-
-const useSelected : ( ) => ComputedRef<boolean>
-```javascript
-import { useSelected } from 'slate-vue3'
+> 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.
-
-const useEditor : ( ) => Editor
-```javascript
-import { useEditor } from 'slate-vue3'
+> 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.
+> Get the current editor selection from the context
 
-const useSelection : ( ) => ComputedRef<Selection>
-```javascript
-import { useSelection } from 'slate-vue3'
+```typescript
+const useSelection: () => ComputedRef<BaseSelection>
 
 const selection = useSelection()
 ```
@@ -106,9 +205,11 @@ 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 & {
+    inheritRef?: VNodeRef
+};
 
-const useInheritRef : ( attribute: HTMLAttributes ) => HTMLAttributes
-```javascript
 const renderElement = (props: RenderElementProps) => {
   const { attributes, children, element } = props
   switch (element.type) {

package/dist/index.d.ts

@@ -506,9 +506,6 @@ export declare type DOMText = globalThis.Text;
 
 export declare const edges: EditorInterface['edges'];
 
-/**
- * Editable.
- */
 export declare const Editable: DefineComponent<    {
 role?: string | undefined;
 readOnly: boolean;
@@ -1563,12 +1560,6 @@ export declare const IS_FOCUSED: toRawWeakMap<Editor, boolean>;
 
 export declare const IS_IOS: boolean;
 
-/**
- * Two weak maps that allow us rebuild a path given a node. They are populated
- * at render time such that after a render occurs we can always backtrack.
- */
-export declare const IS_NODE_MAP_DIRTY: toRawWeakMap<Editor, boolean>;
-
 /**
  * Weak maps for storing editor-related state.
  */
@@ -1726,6 +1717,10 @@ export { Node_2 as Node }
 
 export declare const NODE_TO_ELEMENT: toRawWeakMap<Node_2, HTMLElement>;
 
+/**
+ * Two weak maps that allow us rebuild a path given a node. They are populated
+ * at render time such that after a render occurs we can always backtrack.
+ */
 export declare const NODE_TO_INDEX: toRawWeakMap<Node_2, number>;
 
 export declare const NODE_TO_KEY: toRawWeakMap<Node_2, Key>;

package/dist/index.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);
 var _a, _b;
-import { isProxy, toRaw, nextTick, reactive, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, onBeforeUpdate, onBeforeUnmount, h, watch, renderList, onUpdated, useAttrs, getCurrentInstance } from "vue";
+import { isProxy, toRaw, nextTick, reactive, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, onBeforeUpdate, onBeforeUnmount, h, watch, renderList, Fragment, onUpdated, useAttrs, getCurrentInstance } from "vue";
 const SLATE_USE_EDITOR = Symbol("SLATE_USE_EDITOR");
 const SLATE_USE_DECORATE = Symbol("SLATE_USE_DECORATE");
 const SLATE_USE_SELECTED = Symbol("SLATE_USE_SELECTED");
@@ -1792,12 +1792,12 @@ function last$1(array) {
   var length = array == null ? 0 : array.length;
   return length ? array[length - 1] : void 0;
 }
-function parent$1(object, path2) {
+function parent$2(object, path2) {
   return path2.length < 2 ? object : baseGet(object, baseSlice(path2, 0, -1));
 }
 function baseUnset(object, path2) {
   path2 = castPath(path2, object);
-  object = parent$1(object, path2);
+  object = parent$2(object, path2);
   return object == null || delete object[toKey(last$1(path2))];
 }
 function customOmitClone(value) {
@@ -3630,7 +3630,7 @@ const normalize = (editor, options = {}) => {
     }
   });
 };
-const parent = (editor, at, options = {}) => {
+const parent$1 = (editor, at, options = {}) => {
   const path2 = Editor.path(editor, at, options);
   const parentPath = Path.parent(path2);
   const entry = Editor.node(editor, parentPath);
@@ -5106,7 +5106,7 @@ const createEditor = (children) => {
     node: (...args) => node(editor, ...args),
     nodes: (...args) => nodes(editor, ...args),
     normalize: (...args) => normalize(editor, ...args),
-    parent: (...args) => parent(editor, ...args),
+    parent: (...args) => parent$1(editor, ...args),
     path: (...args) => path(editor, ...args),
     pathRef: (...args) => pathRef(editor, ...args),
     pathRefs: (...args) => pathRefs(editor, ...args),
@@ -5148,7 +5148,7 @@ const isDOMElement = (value) => {
 };
 const isDOMNode = (value) => {
   const window2 = getDefaultView(value);
-  return !!window2 && value instanceof window2.Node;
+  return !!window2 && (value instanceof window2.Node || value instanceof globalThis.Node);
 };
 const isDOMSelection = (value) => {
   const window2 = value && value.anchorNode && getDefaultView(value.anchorNode);
@@ -5315,7 +5315,6 @@ class Key {
     this.id = `${n$1++}`;
   }
 }
-const IS_NODE_MAP_DIRTY = new toRawWeakMap();
 const NODE_TO_INDEX = new toRawWeakMap();
 const NODE_TO_PARENT = new toRawWeakMap();
 const EDITOR_TO_WINDOW = new toRawWeakMap();
@@ -6304,15 +6303,6 @@ const withDOM = (editor, clipboardFormatKey = "x-slate-fragment") => {
       }
     }
     apply2(op);
-    switch (op.type) {
-      case "insert_node":
-      case "remove_node":
-      case "merge_node":
-      case "move_node":
-      case "split_node": {
-        IS_NODE_MAP_DIRTY.set(e2, true);
-      }
-    }
     for (const [path2, key] of matches) {
       const [node2] = Editor.node(e2, path2);
       NODE_TO_KEY.set(node2, key);
@@ -7008,9 +6998,6 @@ function createAndroidInputManager({
       clearTimeout(flushTimeoutId);
       flushTimeoutId = null;
     }
-    if (IS_NODE_MAP_DIRTY.get(editor)) {
-      return;
-    }
     const { inputType: type } = event;
     let targetRange2 = null;
     const data = event.dataTransfer || event.data || void 0;
@@ -7398,9 +7385,9 @@ const useEditor = () => {
 };
 const StringComp = defineComponent({
   name: "slate-string",
-  props: ["isLast", "leaf", "parent", "text"],
+  props: ["isLast", "leaf", "element", "text"],
   setup(props) {
-    const { isLast, leaf: leaf2, parent: parent2, text } = props;
+    const { isLast, leaf: leaf2, element, text } = props;
     const editor = useEditor();
     const getTextContent = computed(() => {
       const text2 = leaf2.text;
@@ -7408,12 +7395,12 @@ const StringComp = defineComponent({
     });
     const isLineBreak = computed(() => {
       const pathParent = Path.parent(DOMEditor.findPath(editor, text));
-      return leaf2.text === "" && parent2.children[parent2.children.length - 1] === text && !editor.isInline(parent2) && Editor.string(editor, pathParent) === "";
+      return leaf2.text === "" && element.children[element.children.length - 1] === text && !editor.isInline(element) && Editor.string(editor, pathParent) === "";
     });
     const zeroStringAttrs = computed(() => {
-      const length = Node.string(parent2).length || 0;
+      const length = Node.string(element).length || 0;
       const isMarkPlaceholder = Boolean(leaf2[MARK_PLACEHOLDER_SYMBOL]) || false;
-      const isVoidParent = editor.isVoid(parent2);
+      const isVoidParent = editor.isVoid(element);
       if (isVoidParent || isLineBreak.value || leaf2.text === "") {
         return {
           "data-slate-zero-width": isLineBreak.value ? "n" : "z",
@@ -7487,9 +7474,9 @@ const useParentDescoration = () => {
 };
 const TextComp = defineComponent({
   name: "slate-text",
-  props: ["text", "parent"],
+  props: ["text", "element"],
   setup(props) {
-    const { text, parent: parent2 } = props;
+    const { text, element } = props;
     const editor = useEditor();
     const spanRef = ref();
     const decorate = useDecorate();
@@ -7522,7 +7509,8 @@ const TextComp = defineComponent({
       decorations.value.forEach((dec) => {
         ds.push(Range.intersection(dec, range2));
       });
-      return Text.decorations(text, ds.filter(Boolean).length ? ds : []);
+      const filterDs = ds.filter(Boolean);
+      return Text.decorations(text, filterDs.length ? filterDs : []);
     });
     onMounted(() => {
       const key = DOMEditor.findKey(editor, text);
@@ -7543,9 +7531,9 @@ const TextComp = defineComponent({
       }
     });
     const isLastText = computed(() => {
-      const isVoid = Editor.isVoid(editor, parent2);
-      const isLeafBlock = Element.isElement(parent2) && !editor.isInline(parent2) && Editor.hasInlines(editor, parent2);
-      return !isVoid && isLeafBlock && NODE_TO_INDEX.get(text) === parent2.children.length - 1;
+      const isVoid = Editor.isVoid(editor, element);
+      const isLeafBlock = Element.isElement(parent) && !editor.isInline(parent) && Editor.hasInlines(editor, parent);
+      return !isVoid && isLeafBlock && NODE_TO_INDEX.get(text) === element.children.length - 1;
     });
     const renderLeaf = useRenderLeaf();
     return () => h(
@@ -7560,7 +7548,7 @@ const TextComp = defineComponent({
           children: h(StringComp, {
             isLast: isLastText.value && i === leaves.value.length - 1,
             leaf: leaf2,
-            parent: parent2,
+            element,
             text,
             key: `${text.text}-${leaf2.text}-${i}`
           })
@@ -7661,10 +7649,10 @@ const ElementComp = defineComponent({
               position: "absolute"
             }
           },
-          h(TextComp, { parent: element, text })
+          h(TextComp, { element, text })
         );
       }
-      return h(Children, { node: element });
+      return h(Fragment, ChildrenFC(element, editor));
     });
     const decorate = useDecorate();
     const parentDs = useParentDescoration();
@@ -7686,21 +7674,11 @@ const ElementComp = defineComponent({
     });
   }
 });
-const Children = defineComponent({
-  name: "Children",
-  props: ["node"],
-  setup(props) {
-    const editor = useEditor();
-    onUpdated(() => {
-      IS_NODE_MAP_DIRTY.set(editor, false);
-    });
-    return () => renderList(props.node.children, (child, i) => {
-      const key = DOMEditor.findKey(editor, child);
-      NODE_TO_INDEX.set(child, i);
-      NODE_TO_PARENT.set(child, props.node);
-      return Element.isElement(child) ? h(ElementComp, { element: child, key: key.id }) : h(TextComp, { text: child, parent: props.node, key: key.id });
-    });
-  }
+const ChildrenFC = (element, editor) => renderList(element.children, (child, i) => {
+  const key = DOMEditor.findKey(editor, child);
+  NODE_TO_INDEX.set(child, i);
+  NODE_TO_PARENT.set(child, element);
+  return Element.isElement(child) ? h(ElementComp, { element: child, key: key.id }) : h(TextComp, { text: child, element, key: key.id });
 });
 const MUTATION_OBSERVER_CONFIG = {
   subtree: true,
@@ -7941,6 +7919,7 @@ const style = {
   WebkitUserModify: IS_WEBKIT ? "inherit" : void 0
 };
 const PlaceholderComp = defineComponent({
+  name: "slate-placeholder",
   props: ["placeholder", "onPlaceholderResize"],
   setup(props) {
     const editor = useEditor();
@@ -8276,29 +8255,27 @@ const Editable = defineComponent({
             if (editor.marks) {
               native = false;
             }
-            if (!IS_NODE_MAP_DIRTY.get(editor)) {
-              const { anchor } = selection;
-              const [node2, offset] = DOMEditor.toDOMPoint(editor, anchor);
-              const anchorNode = (_a2 = node2.parentElement) == null ? void 0 : _a2.closest("a");
-              const window2 = DOMEditor.getWindow(editor);
-              if (native && anchorNode && DOMEditor.hasDOMNode(editor, anchorNode)) {
-                const lastText = window2 == null ? void 0 : window2.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
-                if (lastText === node2 && ((_b2 = lastText.textContent) == null ? void 0 : _b2.length) === offset) {
-                  native = false;
-                }
+            const { anchor } = selection;
+            const [node2, offset] = DOMEditor.toDOMPoint(editor, anchor);
+            const anchorNode = (_a2 = node2.parentElement) == null ? void 0 : _a2.closest("a");
+            const window2 = DOMEditor.getWindow(editor);
+            if (native && anchorNode && DOMEditor.hasDOMNode(editor, anchorNode)) {
+              const lastText = window2 == null ? void 0 : window2.document.createTreeWalker(anchorNode, NodeFilter.SHOW_TEXT).lastChild();
+              if (lastText === node2 && ((_b2 = lastText.textContent) == null ? void 0 : _b2.length) === offset) {
+                native = false;
               }
-              if (native && node2.parentElement && ((_c = window2 == null ? void 0 : window2.getComputedStyle(node2.parentElement)) == null ? void 0 : _c.whiteSpace) === "pre") {
-                const block = Editor.above(editor, {
-                  at: anchor.path,
-                  match: (n2) => Element.isElement(n2) && Editor.isBlock(editor, n2)
-                });
-                if (block && Node.string(block[0]).includes("	")) {
-                  native = false;
-                }
+            }
+            if (native && node2.parentElement && ((_c = window2 == null ? void 0 : window2.getComputedStyle(node2.parentElement)) == null ? void 0 : _c.whiteSpace) === "pre") {
+              const block = Editor.above(editor, {
+                at: anchor.path,
+                match: (n2) => Element.isElement(n2) && Editor.isBlock(editor, n2)
+              });
+              if (block && Node.string(block[0]).includes("	")) {
+                native = false;
               }
             }
           }
-          if ((!inputType.startsWith("delete") || inputType.startsWith("deleteBy")) && !IS_NODE_MAP_DIRTY.get(editor)) {
+          if (!inputType.startsWith("delete") || inputType.startsWith("deleteBy")) {
             const [targetRange2] = event.getTargetRanges();
             if (targetRange2) {
               const range2 = DOMEditor.toSlateRange(editor, targetRange2, {
@@ -8906,7 +8883,7 @@ const Editable = defineComponent({
         onPaste
       },
       [
-        h(Children, { node: editor }),
+        ChildrenFC(editor, editor),
         h(PlaceholderComp, {
           placeholder,
           onPlaceholderResize
@@ -9187,7 +9164,6 @@ export {
   IS_FIREFOX_LEGACY,
   IS_FOCUSED,
   IS_IOS,
-  IS_NODE_MAP_DIRTY,
   IS_READ_ONLY,
   IS_UC_MOBILE,
   IS_WEBKIT,
@@ -9288,7 +9264,7 @@ export {
   normalizePoint,
   normalizeRange,
   normalizeStringDiff,
-  parent,
+  parent$1 as parent,
   path,
   pathRef,
   pathRefs,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -49,6 +49,13 @@
     "vitest": "^3.0.5",
     "vue-router": "^4.5.0"
   },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Guan-Erjia/slate-vue3.git"
+  },
   "keywords": [
     "slate-vue3",
     "slate-vue",
@@ -60,9 +67,5 @@
     "editable",
     "markdown",
     "html"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/Guan-Erjia/slate-vue3.git"
-  }
+  ]
 }