@getguru/slate-yjs-core 1.0.3

package/src/utils/object.ts

@@ -0,0 +1,93 @@
+type InspectableObject = Record<string | number | symbol, unknown>;
+
+function isObject(o: unknown): o is InspectableObject {
+  return Object.prototype.toString.call(o) === '[object Object]';
+}
+
+export function isPlainObject(o: unknown): o is InspectableObject {
+  if (!isObject(o)) {
+    return false;
+  }
+
+  // If has modified constructor
+  const ctor = o.constructor;
+  if (ctor === undefined) {
+    return true;
+  }
+
+  // If has modified prototype
+  const prot = ctor.prototype;
+  if (isObject(prot) === false) {
+    return false;
+  }
+
+  // If constructor does not have an Object-specific method
+  if (prot.hasOwnProperty('isPrototypeOf') === false) {
+    return false;
+  }
+
+  // Most likely a plain Object
+  return true;
+}
+
+// Slates deep equality function: https://github.com/ianstormtaylor/slate/blob/68aff89e892fe15a16314398ff052ade6068900b/packages/slate/src/utils/deep-equal.ts#L13
+// We have to match slates deepEquals behavior to merge insert deltas in the same way slate does.
+export function deepEquals(
+  node: InspectableObject,
+  another: InspectableObject
+): boolean {
+  // eslint-disable-next-line guard-for-in
+  for (const key in node) {
+    const a = node[key];
+    const b = another[key];
+
+    if (isPlainObject(a) && isPlainObject(b)) {
+      if (!deepEquals(a, b)) {
+        return false;
+      }
+    } else if (Array.isArray(a) && Array.isArray(b)) {
+      if (a.length !== b.length) return false;
+      for (let i = 0; i < a.length; i++) {
+        if (a[i] !== b[i]) {
+          return false;
+        }
+      }
+    } else if (a !== b) {
+      return false;
+    }
+  }
+
+  for (const key in another) {
+    if (node[key] === undefined && another[key] !== undefined) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function pick<TObj, TKeys extends keyof TObj>(
+  obj: TObj,
+  ...keys: TKeys[]
+): Pick<TObj, TKeys> {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => keys.includes(key as TKeys))
+  ) as Pick<TObj, TKeys>;
+}
+
+export function omit<TObj, TKeys extends keyof TObj>(
+  obj: TObj,
+  ...keys: TKeys[]
+): Omit<TObj, TKeys> {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([key]) => !keys.includes(key as TKeys))
+  ) as Omit<TObj, TKeys>;
+}
+
+export function omitNullEntries<TObj>(obj: TObj): {
+  [K in keyof TObj]: TObj[K] extends null ? never : K;
+} {
+  return Object.fromEntries(
+    Object.entries(obj).filter(([, value]) => value !== null)
+  ) as { [K in keyof TObj]: TObj[K] extends null ? never : K };
+}

package/src/utils/position.ts

