@bikdotai/bik-component-library 0.0.811 → 0.0.812-beta.0

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

@@ -3,14 +3,20 @@ import { EditorSnapshot, FormatState } from './BikEditor.types';
 /**
  * Normalise HTML before passing it to TipTap.
  *
- * 1. Strip all `<span>` tags first (keeps inner content). This exposes
- *    bare `<br>` inside otherwise-empty paragraphs like Quill's
- *    `<p><span class="ql-cursor"><br></span></p>`.
- * 2. Then convert `<p><br></p>` → `<p></p>`. ProseMirror parses `<p></p>`
- *    as an empty paragraph node and adds its own DOM `<br>` for cursor
- *    positioning — one blank line, correct height. Leaving the `<br>`
- *    would create a `hard_break` child AND the cursor `<br>`, producing
- *    double-height blank lines.
+ * 1. Unwrap style-less `<span>` wrappers (plain spans, and editor-cursor spans
+ *    like Quill's `<span class="ql-cursor">`). Spans that carry inline styling
+ *    (`color` / `font-family` / `font-size` render as styled spans) or that
+ *    represent a `{{variable}}` token are PRESERVED — otherwise a setContent
+ *    round-trip would silently drop colour/font formatting that paste keeps.
+ * 2. Collapse placeholder paragraphs (`<p><br></p>`) to `<p></p>`. ProseMirror
+ *    parses `<p></p>` as an empty paragraph and adds its own DOM `<br>` for the
+ *    cursor — one blank line, correct height. Leaving the source `<br>` would
+ *    create a `hard_break` child AND the cursor `<br>` → double-height blank line.
+ *
+ * Uses the DOM (regex cannot selectively pair span tags). `normalizeHtml` runs
+ * in the component body for `initialContent`, so it is guarded for SSR: the
+ * editor is created lazily on the client (`immediatelyRender: false`), meaning
+ * the value is only parsed client-side and passing through on the server is safe.
  */
 export declare function normalizeHtml(html: string): string;
 /**

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

@@ -1,4 +1,3 @@
-import { Extension } from '@tiptap/core';
 import type { ReactNode } from 'react';
 import type { EditorFeatures, EditorSnapshot, KeyboardShortcut, MentionDropdownRenderProps, MentionItem, PasteData, SlashCommandDropdownRenderProps, SlashCommandItem } from '../BikEditor.types';
 interface ExtensionConfig {
@@ -34,5 +33,5 @@ interface ExtensionConfig {
     renderSlashCommandItem?: (item: SlashCommandItem, isActive: boolean) => ReactNode;
     renderSlashCommandDropdown?: (props: SlashCommandDropdownRenderProps) => ReactNode;
 }
-export declare function buildExtensions(config: ExtensionConfig): (import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | Extension<import("@tiptap/starter-kit").StarterKitOptions, any> | Extension<any, 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> | Extension<import("@tiptap/extensions").PlaceholderOptions, any> | 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> | Extension<import("@tiptap/extension-text-style").ColorOptions, any> | import("@tiptap/core").Mark<import("@tiptap/extension-highlight").HighlightOptions, any> | Extension<import("@tiptap/extension-text-align").TextAlignOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-image").ImageOptions, any>)[];
+export declare function buildExtensions(config: ExtensionConfig): (import("@tiptap/core").Node<import("@tiptap/extension-hard-break").HardBreakOptions, any> | import("@tiptap/core").Node<import("@tiptap/extension-paragraph").ParagraphOptions, any> | 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/plainClipboard/PasteNormalizationExtension.d.ts

@@ -3,11 +3,29 @@ import { Extension } from '@tiptap/core';
  * Unified paste normalizer for all editor channels.
  *
  * Uses ProseMirror's recommended hooks instead of overriding handlePaste:
- * - clipboardTextParser:  plain text → Slice (preserves blank lines)
+ * - clipboardTextParser:  plain text → Slice (one block, <br> per line)
  * - transformPastedHTML:  HTML → HTML (cleans Google Docs / Word artifacts)
- * - transformPasted:      Slice → Slice (normalizes hardBreaks, strips marks)
+ * - transformPasted:      Slice → Slice (normalize hardBreaks, strip marks,
+ *                         mirror the source paragraph-margin convention)
  *
- * Also decorates empty paragraphs with an `is-blank` CSS class so the
- * editor stylesheet can give blank lines precise height without extra margins.
+ * Margins MIRROR the source (like Gmail): they are not added structurally, so
+ * ChatGPT-pasted `<p>` keeps its default margin (gaps) while Google-Docs and
+ * plain/paste-without-formatting content stays margin:0 (tight).
+ *
+ * `appendTransaction` does two bounded touch-ups:
+ *  1. Repairs the FIRST pasted paragraph — ProseMirror merges it into the
+ *     cursor's paragraph at paste time, dropping its margin attr; we record that
+ *     margin (in transformPasted / the plain handlePaste) and reapply it at the
+ *     paste position.
+ *  2. Typed-Enter inheritance — splitBlock gives a paragraph created at a block
+ *     end DEFAULT attrs, so an empty paragraph that follows a margin:0 paragraph
+ *     is set to margin:0 too. Typing inside tight content stays tight; default
+ *     content stays default; non-empty (pasted) paragraphs are never touched.
+ *
+ * `plainOnly` (channels with no rich formatting — WhatsApp, IG, FB, comments)
+ * forces EVERY paste through the plain-text path: even Cmd/Ctrl+V ignores the
+ * clipboard HTML and pastes text only, since those channels don't support
+ * formatting anyway. Email and the signature editor (richPaste) keep the full
+ * HTML pipeline.
  */
 export declare const PasteNormalizationExtension: Extension<any, any>;

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

