slate-vue3 0.2.0 → 0.2.2

package/README.md

@@ -20,8 +20,8 @@
 # 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
+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
 4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/examples) of all of the examples
 
 # How to use?
@@ -84,24 +84,3 @@ Of coures yes, but we do not recommend it unless you have already configured jsx
 ### 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
-
-# Compact Slate
-
-**reactive implement**
-
-1. packages/slate/src/interfaces/text.ts 115:115
-2. packages/slate/src/create-editor.ts 94:94
-3. packages/slate/src/transforms-node/set-nodes.ts 18:18
-4. packages/slate/src/interfaces/text.ts 116:116
-
-**remove immer**
-
-1. packages/slate/src/interfaces/node.ts 365:365
-2. packages/slate/src/interfaces/point.ts 103:103
-3. packages/slate/src/interfaces/range.ts 224:224
-4. packages/slate/src/interfaces/transforms/general.ts 322:333
-
-**other compact**
-
-1. packages/slate/src/core/normalize-node.ts
-2. packages/slate-dom/src/plugin/dom-editor.ts 421:441

package/dist/dom.js

@@ -1,5 +1,5 @@
-import { D as DOMEditor, E as EDITOR_TO_KEY_TO_ELEMENT, a as EDITOR_TO_USER_MARKS, b as EDITOR_TO_USER_SELECTION, N as NODE_TO_KEY, i as isDOMText, g as getPlainText, c as getSlateFragmentAttribute, d as EDITOR_TO_ON_CHANGE } from "./hotkeys-u-dgagSM.js";
-import { C, F, G, J, H, B, I, u, L, v, w, M, x, O, z, y, A, K, P, Q, R, S, e, f, h, j, k, l, m, o, p, q, r, s, t, n } from "./hotkeys-u-dgagSM.js";
+import { D as DOMEditor, E as EDITOR_TO_KEY_TO_ELEMENT, a as EDITOR_TO_USER_MARKS, b as EDITOR_TO_USER_SELECTION, N as NODE_TO_KEY, i as isDOMText, g as getPlainText, c as getSlateFragmentAttribute, d as EDITOR_TO_ON_CHANGE } from "./hotkeys-BwRBmDaN.js";
+import { C, F, G, J, H, B, I, u, L, v, w, M, x, O, z, y, A, K, P, Q, R, S, e, f, h, j, k, l, m, o, p, q, r, s, t, n } from "./hotkeys-BwRBmDaN.js";
 import { E as Editor, R as Range, a as Element, c as Transforms, P as Path, N as Node } from "./batch-dirty-paths-X-eP3GRL.js";
 import "vue";
 const doRectsIntersect = (rect, compareRect) => {

package/dist/{hotkeys-u-dgagSM.js → hotkeys-BwRBmDaN.js}

@@ -199,7 +199,7 @@ const EDITOR_TO_USER_MARKS = new toRawWeakMap();
 const MARK_PLACEHOLDER_SYMBOL = Symbol(
   "mark-placeholder"
 );
-function getFirefoxNodeEl(node, offset) {
+function getFirefoxNodeEl([node, offset]) {
   var _a2;
   if (node.nodeType !== 3 || node.textContent !== "") {
     return [node, offset];
@@ -648,12 +648,12 @@ const DOMEditor = {
             focusOffset = ((_a2 = focusNode == null ? void 0 : focusNode.textContent) == null ? void 0 : _a2.length) || 0;
           } else {
             if (anchorNode) {
-              const [el2, offset] = getFirefoxNodeEl(anchorNode, anchorOffset);
+              const [el2, offset] = getFirefoxNodeEl([anchorNode, anchorOffset]);
               anchorNode = el2;
               anchorOffset = offset;
             }
             if (focusNode) {
-              const [el2, offset] = getFirefoxNodeEl(focusNode, focusOffset);
+              const [el2, offset] = getFirefoxNodeEl([focusNode, focusOffset]);
               focusNode = el2;
               focusOffset = offset;
             }
@@ -675,12 +675,12 @@ const DOMEditor = {
         isCollapsed = domRange.collapsed;
         if (IS_FIREFOX) {
           if (anchorNode) {
-            const [el2, offset] = getFirefoxNodeEl(anchorNode, anchorOffset);
+            const [el2, offset] = getFirefoxNodeEl([anchorNode, anchorOffset]);
             anchorNode = el2;
             anchorOffset = offset;
           }
           if (focusNode) {
-            const [el2, offset] = getFirefoxNodeEl(focusNode, focusOffset);
+            const [el2, offset] = getFirefoxNodeEl([focusNode, focusOffset]);
             focusNode = el2;
             focusOffset = offset;
           }

package/dist/index.js

@@ -1,6 +1,7 @@
 import { defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, h, watch, renderList, Fragment, useAttrs, reactive } from "vue";
 import { N as Node, S as Scrubber, P as Path, E as Editor, R as Range, T as Text, a as Element, c as Transforms } from "./batch-dirty-paths-X-eP3GRL.js";
-import { D as DOMEditor, d as EDITOR_TO_ON_CHANGE, P as MARK_PLACEHOLDER_SYMBOL, I as IS_ANDROID, x as IS_IOS, E as EDITOR_TO_KEY_TO_ELEMENT, J as ELEMENT_TO_NODE, Q as NODE_TO_ELEMENT, R as NODE_TO_INDEX, S as NODE_TO_PARENT, p as isDOMNode, y as IS_WEBKIT, e as applyStringDiff, q as isDOMSelection, n as normalizeStringDiff, O as IS_READ_ONLY, h as getDefaultView, G as EDITOR_TO_WINDOW, F as EDITOR_TO_ELEMENT, H as HAS_BEFORE_INPUT_SUPPORT, C as CAN_USE_DOM, f as getActiveElement, j as getSelection, M as IS_FOCUSED, b as EDITOR_TO_USER_SELECTION, L as IS_COMPOSING, o as isDOMElement, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, v as IS_FIREFOX, B as Hotkeys, u as IS_CHROME, r as isPlainTextOnlyPaste } from "./hotkeys-u-dgagSM.js";
+import { t } from "./batch-dirty-paths-X-eP3GRL.js";
+import { D as DOMEditor, d as EDITOR_TO_ON_CHANGE, P as MARK_PLACEHOLDER_SYMBOL, I as IS_ANDROID, x as IS_IOS, E as EDITOR_TO_KEY_TO_ELEMENT, J as ELEMENT_TO_NODE, Q as NODE_TO_ELEMENT, R as NODE_TO_INDEX, S as NODE_TO_PARENT, p as isDOMNode, y as IS_WEBKIT, e as applyStringDiff, q as isDOMSelection, n as normalizeStringDiff, O as IS_READ_ONLY, h as getDefaultView, G as EDITOR_TO_WINDOW, F as EDITOR_TO_ELEMENT, H as HAS_BEFORE_INPUT_SUPPORT, C as CAN_USE_DOM, f as getActiveElement, j as getSelection, M as IS_FOCUSED, b as EDITOR_TO_USER_SELECTION, L as IS_COMPOSING, o as isDOMElement, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, v as IS_FIREFOX, B as Hotkeys, u as IS_CHROME, r as isPlainTextOnlyPaste } from "./hotkeys-BwRBmDaN.js";
 const SLATE_USE_EDITOR = Symbol("SLATE_USE_EDITOR");
 const SLATE_USE_DECORATE = Symbol("SLATE_USE_DECORATE");
 const SLATE_USE_SELECTED = Symbol("SLATE_USE_SELECTED");
@@ -363,47 +364,47 @@ const ChildrenFC = (element, editor) => renderList(element.children, (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 t = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e$1 = (t2, e2) => (!e2 || "hidden" !== t2) && ("visible" !== t2 && "clip" !== t2), n = (t2, n2) => {
-  if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
-    const o2 = getComputedStyle(t2, null);
-    return e$1(o2.overflowY, n2) || e$1(o2.overflowX, n2) || ((t3) => {
-      const e2 = ((t4) => {
-        if (!t4.ownerDocument || !t4.ownerDocument.defaultView) return null;
+const t2 = (t3) => "object" == typeof t3 && null != t3 && 1 === t3.nodeType, e$1 = (t3, e2) => (!e2 || "hidden" !== t3) && ("visible" !== t3 && "clip" !== t3), n = (t3, n2) => {
+  if (t3.clientHeight < t3.scrollHeight || t3.clientWidth < t3.scrollWidth) {
+    const o2 = getComputedStyle(t3, null);
+    return e$1(o2.overflowY, n2) || e$1(o2.overflowX, n2) || ((t4) => {
+      const e2 = ((t5) => {
+        if (!t5.ownerDocument || !t5.ownerDocument.defaultView) return null;
         try {
-          return t4.ownerDocument.defaultView.frameElement;
-        } catch (t5) {
+          return t5.ownerDocument.defaultView.frameElement;
+        } catch (t6) {
           return null;
         }
-      })(t3);
-      return !!e2 && (e2.clientHeight < t3.scrollHeight || e2.clientWidth < t3.scrollWidth);
-    })(t2);
+      })(t4);
+      return !!e2 && (e2.clientHeight < t4.scrollHeight || e2.clientWidth < t4.scrollWidth);
+    })(t3);
   }
   return false;
-}, o$1 = (t2, e2, n2, o2, l2, r2, i, s) => r2 < t2 && i > e2 || r2 > t2 && i < e2 ? 0 : r2 <= t2 && s <= n2 || i >= e2 && s >= n2 ? r2 - t2 - o2 : i > e2 && s < n2 || r2 < t2 && s > n2 ? i - e2 + l2 : 0, l = (t2) => {
-  const e2 = t2.parentElement;
-  return null == e2 ? t2.getRootNode().host || null : e2;
+}, o$1 = (t3, e2, n2, o2, l2, r2, i, s) => r2 < t3 && i > e2 || r2 > t3 && i < e2 ? 0 : r2 <= t3 && s <= n2 || i >= e2 && s >= n2 ? r2 - t3 - o2 : i > e2 && s < n2 || r2 < t3 && s > n2 ? i - e2 + l2 : 0, l = (t3) => {
+  const e2 = t3.parentElement;
+  return null == e2 ? t3.getRootNode().host || null : e2;
 }, r = (e2, r2) => {
   var i, s, d, h2;
   if ("undefined" == typeof document) return [];
-  const { scrollMode: c, block: f, inline: u, boundary: a, skipOverflowHiddenElements: g } = r2, p = "function" == typeof a ? a : (t2) => t2 !== a;
-  if (!t(e2)) throw new TypeError("Invalid target");
+  const { scrollMode: c, block: f, inline: u, boundary: a, skipOverflowHiddenElements: g } = r2, p = "function" == typeof a ? a : (t3) => t3 !== a;
+  if (!t2(e2)) throw new TypeError("Invalid target");
   const m = document.scrollingElement || document.documentElement, w = [];
   let W = e2;
-  for (; t(W) && p(W); ) {
+  for (; t2(W) && p(W); ) {
     if (W = l(W), W === m) {
       w.push(W);
       break;
     }
     null != W && W === document.body && n(W) && !n(document.documentElement) || null != W && n(W, g) && w.push(W);
   }
-  const b = null != (s = null == (i = window.visualViewport) ? void 0 : i.width) ? s : innerWidth, H = null != (h2 = null == (d = window.visualViewport) ? void 0 : d.height) ? h2 : innerHeight, { scrollX: y, scrollY: M } = window, { height: v, width: E, top: x, right: C, bottom: I, left: R } = e2.getBoundingClientRect(), { top: T, right: B, bottom: F, left: V } = ((t2) => {
-    const e3 = window.getComputedStyle(t2);
+  const b = null != (s = null == (i = window.visualViewport) ? void 0 : i.width) ? s : innerWidth, H = null != (h2 = null == (d = window.visualViewport) ? void 0 : d.height) ? h2 : innerHeight, { scrollX: y, scrollY: M } = window, { height: v, width: E, top: x, right: C, bottom: I, left: R } = e2.getBoundingClientRect(), { top: T, right: B, bottom: F, left: V } = ((t3) => {
+    const e3 = window.getComputedStyle(t3);
     return { top: parseFloat(e3.scrollMarginTop) || 0, right: parseFloat(e3.scrollMarginRight) || 0, bottom: parseFloat(e3.scrollMarginBottom) || 0, left: parseFloat(e3.scrollMarginLeft) || 0 };
   })(e2);
   let k = "start" === f || "nearest" === f ? x - T : "end" === f ? I + F : x + v / 2 - T + F, D = "center" === u ? R + E / 2 - V + B : "end" === u ? C + B : R - V;
   const L = [];
-  for (let t2 = 0; t2 < w.length; t2++) {
-    const e3 = w[t2], { height: n2, width: l2, top: r3, right: i2, bottom: s2, left: d2 } = e3.getBoundingClientRect();
+  for (let t3 = 0; t3 < w.length; t3++) {
+    const e3 = w[t3], { height: n2, width: l2, top: r3, right: i2, bottom: s2, left: d2 } = e3.getBoundingClientRect();
     if ("if-needed" === c && x >= 0 && R >= 0 && I <= H && C <= b && x >= r3 && I <= s2 && R >= d2 && C <= i2) return L;
     const h3 = getComputedStyle(e3), a2 = parseInt(h3.borderLeftWidth, 10), g2 = parseInt(h3.borderTopWidth, 10), p2 = parseInt(h3.borderRightWidth, 10), W2 = parseInt(h3.borderBottomWidth, 10);
     let T2 = 0, B2 = 0;
@@ -411,32 +412,32 @@ const t = (t2) => "object" == typeof t2 && null != t2 && 1 === t2.nodeType, e$1
     if (m === e3) T2 = "start" === f ? k : "end" === f ? k - H : "nearest" === f ? o$1(M, M + H, H, g2, W2, M + k, M + k + v, v) : k - H / 2, B2 = "start" === u ? D : "center" === u ? D - b / 2 : "end" === u ? D - b : o$1(y, y + b, b, a2, p2, y + D, y + D + E, E), T2 = Math.max(0, T2 + M), B2 = Math.max(0, B2 + y);
     else {
       T2 = "start" === f ? k - r3 - g2 : "end" === f ? k - s2 + W2 + V2 : "nearest" === f ? o$1(r3, s2, n2, g2, W2 + V2, k, k + v, v) : k - (r3 + n2 / 2) + V2 / 2, B2 = "start" === u ? D - d2 - a2 : "center" === u ? D - (d2 + l2 / 2) + F2 / 2 : "end" === u ? D - i2 + p2 + F2 : o$1(d2, i2, l2, a2, p2 + F2, D, D + E, E);
-      const { scrollLeft: t3, scrollTop: h4 } = e3;
-      T2 = 0 === X ? 0 : Math.max(0, Math.min(h4 + T2 / X, e3.scrollHeight - n2 / X + V2)), B2 = 0 === S ? 0 : Math.max(0, Math.min(t3 + B2 / S, e3.scrollWidth - l2 / S + F2)), k += h4 - T2, D += t3 - B2;
+      const { scrollLeft: t4, scrollTop: h4 } = e3;
+      T2 = 0 === X ? 0 : Math.max(0, Math.min(h4 + T2 / X, e3.scrollHeight - n2 / X + V2)), B2 = 0 === S ? 0 : Math.max(0, Math.min(t4 + B2 / S, e3.scrollWidth - l2 / S + F2)), k += h4 - T2, D += t4 - B2;
     }
     L.push({ el: e3, top: T2, left: B2 });
   }
   return L;
 };
-const o = (t2) => false === t2 ? { block: "end", inline: "nearest" } : ((t3) => t3 === Object(t3) && 0 !== Object.keys(t3).length)(t2) ? t2 : { block: "start", inline: "nearest" };
+const o = (t3) => false === t3 ? { block: "end", inline: "nearest" } : ((t4) => t4 === Object(t4) && 0 !== Object.keys(t4).length)(t3) ? t3 : { block: "start", inline: "nearest" };
 function e(e2, r$1) {
-  if (!e2.isConnected || !((t2) => {
-    let o2 = t2;
+  if (!e2.isConnected || !((t3) => {
+    let o2 = t3;
     for (; o2 && o2.parentNode; ) {
       if (o2.parentNode === document) return true;
       o2 = o2.parentNode instanceof ShadowRoot ? o2.parentNode.host : o2.parentNode;
     }
     return false;
   })(e2)) return;
-  const n2 = ((t2) => {
-    const o2 = window.getComputedStyle(t2);
+  const n2 = ((t3) => {
+    const o2 = window.getComputedStyle(t3);
     return { top: parseFloat(o2.scrollMarginTop) || 0, right: parseFloat(o2.scrollMarginRight) || 0, bottom: parseFloat(o2.scrollMarginBottom) || 0, left: parseFloat(o2.scrollMarginLeft) || 0 };
   })(e2);
-  if (((t2) => "object" == typeof t2 && "function" == typeof t2.behavior)(r$1)) return r$1.behavior(r(e2, r$1));
+  if (((t3) => "object" == typeof t3 && "function" == typeof t3.behavior)(r$1)) return r$1.behavior(r(e2, r$1));
   const l2 = "boolean" == typeof r$1 || null == r$1 ? void 0 : r$1.behavior;
   for (const { el: a, top: i, left: s } of r(e2, o(r$1))) {
-    const t2 = i - n2.top + n2.bottom, o2 = s - n2.left + n2.right;
-    a.scroll({ top: t2, left: o2, behavior: l2 });
+    const t3 = i - n2.top + n2.bottom, o2 = s - n2.left + n2.right;
+    a.scroll({ top: t3, left: o2, behavior: l2 });
   }
 }
 const isEventHandled = (event, handler) => {
@@ -1773,6 +1774,7 @@ export {
   Slate,
   defaultRenderLeaf,
   defaultRenderPlaceHolder,
+  t as toRawWeakMap,
   useComposing,
   useEditor,
   useFocused,

package/dist/slate-dom/index.d.ts

@@ -3,7 +3,6 @@ export { withDOM } from './plugin/with-dom';
 export { applyStringDiff, normalizeStringDiff } from './utils/diff-text';
 export type { StringDiff, TextDiff } from './utils/diff-text';
 export { getActiveElement, getDefaultView, getSelection, hasShadowRoot, isAfter, isBefore, isDOMElement, isDOMNode, isDOMSelection, isPlainTextOnlyPaste, isTrackedMutation, normalizeDOMPoint, } from './utils/dom';
-export type { DOMPoint } from './utils/dom';
 export { CAN_USE_DOM, HAS_BEFORE_INPUT_SUPPORT, IS_ANDROID, IS_CHROME, IS_FIREFOX, IS_FIREFOX_LEGACY, IS_IOS, IS_WEBKIT, IS_UC_MOBILE, IS_WECHATBROWSER, } from './utils/environment';
 export { Hotkeys } from './utils/hotkeys';
 export { Key } from './utils/key';

package/dist/slate-dom/plugin/dom-editor.d.ts

@@ -1,10 +1,13 @@
 import { BaseEditor, Node, Path, Point, Range } from '../../slate/index.ts';
-import { DOMPoint } from '../utils/dom';
 import { Key } from '../utils/key';
 type DOMNode = globalThis.Node;
 type DOMRange = globalThis.Range;
 type DOMSelection = globalThis.Selection;
 type DOMStaticRange = globalThis.StaticRange;
+type DOMPoint = [globalThis.Node, number];
+/**
+ * A DOM-specific version of the `Editor` interface.
+ */
 export interface DOMEditor extends BaseEditor {
     hasEditableTarget: (editor: DOMEditor, target: EventTarget | null) => target is DOMNode;
     hasRange: (editor: DOMEditor, range: Range) => boolean;

package/dist/slate-dom/utils/dom.d.ts

@@ -11,7 +11,6 @@ declare global {
         Node: (typeof Node)['constructor'];
     }
 }
-export type DOMPoint = [Node, number];
 /**
  * Returns the host window of a DOM node
  */
@@ -43,6 +42,7 @@ export declare const isPlainTextOnlyPaste: (event: ClipboardEvent) => boolean |
 /**
  * Normalize a DOM point so that it always refers to a text node.
  */
+type DOMPoint = [DOMNode, number];
 export declare const normalizeDOMPoint: (domPoint: DOMPoint) => DOMPoint;
 /**
  * Determines whether the active element is nested within a shadowRoot

package/dist/slate-vue/index.d.ts

@@ -10,3 +10,4 @@ export { useSelected } from './hooks/use-selected';
 export { useEditor } from './hooks/use-editor';
 export { useSelection } from './hooks/use-selection';
 export { useInheritRef } from './hooks/use-inherit-ref';
+export { toRawWeakMap } from '../share-tools/index.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -87,7 +87,7 @@
     "remark-slate-transformer": "^0.9.0",
     "typescript": "~5.8.2",
     "unified": "^11.0.5",
-    "vite": "^6.2.3",
+    "vite": "^6.2.5",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.5",
     "vue-router": "^4.5.0",