jazz-tools 0.19.3 → 0.19.4

package/src/inspector/tests/viewer/history-view.test.tsx

@@ -17,6 +17,8 @@ import { HistoryView } from "../../viewer/history-view";
 import { setup } from "goober";
 import React from "react";
 
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
 function extractAction(row: HTMLElement | null | undefined) {
   if (!row) return "";
   // index 0: author, index 1: action, index 2: timestamp
@@ -30,7 +32,6 @@ function extractActions(): string[] {
 
 describe("HistoryView", async () => {
   const account = await setupJazzTestSync();
-  const account2 = await createJazzTestAccount();
 
   beforeAll(() => {
     // setup goober
@@ -270,7 +271,138 @@ describe("HistoryView", async () => {
     });
   });
 
-  describe("co.group", () => {
+  describe("co.plaintext", () => {
+    it("should render co.plaintext initial append in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      expect(extractActions()).toEqual(['"hello" has been appended']);
+    });
+
+    it("should render co.plaintext appends in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("hello world");
+      value.$jazz.applyDiff("hello world!");
+
+      expect(value.$jazz.raw.toString()).toEqual("hello world!");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '" world" has been inserted after "o"',
+        '"!" has been inserted after " "', // it is after " " because previous action is reversed
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete in tail", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("hell");
+
+      expect(value.$jazz.raw.toString()).toEqual("hell");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '"o" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete in head", async () => {
+      const value = co.plainText().create("hello", account);
+      value.$jazz.applyDiff("ello");
+
+      expect(value.$jazz.raw.toString()).toEqual("ello");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '"h" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext delete history of multiple old insertions in a single row", async () => {
+      const value = co.plainText().create("hello", account);
+      await sleep(2);
+      value.$jazz.applyDiff("hello world");
+      await sleep(2);
+      value.$jazz.applyDiff("hed");
+
+      expect(value.$jazz.raw.toString()).toEqual("hed");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"hello" has been appended',
+        '" world" has been inserted after "o"',
+        '"lod" has been deleted',
+        '" worl" has been deleted',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext insertBefore in history", async () => {
+      const value = co.plainText().create("world", account);
+      await sleep(2);
+      value.insertBefore(0, "Hello, ");
+
+      expect(value.$jazz.raw.toString()).toEqual("Hello, world");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"world" has been appended',
+        '"H" has been inserted before "w"',
+        '"ello, " has been inserted after "H"',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+
+    it("should render co.plaintext insertAfter in history", async () => {
+      const value = co.plainText().create("world", account);
+      await sleep(2);
+      value.insertAfter(0, "Hello, ");
+
+      expect(value.$jazz.raw.toString()).toEqual("wHello, orld");
+
+      render(
+        <HistoryView coValue={value.$jazz.raw} node={value.$jazz.localNode} />,
+      );
+
+      const history = [
+        '"world" has been appended',
+        '"Hello, " has been inserted after "w"',
+      ].toReversed(); // Default sort is descending
+
+      expect(extractActions()).toEqual(history);
+    });
+  });
+
+  describe("co.group", async () => {
+    const account2 = await createJazzTestAccount();
+
     it("should render co.group changes", async () => {
       const group = co.group().create(account);
 

package/src/inspector/utils/history.ts

@@ -1,5 +1,172 @@
-import type { JsonObject, JsonValue, RawCoMap, Role } from "cojson";
+import type {
+  JsonObject,
+  JsonValue,
+  OpID,
+  RawCoMap,
+  RawCoPlainText,
+  RawCoValue,
+  Role,
+} from "cojson";
+import { stringifyOpID } from "cojson";
+import type { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
 import type { MapOpPayload } from "cojson/dist/coValues/coMap.js";
+import * as TransactionChanges from "./transactions-changes";
+import type {
+  DeletionOpPayload,
+  InsertionOpPayload,
+} from "cojson/dist/coValues/coList.js";
+
+export function areSameOpIds(
+  opId1: OpID | string,
+  opId2: OpID | string,
+): boolean {
+  if (typeof opId1 === "string" || typeof opId2 === "string") {
+    return opId1 === opId2;
+  }
+
+  return (
+    opId1.sessionID === opId2.sessionID &&
+    opId1.txIndex === opId2.txIndex &&
+    opId1.changeIdx === opId2.changeIdx
+  );
+}
+
+export function isCoPlainText(coValue: RawCoValue): coValue is RawCoPlainText {
+  return coValue.type === "coplaintext";
+}
+
+export function getTransactionChanges(
+  tx: VerifiedTransaction,
+  coValue: RawCoValue,
+): JsonValue[] {
+  if (tx.isValid === false && tx.tx.privacy === "private") {
+    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
+    if (!readKey) {
+      return [
+        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`,
+      ];
+    }
+
+    return (
+      coValue.core.verified.decryptTransaction(
+        tx.txID.sessionID,
+        tx.txID.txIndex,
+        readKey,
+      ) ?? []
+    );
+  }
+
+  // Trying to collapse multiple changes into a single action in the history
+  if (isCoPlainText(coValue)) {
+    if (tx.changes === undefined || tx.changes.length === 0) return [];
+    const firstChange = tx.changes[0]!;
+
+    if (
+      TransactionChanges.isItemAppend(firstChange) &&
+      tx.changes.every(
+        (c) =>
+          TransactionChanges.isItemAppend(c) &&
+          areSameOpIds(c.after, firstChange.after),
+      )
+    ) {
+      const changes = tx.changes as InsertionOpPayload<string>[];
+      if (firstChange.after !== "start") {
+        changes.reverse();
+      }
+
+      return [
+        {
+          op: "app",
+          value: changes.map((c) => c.value).join(""),
+          after: firstChange.after,
+        },
+      ];
+    }
+
+    if (
+      TransactionChanges.isItemPrepend(firstChange) &&
+      tx.changes.every(
+        (c) =>
+          TransactionChanges.isItemPrepend(c) &&
+          areSameOpIds(c.before, firstChange.before),
+      )
+    ) {
+      const changes = tx.changes as InsertionOpPayload<string>[];
+      if (firstChange.before !== "end") {
+        changes.reverse();
+      }
+
+      return [
+        {
+          op: "pre",
+          value: changes.map((c) => c.value).join(""),
+          before: firstChange.before,
+        },
+      ];
+    }
+
+    if (
+      TransactionChanges.isItemDeletion(firstChange) &&
+      tx.changes.every((c) => TransactionChanges.isItemDeletion(c))
+    ) {
+      const coValueBeforeDeletions = coValue.atTime(tx.madeAt - 1);
+
+      // Verify if the deleted chars are consecutive
+      function changesAreConsecutive(changes: DeletionOpPayload[]): boolean {
+        if (changes.length < 2) return false;
+        const mapping = coValueBeforeDeletions.mapping.idxAfterOpID;
+
+        for (let i = 1; i < changes.length; ++i) {
+          const prevIdx = mapping[stringifyOpID(changes[i - 1]!.insertion)];
+          const currIdx = mapping[stringifyOpID(changes[i]!.insertion)];
+          if (currIdx !== prevIdx && currIdx !== (prevIdx ?? -2) + 1) {
+            return false;
+          }
+        }
+        return true;
+      }
+
+      if (changesAreConsecutive(tx.changes)) {
+        // Group the deletions by insertion.sessionID-txIndex
+        // This is to help the readability of deletions that act on different previous transactions
+        const groupedBySession: Map<string, DeletionOpPayload[]> = new Map();
+        for (const change of tx.changes) {
+          const group = `${change.insertion.sessionID}-${change.insertion.txIndex}`;
+          if (!groupedBySession.has(group)) groupedBySession.set(group, []);
+          groupedBySession.get(group)!.push(change);
+        }
+
+        return Array.from(groupedBySession.values()).map((changes) => {
+          const stringDeleted = changes
+            // order by txIndex and changeIdx
+            .toSorted((a, b) => {
+              if (a.insertion.txIndex === b.insertion.txIndex) {
+                return a.insertion.changeIdx - b.insertion.changeIdx;
+              }
+
+              return a.insertion.txIndex - b.insertion.txIndex;
+            })
+            // extract the single char from the insertions
+            .map((c) =>
+              coValueBeforeDeletions.get(
+                coValueBeforeDeletions.mapping.idxAfterOpID[
+                  stringifyOpID(c.insertion)
+                ]!,
+              ),
+            )
+            .join("");
+
+          return {
+            op: "custom",
+            action: `"${stringDeleted}" has been deleted`,
+          };
+        });
+      }
+    }
+  }
+
+  return tx.changes ?? (tx.tx as any).changes ?? [];
+}
 
 export function restoreCoMapToTimestamp(
   coValue: RawCoMap,

package/src/inspector/viewer/co-plain-text-view.tsx

@@ -1,13 +1,112 @@
-import { JsonObject } from "cojson";
+import { JsonObject, LocalNode, RawCoPlainText } from "cojson";
+import { useState } from "react";
+import { styled } from "goober";
+import { CoPlainText } from "jazz-tools";
+import { isWriter } from "../utils/permissions.js";
+import { Button } from "../ui/button.js";
 import { RawDataCard } from "./raw-data-card.js";
+import { Icon } from "../ui/icon.js";
+
+export function CoPlainTextView({
+  data,
+  coValue,
+}: {
+  data: JsonObject;
+  coValue: RawCoPlainText;
+  node: LocalNode;
+}) {
+  const currentText = Object.values(data).join("");
+  const [isEditing, setIsEditing] = useState(false);
+  const [editValue, setEditValue] = useState("");
+  const canEdit = isWriter(coValue.group.myRole());
+
+  const handleEditClick = () => {
+    setIsEditing(true);
+    setEditValue(currentText);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditValue(currentText);
+  };
+
+  const handleSave = (e: React.FormEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const coPlainText = CoPlainText.fromRaw(coValue);
+    coPlainText.$jazz.applyDiff(editValue);
+
+    setIsEditing(false);
+  };
 
-export function CoPlainTextView({ data }: { data: JsonObject }) {
   if (!data) return;
 
+  if (isEditing) {
+    return (
+      <>
+        <EditForm onSubmit={handleSave}>
+          <StyledTextarea
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onClick={(e) => e.stopPropagation()}
+          />
+          <FormActions>
+            <Button type="button" variant="secondary" onClick={handleCancel}>
+              Cancel
+            </Button>
+            <Button type="submit" variant="primary">
+              Save
+            </Button>
+          </FormActions>
+        </EditForm>
+        <RawDataCard data={data} />
+      </>
+    );
+  }
+
   return (
     <>
-      <p>{Object.values(data).join("")}</p>
+      <p>{currentText}</p>
+      <div>
+        {canEdit && (
+          <Button variant="secondary" onClick={handleEditClick} title="Edit">
+            <Icon name="edit" />
+          </Button>
+        )}
+      </div>
       <RawDataCard data={data} />
     </>
   );
 }
+
+const EditForm = styled("form")`
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  margin-bottom: 1rem;
+`;
+
+const StyledTextarea = styled("textarea")`
+  width: 100%;
+  min-height: 120px;
+  border-radius: var(--j-radius-md);
+  border: 1px solid var(--j-border-color);
+  padding: 0.5rem 0.875rem;
+  box-shadow: var(--j-shadow-sm);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  font-size: 0.875rem;
+  background-color: white;
+  color: var(--j-text-color-strong);
+  resize: vertical;
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--j-foreground);
+  }
+`;
+
+const FormActions = styled("div")`
+  display: flex;
+  gap: 0.5rem;
+  justify-content: flex-end;
+`;

package/src/inspector/viewer/history-view.tsx

@@ -3,9 +3,9 @@ import { useMemo } from "react";
 import { styled } from "goober";
 import { AccountOrGroupText } from "./account-or-group-text";
 import { DataTable, ColumnDef } from "../ui/data-table";
-import type { VerifiedTransaction } from "cojson/dist/coValueCore/coValueCore.js";
 import { Icon, Accordion } from "../ui";
 import * as TransactionChanges from "../utils/transactions-changes";
+import { getTransactionChanges } from "../utils/history";
 
 type HistoryEntry = {
   id: string;
@@ -108,30 +108,6 @@ export function HistoryView({
   );
 }
 
-function getTransactionChanges(
-  tx: VerifiedTransaction,
-  coValue: RawCoValue,
-): JsonValue[] {
-  if (tx.isValid === false && tx.tx.privacy === "private") {
-    const readKey = coValue.core.getReadKey(tx.tx.keyUsed);
-    if (!readKey) {
-      return [
-        `Unable to decrypt transaction: read key ${tx.tx.keyUsed} not found.`,
-      ];
-    }
-
-    return (
-      coValue.core.verified.decryptTransaction(
-        tx.txID.sessionID,
-        tx.txID.txIndex,
-        readKey,
-      ) ?? []
-    );
-  }
-
-  return tx.changes ?? (tx.tx as any).changes ?? [];
-}
-
 function getHistory(coValue: RawCoValue): HistoryEntry[] {
   return coValue.core.verifiedTransactions.flatMap((tx, index) => {
     const changes = getTransactionChanges(tx, coValue);
@@ -240,6 +216,10 @@ function mapTransactionToAction(
     return `Property "${change.key}" has been deleted`;
   }
 
+  if ((change as any).op === "custom") {
+    return (change as any).action;
+  }
+
   return "Unknown action: " + JSON.stringify(change);
 }
 

package/src/inspector/viewer/page.tsx

@@ -3,6 +3,7 @@ import {
   LocalNode,
   RawCoList,
   RawCoMap,
+  RawCoPlainText,
   RawCoStream,
   RawCoValue,
   RawGroup,
@@ -142,7 +143,13 @@ function View(
   }
 
   if (type === "coplaintext") {
-    return <CoPlainTextView data={snapshot} />;
+    return (
+      <CoPlainTextView
+        data={snapshot}
+        coValue={value as RawCoPlainText}
+        node={node}
+      />
+    );
   }
 
   if (type === "colist") {

package/src/inspector/viewer/use-resolve-covalue.ts

@@ -48,10 +48,6 @@ export type ResolvedAccount = {
   [key: string]: JSON;
 };
 
-export const isAccount = (coValue: JSONObject): coValue is ResolvedAccount => {
-  return isGroup(coValue) && "profile" in coValue;
-};
-
 export async function resolveCoValue(
   coValueId: CoID<RawCoValue>,
   node: LocalNode,
@@ -89,7 +85,7 @@ export async function resolveCoValue(
   if (type === "comap") {
     if (isBrowserImage(snapshot)) {
       extendedType = "image";
-    } else if (isAccount(snapshot)) {
+    } else if (value.headerMeta?.type === "account") {
       extendedType = "account";
     } else if (value.core.isGroup()) {
       extendedType = "group";
@@ -125,7 +121,7 @@ function subscribeToCoValue(
       if (type === "comap") {
         if (isBrowserImage(snapshot)) {
           extendedType = "image";
-        } else if (isAccount(snapshot)) {
+        } else if (value.headerMeta?.type === "account") {
           extendedType = "account";
         } else if (value.core.isGroup()) {
           extendedType = "group";

package/src/react-core/hooks.ts

@@ -26,7 +26,7 @@ import {
   SchemaResolveQuery,
   SubscriptionScope,
   coValueClassFromCoValueClassOrSchema,
-  createUnloadedCoValue,
+  getUnloadedCoValueWithoutId,
   type BranchDefinition,
 } from "jazz-tools";
 import { JazzContext, JazzContextManagerContext } from "./provider.js";
@@ -172,39 +172,15 @@ export function useCoValueSubscription<
   return subscription.subscription as CoValueSubscription<S, R>;
 }
 
-function getSubscriptionValue<C extends CoValue>(
-  subscription: SubscriptionScope<C> | null,
-): MaybeLoaded<C> {
-  if (!subscription) {
-    return createUnloadedCoValue("", CoValueLoadingState.UNAVAILABLE);
-  }
-  const value = subscription.getCurrentValue();
-  if (typeof value === "string") {
-    return createUnloadedCoValue(subscription.id, value);
-  }
-  return value;
-}
-
 function useGetCurrentValue<C extends CoValue>(
   subscription: SubscriptionScope<C> | null,
 ) {
-  const previousValue = useRef<MaybeLoaded<CoValue> | undefined>(undefined);
-
   return useCallback(() => {
-    const currentValue = getSubscriptionValue(subscription);
-    // Avoid re-renders if the value is not loaded and didn't change
-    if (
-      previousValue.current !== undefined &&
-      previousValue.current.$jazz.id === currentValue.$jazz.id &&
-      !previousValue.current.$isLoaded &&
-      !currentValue.$isLoaded &&
-      previousValue.current.$jazz.loadingState ===
-        currentValue.$jazz.loadingState
-    ) {
-      return previousValue.current as MaybeLoaded<C>;
+    if (!subscription) {
+      return getUnloadedCoValueWithoutId(CoValueLoadingState.UNAVAILABLE);
     }
-    previousValue.current = currentValue;
-    return currentValue;
+
+    return subscription.getCurrentValue();
   }, [subscription]);
 }