@@ -1,6 +1,8 @@
 import { Fragment, Schema, Slice } from '@tiptap/pm/model';
 export declare const TEXTBLOCK_TAGS: Set<string>;
 export declare const BLOCK_SELECTOR = "p,div,h1,h2,h3,h4,h5,h6,ul,ol,li,blockquote,table,pre";
+/** Normalise clipboard newlines: Windows CRLF and lone CR → LF. */
+export declare function normalizeNewlines(text: string): string;
 /**
  * When pasted HTML is entirely inline (no block elements), split at
  * `<br><br>` boundaries into `<p>` elements. Single `<br>` stays as a
@@ -21,14 +23,31 @@ export declare function cleanBlockBrs(container: HTMLElement): void;
  */
 export declare function stripTrailingBrs(container: HTMLElement): void;
 /**
- * Convert paragraphs containing only a hardBreak into truly empty paragraphs.
- * Google Docs represents blank lines as `<p><br></p>` — ProseMirror parses
- * the `<br>` as a hardBreak node, which renders double-height. Converting to
- * an empty paragraph (childCount 0) gives a single-height blank line.
+ * Convert a paragraph whose ONLY child is a hardBreak (`<p><br></p>`) into a
+ * truly empty paragraph. ProseMirror parses the `<br>` as a hardBreak node AND
+ * adds its own cursor `<br>`, rendering double-height; an empty paragraph
+ * (childCount 0) gives a single-height blank line.
  *
- * Does NOT collapse consecutive empties — that would destroy user intent.
+ * Does NOT strip trailing hardBreaks from content paragraphs, and does NOT
+ * collapse consecutive empties — those `<br>`s/blank lines are intentional
+ * (e.g. shift+enter / enter runs from Google Docs) and Gmail preserves them.
  */
 export declare function normalizeHardBreaks(fragment: Fragment): Fragment;
+/**
+ * Mirror the source paragraph-margin convention across a pasted block.
+ *
+ * Gmail decides spacing from the SOURCE: it keeps default margins for content
+ * pasted from ChatGPT/plain `<p>`, and `margin:0` for Google-Docs-style content
+ * (whose paragraphs carry `margin:0`). We do the same. A paragraph's margin is
+ * already preserved from the source (the Paragraph node's `margin` attribute),
+ * so the only gap is the synthesized blank-line paragraphs (created from a
+ * Google-Docs block-level `<br>`), which have no source margin. If the pasted
+ * block is margin:0-style (any paragraph carries margin:0), apply margin:0 to
+ * every paragraph of THIS paste — so the blank lines match. Pastes with no
+ * margin:0 paragraph (ChatGPT, plain text) are left untouched → default margins.
+ * Scoped to the pasted slice, so it never tightens existing/typed content.
+ */
+export declare function mirrorParagraphMargins(fragment: Fragment): Fragment;
 /**
  * Strip "rich" marks (link, textStyle, highlight, etc.) while keeping
  * basic marks (bold, italic, strike, underline, code) that messaging
@@ -49,5 +68,9 @@ export declare function parseClipboardText(text: string, schema: Schema): Slice;
  * every `\n`. Produces the same structure as Gmail's Cmd+Shift+V output:
  * one block element with `<br>` for line breaks and `<br><br>` for blank
  * lines. This gives identical html and text output to Gmail.
+ *
+ * The paragraph is tight (`margin: '0'`) — plain/paste-without-formatting is
+ * Gmail's `<div>` (no margin), and typed Enter inherits this margin, so
+ * splitting plain-pasted text stays tight like Gmail (not default-margin gaps).
  */
 export declare function parseClipboardTextAsBreaks(text: string, schema: Schema): Slice;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bikdotai/bik-component-library",
-	"version": "0.0.811",
+	"version": "0.0.812-beta.0",
 	"description": "Bik Component Library",
 	"repository": {
 		"type": "git",
@@ -71,6 +71,7 @@
 		"@tiptap/extension-character-count": "^3.22.5",
 		"@tiptap/extension-color": "^3.22.5",
 		"@tiptap/extension-font-family": "^3.22.5",
+		"@tiptap/extension-hard-break": "^3.22.5",
 		"@tiptap/extension-highlight": "^3.22.5",
 		"@tiptap/extension-image": "^3.22.5",
 		"@tiptap/extension-link": "^3.22.5",