Editor mvp

.gitignore

@@ -1,6 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
+.npmrc
 node_modules
 .pnp
 .pnp.js

apps/dashboard/.env.example

@@ -44,6 +44,15 @@ EMAIL_FEEDBACK_INBOX=feedback@mydomain.com
 # Provider: Resend
 EMAIL_RESEND_API_KEY=
 
+# -------------------------- TIPTAP --------------------------
+
+NEXT_PUBLIC_TIPTAP_PRO_TOKEN=zGK176JZbe9YRtUz7AV9xBDVxSVKfy9D2prmcSFnNEAe67vC5Elx3hh21XeiAaNz
+NEXT_PUBLIC_TIPTAP_COLLAB_DOC_PREFIX= - Document prefix                                
+NEXT_PUBLIC_TIPTAP_COLLAB_APP_ID= - Document Server App ID                             
+NEXT_PUBLIC_TIPTAP_COLLAB_TOKEN= - JWT token for collaboration                         
+NEXT_PUBLIC_TIPTAP_AI_APP_ID= - AI App ID                                              
+NEXT_PUBLIC_TIPTAP_AI_TOKEN= - JWT token for AI      
+
 # -------------------------- MONITORING --------------------------
 
 # Select a monitoring provider: Console (default) or Sentry.

apps/dashboard/app/layout.tsx

@@ -1,4 +1,6 @@
 import '@workspace/ui/globals.css';
+import '@workspace/editor/styles/_variables.scss';
+import '@workspace/editor/styles/_keyframe-animations.scss';
 
 import * as React from 'react';
 import type { Metadata, Viewport } from 'next';

apps/dashboard/app/organizations/[slug]/(organization)/documents/[documentId]/page.tsx

