Add Canvases (#34)

* add knip to CI

* add preview deployments

* fix site url env var

* fix site_url for preview deps, also move e2e to separate job

* attempt fix env var issue

* remove duplicate comment

* add back comment, move tooltip

* add manual dispatch option to e2e test

* improve preview deployments

* prevent duplicate deployments to prod

* fix sub-sub-domain issue

* fix hardcoded url

* fixes

* add github repo env var

* fix order of operations

* attempt env var fix

* fix

* resolve type issue

* Note yjs (#30)

* add yjs live collab for notes

* optimize collab performance

* remove unused dep

* fix missing env var

* add yet another missing env var for preview

* improvements

* fix viewer strict mode issue

* add tests, fix small issues

* address comments

* fixes

* fix strict mode issue

* fixes

* resolve nits

* add redo test

* re-use convex preview

* fix depreciated flag

* add missing env var

* fix env var handling

* fix comments and undo bug

* add canvases (#33)

* add xy-flow

* add live canvas features

* add free-hand drawing

* fix stroke impl, add more modes

* add undo/redo

* add color picker and selection improvements

* add better zoom controls

* refactor

* selection fixes + minimap adjustment

* improve multi select indicator

* fix sidebar layout issue

* improve color picker

* add basic embedding and dnd

* add resizing

* add embedded content

* add better prveiews with client side image generation for notes

* add convex eslint plugin

* fix ssr issue

* add preview generation

* fixes

* improve canvas embeds

* address comments

* fixes

* explicitly pass auth secret

* fixes

* more fixes

* improvements

* improvements

* fix pre-mature throw

* fix test

* add resize awareness and fix canvas external file drop

* address comments

* fix flakey test

* address comments again

* fix claim token in tests

* attempt fix env var issue

* fix

* add resend api key to preview dep

Author: ntietje1

.coderabbit.yaml

@@ -4,7 +4,7 @@ early_access: false
 enable_free_tier: true
 inheritance: false
 reviews:
-  profile: chill
+  profile: assertive
   request_changes_workflow: false
   high_level_summary: true
   high_level_summary_instructions: ''

.github/workflows/deploy.yml

@@ -26,7 +26,7 @@ jobs:
           cache: pnpm
       - run: pnpm install --frozen-lockfile
       - name: Deploy Convex
-        run: npx convex deploy --cmd-url-env-var-name VITE_CONVEX_URL
+        run: npx convex deploy
         env:
           CONVEX_DEPLOY_KEY: '${{ secrets.CONVEX_DEPLOY_KEY }}'
       - name: Deploy Cloudflare Workers

.github/workflows/preview.yml

@@ -30,7 +30,8 @@ jobs:
           cache: pnpm
       - run: pnpm install --frozen-lockfile
 
-      - name: Deploy Convex Preview
+      - name: Deploy Convex Preview (Create on Open)
+        if: github.event.action == 'opened'
         run: |
           npx convex deploy \
             --preview-create "pr-${{ github.event.pull_request.number }}" \
@@ -44,12 +45,33 @@ jobs:
           VITE_PR_NUMBER: ${{ github.event.pull_request.number }}
           VITE_GITHUB_REPOSITORY: ${{ github.repository }}
 
-      - name: Set Convex Preview Env Vars
+      - name: Deploy Convex Preview (Update Existing)
+        if: github.event.action != 'opened' && github.event.action != 'closed'
         run: |
-          PREVIEW="pr-${{ github.event.pull_request.number }}"
-          npx convex env set SITE_URL "${{ env.PREVIEW_URL }}" --preview-name "$PREVIEW"
-          npx convex env set GOOGLE_CLIENT_ID "${{ secrets.GOOGLE_CLIENT_ID }}" --preview-name "$PREVIEW"
-          npx convex env set GOOGLE_CLIENT_SECRET "${{ secrets.GOOGLE_CLIENT_SECRET }}" --preview-name "$PREVIEW"
+          npx convex deploy \
+            --preview-create "pr-${{ github.event.pull_request.number }}" \
+            --cmd 'npx vite build' \
+            --cmd-url-env-var-name VITE_CONVEX_URL
+        env:
+          CONVEX_DEPLOY_KEY: '${{ secrets.CONVEX_PREVIEW_DEPLOY_KEY }}'
+          VITE_CONVEX_SITE_URL: ${{ secrets.VITE_CONVEX_SITE_URL }}
+          VITE_SITE_URL: ${{ env.PREVIEW_URL }}
+          VITE_IS_PREVIEW: 'true'
+          VITE_PR_NUMBER: ${{ github.event.pull_request.number }}
+          VITE_GITHUB_REPOSITORY: ${{ github.repository }}
+
+      - name: Set Preview Environment Variables
+        run: |
+          npx convex env set BETTER_AUTH_SECRET "${{ secrets.BETTER_AUTH_SECRET }}" \
+            --preview-name "pr-${{ github.event.pull_request.number }}"
+          npx convex env set SITE_URL "${{ env.PREVIEW_URL }}" \
+            --preview-name "pr-${{ github.event.pull_request.number }}"
+          npx convex env set GOOGLE_CLIENT_ID "${{ secrets.GOOGLE_CLIENT_ID }}" \
+            --preview-name "pr-${{ github.event.pull_request.number }}"
+          npx convex env set GOOGLE_CLIENT_SECRET "${{ secrets.GOOGLE_CLIENT_SECRET }}" \
+            --preview-name "pr-${{ github.event.pull_request.number }}"
+          npx convex env set RESEND_API_KEY "${{ secrets.RESEND_API_KEY }}" \
+            --preview-name "pr-${{ github.event.pull_request.number }}"
         env:
           CONVEX_DEPLOY_KEY: '${{ secrets.CONVEX_PREVIEW_DEPLOY_KEY }}'
 

convex/_generated/api.d.ts

@@ -51,6 +51,12 @@ import type * as campaigns_mutations from "../campaigns/mutations.js";
 import type * as campaigns_queries from "../campaigns/queries.js";
 import type * as campaigns_types from "../campaigns/types.js";
 import type * as campaigns_validation from "../campaigns/validation.js";
+import type * as canvases_baseSchema from "../canvases/baseSchema.js";
+import type * as canvases_functions_createCanvas from "../canvases/functions/createCanvas.js";
+import type * as canvases_functions_enhanceCanvas from "../canvases/functions/enhanceCanvas.js";
+import type * as canvases_functions_updateCanvas from "../canvases/functions/updateCanvas.js";
+import type * as canvases_mutations from "../canvases/mutations.js";
+import type * as canvases_types from "../canvases/types.js";
 import type * as common_constants from "../common/constants.js";
 import type * as common_logger from "../common/logger.js";
 import type * as common_slug from "../common/slug.js";
@@ -101,13 +107,11 @@ import type * as notes_functions_createNote from "../notes/functions/createNote.
 import type * as notes_functions_enhanceNote from "../notes/functions/enhanceNote.js";
 import type * as notes_functions_getNote from "../notes/functions/getNote.js";
 import type * as notes_functions_updateNote from "../notes/functions/updateNote.js";
-import type * as notes_functions_updateNoteContent from "../notes/functions/updateNoteContent.js";
 import type * as notes_mutations from "../notes/mutations.js";
 import type * as notes_queries from "../notes/queries.js";
 import type * as notes_types from "../notes/types.js";
 import type * as permissions_hasAtLeastPermissionLevel from "../permissions/hasAtLeastPermissionLevel.js";
 import type * as permissions_types from "../permissions/types.js";
-import type * as prosemirrorSync from "../prosemirrorSync.js";
 import type * as sessions_functions_endCurrentSession from "../sessions/functions/endCurrentSession.js";
 import type * as sessions_functions_getCurrentSession from "../sessions/functions/getCurrentSession.js";
 import type * as sessions_functions_getSession from "../sessions/functions/getSession.js";
@@ -120,6 +124,7 @@ import type * as sessions_queries from "../sessions/queries.js";
 import type * as sessions_types from "../sessions/types.js";
 import type * as sidebarItems_functions_applyToDependents from "../sidebarItems/functions/applyToDependents.js";
 import type * as sidebarItems_functions_applyToTree from "../sidebarItems/functions/applyToTree.js";
+import type * as sidebarItems_functions_claimPreviewGeneration from "../sidebarItems/functions/claimPreviewGeneration.js";
 import type * as sidebarItems_functions_collectDescendants from "../sidebarItems/functions/collectDescendants.js";
 import type * as sidebarItems_functions_defaultItemName from "../sidebarItems/functions/defaultItemName.js";
 import type * as sidebarItems_functions_emptyTrashBin from "../sidebarItems/functions/emptyTrashBin.js";
@@ -132,6 +137,7 @@ import type * as sidebarItems_functions_hardDeleteItem from "../sidebarItems/fun
 import type * as sidebarItems_functions_moveSidebarItem from "../sidebarItems/functions/moveSidebarItem.js";
 import type * as sidebarItems_functions_permanentlyDeleteSidebarItem from "../sidebarItems/functions/permanentlyDeleteSidebarItem.js";
 import type * as sidebarItems_functions_purgeExpiredTrash from "../sidebarItems/functions/purgeExpiredTrash.js";
+import type * as sidebarItems_functions_setPreviewImage from "../sidebarItems/functions/setPreviewImage.js";
 import type * as sidebarItems_internalMutations from "../sidebarItems/internalMutations.js";
 import type * as sidebarItems_mutations from "../sidebarItems/mutations.js";
 import type * as sidebarItems_queries from "../sidebarItems/queries.js";
@@ -173,6 +179,17 @@ import type * as users_mutations from "../users/mutations.js";
 import type * as users_queries from "../users/queries.js";
 import type * as users_types from "../users/types.js";
 import type * as users_validation from "../users/validation.js";
+import type * as yjsSync_constants from "../yjsSync/constants.js";
+import type * as yjsSync_functions_checkYjsAccess from "../yjsSync/functions/checkYjsAccess.js";
+import type * as yjsSync_functions_compactUpdates from "../yjsSync/functions/compactUpdates.js";
+import type * as yjsSync_functions_createYjsDocument from "../yjsSync/functions/createYjsDocument.js";
+import type * as yjsSync_functions_deleteYjsDocument from "../yjsSync/functions/deleteYjsDocument.js";
+import type * as yjsSync_functions_reconstructYDoc from "../yjsSync/functions/reconstructYDoc.js";
+import type * as yjsSync_functions_types from "../yjsSync/functions/types.js";
+import type * as yjsSync_functions_uint8ToArrayBuffer from "../yjsSync/functions/uint8ToArrayBuffer.js";
+import type * as yjsSync_internalMutations from "../yjsSync/internalMutations.js";
+import type * as yjsSync_mutations from "../yjsSync/mutations.js";
+import type * as yjsSync_queries from "../yjsSync/queries.js";
 
 import type {
   ApiFromModules,
@@ -224,6 +241,12 @@ declare const fullApi: ApiFromModules<{
   "campaigns/queries": typeof campaigns_queries;
   "campaigns/types": typeof campaigns_types;
   "campaigns/validation": typeof campaigns_validation;
+  "canvases/baseSchema": typeof canvases_baseSchema;
+  "canvases/functions/createCanvas": typeof canvases_functions_createCanvas;
+  "canvases/functions/enhanceCanvas": typeof canvases_functions_enhanceCanvas;
+  "canvases/functions/updateCanvas": typeof canvases_functions_updateCanvas;
+  "canvases/mutations": typeof canvases_mutations;
+  "canvases/types": typeof canvases_types;
   "common/constants": typeof common_constants;
   "common/logger": typeof common_logger;
   "common/slug": typeof common_slug;
@@ -274,13 +297,11 @@ declare const fullApi: ApiFromModules<{
   "notes/functions/enhanceNote": typeof notes_functions_enhanceNote;
   "notes/functions/getNote": typeof notes_functions_getNote;
   "notes/functions/updateNote": typeof notes_functions_updateNote;
-  "notes/functions/updateNoteContent": typeof notes_functions_updateNoteContent;
   "notes/mutations": typeof notes_mutations;
   "notes/queries": typeof notes_queries;
   "notes/types": typeof notes_types;
   "permissions/hasAtLeastPermissionLevel": typeof permissions_hasAtLeastPermissionLevel;
   "permissions/types": typeof permissions_types;
-  prosemirrorSync: typeof prosemirrorSync;
   "sessions/functions/endCurrentSession": typeof sessions_functions_endCurrentSession;
   "sessions/functions/getCurrentSession": typeof sessions_functions_getCurrentSession;
   "sessions/functions/getSession": typeof sessions_functions_getSession;
@@ -293,6 +314,7 @@ declare const fullApi: ApiFromModules<{
   "sessions/types": typeof sessions_types;
   "sidebarItems/functions/applyToDependents": typeof sidebarItems_functions_applyToDependents;
   "sidebarItems/functions/applyToTree": typeof sidebarItems_functions_applyToTree;
+  "sidebarItems/functions/claimPreviewGeneration": typeof sidebarItems_functions_claimPreviewGeneration;
   "sidebarItems/functions/collectDescendants": typeof sidebarItems_functions_collectDescendants;
   "sidebarItems/functions/defaultItemName": typeof sidebarItems_functions_defaultItemName;
   "sidebarItems/functions/emptyTrashBin": typeof sidebarItems_functions_emptyTrashBin;
@@ -305,6 +327,7 @@ declare const fullApi: ApiFromModules<{
   "sidebarItems/functions/moveSidebarItem": typeof sidebarItems_functions_moveSidebarItem;
   "sidebarItems/functions/permanentlyDeleteSidebarItem": typeof sidebarItems_functions_permanentlyDeleteSidebarItem;
   "sidebarItems/functions/purgeExpiredTrash": typeof sidebarItems_functions_purgeExpiredTrash;
+  "sidebarItems/functions/setPreviewImage": typeof sidebarItems_functions_setPreviewImage;
   "sidebarItems/internalMutations": typeof sidebarItems_internalMutations;
   "sidebarItems/mutations": typeof sidebarItems_mutations;
   "sidebarItems/queries": typeof sidebarItems_queries;
@@ -346,6 +369,17 @@ declare const fullApi: ApiFromModules<{
   "users/queries": typeof users_queries;
   "users/types": typeof users_types;
   "users/validation": typeof users_validation;
+  "yjsSync/constants": typeof yjsSync_constants;
+  "yjsSync/functions/checkYjsAccess": typeof yjsSync_functions_checkYjsAccess;
+  "yjsSync/functions/compactUpdates": typeof yjsSync_functions_compactUpdates;
+  "yjsSync/functions/createYjsDocument": typeof yjsSync_functions_createYjsDocument;
+  "yjsSync/functions/deleteYjsDocument": typeof yjsSync_functions_deleteYjsDocument;
+  "yjsSync/functions/reconstructYDoc": typeof yjsSync_functions_reconstructYDoc;
+  "yjsSync/functions/types": typeof yjsSync_functions_types;
+  "yjsSync/functions/uint8ToArrayBuffer": typeof yjsSync_functions_uint8ToArrayBuffer;
+  "yjsSync/internalMutations": typeof yjsSync_internalMutations;
+  "yjsSync/mutations": typeof yjsSync_mutations;
+  "yjsSync/queries": typeof yjsSync_queries;
 }>;
 
 /**
@@ -375,82 +409,6 @@ export declare const internal: FilterApi<
 >;
 
 export declare const components: {
-  prosemirrorSync: {
-    lib: {
-      deleteDocument: FunctionReference<
-        "mutation",
-        "internal",
-        { id: string },
-        null
-      >;
-      deleteSnapshots: FunctionReference<
-        "mutation",
-        "internal",
-        { afterVersion?: number; beforeVersion?: number; id: string },
-        null
-      >;
-      deleteSteps: FunctionReference<
-        "mutation",
-        "internal",
-        {
-          afterVersion?: number;
-          beforeTs: number;
-          deleteNewerThanLatestSnapshot?: boolean;
-          id: string;
-        },
-        null
-      >;
-      getSnapshot: FunctionReference<
-        "query",
-        "internal",
-        { id: string; version?: number },
-        { content: null } | { content: string; version: number }
-      >;
-      getSteps: FunctionReference<
-        "query",
-        "internal",
-        { id: string; version: number },
-        {
-          clientIds: Array<string | number>;
-          steps: Array<string>;
-          version: number;
-        }
-      >;
-      latestVersion: FunctionReference<
-        "query",
-        "internal",
-        { id: string },
-        null | number
-      >;
-      submitSnapshot: FunctionReference<
-        "mutation",
-        "internal",
-        {
-          content: string;
-          id: string;
-          pruneSnapshots?: boolean;
-          version: number;
-        },
-        null
-      >;
-      submitSteps: FunctionReference<
-        "mutation",
-        "internal",
-        {
-          clientId: string | number;
-          id: string;
-          steps: Array<string>;
-          version: number;
-        },
-        | {
-            clientIds: Array<string | number>;
-            status: "needs-rebase";
-            steps: Array<string>;
-          }
-        | { status: "synced" }
-      >;
-    };
-  };
   betterAuth: {
     adapter: {
       create: FunctionReference<