hive-react-kit 1.5.6 → 1.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/build.css CHANGED
@@ -3367,6 +3367,10 @@
3367
3367
  outline-style: var(--tw-outline-style);
3368
3368
  outline-width: 1px;
3369
3369
  }
3370
+ .blur {
3371
+ --tw-blur: blur(8px);
3372
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
3373
+ }
3370
3374
  .drop-shadow-md {
3371
3375
  --tw-drop-shadow-size: drop-shadow(0 3px 3px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.12)));
3372
3376
  --tw-drop-shadow: drop-shadow(var(--drop-shadow-md));
@@ -177,11 +177,18 @@ export interface PostComposerProps {
177
177
  walletApprovalLabel?: string;
178
178
  /** When true, force the blinking wallet-approval banner on (e.g. during a post/reply broadcast). */
179
179
  awaitingWalletApproval?: boolean;
180
+ /** Seed list for the `@`-mention autocomplete dropdown. Typically the
181
+ * parent post's author followed by every `@account` mentioned in the
182
+ * post body, deduped. These appear at the top of the suggestion list
183
+ * before the user types anything; once they type 3+ chars the kit
184
+ * also calls `condenser_api.get_account_reputations` for live
185
+ * results. Omit to disable autocomplete entirely. */
186
+ mentionSeedAccounts?: string[];
180
187
  }
181
188
  /** @deprecated Use PostComposerProps instead */
182
189
  export type AddCommentInputProps = PostComposerProps;
183
- declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, onSignMessage, signingUsername, threeSpeakApiKey, giphyApiKey, youtubeApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideYoutube, hideCode, hideMention, hideTemplate, hideMeme, hideDecentMeme, decentMemesAppAccount, decentMemesTheme, onDecentMemesChange, hidePreview, hidePoll, onPollChange, defaultTags, initialUserTags, maxTags, onTagsChange, hideTags, reward, defaultReward, onRewardChange, hideReward, beneficiaries, defaultBeneficiaries, onBeneficiariesChange, beneficiaryFavorites, hideBeneficiaries, showVoteButton, defaultVoteEnabled, defaultVotePercent, voteWeightStep, allowLandscapeVideos, onVoteChange, voteLabel, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, walletApprovalLabel, awaitingWalletApproval, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
190
+ declare const PostComposer: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, onSignMessage, signingUsername, threeSpeakApiKey, giphyApiKey, youtubeApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideYoutube, hideCode, hideMention, hideTemplate, hideMeme, hideDecentMeme, decentMemesAppAccount, decentMemesTheme, onDecentMemesChange, hidePreview, hidePoll, onPollChange, defaultTags, initialUserTags, maxTags, onTagsChange, hideTags, reward, defaultReward, onRewardChange, hideReward, beneficiaries, defaultBeneficiaries, onBeneficiariesChange, beneficiaryFavorites, hideBeneficiaries, showVoteButton, defaultVoteEnabled, defaultVotePercent, voteWeightStep, allowLandscapeVideos, onVoteChange, voteLabel, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, walletApprovalLabel, awaitingWalletApproval, mentionSeedAccounts, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
184
191
  /** @deprecated Use PostComposer instead */
185
- declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, onSignMessage, signingUsername, threeSpeakApiKey, giphyApiKey, youtubeApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideYoutube, hideCode, hideMention, hideTemplate, hideMeme, hideDecentMeme, decentMemesAppAccount, decentMemesTheme, onDecentMemesChange, hidePreview, hidePoll, onPollChange, defaultTags, initialUserTags, maxTags, onTagsChange, hideTags, reward, defaultReward, onRewardChange, hideReward, beneficiaries, defaultBeneficiaries, onBeneficiariesChange, beneficiaryFavorites, hideBeneficiaries, showVoteButton, defaultVoteEnabled, defaultVotePercent, voteWeightStep, allowLandscapeVideos, onVoteChange, voteLabel, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, walletApprovalLabel, awaitingWalletApproval, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
192
+ declare const AddCommentInput: ({ onSubmit, onCancel, currentUser, placeholder, parentAuthor, parentPermlink, ecencyToken, onSignMessage, signingUsername, threeSpeakApiKey, giphyApiKey, youtubeApiKey, templateToken, templateApiBaseUrl, hideBold, hideItalic, hideLink, hideImage, hideAudio, hideVideo, hideEmoji, hideGif, hideYoutube, hideCode, hideMention, hideTemplate, hideMeme, hideDecentMeme, decentMemesAppAccount, decentMemesTheme, onDecentMemesChange, hidePreview, hidePoll, onPollChange, defaultTags, initialUserTags, maxTags, onTagsChange, hideTags, reward, defaultReward, onRewardChange, hideReward, beneficiaries, defaultBeneficiaries, onBeneficiariesChange, beneficiaryFavorites, hideBeneficiaries, showVoteButton, defaultVoteEnabled, defaultVotePercent, voteWeightStep, allowLandscapeVideos, onVoteChange, voteLabel, showCancel, submitLabel, title, defaultPreviewOn, value, onChange, disabled, hideSubmitArea, submitRef, hideUserHeader, bgColor, borderColor, disableAutoFocus, walletApprovalLabel, awaitingWalletApproval, mentionSeedAccounts, }: PostComposerProps) => import("react/jsx-runtime").JSX.Element;
186
193
  export { PostComposer };
