@diffsome/react 1.2.1 → 1.2.2
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/index.d.mts +41 -1
- package/dist/index.d.ts +41 -1
- package/dist/index.js +69 -0
- package/dist/index.mjs +68 -0
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -757,4 +757,44 @@ declare function useTypedEntity<T extends Record<string, any>>(slug: string): {
|
|
|
757
757
|
delete: (id: number) => Promise<void>;
|
|
758
758
|
};
|
|
759
759
|
|
|
760
|
-
|
|
760
|
+
interface RichContentProps {
|
|
761
|
+
/** HTML content from CMS/Editor */
|
|
762
|
+
html: string;
|
|
763
|
+
/** Additional CSS class names */
|
|
764
|
+
className?: string;
|
|
765
|
+
/** Enable prose styles (requires @tailwindcss/typography) */
|
|
766
|
+
prose?: boolean;
|
|
767
|
+
/** Prose variant: 'default' | 'invert' | 'zinc' | 'slate' | 'gray' | 'neutral' | 'stone' */
|
|
768
|
+
proseVariant?: 'default' | 'invert' | 'zinc' | 'slate' | 'gray' | 'neutral' | 'stone';
|
|
769
|
+
/** Prose size: 'sm' | 'base' | 'lg' | 'xl' | '2xl' */
|
|
770
|
+
proseSize?: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
|
|
771
|
+
/** Max width: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' */
|
|
772
|
+
maxWidth?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
773
|
+
}
|
|
774
|
+
/**
|
|
775
|
+
* RichContent Component
|
|
776
|
+
*
|
|
777
|
+
* Renders HTML content from CMS/Editor with proper styling.
|
|
778
|
+
* Includes Quill editor compatibility and optional Tailwind Typography (prose) styles.
|
|
779
|
+
*
|
|
780
|
+
* @example
|
|
781
|
+
* ```tsx
|
|
782
|
+
* // Basic usage
|
|
783
|
+
* <RichContent html={post.content} />
|
|
784
|
+
*
|
|
785
|
+
* // With prose styles (dark mode)
|
|
786
|
+
* <RichContent html={post.content} prose proseVariant="invert" />
|
|
787
|
+
*
|
|
788
|
+
* // Custom styling
|
|
789
|
+
* <RichContent
|
|
790
|
+
* html={post.content}
|
|
791
|
+
* prose
|
|
792
|
+
* proseVariant="zinc"
|
|
793
|
+
* proseSize="lg"
|
|
794
|
+
* className="my-8"
|
|
795
|
+
* />
|
|
796
|
+
* ```
|
|
797
|
+
*/
|
|
798
|
+
declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
|
|
799
|
+
|
|
800
|
+
export { type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };
|
package/dist/index.d.ts
CHANGED
|
@@ -757,4 +757,44 @@ declare function useTypedEntity<T extends Record<string, any>>(slug: string): {
|
|
|
757
757
|
delete: (id: number) => Promise<void>;
|
|
758
758
|
};
|
|
759
759
|
|
|
760
|
-
|
|
760
|
+
interface RichContentProps {
|
|
761
|
+
/** HTML content from CMS/Editor */
|
|
762
|
+
html: string;
|
|
763
|
+
/** Additional CSS class names */
|
|
764
|
+
className?: string;
|
|
765
|
+
/** Enable prose styles (requires @tailwindcss/typography) */
|
|
766
|
+
prose?: boolean;
|
|
767
|
+
/** Prose variant: 'default' | 'invert' | 'zinc' | 'slate' | 'gray' | 'neutral' | 'stone' */
|
|
768
|
+
proseVariant?: 'default' | 'invert' | 'zinc' | 'slate' | 'gray' | 'neutral' | 'stone';
|
|
769
|
+
/** Prose size: 'sm' | 'base' | 'lg' | 'xl' | '2xl' */
|
|
770
|
+
proseSize?: 'sm' | 'base' | 'lg' | 'xl' | '2xl';
|
|
771
|
+
/** Max width: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full' */
|
|
772
|
+
maxWidth?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
|
|
773
|
+
}
|
|
774
|
+
/**
|
|
775
|
+
* RichContent Component
|
|
776
|
+
*
|
|
777
|
+
* Renders HTML content from CMS/Editor with proper styling.
|
|
778
|
+
* Includes Quill editor compatibility and optional Tailwind Typography (prose) styles.
|
|
779
|
+
*
|
|
780
|
+
* @example
|
|
781
|
+
* ```tsx
|
|
782
|
+
* // Basic usage
|
|
783
|
+
* <RichContent html={post.content} />
|
|
784
|
+
*
|
|
785
|
+
* // With prose styles (dark mode)
|
|
786
|
+
* <RichContent html={post.content} prose proseVariant="invert" />
|
|
787
|
+
*
|
|
788
|
+
* // Custom styling
|
|
789
|
+
* <RichContent
|
|
790
|
+
* html={post.content}
|
|
791
|
+
* prose
|
|
792
|
+
* proseVariant="zinc"
|
|
793
|
+
* proseSize="lg"
|
|
794
|
+
* className="my-8"
|
|
795
|
+
* />
|
|
796
|
+
* ```
|
|
797
|
+
*/
|
|
798
|
+
declare function RichContent({ html, className, prose, proseVariant, proseSize, maxWidth, }: RichContentProps): react_jsx_runtime.JSX.Element;
|
|
799
|
+
|
|
800
|
+
export { type CommentType, DiffsomeContext, type DiffsomeContextValue, DiffsomeProvider, type DiffsomeProviderProps, RichContent, type RichContentProps, type UseAuthReturn, type UseAvailableSlotsReturn, type UseBlogCategoriesReturn, type UseBlogOptions, type UseBlogPostReturn, type UseBlogReturn, type UseBlogSearchReturn, type UseBlogTagsReturn, type UseBoardPostReturn, type UseBoardPostsReturn, type UseBoardReturn, type UseBoardsReturn, type UseBundleItemsReturn, type UseCanReviewReturn, type UseCartReturn, type UseCategoriesReturn, type UseCommentsOptions, type UseCommentsReturn, type UseCouponsReturn, type UseCreateBoardPostReturn, type UseCreateOrderReturn, type UseCreateReservationReturn, type UseCreateReviewReturn, type UseCreateSubscriptionReturn, type UseCurrencyReturn, type UseDownloadsReturn, type UseEntitiesReturn, type UseEntityRecordReturn, type UseEntityRecordsReturn, type UseEntityReturn, type UseFeaturedBlogReturn, type UseFeaturedProductsReturn, type UseFormReturn, type UseMediaOptions, type UseMediaReturn, type UseMyReservationsReturn, type UseMyReviewsReturn, type UseOrderDownloadsReturn, type UseOrderReturn, type UseOrdersReturn, type UsePaymentStatusReturn, type UseProductReturn, type UseProductReviewsReturn, type UseProductsByTypeReturn, type UseProductsOptions, type UseProductsReturn, type UseReservationServicesReturn, type UseReservationSettingsReturn, type UseReservationStaffsReturn, type UseSiteReturn, type UseSocialAuthReturn, type UseStripePaymentReturn, type UseSubscriptionReturn, type UseSubscriptionsReturn, type UseTossPaymentReturn, type UseValidateCouponReturn, type UseWishlistReturn, useAuth, useAvailableSlots, useBlog, useBlogCategories, useBlogPost, useBlogSearch, useBlogTags, useBoard, useBoardPost, useBoardPosts, useBoards, useBundleItems, useBundleProducts, useCanReview, useCart, useCategories, useClient, useComments, useCoupons, useCreateBoardPost, useCreateOrder, useCreateReservation, useCreateReview, useCreateSubscription, useCurrency, useDiffsome, useDigitalProducts, useDownloads, useEntities, useEntity, useEntityRecord, useEntityRecords, useFeaturedBlog, useFeaturedProducts, useForm, useMedia, useMyReservations, useMyReviews, useOrder, useOrderDownloads, useOrders, usePaymentStatus, useProduct, useProductReviews, useProducts, useProductsByType, useReservationServices, useReservationSettings, useReservationStaffs, useSite, useSocialAuth, useStripePayment, useSubscription, useSubscriptionProducts, useSubscriptions, useTossPayment, useTypedEntity, useValidateCoupon, useWishlist };
|
package/dist/index.js
CHANGED
|
@@ -22,6 +22,7 @@ var index_exports = {};
|
|
|
22
22
|
__export(index_exports, {
|
|
23
23
|
DiffsomeContext: () => DiffsomeContext,
|
|
24
24
|
DiffsomeProvider: () => DiffsomeProvider,
|
|
25
|
+
RichContent: () => RichContent,
|
|
25
26
|
useAuth: () => useAuth,
|
|
26
27
|
useAvailableSlots: () => useAvailableSlots,
|
|
27
28
|
useBlog: () => useBlog,
|
|
@@ -2408,10 +2409,78 @@ function useTypedEntity(slug) {
|
|
|
2408
2409
|
delete: (id) => client.entities.deleteRecord(slug, id)
|
|
2409
2410
|
}), [client, slug]);
|
|
2410
2411
|
}
|
|
2412
|
+
|
|
2413
|
+
// src/components/RichContent.tsx
|
|
2414
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
2415
|
+
var quillStyles = `
|
|
2416
|
+
/* Quill Alignment */
|
|
2417
|
+
.ql-align-center { text-align: center; }
|
|
2418
|
+
.ql-align-right { text-align: right; }
|
|
2419
|
+
.ql-align-justify { text-align: justify; }
|
|
2420
|
+
|
|
2421
|
+
/* Quill Font Sizes */
|
|
2422
|
+
.ql-size-small { font-size: 0.75em; }
|
|
2423
|
+
.ql-size-large { font-size: 1.5em; }
|
|
2424
|
+
.ql-size-huge { font-size: 2.5em; }
|
|
2425
|
+
|
|
2426
|
+
/* Quill Fonts */
|
|
2427
|
+
.ql-font-serif { font-family: Georgia, Times New Roman, serif; }
|
|
2428
|
+
.ql-font-monospace { font-family: Monaco, Courier New, monospace; }
|
|
2429
|
+
|
|
2430
|
+
/* Quill Indent */
|
|
2431
|
+
.ql-indent-1 { padding-left: 3em; }
|
|
2432
|
+
.ql-indent-2 { padding-left: 6em; }
|
|
2433
|
+
.ql-indent-3 { padding-left: 9em; }
|
|
2434
|
+
.ql-indent-4 { padding-left: 12em; }
|
|
2435
|
+
.ql-indent-5 { padding-left: 15em; }
|
|
2436
|
+
|
|
2437
|
+
/* Quill Video */
|
|
2438
|
+
.ql-video {
|
|
2439
|
+
display: block;
|
|
2440
|
+
max-width: 100%;
|
|
2441
|
+
margin: 1em 0;
|
|
2442
|
+
}
|
|
2443
|
+
|
|
2444
|
+
/* Quill Code Block */
|
|
2445
|
+
.ql-code-block-container {
|
|
2446
|
+
background-color: #23241f;
|
|
2447
|
+
color: #f8f8f2;
|
|
2448
|
+
border-radius: 0.375rem;
|
|
2449
|
+
padding: 1em;
|
|
2450
|
+
margin: 1em 0;
|
|
2451
|
+
overflow-x: auto;
|
|
2452
|
+
}
|
|
2453
|
+
`;
|
|
2454
|
+
function RichContent({
|
|
2455
|
+
html,
|
|
2456
|
+
className = "",
|
|
2457
|
+
prose = true,
|
|
2458
|
+
proseVariant = "default",
|
|
2459
|
+
proseSize = "base",
|
|
2460
|
+
maxWidth = "none"
|
|
2461
|
+
}) {
|
|
2462
|
+
const proseClasses = prose ? [
|
|
2463
|
+
"prose",
|
|
2464
|
+
proseVariant !== "default" && `prose-${proseVariant}`,
|
|
2465
|
+
proseSize !== "base" && `prose-${proseSize}`,
|
|
2466
|
+
maxWidth !== "none" && `max-w-${maxWidth}`
|
|
2467
|
+
].filter(Boolean).join(" ") : "";
|
|
2468
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
|
|
2469
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("style", { dangerouslySetInnerHTML: { __html: quillStyles } }),
|
|
2470
|
+
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
2471
|
+
"div",
|
|
2472
|
+
{
|
|
2473
|
+
className: `rich-content ${proseClasses} ${className}`.trim(),
|
|
2474
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
2475
|
+
}
|
|
2476
|
+
)
|
|
2477
|
+
] });
|
|
2478
|
+
}
|
|
2411
2479
|
// Annotate the CommonJS export names for ESM import in node:
|
|
2412
2480
|
0 && (module.exports = {
|
|
2413
2481
|
DiffsomeContext,
|
|
2414
2482
|
DiffsomeProvider,
|
|
2483
|
+
RichContent,
|
|
2415
2484
|
useAuth,
|
|
2416
2485
|
useAvailableSlots,
|
|
2417
2486
|
useBlog,
|
package/dist/index.mjs
CHANGED
|
@@ -2322,9 +2322,77 @@ function useTypedEntity(slug) {
|
|
|
2322
2322
|
delete: (id) => client.entities.deleteRecord(slug, id)
|
|
2323
2323
|
}), [client, slug]);
|
|
2324
2324
|
}
|
|
2325
|
+
|
|
2326
|
+
// src/components/RichContent.tsx
|
|
2327
|
+
import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
|
|
2328
|
+
var quillStyles = `
|
|
2329
|
+
/* Quill Alignment */
|
|
2330
|
+
.ql-align-center { text-align: center; }
|
|
2331
|
+
.ql-align-right { text-align: right; }
|
|
2332
|
+
.ql-align-justify { text-align: justify; }
|
|
2333
|
+
|
|
2334
|
+
/* Quill Font Sizes */
|
|
2335
|
+
.ql-size-small { font-size: 0.75em; }
|
|
2336
|
+
.ql-size-large { font-size: 1.5em; }
|
|
2337
|
+
.ql-size-huge { font-size: 2.5em; }
|
|
2338
|
+
|
|
2339
|
+
/* Quill Fonts */
|
|
2340
|
+
.ql-font-serif { font-family: Georgia, Times New Roman, serif; }
|
|
2341
|
+
.ql-font-monospace { font-family: Monaco, Courier New, monospace; }
|
|
2342
|
+
|
|
2343
|
+
/* Quill Indent */
|
|
2344
|
+
.ql-indent-1 { padding-left: 3em; }
|
|
2345
|
+
.ql-indent-2 { padding-left: 6em; }
|
|
2346
|
+
.ql-indent-3 { padding-left: 9em; }
|
|
2347
|
+
.ql-indent-4 { padding-left: 12em; }
|
|
2348
|
+
.ql-indent-5 { padding-left: 15em; }
|
|
2349
|
+
|
|
2350
|
+
/* Quill Video */
|
|
2351
|
+
.ql-video {
|
|
2352
|
+
display: block;
|
|
2353
|
+
max-width: 100%;
|
|
2354
|
+
margin: 1em 0;
|
|
2355
|
+
}
|
|
2356
|
+
|
|
2357
|
+
/* Quill Code Block */
|
|
2358
|
+
.ql-code-block-container {
|
|
2359
|
+
background-color: #23241f;
|
|
2360
|
+
color: #f8f8f2;
|
|
2361
|
+
border-radius: 0.375rem;
|
|
2362
|
+
padding: 1em;
|
|
2363
|
+
margin: 1em 0;
|
|
2364
|
+
overflow-x: auto;
|
|
2365
|
+
}
|
|
2366
|
+
`;
|
|
2367
|
+
function RichContent({
|
|
2368
|
+
html,
|
|
2369
|
+
className = "",
|
|
2370
|
+
prose = true,
|
|
2371
|
+
proseVariant = "default",
|
|
2372
|
+
proseSize = "base",
|
|
2373
|
+
maxWidth = "none"
|
|
2374
|
+
}) {
|
|
2375
|
+
const proseClasses = prose ? [
|
|
2376
|
+
"prose",
|
|
2377
|
+
proseVariant !== "default" && `prose-${proseVariant}`,
|
|
2378
|
+
proseSize !== "base" && `prose-${proseSize}`,
|
|
2379
|
+
maxWidth !== "none" && `max-w-${maxWidth}`
|
|
2380
|
+
].filter(Boolean).join(" ") : "";
|
|
2381
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
2382
|
+
/* @__PURE__ */ jsx2("style", { dangerouslySetInnerHTML: { __html: quillStyles } }),
|
|
2383
|
+
/* @__PURE__ */ jsx2(
|
|
2384
|
+
"div",
|
|
2385
|
+
{
|
|
2386
|
+
className: `rich-content ${proseClasses} ${className}`.trim(),
|
|
2387
|
+
dangerouslySetInnerHTML: { __html: html }
|
|
2388
|
+
}
|
|
2389
|
+
)
|
|
2390
|
+
] });
|
|
2391
|
+
}
|
|
2325
2392
|
export {
|
|
2326
2393
|
DiffsomeContext,
|
|
2327
2394
|
DiffsomeProvider,
|
|
2395
|
+
RichContent,
|
|
2328
2396
|
useAuth,
|
|
2329
2397
|
useAvailableSlots,
|
|
2330
2398
|
useBlog,
|