@getguru/slate-yjs-core 1.0.3

package/src/applyToSlate/textEvent.ts

@@ -0,0 +1,280 @@
+import { Editor, Element, Node, Operation, Path, Text } from 'slate';
+import * as Y from 'yjs';
+import { Delta } from '../model/types';
+import { deltaInsertToSlateNode } from '../utils/convert';
+import {
+  getSlateNodeYLength,
+  getSlatePath,
+  yOffsetToSlateOffsets,
+} from '../utils/location';
+import { deepEquals, omitNullEntries, pick } from '../utils/object';
+import { getProperties } from '../utils/slate';
+
+function applyDelta(node: Element, slatePath: Path, delta: Delta): Operation[] {
+  const ops: Operation[] = [];
+
+  let yOffset = delta.reduce((length, change) => {
+    if ('retain' in change) {
+      return length + change.retain;
+    }
+
+    if ('delete' in change) {
+      return length + change.delete;
+    }
+
+    return length;
+  }, 0);
+
+  // Apply changes in reverse order to avoid path changes.
+  delta.reverse().forEach((change) => {
+    if ('attributes' in change && 'retain' in change) {
+      const [startPathOffset, startTextOffset] = yOffsetToSlateOffsets(
+        node,
+        yOffset - change.retain
+      );
+      const [endPathOffset, endTextOffset] = yOffsetToSlateOffsets(
+        node,
+        yOffset,
+        { assoc: -1 }
+      );
+
+      for (
+        let pathOffset = endPathOffset;
+        pathOffset >= startPathOffset;
+        pathOffset--
+      ) {
+        const child = node.children[pathOffset];
+        const childPath = [...slatePath, pathOffset];
+
+        if (!Text.isText(child)) {
+          // Ignore attribute updates on non-text nodes (which are backed by Y.XmlText)
+          // to be consistent with deltaInsertToSlateNode. Y.XmlText attributes don't show
+          // up in deltas but in key changes (YEvent.changes.keys).
+          continue;
+        }
+
+        const newProperties = change.attributes;
+        const properties = pick(
+          node,
+          ...(Object.keys(change.attributes) as Array<keyof Element>)
+        );
+
+        if (pathOffset === startPathOffset || pathOffset === endPathOffset) {
+          const start = pathOffset === startPathOffset ? startTextOffset : 0;
+          const end =
+            pathOffset === endPathOffset ? endTextOffset : child.text.length;
+
+          if (end !== child.text.length) {
+            ops.push({
+              type: 'split_node',
+              path: childPath,
+              position: end,
+              properties: getProperties(child),
+            });
+          }
+
+          if (start !== 0) {
+            ops.push({
+              type: 'split_node',
+              path: childPath,
+              position: start,
+              properties: omitNullEntries({
+                ...getProperties(child),
+                ...newProperties,
+              }),
+            });
+
+            continue;
+          }
+        }
+
+        ops.push({
+          type: 'set_node',
+          newProperties,
+          path: childPath,
+          properties,
+        });
+      }
+    }
+
+    if ('retain' in change) {
+      yOffset -= change.retain;
+    }
+
+    if ('delete' in change) {
+      const [startPathOffset, startTextOffset] = yOffsetToSlateOffsets(
+        node,
+        yOffset - change.delete
+      );
+      const [endPathOffset, endTextOffset] = yOffsetToSlateOffsets(
+        node,
+        yOffset,
+        { assoc: -1 }
+      );
+
+      for (
+        let pathOffset =
+          endTextOffset === 0 ? endPathOffset - 1 : endPathOffset;
+        pathOffset >= startPathOffset;
+        pathOffset--
+      ) {
+        const child = node.children[pathOffset];
+        const childPath = [...slatePath, pathOffset];
+
+        if (
+          Text.isText(child) &&
+          (pathOffset === startPathOffset || pathOffset === endPathOffset)
+        ) {
+          const start = pathOffset === startPathOffset ? startTextOffset : 0;
+          const end =
+            pathOffset === endPathOffset ? endTextOffset : child.text.length;
+
+          ops.push({
+            type: 'remove_text',
+            offset: start,
+            text: child.text.slice(start, end),
+            path: childPath,
+          });
+
+          yOffset -= end - start;
+          continue;
+        }
+
+        ops.push({
+          type: 'remove_node',
+          node: child,
+          path: childPath,
+        });
+        yOffset -= getSlateNodeYLength(child);
+      }
+
+      return;
+    }
+
+    if ('insert' in change) {
+      const [pathOffset, textOffset] = yOffsetToSlateOffsets(node, yOffset, {
+        insert: true,
+      });
+      const child = node.children[pathOffset];
+      const childPath = [...slatePath, pathOffset];
+
+      if (Text.isText(child)) {
+        const lastOp = ops[ops.length - 1];
+
+        /**
+         * The props that exist at the current path
+         * Since we're not actually using slate to update the node
+         * this is a simulation
+         */
+        const currentProps =
+          lastOp != null && lastOp.type === 'insert_node'
+            ? lastOp.node
+            : getProperties(child);
+
+        let lastPath: Path = [];
+
+        if (
+          lastOp != null &&
+          (lastOp.type === 'insert_node' ||
+            lastOp.type === 'insert_text' ||
+            lastOp.type === 'split_node' ||
+            lastOp.type === 'set_node')
+        ) {
+          lastPath = lastOp.path;
+        }
+
+        /**
+         * If the insert is a string and the attributes are the same as the
+         * props at the current path, we can just insert a text node
+         */
+        if (
+          typeof change.insert === 'string' &&
+          deepEquals(change.attributes ?? {}, currentProps) &&
+          Path.equals(childPath, lastPath)
+        ) {
+          return ops.push({
+            type: 'insert_text',
+            offset: textOffset,
+            text: change.insert,
+            path: childPath,
+          });
+        }
+
+        const toInsert = deltaInsertToSlateNode(change);
+        if (textOffset === 0) {
+          return ops.push({
+            type: 'insert_node',
+            path: childPath,
+            node: toInsert,
+          });
+        }
+
+        if (textOffset < child.text.length) {
+          ops.push({
+            type: 'split_node',
+            path: childPath,
+            position: textOffset,
+            properties: getProperties(child),
+          });
+        }
+
+        return ops.push({
+          type: 'insert_node',
+          path: Path.next(childPath),
+          node: toInsert,
+        });
+      }
+
+      return ops.push({
+        type: 'insert_node',
+        path: childPath,
+        node: deltaInsertToSlateNode(change),
+      });
+    }
+  });
+
+  return ops;
+}
+
+export function translateYTextEvent(
+  sharedRoot: Y.XmlText,
+  editor: Editor,
+  event: Y.YTextEvent
+): Operation[] {
+  const { target, changes } = event;
+  const delta = event.delta as Delta;
+
+  if (!(target instanceof Y.XmlText)) {
+    throw new Error('Unexpected target node type');
+  }
+
+  const ops: Operation[] = [];
+  const slatePath = getSlatePath(sharedRoot, editor, target);
+  const targetElement = Node.get(editor, slatePath);
+
+  if (Text.isText(targetElement)) {
+    throw new Error('Cannot apply yTextEvent to text node');
+  }
+
+  const keyChanges = Array.from(changes.keys.entries());
+  if (slatePath.length > 0 && keyChanges.length > 0) {
+    const newProperties = Object.fromEntries(
+      keyChanges.map(([key, info]) => [
+        key,
+        info.action === 'delete' ? null : target.getAttribute(key),
+      ])
+    );
+
+    const properties = Object.fromEntries(
+      keyChanges.map(([key]) => [key, targetElement[key]])
+    );
+
+    ops.push({ type: 'set_node', newProperties, properties, path: slatePath });
+  }
+
+  if (delta.length > 0) {
+    ops.push(...applyDelta(targetElement, slatePath, delta));
+  }
+
+  return ops;
+}

