@tulip-systems/create-app 0.12.2 → 0.12.3

package/dist/templates/basic/package.json

@@ -25,11 +25,11 @@
     "@orpc/tanstack-query": "^1.14.15",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-query": "^5.101.4",
-    "@tulip-systems/app": "0.12.2",
-    "@tulip-systems/auth": "0.12.2",
-    "@tulip-systems/commands": "0.12.2",
-    "@tulip-systems/core": "0.12.2",
-    "@tulip-systems/ui": "0.12.2",
+    "@tulip-systems/app": "0.12.3",
+    "@tulip-systems/auth": "0.12.3",
+    "@tulip-systems/commands": "0.12.3",
+    "@tulip-systems/core": "0.12.3",
+    "@tulip-systems/ui": "0.12.3",
     "@vercel/functions": "^3.9.0",
     "better-auth": "^1.6.26",
     "class-variance-authority": "^0.7.1",

package/dist/templates/code/package.json

@@ -49,20 +49,37 @@
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.9",
-    "@tulip-systems/ai": "0.12.2",
-    "@tulip-systems/app": "0.12.2",
-    "@tulip-systems/auth": "0.12.2",
-    "@tulip-systems/commands": "0.12.2",
-    "@tulip-systems/core": "0.12.2",
-    "@tulip-systems/data-tables": "0.12.2",
-    "@tulip-systems/drive": "0.12.2",
-    "@tulip-systems/drive-google": "0.12.2",
-    "@tulip-systems/editor": "0.12.2",
-    "@tulip-systems/editor-storage": "0.12.2",
-    "@tulip-systems/inline": "0.12.2",
-    "@tulip-systems/query": "0.12.2",
-    "@tulip-systems/storage": "0.12.2",
-    "@tulip-systems/ui": "0.12.2",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-blockquote": "^3.29.2",
+    "@tiptap/extension-bold": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-hard-break": "^3.29.2",
+    "@tiptap/extension-heading": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-horizontal-rule": "^3.29.2",
+    "@tiptap/extension-italic": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/extension-list": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-strike": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/extensions": "^3.29.2",
+    "@tulip-systems/ai": "0.12.3",
+    "@tulip-systems/app": "0.12.3",
+    "@tulip-systems/auth": "0.12.3",
+    "@tulip-systems/commands": "0.12.3",
+    "@tulip-systems/core": "0.12.3",
+    "@tulip-systems/data-tables": "0.12.3",
+    "@tulip-systems/drive": "0.12.3",
+    "@tulip-systems/drive-google": "0.12.3",
+    "@tulip-systems/editor": "0.12.3",
+    "@tulip-systems/editor-storage": "0.12.3",
+    "@tulip-systems/inline": "0.12.3",
+    "@tulip-systems/query": "0.12.3",
+    "@tulip-systems/storage": "0.12.3",
+    "@tulip-systems/ui": "0.12.3",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/functions": "^3.9.0",
     "@vercel/otel": "^2.1.3",

package/dist/templates/code/src/app/admin/customers/[id]/(default)/@dashboard/page.tsx