@@ -0,0 +1,300 @@
+import { BasePoint, BaseRange, Node, Text } from 'slate';
+import * as Y from 'yjs';
+import { InsertDelta, RelativeRange, TextRange } from '../model/types';
+import { getInsertDeltaLength, yTextToInsertDelta } from './delta';
+import { isSyncSkewError } from './errors';
+import { getSlatePath, getYTarget, yOffsetToSlateOffsets } from './location';
+import { assertDocumentAttachment } from './yjs';
+
+export const STORED_POSITION_PREFIX = '__slateYjsStoredPosition_';
+
+export function slatePointToRelativePosition(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  point: BasePoint
+): Y.RelativePosition {
+  const { yTarget, yParent, textRange } = getYTarget(
+    sharedRoot,
+    slateRoot,
+    point.path
+  );
+
+  if (yTarget) {
+    throw new Error(
+      'Slate point points to a non-text element inside sharedRoot'
+    );
+  }
+
+  const index = textRange.start + point.offset;
+  return Y.createRelativePositionFromTypeIndex(
+    yParent,
+    index,
+    index === textRange.end ? -1 : 0
+  );
+}
+
+export function absolutePositionToSlatePoint(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  { type, index, assoc }: Y.AbsolutePosition
+): BasePoint | null {
+  if (!(type instanceof Y.XmlText)) {
+    throw new Error('Absolute position points to a non-XMLText');
+  }
+
+  try {
+    const parentPath = getSlatePath(sharedRoot, slateRoot, type);
+    const parent = Node.get(slateRoot, parentPath);
+
+    if (Text.isText(parent)) {
+      return null;
+    }
+
+    const [pathOffset, textOffset] = yOffsetToSlateOffsets(parent, index, {
+      assoc,
+    });
+
+    const target = parent.children[pathOffset];
+    if (!Text.isText(target)) {
+      return null;
+    }
+
+    return { path: [...parentPath, pathOffset], offset: textOffset };
+  } catch (error) {
+    if (isSyncSkewError(error)) {
+      return null;
+    }
+    throw error;
+  }
+}
+
+export function relativePositionToSlatePoint(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  pos: Y.RelativePosition
+): BasePoint | null {
+  if (!sharedRoot.doc) {
+    throw new Error("sharedRoot isn't attach to a yDoc");
+  }
+
+  const absPos = Y.createAbsolutePositionFromRelativePosition(
+    pos,
+    sharedRoot.doc
+  );
+
+  return absPos && absolutePositionToSlatePoint(sharedRoot, slateRoot, absPos);
+}
+
+export function getStoredPosition(
+  sharedRoot: Y.XmlText,
+  key: string
+): Y.RelativePosition | null {
+  const rawPosition = sharedRoot.getAttribute(STORED_POSITION_PREFIX + key);
+  if (!rawPosition) {
+    return null;
+  }
+
+  return Y.decodeRelativePosition(rawPosition);
+}
+
+export function getStoredPositions(
+  sharedRoot: Y.XmlText
+): Record<string, Y.RelativePosition> {
+  return Object.fromEntries(
+    Object.entries(sharedRoot.getAttributes())
+      .filter(([key]) => key.startsWith(STORED_POSITION_PREFIX))
+      .map(([key, position]) => [
+        key.slice(STORED_POSITION_PREFIX.length),
+        Y.createRelativePositionFromJSON(position),
+      ])
+  );
+}
+
+function getStoredPositionsAbsolute(sharedRoot: Y.XmlText) {
+  assertDocumentAttachment(sharedRoot);
+
+  return Object.fromEntries(
+    Object.entries(sharedRoot.getAttributes())
+      .filter(([key]) => key.startsWith(STORED_POSITION_PREFIX))
+      .map(
+        ([key, position]) =>
+          [
+            key.slice(STORED_POSITION_PREFIX.length),
+            Y.createAbsolutePositionFromRelativePosition(
+              Y.decodeRelativePosition(position),
+              sharedRoot.doc
+            ),
+          ] as const
+      )
+      .filter(([, position]) => position)
+  ) as Record<string, Y.AbsolutePosition>;
+}
+
+export function removeStoredPosition(sharedRoot: Y.XmlText, key: string) {
+  sharedRoot.removeAttribute(STORED_POSITION_PREFIX + key);
+}
+
+export function setStoredPosition(
+  sharedRoot: Y.XmlText,
+  key: string,
+  position: Y.RelativePosition
+) {
+  sharedRoot.setAttribute(
+    STORED_POSITION_PREFIX + key,
+    Y.encodeRelativePosition(position)
+  );
+}
+
+function getAbsolutePositionsInTextRange(
+  absolutePositions: Record<string, Y.AbsolutePosition>,
+  yTarget: Y.XmlText,
+  textRange?: TextRange
+) {
+  return Object.fromEntries(
+    Object.entries(absolutePositions).filter(([, position]) => {
+      if (position.type !== yTarget) {
+        return false;
+      }
+
+      if (!textRange) {
+        return true;
+      }
+
+      return position.assoc >= 0
+        ? position.index >= textRange.start && position.index < textRange.end
+        : position.index > textRange.start && position.index >= textRange.end;
+    })
+  );
+}
+
+function getAbsolutePositionsInYText(
+  absolutePositions: Record<string, Y.AbsolutePosition>,
+  yText: Y.XmlText,
+  parentPath = ''
+): Record<string, Record<string, Y.AbsolutePosition>> {
+  const positions = {
+    [parentPath]: getAbsolutePositionsInTextRange(absolutePositions, yText),
+  };
+
+  const insertDelta = yTextToInsertDelta(yText);
+  insertDelta.forEach(({ insert }, i) => {
+    if (insert instanceof Y.XmlText) {
+      Object.assign(
+        positions,
+        getAbsolutePositionsInYText(
+          absolutePositions,
+          insert,
+          parentPath ? `${parentPath}.${i}` : i.toString()
+        )
+      );
+    }
+  });
+
+  return positions;
+}
+
+export function getStoredPositionsInDeltaAbsolute(
+  sharedRoot: Y.XmlText,
+  yText: Y.XmlText,
+  delta: InsertDelta,
+  deltaOffset = 0
+) {
+  const absolutePositions = getStoredPositionsAbsolute(sharedRoot);
+
+  const positions = {
+    '': getAbsolutePositionsInTextRange(absolutePositions, yText, {
+      start: deltaOffset,
+      end: deltaOffset + getInsertDeltaLength(delta),
+    }),
+  };
+
+  delta.forEach(({ insert }, i) => {
+    if (insert instanceof Y.XmlText) {
+      Object.assign(
+        positions,
+        getAbsolutePositionsInYText(absolutePositions, insert, i.toString())
+      );
+    }
+  });
+
+  return positions;
+}
+
+export function restoreStoredPositionsWithDeltaAbsolute(
+  sharedRoot: Y.XmlText,
+  yText: Y.XmlText,
+  absolutePositions: Record<string, Record<string, Y.AbsolutePosition>>,
+  delta: InsertDelta,
+  newDeltaOffset = 0,
+  previousDeltaOffset = 0,
+  path = ''
+) {
+  const toRestore = absolutePositions[path];
+
+  if (toRestore) {
+    Object.entries(toRestore).forEach(([key, position]) => {
+      setStoredPosition(
+        sharedRoot,
+        key,
+        Y.createRelativePositionFromTypeIndex(
+          yText,
+          position.index - previousDeltaOffset + newDeltaOffset,
+          position.assoc
+        )
+      );
+    });
+  }
+
+  delta.forEach(({ insert }, i) => {
+    if (insert instanceof Y.XmlText) {
+      restoreStoredPositionsWithDeltaAbsolute(
+        sharedRoot,
+        insert,
+        absolutePositions,
+        yTextToInsertDelta(insert),
+        0,
+        0,
+        path ? `${path}.${i}` : i.toString()
+      );
+    }
+  });
+}
+
+export function slateRangeToRelativeRange(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  range: BaseRange
+): RelativeRange {
+  return {
+    anchor: slatePointToRelativePosition(sharedRoot, slateRoot, range.anchor),
+    focus: slatePointToRelativePosition(sharedRoot, slateRoot, range.focus),
+  };
+}
+
+export function relativeRangeToSlateRange(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  range: RelativeRange
+): BaseRange | null {
+  const anchor = relativePositionToSlatePoint(
+    sharedRoot,
+    slateRoot,
+    range.anchor
+  );
+
+  if (!anchor) {
+    return null;
+  }
+
+  const focus = relativePositionToSlatePoint(
+    sharedRoot,
+    slateRoot,
+    range.focus
+  );
+
+  if (!focus) {
+    return null;
+  }
+
+  return { anchor, focus };
+}