package/src/applyToYjs/index.ts

@@ -0,0 +1,28 @@
+import { Node, Operation } from 'slate';
+import * as Y from 'yjs';
+import { NODE_MAPPER } from './node';
+import { TEXT_MAPPER } from './text';
+import { ApplyFunc, OpMapper } from './types';
+
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+const NOOP = () => {};
+
+const opMappers: OpMapper = {
+  ...TEXT_MAPPER,
+  ...NODE_MAPPER,
+
+  set_selection: NOOP,
+};
+
+export function applySlateOp(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: Operation
+): void {
+  const apply = opMappers[op.type] as ApplyFunc<typeof op>;
+  if (!apply) {
+    throw new Error(`Unknown operation: ${op.type}`);
+  }
+
+  apply(sharedRoot, slateRoot, op);
+}

package/src/applyToYjs/node/index.ts

@@ -0,0 +1,17 @@
+import { NodeOperation } from 'slate';
+import { OpMapper } from '../types';
+import { insertNode } from './insertNode';
+import { mergeNode } from './mergeNode';
+import { moveNode } from './moveNode';
+import { removeNode } from './removeNode';
+import { setNode } from './setNode';
+import { splitNode } from './splitNode';
+
+export const NODE_MAPPER: OpMapper<NodeOperation> = {
+  insert_node: insertNode,
+  remove_node: removeNode,
+  set_node: setNode,
+  merge_node: mergeNode,
+  move_node: moveNode,
+  split_node: splitNode,
+};

