@scalably/ui 0.5.4 → 0.5.6

package/dist/index.d.cts

@@ -2381,6 +2381,14 @@ declare const WelcomeBackground: {
     displayName: string;
 };
 
+/**
+ * Controls how the floating insert menu is triggered.
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
+ */
+type FloatingMenuTrigger = "slash" | "plus" | "both";
+
 type ImageSourceMode = "both" | "url-only" | "upload-only";
 interface RichTextEditorProps {
     /** Controlled HTML value of the editor */
@@ -2470,6 +2478,92 @@ interface RichTextEditorProps {
      * @default undefined (Tiptap auto-detects, but you should explicitly set `false` for SSR)
      */
     immediatelyRender?: boolean;
+    /**
+     * When true, keeps the toolbar pinned to the top of the editor container
+     * using CSS `position: sticky`.
+     *
+     * This is recommended for long documents so that structural tools (headings,
+     * lists, tables, etc.) remain visible while scrolling.
+     *
+     * @default true
+     */
+    stickyToolbar?: boolean;
+    /**
+     * Optional offset in pixels applied to the sticky toolbar `top` value.
+     *
+     * This is useful when the host application has its own fixed header or
+     * navigation bar. For example:
+     *
+     * - `stickyOffset={64}` to sit below a 64px app header
+     *
+     * @default 0
+     */
+    stickyOffset?: number;
+    /**
+     * When true, hides the toolbar completely while keeping the editor
+     * content area and all other behaviors intact.
+     *
+     * This is useful for very minimal, writing-focused experiences or for
+     * embedding the editor inside flows that provide their own external
+     * formatting controls.
+     *
+     * @default false
+     */
+    hideToolbar?: boolean;
+    /**
+     * Controls whether the editor renders with its default rounded
+     * border and background.
+     *
+     * - When `true` (default), the editor is wrapped in a rounded,
+     *   bordered container that responds to focus and error states.
+     * - When `false`, the outer border and background are removed so
+     *   the editor can blend into custom host layouts (e.g. card
+     *   bodies, panels) while keeping all internal behaviors intact.
+     *
+     * Naming convention: `withBorder` mirrors many design systems.
+     * For backward compatibility, `bordered` is still supported as
+     * an alias; `withBorder` takes precedence when both are provided.
+     */
+    withBorder?: boolean;
+    /**
+     * Enables the inline Bubble Menu that appears above selected text.
+     *
+     * This menu is ideal for inline formatting operations such as bold, italic,
+     * underline, and links. When disabled, the editor falls back to toolbar-only
+     * controls.
+     *
+     * @default true
+     */
+    enableBubbleMenu?: boolean;
+    /**
+     * Enables the Floating Menu that appears near the current block/empty line
+     * to insert structural blocks (images, dividers, quotes, tables, etc.).
+     *
+     * @default true
+     */
+    enableFloatingMenu?: boolean;
+    /**
+     * Optional fine-tuning offset (in pixels) applied to the gutter "+"
+     * insert button alignment.
+     *
+     * In most cases you should not need this. The library automatically
+     * derives a good vertical alignment from the paragraph's computed
+     * line-height and font-size, but if your host app overrides
+     * typography significantly (e.g. different base font-size or
+     * custom line-height), you can use this to nudge the "+" icon up
+     * or down to visually match your text baseline.
+     */
+    plusMenuYOffset?: number;
+    /**
+     * Controls how the floating insert menu is triggered:
+     *
+     * - "slash": A `/` slash command on an empty line opens an insert palette.
+     * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
+     * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
+     *
+     * @default "both"
+     */
+    floatingMenuTriggers?: FloatingMenuTrigger;
 }
 /**
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -2523,7 +2617,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -2381,6 +2381,14 @@ declare const WelcomeBackground: {
     displayName: string;
 };
 
+/**
+ * Controls how the floating insert menu is triggered.
+ * - "slash": A `/` slash command on an empty line opens an insert palette.
+ * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
+ * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
+ */
+type FloatingMenuTrigger = "slash" | "plus" | "both";
+
 type ImageSourceMode = "both" | "url-only" | "upload-only";
 interface RichTextEditorProps {
     /** Controlled HTML value of the editor */
@@ -2470,6 +2478,92 @@ interface RichTextEditorProps {
      * @default undefined (Tiptap auto-detects, but you should explicitly set `false` for SSR)
      */
     immediatelyRender?: boolean;
+    /**
+     * When true, keeps the toolbar pinned to the top of the editor container
+     * using CSS `position: sticky`.
+     *
+     * This is recommended for long documents so that structural tools (headings,
+     * lists, tables, etc.) remain visible while scrolling.
+     *
+     * @default true
+     */
+    stickyToolbar?: boolean;
+    /**
+     * Optional offset in pixels applied to the sticky toolbar `top` value.
+     *
+     * This is useful when the host application has its own fixed header or
+     * navigation bar. For example:
+     *
+     * - `stickyOffset={64}` to sit below a 64px app header
+     *
+     * @default 0
+     */
+    stickyOffset?: number;
+    /**
+     * When true, hides the toolbar completely while keeping the editor
+     * content area and all other behaviors intact.
+     *
+     * This is useful for very minimal, writing-focused experiences or for
+     * embedding the editor inside flows that provide their own external
+     * formatting controls.
+     *
+     * @default false
+     */
+    hideToolbar?: boolean;
+    /**
+     * Controls whether the editor renders with its default rounded
+     * border and background.
+     *
+     * - When `true` (default), the editor is wrapped in a rounded,
+     *   bordered container that responds to focus and error states.
+     * - When `false`, the outer border and background are removed so
+     *   the editor can blend into custom host layouts (e.g. card
+     *   bodies, panels) while keeping all internal behaviors intact.
+     *
+     * Naming convention: `withBorder` mirrors many design systems.
+     * For backward compatibility, `bordered` is still supported as
+     * an alias; `withBorder` takes precedence when both are provided.
+     */
+    withBorder?: boolean;
+    /**
+     * Enables the inline Bubble Menu that appears above selected text.
+     *
+     * This menu is ideal for inline formatting operations such as bold, italic,
+     * underline, and links. When disabled, the editor falls back to toolbar-only
+     * controls.
+     *
+     * @default true
+     */
+    enableBubbleMenu?: boolean;
+    /**
+     * Enables the Floating Menu that appears near the current block/empty line
+     * to insert structural blocks (images, dividers, quotes, tables, etc.).
+     *
+     * @default true
+     */
+    enableFloatingMenu?: boolean;
+    /**
+     * Optional fine-tuning offset (in pixels) applied to the gutter "+"
+     * insert button alignment.
+     *
+     * In most cases you should not need this. The library automatically
+     * derives a good vertical alignment from the paragraph's computed
+     * line-height and font-size, but if your host app overrides
+     * typography significantly (e.g. different base font-size or
+     * custom line-height), you can use this to nudge the "+" icon up
+     * or down to visually match your text baseline.
+     */
+    plusMenuYOffset?: number;
+    /**
+     * Controls how the floating insert menu is triggered:
+     *
+     * - "slash": A `/` slash command on an empty line opens an insert palette.
+     * - "plus": A `+` button appears in the left gutter on empty/selected blocks.
+     * - "both": Supports both keyboard-first (`/`) and mouse-first (`+`) flows.
+     *
+     * @default "both"
+     */
+    floatingMenuTriggers?: FloatingMenuTrigger;
 }
 /**
  * RichTextEditor - Controlled rich text editor built on top of Tiptap.
@@ -2523,7 +2617,7 @@ interface RichTextEditorProps {
  * @see RichTextViewer - Read-only viewer component for displaying rich text content
  */
 declare const RichTextEditor: {
-    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+    ({ value, onChange, label, error, helperText, placeholder, minHeight, simple, disabled, "data-testid": dataTestId, containerClassName, onImageUpload, imageSourceMode, maxCharacters, onMaxLengthExceed, immediatelyRender, stickyToolbar, stickyOffset, hideToolbar, withBorder, enableBubbleMenu, enableFloatingMenu, floatingMenuTriggers, plusMenuYOffset, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };