slate-vue3 0.3.3 → 0.3.5

package/README.md

@@ -5,34 +5,36 @@
 </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 href="https://www.npmjs.com/package/slate-vue3?activeTab=code">
+    <img src="https://img.shields.io/npm/unpacked-size/slate-vue3">
+    <img src="https://img.shields.io/bundlephobia/min/slate-vue3">
   </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">
+  <a href="./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?
+### Why use it?
 
 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/rich-text) of all of the examples
+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
 
-# How to use?
+<br />
 
-## 1. Install slate-vue3
+### How to use?
+
+#### 1. Install slate-vue3
 
 ```sh
 npm install slate-vue3
 ```
 
-## 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/examples/rich-text)
+#### 2. Now, you can use it in vue-sfc :point_right: [**live demo**](https://guan-erjia.github.io/slate-vue3/examples/rich-text)
 
 ```vue
 <script setup lang="ts">
@@ -71,16 +73,72 @@ editor.children = initialValue;
 </template>
 ```
 
-# FAQ
+<br />
+
+### Examples
+
+To get a sense for how you might use Slate, check out a few of the examples:
+
+- [**Rich text**](https://guan-erjia.github.io/slate-vue3/examples/rich-text) — the features you'd expect from a basic editor.
+- [**Collaborative editing**](https://guan-erjia.github.io/slate-vue3/examples/remote-cursor) — to achieve collaborative editing and cursor.
+- [**Markdown preview**](https://guan-erjia.github.io/slate-vue3/examples/markdown-preview) — to add key handlers for Markdown-like shortcuts.
+- [**Inlines**](https://guan-erjia.github.io/slate-vue3/examples/inlines) — wrap text in inline nodes with associated data.
+- [**Images**](https://guan-erjia.github.io/slate-vue3/examples/images) — to use void (text-less) nodes to add images.
+- [**Hovering toolbar**](https://guan-erjia.github.io/slate-vue3/examples/hovering-toolbar) — a hovering toolbar can be implemented.
+- [**Tables**](https://guan-erjia.github.io/slate-vue3/examples/tables) — to nest blocks to render more advanced components.
+- [**Paste HTML**](https://guan-erjia.github.io/slate-vue3/examples/paste-html) — to use an HTML serializer to handle pasted HTML.
+- [**Mentions**](https://guan-erjia.github.io/slate-vue3/examples/mentions) — to use inline void nodes for simple @-mentions.
+- [**See all the examples...**](https://guan-erjia.github.io/slate-vue3)
+
+If you have an idea for an example that shows a common use case, pull request it!
+
+<br/>
+
+### Documentation
+
+This [**`document`**](https://guan-erjia.github.io/slate-vue3) serves only as a supplement to the slate document and mainly provides case studies and differences between `slate-vue3` and `slate-react`
+
+If you're using `slate` for the first time, check out the [Getting Started](https://docs.slatejs.org/walkthroughs/01-installing-slate) walkthroughs and the [Concepts](http://docs.slatejs.org/concepts) to familiarize yourself with slate's architecture and mental models.
+
+- [**Walkthroughs**](https://docs.slatejs.org/walkthroughs/01-installing-slate)
+- [**Concepts**](https://docs.slatejs.org/concepts)
+- [**FAQ**](https://docs.slatejs.org/general/faq)
+- [**Resources**](https://docs.slatejs.org/general/resources)
+
+<br/>
+
+### Sub packages
+
+Due to the complexity of maintaining multiple packages and the lack of reusability of sub packages in other frameworks, slate-vue3 does not use workspace and only performs sub packaging during packaging
+
+| **Package**                                              |                                                                       **Version** | **Description**                                  |
+| :------------------------------------------------------- | --------------------------------------------------------------------------------: | :----------------------------------------------- |
+| [`slate-vue3/core`](./packages/slate)                    | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | slate's core data model logic.                   |
+| [`slate-vue3/dom`](./packages/slate)                     | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | DOM implementation of slate                      |
+| [`slate-vue3/history`](./packages/slate-history)         | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | a plugin that adds undo/redo history to slate.   |
+| [`slate-vue3/hyperscript`](./packages/slate-hyperscript) | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | a hyperscript tool to write JSX slate documents! |
+| [`slate-vue3/yjs`](./packages/slate-yjs)                 | ![](https://img.shields.io/npm/v/slate-vue3.svg?maxAge=3600&label=&colorB=007ec6) | integration of `slate-yjs`                       |
+
+<br />
+
+### Contributing!
+
+Welcome to provide suggestions on the issue, it would be even better if **`PR`** could be mentioned along with it
+
+`slate-vue3` is [MIT-licensed](./License.md).
+
+<br/>
+
+### FAQ
 
-### 1. Why do I have to pass renderFunction into <Slate /> component ?
+##### 1. Why do I have to pass renderFunction into <Slate /> component ?
 
 This ensures that your rich text is as expected, and slate-vue3 provides some default rendering functions, you can directly use the default rendering behavior
 
-### 2. Can I use jsx in slate-vue3 ?
+##### 2. Can I use jsx in slate-vue3 ?
 
 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/slate-yjs/hooks/useDecorateRemoteCursors.d.ts

@@ -0,0 +1,25 @@
+import { BaseRange, BaseText, NodeEntry } from '../../slate/index.ts';
+import { DOMEditor } from '../../slate-dom/index.ts';
+import { JsonObject } from '@liveblocks/client';
+import { CursorEditor, CursorState } from '../plugins/withCursors';
+export declare const REMOTE_CURSOR_DECORATION_PREFIX = "remote-cursor-";
+export declare const REMOTE_CURSOR_CARET_DECORATION_PREFIX = "remote-caret-";
+export type RemoteCaretDecoration<TCursorData extends JsonObject = JsonObject> = {
+    [key: `${typeof REMOTE_CURSOR_CARET_DECORATION_PREFIX}${string}`]: CursorState<TCursorData> & {
+        isBackward: boolean;
+    };
+};
+export type RemoteCursorDecoration<TCursorData extends JsonObject = JsonObject> = {
+    [key: `${typeof REMOTE_CURSOR_DECORATION_PREFIX}${string}`]: CursorState<TCursorData>;
+};
+export type RemoteCursorDecoratedRange<TCursorData extends JsonObject = JsonObject> = BaseRange & RemoteCursorDecoration<TCursorData>;
+export type RemoteCaretDecoratedRange<TCursorData extends JsonObject = JsonObject> = BaseRange & RemoteCaretDecoration<TCursorData>;
+export type TextWithRemoteCursors<TCursorData extends JsonObject = JsonObject> = BaseText & RemoteCursorDecoration<TCursorData> & RemoteCaretDecoration<TCursorData>;
+export declare function getRemoteCursorsOnLeaf<TCursorData extends JsonObject, TLeaf extends TextWithRemoteCursors<TCursorData>>(leaf: TLeaf): CursorState<TCursorData>[];
+export declare function getRemoteCaretsOnLeaf<TCursorData extends JsonObject, TLeaf extends TextWithRemoteCursors<TCursorData>>(leaf: TLeaf): (CursorState<TCursorData> & {
+    isBackward: boolean;
+})[];
+export type UseDecorateRemoteCursorsOptions = {
+    carets?: boolean;
+};
+export declare function useDecorateRemoteCursors<TCursorData extends JsonObject = JsonObject>(editor: CursorEditor<TCursorData> & DOMEditor, carets: boolean): (entry: NodeEntry) => (RemoteCursorDecoratedRange<TCursorData> | RemoteCaretDecoratedRange<TCursorData>)[];

package/dist/slate-yjs/hooks/useRemoteCursorStates.d.ts

@@ -1,4 +1,6 @@
 import { Ref } from 'vue';
 import { JsonObject } from '@liveblocks/client';
+import { Store } from './utils';
 import { CursorState } from '../plugins/withCursors';
+export type CursorStore<TCursorData extends JsonObject = JsonObject> = Store<Record<string, CursorState<TCursorData>>>;
 export declare function useRemoteCursorStates<TCursorData extends JsonObject = JsonObject>(): Ref<Record<string, CursorState<TCursorData>>>;

package/dist/slate-yjs/hooks/useUnsetCursorPositionOnBlur.d.ts

@@ -1 +1,2 @@
-export declare function useUnsetCursorPositionOnBlur(): void;
+import { JsonObject } from '@liveblocks/client';
+export declare function useUnsetCursorPositionOnBlur<TCursor extends JsonObject>(): void;

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

@@ -2,9 +2,10 @@ import { RelativeRange } from './model/types';
 import { CursorEditor, CursorState, CursorStateChangeEvent, RemoteCursorChangeEventListener, WithCursorsOptions, WithYHistoryOptions, WithYjsOptions, YHistoryEditor, withCursors, withYHistory, withYjs, YjsEditor } from './plugins';
 import { slateNodesToInsertDelta, yTextToSlateElement } from './utils/convert';
 import { relativePositionToSlatePoint, relativeRangeToSlateRange, slatePointToRelativePosition, slateRangeToRelativeRange } from './utils/position';
-import { useRemoteCursorStates } from './hooks/useRemoteCursorStates';
+import { CursorStore, useRemoteCursorStates } from './hooks/useRemoteCursorStates';
 import { useUnsetCursorPositionOnBlur } from './hooks/useUnsetCursorPositionOnBlur';
 import { getCursorRange } from './hooks/utils';
 import { CursorOverlayData, useRemoteCursorOverlayPositions } from './hooks/useRemoteCursorOverlayPositions';
-export type { WithYjsOptions, YHistoryEditor, WithYHistoryOptions, CursorEditor, WithCursorsOptions, CursorState, RemoteCursorChangeEventListener, CursorStateChangeEvent, RelativeRange, CursorOverlayData, };
-export { YjsEditor, withYjs, withYHistory, withCursors, yTextToSlateElement, slateNodesToInsertDelta, slateRangeToRelativeRange, relativeRangeToSlateRange, slatePointToRelativePosition, relativePositionToSlatePoint, useRemoteCursorStates, useUnsetCursorPositionOnBlur, getCursorRange, useRemoteCursorOverlayPositions, };
+import { getRemoteCaretsOnLeaf, getRemoteCursorsOnLeaf, REMOTE_CURSOR_CARET_DECORATION_PREFIX, REMOTE_CURSOR_DECORATION_PREFIX, RemoteCaretDecoratedRange, RemoteCaretDecoration, RemoteCursorDecoratedRange, RemoteCursorDecoration, TextWithRemoteCursors, useDecorateRemoteCursors, UseDecorateRemoteCursorsOptions } from './hooks/useDecorateRemoteCursors';
+export type { WithYjsOptions, YHistoryEditor, WithYHistoryOptions, CursorState, CursorStore, CursorEditor, CursorOverlayData, WithCursorsOptions, RemoteCursorChangeEventListener, CursorStateChangeEvent, RelativeRange, UseDecorateRemoteCursorsOptions, RemoteCursorDecoration, RemoteCaretDecoration, RemoteCursorDecoratedRange, RemoteCaretDecoratedRange, TextWithRemoteCursors, };
+export { YjsEditor, withYjs, withYHistory, withCursors, yTextToSlateElement, slateNodesToInsertDelta, slateRangeToRelativeRange, relativeRangeToSlateRange, slatePointToRelativePosition, relativePositionToSlatePoint, useRemoteCursorStates, useUnsetCursorPositionOnBlur, useRemoteCursorOverlayPositions, getCursorRange, getRemoteCursorsOnLeaf, getRemoteCaretsOnLeaf, useDecorateRemoteCursors, REMOTE_CURSOR_DECORATION_PREFIX, REMOTE_CURSOR_CARET_DECORATION_PREFIX };

package/dist/yjs.js

@@ -1291,7 +1291,7 @@ function withCursors(editor, awareness, {
   return e;
 }
 const EDITOR_TO_CURSOR_STORE = new toRawWeakMap();
-function useRemoteCursorStateStore() {
+function useRemoteCursorStates() {
   const editor = useEditor();
   const cursors = ref({});
   const changed = /* @__PURE__ */ new Set();
@@ -1319,10 +1319,6 @@ function useRemoteCursorStateStore() {
   };
   const store = [subscribe, cursors];
   EDITOR_TO_CURSOR_STORE.set(editor, store);
-  return store;
-}
-function useRemoteCursorStates() {
-  const [subscribe, cursors] = useRemoteCursorStateStore();
   let unsubscribe;
   onMounted(() => {
     unsubscribe = subscribe();
@@ -1531,14 +1527,94 @@ function useRemoteCursorOverlayPositions(containerRef, shouldGenerateOverlay) {
   );
   return [overlayData, refresh];
 }
+const REMOTE_CURSOR_DECORATION_PREFIX = "remote-cursor-";
+const REMOTE_CURSOR_CARET_DECORATION_PREFIX = "remote-caret-";
+function getRemoteCursorsOnLeaf(leaf) {
+  return Object.entries(leaf).filter(([key]) => key.startsWith(REMOTE_CURSOR_DECORATION_PREFIX)).map(([, data]) => data);
+}
+function getRemoteCaretsOnLeaf(leaf) {
+  return Object.entries(leaf).filter(([key]) => key.startsWith(REMOTE_CURSOR_CARET_DECORATION_PREFIX)).map(([, data]) => data);
+}
+function getDecoration(clientId, state, range, caret) {
+  if (!caret) {
+    const key2 = `${REMOTE_CURSOR_DECORATION_PREFIX}${clientId}`;
+    return { ...range, [key2]: state };
+  }
+  const key = `${REMOTE_CURSOR_CARET_DECORATION_PREFIX}${clientId}`;
+  return {
+    ...range,
+    anchor: range.focus,
+    [key]: state
+  };
+}
+function useDecorateRemoteCursors(editor, carets) {
+  const cursors = ref({});
+  const changed = /* @__PURE__ */ new Set();
+  const addChanged = changed.add.bind(changed);
+  const changeHandler = (event) => {
+    event.added.forEach(addChanged);
+    event.removed.forEach(addChanged);
+    event.updated.forEach(addChanged);
+    if (changed.size === 0) {
+      return cursors;
+    }
+    changed.forEach((clientId) => {
+      const state = CursorEditor.cursorState(editor, clientId);
+      if (state === null) {
+        delete cursors.value[clientId.toString()];
+        return;
+      }
+      cursors.value[clientId] = state;
+    });
+    changed.clear();
+  };
+  const subscribe = () => {
+    CursorEditor.on(editor, "change", changeHandler);
+    return () => CursorEditor.off(editor, "change", changeHandler);
+  };
+  let unsubscribe;
+  onMounted(() => {
+    unsubscribe = subscribe();
+  });
+  onUnmounted(() => {
+    unsubscribe == null ? void 0 : unsubscribe();
+  });
+  return (entry) => {
+    const [, path] = entry;
+    if (path.length !== 1) {
+      return [];
+    }
+    return Object.entries(cursors.value).flatMap(([clientId, state]) => {
+      const range = getCursorRange(editor, state);
+      if (!range) {
+        return [];
+      }
+      if (carets && Range.isCollapsed(range)) {
+        return getDecoration(clientId, state, range, true);
+      }
+      if (!carets) {
+        return getDecoration(clientId, state, range, false);
+      }
+      return [
+        getDecoration(clientId, state, range, false),
+        getDecoration(clientId, state, range, true)
+      ];
+    });
+  };
+}
 export {
+  REMOTE_CURSOR_CARET_DECORATION_PREFIX,
+  REMOTE_CURSOR_DECORATION_PREFIX,
   YjsEditor,
   getCursorRange,
+  getRemoteCaretsOnLeaf,
+  getRemoteCursorsOnLeaf,
   relativePositionToSlatePoint,
   relativeRangeToSlateRange,
   slateNodesToInsertDelta,
   slatePointToRelativePosition,
   slateRangeToRelativeRange,
+  useDecorateRemoteCursors,
   useRemoteCursorOverlayPositions,
   useRemoteCursorStates,
   useUnsetCursorPositionOnBlur,

package/package.json

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

package/dist/slate-yjs/hooks/useRemoteCursorStateStore.d.ts

@@ -1,5 +0,0 @@
-import { JsonObject } from '@liveblocks/client';
-import { Store } from './utils';
-import { CursorState } from '../plugins/withCursors';
-export type CursorStore<TCursorData extends JsonObject = JsonObject> = Store<Record<string, CursorState<TCursorData>>>;
-export declare function useRemoteCursorStateStore<TCursorData extends JsonObject = JsonObject>(): CursorStore<TCursorData>;