gistfile1.txt

import {
  useDocHandle,
  useDocument,
} from "@automerge/automerge-repo-react-hooks";
import { EditorProps } from "@patchwork/sdk";
import { useMatchingPluginDescriptions, usePlugin } from "@patchwork/sdk/hooks";
import { ToolDescription } from "@patchwork/sdk";
import { Slider } from "@patchwork/sdk/ui";
import { next as Automerge } from "@automerge/automerge";
import React, { useMemo, useState } from "react";

export const Tool: React.FC<EditorProps<any, string>> = ({
  docUrl,
  docPath,
  mainDocUrl,
}) => {
  const handle = useDocHandle<any>(docUrl, { suspense: true });
  const [doc] = useDocument<any>(docUrl);
  const [historyIndex, setHistoryIndex] = useState(1);

  const history = useMemo(() => {
    if (!doc) return [];
    return handle.history();
  }, [doc, handle]);

  const maxSteps = history.length - 1;
  
  if (!history.length) return <div>Loading...</div>;

  return (
    <div className="p-4 flex flex-col gap-4 h-full">
      <div className="flex items-center gap-4">
        <Slider
          value={[historyIndex]}
          max={maxSteps}
          step={1}
          onValueChange={(value) => setHistoryIndex(value[0])}
        />
        <div className="font-mono text-sm">
          Change {historyIndex + 1} of {history.length}
        </div>
      </div>

      <div className="font-mono text-sm break-all mb-4">
        Commit hash: {JSON.stringify(history[historyIndex])}
      </div>

      <div className="border-t pt-4 flex-1 overflow-auto">
        <patchwork-embed
          doc-url={docUrl + "#" + history[historyIndex]}
        />
      </div>
    </div>
  );
};