slate-vue3 0.5.2 → 0.6.0

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-BECAnoU4.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-FUfSF1v5.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, d as d2 } from "./batch-dirty-paths-DGoKWQz8.js";
 import { L as L2, S as S3 } from "./location-H02Ot2Mm.js";
 export {

package/dist/{create-editor-BECAnoU4.js → create-editor-FUfSF1v5.js}

@@ -414,7 +414,7 @@ const getFragment = (editor) => {
   }
   return [];
 };
-const normalizeNode = (editor, entry) => {
+const normalizeNode = (editor, entry, options) => {
   const [node2, path2] = entry;
   if (Text.isText(node2)) {
     return;
@@ -439,7 +439,14 @@ const normalizeNode = (editor, entry) => {
     const isInlineOrText = Text.isText(child) || Element.isElement(child) && editor.isInline(child);
     if (isInlineOrText !== shouldHaveInlines) {
       if (isInlineOrText) {
-        Transforms.removeNodes(editor, { at: path2.concat(n), voids: true });
+        if (options == null ? void 0 : options.fallbackElement) {
+          Transforms.wrapNodes(editor, options.fallbackElement(), {
+            at: path2.concat(n),
+            voids: true
+          });
+        } else {
+          Transforms.removeNodes(editor, { at: path2.concat(n), voids: true });
+        }
       } else {
         Transforms.unwrapNodes(editor, { at: path2.concat(n), voids: true });
       }
@@ -507,25 +514,19 @@ const above = (editor, options = {}) => {
   if (!at) {
     return;
   }
-  const path2 = Editor.path(editor, at);
+  let path2 = Editor.path(editor, at);
+  if (!Range.isRange(at) || Path.equals(at.focus.path, at.anchor.path)) {
+    if (path2.length === 0) return;
+    path2 = Path.parent(path2);
+  }
   const reverse = mode === "lowest";
-  for (const [n, p] of Editor.levels(editor, {
+  const [firstMatch] = Editor.levels(editor, {
     at: path2,
     voids,
     match,
     reverse
-  })) {
-    if (Text.isText(n)) continue;
-    if (Range.isRange(at)) {
-      if (Path.isAncestor(p, at.anchor.path) && Path.isAncestor(p, at.focus.path)) {
-        return [n, p];
-      }
-    } else {
-      if (!Path.equals(path2, p)) {
-        return [n, p];
-      }
-    }
-  }
+  });
+  return firstMatch;
 };
 const addMark = (editor, key, value) => {
   const { selection } = editor;
@@ -1527,12 +1528,9 @@ const insertFragment = (editor, fragment2, options = {}) => {
     const isBlockStart = Editor.isStart(editor, at, blockPath);
     const isBlockEnd = Editor.isEnd(editor, at, blockPath);
     const isBlockEmpty = isBlockStart && isBlockEnd;
-    const mergeStart = !isBlockStart || isBlockStart && isBlockEnd;
-    const mergeEnd = !isBlockEnd;
-    const [, firstPath] = Node.first({ children: fragment2 }, []);
-    const [, lastPath] = Node.last({ children: fragment2 }, []);
-    const matches = [];
-    const matcher = ([n, p]) => {
+    const [, firstLeafPath] = Node.first({ children: fragment2 }, []);
+    const [, lastLeafPath] = Node.last({ children: fragment2 }, []);
+    const shouldInsert = ([n, p]) => {
       const isRoot = p.length === 0;
       if (isRoot) {
         return false;
@@ -1540,33 +1538,35 @@ const insertFragment = (editor, fragment2, options = {}) => {
       if (isBlockEmpty) {
         return true;
       }
-      if (mergeStart && Path.isAncestor(p, firstPath) && Element.isElement(n) && !editor.isVoid(n) && !editor.isInline(n)) {
+      if (!isBlockStart && Path.isAncestor(p, firstLeafPath) && Element.isElement(n) && !editor.isVoid(n) && !editor.isInline(n)) {
         return false;
       }
-      if (mergeEnd && Path.isAncestor(p, lastPath) && Element.isElement(n) && !editor.isVoid(n) && !editor.isInline(n)) {
+      if (!isBlockEnd && Path.isAncestor(p, lastLeafPath) && Element.isElement(n) && !editor.isVoid(n) && !editor.isInline(n)) {
         return false;
       }
       return true;
     };
-    for (const entry of Node.nodes({ children: fragment2 }, { pass: matcher })) {
-      if (matcher(entry)) {
-        matches.push(entry);
-      }
-    }
+    let starting = true;
     const starts = [];
     const middles = [];
     const ends = [];
-    let starting = true;
-    let hasBlocks2 = false;
-    for (const [node2] of matches) {
-      if (Element.isElement(node2) && !editor.isInline(node2)) {
+    for (const entry of Node.nodes(
+      { children: fragment2 },
+      { pass: shouldInsert }
+    )) {
+      const [node2, path2] = entry;
+      if (starting && Element.isElement(node2) && !editor.isInline(node2) && !Path.isAncestor(path2, firstLeafPath)) {
         starting = false;
-        hasBlocks2 = true;
-        middles.push(node2);
-      } else if (starting) {
-        starts.push(node2);
-      } else {
-        ends.push(node2);
+      }
+      if (shouldInsert(entry)) {
+        if (Element.isElement(node2) && !editor.isInline(node2)) {
+          starting = false;
+          middles.push(node2);
+        } else if (starting) {
+          starts.push(node2);
+        } else {
+          ends.push(node2);
+        }
       }
     }
     const [inlineMatch] = Editor.nodes(editor, {
@@ -1586,11 +1586,12 @@ const insertFragment = (editor, fragment2, options = {}) => {
       editor,
       isInlineEnd ? Path.next(inlinePath) : inlinePath
     );
+    const splitBlock = ends.length > 0;
     Transforms.splitNodes(editor, {
       at,
-      match: (n) => hasBlocks2 ? Element.isElement(n) && Editor.isBlock(editor, n) : Text.isText(n) || Editor.isInline(editor, n),
-      mode: hasBlocks2 ? "lowest" : "highest",
-      always: hasBlocks2 && (!isBlockStart || starts.length > 0) && (!isBlockEnd || ends.length > 0),
+      match: (n) => splitBlock ? Element.isElement(n) && Editor.isBlock(editor, n) : Text.isText(n) || Editor.isInline(editor, n),
+      mode: splitBlock ? "lowest" : "highest",
+      always: splitBlock && (!isBlockStart || starts.length > 0) && (!isBlockEnd || ends.length > 0),
       voids
     });
     const startRef = Editor.pathRef(

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, R as Range, N as Node, T as Text, a as Element, d as isObject } from "./batch-dirty-paths-DGoKWQz8.js";
-import { c as createEditor$1 } from "./create-editor-BECAnoU4.js";
+import { c as createEditor$1 } from "./create-editor-FUfSF1v5.js";
 import "vue";
 const ANCHOR = new toRawWeakMap();
 const FOCUS = new toRawWeakMap();

package/dist/index.js

@@ -1,5 +1,5 @@
-import { S as SLATE_USE_SELECTED, a as SLATE_STATE_SELECTION } from "./use-focused-BWpvB-A8.js";
-import { g, D, c, e, f, d, E, b, u, j, h, i } from "./use-focused-BWpvB-A8.js";
+import { S as SLATE_USE_SELECTED, a as SLATE_USE_SELECTION } from "./use-focused-C00bi8rh.js";
+import { g, D, c, e, f, d, E, b, u, j, h, i } from "./use-focused-C00bi8rh.js";
 import { inject } from "vue";
 import { t } from "./batch-dirty-paths-DGoKWQz8.js";
 const useSelected = () => {
@@ -12,7 +12,7 @@ const useSelected = () => {
   return selected;
 };
 const useSelection = () => {
-  const selection = inject(SLATE_STATE_SELECTION);
+  const selection = inject(SLATE_USE_SELECTION);
   if (selection === void 0) {
     throw new Error(
       `The \`useSelection\` hook must be used inside the <Slate> component's context.`

package/dist/slate/interfaces/editor.d.ts

@@ -20,6 +20,7 @@ export interface BaseEditor {
     markableVoid: (element: Element) => boolean;
     normalizeNode: (entry: NodeEntry, options?: {
         operation?: Operation;
+        fallbackElement?: () => Element;
     }) => void;
     onChange: (options?: {
         operation?: Operation;

package/dist/slate/interfaces/node.d.ts

@@ -85,7 +85,7 @@ export interface NodeInterface {
      */
     extractProps: (node: Node) => NodeProps;
     /**
-     * Get the first node entry in a root node from a path.
+     * Get the first leaf node entry in a root node from a path.
      */
     first: (root: Node, path: Path) => NodeEntry;
     /**
@@ -114,7 +114,7 @@ export interface NodeInterface {
      */
     isNodeList: (value: any, options?: NodeIsNodeOptions) => value is Node[];
     /**
-     * Get the last node entry in a root node from a path.
+     * Get the last leaf node entry in a root node from a path.
      */
     last: (root: Node, path: Path) => NodeEntry;
     /**

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

@@ -1,15 +1,14 @@
 export declare const SLATE_USE_EDITOR: unique symbol;
-export declare const SLATE_USE_DECORATE: unique symbol;
 export declare const SLATE_USE_SELECTED: unique symbol;
+export declare const SLATE_USE_FOCUSED: unique symbol;
+export declare const SLATE_USE_COMPOSING: unique symbol;
+export declare const SLATE_USE_READ_ONLY: unique symbol;
 export declare const SLATE_USE_SELECTION: unique symbol;
-export declare const SLATE_STATE_FOCUS: unique symbol;
-export declare const SLATE_STATE_COMPOSING: unique symbol;
-export declare const SLATE_STATE_READ_ONLY: unique symbol;
-export declare const SLATE_STATE_SELECTION: unique symbol;
 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_RENDER_TEXT: unique symbol;
+export declare const SLATE_INNER_RENDER_DECORATE: 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;

package/dist/{use-focused-BWpvB-A8.js → use-focused-C00bi8rh.js}

@@ -1,17 +1,17 @@
-import { h, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, watch, nextTick, renderList, Fragment, onUpdated, useAttrs, reactive, toRaw } from "vue";
+import { h, defineComponent, provide, ref, computed, onMounted, onUnmounted, renderSlot, inject, watch, renderList, Fragment, onUpdated, 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, 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, v as IS_FIREFOX, 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, 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, v as IS_FIREFOX, 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, 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, w as IS_FIREFOX_LEGACY, x as IS_IOS, 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");
-const SLATE_STATE_FOCUS = Symbol("SLATE_STATE_FOCUS");
-const SLATE_STATE_COMPOSING = Symbol("SLATE_STATE_COMPOSING");
-const SLATE_STATE_READ_ONLY = Symbol("SLATE_STATE_READ_ONLY");
-const SLATE_STATE_SELECTION = Symbol("SLATE_STATE_SELECTION");
+const SLATE_USE_FOCUSED = Symbol("SLATE_USE_FOCUSED");
+const SLATE_USE_COMPOSING = Symbol("SLATE_USE_COMPOSING");
+const SLATE_USE_READ_ONLY = Symbol("SLATE_USE_READ_ONLY");
+const SLATE_USE_SELECTION = Symbol("SLATE_USE_SELECTION");
 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_RENDER_TEXT = Symbol("SLATE_INNER_RENDER_TEXT");
+const SLATE_INNER_RENDER_DECORATE = Symbol("SLATE_INNER_RENDER_DECORATE");
 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");
@@ -204,17 +204,17 @@ const Slate = defineComponent({
       );
     }
     provide(SLATE_USE_EDITOR, editor);
-    provide(SLATE_USE_DECORATE, decorate);
+    provide(SLATE_INNER_RENDER_DECORATE, decorate);
     provide(SLATE_INNER_RENDER_ELEMENT, renderElement);
     provide(SLATE_INNER_RENDER_LEAF, renderLeaf);
     provide(SLATE_INNER_RENDER_TEXT, renderText);
     provide(SLATE_INNER_RENDER_PLACEHOLDER, renderPlaceholder);
     const isFocus = ref(DOMEditor.isFocused(editor));
     const selection = computed(() => editor.selection);
-    provide(SLATE_STATE_FOCUS, isFocus);
-    provide(SLATE_STATE_COMPOSING, ref(false));
-    provide(SLATE_STATE_READ_ONLY, ref(false));
-    provide(SLATE_STATE_SELECTION, selection);
+    provide(SLATE_USE_FOCUSED, isFocus);
+    provide(SLATE_USE_COMPOSING, ref(false));
+    provide(SLATE_USE_READ_ONLY, ref(false));
+    provide(SLATE_USE_SELECTION, selection);
     const focusCb = () => isFocus.value = DOMEditor.isFocused(editor);
     const changeEffect = ref(0);
     provide(SLATE_INNER_CHANGE_EFFECT_INJECT, changeEffect);
@@ -272,7 +272,7 @@ function direction(value) {
   return rtl.test(source) ? "rtl" : ltr.test(source) ? "ltr" : "neutral";
 }
 const useDecorate = () => {
-  const decorate = inject(SLATE_USE_DECORATE);
+  const decorate = inject(SLATE_INNER_RENDER_DECORATE);
   if (decorate === void 0) {
     throw new Error(
       `The \`useDecorate\` hook must be used inside the <Slate> component's context.`
@@ -316,11 +316,10 @@ const StringComp = defineComponent({
       }
       return null;
     });
-    return () => zeroStringAttrs.value ? h(
-      "span",
-      zeroStringAttrs.value,
-      (IS_ANDROID || IS_IOS) && isLineBreak.value ? h("br") : "\uFEFF"
-    ) : h("span", { "data-slate-string": true }, getTextContent.value);
+    return () => zeroStringAttrs.value ? h("span", zeroStringAttrs.value, [
+      !IS_ANDROID || !isLineBreak ? "\uFEFF" : null,
+      isLineBreak && !IS_FIREFOX ? h("br") : null
+    ]) : h("span", { "data-slate-string": true }, getTextContent.value);
   }
 });
 const useRenderElement = () => {
@@ -383,7 +382,7 @@ 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.`
+      `The \`useMarkPlaceholder\` hook must be used inside the <Slate> component's context.`
     );
   }
   return MARK_PLACEHOLDER_INJECT;
@@ -461,19 +460,6 @@ const PlaceholderComp = defineComponent({
       }
     }));
     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
@@ -541,14 +527,14 @@ const TextComp = defineComponent({
           leafPosition: leaf.position,
           attributes: { "data-slate-leaf": true },
           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}`
-            })
+            }),
+            showPlaceholder.value && h(PlaceholderComp)
           ]
         })
       )
@@ -556,7 +542,7 @@ const TextComp = defineComponent({
   }
 });
 const useReadOnly = () => {
-  const isReadOnly = inject(SLATE_STATE_READ_ONLY);
+  const isReadOnly = inject(SLATE_USE_READ_ONLY);
   if (isReadOnly === void 0) {
     throw new Error(
       `The \`useFocused\` hook must be used inside the <Slate> component's context.`
@@ -637,11 +623,8 @@ const ElementComp = defineComponent({
       const tag = isInline.value ? "span" : "div";
       return h(tag, VOID_CHILDREN_ATTRS, h(TextComp, { element, text }));
     });
-    onUpdated(() => {
+    IS_FIREFOX && onUpdated(() => {
       var _a;
-      if (!IS_FIREFOX) {
-        return;
-      }
       const nodes = (_a = elementRef.value) == null ? void 0 : _a.childNodes;
       if (!(nodes == null ? void 0 : nodes.length)) {
         return;
@@ -667,7 +650,7 @@ const ChildrenFC = (element, editor) => renderList(element.children, (child, i)
   return Element.isElement(child) ? h(ElementComp, { element: child, key: key.id }) : h(TextComp, { text: child, element, key: key.id });
 });
 const useComposing = () => {
-  const isComposing = inject(SLATE_STATE_COMPOSING);
+  const isComposing = inject(SLATE_USE_COMPOSING);
   if (isComposing === void 0) {
     throw new Error(
       `The \`useFocused\` hook must be used inside the <Slate> component's context.`
@@ -1849,7 +1832,7 @@ const Editable = defineComponent({
   }
 });
 const useFocused = () => {
-  const isFocus = inject(SLATE_STATE_FOCUS);
+  const isFocus = inject(SLATE_USE_FOCUSED);
   if (isFocus === void 0) {
     throw new Error(
       `The \`useFocused\` hook must be used inside the <Slate> component's context.`
@@ -1861,7 +1844,7 @@ export {
   DEFAULT_ELEMENT_RENDER as D,
   Editable as E,
   SLATE_USE_SELECTED as S,
-  SLATE_STATE_SELECTION as a,
+  SLATE_USE_SELECTION as a,
   Slate as b,
   DEFAULT_LEAF_RENDER as c,
   DEFAULT_TEXT_RENDER as d,

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-BWpvB-A8.js";
+import { j as useEditor, h as useFocused } from "./use-focused-C00bi8rh.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.5.2",
+  "version": "0.6.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",