package/src/applyToYjs/node/insertNode.ts

@@ -0,0 +1,23 @@
+import { InsertNodeOperation, Node, Text } from 'slate';
+import * as Y from 'yjs';
+import { slateElementToYText } from '../../utils/convert';
+import { getYTarget } from '../../utils/location';
+import { getProperties } from '../../utils/slate';
+
+export function insertNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: InsertNodeOperation
+): void {
+  const { yParent, textRange } = getYTarget(sharedRoot, slateRoot, op.path);
+
+  if (Text.isText(op.node)) {
+    return yParent.insert(
+      textRange.start,
+      op.node.text,
+      getProperties(op.node)
+    );
+  }
+
+  yParent.insertEmbed(textRange.start, slateElementToYText(op.node));
+}

package/src/applyToYjs/node/mergeNode.ts

@@ -0,0 +1,82 @@
+import { MergeNodeOperation, Node, Path, Text } from 'slate';
+import * as Y from 'yjs';
+import { Delta } from '../../model/types';
+import { cloneInsertDeltaDeep } from '../../utils/clone';
+import { yTextToInsertDelta } from '../../utils/delta';
+import { getYTarget } from '../../utils/location';
+import {
+  getStoredPositionsInDeltaAbsolute,
+  restoreStoredPositionsWithDeltaAbsolute,
+} from '../../utils/position';
+import { getProperties } from '../../utils/slate';
+
+export function mergeNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: MergeNodeOperation
+): void {
+  const target = getYTarget(sharedRoot, slateRoot, op.path);
+  const prev = getYTarget(
+    target.yParent,
+    target.slateParent,
+    Path.previous(op.path.slice(-1))
+  );
+
+  if (!target.yTarget !== !prev.yTarget) {
+    throw new Error('Cannot merge y text with y element');
+  }
+
+  if (!prev.yTarget || !target.yTarget) {
+    const { yParent: parent, textRange, slateTarget } = target;
+    if (!slateTarget) {
+      throw new Error('Expected Slate target node for merge op.');
+    }
+
+    const prevSibling = Node.get(slateRoot, Path.previous(op.path));
+    if (!Text.isText(prevSibling)) {
+      throw new Error('Path points to Y.Text but not a Slate text node.');
+    }
+
+    const targetProps = getProperties(slateTarget);
+    const prevSiblingProps = getProperties(prevSibling);
+    const unsetProps = Object.keys(targetProps).reduce((acc, key) => {
+      const prevSiblingHasProp = key in prevSiblingProps;
+      return prevSiblingHasProp ? acc : { ...acc, [key]: null };
+    }, {});
+
+    return parent.format(textRange.start, textRange.end - textRange.start, {
+      ...unsetProps,
+      ...prevSiblingProps,
+    });
+  }
+
+  const deltaApplyYOffset = prev.yTarget.length;
+  const targetDelta = yTextToInsertDelta(target.yTarget);
+  const clonedDelta = cloneInsertDeltaDeep(targetDelta);
+
+  const storedPositions = getStoredPositionsInDeltaAbsolute(
+    sharedRoot,
+    target.yTarget,
+    targetDelta,
+    deltaApplyYOffset
+  );
+
+  const applyDelta: Delta = [{ retain: deltaApplyYOffset }, ...clonedDelta];
+
+  prev.yTarget.applyDelta(applyDelta, {
+    sanitize: false,
+  });
+
+  target.yParent.delete(
+    target.textRange.start,
+    target.textRange.end - target.textRange.start
+  );
+
+  restoreStoredPositionsWithDeltaAbsolute(
+    sharedRoot,
+    prev.yTarget,
+    storedPositions,
+    clonedDelta,
+    deltaApplyYOffset
+  );
+}