package/src/utils/slate.ts

@@ -0,0 +1,11 @@
+import { BaseText, Descendant, Text } from 'slate';
+import { omit } from './object';
+
+export function getProperties<TNode extends Descendant>(
+  node: TNode
+): Omit<TNode, TNode extends BaseText ? 'text' : 'children'> {
+  return omit(
+    node,
+    (Text.isText(node) ? 'text' : 'children') as keyof TNode
+  ) as Omit<TNode, TNode extends BaseText ? 'text' : 'children'>;
+}

package/src/utils/yjs.ts

@@ -0,0 +1,10 @@
+import * as Y from 'yjs';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function assertDocumentAttachment<T extends Y.AbstractType<any>>(
+  sharedType: T
+): asserts sharedType is T & { doc: NonNullable<T['doc']> } {
+  if (!sharedType.doc) {
+    throw new Error("shared type isn't attached to a document");
+  }
+}

package/test/collaboration/addMark/acrossMarks.tsx

@@ -0,0 +1,40 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      <text>
+        Hel
+        <anchor />l
+      </text>
+      <text bold>o</text>
+      <text>
+        {' '}
+        w<focus />
+        orld!
+      </text>
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>
+      <text>Hel</text>
+      <anchor />
+      <text italic>l</text>
+      <text italic bold>
+        o
+      </text>
+      <text italic> w</text>
+      <focus />
+      <text>orld!</text>
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.addMark('italic', true);
+}