@@ -11,6 +11,7 @@ import {
 import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 const customerMutation = orpc.customers.update.mutationOptions();
@@ -130,6 +131,7 @@ export default function CustomerDetailPage(props: { params: Promise<{ id: string
               mutation={customerMutation}
               strategy={{ mutate: { on: "blur" }, validate: { blur: z.any().nullable() } }}
               className="min-h-40"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

package/dist/templates/code/src/app/admin/projects/[id]/(default)/page.tsx

@@ -26,6 +26,7 @@ import { use } from "react";
 import { z } from "zod";
 import { InitiativeStatusField } from "@/app/admin/initiatives/_config/status";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { projectKeySchema } from "../../_lib/validators";
 
@@ -144,6 +145,7 @@ export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]
             mutation={projectMutation}
             strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
             className="min-h-80"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuFixed />
             <EditorContent />

package/dist/templates/code/src/app/admin/prospects/[id]/(default)/@dashboard/page.tsx

@@ -11,6 +11,7 @@ import {
 import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-systems/ui/data-list";
 import { notFound } from "next/navigation";
 import { use } from "react";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { updateProspectSchema } from "../../../_lib/validators";
 
@@ -164,6 +165,7 @@ export default function ProspectDashboardPage(props: { params: Promise<{ id: str
                 validate: { change: updateProspectSchema.shape.notes },
               }}
               className="min-h-40"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

package/dist/templates/code/src/app/admin/tasks/[id]/(default)/@dashboard/page.tsx

@@ -2,7 +2,7 @@
 
 import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
-import { createFileHandlerUploadStrategy } from "@tulip-systems/editor-storage";
+import { StorageUploadExtension } from "@tulip-systems/editor-storage";
 import {
   InlineComboboxDropdown,
   InlineEditor,
@@ -22,6 +22,7 @@ import { toast } from "@tulip-systems/ui/sonner";
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { uploadClient } from "@/server/storage/client";
 import { storyPointsConfig } from "../../../_lib/constants";
@@ -175,8 +176,9 @@ export default function TaskDetailPage(props: PageProps<"/admin/tasks/[id]">) {
                 mutate: { on: "change", debounceMs: 700 },
                 validate: { change: z.any() },
               }}
-              extensions={{
-                fileHandler: createFileHandlerUploadStrategy({
+              extensions={[
+                ...richTextEditorPreset,
+                StorageUploadExtension.configure({
                   allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
                   variables: {},
                   uploadClient,
@@ -190,7 +192,7 @@ export default function TaskDetailPage(props: PageProps<"/admin/tasks/[id]">) {
                     });
                   },
                 }),
-              }}
+              ]}
               className="min-h-40"
             >
               <EditorMenuFixed />

package/dist/templates/code/src/lib/config/editor.ts

@@ -0,0 +1,54 @@
+import type { ResizableNodeViewDirection } from "@tiptap/core";
+import Blockquote from "@tiptap/extension-blockquote";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
+import Highlight from "@tiptap/extension-highlight";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import { Color, TextStyle } from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
+import { defineEditorPreset } from "@tulip-systems/editor/client";
+import { StorageImage } from "@tulip-systems/editor-storage";
+
+const imageResizeOptions = {
+  enabled: true,
+  directions: ["left", "right"] as ResizableNodeViewDirection[],
+  minHeight: 50,
+  minWidth: 50,
+  alwaysPreserveAspectRatio: true,
+};
+
+export const richTextEditorPreset = defineEditorPreset([
+  Document,
+  Text,
+  Paragraph,
+  Blockquote,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  ListItem,
+  OrderedList,
+  BulletList,
+  StorageImage.configure({ resize: imageResizeOptions }),
+  Bold,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  Highlight.configure({ multicolor: true }),
+  Dropcursor,
+  Gapcursor,
+  UndoRedo,
+  ListKeymap,
+  TrailingNode,
+  TextStyle,
+  Color,
+]);

package/dist/templates/spark/package.json

@@ -35,19 +35,36 @@
     "@tanstack/db": "^0.6.17",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tulip-systems/app": "0.12.2",
-    "@tulip-systems/auth": "0.12.2",
-    "@tulip-systems/commands": "0.12.2",
-    "@tulip-systems/core": "0.12.2",
-    "@tulip-systems/data-tables": "0.12.2",
-    "@tulip-systems/drive": "0.12.2",
-    "@tulip-systems/drive-local": "0.12.2",
-    "@tulip-systems/editor": "0.12.2",
-    "@tulip-systems/editor-storage": "0.12.2",
-    "@tulip-systems/inline": "0.12.2",
-    "@tulip-systems/query": "0.12.2",
-    "@tulip-systems/storage": "0.12.2",
-    "@tulip-systems/ui": "0.12.2",
+    "@tiptap/core": "^3.29.2",
+    "@tiptap/extension-blockquote": "^3.29.2",
+    "@tiptap/extension-bold": "^3.29.2",
+    "@tiptap/extension-document": "^3.29.2",
+    "@tiptap/extension-hard-break": "^3.29.2",
+    "@tiptap/extension-heading": "^3.29.2",
+    "@tiptap/extension-highlight": "^3.29.2",
+    "@tiptap/extension-horizontal-rule": "^3.29.2",
+    "@tiptap/extension-italic": "^3.29.2",
+    "@tiptap/extension-link": "^3.29.2",
+    "@tiptap/extension-list": "^3.29.2",
+    "@tiptap/extension-paragraph": "^3.29.2",
+    "@tiptap/extension-strike": "^3.29.2",
+    "@tiptap/extension-text": "^3.29.2",
+    "@tiptap/extension-text-style": "^3.29.2",
+    "@tiptap/extension-underline": "^3.29.2",
+    "@tiptap/extensions": "^3.29.2",
+    "@tulip-systems/app": "0.12.3",
+    "@tulip-systems/auth": "0.12.3",
+    "@tulip-systems/commands": "0.12.3",
+    "@tulip-systems/core": "0.12.3",
+    "@tulip-systems/data-tables": "0.12.3",
+    "@tulip-systems/drive": "0.12.3",
+    "@tulip-systems/drive-local": "0.12.3",
+    "@tulip-systems/editor": "0.12.3",
+    "@tulip-systems/editor-storage": "0.12.3",
+    "@tulip-systems/inline": "0.12.3",
+    "@tulip-systems/query": "0.12.3",
+    "@tulip-systems/storage": "0.12.3",
+    "@tulip-systems/ui": "0.12.3",
     "@vercel/functions": "^3.9.0",
     "@zip.js/zip.js": "^2.8.34",
     "better-auth": "^1.6.26",

package/dist/templates/spark/src/app/admin/assignments/[id]/(default)/@dashboard/page.tsx

@@ -24,6 +24,7 @@ import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
 import { EmployeeAvatars, EmployeeAvatarsLoading } from "@/app/admin/employees/_components/avatars";
 import { calculateTotalDuration } from "@/app/admin/registrations/_lib/helpers";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function AssignmentDetailPage(props: PageProps<"/admin/assignments/[id]">) {
@@ -99,6 +100,7 @@ export default function AssignmentDetailPage(props: PageProps<"/admin/assignment
                   validate: { change: z.any() },
                 }}
                 className="min-h-24"
+                extensions={richTextEditorPreset}
               >
                 <EditorMenuBubble />
                 <EditorContent />

package/dist/templates/spark/src/app/admin/companies/[id]/(default)/@dashboard/page.tsx

@@ -21,6 +21,7 @@ import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-sys
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { VAT_RATES } from "@/app/admin/clients/_lib/constants";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { updateCompanySchema } from "../../../_lib/validators";
 
@@ -227,6 +228,7 @@ export default function CustomerDetailPage(props: { params: Promise<{ id: string
                     validate: { change: updateCompanySchema.shape.notes.unwrap() },
                   }}
                   className="min-h-40"
+                  extensions={richTextEditorPreset}
                 >
                   <EditorMenuBubble />
                   <EditorContent />

package/dist/templates/spark/src/app/admin/customers/[id]/(default)/@dashboard/page.tsx

@@ -21,6 +21,7 @@ import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
 import { VAT_RATES } from "@/app/admin/clients/_lib/constants";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function CustomerDetailPage(props: { params: Promise<{ id: string }> }) {
@@ -151,6 +152,7 @@ export default function CustomerDetailPage(props: { params: Promise<{ id: string
                   validate: { change: z.any() },
                 }}
                 className="min-h-40"
+                extensions={richTextEditorPreset}
               >
                 <EditorMenuBubble />
                 <EditorContent />

package/dist/templates/spark/src/app/admin/emails/_components/send-email.tsx

@@ -31,6 +31,7 @@ import { notFound, useRouter } from "next/navigation";
 import { createContext, type PropsWithChildren, Suspense, use, useState } from "react";
 import { z } from "zod";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import type { RouterOutputs } from "@/server/router/router";
 import { uploadClient } from "@/server/storage/client";
@@ -44,6 +45,9 @@ type SendEmailFormContextType = {
 };
 
 const SendEmailFormContext = createContext({} as SendEmailFormContextType);
+const emailEditorPreset = richTextEditorPreset.filter(
+  (extension) => !["highlight", "color", "horizontalRule", "blockquote"].includes(extension.name),
+);
 
 /**
  * Send email form
@@ -197,12 +201,7 @@ export function SendEmailFormBody() {
         }}
         className="min-h-120"
         disabled={data.status !== "draft"}
-        extensions={{
-          highlight: false,
-          color: false,
-          horizontalRule: false,
-          blockquote: false,
-        }}
+        extensions={emailEditorPreset}
       >
         {data.status === "draft" && <EditorMenuFixed />}
         <EditorContent />

package/dist/templates/spark/src/app/admin/executions/[id]/@dashboard/page.tsx

@@ -22,6 +22,7 @@ import { use } from "react";
 import { z } from "zod";
 import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
 import { calculateTotalDuration } from "@/app/admin/registrations/_lib/helpers";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { ExecutionStatusField } from "../../_config/status";
 
@@ -98,6 +99,7 @@ export default function Page(props: PageProps<"/admin/executions/[id]">) {
               validate: { change: z.any() },
             }}
             className="min-h-24"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuBubble />
             <EditorContent />

package/dist/templates/spark/src/app/admin/products/[id]/(preview)/page.tsx

@@ -4,7 +4,6 @@ import { useSuspenseQueries } from "@tanstack/react-query";
 import { Allowed } from "@tulip-systems/auth/permissions/client";
 import { getLocalDriveFileUrl } from "@tulip-systems/drive-local";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
-import { createStorageEditorExtensions } from "@tulip-systems/editor-storage/client";
 import {
   Accordion,
   AccordionContent,
@@ -16,6 +15,7 @@ import { Separator } from "@tulip-systems/ui/separator";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { use } from "react";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { ImageCarousel } from "../../_components/image-carousel";
 
@@ -89,7 +89,7 @@ export default function ProductDetailPage(props: PageProps<"/admin/products/[id]
 
           <Editor
             value={productQuery.data.content ?? undefined}
-            extensions={createStorageEditorExtensions()}
+            extensions={richTextEditorPreset}
             variant="preview"
             disabled
           >

package/dist/templates/spark/src/app/admin/products/[id]/dashboard/@dashboard/page.tsx

@@ -16,6 +16,7 @@ import { DataStackColumn, DataStackLayout, DataStackRow } from "@tulip-systems/u
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function DetailPage(props: PageProps<"/admin/products/[id]/dashboard">) {
@@ -116,6 +117,7 @@ export default function DetailPage(props: PageProps<"/admin/products/[id]/dashbo
                 validate: { change: z.any() },
               }}
               className="min-h-24"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

package/dist/templates/spark/src/app/admin/products/[id]/dashboard/editor/page.tsx

@@ -3,15 +3,13 @@
 import { useSuspenseQuery } from "@tanstack/react-query";
 import { Allowed } from "@tulip-systems/auth/permissions/client";
 import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
-import {
-  createFileHandlerUploadStrategy,
-  createStorageEditorExtensions,
-} from "@tulip-systems/editor-storage/client";
+import { StorageUploadExtension } from "@tulip-systems/editor-storage/client";
 import { InlineEditor, InlineField, InlineFieldError } from "@tulip-systems/inline/client";
 import { toast } from "@tulip-systems/ui/sonner";
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { uploadClient } from "@/server/storage/client";
 
@@ -30,9 +28,9 @@ export default function Page(props: PageProps<"/admin/products/[id]/dashboard/ed
           variables={(value) => ({ id, data: { content: value } })}
           mutation={orpc.products.update.mutationOptions()}
           className="min-h-64"
-          extensions={{
-            ...createStorageEditorExtensions(),
-            fileHandler: createFileHandlerUploadStrategy({
+          extensions={[
+            ...richTextEditorPreset,
+            StorageUploadExtension.configure({
               allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
               variables: {},
               uploadClient,
@@ -46,7 +44,7 @@ export default function Page(props: PageProps<"/admin/products/[id]/dashboard/ed
                 });
               },
             }),
-          }}
+          ]}
           strategy={{
             mutate: { on: "change", debounceMs: 700 },
             validate: { change: z.any() },

package/dist/templates/spark/src/app/admin/projects/[id]/(dashboard)/page.tsx

@@ -25,6 +25,7 @@ import { use } from "react";
 import { z } from "zod";
 import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 const toInlineDateValue = (value: Date | string | null | undefined): string | null => {
@@ -228,6 +229,7 @@ export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]
                   validate: { change: z.any() },
                 }}
                 className="min-h-40"
+                extensions={richTextEditorPreset}
               >
                 <EditorMenuBubble />
                 <EditorContent />

package/dist/templates/spark/src/app/admin/projects/[id]/messages/page.tsx

@@ -19,6 +19,7 @@ import {
 import Link from "next/link";
 import { use, useDeferredValue, useMemo } from "react";
 import { runsFilters } from "@/app/admin/runs/_config/filters";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]/messages">) {
@@ -62,7 +63,12 @@ export default function ProjectDetailPage(props: PageProps<"/admin/projects/[id]
             </CardHeader>
 
             <CardContent>
-              <Editor value={message ?? undefined} variant="preview" disabled>
+              <Editor
+                value={message ?? undefined}
+                variant="preview"
+                disabled
+                extensions={richTextEditorPreset}
+              >
                 <EditorContent />
               </Editor>
             </CardContent>

package/dist/templates/spark/src/app/admin/purchase-orders/[id]/(default)/@dashboard/page.tsx

@@ -16,6 +16,7 @@ import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function DetailPage(props: PageProps<"/admin/purchase-orders/[id]">) {
@@ -97,6 +98,7 @@ export default function DetailPage(props: PageProps<"/admin/purchase-orders/[id]
           mutation={orpc.purchaseOrders.update.mutationOptions()}
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           className="min-h-24"
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/purchase-orders/_config/columns-data.tsx

@@ -6,6 +6,7 @@ import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
 import Link from "next/link";
 import { Fragment } from "react";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { EmailStatusField } from "../../emails/_config/status";
 import type { Project } from "../../projects/_lib/validators";
 import type { PurchaseOrderItem } from "../../purchase-order-items/_lib/validators";
@@ -39,7 +40,12 @@ export const purchaseOrderColumns: TableColumnDef<PurchaseOrderColumn>[] = [
     header: ({ column }) => <TableColumnHeader column={column} title="Notitie" />,
     cell: ({ row }) => (
       <TableCell className="line-clamp-1 max-w-[500px] truncate">
-        <Editor value={row.original.notes} variant="preview" disabled>
+        <Editor
+          value={row.original.notes}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/quotation-items/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { formatCurrency } from "@tulip-systems/core";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import type { QuotationItemTableData } from "../_components/tables";
 
 export const quotationItemColumns: TableColumnDef<QuotationItemTableData>[] = [
@@ -18,7 +19,12 @@ export const quotationItemColumns: TableColumnDef<QuotationItemTableData>[] = [
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell>
-        <Editor value={row.getValue("description") ?? undefined} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description") ?? undefined}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/quotation-items/_config/columns-inline.tsx

@@ -17,6 +17,7 @@ import {
   InlineTableCellError,
 } from "@tulip-systems/inline/client";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import type { QuotationItemTableData } from "../_components/tables";
 
@@ -58,6 +59,7 @@ export const quotationItemInlineColumns: TableColumnDef<QuotationItemTableData>[
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           variant="table"
           permission={{ quotation: ["update"] }}
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/quotations/[id]/(default)/@dashboard/page.tsx

@@ -24,6 +24,7 @@ import { use } from "react";
 import { z } from "zod";
 import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 const toInlineDateValue = (value: Date | string | null | undefined): string | null => {
@@ -137,6 +138,7 @@ export default function DetailPage(props: PageProps<"/admin/quotations/[id]">) {
             validate: { change: z.any() },
           }}
           className="min-h-24"
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/run-tasks/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-system
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
 import Link from "next/link";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { TaskStatusField } from "../../tasks/_config/status";
 import type { RunTaskTableData } from "../_components/tables";
 
@@ -22,7 +23,12 @@ export const runTaskTableColumns: TableColumnDef<RunTaskTableData>[] = [
     accessorFn: (row) => row.task.description,
     cell: ({ row }) => (
       <TableCell className="w-full min-w-80">
-        <Editor value={row.getValue("description")} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description")}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/runs/[id]/@dashboard/page.tsx

@@ -22,6 +22,7 @@ import { z } from "zod";
 import { EmployeeAvatars, EmployeeAvatarsLoading } from "@/app/admin/employees/_components/avatars";
 import { calculateTotalDuration } from "@/app/admin/registrations/_lib/helpers";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function RunDetailPage(props: PageProps<"/admin/runs/[id]">) {
@@ -94,6 +95,7 @@ export default function RunDetailPage(props: PageProps<"/admin/runs/[id]">) {
                 validate: { change: z.any() },
               }}
               className="min-h-24"
+              extensions={richTextEditorPreset}
             >
               <EditorMenuBubble />
               <EditorContent />

package/dist/templates/spark/src/app/admin/runs/[id]/reports/page.tsx

@@ -19,6 +19,7 @@ import { RunTaskInfiniteTableProvider } from "@/app/admin/run-tasks/_components/
 import { RunTaskTableToolbar } from "@/app/admin/run-tasks/_components/toolbars";
 import { runTaskTableColumns } from "@/app/admin/run-tasks/_config/columns-data";
 import { runTaskDeleteCommand, runTaskResetCommand } from "@/app/admin/run-tasks/_config/commands";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function RunDetailPage(props: PageProps<"/admin/runs/[id]/reports">) {
@@ -39,6 +40,7 @@ export default function RunDetailPage(props: PageProps<"/admin/runs/[id]/reports
             mutation={orpc.runs.update.mutationOptions()}
             strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
             className="min-h-24"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuBubble />
             <EditorContent />

package/dist/templates/spark/src/app/admin/sales-invoice-items/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { formatCurrency } from "@tulip-systems/core";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { VAT_RATES } from "../../clients/_lib/constants";
 import type { SalesInvoiceItemTableData } from "../_components/tables";
 
@@ -19,7 +20,12 @@ export const salesInvoiceItemColumns: TableColumnDef<SalesInvoiceItemTableData>[
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell>
-        <Editor value={row.getValue("description") ?? undefined} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description") ?? undefined}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/sales-invoice-items/_config/columns-inline.tsx

@@ -19,6 +19,7 @@ import {
   InlineTableCellError,
 } from "@tulip-systems/inline/client";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { vatRateComboboxOptions } from "../../clients/_lib/constants";
 import type { SalesInvoiceItemTableData } from "../_components/tables";
@@ -58,6 +59,7 @@ export const salesInvoiceItemInlineColumns: TableColumnDef<SalesInvoiceItemTable
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           variant="table"
           permission={{ salesOrder: ["update"] }}
+          extensions={richTextEditorPreset}
         >
           <EditorContent />
         </InlineEditor>

package/dist/templates/spark/src/app/admin/sales-order-items/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { formatCurrency } from "@tulip-systems/core";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import type { SalesOrderItemTableData } from "../_components/tables";
 
 export const salesOrderItemColumns: TableColumnDef<SalesOrderItemTableData>[] = [
@@ -18,7 +19,12 @@ export const salesOrderItemColumns: TableColumnDef<SalesOrderItemTableData>[] =
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell>
-        <Editor value={row.getValue("description") ?? undefined} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description") ?? undefined}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/sales-order-items/_config/columns-inline.tsx

@@ -20,6 +20,7 @@ import {
   InlineTableCellError,
 } from "@tulip-systems/inline/client";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { vatRateComboboxOptions } from "../../clients/_lib/constants";
 import type { SalesOrderItemTableData } from "../_components/tables";
@@ -63,6 +64,7 @@ export const salesOrderItemInlineColumns: TableColumnDef<SalesOrderItemTableData
           variant="table"
           permission={{ salesOrder: ["update"] }}
           disabled={row.original.associated.length > 0}
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/sales-orders/[id]/(default)/@dashboard/page.tsx

@@ -20,6 +20,7 @@ import { use } from "react";
 import { z } from "zod";
 import { generateClientHref } from "@/app/admin/clients/_lib/helpers";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { SalesOrderRatioTypeField } from "../../../_config/ratio-type";
 
@@ -95,6 +96,7 @@ export default function DetailPage(props: PageProps<"/admin/sales-orders/[id]">)
             mutation={orpc.salesOrders.update.mutationOptions()}
             strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
             className="min-h-24"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuBubble />
             <EditorContent />

package/dist/templates/spark/src/app/admin/suppliers/[id]/@dashboard/page.tsx

@@ -13,6 +13,7 @@ import { DataList, DataListItem, DataListTitle, DataListValue } from "@tulip-sys
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function DetailPage(props: PageProps<"/admin/suppliers/[id]">) {
@@ -130,6 +131,7 @@ export default function DetailPage(props: PageProps<"/admin/suppliers/[id]">) {
                   validate: { change: z.any() },
                 }}
                 className="min-h-40"
+                extensions={richTextEditorPreset}
               >
                 <EditorMenuBubble />
                 <EditorContent />

package/dist/templates/spark/src/app/admin/tasks/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-system
 import { createTableIndexCell, createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
 import Link from "next/link";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import type { TaskTableData } from "../_components/tables";
 import { TaskStatusField } from "./status";
 
@@ -19,7 +20,12 @@ export const taskTableColumns: TableColumnDef<TaskTableData>[] = [
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell className="w-full min-w-80">
-        <Editor value={row.getValue("description")} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description")}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/tasks/_config/columns-inline.tsx

@@ -23,6 +23,7 @@ import {
 } from "@tulip-systems/inline/client";
 import Link from "next/link";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import type { TaskTableData } from "../_components/tables";
 import type { TaskStatus } from "../_lib/validators";
@@ -62,6 +63,7 @@ export const taskInlineTableColumns: TableColumnDef<TaskTableData>[] = [
           mutation={orpc.tasks.update.mutationOptions()}
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           variant="table"
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/technical-sheets/[id]/page.tsx

@@ -20,6 +20,7 @@ import { notFound } from "next/navigation";
 import { Suspense, use } from "react";
 import { z } from "zod";
 import { Icons } from "@/components/icons";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import { DriveFlatView } from "../../drive/_components/flat.client";
 
@@ -86,6 +87,7 @@ export default function Page(props: PageProps<"/admin/technical-sheets/[id]">) {
           mutation={orpc.technicalSheets.update.mutationOptions()}
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           className="min-h-24"
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/technical-sheets/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-system
 import { createTableIndexCell, createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
 import Link from "next/link";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import type { TechnicalSheetTableData } from "../_components/tables";
 import { TechnicalSheetStatusField } from "./status";
 
@@ -25,7 +26,12 @@ export const technicalSheetTableColumns: TableColumnDef<TechnicalSheetTableData>
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell className="w-full min-w-80">
-        <Editor value={row.getValue("description")} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description")}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>
@@ -36,7 +42,12 @@ export const technicalSheetTableColumns: TableColumnDef<TechnicalSheetTableData>
     header: ({ column }) => <TableColumnHeader column={column} title="Notitie" />,
     cell: ({ row }) => (
       <TableCell className="w-full min-w-80">
-        <Editor value={row.getValue("notes")} variant="preview" disabled>
+        <Editor
+          value={row.getValue("notes")}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/template-tasks/_config/columns-data.tsx

@@ -4,6 +4,7 @@ import { formatCurrency } from "@tulip-systems/core";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import { Editor, EditorContent } from "@tulip-systems/editor/client";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import type { TemplateTaskTableData } from "../_components/tables";
 
 export const templateTaskColumns: TableColumnDef<TemplateTaskTableData>[] = [
@@ -18,7 +19,12 @@ export const templateTaskColumns: TableColumnDef<TemplateTaskTableData>[] = [
     header: ({ column }) => <TableColumnHeader column={column} title="Omschrijving" />,
     cell: ({ row }) => (
       <TableCell>
-        <Editor value={row.getValue("description") ?? undefined} variant="preview" disabled>
+        <Editor
+          value={row.getValue("description") ?? undefined}
+          variant="preview"
+          disabled
+          extensions={richTextEditorPreset}
+        >
           <EditorContent />
         </Editor>
       </TableCell>

package/dist/templates/spark/src/app/admin/template-tasks/_config/columns-inline.tsx

@@ -15,6 +15,7 @@ import {
   InlineTableCellError,
 } from "@tulip-systems/inline/client";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 import type { TemplateTaskTableData } from "../_components/tables";
 
@@ -56,6 +57,7 @@ export const templateTaskInlineColumns: TableColumnDef<TemplateTaskTableData>[]
           strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
           variant="table"
           permission={{ template: ["update"] }}
+          extensions={richTextEditorPreset}
         >
           <EditorMenuBubble />
           <EditorContent />

package/dist/templates/spark/src/app/admin/templates/[id]/@dashboard/page.tsx

@@ -14,6 +14,7 @@ import { DataStackLayout } from "@tulip-systems/ui/data-stack";
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
+import { richTextEditorPreset } from "@/lib/config/editor";
 import { orpc } from "@/server/router/client";
 
 export default function DetailPage(props: PageProps<"/admin/templates/[id]">) {
@@ -45,6 +46,7 @@ export default function DetailPage(props: PageProps<"/admin/templates/[id]">) {
             mutation={orpc.templates.update.mutationOptions()}
             strategy={{ mutate: { on: "change", debounceMs: 700 }, validate: { change: z.any() } }}
             className="min-h-24"
+            extensions={richTextEditorPreset}
           >
             <EditorMenuBubble />
             <EditorContent />

package/dist/templates/spark/src/lib/config/editor.ts

@@ -0,0 +1,54 @@
+import type { ResizableNodeViewDirection } from "@tiptap/core";
+import Blockquote from "@tiptap/extension-blockquote";
+import Bold from "@tiptap/extension-bold";
+import Document from "@tiptap/extension-document";
+import HardBreak from "@tiptap/extension-hard-break";
+import Heading from "@tiptap/extension-heading";
+import Highlight from "@tiptap/extension-highlight";
+import HorizontalRule from "@tiptap/extension-horizontal-rule";
+import Italic from "@tiptap/extension-italic";
+import Link from "@tiptap/extension-link";
+import { BulletList, ListItem, ListKeymap, OrderedList } from "@tiptap/extension-list";
+import Paragraph from "@tiptap/extension-paragraph";
+import Strike from "@tiptap/extension-strike";
+import Text from "@tiptap/extension-text";
+import { Color, TextStyle } from "@tiptap/extension-text-style";
+import Underline from "@tiptap/extension-underline";
+import { Dropcursor, Gapcursor, TrailingNode, UndoRedo } from "@tiptap/extensions";
+import { defineEditorPreset } from "@tulip-systems/editor/client";
+import { StorageImage } from "@tulip-systems/editor-storage/client";
+
+const imageResizeOptions = {
+  enabled: true,
+  directions: ["left", "right"] as ResizableNodeViewDirection[],
+  minHeight: 50,
+  minWidth: 50,
+  alwaysPreserveAspectRatio: true,
+};
+
+export const richTextEditorPreset = defineEditorPreset([
+  Document,
+  Text,
+  Paragraph,
+  Blockquote,
+  HardBreak,
+  Heading,
+  HorizontalRule,
+  ListItem,
+  OrderedList,
+  BulletList,
+  StorageImage.configure({ resize: imageResizeOptions }),
+  Bold,
+  Italic,
+  Link,
+  Strike,
+  Underline,
+  Highlight.configure({ multicolor: true }),
+  Dropcursor,
+  Gapcursor,
+  UndoRedo,
+  ListKeymap,
+  TrailingNode,
+  TextStyle,
+  Color,
+]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/create-app",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "type": "module",
   "sideEffects": false,
   "license": "AGPL-3.0",