package/src/applyToYjs/node/moveNode.ts

@@ -0,0 +1,57 @@
+import { MoveNodeOperation, Node, Path, Text } from 'slate';
+import * as Y from 'yjs';
+import { Delta } from '../../model/types';
+import { cloneInsertDeltaDeep } from '../../utils/clone';
+import { getInsertDeltaLength, yTextToInsertDelta } from '../../utils/delta';
+import { getYTarget } from '../../utils/location';
+import {
+  getStoredPositionsInDeltaAbsolute,
+  restoreStoredPositionsWithDeltaAbsolute,
+} from '../../utils/position';
+
+export function moveNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: MoveNodeOperation
+): void {
+  const newParentPath = Path.parent(op.newPath);
+  const newPathOffset = op.newPath[op.newPath.length - 1];
+  const parent = Node.get(slateRoot, newParentPath);
+  if (Text.isText(parent)) {
+    throw new Error('Cannot move slate node into text element');
+  }
+  const normalizedNewPath = [
+    ...newParentPath,
+    Math.min(newPathOffset, parent.children.length),
+  ];
+
+  const origin = getYTarget(sharedRoot, slateRoot, op.path);
+  const target = getYTarget(sharedRoot, slateRoot, normalizedNewPath);
+  const insertDelta = cloneInsertDeltaDeep(origin.targetDelta);
+
+  const storedPositions = getStoredPositionsInDeltaAbsolute(
+    sharedRoot,
+    origin.yParent,
+    origin.targetDelta
+  );
+
+  origin.yParent.delete(
+    origin.textRange.start,
+    origin.textRange.end - origin.textRange.start
+  );
+
+  const targetLength = getInsertDeltaLength(yTextToInsertDelta(target.yParent));
+  const deltaApplyYOffset = Math.min(target.textRange.start, targetLength);
+  const applyDelta: Delta = [{ retain: deltaApplyYOffset }, ...insertDelta];
+
+  target.yParent.applyDelta(applyDelta, { sanitize: false });
+
+  restoreStoredPositionsWithDeltaAbsolute(
+    sharedRoot,
+    target.yParent,
+    storedPositions,
+    insertDelta,
+    deltaApplyYOffset,
+    origin.textRange.start
+  );
+}

package/src/applyToYjs/node/removeNode.ts

@@ -0,0 +1,16 @@
+import { Node, RemoveNodeOperation } from 'slate';
+import * as Y from 'yjs';
+import { getYTarget } from '../../utils/location';
+
+export function removeNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: RemoveNodeOperation
+): void {
+  const { yParent: parent, textRange } = getYTarget(
+    sharedRoot,
+    slateRoot,
+    op.path
+  );
+  parent.delete(textRange.start, textRange.end - textRange.start);
+}

package/src/applyToYjs/node/setNode.ts

@@ -0,0 +1,42 @@
+import { Node, SetNodeOperation } from 'slate';
+import * as Y from 'yjs';
+import { getYTarget } from '../../utils/location';
+
+export function setNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: SetNodeOperation
+): void {
+  const { yTarget, textRange, yParent } = getYTarget(
+    sharedRoot,
+    slateRoot,
+    op.path
+  );
+
+  if (yTarget) {
+    Object.entries(op.newProperties).forEach(([key, value]) => {
+      if (value === null) {
+        return yTarget.removeAttribute(key);
+      }
+
+      yTarget.setAttribute(key, value);
+    });
+
+    return Object.entries(op.properties).forEach(([key]) => {
+      if (!op.newProperties.hasOwnProperty(key)) {
+        yTarget.removeAttribute(key);
+      }
+    });
+  }
+
+  const unset = Object.fromEntries(
+    Object.keys(op.properties).map((key) => [key, null])
+  );
+  const newProperties = { ...unset, ...op.newProperties };
+
+  yParent.format(
+    textRange.start,
+    textRange.end - textRange.start,
+    newProperties
+  );
+}

package/src/applyToYjs/node/splitNode.ts