package/test/collaboration/addMark/acrossMarksSame.tsx

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      <text>
+        Hel
+        <anchor />l
+      </text>
+      <text bold>o</text>
+      <text>
+        {' '}
+        w<focus />
+        orld!
+      </text>
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>
+      <text>Hel</text>
+      <anchor />
+      <text bold>lo w</text>
+      <focus />
+      <text>orld!</text>
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.addMark('bold', true);
+}

package/test/collaboration/addMark/atBeginningOfDocument.tsx

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      <anchor />
+      Hello
+      <focus /> world!
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>
+      <anchor />
+      <text bold>Hello</text>
+      <focus /> world!
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.addMark('bold', true);
+}

package/test/collaboration/addMark/atEndOfDocument.tsx

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      Hello <anchor />
+      world!
+      <focus />
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>
+      Hello{' '}
+      <text bold>
+        <anchor />
+        world!
+      </text>
+      <focus />
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.addMark('bold', true);
+}

package/test/collaboration/addMark/withOtherMarks.tsx

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      <anchor />
+      <text italic>Hello world</text>
+      <focus />
+      <text bold>!</text>
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>
+      <anchor />
+      <text italic bold>
+        Hello world
+      </text>
+      <focus />
+      <text bold>!</text>
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.addMark('bold', true);
+}

package/test/collaboration/insertNode/atBeginningOfDocument.tsx

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>
+      <cursor />
+      Hello world!
+    </unstyled>
+    <unstyled>Welcome to slate-yjs!</unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <h1>
+      Foo bar!
+      <cursor />
+    </h1>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>Welcome to slate-yjs!</unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.insertNode(<h1>Foo bar!</h1>);
+}

package/test/collaboration/insertNode/atEndOfDocument.tsx

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>
+      Welcome to slate-yjs!
+      <cursor />
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>Welcome to slate-yjs!</unstyled>
+    <h1>
+      Foo bar!
+      <cursor />
+    </h1>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.insertNode(<h1>Foo bar!</h1>);
+}

package/test/collaboration/insertNode/inTheMiddle.tsx

@@ -0,0 +1,30 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>
+      Welcome
+      <cursor />
+      to slate-yjs!
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>Welcome</unstyled>
+    <h1>
+      Foo bar!
+      <cursor />
+    </h1>
+    <unstyled>to slate-yjs!</unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.insertNode(<h1>Foo bar!</h1>);
+}

package/test/collaboration/insertText/atBeginningOfBlock.tsx

@@ -0,0 +1,26 @@
+/** @jsx jsx */
+import { Editor } from 'slate';
+import { jsx } from '../../../../../support/jsx';
+
+export const input = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>
+      <cursor />
+    </unstyled>
+  </editor>
+);
+
+export const expected = (
+  <editor>
+    <unstyled>Hello world!</unstyled>
+    <unstyled>
+      Welcome to slate-yjs!
+      <cursor />
+    </unstyled>
+  </editor>
+);
+
+export function run(editor: Editor) {
+  editor.insertText('Welcome to slate-yjs!');
+}