From e6480a6945134e81a54cd23b71a9876850e76b8f Mon Sep 17 00:00:00 2001
From: Jared Pereira <jared@awarm.space>
Date: Tue, 21 May 2024 15:28:29 -0400
Subject: [PATCH] add ordered references for blocks

---
 app/[doc_id]/page.tsx                       |  37 +++++--
 components/TextBlock.tsx                    |  89 +++++++++++----
 drizzle/schema.ts                           | 114 +++++++++++++++-----
 package-lock.json                           |  35 ++++++
 package.json                                |   3 +
 replicache/attributes.ts                    |   2 +-
 replicache/clientMutationContext.ts         |  53 +++++++++
 replicache/index.tsx                        |  77 +++++--------
 replicache/mutations.ts                     |  23 ++--
 replicache/pull.ts                          |  20 +---
 replicache/push.ts                          |  67 +-----------
 replicache/serverMutationContext.ts         |  87 +++++++++++++++
 replicache/utils.ts                         |   5 +-
 supabase/migrations/20240519231512_init.sql |  10 +-
 utils/elementId.ts                          |   5 +
 15 files changed, 425 insertions(+), 202 deletions(-)
 create mode 100644 replicache/clientMutationContext.ts
 create mode 100644 replicache/serverMutationContext.ts
 create mode 100644 utils/elementId.ts

diff --git a/app/[doc_id]/page.tsx b/app/[doc_id]/page.tsx
index ba25b24b..1cab3b1f 100644
--- a/app/[doc_id]/page.tsx
+++ b/app/[doc_id]/page.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { ReplicacheProvider, useEntity, useReplicache } from "../../replicache";
 import { TextBlock } from "../../components/TextBlock";