@@ -0,0 +1,98 @@
+import { Node, SplitNodeOperation, Text } from 'slate';
+import * as Y from 'yjs';
+import { cloneInsertDeltaDeep } from '../../utils/clone';
+import { sliceInsertDelta, yTextToInsertDelta } from '../../utils/delta';
+import { getSlateNodeYLength, getYTarget } from '../../utils/location';
+import {
+  getStoredPositionsInDeltaAbsolute,
+  restoreStoredPositionsWithDeltaAbsolute,
+} from '../../utils/position';
+
+export function splitNode(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: SplitNodeOperation
+): void {
+  const target = getYTarget(sharedRoot, slateRoot, op.path);
+
+  if (!target.slateTarget) {
+    throw new Error('Y target without corresponding slate node');
+  }
+
+  if (!target.yTarget) {
+    if (!Text.isText(target.slateTarget)) {
+      throw new Error('Mismatch node type between y target and slate node');
+    }
+
+    const unset: Record<string, null> = {};
+    target.targetDelta.forEach((element) => {
+      if (element.attributes) {
+        Object.keys(element.attributes).forEach((key) => {
+          unset[key] = null;
+        });
+      }
+    });
+
+    return target.yParent.format(
+      target.textRange.start,
+      target.textRange.end - target.textRange.start,
+      { ...unset, ...op.properties }
+    );
+  }
+
+  if (Text.isText(target.slateTarget)) {
+    throw new Error('Mismatch node type between y target and slate node');
+  }
+
+  const splitTarget = getYTarget(target.yTarget, target.slateTarget, [
+    op.position,
+  ]);
+
+  const ySplitOffset = target.slateTarget.children
+    .slice(0, op.position)
+    .reduce((length, child) => length + getSlateNodeYLength(child), 0);
+
+  const length = target.slateTarget.children.reduce(
+    (current, child) => current + getSlateNodeYLength(child),
+    0
+  );
+
+  const splitDelta = sliceInsertDelta(
+    yTextToInsertDelta(target.yTarget),
+    ySplitOffset,
+    length - ySplitOffset
+  );
+  const clonedDelta = cloneInsertDeltaDeep(splitDelta);
+
+  const storedPositions = getStoredPositionsInDeltaAbsolute(
+    sharedRoot,
+    target.yTarget,
+    splitDelta,
+    ySplitOffset
+  );
+
+  const toInsert = new Y.XmlText();
+  toInsert.applyDelta(clonedDelta, {
+    sanitize: false,
+  });
+
+  Object.entries(op.properties).forEach(([key, value]) => {
+    toInsert.setAttribute(key, value);
+  });
+
+  target.yTarget.delete(
+    splitTarget.textRange.start,
+    target.yTarget.length - splitTarget.textRange.start
+  );
+
+  target.yParent.insertEmbed(target.textRange.end, toInsert);
+
+  restoreStoredPositionsWithDeltaAbsolute(
+    sharedRoot,
+    toInsert,
+    storedPositions,
+    clonedDelta,
+    0,
+    ySplitOffset
+  );
+}

package/src/applyToYjs/text/index.ts

@@ -0,0 +1,9 @@
+import { TextOperation } from 'slate';
+import { OpMapper } from '../types';
+import { insertText } from './insertText';
+import { removeText } from './removeText';
+
+export const TEXT_MAPPER: OpMapper<TextOperation> = {
+  insert_text: insertText,
+  remove_text: removeText,
+};

package/src/applyToYjs/text/insertText.ts

@@ -0,0 +1,27 @@
+import { InsertTextOperation, Node, Text } from 'slate';
+import type Y from 'yjs';
+import { getYTarget } from '../../utils/location';
+import { getProperties } from '../../utils/slate';
+
+export function insertText(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: InsertTextOperation
+): void {
+  const { yParent: target, textRange } = getYTarget(
+    sharedRoot,
+    slateRoot,
+    op.path
+  );
+
+  const targetNode = Node.get(slateRoot, op.path);
+  if (!Text.isText(targetNode)) {
+    throw new Error('Cannot insert text into non-text node');
+  }
+
+  target.insert(
+    textRange.start + op.offset,
+    op.text,
+    getProperties(targetNode)
+  );
+}

package/src/applyToYjs/text/removeText.ts

@@ -0,0 +1,16 @@
+import { Node, RemoveTextOperation } from 'slate';
+import type Y from 'yjs';
+import { getYTarget } from '../../utils/location';
+
+export function removeText(
+  sharedRoot: Y.XmlText,
+  slateRoot: Node,
+  op: RemoveTextOperation
+): void {
+  const { yParent: target, textRange } = getYTarget(
+    sharedRoot,
+    slateRoot,
+    op.path
+  );
+  target.delete(textRange.start + op.offset, op.text.length);
+}