slate-vue3 0.2.2 → 0.2.3

package/README.md

@@ -22,7 +22,7 @@
 1. :sparkles: Highly customizable features, use slate core at the bottom level
 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
+4. :point_right: Check out the [**live demo**](https://guan-erjia.github.io/slate-vue3/examples/rich-text) of all of the examples
 
 # How to use?
 
@@ -81,6 +81,6 @@ This ensures that your rich text is as expected, and slate-vue3 provides some de
 
 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 ?
+### 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

package/dist/index.js

@@ -1,7 +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 { N as Node, S as Scrubber, R as Range, T as Text, P as Path, E as Editor, a as Element, c as Transforms } from "./batch-dirty-paths-X-eP3GRL.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";
+import { D as DOMEditor, P as MARK_PLACEHOLDER_SYMBOL, d as EDITOR_TO_ON_CHANGE, 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");
@@ -13,6 +13,7 @@ const SLATE_INNER_RENDER_ELEMENT = Symbol("SLATE_INNER_RENDER_ELEMENT");
 const SLATE_INNER_RENDER_LEAF = Symbol("SLATE_INNER_RENDER_LEAF");
 const SLATE_INNER_RENDER_PLACEHOLDER = Symbol("SLATE_INNER_RENDER_PLACEHOLDER");
 const SLATE_INNER_CHANGE_EFFECT_INJECT = Symbol("SLATE_INNER_CHANGE_EFFECT_INJECT");
+const SLATE_INNER_MARK_PLACEHOLDER = Symbol("SLATE_INNER_MARK_PLACEHOLDER");
 const Slate = defineComponent({
   name: "slate-editor",
   emits: ["change", "selectionchange", "valuechange"],
@@ -61,6 +62,27 @@ const Slate = defineComponent({
     const focusCb = () => isFocus.value = DOMEditor.isFocused(editor);
     const changeEffect = ref(0);
     provide(SLATE_INNER_CHANGE_EFFECT_INJECT, changeEffect);
+    const markPlaceholder = computed(() => {
+      if (editor.selection && Range.isCollapsed(editor.selection) && editor.marks) {
+        const anchor = editor.selection.anchor;
+        const leaf = Node.leaf(editor, anchor.path);
+        const { text, ...rest } = leaf;
+        if (!Text.equals(leaf, editor.marks, { loose: true })) {
+          const unset = Object.fromEntries(
+            Object.keys(rest).map((mark) => [mark, null])
+          );
+          return {
+            [MARK_PLACEHOLDER_SYMBOL]: true,
+            ...unset,
+            ...editor.marks,
+            anchor,
+            focus: anchor
+          };
+        }
+      }
+      return null;
+    });
+    provide(SLATE_INNER_MARK_PLACEHOLDER, markPlaceholder);
     onMounted(() => {
       document.addEventListener("focusin", focusCb);
       document.addEventListener("focusout", focusCb);
@@ -113,9 +135,9 @@ const useEditor = () => {
 };
 const StringComp = defineComponent({
   name: "slate-string",
-  props: ["isLast", "leaf", "element", "text"],
+  props: ["leaf", "text", "element", "isLast"],
   setup(props) {
-    const { isLast, leaf, element, text } = props;
+    const { leaf, text, element, isLast } = props;
     const editor = useEditor();
     const getTextContent = computed(() => {
       const text2 = leaf.text;
@@ -123,7 +145,7 @@ const StringComp = defineComponent({
     });
     const isLineBreak = computed(() => {
       const pathParent = Path.parent(DOMEditor.findPath(editor, text));
-      return leaf.text === "" && element.children[element.children.length - 1] === text && !editor.isInline(element) && Editor.string(editor, pathParent) === "";
+      return leaf.text === "" && element.children.at(-1) === text && !editor.isInline(element) && Editor.string(editor, pathParent) === "";
     });
     const zeroStringAttrs = computed(() => {
       const length = Node.string(element).length || 0;
@@ -189,6 +211,15 @@ const useChangeEffect = (fn) => {
   watch(() => CHANGE_EFFECT_INJECT.value, fn);
   return CHANGE_EFFECT_INJECT;
 };
+const useMarkPlaceholder = () => {
+  const MARK_PLACEHOLDER_INJECT = inject(SLATE_INNER_MARK_PLACEHOLDER);
+  if (MARK_PLACEHOLDER_INJECT === void 0) {
+    throw new Error(
+      `The \`useChangeEffect\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  return MARK_PLACEHOLDER_INJECT;
+};
 const TextComp = defineComponent({
   name: "slate-text",
   props: ["text", "element"],
@@ -197,32 +228,19 @@ const TextComp = defineComponent({
     const editor = useEditor();
     const spanRef = ref();
     const decorate = useDecorate();
+    const markPlaceholder = useMarkPlaceholder();
     const leaves = computed(() => {
       const elemPath = DOMEditor.findPath(editor, element);
-      const elemDs = decorate([element, elemPath]);
-      if (editor.selection && Range.isCollapsed(editor.selection) && editor.marks) {
-        const anchor = editor.selection.anchor;
-        const leaf = Node.leaf(editor, anchor.path);
-        const { text: text2, ...rest } = leaf;
-        if (!Text.equals(leaf, editor.marks, { loose: true })) {
-          const unset = Object.fromEntries(
-            Object.keys(rest).map((mark) => [mark, null])
-          );
-          elemDs.push({
-            [MARK_PLACEHOLDER_SYMBOL]: true,
-            ...unset,
-            ...editor.marks,
-            anchor,
-            focus: anchor
-          });
-        }
-      }
       const textPath = DOMEditor.findPath(editor, text);
-      const range = Editor.range(editor, textPath);
       const textDs = decorate([text, textPath]);
+      const elemDs = decorate([element, elemPath]);
+      const range = Editor.range(editor, textPath);
       elemDs.forEach((dec) => {
         textDs.push(Range.intersection(dec, range));
       });
+      if (markPlaceholder.value) {
+        textDs.unshift(markPlaceholder.value);
+      }
       const filterDs = textDs.filter(Boolean);
       return Text.decorations(text, filterDs.length ? filterDs : []);
     });
@@ -257,10 +275,10 @@ const TextComp = defineComponent({
           leaf,
           attributes: { "data-slate-leaf": true },
           children: h(StringComp, {
-            isLast: isLastText.value && i === leaves.value.length - 1,
-            leaf,
-            element,
             text,
+            element,
+            leaf,
+            isLast: isLastText.value && i === leaves.value.length - 1,
             key: `${text.text}-${leaf.text}-${i}`
           })
         })

package/dist/slate-vue/components/string.d.ts

@@ -1,14 +1,14 @@
 import { Element, Text } from '../../slate/index.ts';
 export declare const StringComp: import('vue').DefineComponent<{
-    isLast: boolean;
-    text: Text;
     leaf: Text;
+    text: Text;
     element: Element;
+    isLast: boolean;
 }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    isLast: boolean;
-    text: Text;
     leaf: Text;
+    text: Text;
     element: Element;
+    isLast: boolean;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/components/text.d.ts

@@ -1,10 +1,10 @@
 import { Text, Element } from '../../slate/index.ts';
 export declare const TextComp: import('vue').DefineComponent<{
-    element: Element;
     text: Text;
+    element: Element;
 }, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    element: Element;
     text: Text;
+    element: Element;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/slate-vue/hooks/use-render.d.ts

@@ -1,6 +1,11 @@
-import { Ref, VNode } from 'vue';
+import { ComputedRef, Ref, VNode } from 'vue';
 import { RenderElementProps, RenderPlaceholderProps, RenderLeafProps } from '../utils/interface';
+import { BasePoint } from '../../slate/index.ts';
 export declare const useRenderElement: () => (props: RenderElementProps) => VNode;
 export declare const useRenderLeaf: () => (props: RenderLeafProps) => VNode;
 export declare const useRenderPlaceholder: () => (props: RenderPlaceholderProps) => VNode;
 export declare const useChangeEffect: (fn: () => void) => Ref<number, number>;
+export declare const useMarkPlaceholder: () => ComputedRef<{
+    anchor: BasePoint;
+    focus: BasePoint;
+} | null>;

package/dist/slate-vue/utils/constants.d.ts

@@ -10,3 +10,4 @@ export declare const SLATE_INNER_RENDER_ELEMENT: unique symbol;
 export declare const SLATE_INNER_RENDER_LEAF: unique symbol;
 export declare const SLATE_INNER_RENDER_PLACEHOLDER: unique symbol;
 export declare const SLATE_INNER_CHANGE_EFFECT_INJECT: unique symbol;
+export declare const SLATE_INNER_MARK_PLACEHOLDER: unique symbol;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.2.2",
+  "version": "0.2.3",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -78,6 +78,7 @@
     "@types/node": "^22.13.1",
     "@types/prismjs": "^1.26.5",
     "@vitejs/plugin-vue": "^5.2.1",
+    "babel-plugin-transform-regex": "^6.0.1",
     "image-extensions": "^1.1.0",
     "is-url": "^1.2.4",
     "jsdom": "^26.0.0",
@@ -88,6 +89,7 @@
     "typescript": "~5.8.2",
     "unified": "^11.0.5",
     "vite": "^6.2.5",
+    "vite-plugin-babel": "^1.3.0",
     "vite-plugin-dts": "^4.5.0",
     "vitest": "^3.0.5",
     "vue-router": "^4.5.0",