+import { generateKeyBetween } from "fractional-indexing";
 
 export default function DocumentPage(props: { params: { doc_id: string } }) {
   return (
@@ -14,11 +15,15 @@ export default function DocumentPage(props: { params: { doc_id: string } }) {
 
 function AddBlock(props: { entityID: string }) {
   let rep = useReplicache();
+  let blocks = useEntity(props.entityID, "card/block")?.sort((a, b) => {
+    return a.data.position > b.data.position ? 1 : -1;
+  });
   return (
     <button
       onClick={() => {
         rep?.rep?.mutate.addBlock({
           parent: props.entityID,
+          position: generateKeyBetween(null, blocks[0]?.data.position || null),
           newEntityID: crypto.randomUUID(),
         });
       }}
@@ -32,19 +37,35 @@ function Blocks(props: { entityID: string }) {
   let blocks = useEntity(props.entityID, "card/block");
 
   return (
-    <div>
-      {blocks?.map((f) => {
-        let data = f.data as { type: "reference"; value: string };
-        return <Block key={f.id} entityID={data.value} />;
-      })}
+    <div className="mx-auto max-w-3xl">
+      {blocks
+        ?.sort((a, b) => {
+          return a.data.position > b.data.position ? 1 : -1;
+        })
+        .map((f, index, arr) => {
+          return (
+            <Block
+              key={f.id}
+              entityID={f.data.value}
+              parent={props.entityID}
+              position={f.data.position}
+              nextPosition={arr[index + 1]?.data.position || null}
+            />
+          );
+        })}
     </div>
   );
 }
 
-function Block(props: { entityID: string }) {
+function Block(props: {
+  entityID: string;
+  parent: string;
+  position: string;
+  nextPosition: string | null;
+}) {
   return (
-    <div className="border p-2">
-      <TextBlock entityID={props.entityID} />
+    <div className="border p-2 w-full">
+      <TextBlock {...props} />
     </div>
   );
 }
diff --git a/components/TextBlock.tsx b/components/TextBlock.tsx
index 7917f2da..9241ddbe 100644
--- a/components/TextBlock.tsx
+++ b/components/TextBlock.tsx
@@ -1,47 +1,98 @@
 import { useRef, useEffect, useState } from "react";
+import { elementId } from "../utils/elementId";
+import { baseKeymap, toggleMark } from "prosemirror-commands";
+import { keymap } from "prosemirror-keymap";
 import * as Y from "yjs";
+import { ProseMirror } from "@nytimes/react-prosemirror";
 import * as base64 from "base64-js";
-import { useReplicache, useEntity } from "../replicache";
+import { useReplicache, useEntity, ReplicacheMutators } from "../replicache";
 
 import { EditorState } from "prosemirror-state";
-import { EditorView } from "prosemirror-view";
 import { schema } from "prosemirror-schema-basic";
 import { ySyncPlugin } from "y-prosemirror";
+import { Replicache } from "replicache";
+import { generateKeyBetween } from "fractional-indexing";
 
-export function TextBlock(props: { entityID: string }) {
-  let ref = useRef<null | HTMLPreElement>(null);
+export function TextBlock(props: {
+  entityID: string;
+  parent: string;
+  position: string;
+  nextPosition: string | null;
+}) {
+  const [mount, setMount] = useState<HTMLElement | null>(null);
   let value = useYJSValue(props.entityID);
+  let repRef = useRef<null | Replicache<ReplicacheMutators>>(null);
+  let propsRef = useRef(props);
   useEffect(() => {
-    let editor = new EditorView(ref.current, {
-      state: EditorState.create({
-        schema,
-        plugins: [ySyncPlugin(value)],
-      }),
-    });
-    return () => {
-      editor.destroy();
-    };
-  }, [value]);
+    propsRef.current = props;
+  }, [props]);
+  let rep = useReplicache();
+  useEffect(() => {
+    repRef.current = rep.rep;
+  }, [rep?.rep]);
+  let [editorState, setEditorState] = useState(
+    EditorState.create({
+      schema,
+      plugins: [
+        ySyncPlugin(value),
+        keymap({
+          "Meta-b": toggleMark(schema.marks.strong),
+          "Meta-i": toggleMark(schema.marks.em),
+          Enter: () => {
+            let newEntityID = crypto.randomUUID();
+            repRef.current?.mutate.addBlock({
+              newEntityID,
+              parent: props.parent,
+              position: generateKeyBetween(
+                propsRef.current.position,
+                propsRef.current.nextPosition,
+              ),
+            });
+            setTimeout(() => {
+              document
+                .getElementById(elementId.block(newEntityID).text)
+                ?.focus();
+            }, 100);
+            return true;
+          },
+        }),
+        keymap(baseKeymap),
+      ],
+    }),
+  );
 
-  return <pre ref={ref} />;
+  return (
+    <ProseMirror
+      mount={mount}
+      state={editorState}
+      dispatchTransaction={(tr) => {
+        setEditorState((s) => s.apply(tr));
+      }}
+    >
+      <pre
+        id={elementId.block(props.entityID).text}
+        className="w-full whitespace-pre-wrap"
+        ref={setMount}
+      />
+    </ProseMirror>
+  );
 }
 
 function useYJSValue(entityID: string) {
   const [ydoc] = useState(new Y.Doc());
   const docStateFromReplicache = useEntity(entityID, "block/text");
+  console.log(docStateFromReplicache?.data.value);
   let rep = useReplicache();
   const yText = ydoc.getXmlFragment("prosemirror");
 
-  if (docStateFromReplicache?.[0]) {
-    const update = base64.toByteArray(docStateFromReplicache[0].data.value);
+  if (docStateFromReplicache) {
+    const update = base64.toByteArray(docStateFromReplicache.data.value);
     Y.applyUpdateV2(ydoc, update);
   }
 
   useEffect(() => {
     if (!rep.rep) return;
-    console.log("yo");
     const f = async () => {
-      console.log(entityID);
       const update = Y.encodeStateAsUpdateV2(ydoc);
       await rep.rep?.mutate.assertFact({
         entity: entityID,
diff --git a/drizzle/schema.ts b/drizzle/schema.ts
index 252375cb..c895d743 100644
--- a/drizzle/schema.ts
+++ b/drizzle/schema.ts
@@ -1,36 +1,96 @@
-import { pgTable, pgEnum, uuid, timestamp, text, bigint, foreignKey, jsonb } from "drizzle-orm/pg-core"
-  import { sql } from "drizzle-orm"
-
-export const aal_level = pgEnum("aal_level", ['aal1', 'aal2', 'aal3'])
-export const code_challenge_method = pgEnum("code_challenge_method", ['s256', 'plain'])
-export const factor_status = pgEnum("factor_status", ['unverified', 'verified'])
-export const factor_type = pgEnum("factor_type", ['totp', 'webauthn'])
-export const request_status = pgEnum("request_status", ['PENDING', 'SUCCESS', 'ERROR'])
-export const key_status = pgEnum("key_status", ['default', 'valid', 'invalid', 'expired'])
-export const key_type = pgEnum("key_type", ['aead-ietf', 'aead-det', 'hmacsha512', 'hmacsha256', 'auth', 'shorthash', 'generichash', 'kdf', 'secretbox', 'secretstream', 'stream_xchacha20'])
-export const action = pgEnum("action", ['INSERT', 'UPDATE', 'DELETE', 'TRUNCATE', 'ERROR'])
-export const equality_op = pgEnum("equality_op", ['eq', 'neq', 'lt', 'lte', 'gt', 'gte', 'in'])
+import {
+  pgTable,
+  pgEnum,
+  uuid,
+  timestamp,
+  text,
+  bigint,
+  foreignKey,
+  jsonb,
+} from "drizzle-orm/pg-core";
+import { sql } from "drizzle-orm";
+import { Fact } from "../replicache";
+import { Attributes } from "../replicache/attributes";
 
+export const aal_level = pgEnum("aal_level", ["aal1", "aal2", "aal3"]);
+export const code_challenge_method = pgEnum("code_challenge_method", [
+  "s256",
+  "plain",
+]);
+export const factor_status = pgEnum("factor_status", [
+  "unverified",
+  "verified",
+]);
+export const factor_type = pgEnum("factor_type", ["totp", "webauthn"]);
+export const request_status = pgEnum("request_status", [
+  "PENDING",
+  "SUCCESS",
+  "ERROR",
+]);
+export const key_status = pgEnum("key_status", [
+  "default",
+  "valid",
+  "invalid",
+  "expired",
+]);
+export const key_type = pgEnum("key_type", [
+  "aead-ietf",
+  "aead-det",
+  "hmacsha512",
+  "hmacsha256",
+  "auth",
+  "shorthash",
+  "generichash",
+  "kdf",
+  "secretbox",
+  "secretstream",
+  "stream_xchacha20",
+]);
+export const action = pgEnum("action", [
+  "INSERT",
+  "UPDATE",
+  "DELETE",
+  "TRUNCATE",
+  "ERROR",
+]);
+export const equality_op = pgEnum("equality_op", [
+  "eq",
+  "neq",
+  "lt",
+  "lte",
+  "gt",
+  "gte",
+  "in",
+]);
 
 export const entities = pgTable("entities", {
-	id: uuid("id").defaultRandom().primaryKey().notNull(),
-	created_at: timestamp("created_at", { withTimezone: true, mode: 'string' }).defaultNow().notNull(),
+  id: uuid("id").defaultRandom().primaryKey().notNull(),
+  created_at: timestamp("created_at", { withTimezone: true, mode: "string" })
+    .defaultNow()
+    .notNull(),
 });
 
 export const replicache_clients = pgTable("replicache_clients", {
-	client_id: text("client_id").primaryKey().notNull(),
-	client_group: text("client_group").notNull(),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	last_mutation: bigint("last_mutation", { mode: "number" }).notNull(),
+  client_id: text("client_id").primaryKey().notNull(),
+  client_group: text("client_group").notNull(),
+  // You can use { mode: "bigint" } if numbers are exceeding js number limitations
+  last_mutation: bigint("last_mutation", { mode: "number" }).notNull(),
 });
 
 export const facts = pgTable("facts", {
-	id: uuid("id").defaultRandom().primaryKey().notNull(),
-	entity: uuid("entity").notNull().references(() => entities.id, { onDelete: "cascade", onUpdate: "restrict" } ),
-	attribute: text("attribute").notNull(),
-	data: jsonb("data").notNull(),
-	created_at: timestamp("created_at", { mode: 'string' }).defaultNow().notNull(),
-	updated_at: timestamp("updated_at", { mode: 'string' }),
-	// You can use { mode: "bigint" } if numbers are exceeding js number limitations
-	version: bigint("version", { mode: "number" }).default(0).notNull(),
-});
\ No newline at end of file
+  id: uuid("id").defaultRandom().primaryKey().notNull(),
+  entity: uuid("entity")
+    .notNull()
+    .references(() => entities.id, {
+      onDelete: "cascade",
+      onUpdate: "restrict",
+    }),
+  attribute: text("attribute").notNull().$type<keyof typeof Attributes>(),
+  data: jsonb("data").notNull().$type<Fact<any>["data"]>(),
+  created_at: timestamp("created_at", { mode: "string" })
+    .defaultNow()
+    .notNull(),
+  updated_at: timestamp("updated_at", { mode: "string" }),
+  // You can use { mode: "bigint" } if numbers are exceeding js number limitations
+  version: bigint("version", { mode: "number" }).default(0).notNull(),
+});
diff --git a/package-lock.json b/package-lock.json
index c4baa61e..1aaa74c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,11 @@
         "@vercel/kv": "^1.0.1",
         "base64-js": "^1.5.1",
         "drizzle-orm": "^0.30.10",
+        "fractional-indexing": "^3.2.0",
         "next": "^14.2.3",
         "postgres": "^3.4.4",
+        "prosemirror-commands": "^1.5.2",
+        "prosemirror-keymap": "^1.2.2",
         "prosemirror-schema-basic": "^1.2.2",
         "prosemirror-state": "^1.4.3",
         "react": "^18.3.1",
@@ -4872,6 +4875,14 @@
         "url": "https://github.com/sponsors/rawify"
       }
     },
+    "node_modules/fractional-indexing": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fractional-indexing/-/fractional-indexing-3.2.0.tgz",
+      "integrity": "sha512-PcOxmqwYCW7O2ovKRU8OoQQj2yqTfEB/yeTYk4gPid6dN5ODRfU1hXd9tTVZzax/0NkO7AxpHykvZnT1aYp/BQ==",
+      "engines": {
+        "node": "^14.13.1 || >=16.0.0"
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -6813,6 +6824,25 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prosemirror-commands": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
+      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
     "node_modules/prosemirror-model": {
       "version": "1.21.0",
       "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.21.0.tgz",
@@ -8115,6 +8145,11 @@
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
       "dev": true
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 6611bea5..8a679c1e 100644
--- a/package.json
+++ b/package.json
@@ -21,8 +21,11 @@
     "@vercel/kv": "^1.0.1",
     "base64-js": "^1.5.1",
     "drizzle-orm": "^0.30.10",
+    "fractional-indexing": "^3.2.0",
     "next": "^14.2.3",
     "postgres": "^3.4.4",
+    "prosemirror-commands": "^1.5.2",
+    "prosemirror-keymap": "^1.2.2",
     "prosemirror-schema-basic": "^1.2.2",
     "prosemirror-state": "^1.4.3",
     "react": "^18.3.1",
diff --git a/replicache/attributes.ts b/replicache/attributes.ts
index ca3d9395..5d048a26 100644
--- a/replicache/attributes.ts
+++ b/replicache/attributes.ts
@@ -1,6 +1,6 @@
 export const Attributes = {
   "card/block": {
-    type: "reference",
+    type: "ordered-reference",
     cardinality: "many",
   },
   "block/position": {
diff --git a/replicache/clientMutationContext.ts b/replicache/clientMutationContext.ts
new file mode 100644
index 00000000..04675c22
--- /dev/null
+++ b/replicache/clientMutationContext.ts
@@ -0,0 +1,53 @@
+import { WriteTransaction } from "replicache";
+import * as Y from "yjs";
+import * as base64 from "base64-js";
+import { FactWithIndexes } from "./utils";
+import { Attributes } from "./attributes";
+import { Fact } from ".";
+import { MutationContext } from "./mutations";
+
+export function clientMutationContext(tx: WriteTransaction) {
+  let ctx: MutationContext = {
+    async createEntity(_entityID) {
+      return true;
+    },
+    scanIndex: {
+      async eav(entity, attribute) {
+        let existingFact = await tx
+          .scan<Fact<typeof attribute>>({
+            indexName: "eav",
+            prefix: `${entity}-${attribute}`,
+          })
+          .toArray();
+        return existingFact;
+      },
+    },
+    async assertFact(f) {
+      let attribute = Attributes[f.attribute as keyof typeof Attributes];
+      if (!attribute) return;
+      let id = f.id || crypto.randomUUID();
+      let data = { ...f.data };
+      if (attribute.cardinality === "one") {
+        let existingFact = await tx
+          .scan<Fact<typeof f.attribute>>({
+            indexName: "eav",
+            prefix: `${f.entity}-${f.attribute}`,
+          })
+          .toArray();
+        if (existingFact[0]) {
+          id = existingFact[0].id;
+          if (attribute.type === "text") {
+            const oldUpdate = base64.toByteArray(
+              (existingFact[0]?.data as Fact<typeof f.attribute>["data"]).value,
+            );
+            const newUpdate = base64.toByteArray(f.data.value);
+            const updateBytes = Y.mergeUpdatesV2([oldUpdate, newUpdate]);
+            data.value = base64.fromByteArray(updateBytes);
+          }
+        }
+      }
+      await tx.set(id, FactWithIndexes({ id, ...f, data }));
+    },
+  };
+  return ctx;
+}
diff --git a/replicache/index.tsx b/replicache/index.tsx
index a2336138..a559e28c 100644
--- a/replicache/index.tsx
+++ b/replicache/index.tsx
@@ -1,15 +1,13 @@
 "use client";
-import * as base64 from "base64-js";
-import * as Y from "yjs";
 import { createContext, useContext, useEffect, useState } from "react";
 import { DeepReadonlyObject, Replicache, WriteTransaction } from "replicache";
 import { Pull } from "./pull";
-import { MutationContext, mutations } from "./mutations";
+import { mutations } from "./mutations";
 import { Attributes } from "./attributes";
 import { Push } from "./push";
-import { FactWithIndexes } from "./utils";
 import { createClient } from "@supabase/supabase-js";
 import { Database } from "../supabase/database.types";
+import { clientMutationContext } from "./clientMutationContext";
 
 export type Fact<A extends keyof typeof Attributes> = {
   id: string;
@@ -20,6 +18,11 @@ export type Fact<A extends keyof typeof Attributes> = {
 
 type Data<A extends keyof typeof Attributes> = {
   text: { type: "text"; value: string };
+  "ordered-reference": {
+    type: "ordered-reference";
+    position: string;
+    value: string;
+  };
   reference: { type: "reference"; value: string };
 }[(typeof Attributes)[A]["type"]];
 
@@ -29,7 +32,7 @@ let ReplicacheContext = createContext({
 export function useReplicache() {
   return useContext(ReplicacheContext);
 }
-type ReplicacheMutators = {
+export type ReplicacheMutators = {
   [k in keyof typeof mutations]: (
     tx: WriteTransaction,
     args: Parameters<(typeof mutations)[k]>[0],
@@ -51,45 +54,10 @@ export function ReplicacheProvider(props: {
           return [
             m,
             async (tx: WriteTransaction, args: any) => {
-              await mutations[m as keyof typeof mutations](args, {
-                async createEntity(_entityID) {
-                  return true;
-                },
-                async assertFact(f) {
-                  let attribute =
-                    Attributes[f.attribute as keyof typeof Attributes];
-                  if (!attribute) return;
-                  let id = f.id || crypto.randomUUID();
-                  let data = { ...f.data };
-                  if (attribute.cardinality === "one") {
-                    let existingFact = await tx
-                      .scan<Fact<typeof f.attribute>>({
-                        indexName: "eav",
-                        prefix: `${f.entity}-${f.attribute}`,
-                      })
-                      .toArray();
-                    if (existingFact[0]) {
-                      id = existingFact[0].id;
-                      if (attribute.type === "text") {
-                        const oldUpdate = base64.toByteArray(
-                          (
-                            existingFact[0]?.data as Fact<
-                              typeof f.attribute
-                            >["data"]
-                          ).value,
-                        );
-                        const newUpdate = base64.toByteArray(f.data.value);
-                        const updateBytes = Y.mergeUpdatesV2([
-                          oldUpdate,
-                          newUpdate,
-                        ]);
-                        data.value = base64.fromByteArray(updateBytes);
-                      }
-                    }
-                  }
-                  await tx.set(id, FactWithIndexes({ id, ...f, data }));
-                },
-              } as MutationContext);
+              await mutations[m as keyof typeof mutations](
+                args,
+                clientMutationContext(tx),
+              );
             },
           ];
         }),
@@ -134,23 +102,28 @@ export function ReplicacheProvider(props: {
   );
 }
 
-export function useEntity(entity: string, attribute: keyof typeof Attributes) {
-  let [data, setData] = useState<
-    null | DeepReadonlyObject<Fact<typeof attribute>>[]
-  >(null);
+type CardinalityResult<A extends keyof typeof Attributes> =
+  (typeof Attributes)[A]["cardinality"] extends "one"
+    ? DeepReadonlyObject<Fact<A>>
+    : DeepReadonlyObject<Fact<A>>[];
+export function useEntity<A extends keyof typeof Attributes>(
+  entity: string,
+  attribute: A,
+): CardinalityResult<A> {
+  let [data, setData] = useState<DeepReadonlyObject<Fact<A>[]>>([]);
   let { rep } = useReplicache();
   useEffect(() => {
     if (!rep) return;
     return rep.subscribe(
       (tx) => {
         return tx
-          .scan<
-            Fact<typeof attribute>
-          >({ indexName: "eav", prefix: `${entity}-${attribute}` })
+          .scan<Fact<A>>({ indexName: "eav", prefix: `${entity}-${attribute}` })
           .toArray();
       },
       { onData: setData },
     );
   }, [entity, attribute, rep]);
-  return data;
+  return Attributes[attribute].cardinality === "many"
+    ? (data as CardinalityResult<A>)
+    : (data[0] as CardinalityResult<A>);
 }
diff --git a/replicache/mutations.ts b/replicache/mutations.ts
index 07cad987..947f94c9 100644
--- a/replicache/mutations.ts
+++ b/replicache/mutations.ts
@@ -1,8 +1,15 @@
+import { DeepReadonly } from "replicache";
 import { Fact } from ".";
 import { Attributes } from "./attributes";
 
 export type MutationContext = {
   createEntity: (entityID: string) => Promise<boolean>;
+  scanIndex: {
+    eav: <A extends keyof typeof Attributes>(
+      entity: string,
+      attribute: A,
+    ) => Promise<DeepReadonly<Fact<A>[]>>;
+  };
   assertFact: <A extends keyof typeof Attributes>(
     f: Omit<Fact<A>, "id"> & { id?: string },
   ) => Promise<void>;
@@ -10,15 +17,19 @@ export type MutationContext = {
 
 type Mutation<T> = (args: T, ctx: MutationContext) => Promise<void>;
 
-const addBlock: Mutation<{ parent: string; newEntityID: string }> = async (
-  args,
-  ctx,
-) => {
-  console.log(args.parent);
+const addBlock: Mutation<{
+  parent: string;
+  newEntityID: string;
+  position: string;
+}> = async (args, ctx) => {
   await ctx.createEntity(args.newEntityID);
   await ctx.assertFact({
     entity: args.parent,
-    data: { type: "reference", value: args.newEntityID },
+    data: {
+      type: "ordered-reference",
+      value: args.newEntityID,
+      position: args.position,
+    },
     attribute: "card/block",
   });
 };
diff --git a/replicache/pull.ts b/replicache/pull.ts
index 77c09a51..fd2e498a 100644
--- a/replicache/pull.ts
+++ b/replicache/pull.ts
@@ -10,7 +10,8 @@ import { Database } from "../supabase/database.types";
 import { Fact } from ".";
 import postgres from "postgres";
 import { drizzle } from "drizzle-orm/postgres-js";
-import { getClientGroup } from "./utils";
+import { FactWithIndexes, getClientGroup } from "./utils";
+import { Attributes } from "./attributes";
 let supabase = createClient<Database>(
   process.env.NEXT_PUBLIC_SUPABASE_API_URL as string,
   process.env.SUPABASE_SERVICE_ROLE_KEY as string,
@@ -29,7 +30,6 @@ export async function Pull(
 
   return {
     cookie: Date.now(),
-    //TODO When we implement push
     lastMutationIDChanges: clientGroup,
     patch: [
       { op: "clear" },
@@ -37,7 +37,7 @@ export async function Pull(
         return {
           op: "put",
           key: f.id,
-          value: FactWithIndexes(f as unknown as Fact),
+          value: FactWithIndexes(f as unknown as Fact<keyof typeof Attributes>),
         } as const;
       }),
     ],
@@ -48,17 +48,3 @@ const versionNotSupported: VersionNotSupportedResponse = {
   error: "VersionNotSupported",
   versionType: "pull",
 };
-
-function FactWithIndexes(f: Fact) {
-  let indexes: {
-    eav: string;
-    aev: string;
-    vae?: string;
-  } = {
-    eav: `${f.entity}-${f.attribute}-${f.id}`,
-    aev: `${f.attribute}-${f.entity}-${f.id}`,
-  };
-  if (f.data.type === "reference")
-    indexes.vae = `${f.data.value}-${f.attribute}`;
-  return { ...f, indexes };
-}
diff --git a/replicache/push.ts b/replicache/push.ts
index 037cd23c..faf79309 100644
--- a/replicache/push.ts
+++ b/replicache/push.ts
@@ -1,17 +1,13 @@
 "use server";
 import { PushRequest, PushResponse } from "replicache";
-import * as base64 from "base64-js";
-import * as Y from "yjs";
+import { serverMutationContext } from "./serverMutationContext";
 import { mutations } from "./mutations";
 import { drizzle } from "drizzle-orm/postgres-js";
-import * as driz from "drizzle-orm";
 import postgres from "postgres";
-import { entities, facts, replicache_clients } from "../drizzle/schema";
-import { Attributes } from "./attributes";
+import { replicache_clients } from "../drizzle/schema";
 import { getClientGroup } from "./utils";
 import { createClient } from "@supabase/supabase-js";
 import { Database } from "../supabase/database.types";
-import { Fact } from ".";
 
 const client = postgres(process.env.DB_URL as string);
 let supabase = createClient<Database>(
@@ -36,64 +32,7 @@ export async function Push(
     }
     db.transaction(async (tx) => {
       try {
-        await mutations[name](mutation.args as any, {
-          async createEntity(entity) {
-            console.log(
-              await tx.insert(entities).values({
-                id: entity,
-              }),
-            );
-            return true;
-          },
-          async assertFact(f) {
-            let attribute = Attributes[f.attribute as keyof typeof Attributes];
-            if (!attribute) return;
-            let id = f.id || crypto.randomUUID();
-            let data = { ...f.data };
-            if (attribute.cardinality === "one") {
-              let existingFact = await tx
-                .select({ id: facts.id, data: facts.data })
-                .from(facts)
-                .where(
-                  driz.and(
-                    driz.eq(facts.attribute, f.attribute),
-                    driz.eq(facts.entity, f.entity),
-                  ),
-                );
-              if (existingFact[0]) {
-                id = existingFact[0].id;
-                if (attribute.type === "text") {
-                  const oldUpdate = base64.toByteArray(
-                    (existingFact[0]?.data as Fact<typeof f.attribute>["data"])
-                      .value,
-                  );
-                  console.log("mergin updates");
-                  const newUpdate = base64.toByteArray(f.data.value);
-                  const updateBytes = Y.mergeUpdatesV2([oldUpdate, newUpdate]);
-                  data.value = base64.fromByteArray(updateBytes);
-                }
-              }
-            }
-            await tx.transaction(
-              async (tx2) =>
-                await tx2
-                  .insert(facts)
-                  .values({
-                    id: id,
-                    entity: f.entity,
-                    data: driz.sql`${data}::jsonb`,
-                    attribute: f.attribute,
-                  })
-                  .onConflictDoUpdate({
-                    target: facts.id,
-                    set: { data: driz.sql`${f.data}::jsonb` },
-                  })
-                  .catch((e) => {
-                    console.log(`error on inserting fact: `, JSON.stringify(e));
-                  }),
-            );
-          },
-        });
+        await mutations[name](mutation.args as any, serverMutationContext(tx));
       } catch (e) {
         console.log(
           `Error occured while running mutation: ${name}`,
diff --git a/replicache/serverMutationContext.ts b/replicache/serverMutationContext.ts
new file mode 100644
index 00000000..f4413efc
--- /dev/null
+++ b/replicache/serverMutationContext.ts
@@ -0,0 +1,87 @@
+import { PgTransaction } from "drizzle-orm/pg-core";
+import * as driz from "drizzle-orm";
+import * as base64 from "base64-js";
+import * as Y from "yjs";
+import { MutationContext } from "./mutations";
+import { entities, facts } from "../drizzle/schema";
+import { Attributes } from "./attributes";
+import { Fact } from ".";
+import { DeepReadonly } from "replicache";
+export function serverMutationContext(tx: PgTransaction<any, any, any>) {
+  let ctx: MutationContext = {
+    async createEntity(entity) {
+      console.log(
+        await tx.insert(entities).values({
+          id: entity,
+        }),
+      );
+      return true;
+    },
+    scanIndex: {
+      async eav(entity, attribute) {
+        return (await tx
+          .select({
+            id: facts.id,
+            data: facts.data,
+            entity: facts.entity,
+            attribute: facts.attribute,
+          })
+          .from(facts)
+          .where(
+            driz.and(
+              driz.eq(facts.attribute, attribute),
+              driz.eq(facts.entity, entity),
+            ),
+          )) as DeepReadonly<Fact<typeof attribute>>[];
+      },
+    },
+    async assertFact(f) {
+      let attribute = Attributes[f.attribute as keyof typeof Attributes];
+      if (!attribute) return;
+      let id = f.id || crypto.randomUUID();
+      let data = { ...f.data };
+      if (attribute.cardinality === "one") {
+        let existingFact = await tx
+          .select({ id: facts.id, data: facts.data })
+          .from(facts)
+          .where(
+            driz.and(
+              driz.eq(facts.attribute, f.attribute),
+              driz.eq(facts.entity, f.entity),
+            ),
+          );
+        if (existingFact[0]) {
+          id = existingFact[0].id;
+          if (attribute.type === "text") {
+            const oldUpdate = base64.toByteArray(
+              (existingFact[0]?.data as Fact<typeof f.attribute>["data"]).value,
+            );
+            console.log("mergin updates");
+            const newUpdate = base64.toByteArray(f.data.value);
+            const updateBytes = Y.mergeUpdatesV2([oldUpdate, newUpdate]);
+            data.value = base64.fromByteArray(updateBytes);
+          }
+        }
+      }
+      await tx.transaction(
+        async (tx2) =>
+          await tx2
+            .insert(facts)
+            .values({
+              id: id,
+              entity: f.entity,
+              data: driz.sql`${data}::jsonb`,
+              attribute: f.attribute,
+            })
+            .onConflictDoUpdate({
+              target: facts.id,
+              set: { data: driz.sql`${f.data}::jsonb` },
+            })
+            .catch((e) => {
+              console.log(`error on inserting fact: `, JSON.stringify(e));
+            }),
+      );
+    },
+  };
+  return ctx;
+}
diff --git a/replicache/utils.ts b/replicache/utils.ts
index 4cd179a7..b9f4b0ec 100644
--- a/replicache/utils.ts
+++ b/replicache/utils.ts
@@ -2,8 +2,9 @@ import { PostgresJsDatabase } from "drizzle-orm/postgres-js";
 import * as driz from "drizzle-orm";
 import { Fact } from ".";
 import { replicache_clients } from "../drizzle/schema";
+import { Attributes } from "./attributes";
 
-export function FactWithIndexes(f: Fact) {
+export function FactWithIndexes(f: Fact<keyof typeof Attributes>) {
   let indexes: {
     eav: string;
     aev: string;
@@ -12,7 +13,7 @@ export function FactWithIndexes(f: Fact) {
     eav: `${f.entity}-${f.attribute}-${f.id}`,
     aev: `${f.attribute}-${f.entity}-${f.id}`,
   };
-  if (f.data.type === "reference")
+  if (f.data.type === "reference" || f.data.type === "ordered-reference")
     indexes.vae = `${f.data.value}-${f.attribute}`;
   return { ...f, indexes };
 }
diff --git a/supabase/migrations/20240519231512_init.sql b/supabase/migrations/20240519231512_init.sql
index 1dd267ca..1fdd86df 100644
--- a/supabase/migrations/20240519231512_init.sql
+++ b/supabase/migrations/20240519231512_init.sql
@@ -32,7 +32,7 @@ CREATE UNIQUE INDEX client_pkey ON public.replicache_clients USING btree (client
 
 CREATE UNIQUE INDEX entities_pkey ON public.entities USING btree (id);
 
-CREATE INDEX facts_expr_idx ON public.facts USING btree (((data ->> 'value'::text))) WHERE ((data ->> 'type'::text) = 'reference'::text);
+CREATE INDEX facts_reference_idx ON public.facts USING btree (((data ->> 'value'::text))) WHERE (((data ->> 'type'::text) = 'reference'::text) OR ((data ->> 'type'::text) = 'ordered-reference'::text));
 
 CREATE UNIQUE INDEX facts_pkey ON public.facts USING btree (id);
 
@@ -51,8 +51,7 @@ set check_function_bodies = off;
 CREATE OR REPLACE FUNCTION public.get_facts(root uuid)
  RETURNS SETOF facts
  LANGUAGE sql
-AS $function$
- WITH RECURSIVE all_facts as (
+AS $function$WITH RECURSIVE all_facts as (
     select
       *
     from
@@ -66,13 +65,12 @@ AS $function$
       facts f
       inner join all_facts f1 on (
          uuid(f1.data ->> 'value') = f.entity
-      ) where f1.data ->> 'type' = 'reference'
+      ) where f1.data ->> 'type' = 'reference' or f1.data ->> 'type' = 'ordered-reference'
   )
 select
   *
 from
-  all_facts;
-  $function$
+  all_facts;$function$
 ;
 
 grant delete on table "public"."entities" to "anon";
diff --git a/utils/elementId.ts b/utils/elementId.ts
new file mode 100644
index 00000000..617ff3a1
--- /dev/null
+++ b/utils/elementId.ts
@@ -0,0 +1,5 @@
+export const elementId = {
+  block: (id: string) => ({
+    text: `block/${id}/content`,
+  }),
+};
-- 
2.51.2