@@ -14,7 +14,7 @@ import {
 import { DocumentActions } from '~/components/organizations/slug/documents/details/document-actions';
 import { DocumentMeta } from '~/components/organizations/slug/documents/details/document-meta';
 import { DocumentPageVisit } from '~/components/organizations/slug/documents/details/document-page-visit';
-import { DocumentTabs } from '~/components/organizations/slug/documents/details/document-tabs';
+import { DocumentEditor } from '~/components/organizations/slug/documents/details/editor/document-editor';
 import { OrganizationPageTitle } from '~/components/organizations/slug/organization-page-title';
 import { getDocument } from '~/data/documents/get-document';
 import { createTitle } from '~/lib/formatters';
@@ -74,11 +74,11 @@ export default async function DocumentPage({
       </PageHeader>
       <PageBody
         disableScroll
-        className="flex h-full flex-col overflow-auto md:flex-row md:divide-x md:overflow-hidden"
+        className="flex h-[calc(100vh-3.5rem)] flex-col overflow-auto md:flex-row md:divide-x md:overflow-hidden"
       >
         <DocumentPageVisit document={document} />
+        <DocumentEditor document={document} />
         <DocumentMeta document={document} />
-        <DocumentTabs document={document} />
       </PageBody>
     </Page>
   );

apps/dashboard/components/auth/forgot-password/forgot-password-card.tsx

@@ -76,10 +76,7 @@ export function ForgotPasswordCard({
   };
   return (
     <Card
-      className={cn(
-        'w-full px-4 py-8 border-transparent dark:border-border',
-        className
-      )}
+      className={cn('w-full border-transparent dark:border-border', className)}
       {...other}
     >
       <CardHeader>

apps/dashboard/components/auth/sign-in/sign-in-card.tsx

@@ -234,7 +234,7 @@ export function SignInCard({
             >
               {methods.formState.isSubmitting ? (
                 <div className="flex items-center gap-2">
-                  <Spinner size="small" />
+                  <Spinner />
                   <span>Signing in...</span>
                 </div>
               ) : (

apps/dashboard/components/auth/verify-email/verify-email-card.tsx

@@ -45,13 +45,10 @@ export function VerifyEmailCard({
 
   return (
     <Card
-      className={cn(
-        'w-full px-4 py-8 border-transparent dark:border-border',
-        className
-      )}
+      className={cn('w-full  border-transparent dark:border-border', className)}
       {...other}
     >
-      <CardHeader>
+      <CardHeader className="px-4 pt-4">
         <CardTitle className="text-base lg:text-lg">
           Please check your email
         </CardTitle>
@@ -60,7 +57,7 @@ export function VerifyEmailCard({
           a verification link.
         </CardDescription>
       </CardHeader>
-      <CardContent>
+      <CardContent className="px-4 pb-4">
         <p className="text-sm text-muted-foreground">
           Click the link in the email to verify your account.
         </p>

apps/dashboard/components/organizations/slug/documents/details/document-actions-dropdown.tsx

@@ -70,17 +70,19 @@ export function DocumentActionsDropdown({
   };
   return (
     <DropdownMenu>
-      <DropdownMenuTrigger>
-        <Button
-          type="button"
-          variant="ghost"
-          className="size-9"
-          title="Open menu"
-        >
-          <MoreHorizontalIcon className="size-4 shrink-0" />
-          <span className="sr-only">Open menu</span>
-        </Button>
-      </DropdownMenuTrigger>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            type="button"
+            variant="ghost"
+            className="size-9"
+            title="Open menu"
+          >
+            <MoreHorizontalIcon className="size-4 shrink-0" />
+            <span className="sr-only">Open menu</span>
+          </Button>
+        }
+      />
       <DropdownMenuContent align="end">
         <DropdownMenuItem
           className="cursor-pointer"

apps/dashboard/components/organizations/slug/documents/details/document-actions.tsx

@@ -18,6 +18,10 @@ export async function DocumentActions({
 
   return (
     <div className="flex flex-row items-center gap-2">
+      <div
+        id="editor-header-actions-portal"
+        className="flex flex-row items-center gap-2"
+      />
       <DocumentFavoriteToggle
         document={document}
         addedToFavorites={addedToFavorites}

apps/dashboard/components/organizations/slug/documents/details/document-details-section.tsx

@@ -11,12 +11,13 @@ import {
   TrashIcon,
   UploadIcon
 } from 'lucide-react';
-import { Form, type SubmitHandler } from 'react-hook-form';
+import { type SubmitHandler } from 'react-hook-form';
 
 import { DocumentRecord } from '@workspace/database/schema';
 import { Avatar, AvatarFallback } from '@workspace/ui/components/avatar';
 import { Button } from '@workspace/ui/components/button';
 import {
+  Form,
   FormControl,
   FormField,
   FormItem,

apps/dashboard/components/organizations/slug/documents/details/document-tabs.tsx

@@ -9,18 +9,25 @@ import {
   TabsTrigger
 } from '@workspace/ui/components/tabs';
 
+import { DocumentEditorTab } from '~/components/organizations/slug/documents/details/editor/document-editor-tab';
 import { DocumentNotesTab } from '~/components/organizations/slug/documents/details/notes/document-notes-tab';
 import { DocumentTasksTab } from '~/components/organizations/slug/documents/details/tasks/document-tasks-tab';
 import { DocumentActivityTab } from '~/components/organizations/slug/documents/details/timeline/document-activity-tab';
 import type { DocumentDto } from '~/types/dtos/document-dto';
 
 enum Tab {
+  Editor = 'editor',
   Activity = 'activity',
   Notes = 'notes',
   Tasks = 'tasks'
 }
 
 const tabList = [
+  {
+    icon: FileIcon,
+    label: 'Editor',
+    value: Tab.Editor
+  },
   {
     icon: ActivityIcon,
     label: 'Activity',
@@ -66,6 +73,14 @@ export async function DocumentTabs({
         ))}
       </TabsList>
       <Separator />
+      <TabsContent
+        value={Tab.Editor}
+        className="m-0 p-0 md:grow md:overflow-hidden"
+      >
+        <React.Suspense>
+          <DocumentEditorTab document={document} />
+        </React.Suspense>
+      </TabsContent>
       <TabsContent
         value={Tab.Activity}
         className="m-0 p-0 md:grow md:overflow-hidden"

apps/dashboard/components/organizations/slug/documents/details/editor/document-editor-tab.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+
+import { DocumentEditor } from '~/components/organizations/slug/documents/details/editor/document-editor';
+import type { DocumentDto } from '~/types/dtos/document-dto';
+
+export type DocumentEditorTabProps = {
+  document: DocumentDto;
+};
+
+export async function DocumentEditorTab({
+  document
+}: DocumentEditorTabProps): Promise<React.JSX.Element> {
+  return <DocumentEditor document={document} />;
+}

apps/dashboard/components/organizations/slug/documents/details/editor/document-editor.tsx

@@ -0,0 +1,28 @@
+'use client';
+
+import * as React from 'react';
+
+import { NusomaEditor } from '@workspace/editor';
+import { ResponsiveScrollArea } from '@workspace/ui/components/scroll-area';
+import { MediaQueries } from '@workspace/ui/lib/media-queries';
+
+import type { DocumentDto } from '~/types/dtos/document-dto';
+
+export type DocumentEditorProps = {
+  document: DocumentDto;
+};
+
+export function DocumentEditor({
+  document
+}: DocumentEditorProps): React.JSX.Element {
+  const slug = document.id;
+  return (
+    <ResponsiveScrollArea
+      breakpoint={MediaQueries.MdUp}
+      mediaQueryOptions={{ ssr: true }}
+      className="flex-1 w-full"
+    >
+      <NusomaEditor room={slug} />
+    </ResponsiveScrollArea>
+  );
+}

apps/dashboard/components/organizations/slug/documents/details/notes/document-note-card.tsx

@@ -68,7 +68,7 @@ export function DocumentNoteCard({
           <p className="text-sm">{note.sender.name}</p>
         </div>
         <DropdownMenu>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
             <Button
               type="button"
               variant="ghost"

apps/dashboard/components/organizations/slug/documents/details/tasks/document-task-list.tsx

@@ -144,7 +144,7 @@ function DocumentTaskListItem({
             className="hidden sm:inline-flex"
           />
           <DropdownMenu>
-            <DropdownMenuTrigger>
+            <DropdownMenuTrigger asChild>
               <Button
                 type="button"
                 variant="ghost"

apps/dashboard/components/organizations/slug/documents/details/timeline/document-activity.tsx

@@ -41,7 +41,7 @@ export function DocumentActivity({
       mediaQueryOptions={{ ssr: true }}
       className="h-full"
     >
-      <div className="size-full max-w-xl grow p-6">
+      <div className="size-full max-w-xl mx-auto grow p-6">
         <div className="overflow-visible border-none bg-transparent">
           <ul
             role="list"

apps/dashboard/components/organizations/slug/documents/documents-bulk-actions.tsx

@@ -116,7 +116,7 @@ export function DocumentsBulkActions({
   return (
     <DataTableBulkActions table={table}>
       <DropdownMenu modal={false}>
-        <DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="outline"

apps/dashboard/components/organizations/slug/settings/account/notifications/marketing-emails-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Form, type SubmitHandler } from 'react-hook-form';
+import { type SubmitHandler } from 'react-hook-form';
 
 import { Button } from '@workspace/ui/components/button';
 import {
@@ -11,6 +11,7 @@ import {
   type CardProps
 } from '@workspace/ui/components/card';
 import {
+  Form,
   FormControl,
   FormDescription,
   FormField,

apps/dashboard/components/organizations/slug/settings/account/notifications/transactional-emails-card.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import * as React from 'react';
-import { Form, type SubmitHandler } from 'react-hook-form';
+import { type SubmitHandler } from 'react-hook-form';
 
 import { Button } from '@workspace/ui/components/button';
 import {
@@ -11,6 +11,7 @@ import {
   type CardProps
 } from '@workspace/ui/components/card';
 import {
+  Form,
   FormControl,
   FormDescription,
   FormField,

apps/dashboard/components/organizations/slug/settings/account/profile/delete-account-modal.tsx

@@ -4,7 +4,7 @@ import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import NiceModal, { type NiceModalHocProps } from '@ebay/nice-modal-react';
 import { AlertCircleIcon } from 'lucide-react';
-import { Form, type SubmitHandler } from 'react-hook-form';
+import { type SubmitHandler } from 'react-hook-form';
 
 import { authClient } from '@workspace/auth/client';
 import { replaceOrgSlug, routes } from '@workspace/routes';
@@ -28,6 +28,7 @@ import {
   DrawerTitle
 } from '@workspace/ui/components/drawer';
 import {
+  Form,
   FormControl,
   FormField,
   FormItem,

apps/dashboard/components/organizations/slug/settings/organization/billing/invoice-list.tsx

@@ -83,7 +83,7 @@ function InvoiceListItem({
         </div>
       </div>
       <DropdownMenu modal={false}>
-        <DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"

apps/dashboard/components/organizations/slug/settings/organization/developers/api-key-list.tsx

@@ -77,7 +77,7 @@ function ApiKeyListItem({
         </div>
       </div>
       <DropdownMenu modal={false}>
-        <DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"

apps/dashboard/components/organizations/slug/settings/organization/developers/webhook-list.tsx

@@ -89,7 +89,7 @@ function WebhookListItem({
         )}
       </div>
       <DropdownMenu modal={false}>
-        <DropdownMenuTrigger>
+        <DropdownMenuTrigger asChild>
           <Button
             type="button"
             variant="ghost"

apps/dashboard/components/organizations/slug/settings/organization/members/invitation-list.tsx

@@ -110,7 +110,7 @@ function InvitationListItem({
           {capitalize(invitation.role.toLowerCase())}
         </Badge>
         <DropdownMenu modal={false}>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
             <Button
               type="button"
               variant="ghost"

apps/dashboard/components/organizations/slug/settings/organization/members/member-list.tsx

@@ -115,7 +115,7 @@ function MemberListItem({
           {capitalize(member.role.toLowerCase())}
         </Badge>
         <DropdownMenu modal={false}>
-          <DropdownMenuTrigger>
+          <DropdownMenuTrigger asChild>
             <Button
               type="button"
               variant="ghost"

apps/dashboard/env.ts

@@ -4,6 +4,7 @@ import { keys as analytics } from '@workspace/analytics/keys';
 import { keys as auth } from '@workspace/auth/keys';
 import { keys as billing } from '@workspace/billing/keys';
 import { keys as database } from '@workspace/database/keys';
+import { keys as editor } from '@workspace/editor/keys';
 import { keys as email } from '@workspace/email/keys';
 import { keys as monitoring } from '@workspace/monitoring/keys';
 import { keys as routes } from '@workspace/routes/keys';
@@ -14,6 +15,7 @@ export const env = createEnv({
     auth(),
     billing(),
     database(),
+    editor(),
     email(),
     monitoring(),
     routes()

apps/dashboard/next.config.ts

@@ -15,6 +15,7 @@ const INTERNAL_PACKAGES = [
   '@workspace/rate-limit',
   '@workspace/routes',
   '@workspace/ui',
+  '@workspace/editor',
   '@workspace/webhooks'
 ];