slate-vue3 0.3.2 → 0.3.4

package/README.md

@@ -6,7 +6,7 @@
 
 <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">
+    <img src="https://packagephobia.com/badge?p=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">
@@ -17,22 +17,24 @@
 </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
+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
 
-# 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/useRemoteCursorOverlayPositions.d.ts

@@ -1,6 +1,5 @@
 import { Ref } from 'vue';
 import { BaseRange, NodeMatch, Text } from '../../slate/index.ts';
-import { toRawWeakMap as WeakMap } from '../../share-tools/index.ts';
 import { JsonObject } from '@liveblocks/client';
 import { CursorState } from '../plugins/withCursors';
 import { CaretPosition, SelectionRect } from './utils';
@@ -9,4 +8,4 @@ export type CursorOverlayData<TCursorData extends JsonObject> = CursorState<TCur
     caretPosition: CaretPosition | null;
     selectionRects: SelectionRect[];
 };
-export declare function useRemoteCursorOverlayPositions<TCursorData extends JsonObject, TContainer extends HTMLElement = HTMLDivElement>(containerRef: Ref<TContainer>, shouldGenerateOverlay?: NodeMatch<Text>): readonly [import('vue').ComputedRef<CursorOverlayData<TCursorData>[]>, () => WeakMap<BaseRange, any>];
+export declare function useRemoteCursorOverlayPositions<TCursorData extends JsonObject, TContainer extends HTMLElement = HTMLDivElement>(containerRef: Ref<TContainer>, shouldGenerateOverlay?: NodeMatch<Text>): readonly [import('vue').ComputedRef<CursorOverlayData<TCursorData>[]>, () => void];

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,9 @@ 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, };
+export type { WithYjsOptions, YHistoryEditor, WithYHistoryOptions, CursorState, CursorStore, CursorEditor, CursorOverlayData, WithCursorsOptions, RemoteCursorChangeEventListener, CursorStateChangeEvent, RelativeRange, };
+export { YjsEditor, withYjs, withYHistory, withCursors, yTextToSlateElement, slateNodesToInsertDelta, slateRangeToRelativeRange, relativeRangeToSlateRange, slatePointToRelativePosition, relativePositionToSlatePoint, useRemoteCursorStates, useUnsetCursorPositionOnBlur, useRemoteCursorOverlayPositions, getCursorRange, };

package/dist/yjs.js

@@ -1291,19 +1291,19 @@ 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 = ref(/* @__PURE__ */ new Set());
-  const addChanged = changed.value.add.bind(changed.value);
+  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.value.size === 0) {
+    if (changed.size === 0) {
       return cursors;
     }
-    changed.value.forEach((clientId) => {
+    changed.forEach((clientId) => {
       const state = CursorEditor.cursorState(editor, clientId);
       if (state === null) {
         delete cursors.value[clientId.toString()];
@@ -1311,7 +1311,7 @@ function useRemoteCursorStateStore() {
       }
       cursors.value[clientId] = state;
     });
-    changed.value.clear();
+    changed.clear();
   };
   const subscribe = () => {
     CursorEditor.on(editor, "change", changeHandler);
@@ -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();
@@ -1479,8 +1475,7 @@ function useRemoteCursorOverlayPositions(containerRef, shouldGenerateOverlay) {
   const cursorStates = useRemoteCursorStates();
   const overlayPositionCache = ref(new toRawWeakMap());
   const overlayPositions = ref({});
-  useOnResize(containerRef, () => overlayPositionCache.value = new toRawWeakMap());
-  onUpdated(() => {
+  const flushOverlayCursor = () => {
     if (!containerRef.value) {
       return;
     }
@@ -1511,7 +1506,13 @@ function useRemoteCursorOverlayPositions(containerRef, shouldGenerateOverlay) {
     if (overlayPositionsChanged) {
       overlayPositions.value = updated;
     }
-  });
+  };
+  const refresh = () => {
+    overlayPositionCache.value = new toRawWeakMap();
+    flushOverlayCursor();
+  };
+  useOnResize(containerRef, refresh);
+  onUpdated(flushOverlayCursor);
   const overlayData = computed(
     () => Object.entries(cursorStates.value).map(([clientId, state]) => {
       const range = state.selection && getCursorRange(editor, state);
@@ -1524,7 +1525,6 @@ function useRemoteCursorOverlayPositions(containerRef, shouldGenerateOverlay) {
       };
     })
   );
-  const refresh = () => overlayPositionCache.value = new toRawWeakMap();
   return [overlayData, refresh];
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "slate-vue3",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "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>;