jazz-tools 0.14.28 → 0.15.1

package/src/inspector/viewer/type-icon.tsx

@@ -0,0 +1,63 @@
+import { CoID, LocalNode, RawCoValue } from "cojson";
+import { styled } from "goober";
+import {
+  CoJsonType,
+  ExtendedCoJsonType,
+  useResolvedCoValue,
+} from "./use-resolve-covalue.js";
+
+const IconText = styled("span")`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+
+const UnavailableText = styled("div")`
+  font-weight: 500;
+`;
+
+const EmptySpace = styled("div")`
+  white-space: pre;
+  width: 3.5rem;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+`;
+
+export const TypeIcon = ({
+  type,
+  extendedType,
+}: {
+  type: CoJsonType;
+  extendedType?: ExtendedCoJsonType;
+}) => {
+  const iconMap: Record<ExtendedCoJsonType | CoJsonType, string> = {
+    record: "{} Record",
+    image: "🖼️ Image",
+    comap: "{} CoMap",
+    costream: "≋ CoFeed",
+    colist: "☰ CoList",
+    account: "👤 Account",
+    group: "👥 Group",
+    file: "📃 FileStream",
+  };
+
+  const iconKey = extendedType || type;
+  const icon = iconMap[iconKey as keyof typeof iconMap];
+
+  return icon ? <IconText>{icon}</IconText> : null;
+};
+
+export const ResolveIcon = ({
+  coId,
+  node,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+}) => {
+  const { type, extendedType, snapshot } = useResolvedCoValue(coId, node);
+
+  if (snapshot === "unavailable" && !type) {
+    return <UnavailableText>Unavailable</UnavailableText>;
+  }
+
+  if (!type) return <EmptySpace> </EmptySpace>;
+
+  return <TypeIcon type={type} extendedType={extendedType} />;
+};

package/src/inspector/viewer/types.ts

@@ -0,0 +1,11 @@
+import { CoID, RawCoValue } from "cojson";
+
+export type PageInfo = {
+  coId: CoID<RawCoValue>;
+  name?: string;
+};
+
+export const isCoId = (coId: unknown): coId is CoID<RawCoValue> =>
+  typeof coId === "string" &&
+  coId.startsWith("co_") &&
+  !coId.includes("inviteSecret");

package/src/inspector/viewer/use-open-inspector.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from "react";
+
+const STORAGE_KEY = "jazz-inspector-open";
+
+export function useOpenInspector() {
+  const [open, setOpen] = useState(() => {
+    // Initialize from localStorage if available
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : false;
+  });
+
+  // Update localStorage when open state changes
+  useEffect(() => {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(open));
+  }, [open]);
+
+  return [open, setOpen];
+}

package/src/inspector/viewer/use-page-path.ts

@@ -0,0 +1,65 @@
+import { CoID, RawCoValue } from "cojson";
+import { useCallback, useEffect, useState } from "react";
+import { PageInfo } from "./types.js";
+
+const STORAGE_KEY = "jazz-inspector-paths";
+
+export function usePagePath(defaultPath?: PageInfo[]) {
+  const [path, setPath] = useState<PageInfo[]>(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    if (stored) {
+      try {
+        return JSON.parse(stored);
+      } catch (e) {
+        console.warn("Failed to parse stored path:", e);
+      }
+    }
+    return defaultPath || [];
+  });
+
+  const updatePath = useCallback((newPath: PageInfo[]) => {
+    setPath(newPath);
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(newPath));
+  }, []);
+
+  useEffect(() => {
+    if (defaultPath && JSON.stringify(path) !== JSON.stringify(defaultPath)) {
+      updatePath(defaultPath);
+    }
+  }, [defaultPath, path, updatePath]);
+
+  const addPages = useCallback(
+    (newPages: PageInfo[]) => {
+      updatePath([...path, ...newPages]);
+    },
+    [path, updatePath],
+  );
+
+  const goToIndex = useCallback(
+    (index: number) => {
+      updatePath(path.slice(0, index + 1));
+    },
+    [path, updatePath],
+  );
+
+  const setPage = useCallback(
+    (coId: CoID<RawCoValue>) => {
+      updatePath([{ coId, name: "Root" }]);
+    },
+    [updatePath],
+  );
+
+  const goBack = useCallback(() => {
+    if (path.length > 1) {
+      updatePath(path.slice(0, path.length - 1));
+    }
+  }, [path, updatePath]);
+
+  return {
+    path,
+    setPage,
+    addPages,
+    goToIndex,
+    goBack,
+  };
+}

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

@@ -0,0 +1,214 @@
+import {
+  CoID,
+  LocalNode,
+  RawBinaryCoStream,
+  RawCoStream,
+  RawCoValue,
+} from "cojson";
+import { useEffect, useState } from "react";
+import { detectCoStreamType } from "./co-stream-view.js";
+
+export type CoJsonType = "comap" | "costream" | "colist";
+export type ExtendedCoJsonType =
+  | "image"
+  | "record"
+  | "account"
+  | "group"
+  | "file";
+
+type JSON = string | number | boolean | null | JSON[] | { [key: string]: JSON };
+type JSONObject = { [key: string]: JSON };
+
+type ResolvedImageDefinition = {
+  originalSize: [number, number];
+  placeholderDataURL?: string;
+  [res: `${number}x${number}`]: RawBinaryCoStream["id"];
+};
+
+// Type guard for browser image
+export const isBrowserImage = (
+  coValue: JSONObject,
+): coValue is ResolvedImageDefinition => {
+  return "originalSize" in coValue && "placeholderDataURL" in coValue;
+};
+
+export type ResolvedGroup = {
+  readKey: string;
+  [key: string]: JSON;
+};
+
+export const isGroup = (coValue: JSONObject): coValue is ResolvedGroup => {
+  return "readKey" in coValue;
+};
+
+export type ResolvedAccount = {
+  profile: {
+    name: string;
+  };
+  [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,
+): Promise<
+  | {
+      value: RawCoValue;
+      snapshot: JSONObject;
+      type: CoJsonType | null;
+      extendedType: ExtendedCoJsonType | undefined;
+    }
+  | {
+      value: undefined;
+      snapshot: "unavailable";
+      type: null;
+      extendedType: undefined;
+    }
+> {
+  const value = await node.load(coValueId);
+
+  if (value === "unavailable") {
+    return {
+      value: undefined,
+      snapshot: "unavailable",
+      type: null,
+      extendedType: undefined,
+    };
+  }
+
+  const snapshot = value.toJSON() as JSONObject;
+  const type = value.type as CoJsonType;
+
+  // Determine extended type
+  let extendedType: ExtendedCoJsonType | undefined;
+
+  if (type === "comap") {
+    if (isBrowserImage(snapshot)) {
+      extendedType = "image";
+    } else if (isAccount(snapshot)) {
+      extendedType = "account";
+    } else if (isGroup(snapshot)) {
+      extendedType = "group";
+    }
+  }
+
+  return {
+    value,
+    snapshot,
+    type,
+    extendedType,
+  };
+}
+
+function subscribeToCoValue(
+  coValueId: CoID<RawCoValue>,
+  node: LocalNode,
+  callback: (result: Awaited<ReturnType<typeof resolveCoValue>>) => void,
+) {
+  return node.subscribe(coValueId, (value) => {
+    if (value === "unavailable") {
+      callback({
+        value: undefined,
+        snapshot: "unavailable",
+        type: null,
+        extendedType: undefined,
+      });
+    } else {
+      const snapshot = value.toJSON() as JSONObject;
+      const type = value.type as CoJsonType;
+      let extendedType: ExtendedCoJsonType | undefined;
+
+      if (type === "comap") {
+        if (isBrowserImage(snapshot)) {
+          extendedType = "image";
+        } else if (isAccount(snapshot)) {
+          extendedType = "account";
+        } else if (isGroup(snapshot)) {
+          extendedType = "group";
+        }
+      } else if (type === "costream") {
+        const coStream = detectCoStreamType(value as RawCoStream);
+
+        if (coStream.type === "binary") {
+          extendedType = "file";
+        }
+      }
+
+      callback({
+        value,
+        snapshot,
+        type,
+        extendedType,
+      });
+    }
+  });
+}
+
+export function useResolvedCoValue(
+  coValueId: CoID<RawCoValue>,
+  node: LocalNode,
+) {
+  const [result, setResult] =
+    useState<Awaited<ReturnType<typeof resolveCoValue>>>();
+
+  useEffect(() => {
+    let isMounted = true;
+    const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+      if (isMounted) {
+        setResult(newResult);
+      }
+    });
+
+    return () => {
+      isMounted = false;
+      unsubscribe();
+    };
+  }, [coValueId, node]);
+
+  return (
+    result || {
+      value: undefined,
+      snapshot: undefined,
+      type: undefined,
+      extendedType: undefined,
+    }
+  );
+}
+
+export function useResolvedCoValues(
+  coValueIds: CoID<RawCoValue>[],
+  node: LocalNode,
+) {
+  const [results, setResults] = useState<
+    Awaited<ReturnType<typeof resolveCoValue>>[]
+  >([]);
+
+  useEffect(() => {
+    let isMounted = true;
+    const unsubscribes: (() => void)[] = [];
+
+    coValueIds.forEach((coValueId, index) => {
+      const unsubscribe = subscribeToCoValue(coValueId, node, (newResult) => {
+        if (isMounted) {
+          setResults((prevResults) => {
+            const newResults = prevResults.slice(0, coValueIds.length);
+            newResults[index] = newResult;
+            return newResults;
+          });
+        }
+      });
+      unsubscribes.push(unsubscribe);
+    });
+
+    return () => {
+      isMounted = false;
+      unsubscribes.forEach((unsubscribe) => unsubscribe());
+    };
+  }, [coValueIds, node]);
+
+  return results;
+}

package/src/inspector/viewer/value-renderer.tsx

@@ -0,0 +1,266 @@
+import { CoID, JsonValue, LocalNode, RawCoValue } from "cojson";
+import { styled } from "goober";
+import React, { useState } from "react";
+import { Button } from "../ui/button.js";
+import { Icon } from "../ui/icon.js";
+import { Text } from "../ui/text.js";
+import { isCoId } from "./types.js";
+import { isBrowserImage, useResolvedCoValue } from "./use-resolve-covalue.js";
+
+const LinkContainer = styled("span")`
+  display: inline-flex;
+  gap: 0.25rem;
+  align-items: center;
+`;
+
+const BooleanText = styled("span")<{ value: boolean }>`
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  ${(props) =>
+    props.value
+      ? `
+    color: var(--j-success-color);
+  `
+      : `
+    color: var(--j-destructive-color);
+  `}
+`;
+
+const ObjectContent = styled("pre")`
+  margin-top: 0.375rem;
+  font-size: 0.875rem;
+  white-space: pre-wrap;
+`;
+
+const PreviewContainer = styled("div")`
+  font-size: 0.875rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: flex-start;
+`;
+
+const PreviewGrid = styled("div")`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.5rem;
+`;
+
+const PreviewMoreText = styled(Text)`
+  text-align: left;
+  margin-top: 0.5rem;
+`;
+
+const ImagePreviewContainer = styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+`;
+
+const PreviewImage = styled("img")`
+  width: 2rem;
+  height: 2rem;
+  border: 2px solid white;
+  box-shadow: var(--j-shadow-sm);
+  margin: 0.5rem 0;
+`;
+
+const RecordText = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+
+const ListText = styled("div")`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+
+// Is there a chance we can pass the actual CoValue here?
+export function ValueRenderer({
+  json,
+  onCoIDClick,
+  compact,
+}: {
+  json: JsonValue | undefined;
+  onCoIDClick?: (childNode: CoID<RawCoValue>) => void;
+  compact?: boolean;
+}) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  if (typeof json === "undefined" || json === undefined) {
+    return <Text muted>undefined</Text>;
+  }
+
+  if (json === null) {
+    return <Text muted>null</Text>;
+  }
+
+  if (typeof json === "string" && isCoId(json)) {
+    const content = (
+      <>
+        {json}
+        {onCoIDClick && <Icon name="link" />}
+      </>
+    );
+
+    if (onCoIDClick) {
+      return (
+        <Button
+          variant="link"
+          onClick={() => {
+            onCoIDClick?.(json as CoID<RawCoValue>);
+          }}
+        >
+          {content}
+        </Button>
+      );
+    }
+
+    return <LinkContainer>{content}</LinkContainer>;
+  }
+
+  if (typeof json === "string") {
+    return <Text>{json}</Text>;
+  }
+
+  if (typeof json === "number") {
+    return <Text mono>{json}</Text>;
+  }
+
+  if (typeof json === "boolean") {
+    return <BooleanText value={json}>{json.toString()}</BooleanText>;
+  }
+  const longJson = JSON.stringify(json, null, 2);
+  const shortJson = longJson
+    .split("\n")
+    .slice(0, compact ? 3 : 8)
+    .join("\n");
+
+  // Check if collapsed differs from full
+  const hasDifference = longJson !== shortJson;
+
+  if (typeof json === "object") {
+    return (
+      <>
+        <p>{Array.isArray(json) ? <>Array ({json.length})</> : <>Object</>}</p>
+        <ObjectContent>
+          {isExpanded ? longJson : shortJson}
+
+          {hasDifference && !isExpanded ? "\n ..." : null}
+        </ObjectContent>
+
+        {!compact && hasDifference ? (
+          <Button variant="link" onClick={() => setIsExpanded(!isExpanded)}>
+            {isExpanded ? "Show less" : "Show more"}
+          </Button>
+        ) : null}
+      </>
+    );
+  }
+
+  return <span>{String(json)}</span>;
+}
+
+export const CoMapPreview = ({
+  coId,
+  node,
+  limit = 6,
+}: {
+  coId: CoID<RawCoValue>;
+  node: LocalNode;
+  limit?: number;
+}) => {
+  const { value, snapshot, type, extendedType } = useResolvedCoValue(
+    coId,
+    node,
+  );
+
+  if (!snapshot) {
+    return (
+      <div
+        style={{
+          borderRadius: "0.25rem",
+          backgroundColor: "var(--j-foreground)",
+          animation: "pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite",
+          whiteSpace: "pre",
+          width: "6rem",
+        }}
+      >
+        {" "}
+      </div>
+    );
+  }
+
+  if (snapshot === "unavailable" && !value) {
+    return (
+      <Text inline muted>
+        Unavailable
+      </Text>
+    );
+  }
+
+  if (extendedType === "image" && isBrowserImage(snapshot)) {
+    return (
+      <ImagePreviewContainer>
+        <PreviewImage src={snapshot.placeholderDataURL} />
+        <Text inline small muted>
+          {snapshot.originalSize[0]} x {snapshot.originalSize[1]}
+        </Text>
+      </ImagePreviewContainer>
+    );
+  }
+
+  if (extendedType === "record") {
+    return (
+      <RecordText>
+        Record{" "}
+        <Text inline muted>
+          ({Object.keys(snapshot).length})
+        </Text>
+      </RecordText>
+    );
+  }
+
+  if (type === "colist") {
+    return (
+      <ListText>
+        List{" "}
+        <Text inline muted>
+          ({(snapshot as unknown as []).length})
+        </Text>
+      </ListText>
+    );
+  }
+
+  const properties = Object.entries(snapshot);
+  const limitedProperties =
+    extendedType === "account"
+      ? properties
+          .filter(
+            ([key]) =>
+              !key.startsWith("key_z") &&
+              !key.startsWith("sealer_z") &&
+              key !== "readKey",
+          )
+          .slice(0, limit)
+      : properties.slice(0, limit);
+
+  return (
+    <PreviewContainer>
+      <PreviewGrid>
+        {limitedProperties.map(([key, value]) => (
+          <React.Fragment key={key}>
+            <Text strong>{key}: </Text>
+            <ValueRenderer compact json={value} />
+          </React.Fragment>
+        ))}
+      </PreviewGrid>
+      {properties.length > limit && (
+        <PreviewMoreText muted small>
+          {properties.length - limit} more
+        </PreviewMoreText>
+      )}
+    </PreviewContainer>
+  );
+};

package/src/prosemirror/index.ts

@@ -0,0 +1,2 @@
+export { createJazzPlugin } from "./lib/plugin.js";
+export type { JazzPluginConfig } from "./lib/plugin.js";

package/src/prosemirror/lib/converter.ts

@@ -0,0 +1,50 @@
+import {
+  DOMParser as PMDOMParser,
+  DOMSerializer as PMDOMSerializer,
+  Node as PMNode,
+  Schema as PMSchema,
+} from "prosemirror-model";
+
+/**
+ * Converts HTML content to a ProseMirror document.
+ *
+ * This function takes a string of HTML content and converts it into a ProseMirror document
+ * that can be used in the editor. It uses the basic ProseMirror schema to parse the HTML.
+ *
+ * @param content - The HTML content to convert
+ * @returns A ProseMirror document that can be used in the editor
+ *
+ * @example
+ * ```typescript
+ * const html = "<p>Hello <strong>world</strong></p>";
+ * const doc = htmlToProseMirror(html);
+ * ```
+ */
+export function htmlToProseMirror(content: string, schema: PMSchema) {
+  const doc = new DOMParser().parseFromString(content, "text/html");
+  return PMDOMParser.fromSchema(schema).parse(doc);
+}
+
+/**
+ * Converts a ProseMirror document to HTML string.
+ *
+ * This function takes a ProseMirror document and converts it back to HTML.
+ * It serializes the document's content and removes any unnecessary XML namespaces.
+ *
+ * @param doc - The ProseMirror document to convert
+ * @returns An HTML string representation of the document
+ *
+ * @example
+ * ```typescript
+ * const html = proseMirrorToHtml(editorState.doc);
+ * ```
+ */
+export function proseMirrorToHtml(doc: PMNode) {
+  return new XMLSerializer()
+    .serializeToString(
+      PMDOMSerializer.fromSchema(doc.type.schema).serializeFragment(
+        doc.content,
+      ),
+    )
+    .replace(/\sxmlns="[^"]+"/g, "");
+}