@bikdotai/bik-component-library 0.0.793 → 0.0.795-beta.0

package/dist/esm/src/editor/BikEditor.utils.d.ts

@@ -0,0 +1,74 @@
+import { Editor } from '@tiptap/core';
+import { EditorSnapshot, FormatState } from './BikEditor.types';
+/**
+ * Normalise HTML before passing it to TipTap.
+ *
+ * Problem: Quill uses `<p><br></p>` as a blank-line separator. TipTap's
+ * HardBreak extension parses that `<br>` as a real `hard_break` node.
+ * ProseMirror then also appends `<br class="ProseMirror-trailingBreak">` as a
+ * cursor-position decoration, making the empty paragraph render at **2× line
+ * height** instead of 1×.
+ *
+ * Fix: replace `<p><br></p>` → `<p></p>` so TipTap stores a truly empty
+ * paragraph. ProseMirror adds only the trailing decoration, giving the correct
+ * 1× line height. The WA text output is unchanged (`\n` either way after
+ * surrounding-newline collapse in `toWhatsAppText`).
+ */
+export declare function normalizeHtml(html: string): string;
+export declare const SECTION_DIVIDER_HTML: (id: string) => string;
+/**
+ * Build initial HTML for an editor with one or more named sections below the body.
+ * Each section is separated by an invisible divider node.
+ *
+ * @example
+ * buildSectionedContent('<p>Body</p>', [
+ *   { id: 'signature', content: '<p>Alice</p>' },
+ *   { id: 'forwarded', content: '<p>--- fwd ---</p>' },
+ * ])
+ */
+export declare function buildSectionedContent(body: string, sections: Array<{
+    id: string;
+    content: string;
+}>): string;
+/**
+ * Parse the editor HTML into a Map of sectionId → raw HTML string.
+ * The special key `'body'` always holds the content before the first divider.
+ * Map iteration order matches document order.
+ */
+export declare function extractAllSections(editor: Editor): Map<string, string>;
+/**
+ * Extract just the body portion (everything before the first section divider)
+ * from an HTML string produced by BikEditor. Safe to call on plain HTML too —
+ * returns the full string when no dividers are present.
+ */
+export declare function getBodyHtml(html: string): string;
+/**
+ * Extract everything from the first section divider onward (dividers + their
+ * content). Returns an empty string when there are no sections.
+ */
+export declare function getSectionsHtml(html: string): string;
+export declare function extractAllSectionsFromHtml(html: string): Map<string, string>;
+/** Returns BikEditorContent for a single named section (or 'body'). */
+export declare function extractSectionContent(editor: Editor, id: string): EditorSnapshot;
+/**
+ * Replace the content of a single named section without touching others.
+ * If the section doesn't exist yet, it is appended at the end of the document.
+ */
+export declare function setSectionContentInEditor(editor: Editor, id: string, html: string): void;
+/** Extract BikEditorContent for just the body (before the first divider). */
+export declare function extractBodyContent(editor: Editor): EditorSnapshot;
+export declare function extractActiveFormats(editor: Editor): FormatState;
+export declare function extractContent(editor: Editor): EditorSnapshot;
+/**
+ * Returns the ProseMirror position immediately after a section's opening divider
+ * (i.e. the start of the section's own content).
+ * For `'body'`, returns 1 (beginning of the document).
+ * Returns -1 if the named section's divider is not found.
+ */
+export declare function findSectionStartPos(editor: Editor, sectionId: string): number;
+/**
+ * Returns the ProseMirror position at the end of a named section's content:
+ * - For `'body'`: position of the first section divider, or end of document.
+ * - For a named section: position of the next divider, or end of document.
+ */
+export declare function findSectionEndPos(editor: Editor, sectionId: string): number;

package/dist/esm/src/editor/extensions/FontSizeExtension.d.ts

