slate-vue3 0.4.2 → 0.5.1

package/dist/history.js

@@ -156,7 +156,7 @@ const withHistory = (editor) => {
       if (merge == null) {
         if (lastBatch == null) {
           merge = false;
-        } else if (operations.length !== 0) {
+        } else if (operations.includes(lastOp)) {
           merge = true;
         } else {
           merge = shouldMerge(op, lastOp);

package/dist/index.js

@@ -1,5 +1,5 @@
-import { S as SLATE_USE_SELECTED, a as SLATE_STATE_SELECTION } from "./use-focused-De6S1bT0.js";
-import { g, D, c, e, f, d, E, b, u, j, h, i } from "./use-focused-De6S1bT0.js";
+import { S as SLATE_USE_SELECTED, a as SLATE_STATE_SELECTION } from "./use-focused-BERGv09e.js";
+import { g, D, c, e, f, d, E, b, u, j, h, i } from "./use-focused-BERGv09e.js";
 import { inject } from "vue";
 import { t } from "./batch-dirty-paths-DGoKWQz8.js";
 const useSelected = () => {

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

@@ -1,10 +1,4 @@
 import { VNode } from 'vue';
-export declare const PlaceholderComp: import('vue').DefineComponent<{
-    placeholder?: string | undefined;
-    onPlaceholderResize: (height?: number) => void;
-}, () => false | "" | VNode<import('vue').RendererNode, import('vue').RendererElement, {
+export declare const PlaceholderComp: import('vue').DefineComponent<{}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
-}> | undefined, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
-    placeholder?: string | undefined;
-    onPlaceholderResize: (height?: number) => void;
-}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

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

@@ -18,7 +18,7 @@ export declare const handleNativeHistoryEvents: (editor: Editor, event: InputEve
  * A default implement to scroll dom range into view.
  */
 export declare const DEFAULT_SCROLL_INTO_VIEW: (editor: DOMEditor, domRange: globalThis.Range) => void;
-export declare const DEFAULT_ELEMENT_RENDER: ({ attributes, children, }: RenderElementProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+export declare const DEFAULT_ELEMENT_RENDER: ({ element, attributes, children, editor, }: RenderElementProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
     [key: string]: any;
 }>;
 export declare const DEFAULT_LEAF_RENDER: ({ attributes, children, }: RenderLeafProps) => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {

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

@@ -10,3 +10,6 @@ export declare const useMarkPlaceholder: () => ComputedRef<{
     anchor: BasePoint;
     focus: BasePoint;
 } | null>;
+export declare const usePlaceholder: () => ComputedRef<string>;
+export declare const usePlaceholderShow: () => ComputedRef<boolean>;
+export declare const usePlaceholderResize: () => (height?: number) => {};

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

@@ -1,4 +1,4 @@
-export type { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, } from './utils/interface';
+export type { RenderElementProps, RenderLeafProps, RenderPlaceholderProps, RenderTextProps, } from './utils/interface';
 export { Slate } from './components/slate';
 export { Editable } from './components/editable';
 export { DEFAULT_ELEMENT_RENDER, DEFAULT_LEAF_RENDER, DEFAULT_TEXT_RENDER, DEFAULT_PLACEHOLDER_RENDER, DEFAULT_SCROLL_INTO_VIEW, DEFAULT_DECORATE_FN, } from './components/utils';

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

@@ -12,3 +12,6 @@ export declare const SLATE_INNER_RENDER_PLACEHOLDER: unique symbol;
 export declare const SLATE_INNER_RENDER_TEXT: unique symbol;
 export declare const SLATE_INNER_CHANGE_EFFECT_INJECT: unique symbol;
 export declare const SLATE_INNER_MARK_PLACEHOLDER: unique symbol;
+export declare const SLATE_INNER_PLACEHOLDER: unique symbol;
+export declare const SLATE_INNER_PLACEHOLDER_SHOW: unique symbol;
+export declare const SLATE_INNER_PLACEHOLDER_RESIZE: unique symbol;

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

@@ -1,5 +1,5 @@
-import { Text, Element, LeafPosition } from '../../slate/index.ts';
-import { HTMLAttributes, VNode, VNodeChild, VNodeProps, VNodeRef } from 'vue';
+import { Text, Element, LeafPosition, Editor } from '../../slate/index.ts';
+import { HTMLAttributes, VNode, VNodeArrayChildren, VNodeChild, VNodeProps, VNodeRef } from 'vue';
 /**
  * The props that get passed to renderPlaceholder
  */
@@ -14,7 +14,7 @@ export interface RenderPlaceholderProps {
  * `RenderLeafProps` are passed to the `renderLeaf` handler.
  */
 export interface RenderLeafProps {
-    children: VNode;
+    children: VNodeArrayChildren;
     /**
      * The leaf node with any applied decorations.
      * If no decorations are applied, it will be identical to the `text` property.
@@ -42,6 +42,7 @@ export interface RenderElementProps {
         dir?: "rtl";
         ref: VNodeRef;
     };
+    editor?: Editor;
 }
 /**
  * `RenderTextProps` are passed to the `renderText` handler.

package/dist/{use-focused-De6S1bT0.js → use-focused-BERGv09e.js}

@@ -1,6 +1,6 @@
-import { h, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, watch, renderList, Fragment, useAttrs, reactive, toRaw } from "vue";
+import { h, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, watch, nextTick, renderList, Fragment, useAttrs, reactive, toRaw } from "vue";
 import { R as Range, N as Node, S as Scrubber, T as Text, P as Path, E as Editor, a as Element, c as Transforms } from "./batch-dirty-paths-DGoKWQz8.js";
-import { I as IS_ANDROID, p as isDOMNode, D as DOMEditor, P as MARK_PLACEHOLDER_SYMBOL, d as EDITOR_TO_ON_CHANGE, 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, 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, r as isPlainTextOnlyPaste, L as IS_COMPOSING, B as Hotkeys, u as IS_CHROME, v as IS_FIREFOX, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, o as isDOMElement, b as EDITOR_TO_USER_SELECTION } from "./hotkeys-DdYAaAmE.js";
+import { I as IS_ANDROID, p as isDOMNode, D as DOMEditor, P as MARK_PLACEHOLDER_SYMBOL, d as EDITOR_TO_ON_CHANGE, x as IS_IOS, F as EDITOR_TO_ELEMENT, y as IS_WEBKIT, 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, e as applyStringDiff, q as isDOMSelection, n as normalizeStringDiff, O as IS_READ_ONLY, h as getDefaultView, G as EDITOR_TO_WINDOW, H as HAS_BEFORE_INPUT_SUPPORT, C as CAN_USE_DOM, f as getActiveElement, j as getSelection, M as IS_FOCUSED, r as isPlainTextOnlyPaste, L as IS_COMPOSING, B as Hotkeys, u as IS_CHROME, v as IS_FIREFOX, w as IS_FIREFOX_LEGACY, A as IS_WECHATBROWSER, z as IS_UC_MOBILE, a as EDITOR_TO_USER_MARKS, o as isDOMElement, b as EDITOR_TO_USER_SELECTION } from "./hotkeys-DdYAaAmE.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");
@@ -14,6 +14,9 @@ const SLATE_INNER_RENDER_PLACEHOLDER = Symbol("SLATE_INNER_RENDER_PLACEHOLDER");
 const SLATE_INNER_RENDER_TEXT = Symbol("SLATE_INNER_RENDER_TEXT");
 const SLATE_INNER_CHANGE_EFFECT_INJECT = Symbol("SLATE_INNER_CHANGE_EFFECT_INJECT");
 const SLATE_INNER_MARK_PLACEHOLDER = Symbol("SLATE_INNER_MARK_PLACEHOLDER");
+const SLATE_INNER_PLACEHOLDER = Symbol("SLATE_INNER_PLACEHOLDER");
+const SLATE_INNER_PLACEHOLDER_SHOW = Symbol("SLATE_INNER_PLACEHOLDER_SHOW");
+const SLATE_INNER_PLACEHOLDER_RESIZE = Symbol("SLATE_INNER_PLACEHOLDER_RESIZE");
 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);
@@ -132,9 +135,23 @@ const DEFAULT_SCROLL_INTO_VIEW = (editor, domRange) => {
   }
 };
 const DEFAULT_ELEMENT_RENDER = ({
+  element,
   attributes,
-  children
-}) => h("p", attributes, children);
+  children,
+  editor
+}) => {
+  const tag = (editor == null ? void 0 : editor.isInline(element)) ? "span" : "div";
+  return h(
+    tag,
+    {
+      ...attributes,
+      style: {
+        position: "relative"
+      }
+    },
+    children
+  );
+};
 const DEFAULT_LEAF_RENDER = ({
   attributes,
   children
@@ -299,10 +316,11 @@ const StringComp = defineComponent({
       }
       return null;
     });
-    return () => zeroStringAttrs.value ? h("span", zeroStringAttrs.value, [
-      !(IS_ANDROID || IS_IOS) || !isLineBreak.value ? "\uFEFF" : null,
-      isLineBreak.value ? h("br") : null
-    ]) : h("span", { "data-slate-string": true }, getTextContent.value);
+    return () => zeroStringAttrs.value ? h(
+      "span",
+      zeroStringAttrs.value,
+      (IS_ANDROID || IS_IOS) && isLineBreak.value ? h("br") : "\uFEFF"
+    ) : h("span", { "data-slate-string": true }, getTextContent.value);
   }
 });
 const useRenderElement = () => {
@@ -370,6 +388,98 @@ const useMarkPlaceholder = () => {
   }
   return MARK_PLACEHOLDER_INJECT;
 };
+const usePlaceholder = () => {
+  const PLACEHOLDER_INJECT = inject(
+    SLATE_INNER_PLACEHOLDER
+  );
+  if (PLACEHOLDER_INJECT === void 0) {
+    throw new Error(
+      `The \`usePlaceholder\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  return PLACEHOLDER_INJECT;
+};
+const usePlaceholderShow = () => {
+  const PLACEHOLDER_SHOW_INJECT = inject(
+    SLATE_INNER_PLACEHOLDER_SHOW
+  );
+  if (PLACEHOLDER_SHOW_INJECT === void 0) {
+    throw new Error(
+      `The \`usePlaceholderShow\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  return PLACEHOLDER_SHOW_INJECT;
+};
+const usePlaceholderResize = () => {
+  const PLACEHOLDER_RESIZE_INJECT = inject(
+    SLATE_INNER_PLACEHOLDER_RESIZE
+  );
+  if (PLACEHOLDER_RESIZE_INJECT === void 0) {
+    throw new Error(
+      `The \`usePlaceholderResize\` hook must be used inside the <Slate> component's context.`
+    );
+  }
+  return PLACEHOLDER_RESIZE_INJECT;
+};
+const style = {
+  position: "absolute",
+  top: 0,
+  pointerEvents: "none",
+  width: "100%",
+  maxWidth: "100%",
+  display: "block",
+  opacity: "0.333",
+  userSelect: "none",
+  textDecoration: "none",
+  // Fixes https://github.com/udecode/plate/issues/2315
+  WebkitUserModify: IS_WEBKIT ? "inherit" : void 0
+};
+const PlaceholderComp = defineComponent({
+  name: "slate-placeholder",
+  setup() {
+    const placeholder = usePlaceholder();
+    const onPlaceholderResize = usePlaceholderResize();
+    const placeholderResizeObserver = ref();
+    const attributes = computed(() => ({
+      "data-slate-placeholder": true,
+      style,
+      contenteditable: false,
+      onVnodeMounted(vNode) {
+        if (vNode.el) {
+          placeholderResizeObserver.value = new ResizeObserver(() => {
+            var _a, _b;
+            onPlaceholderResize((_b = (_a = vNode.el) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height);
+          });
+          placeholderResizeObserver.value.observe(vNode.el);
+        }
+      },
+      onVnodeUnmounted() {
+        var _a;
+        (_a = placeholderResizeObserver.value) == null ? void 0 : _a.disconnect();
+        placeholderResizeObserver.value = void 0;
+        onPlaceholderResize();
+      }
+    }));
+    const renderPlaceholder = useRenderPlaceholder();
+    const editor = useEditor();
+    onMounted(() => {
+      nextTick(() => {
+        const element = EDITOR_TO_ELEMENT.get(editor).querySelector(
+          "[data-slate-placeholder]"
+        );
+        for (const node of element.childNodes) {
+          if (node.nodeType === 3 && node.textContent === "") {
+            element.removeChild(node);
+          }
+        }
+      });
+    });
+    return () => renderPlaceholder({
+      children: placeholder.value,
+      attributes: attributes.value
+    });
+  }
+});
 const TextComp = defineComponent({
   name: "slate-text",
   props: ["text", "element"],
@@ -419,6 +529,7 @@ const TextComp = defineComponent({
     });
     const renderLeaf = useRenderLeaf();
     const renderText = useRenderText();
+    const showPlaceholder = usePlaceholderShow();
     return () => renderText({
       text,
       attributes: { "data-slate-node": "text", ref: spanRef },
@@ -429,13 +540,16 @@ const TextComp = defineComponent({
           leaf: leaf.leaf,
           leafPosition: leaf.position,
           attributes: { "data-slate-leaf": true },
-          children: h(StringComp, {
-            text,
-            element,
-            leaf: leaf.leaf,
-            isLast: isLastText.value && i === leaves.value.length - 1,
-            key: `${text.text}-${leaf.leaf.text}-${i}`
-          })
+          children: [
+            showPlaceholder.value && h(PlaceholderComp),
+            h(StringComp, {
+              text,
+              element,
+              leaf: leaf.leaf,
+              isLast: isLastText.value && i === leaves.value.length - 1,
+              key: `${text.text}-${leaf.leaf.text}-${i}`
+            })
+          ]
         })
       )
     });
@@ -527,7 +641,8 @@ const ElementComp = defineComponent({
     return () => renderElement({
       attributes: attributes.value,
       children: children.value,
-      element
+      element,
+      editor
     });
   }
 });
@@ -546,61 +661,6 @@ const useComposing = () => {
   }
   return isComposing;
 };
-const style = {
-  position: "absolute",
-  top: 0,
-  pointerEvents: "none",
-  width: "100%",
-  maxWidth: "100%",
-  display: "block",
-  opacity: "0.333",
-  userSelect: "none",
-  textDecoration: "none",
-  // Fixes https://github.com/udecode/plate/issues/2315
-  WebkitUserModify: IS_WEBKIT ? "inherit" : void 0
-};
-const PlaceholderComp = defineComponent({
-  name: "slate-placeholder",
-  props: ["placeholder", "onPlaceholderResize"],
-  setup(props) {
-    const editor = useEditor();
-    const placeholderResizeObserver = ref();
-    const isComposing = useComposing();
-    const showPlaceholder = computed(
-      () => {
-        var _a;
-        return props.placeholder && ((_a = editor.children) == null ? void 0 : _a.length) === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === "" && !isComposing.value;
-      }
-    );
-    const attributes = computed(() => ({
-      "data-slate-placeholder": true,
-      style,
-      contenteditable: false,
-      onVnodeMounted(vNode) {
-        if (vNode.el) {
-          placeholderResizeObserver.value = new ResizeObserver(() => {
-            var _a, _b;
-            props.onPlaceholderResize(
-              (_b = (_a = vNode.el) == null ? void 0 : _a.getBoundingClientRect()) == null ? void 0 : _b.height
-            );
-          });
-          placeholderResizeObserver.value.observe(vNode.el);
-        }
-      },
-      onVnodeUnmounted() {
-        var _a;
-        (_a = placeholderResizeObserver.value) == null ? void 0 : _a.disconnect();
-        placeholderResizeObserver.value = void 0;
-        props.onPlaceholderResize();
-      }
-    }));
-    const renderPlaceholder = useRenderPlaceholder();
-    return () => showPlaceholder.value && renderPlaceholder({
-      children: props.placeholder,
-      attributes: attributes.value
-    });
-  }
-});
 const MUTATION_OBSERVER_CONFIG = {
   subtree: true,
   childList: true,
@@ -1729,6 +1789,15 @@ const Editable = defineComponent({
     const autocapitalize = computed(
       () => HAS_BEFORE_INPUT_SUPPORT || !CAN_USE_DOM ? attributes.autocapitalize : void 0
     );
+    const showPlaceholder = computed(
+      () => {
+        var _a;
+        return props.placeholder && ((_a = editor.children) == null ? void 0 : _a.length) === 1 && Array.from(Node.texts(editor)).length === 1 && Node.string(editor) === "" && !isComposing.value;
+      }
+    );
+    provide(SLATE_INNER_PLACEHOLDER, computed(() => placeholder));
+    provide(SLATE_INNER_PLACEHOLDER_SHOW, showPlaceholder);
+    provide(SLATE_INNER_PLACEHOLDER_RESIZE, onPlaceholderResize);
     return () => h(
       is,
       {
@@ -1761,13 +1830,7 @@ const Editable = defineComponent({
         onKeydown,
         onPaste
       },
-      [
-        ChildrenFC(editor, editor),
-        h(PlaceholderComp, {
-          placeholder,
-          onPlaceholderResize
-        })
-      ]
+      ChildrenFC(editor, editor)
     );
   }
 });

package/dist/yjs.js

@@ -2,7 +2,7 @@ import { d as isObject, T as Text, N as Node, P as Path, E as Editor, t as toRaw
 import { toRaw, ref, onMounted, onUnmounted, watch, onUpdated, computed } from "vue";
 import { XmlText, YTextEvent, createRelativePositionFromTypeIndex, createAbsolutePositionFromRelativePosition, createRelativePositionFromJSON, decodeRelativePosition, encodeRelativePosition, UndoManager, compareRelativePositions } from "yjs";
 import { L as Location } from "./location-H02Ot2Mm.js";
-import { j as useEditor, h as useFocused } from "./use-focused-De6S1bT0.js";
+import { j as useEditor, h as useFocused } from "./use-focused-BERGv09e.js";
 import { D as DOMEditor } from "./hotkeys-DdYAaAmE.js";
 function deepEquals(node, another) {
   for (const key in node) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.4.2",
+  "version": "0.5.1",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",