@tulip-systems/core 0.5.2 → 0.5.3

package/src/components/editor/lib/extensions.ts

@@ -4,7 +4,6 @@ import { HardBreakOptions } from "@tiptap/extension-hard-break";
 import { HeadingOptions } from "@tiptap/extension-heading";
 import { HighlightOptions } from "@tiptap/extension-highlight";
 import { HorizontalRuleOptions } from "@tiptap/extension-horizontal-rule";
-import { ImageOptions } from "@tiptap/extension-image";
 import { ItalicOptions } from "@tiptap/extension-italic";
 import { LinkOptions } from "@tiptap/extension-link";
 import {
@@ -20,6 +19,8 @@ import { UnderlineOptions } from "@tiptap/extension-underline";
 import { DropcursorOptions, TrailingNodeOptions, UndoRedoOptions } from "@tiptap/extensions";
 import { Extension } from "@tiptap/react";
 import deepmerge from "deepmerge";
+import { FileHandlerOptions } from "../extensions/file-handler/extension";
+import { ImageOptions } from "../extensions/image/extension";
 import {
   EDITOR_EXTENSIONS,
   EDITOR_EXTENSIONS_CONFIG,
@@ -48,6 +49,8 @@ export type EditorExtensionsConfig = {
   paragraph: Partial<ParagraphOptions> | boolean;
   text: Partial<TextStyleOptions> | boolean;
   image: Partial<ImageOptions> | boolean;
+  fileHandler: Partial<FileHandlerOptions> | boolean;
+  skeleton: boolean;
   /**
    * Marks
    */

package/src/components/editor/lib/utils.ts

@@ -1,3 +1,5 @@
+import type { Node as PMNode } from "@tiptap/pm/model";
+
 type ShortcutKeyResult = {
   symbol: string;
   readable: string;
@@ -199,3 +201,33 @@ export const filterFiles = <T extends FileInput>(
 
   return [validFiles, errors];
 };
+
+/**
+ * Helper for iterating through the nodes in a document that changed compared
+ * to the given previous document. Useful for avoiding duplicate work on each transaction.
+ * Source: https://github.com/ProseMirror/prosemirror-tables/blob/master/src/fixtables.js
+ */
+export function changedDescendants(
+  old: PMNode,
+  cur: PMNode,
+  offset: number,
+  f: (node: PMNode, pos: number) => void,
+) {
+  const oldSize = old.childCount,
+    curSize = cur.childCount;
+  outer: for (let i = 0, j = 0; i < curSize; i++) {
+    const child = cur.child(i);
+    for (let scan = j, e = Math.min(oldSize, i + 3); scan < e; scan++) {
+      if (old.child(scan) == child) {
+        j = scan + 1;
+        offset += child.nodeSize;
+        continue outer;
+      }
+    }
+    f(child, offset);
+    if (j < oldSize && old.child(j).sameMarkup(child))
+      changedDescendants(old.child(j), child, offset + 1, f);
+    else child.nodesBetween(0, child.content.size, f, offset + 1);
+    offset += child.nodeSize;
+  }
+}

package/src/components/editor/lib/variants.ts

@@ -1,5 +1,76 @@
+import { cn } from "@/lib/utils/cn";
 import { cva } from "class-variance-authority";
 
+/**
+ * Prose variants
+ */
 export const editorProseVariants = cva(
-  "prose dark:prose-invert prose-a:text-primary prose-li:marker:text-primary",
+  cn(
+    "prose dark:prose-invert",
+    "prose-a:text-primary",
+    "prose-headings:scroll-mt-20",
+    "prose-h1:mt-6 prose-h1:mb-3",
+    "prose-h2:mt-6 prose-h2:mb-3",
+    "prose-h3:mt-5 prose-h3:mb-2",
+    "prose-h4:mt-4 prose-h4:mb-2",
+    "prose-ul:my-3 prose-ol:my-3",
+    "prose-ul:pl-6 prose-ol:pl-6",
+    "prose-li:my-1",
+    "prose-li:marker:text-primary",
+    "prose-li:p-0",
+    "prose-img:my-0 prose-img:rounded-lg",
+    "prose-blockquote:my-4 prose-blockquote:py-1",
+    "prose-hr:my-6",
+    "prose-pre:my-4",
+  ),
+);
+
+/**
+ * Image variants
+ */
+export const editorImageVariants = cva(
+  cn(
+    // wrapper (TipTap sets display:block inline → override with !)
+    "[&_[data-resize-wrapper]]:!inline-block",
+    "[&_[data-resize-wrapper]]:!relative",
+    "[&_[data-resize-wrapper]]:max-w-full",
+    "[&_[data-resize-wrapper]]:overflow-hidden",
+
+    // handle base
+    "[&_[data-resize-handle]]:absolute",
+    "[&_[data-resize-handle]]:z-10",
+    "[&_[data-resize-handle]]:rounded-full",
+    "[&_[data-resize-handle]]:bg-muted/40",
+    "[&_[data-resize-handle]]:w-1.5",
+    "[&_[data-resize-handle]]:cursor-ew-resize",
+    "[&_[data-resize-handle]]:opacity-0",
+    "[&_[data-resize-handle]]:transition-opacity",
+
+    // show on hover / active
+    "[&:hover_[data-resize-handle]]:opacity-100",
+    "[&_[data-resize-state='true']_[data-resize-handle]]:opacity-100",
+
+    // ✅ override TipTap inline: top:0; bottom:0;
+    "[&_[data-resize-handle]]:!top-1/2",
+    "[&_[data-resize-handle]]:!bottom-auto",
+    "[&_[data-resize-handle]]:!-translate-y-1/2",
+
+    // ✅ half height (also must beat inline)
+    "[&_[data-resize-handle]]:!h-1/2",
+
+    // ✅ spacing from edge (beat inline left:0 / right:0)
+    "[&_[data-resize-handle='left']]:!left-2",
+    "[&_[data-resize-handle='right']]:!right-2",
+
+    // ✅ override inline visibility:hidden on the resize container while pending
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[visibility:visible!important]",
+    "[&_[data-resize-container]:has(img[data-pending='true'])]:[pointer-events:auto!important]",
+
+    // Pending img should behave like a skeleton block (even before wrapper exists)
+    "[&_img[data-pending='true']]:bg-primary/10",
+    "[&_img[data-pending='true']]:animate-pulse",
+    "[&_img[data-pending='true']]:rounded-md",
+    "[&_img[data-pending='true']]:opacity-0",
+    "[&_img[data-pending='true']]:min-h-[500px]",
+  ),
 );

package/src/components/entry.ts

@@ -3,8 +3,9 @@
  */
 export * from "./common/icons";
 export * from "./common/status";
-export * from "./editor/lib/types";
+export * from "./editor/extensions/file-handler/strategy";
 export * from "./editor/lib/helpers";
+export * from "./editor/lib/types";
 
 /**
  * Components Layouts

package/src/lib/hooks/use-indicator.tsx

@@ -9,25 +9,9 @@ import { createContext, useContext, useEffect, useState, useTransition } from "r
 export type IndicatorStatus = "idle" | "pending" | "success" | "error";
 
 /**
- * Indicator context
+ * Use local indicator
  */
-type IndicatorContextType = {
-  status: IndicatorStatus;
-  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
-  startTransition: React.TransitionStartFunction;
-};
-
-export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
-
-/**
- * Inline edit indicator context
- */
-export const useIndicator = () => useContext(IndicatorContext);
-
-/**
- * Indicator context provider
- */
-export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+export function useLocalIndicator() {
   /**
    * Start transition
    */
@@ -54,6 +38,31 @@ export function IndicatorContextProvider({ children }: { children: React.ReactNo
     if (status === "error") setTimeout(() => setStatus("idle"), 2000);
   }, [status]);
 
+  return { status, setStatus, startTransition };
+}
+
+/**
+ * Indicator context
+ */
+type IndicatorContextType = {
+  status: IndicatorStatus;
+  setStatus: React.Dispatch<React.SetStateAction<IndicatorStatus>>;
+  startTransition: React.TransitionStartFunction;
+};
+
+export const IndicatorContext = createContext<IndicatorContextType>({} as IndicatorContextType);
+
+/**
+ * Inline edit indicator context
+ */
+export const useIndicator = () => useContext(IndicatorContext);
+
+/**
+ * Indicator context provider
+ */
+export function IndicatorContextProvider({ children }: { children: React.ReactNode }) {
+  const { status, setStatus, startTransition } = useLocalIndicator();
+
   return (
     <IndicatorContext.Provider value={{ status, setStatus, startTransition }}>
       {children}

package/src/modules/data-tables/lib/filters/parsers.ts

@@ -65,6 +65,20 @@ export const parseFilterBoolean = <TSchema extends z.ZodType<boolean>>(
   encode: (decoded) => (decoded ? "true" : "false"),
 });
 
+/**
+ * Filter datetime value
+ */
+export type ParseFilterDatetimeSchema = z.ZodDate;
+
+export const parseFilterDatetime = <TSchema extends ParseFilterDatetimeSchema>(
+  schema: TSchema,
+): ParseFilter<TSchema> => ({
+  schema: schema.nullable(),
+  decode: (encoded) => (encoded ? new Date(encoded) : null) as unknown as z.input<TSchema>,
+  encode: (decoded) => (decoded ? decoded.toISOString() : ""),
+});
+
+
 /**
  * Filter range value
  */

package/src/modules/inline-edit/components/combobox-dropdown.client.tsx

@@ -9,14 +9,19 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditComboboxDropdownProps<TValue extends ComboboxDropdownItem> =
-  useInlineEditOptions<string> &
-    InlineEditVariantsProps &
-    Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
-      onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
-    };
+export type InlineEditComboboxDropdownProps<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean = false,
+> = useInlineEditOptions<string, Required> &
+  InlineEditVariantsProps &
+  Omit<ComboboxDropdownProps<TValue>, "onSelect"> & {
+    onSelect?: ComboboxDropdownProps<TValue>["onSelect"];
+  };
 
-export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
+export function InlineComboboxDropdown<
+  TValue extends ComboboxDropdownItem,
+  Required extends boolean,
+>({
   selectedItem,
   variant,
   className,
@@ -24,13 +29,17 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   initialValue,
   action,
   permission,
+  updateStrategy,
+  isRequired,
   disabled,
   ...props
-}: InlineEditComboboxDropdownProps<TValue>) {
-  const { setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineEditComboboxDropdownProps<TValue, Required>) {
+  const { handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const initialSelectedItem = props.items.find((item) => item.id === initialValue);
@@ -38,12 +47,12 @@ export function InlineComboboxDropdown<TValue extends ComboboxDropdownItem>({
   return (
     <ComboboxDropdown
       {...props}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       selectedItem={selectedItem ?? initialSelectedItem}
       onSelect={(event) => {
-        setValue(event.id);
-        handleUpdate(event.id);
+        handleChange(event.id ?? null);
+        handleBlur(event.id ?? null);
         onSelect?.(event);
       }}
     />

package/src/modules/inline-edit/components/combobox.client.tsx

@@ -3,22 +3,29 @@
 import { Combobox, ComboboxProps } from "@/components/ui/combobox.client";
 import { useInlineEdit, useInlineEditOptions } from "../hooks/use-inline.client";
 
-export type InlineComboboxProps<TValue> = useInlineEditOptions<string> &
+export type InlineComboboxProps<TValue, Required extends boolean = false> = useInlineEditOptions<
+  string,
+  Required
+> &
   Omit<ComboboxProps<TValue>, "value">;
 
-export function InlineCombobox<TValue>({
+export function InlineCombobox<TValue, Required extends boolean>({
   initialValue,
   action,
   permission,
   onSelect,
   onBlur,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineComboboxProps<TValue>) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+}: InlineComboboxProps<TValue, Required>) {
+  const { value, handleChange, handleBlur, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -27,11 +34,11 @@ export function InlineCombobox<TValue>({
       value={value}
       disabled={disabled || !isAllowed}
       onSelect={(value) => {
-        setValue(value);
+        handleChange(value ?? null);
         onSelect?.(value as TValue);
       }}
       onBlur={(e) => {
-        handleUpdate(e.target.value);
+        handleBlur(e.target.value ?? null);
         onBlur?.(e);
       }}
     />

package/src/modules/inline-edit/components/date-input.client.tsx

@@ -13,41 +13,53 @@ import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
 const formatDate = (value: Date) => format(value, "dd/MM/yyyy");
 const parseDate = (value: string) => new Date(value.split("/").reverse().join("-"));
+const isValidDate = (date: Date) => date instanceof Date && date.toString() !== "Invalid Date";
 
-export function InlineDateInput({
+export function InlineDateInput<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
+  updateStrategy,
+  isRequired,
   ...props
-}: ComponentProps<"div"> & useInlineEditOptions<Date> & InlineEditVariantsProps) {
+}: ComponentProps<"div"> & useInlineEditOptions<Date, Required> & InlineEditVariantsProps) {
   const [inValid, setInValid] = React.useState<boolean>(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, setValue, handleChange, handleBlur, status, isAllowed } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   const [stringDate, setStringDate] = React.useState<string>(
     initialValue ? formatDate(initialValue) : "",
   );
 
+  /**
+   * Update string date when value changes
+   */
+  React.useEffect(() => {
+    if (value) setStringDate(formatDate(value));
+  }, [value]);
+
   return (
     <Popover>
-      <div {...props} className={cn("relative h-full", inlineEditVariants({ variant }), className)}>
+      <div {...props} className={cn("relative h-full", className)}>
         <Input
           data-input
           type="string"
           value={stringDate}
-          className={cn(inValid && "text-destructive")}
+          className={cn(inlineEditVariants({ variant, status }), inValid && "text-destructive")}
           disabled={!isAllowed}
           onChange={(e) => {
             setStringDate(e.target.value);
             const parsedDate = parseDate(e.target.value);
 
-            if (parsedDate.toString() === "Invalid Date") {
+            if (!isValidDate(parsedDate)) {
               setInValid(true);
               setValue(undefined);
             } else {
@@ -57,7 +69,7 @@ export function InlineDateInput({
           }}
           onBlur={(e) => {
             const parsedDate = parseDate(e.target.value);
-            handleUpdate(parsedDate);
+            handleBlur(isValidDate(parsedDate) ? parsedDate : null);
           }}
         />
 
@@ -75,18 +87,22 @@ export function InlineDateInput({
           </Button>
         </PopoverTrigger>
       </div>
+
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
-          initialFocus
-          selected={value}
-          defaultMonth={value}
-          disabled={status === "pending"}
+          autoFocus
+          selected={value ?? undefined}
+          defaultMonth={value ?? undefined}
+          disabled={!isAllowed}
           onSelect={(selectedDate) => {
             if (!selectedDate) return;
-            setValue(selectedDate);
+
             setStringDate(formatDate(selectedDate));
-            handleUpdate(selectedDate);
+
+            handleChange(selectedDate ?? null);
+            handleBlur(selectedDate ?? null);
+
             setInValid(false);
           }}
         />

package/src/modules/inline-edit/components/date-picker.client.tsx

@@ -10,25 +10,29 @@ import React, { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineEditDatePickerProps = ComponentProps<typeof Button> &
-  useInlineEditOptions<Date> &
+type InlineEditDatePickerProps<Required extends boolean> = ComponentProps<typeof Button> &
+  useInlineEditOptions<Date, Required> &
   InlineEditVariantsProps;
 
-export function InlineDatePicker({
+export function InlineDatePicker<Required extends boolean = false>({
   initialValue,
   action,
   permission,
   variant,
   className,
   disabled,
+  updateStrategy,
+  isRequired,
   ...props
-}: InlineEditDatePickerProps) {
+}: InlineEditDatePickerProps<Required>) {
   const [open, setOpen] = React.useState(false);
 
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit({
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -36,7 +40,7 @@ export function InlineDatePicker({
       open={open}
       onOpenChange={(open) => {
         setOpen(open);
-        if (!open && value) handleUpdate(value);
+        if (!open && value) handleBlur(value);
       }}
     >
       <PopoverTrigger asChild>
@@ -44,7 +48,7 @@ export function InlineDatePicker({
           {...props}
           type="button"
           variant="outline"
-          className={cn("w-full", inlineEditVariants({ variant }), className)}
+          className={cn("w-full", inlineEditVariants({ variant, status }), className)}
           disabled={disabled || !isAllowed}
         >
           <CalendarIcon className="mr-2 h-4 w-4" />
@@ -55,9 +59,9 @@ export function InlineDatePicker({
       <PopoverContent className="w-auto p-0">
         <Calendar
           mode="single"
+          autoFocus
           selected={value ? new Date(value) : undefined}
-          onSelect={(date) => date && setValue(date)}
-          initialFocus
+          onSelect={(date) => handleChange(date ?? null)}
         />
       </PopoverContent>
     </Popover>

package/src/modules/inline-edit/components/editor.client.tsx

@@ -6,40 +6,40 @@ import { cn } from "@/lib/utils/cn";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-export type InlineEditorProps = useInlineEditOptions<EditorJSONContent> &
+export type InlineEditorProps<Required extends boolean = false> = useInlineEditOptions<
+  EditorJSONContent,
+  Required
+> &
   InlineEditVariantsProps &
   Omit<EditorProps, "value" | "onUpdate" | "onBlur" | "variant">;
 
-export function InlineEditor({
+export function InlineEditor<Required extends boolean = false>({
   initialValue,
   action,
   extensions,
   variant,
   disabled,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   children,
-}: InlineEditorProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<EditorJSONContent>({
+}: InlineEditorProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
-  // const [debouncedValue] = useDebounce(value, 500);
-  // useEffect(() => {
-  //   if (!value) return;
-  //   handleUpdate(value);
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [debouncedValue]);
-
   return (
     <Editor
       value={value}
       extensions={extensions}
-      onUpdate={(value) => setValue(value)}
-      onBlur={(value) => handleUpdate(value)}
-      className={cn(inlineEditVariants({ variant }), className)}
+      onUpdate={(value) => handleChange(value)}
+      onBlur={(value) => handleBlur(value)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
       disabled={disabled || !isAllowed}
       variant={variant}
     >

package/src/modules/inline-edit/components/input-recipient.client.tsx

@@ -6,8 +6,11 @@ import { ComponentProps } from "react";
 import { useInlineEdit, type useInlineEditOptions } from "../hooks/use-inline.client";
 import { inlineEditVariants, InlineEditVariantsProps } from "../lib/variants";
 
-type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "value" | "onChange"> &
-  useInlineEditOptions<string[]> &
+type InlineRecipientInputProps<Required extends boolean = false> = Omit<
+  ComponentProps<typeof RecipientInput>,
+  "value" | "onChange"
+> &
+  useInlineEditOptions<string[], Required> &
   InlineEditVariantsProps & {
     contacts: Contact[];
   };
@@ -15,20 +18,24 @@ type InlineRecipientInputProps = Omit<ComponentProps<typeof RecipientInput>, "va
 /**
  * The inline edit recipient input component.
  */
-export function InlineRecipientInput({
+export function InlineRecipientInput<Required extends boolean = false>({
   initialValue,
   action,
   variant,
   disabled,
   contacts,
   permission,
+  updateStrategy,
+  isRequired,
   className,
   ...props
-}: InlineRecipientInputProps) {
-  const { value, setValue, handleUpdate, isAllowed } = useInlineEdit<string[]>({
+}: InlineRecipientInputProps<Required>) {
+  const { value, handleChange, handleBlur, isAllowed, status } = useInlineEdit({
     initialValue,
     action,
     permission,
+    updateStrategy,
+    isRequired,
   });
 
   return (
@@ -37,11 +44,11 @@ export function InlineRecipientInput({
       contacts={contacts}
       value={value ?? []}
       onChange={(newValue) => {
-        setValue(newValue);
-        handleUpdate(newValue);
+        handleChange(newValue);
+        handleBlur(newValue);
       }}
       disabled={disabled || !isAllowed}
-      className={cn(inlineEditVariants({ variant }), className)}
+      className={cn(inlineEditVariants({ variant, status }), className)}
     />
   );
 }