@@ -0,0 +1,3 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+export declare const FontSizeExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/buildExtensions.d.ts

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+import type { EditorFeatures, EditorSnapshot, KeyboardShortcut, MentionDropdownRenderProps, MentionItem, PasteData, SlashCommandDropdownRenderProps, SlashCommandItem } from '../BikEditor.types';
+interface ExtensionConfig {
+    features?: EditorFeatures;
+    placeholder?: string;
+    maxCharacters?: number;
+    hasSections?: boolean;
+    mentions?: {
+        agents?: MentionItem[];
+        teams?: MentionItem[];
+    };
+    slashCommands?: SlashCommandItem[];
+    onPaste?: (data: PasteData) => boolean | void;
+    onSend?: (content: EditorSnapshot) => void;
+    sendShortcut?: {
+        key: string;
+        modifiers?: Array<'mod' | 'ctrl' | 'shift' | 'alt'>;
+    };
+    shortcuts?: KeyboardShortcut[];
+    onMentionSelected?: (item: MentionItem, char: '@' | '#') => void;
+    onSlashCommandSelected?: (command: SlashCommandItem) => void;
+    renderMentionItem?: (item: MentionItem, isActive: boolean) => ReactNode;
+    renderMentionDropdown?: (props: MentionDropdownRenderProps) => ReactNode;
+    renderSlashCommandItem?: (item: SlashCommandItem, isActive: boolean) => ReactNode;
+    renderSlashCommandDropdown?: (props: SlashCommandDropdownRenderProps) => ReactNode;
+}
+export declare function buildExtensions(config: ExtensionConfig): (import("@tiptap/core").Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-underline").UnderlineOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-text-style").TextStyleOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").PlaceholderOptions, any> | import("@tiptap/core").Extension<any, any> | import("@tiptap/core").Extension<import("@tiptap/extensions").CharacterCountOptions, import("@tiptap/extensions").CharacterCountStorage> | import("@tiptap/core").Node<any, any> | import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any> | import("@tiptap/core").Extension<import("@tiptap/extension-text-style").ColorOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | import("@tiptap/core").Extension<import("@tiptap/extension-text-align").TextAlignOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>)[];
+export {};

package/dist/esm/src/editor/extensions/editorDropdown.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const DropdownContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropdownItem: import("styled-components").StyledComponent<"div", any, {
+    $isActive?: boolean | undefined;
+}, never>;
+export declare const MentionAvatar: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const MentionLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const MentionPresenceDot: import("styled-components").StyledComponent<"span", any, {
+    $online?: boolean | undefined;
+}, never>;
+export declare const SlashLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SlashDescription: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/esm/src/editor/extensions/forwardedDivider/ForwardedDividerNode.d.ts

@@ -0,0 +1,13 @@
+import { Node } from '@tiptap/core';
+/**
+ * Invisible zero-height block node that marks the boundary between the email body
+ * and the forwarded-mail section (which itself sits below the signature divider).
+ *
+ * Document structure:
+ *   body content
+ *   [SignatureDividerNode]      ← data-signature-divider
+ *   signature content
+ *   [ForwardedDividerNode]      ← data-forwarded-divider  (this node)
+ *   forwarded mail content
+ */
+export declare const ForwardedDividerNode: Node<any, any>;

package/dist/esm/src/editor/extensions/imagePaste/ImagePasteExtension.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const ImagePasteExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/mention/MentionDropdown.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { MentionDropdownRenderProps, MentionItem } from '../../BikEditor.types';
+interface Props {
+    items: MentionItem[];
+    query: string;
+    command: (item: MentionItem) => void;
+    /** Custom per-row renderer. Receives the item and whether it is the active row. */
+    renderItem?: (item: MentionItem, isActive: boolean) => React.ReactNode;
+    /**
+     * Full custom dropdown renderer. Takes priority over renderItem.
+     * The editor passes activeIndex and onSelect — you handle all the visual rendering.
+     */
+    renderDropdown?: (props: MentionDropdownRenderProps) => React.ReactNode;
+}
+export declare const MentionDropdown: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export {};

