@trycourier/react-designer 0.5.1 → 0.7.0

package/dist/components/extensions/index.d.ts

@@ -1,6 +1,6 @@
 export { Color } from "@tiptap/extension-color";
 export { Dropcursor } from "@tiptap/extension-dropcursor";
-export { HardBreak } from "@tiptap/extension-hard-break";
+export { HardBreak } from "./HardBreak";
 export { History } from "@tiptap/extension-history";
 export { Placeholder } from "@tiptap/extension-placeholder";
 export { TextAlign } from "@tiptap/extension-text-align";

package/dist/components/ui/TextMenu/components/ContentTypePicker.d.ts

@@ -19,4 +19,4 @@ export interface ContentTypePickerProps {
     options: ContentPickerOptions;
     containerRef?: RefObject<HTMLDivElement>;
 }
-export declare const ContentTypePicker: ({ options, containerRef }: ContentTypePickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContentTypePicker: ({ options, containerRef }: ContentTypePickerProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/ui/TextMenu/hooks/useTextmenuCommands.d.ts

@@ -27,6 +27,5 @@ export declare const useTextmenuCommands: (editor: Editor, config?: TextMenuConf
     onQuote: () => void;
     onOrderedList: () => void;
     onUnorderedList: () => void;
-    resetButtonFormatting: () => boolean;
 };
 export {};

package/dist/components/ui/TextMenu/hooks/useTextmenuStates.d.ts

@@ -12,6 +12,7 @@ export declare const useTextmenuStates: (editor: Editor | null) => {
     isOrderedList: boolean;
     isUnorderedList: boolean;
     isLink: boolean;
+    isHeading: boolean;
     shouldShow: ({ editor }: {
         editor: Editor;
     }) => boolean;

package/dist/components/ui/VariableEditor/VariableChipBase.d.ts

@@ -33,5 +33,13 @@ export interface VariableChipBaseProps {
     getColors?: (isInvalid: boolean, hasValue: boolean) => VariableColors;
     /** Whether the chip is read-only (prevents editing) */
     readOnly?: boolean;
+    /** Formatting styles derived from TipTap marks (bold, italic, underline, strikethrough) */
+    formattingStyle?: React.CSSProperties;
+    /** Whether the chip is within the current text selection */
+    isSelected?: boolean;
+    /** Called when the chip is clicked for selection (not editing) */
+    onSelect?: () => void;
+    /** Called after editing is committed (suggestion selected or blur confirmed) to restore editor focus */
+    onCommit?: () => void;
 }
 export declare const VariableChipBase: React.FC<VariableChipBaseProps>;

package/dist/components/ui/VariableEditor/VariableInput.d.ts

@@ -1,5 +1,23 @@
 import * as React from "react";
 import { type VariableEditorBaseProps } from "./shared";
+/**
+ * Determines if a click landed in the empty space of a VariableInput and returns
+ * the correct target position to place the caret, or null if no correction is needed.
+ *
+ * This handles two cases where the browser's native click handler misplaces the caret
+ * inside a flex-layout ProseMirror editor with non-editable variable chip nodes:
+ *
+ * Case 1 (depth === 0): posAtCoords returned {inside: -1}, meaning the click didn't
+ *   land inside any node. The resolved position is at the doc level.
+ *
+ * Case 2 (depth > 0, clickX past content): posAtCoords returned a paragraph-level
+ *   position, but the click coordinates are past the visible content's right edge.
+ *   Common when content ends with a variable chip.
+ */
+export declare function resolveEmptySpaceClick(posDepth: number, pos: number, paragraphContentSize: number, clickX: number, endCoordsRight: number | null): {
+    targetPos: number;
+    bias: -1 | 1;
+} | null;
 export interface VariableInputProps extends VariableEditorBaseProps {
     /** Whether the input is read-only */
     readOnly?: boolean;

package/dist/components/ui-kit/Button/Button.d.ts

@@ -3,7 +3,7 @@ import type { ButtonHTMLAttributes } from "react";
 export type ButtonVariant = "primary" | "secondary" | "tertiary" | "quaternary" | "outline" | "ghost" | "link";
 export type ButtonSize = "medium" | "small" | "icon" | "iconSmall";
 export declare const buttonVariants: (props?: ({
-    variant?: "link" | "primary" | "secondary" | "tertiary" | "quaternary" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "primary" | "secondary" | "tertiary" | "quaternary" | "ghost" | "outline" | null | undefined;
     size?: "icon" | "small" | "medium" | "iconSmall" | null | undefined;
     active?: boolean | null | undefined;
     disabled?: boolean | null | undefined;

package/dist/components/ui-kit/Toggle/Toggle.d.ts

@@ -2,11 +2,11 @@ import * as React from "react";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const Toggle: React.ForwardRefExoticComponent<Omit<TogglePrimitive.ToggleProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { Toggle, toggleVariants };

package/dist/components/ui-kit/ToggleGroup/ToggleGroup.d.ts

@@ -2,11 +2,11 @@ import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const ToggleGroup: React.ForwardRefExoticComponent<((Omit<ToggleGroupPrimitive.ToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToggleGroupPrimitive.ToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string>) & React.RefAttributes<HTMLDivElement>>;
 declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<ToggleGroupPrimitive.ToggleGroupItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    variant?: "outline" | "default" | null | undefined;
+    variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLButtonElement>>;
 export { ToggleGroup, ToggleGroupItem };

package/dist/components/utils/shadowDomDndFix.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Shadow DOM Drag-and-Drop Fix for pragmatic-drag-and-drop
+ *
+ * This utility fixes the known incompatibility between pragmatic-drag-and-drop
+ * and Shadow DOM. The library uses `event.target` to look up draggable elements
+ * in a registry, but Shadow DOM re-targets events to the shadow host when they
+ * cross the shadow boundary, breaking the registry lookup.
+ *
+ * Solution: Monkey-patch `Event.prototype.target` to return the actual element
+ * from `composedPath()[0]` for drag events originating from the shadow DOM.
+ *
+ * **Known Limitation**: The `dragHandle` option in pragmatic-drag-and-drop does
+ * not work correctly with this fix. Elements will be draggable from anywhere,
+ * not just from the designated drag handle. This is due to how pragmatic-drag-and-drop
+ * internally validates handle interactions.
+ *
+ * @see https://github.com/atlassian/pragmatic-drag-and-drop/issues/15
+ * @see https://github.com/atlassian/pragmatic-drag-and-drop/issues/116
+ */
+/**
+ * Applies a fix for drag-and-drop events inside a Shadow DOM.
+ *
+ * This function monkey-patches `Event.prototype.target` to return the actual
+ * element from `composedPath()[0]` for drag and pointer events that originate
+ * from within the specified shadow root.
+ *
+ * **Important**: This is a global patch that affects all drag events while active.
+ * Call the returned cleanup function when the shadow DOM is unmounted.
+ *
+ * **Known Limitation**: Drag handles (`dragHandle` option) do not work correctly
+ * with this fix. Elements will be draggable from anywhere on the element.
+ *
+ * @param shadowRoot - The shadow root to apply the fix to
+ * @returns A cleanup function to restore the original behavior
+ *
+ * @example
+ * ```tsx
+ * useEffect(() => {
+ *   const shadowRoot = containerRef.current?.shadowRoot;
+ *   if (shadowRoot) {
+ *     const cleanup = applyShadowDomDndFix(shadowRoot);
+ *     return cleanup;
+ *   }
+ * }, []);
+ * ```
+ */
+export declare function applyShadowDomDndFix(shadowRoot: ShadowRoot): () => void;