jazz-tools 0.19.2 → 0.19.4

package/src/inspector/viewer/co-map-view.tsx

@@ -6,6 +6,7 @@ import { Button, Icon, Input, Modal } from "../ui";
 import { styled } from "goober";
 import { restoreCoMapToTimestamp } from "../utils/history";
 import { CoValueEditor } from "./co-value-editor.js";
+import { isWriter } from "../utils/permissions";
 
 export function CoMapView({
   coValue,
@@ -27,7 +28,11 @@ export function CoMapView({
         coValue={coValue}
       />
       <div>
-        <AddPropertyModal coValue={coValue} node={node} />{" "}
+        <AddPropertyModal
+          disabled={!isWriter(coValue.group.myRole())}
+          coValue={coValue}
+          node={node}
+        />{" "}
         <RestoreSnapshotModal coValue={coValue} />
       </div>
     </>
@@ -37,9 +42,11 @@ export function CoMapView({
 function AddPropertyModal({
   coValue,
   node,
+  disabled,
 }: {
   coValue: RawCoMap;
   node: LocalNode;
+  disabled: boolean;
 }) {
   const [isAddPropertyModalOpen, setIsAddPropertyModalOpen] = useState(false);
   const [propertyName, setPropertyName] = useState("");
@@ -59,9 +66,10 @@ function AddPropertyModal({
       <Button
         title="Add Property"
         variant="secondary"
+        disabled={disabled}
         onClick={openAddPropertyModal}
       >
-        <Icon name="edit" />
+        <Icon name="add" />
       </Button>
 
       <Modal
@@ -132,6 +140,8 @@ function RestoreSnapshotModal({ coValue }: { coValue: RawCoMap }) {
     setIsRestoreModalOpen(false);
   };
 
+  const canRestore = isWriter(coValue.group.myRole());
+
   return (
     <>
       <Button title="Timeline" variant="secondary" onClick={openRestoreModal}>
@@ -146,7 +156,7 @@ function RestoreSnapshotModal({ coValue }: { coValue: RawCoMap }) {
         cancelText="Cancel"
         onConfirm={handleRestore}
         onCancel={handleClose}
-        showButtons={timestamps.length > 1}
+        showButtons={timestamps.length > 1 && canRestore}
       >
         {timestamps.length > 1 && (
           <>
@@ -167,18 +177,20 @@ function RestoreSnapshotModal({ coValue }: { coValue: RawCoMap }) {
               </TimestampDisplay>
             </RangeContainer>
 
-            <CheckboxContainer>
-              <CheckboxInput
-                type="checkbox"
-                id="remove-unknown-properties"
-                checked={removeUnknownProperties}
-                onChange={(e) => setRemoveUnknownProperties(e.target.checked)}
-              />
-              <CheckboxLabel htmlFor="remove-unknown-properties">
-                Remove unknown properties (properties that don't exist in the
-                selected snapshot)
-              </CheckboxLabel>
-            </CheckboxContainer>
+            {canRestore && (
+              <CheckboxContainer>
+                <CheckboxInput
+                  type="checkbox"
+                  id="remove-unknown-properties"
+                  checked={removeUnknownProperties}
+                  onChange={(e) => setRemoveUnknownProperties(e.target.checked)}
+                />
+                <CheckboxLabel htmlFor="remove-unknown-properties">
+                  Remove unknown properties (properties that don't exist in the
+                  selected snapshot)
+                </CheckboxLabel>
+              </CheckboxContainer>
+            )}
           </>
         )}
 

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/grid-view.tsx

@@ -12,6 +12,7 @@ import { Card, CardBody, CardHeader } from "../ui/card.js";
 import { Grid } from "../ui/grid.js";
 import { Icon } from "../ui/icon.js";
 import { Text } from "../ui/text.js";
+import { isWriter } from "../utils/permissions.js";
 
 function GridItem({
   entry,
@@ -115,7 +116,7 @@ function GridItem({
             <Text strong>{key}</Text>
           )}
         </div>
-        {coValue && (
+        {coValue && isWriter(coValue.group.myRole()) && (
           <ActionButtons>
             <EditButton
               onClick={handleEditClick}

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,28 +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) {
-      throw new Error("Read key 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);
@@ -238,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]);
 }
 

package/src/svelte/jazz.class.svelte.ts

@@ -17,8 +17,8 @@ import type {
 import {
   coValueClassFromCoValueClassOrSchema,
   subscribeToCoValue,
-  createUnloadedCoValue,
   CoValueLoadingState,
+  getUnloadedCoValueWithoutId,
 } from "jazz-tools";
 import { untrack } from "svelte";
 import { createSubscriber } from "svelte/reactivity";
@@ -55,11 +55,9 @@ export class CoState<
   // @ts-expect-error we can't statically enforce the schema's resolve query is a valid resolve query, but in practice it is
   R extends ResolveQuery<V> = SchemaResolveQuery<V>,
 > {
-  #value: MaybeLoaded<Loaded<V, R>> = createUnloadedCoValue(
-    "",
+  #value: MaybeLoaded<Loaded<V, R>> = getUnloadedCoValueWithoutId(
     CoValueLoadingState.LOADING,
   );
-  #previousValue: MaybeLoaded<CoValue> | undefined = undefined;
   #ctx = getJazzContext<InstanceOfSchema<AccountClass<Account>>>();
   #id: CoStateId;
   #subscribe: () => void;
@@ -86,9 +84,9 @@ export class CoState<
       const options = this.#options;
 
       return untrack(() => {
-        if (!ctx || !id) {
+        if (!id) {
           return this.update(
-            createUnloadedCoValue(id ?? "", CoValueLoadingState.UNAVAILABLE),
+            getUnloadedCoValueWithoutId(CoValueLoadingState.UNAVAILABLE),
           );
         }
         const agent = "me" in ctx ? ctx.me : ctx.guest;
@@ -101,15 +99,11 @@ export class CoState<
             // @ts-expect-error The resolve query type isn't compatible with the coValueClassFromCoValueClassOrSchema conversion
             resolve,
             loadAs: agent,
-            onUnavailable: () => {
-              this.update(
-                createUnloadedCoValue(id, CoValueLoadingState.UNAVAILABLE),
-              );
+            onUnavailable: (value) => {
+              this.update(value);
             },
-            onUnauthorized: () => {
-              this.update(
-                createUnloadedCoValue(id, CoValueLoadingState.UNAUTHORIZED),
-              );
+            onUnauthorized: (value) => {
+              this.update(value);
             },
             syncResolution: true,
             unstable_branch: options?.unstable_branch,
@@ -130,7 +124,6 @@ export class CoState<
     if (shouldSkipUpdate(value, this.#value)) {
       return;
     }
-    this.#previousValue = value;
     this.#value = value;
     this.#update();
   }
@@ -148,11 +141,10 @@ export class AccountCoState<
   // @ts-expect-error we can't statically enforce the schema's resolve query is a valid resolve query, but in practice it is
   R extends ResolveQuery<A> = SchemaResolveQuery<A>,
 > {
-  #value: MaybeLoaded<Loaded<A, R>> = createUnloadedCoValue(
-    "",
+  #value: MaybeLoaded<Loaded<A, R>> = getUnloadedCoValueWithoutId(
     CoValueLoadingState.LOADING,
   );
-  #ctx = getJazzContext<InstanceOfSchema<A>>();
+  #ctx = getJazzContext<InstanceOfSchema<AccountClass<Account>>>();
   #subscribe: () => void;
   #options: CoStateOptions<A, R> | undefined;
   #update = () => {};
@@ -174,9 +166,9 @@ export class AccountCoState<
       const options = this.#options;
 
       return untrack(() => {
-        if (!ctx || !("me" in ctx)) {
+        if (!("me" in ctx)) {
           return this.update(
-            createUnloadedCoValue("", CoValueLoadingState.UNAVAILABLE),
+            getUnloadedCoValueWithoutId(CoValueLoadingState.UNAVAILABLE),
           );
         }
 
@@ -189,21 +181,11 @@ export class AccountCoState<
           {
             resolve,
             loadAs: me,
-            onUnavailable: () => {
-              this.update(
-                createUnloadedCoValue(
-                  me.$jazz.id,
-                  CoValueLoadingState.UNAVAILABLE,
-                ),
-              );
+            onUnavailable: (value) => {
+              this.update(value);
             },
-            onUnauthorized: () => {
-              this.update(
-                createUnloadedCoValue(
-                  me.$jazz.id,
-                  CoValueLoadingState.UNAUTHORIZED,
-                ),
-              );
+            onUnauthorized: (value) => {
+              this.update(value);
             },
             syncResolution: true,
             unstable_branch: options?.unstable_branch,

package/src/tools/coValues/coFeed.ts

@@ -512,13 +512,16 @@ function entryFromRawEntry<Item>(
       }
     },
     get by() {
-      return (
-        accountID &&
-        accessChildById(accessFrom, accountID, {
-          ref: Account,
-          optional: false,
-        })
-      );
+      if (!accountID) return null;
+
+      const account = accessChildById(accessFrom, accountID, {
+        ref: Account,
+        optional: false,
+      }) as Account;
+
+      if (!account.$isLoaded) return null;
+
+      return account;
     },
     madeAt: rawEntry.at,
     tx: rawEntry.tx,

package/src/tools/coValues/coMap.ts

@@ -1051,13 +1051,16 @@ function getEditFromRaw(
           )
         : undefined,
     get by() {
-      return (
-        rawEdit.by &&
-        accessChildById(target, rawEdit.by, {
-          ref: Account,
-          optional: false,
-        })
-      );
+      if (!rawEdit.by) return null;
+
+      const account = accessChildById(target, rawEdit.by, {
+        ref: Account,
+        optional: false,
+      }) as Account;
+
+      if (!account.$isLoaded) return null;
+
+      return account;
     },
     madeAt: rawEdit.at,
     key,

package/src/tools/coValues/group.ts

@@ -178,7 +178,11 @@ export class Group extends CoValueBase implements CoValue {
           ref,
           get account() {
             // Accounts values are non-nullable because are loaded as dependencies
-            return accessChildById(group, accountID, refEncodedAccountSchema);
+            return accessChildById(
+              group,
+              accountID,
+              refEncodedAccountSchema,
+            ) as Account;
           },
         });
       }
@@ -410,7 +414,7 @@ export function getCoValueOwner(coValue: CoValue): Group {
     ref: RegisteredSchemas["Group"],
     optional: false,
   });
-  if (!group) {
+  if (!group.$isLoaded) {
     throw new Error("CoValue has no owner");
   }
   return group;