package/dist/esm/src/editor/extensions/mention/MentionExtension.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { MentionDropdownRenderProps, MentionItem } from '../../BikEditor.types';
+export declare function buildAgentMentionExtension(agents: MentionItem[], onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;
+export declare function buildTeamMentionExtension(teams: MentionItem[], onSelect?: (item: MentionItem, char: '@' | '#') => void, renderItem?: (item: MentionItem, isActive: boolean) => ReactNode, renderDropdown?: (props: MentionDropdownRenderProps) => ReactNode): import("@tiptap/core").Node<import("@tiptap/extension-mention").MentionOptions<any, import("@tiptap/extension-mention").MentionNodeAttrs>, any>;

package/dist/esm/src/editor/extensions/paste/PasteExtension.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Fires the `onPaste` callback for every paste event.
+ * If the callback returns `true`, BikEditor's own paste handling is suppressed —
+ * rich-paste and plain-clipboard extensions won't run for that event.
+ */
+export declare const PasteExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/plainClipboard/PlainClipboardExtension.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const PlainClipboardExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/sectionDivider/SectionDividerNode.d.ts

@@ -0,0 +1,10 @@
+import { Node } from '@tiptap/core';
+/**
+ * Generic invisible block node that marks the boundary between named sections.
+ * The section ID is stored as a `data-section-divider` attribute on the rendered div.
+ *
+ * Provides backward-compatible parsing of the old `data-signature-divider` and
+ * `data-forwarded-divider` attributes, mapping them to sectionId='signature' and
+ * sectionId='forwarded' respectively.
+ */
+export declare const SectionDividerNode: Node<any, any>;

package/dist/esm/src/editor/extensions/sendShortcut/SendShortcutExtension.d.ts

@@ -0,0 +1,2 @@
+import { Extension } from '@tiptap/core';
+export declare const SendShortcutExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/signatureDivider/SignatureDividerNode.d.ts

@@ -0,0 +1,7 @@
+import { Node } from '@tiptap/core';
+/**
+ * Invisible atomic block node used to separate email body from signature.
+ * Renders as a zero-height hidden div — the user never sees or interacts with it.
+ * Use `splitAtSignatureDivider` to extract body/signature HTML independently.
+ */
+export declare const SignatureDividerNode: Node<any, any>;

package/dist/esm/src/editor/extensions/slashCommand/SlashCommandExtension.d.ts

@@ -0,0 +1,4 @@
+import { Extension } from '@tiptap/core';
+import type { ReactNode } from 'react';
+import type { SlashCommandDropdownRenderProps, SlashCommandItem } from '../../BikEditor.types';
+export declare function buildSlashCommandExtension(commands: SlashCommandItem[], onSelect?: (command: SlashCommandItem) => void, renderItem?: (item: SlashCommandItem, isActive: boolean) => ReactNode, renderDropdown?: (props: SlashCommandDropdownRenderProps) => ReactNode): Extension<any, any>;

package/dist/esm/src/editor/extensions/slashCommand/SlashCommandMenu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { SlashCommandDropdownRenderProps, SlashCommandItem } from '../../BikEditor.types';
+interface Props {
+    items: SlashCommandItem[];
+    query: string;
+    command: (item: SlashCommandItem) => void;
+    /** Custom per-row renderer. Receives the item and whether it is the active row. */
+    renderItem?: (item: SlashCommandItem, isActive: boolean) => React.ReactNode;
+    /**
+     * Full custom dropdown renderer. Takes priority over renderItem.
+     * The editor passes activeIndex and onSelect — you handle all the visual rendering.
+     */
+    renderDropdown?: (props: SlashCommandDropdownRenderProps) => React.ReactNode;
+}
+export declare const SlashCommandMenu: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>>;
+export {};

package/dist/esm/src/editor/extensions/variable/VariableDecorationExtension.d.ts

@@ -0,0 +1,7 @@
+import { Extension } from '@tiptap/core';
+/**
+ * Decorates all `{{variable}}` text in the document with the `bik-variable` class.
+ * Variables are plain text — the cursor moves through them freely, backspace works
+ * normally, and no special node structure is needed.
+ */
+export declare const VariableDecorationExtension: Extension<any, any>;

package/dist/esm/src/editor/extensions/variable/VariableNode.d.ts

@@ -0,0 +1,2 @@
+import { Node } from '@tiptap/core';
+export declare const VariableNode: Node<any, any>;

package/dist/esm/src/editor/extensions/variable/VariableNodeView.d.ts

@@ -0,0 +1,3 @@
+import { type NodeViewProps } from '@tiptap/react';
+import React from 'react';
+export declare const VariableNodeView: React.FC<NodeViewProps>;

package/dist/esm/src/editor/floating/LinkBubbleMenu.d.ts

@@ -0,0 +1,14 @@
+import { Editor } from '@tiptap/core';
+import React from 'react';
+import type { LinkTooltipProps } from '../BikEditor.types';
+interface Props {
+    editor: Editor;
+    renderLinkTooltip?: (props: LinkTooltipProps) => React.ReactNode;
+}
+/**
+ * Shows a tooltip when the user **clicks** a hyperlink inside the editor.
+ * Hides on click outside the editor/bubble or on any keypress.
+ * Does NOT trigger on cursor movement or keyboard navigation.
+ */
+export declare const LinkBubbleMenu: React.FC<Props>;
+export {};

package/dist/esm/src/editor/index.d.ts

@@ -0,0 +1,7 @@
+export { BikEditor } from './BikEditor';
+export { BikEditorToolbar } from './toolbar/BikEditorToolbar';
+export { getBodyHtml, getSectionsHtml } from './BikEditor.utils';
+export { toWhatsAppText } from './serializers/toWhatsAppText';
+export { toLiveChatText } from './serializers/toLiveChatText';
+export type { BikEditorProps, BikEditorRef, EditorSnapshot as BikEditorContent, EditorFeatures, EditorSection, MentionConfig, MentionDropdownRenderProps, SlashCommandConfig, SlashCommandDropdownRenderProps, LinkConfig, KeyboardShortcut, PasteData, MentionItem, SlashCommandItem, LinkTooltipProps, FormatState as ActiveFormats, EditorActions, } from './BikEditor.types';
+export { DEFAULT_FORMAT_STATE as DEFAULT_ACTIVE_FORMATS } from './BikEditor.types';

package/dist/esm/src/editor/serializers/toLiveChatText.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Converts TipTap HTML to LiveChat plain text.
+ *
+ * LiveChat supports **bold** (`*text*`) but NOT italic or strikethrough.
+ * Italic and strikethrough marks are stripped — the inner text is preserved.
+ * Links emit only the display text (href is dropped).
+ *
+ * @example
+ * const { html } = ref.current?.getContent();
+ * const lcText = toLiveChatText(html);
+ * sendLiveChat({ text: lcText });
+ */
+export declare function toLiveChatText(html: string): string;

package/dist/esm/src/editor/serializers/toWhatsAppText.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Converts TipTap HTML to WhatsApp-flavoured markdown text.
+ *
+ * WhatsApp formatting:
+ *   *bold*   _italic_   ~strikethrough~   ```monospace```
+ *
+ * Links: WhatsApp does not support custom display text for hyperlinks.
+ * <a href="https://…">Visit us</a>  →  https://…   (href wins, display text dropped)
+ *
+ * @example
+ * const { html } = ref.current?.getContent();
+ * const waText = toWhatsAppText(html);
+ * sendWhatsApp({ text: waText });
+ */
+export declare function toWhatsAppText(html: string): string;

package/dist/esm/src/editor/toolbar/BikEditorToolbar.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import type { BikEditorRef, FormatState } from '../BikEditor.types';
+/**
+ * Props for `<BikEditorToolbar />`.
+ *
+ * All `show*` props default to `true` except `showAlignment`, `showFontPicker`,
+ * and `showColorPicker` which default to `false`.
+ */
+interface Props {
+    /** The same ref you passed to `<BikEditor ref={...} />`. Required. */
+    editorRef: React.RefObject<BikEditorRef>;
+    /**
+     * Active format snapshot. Keep this in state, updated via `onSelectionChange`.
+     *
+     * @example
+     * const [formats, setFormats] = useState(DEFAULT_ACTIVE_FORMATS);
+     * <BikEditor onSelectionChange={setFormats} ... />
+     * <BikEditorToolbar activeFormats={formats} ... />
+     */
+    activeFormats: FormatState;
+    /** Show the Bold button. Default `true`. */
+    showBold?: boolean;
+    /** Show the Italic button. Default `true`. */
+    showItalic?: boolean;
+    /** Show the Underline button. Default `true`. */
+    showUnderline?: boolean;
+    /** Show the Strikethrough button. Default `true`. */
+    showStrike?: boolean;
+    /** Show the Link button. Default `true`. */
+    showLink?: boolean;
+    /** Show Bullet and Ordered list buttons. Default `true`. */
+    showLists?: boolean;
+    /** Show Left / Center / Right alignment buttons. Default `false`. */
+    showAlignment?: boolean;
+    /** Reserved — renders nothing yet. Default `false`. */
+    showFontPicker?: boolean;
+    /** Reserved — renders nothing yet. Default `false`. */
+    showColorPicker?: boolean;
+    /**
+     * Called when the user clicks the Link button.
+     *
+     * - `selectedText` — the selected text, or the full text of the link the cursor
+     *   is already inside (useful for pre-filling the "Text" field of your modal).
+     * - `currentHref` — non-null when the cursor is inside an existing link
+     *   (useful for pre-filling the "URL" field).
+     *
+     * After the user saves, call `editorRef.current?.actions.setLink(href, text)`.
+     */
+    onLinkButtonClick?: (selectedText: string, currentHref: string | null) => void;
+}
+export declare const BikEditorToolbar: React.FC<Props>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.793",
+	"version": "0.0.795-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",
@@ -68,6 +68,23 @@
 		"@hello-pangea/dnd": "^18.0.1",
 		"@popperjs/core": "^2.11.7",
 		"@tippyjs/react": "^4.2.6",
+		"@tiptap/extension-character-count": "^3.22.5",
+		"@tiptap/extension-color": "^3.22.5",
+		"@tiptap/extension-font-family": "^3.22.5",
+		"@tiptap/extension-highlight": "^3.22.5",
+		"@tiptap/extension-image": "^3.22.5",
+		"@tiptap/extension-link": "^3.22.5",
+		"@tiptap/extension-mention": "^3.22.5",
+		"@tiptap/extension-placeholder": "^3.22.5",
+		"@tiptap/extension-subscript": "^3.22.5",
+		"@tiptap/extension-superscript": "^3.22.5",
+		"@tiptap/extension-text-align": "^3.22.5",
+		"@tiptap/extension-text-style": "^3.22.5",
+		"@tiptap/extension-underline": "^3.22.5",
+		"@tiptap/pm": "^3.22.5",
+		"@tiptap/react": "^3.22.5",
+		"@tiptap/starter-kit": "^3.22.5",
+		"@tiptap/suggestion": "^3.22.5",
 		"@trendyol-js/react-carousel": "^3.0.2",
 		"@types/react-slick": "^0.23.13",
 		"bootstrap": "^5.1.3",
@@ -89,6 +106,7 @@
 		"react-slick": "^0.30.2",
 		"react-toastify": "^9.1.2",
 		"slick-carousel": "^1.8.1",
+		"tippy.js": "^6.3.7",
 		"uuid": "^9.0.1"
 	},
 	"devDependencies": {