187
194
  export default AddCommentInput;
@@ -0,0 +1,55 @@
1
+ export interface MentionMatch {
2
+ /** The active query (lowercased, no leading @). */
3
+ query: string;
4
+ /** Caret column of the `@`. */
5
+ start: number;
6
+ /** Caret column right after the active token. */
7
+ end: number;
8
+ }
9
+ /** Find the active `@…` token at the caret position, or null. */
10
+ export declare function findMentionAtCaret(value: string, caret: number): MentionMatch | null;
11
+ export interface UseMentionAutocompleteOptions {
12
+ /** Seed list — typically `[parentAuthor, ...mentionsFromBody]`, deduped.
13
+ * Shown verbatim before the user types anything, filtered locally
14
+ * while they type 1–2 chars, then merged ahead of API results. */
15
+ seedAccounts?: string[];
16
+ /** How many API rows to fetch when query length ≥ 3. */
17
+ apiLimit?: number;
18
+ }
19
+ export interface UseMentionAutocompleteResult {
20
+ active: boolean;
21
+ match: MentionMatch | null;
22
+ candidates: string[];
23
+ highlightedIndex: number;
24
+ setHighlightedIndex: (i: number) => void;
25
+ onValueChange: (value: string, caret: number) => void;
26
+ onKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => boolean;
27
+ /** Apply the selected username — returns the new value + new caret. */
28
+ apply: (selection?: string) => {
29
+ value: string;
30
+ caret: number;
31
+ } | null;
32
+ dismiss: () => void;
33
+ }
34
+ export declare function useMentionAutocomplete(value: string, options?: UseMentionAutocompleteOptions): UseMentionAutocompleteResult;
35
+ /** Approximate the caret's pixel offset inside a textarea so the
36
+ * mention dropdown can dock right under the current line instead of
37
+ * covering the typed text. Reads computed line-height + padding from
38
+ * the live element; accounts for the textarea's own scrollTop so the
39
+ * position stays correct when the body has scrolled. */
40
+ export declare function caretOffsetInTextarea(textarea: HTMLTextAreaElement | null, caret: number): {
41
+ top: number;
42
+ left: number;
43
+ };
44
+ export interface MentionSuggestProps {
45
+ candidates: string[];
46
+ highlightedIndex: number;
47
+ onHover: (index: number) => void;
48
+ onSelect: (account: string) => void;
49
+ className?: string;
50
+ }
51
+ /** Floating panel that lists the candidate accounts. Position it via the
52
+ * containing element's CSS — `MentionSuggest` itself just paints the
53
+ * list with a `absolute`-friendly layout. */
54
+ export declare const MentionSuggest: React.FC<MentionSuggestProps>;
55
+ export default MentionSuggest;
@@ -165,6 +165,36 @@ export interface ParentPostComposerProps {
165
165
  requirePoll?: boolean;
166
166
  /** Allow landscape videos (default true on the parent post composer). */
167
167
  allowLandscapeVideos?: boolean;
168
+ /** Seed accounts for the `@`-mention autocomplete dropdown. Empty by
169
+ * default — for a brand-new parent post we have no upstream body to
170
+ * pull mentions from, so the dropdown only fills in once the user
171
+ * types 3+ characters and the kit queries
172
+ * `condenser_api.get_account_reputations`. Pass a list to surface
173
+ * curated accounts (e.g. recent collaborators) at the top of the
174
+ * suggestion list. */
175
+ mentionSeedAccounts?: string[];
176
+ /** Called when the user clicks a `@username` mention in the live
177
+ * preview pane. Lets the consumer route to its own user-profile
178
+ * page instead of letting the anchor's default `https://peakd.com/…`
179
+ * href open peakd in a new tab. */
180
+ onUserClick?: (username: string) => void;
181
+ /** Called when the user clicks a Hive post link inside the live
182
+ * preview pane (peakd / hive.blog / ecency / inleo URLs). Routes
183
+ * to the consumer's own post-detail page. */
184
+ onNavigateToPost?: (author: string, permlink: string) => void;
185
+ /** Renderer URL overrides applied to the live preview pane. Same
186
+ * shape as `HiveDetailPost.renderOptions` so consumers can use one
187
+ * config object for both surfaces. */
188
+ renderOptions?: {
189
+ /** Replace user-mention URL (e.g. `(u) => '#/@' + u`). */
190
+ userLinkUrlFn?: (username: string) => string;
191
+ /** Replace hashtag URL (e.g. `(t) => '#/tag/' + t`). */
192
+ tagLinkUrlFn?: (tag: string) => string;
193
+ /** Replace the renderer's base URL used when `convertHiveUrls` is on. */
194
+ postBaseUrl?: string;
195
+ /** Replace the IPFS gateway prefix used for ipfs:// embeds. */
196
+ ipfsGateway?: string;
197
+ };
168
198
  /**
169
199
  * When set, the composer auto-saves its state to `localStorage[draftKey]`
170
200
  * (debounced, ~500 ms after the last change) and rehydrates from it on
@@ -31,6 +31,10 @@ interface InlineCommentItemProps {
31
31
  /** Read function — controls the filled vs outline state of the
32
32
  * bookmark item inside the kebab. */
33
33
  isCommentBookmarked?: (author: string, permlink: string) => boolean;
34
+ /** Seed accounts for the `@`-mention autocomplete in the reply
35
+ * composer attached to this row. Forwarded from
36
+ * `InlineCommentSection.mentionSeedAccounts`. */
37
+ mentionSeedAccounts?: string[];
34
38
  /** Called when the author of this comment taps Edit. Each row gates
35
39
  * the entry-point internally to `comment.author === currentUser`. */
36
40
  onEditComment?: (data: {
@@ -70,5 +74,5 @@ interface InlineCommentItemProps {
70
74
  ipfsGateway?: string;
71
75
  };
72
76
  }
73
- export default function InlineCommentItem({ comment, allComments, onReply, onCancelReply, onCommentSubmit, activeReplyKey, currentUser, token, depth, onVotedRefresh, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hiveIconUrl, onShareComment, onTipComment, onReportComment, onToggleCommentBookmark, isCommentBookmarked, onEditComment, onNavigateToPost, onUserClick, defaultReward, defaultBeneficiaries, beneficiaryFavorites, defaultVotePercent, voteWeightStep, allowLandscapeVideos, awaitingWalletApproval, renderOptions, }: InlineCommentItemProps): import("react/jsx-runtime").JSX.Element;
77
+ export default function InlineCommentItem({ comment, allComments, onReply, onCancelReply, onCommentSubmit, activeReplyKey, currentUser, token, depth, onVotedRefresh, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, hiveIconUrl, onShareComment, onTipComment, onReportComment, onToggleCommentBookmark, isCommentBookmarked, mentionSeedAccounts, onEditComment, onNavigateToPost, onUserClick, defaultReward, defaultBeneficiaries, beneficiaryFavorites, defaultVotePercent, voteWeightStep, allowLandscapeVideos, awaitingWalletApproval, renderOptions, }: InlineCommentItemProps): import("react/jsx-runtime").JSX.Element;
74
78
  export {};
@@ -58,6 +58,10 @@ interface InlineCommentSectionProps {
58
58
  * kebab with a Bookmark item on each comment row. */
59
59
  onToggleCommentBookmark?: (author: string, permlink: string) => void;
60
60
  isCommentBookmarked?: (author: string, permlink: string) => boolean;
61
+ /** Seed accounts for the `@`-mention autocomplete in every reply
62
+ * composer rendered under this section — typically the post author
63
+ * followed by every `@account` mentioned in the post body. */
64
+ mentionSeedAccounts?: string[];
61
65
  /** Called when the comment author taps Edit on one of their own
62
66
  * comments. Each comment row gates the entry-point internally to
63
67
  * `comment.author === currentUser`. Payload mirrors HiveDetailPost
@@ -75,5 +79,5 @@ interface InlineCommentSectionProps {
75
79
  /** Intercept intra-body Hive profile links in comment bodies. */
76
80
  onUserClick?: (username: string) => void;
77
81
  }
78
- export default function InlineCommentSection({ author, permlink, currentUser, token, onSubmitComment, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, reportedAuthors, reportedPosts, hiveIconUrl, onShareComment, onTipComment, onReportComment, onToggleCommentBookmark, isCommentBookmarked, onEditComment, onNavigateToPost, onUserClick, showVoteButton, alreadyVoted, parentTags, defaultReward, defaultBeneficiaries, beneficiaryFavorites, defaultVotePercent, voteWeightStep, allowLandscapeVideos, awaitingWalletApproval, renderOptions, }: InlineCommentSectionProps): import("react/jsx-runtime").JSX.Element;
82
+ export default function InlineCommentSection({ author, permlink, currentUser, token, onSubmitComment, onClickCommentUpvote, ecencyToken, threeSpeakApiKey, giphyApiKey, templateToken, templateApiBaseUrl, reportedAuthors, reportedPosts, hiveIconUrl, onShareComment, onTipComment, onReportComment, onToggleCommentBookmark, isCommentBookmarked, mentionSeedAccounts, onEditComment, onNavigateToPost, onUserClick, showVoteButton, alreadyVoted, parentTags, defaultReward, defaultBeneficiaries, beneficiaryFavorites, defaultVotePercent, voteWeightStep, allowLandscapeVideos, awaitingWalletApproval, renderOptions, }: InlineCommentSectionProps): import("react/jsx-runtime").JSX.Element;
79
83
  export {};