@trycourier/react-designer 0.5.1 → 0.6.0

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

@@ -0,0 +1,12 @@
+/**
+ * Custom HardBreak extension that extends the default TipTap HardBreak.
+ *
+ * This extension modifies the DOM rendering to include a zero-width space
+ * after the <br> element. This helps with cursor visibility when the cursor
+ * is positioned right after a hardBreak (e.g., before an inline node like a variable).
+ *
+ * Without this, the browser has no text node to anchor the cursor, making it invisible
+ * even though ProseMirror knows the correct cursor position.
+ */
+export declare const HardBreak: import("@tiptap/core").Node<import("@tiptap/extension-hard-break").HardBreakOptions, any>;
+export default HardBreak;

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

@@ -0,0 +1 @@
+export { HardBreak } from "./HardBreak";

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

@@ -4,7 +4,6 @@ declare module "@tiptap/core" {
     interface Commands<ReturnType> {
         list: {
             setList: (props?: Partial<ListProps>) => ReturnType;
-            toggleList: () => ReturnType;
             toggleOrderedList: () => ReturnType;
             toggleUnorderedList: () => ReturnType;
         };

package/dist/components/extensions/List/List.types.d.ts

@@ -2,20 +2,14 @@ import { z } from "zod";
 export declare const listSchema: z.ZodObject<{
     id: z.ZodOptional<z.ZodString>;
     listType: z.ZodEnum<["ordered", "unordered"]>;
-    borderColor: z.ZodString;
-    borderWidth: z.ZodNumber;
     paddingVertical: z.ZodNumber;
     paddingHorizontal: z.ZodNumber;
 }, "strip", z.ZodTypeAny, {
-    borderColor: string;
-    borderWidth: number;
     paddingVertical: number;
     paddingHorizontal: number;
     listType: "ordered" | "unordered";
     id?: string | undefined;
 }, {
-    borderColor: string;
-    borderWidth: number;
     paddingVertical: number;
     paddingHorizontal: number;
     listType: "ordered" | "unordered";
@@ -26,10 +20,6 @@ export interface ListProps {
     listType: "ordered" | "unordered";
     /** Unique identifier for the list node */
     id?: string;
-    /** Border color for list markers (bullets/numbers) */
-    borderColor?: string;
-    /** Border width in pixels */
-    borderWidth?: number;
     /** Vertical padding in pixels */
     paddingVertical?: number;
     /** Horizontal padding in pixels */

package/dist/components/extensions/List/ListForm.d.ts

@@ -4,6 +4,11 @@ interface ListFormProps {
     element?: ProseMirrorNode;
     editor: Editor | null;
     hideCloseButton?: boolean;
+    /**
+     * When true, only shows the list type toggle (ordered/unordered).
+     * Used for channels like Slack and MS Teams that don't support styling options.
+     */
+    minimalMode?: boolean;
 }
-export declare const ListForm: ({ element, editor, hideCloseButton }: ListFormProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ListForm: ({ element, editor, hideCloseButton, minimalMode, }: ListFormProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

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

@@ -2,3 +2,5 @@ export * from "./Variable";
 export * from "./Variable.types";
 export * from "./VariablePaste";
 export * from "./VariableSuggestions";
+export type { VariableStorage } from "./variable-storage.types";
+export { getVariableViewMode, setVariableViewMode, getVariableStorage, initializeVariableStorage, hasVariableStorage, } from "./variable-storage.utils";

package/dist/components/extensions/Variable/variable-storage.types.d.ts

@@ -0,0 +1,26 @@
+import type { VariableViewMode } from "../../TemplateEditor/store";
+/**
+ * Type definition for the Variable extension storage in TipTap editor.
+ * This storage is used to maintain variable-related state across the editor instance.
+ *
+ * Usage:
+ * ```typescript
+ * import type { VariableStorage, EditorWithVariableStorage } from './variable-storage.types';
+ * import { getVariableViewMode, setVariableViewMode } from './variable-storage.utils';
+ *
+ * // Access storage
+ * const editor: EditorWithVariableStorage = ...;
+ * const viewMode = getVariableViewMode(editor);
+ *
+ * // Update storage
+ * setVariableViewMode(editor, 'wysiwyg');
+ * ```
+ */
+export interface VariableStorage {
+    /**
+     * Controls how variables are displayed in the editor:
+     * - 'show-variables': Display as interactive chip components with icons
+     * - 'wysiwyg': Display as plain text values (preview mode)
+     */
+    variableViewMode: VariableViewMode;
+}

package/dist/components/extensions/Variable/variable-storage.utils.d.ts

@@ -0,0 +1,72 @@
+import type { Editor } from "@tiptap/core";
+import type { VariableViewMode } from "../../TemplateEditor/store";
+import { type VariableStorage } from "./variable-storage.types";
+/**
+ * Gets the variable view mode from the editor storage.
+ * Safely handles cases where storage or variable storage is not initialized.
+ *
+ * @param editor - The TipTap editor instance
+ * @param fallback - Fallback value if storage is not available (default: "show-variables")
+ * @returns The current variable view mode
+ *
+ * @example
+ * ```typescript
+ * const editor = useCurrentEditor();
+ * const viewMode = getVariableViewMode(editor);
+ * ```
+ */
+export declare function getVariableViewMode(editor: Editor | null | undefined, fallback?: VariableViewMode): VariableViewMode;
+/**
+ * Sets the variable view mode in the editor storage.
+ * Safely handles cases where storage or variable storage is not initialized.
+ *
+ * @param editor - The TipTap editor instance
+ * @param mode - The new variable view mode to set
+ * @returns true if the mode was set successfully, false otherwise
+ *
+ * @example
+ * ```typescript
+ * const editor = useCurrentEditor();
+ * setVariableViewMode(editor, 'wysiwyg');
+ * ```
+ */
+export declare function setVariableViewMode(editor: Editor | null | undefined, mode: VariableViewMode): boolean;
+/**
+ * Gets the entire variable storage object from the editor.
+ * Safely handles cases where storage is not initialized.
+ *
+ * @param editor - The TipTap editor instance
+ * @returns The variable storage object, or undefined if not available
+ *
+ * @example
+ * ```typescript
+ * const editor = useCurrentEditor();
+ * const storage = getVariableStorage(editor);
+ * if (storage) {
+ *   console.log('View mode:', storage.variableViewMode);
+ * }
+ * ```
+ */
+export declare function getVariableStorage(editor: Editor | null | undefined): VariableStorage | undefined;
+/**
+ * Initializes the variable storage on an editor instance.
+ * Should be called in the Variable extension's addStorage() method.
+ *
+ * @param defaultViewMode - The default variable view mode (default: "show-variables")
+ * @returns The initial storage object
+ *
+ * @example
+ * ```typescript
+ * // In Variable extension
+ * addStorage() {
+ *   return initializeVariableStorage();
+ * }
+ * ```
+ */
+export declare function initializeVariableStorage(defaultViewMode?: VariableViewMode): VariableStorage;
+/**
+ * Type guard to check if an object has variable storage
+ */
+export declare function hasVariableStorage(storage: unknown): storage is {
+    variable: VariableStorage;
+};

package/dist/components/extensions/extension-kit.d.ts

@@ -1,4 +1,14 @@
 import type { Node } from "@tiptap/pm/model";
+export interface RichTextMarksConfig {
+    /** Controls bold mark behavior: 'disabled' to disable, 'default' or undefined to enable */
+    bold?: "disabled" | "default";
+    /** Controls italic mark behavior: 'disabled' to disable, 'default' or undefined to enable */
+    italic?: "disabled" | "default";
+    /** Controls underline mark behavior: 'disabled' to disable, 'default' or undefined to enable */
+    underline?: "disabled" | "default";
+    /** Controls strike mark behavior: 'disabled' to disable, 'default' or undefined to enable */
+    strike?: "disabled" | "default";
+}
 export interface ExtensionKitOptions {
     setSelectedNode?: (node: Node) => void;
     shouldHandleClick?: () => boolean;
@@ -6,6 +16,13 @@ export interface ExtensionKitOptions {
     variables?: Record<string, unknown>;
     /** When true, disables variable autocomplete and allows typing any variable */
     disableVariablesAutocomplete?: boolean;
+    /**
+     * Controls rich text formatting marks (bold, italic, underline, strike).
+     * - `'plain-text'`: Disables all rich text marks (for SMS, Push, In-App)
+     * - Object with mark configurations: Enables granular control per mark
+     * - `undefined`: All marks enabled (default)
+     */
+    textMarks?: "plain-text" | RichTextMarksConfig;
 }
 export declare const ExtensionKit: (options?: ExtensionKitOptions) => (import("@tiptap/core").Node<any, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any>)[];
 export default ExtensionKit;

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/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-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;