@san-siva/blogkit 1.1.31 → 1.1.32
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/cjs/dynamicComponents/BlogSectionDynamic.js +1 -1
- package/dist/cjs/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/cjs/staticComponents/BlogSectionStatic.js +1 -1
- package/dist/cjs/staticComponents/BlogSectionStatic.js.map +1 -1
- package/dist/cjs/utils/index.js +14 -0
- package/dist/cjs/utils/index.js.map +1 -1
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js +2 -2
- package/dist/esm/dynamicComponents/BlogSectionDynamic.js.map +1 -1
- package/dist/esm/staticComponents/BlogSectionStatic.js +2 -2
- package/dist/esm/staticComponents/BlogSectionStatic.js.map +1 -1
- package/dist/esm/utils/index.js +14 -1
- package/dist/esm/utils/index.js.map +1 -1
- package/dist/types/utils/index.d.ts +2 -0
- package/dist/types/utils/index.d.ts.map +1 -1
- package/dist/types/utils/index.test.d.ts +2 -0
- package/dist/types/utils/index.test.d.ts.map +1 -0
- package/package.json +4 -2
- package/src/dynamicComponents/BlogSectionDynamic.tsx +2 -2
- package/src/staticComponents/BlogSectionStatic.tsx +2 -2
- package/src/utils/index.test.tsx +63 -0
- package/src/utils/index.ts +11 -0
|
@@ -9,7 +9,7 @@ var BlogSection_module = require('../styles/BlogSection.module.scss.js');
|
|
|
9
9
|
var index = require('../utils/index.js');
|
|
10
10
|
|
|
11
11
|
const BlogSection = react.forwardRef(({ title = '', category = '', children = null }, forwardedReference) => {
|
|
12
|
-
const titleString = typeof title === 'string' ? title :
|
|
12
|
+
const titleString = typeof title === 'string' ? title : index.extractTextFromReactNode(title);
|
|
13
13
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
14
14
|
const id = index.generateIdForBlogTitle(titleWithCategory);
|
|
15
15
|
const parentReference = react.useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\t\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\t\tconst imperativeHandleRef = useRef<ForwardedReference | null>(null);\n\n\t\tuseImperativeHandle(forwardedReference, () => {\n\t\t\tconst handle = {\n\t\t\t\tparentRef: parentReference.current!,\n\t\t\t\tchildRefs: childReferences.current!,\n\t\t\t};\n\t\t\timperativeHandleRef.current = handle;\n\t\t\treturn handle;\n\t\t});\n\n\t\t// Re-register when title or category changes so the TOC reflects the updated heading\n\t\tuseEffect(() => {\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t}, [title, category]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\n\t\t\t// Avoid registering the same child section twice\n\t\t\tconst alreadyRegistered = childReferences.current.some(\n\t\t\t\tref => ref.parentRef === subParentReference\n\t\t\t);\n\t\t\tif (!alreadyRegistered) {\n\t\t\t\tchildReferences.current.push(element);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={styles['blog-section']}\n\t\t\t\tdata-title={titleString}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t<h3\n\t\t\t\t\tclassName={`${styles['blog-section__title']} ${title ? '' : styles['blog-section__title--empty']}`}\n\t\t\t\t>\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref={generateSectionHref(id)}\n\t\t\t\t\t\t\tclassName={styles['blog-section__title-link']}\n\t\t\t\t\t\t\tonClick={e => e.preventDefault()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p>No title</p>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleChildReferences,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["forwardRef","extractTextFromReactNode","generateIdForBlogTitle","useRef","useImperativeHandle","useEffect","_jsxs","styles","_jsx","generateSectionHref","Children","isValidElement","cloneElement"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ var BlogSection_module = require('../styles/BlogSection.module.scss.js');
|
|
|
7
7
|
var index = require('../utils/index.js');
|
|
8
8
|
|
|
9
9
|
const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
|
|
10
|
-
const titleString = typeof title === 'string' ? title :
|
|
10
|
+
const titleString = typeof title === 'string' ? title : index.extractTextFromReactNode(title);
|
|
11
11
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
12
12
|
const id = index.generateIdForBlogTitle(titleWithCategory);
|
|
13
13
|
return (jsxRuntime.jsxs("div", { className: BlogSection_module.default['blog-section'], "data-title": titleString, "data-id": id, children: [title ? (jsxRuntime.jsx("h3", { className: BlogSection_module.default['blog-section__title'], children: title })) : null, children] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={titleString} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["extractTextFromReactNode","generateIdForBlogTitle","_jsxs","styles","_jsx"],"mappings":";;;;;;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAGA,8BAAwB,CAAC,KAAK,CAAC;AACvF,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,GAAG,WAAW;AACjF,IAAA,MAAM,EAAE,GAAGC,4BAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCC,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEC,0BAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,WAAW,aAAW,EAAE,EAAA,QAAA,EAAA,CAC1E,KAAK,IACLC,cAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAED,0BAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -1,9 +1,23 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
+
var react = require('react');
|
|
4
|
+
|
|
5
|
+
const extractTextFromReactNode = (node) => {
|
|
6
|
+
if (node === null || node === undefined || typeof node === 'boolean')
|
|
7
|
+
return '';
|
|
8
|
+
if (typeof node === 'string' || typeof node === 'number')
|
|
9
|
+
return String(node);
|
|
10
|
+
if (react.isValidElement(node))
|
|
11
|
+
return extractTextFromReactNode(node.props.children);
|
|
12
|
+
if (Array.isArray(node))
|
|
13
|
+
return node.map(extractTextFromReactNode).join('');
|
|
14
|
+
return '';
|
|
15
|
+
};
|
|
3
16
|
const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
|
|
4
17
|
const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
|
|
5
18
|
const generateSectionHref = (id) => `?section=${id}`;
|
|
6
19
|
|
|
20
|
+
exports.extractTextFromReactNode = extractTextFromReactNode;
|
|
7
21
|
exports.generateIdForBlogTitle = generateIdForBlogTitle;
|
|
8
22
|
exports.generateSectionHref = generateSectionHref;
|
|
9
23
|
exports.generateUrlForBlogTitle = generateUrlForBlogTitle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const extractTextFromReactNode = (node: ReactNode): string => {\n\tif (node === null || node === undefined || typeof node === 'boolean') return '';\n\tif (typeof node === 'string' || typeof node === 'number') return String(node);\n\tif (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);\n\tif (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');\n\treturn '';\n};\n\nexport const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":["isValidElement"],"mappings":";;;;AAGO,MAAM,wBAAwB,GAAG,CAAC,IAAe,KAAY;IACnE,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE;IAC/E,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IAC7E,IAAIA,oBAAc,CAAC,IAAI,CAAC;QAAE,OAAO,wBAAwB,CAAE,IAAI,CAAC,KAAkC,CAAC,QAAQ,CAAC;AAC5G,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E,IAAA,OAAO,EAAE;AACV;MAEa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;;;;"}
|
|
@@ -2,10 +2,10 @@
|
|
|
2
2
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
3
|
import { forwardRef, useRef, useImperativeHandle, useEffect, Children, isValidElement, cloneElement } from 'react';
|
|
4
4
|
import styles from '../styles/BlogSection.module.scss.js';
|
|
5
|
-
import { generateIdForBlogTitle, generateSectionHref } from '../utils/index.js';
|
|
5
|
+
import { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils/index.js';
|
|
6
6
|
|
|
7
7
|
const BlogSection = forwardRef(({ title = '', category = '', children = null }, forwardedReference) => {
|
|
8
|
-
const titleString = typeof title === 'string' ? title :
|
|
8
|
+
const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
|
|
9
9
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
10
10
|
const id = generateIdForBlogTitle(titleWithCategory);
|
|
11
11
|
const parentReference = useRef(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionDynamic.js","sources":["../../../src/dynamicComponents/BlogSectionDynamic.tsx"],"sourcesContent":["'use client';\n\nimport {\n\tChildren,\n\tcloneElement,\n\tforwardRef,\n\tisValidElement,\n\tuseEffect,\n\tuseImperativeHandle,\n\tuseRef,\n} from 'react';\n\nimport type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'react';\n\nimport styles from '../styles/BlogSection.module.scss';\n\nimport type { ForwardedReference } from './BlogDynamic';\nimport { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';\n\ninterface BlogProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSection = forwardRef<ForwardedReference, BlogProperties>(\n\t(\n\t\t{ title = '', category = '', children = null }: BlogProperties,\n\t\tforwardedReference\n\t) => {\n\t\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\t\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\t\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\t\tconst parentReference = useRef<ForwardedReference['parentRef']>(null);\n\t\tconst childReferences = useRef<ForwardedReference['childRefs']>([]);\n\t\tconst imperativeHandleRef = useRef<ForwardedReference | null>(null);\n\n\t\tuseImperativeHandle(forwardedReference, () => {\n\t\t\tconst handle = {\n\t\t\t\tparentRef: parentReference.current!,\n\t\t\t\tchildRefs: childReferences.current!,\n\t\t\t};\n\t\t\timperativeHandleRef.current = handle;\n\t\t\treturn handle;\n\t\t});\n\n\t\t// Re-register when title or category changes so the TOC reflects the updated heading\n\t\tuseEffect(() => {\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t}, [title, category]); // eslint-disable-line react-hooks/exhaustive-deps\n\n\t\tconst handleChildReferences = (element: ForwardedReference | null) => {\n\t\t\tif (!element) return;\n\t\t\tconst { parentRef: subParentReference } = element;\n\t\t\tif (!subParentReference) return;\n\n\t\t\t// Avoid registering the same child section twice\n\t\t\tconst alreadyRegistered = childReferences.current.some(\n\t\t\t\tref => ref.parentRef === subParentReference\n\t\t\t);\n\t\t\tif (!alreadyRegistered) {\n\t\t\t\tchildReferences.current.push(element);\n\t\t\t}\n\n\t\t\tif (\n\t\t\t\ttypeof forwardedReference === 'function' &&\n\t\t\t\timperativeHandleRef.current\n\t\t\t) {\n\t\t\t\tforwardedReference(imperativeHandleRef.current);\n\t\t\t}\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={styles['blog-section']}\n\t\t\t\tdata-title={titleString}\n\t\t\t\tdata-id={id}\n\t\t\t\tref={parentReference}\n\t\t\t>\n\t\t\t\t<h3\n\t\t\t\t\tclassName={`${styles['blog-section__title']} ${title ? '' : styles['blog-section__title--empty']}`}\n\t\t\t\t>\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<a\n\t\t\t\t\t\t\thref={generateSectionHref(id)}\n\t\t\t\t\t\t\tclassName={styles['blog-section__title-link']}\n\t\t\t\t\t\t\tonClick={e => e.preventDefault()}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</a>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<p>No title</p>\n\t\t\t\t\t)}\n\t\t\t\t</h3>\n\t\t\t\t{Children.map(children, child => {\n\t\t\t\t\tif (!isValidElement(child)) return child;\n\t\t\t\t\treturn cloneElement(child, {\n\t\t\t\t\t\tref: handleChildReferences,\n\t\t\t\t\t} as RefAttributes<ForwardedReference>);\n\t\t\t\t})}\n\t\t\t</div>\n\t\t);\n\t}\n);\n\nBlogSection.displayName = 'BlogSection';\n\nexport default BlogSection;\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import styles from '../styles/BlogSection.module.scss.js';
|
|
3
|
-
import { generateIdForBlogTitle } from '../utils/index.js';
|
|
3
|
+
import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils/index.js';
|
|
4
4
|
|
|
5
5
|
const BlogSectionStatic = ({ title = '', category = '', children = null, }) => {
|
|
6
|
-
const titleString = typeof title === 'string' ? title :
|
|
6
|
+
const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
|
|
7
7
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
8
8
|
const id = generateIdForBlogTitle(titleWithCategory);
|
|
9
9
|
return (jsxs("div", { className: styles['blog-section'], "data-title": titleString, "data-id": id, children: [title ? (jsx("h3", { className: styles['blog-section__title'], children: title })) : null, children] }));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title :
|
|
1
|
+
{"version":3,"file":"BlogSectionStatic.js","sources":["../../../src/staticComponents/BlogSectionStatic.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactElement, ReactNode } from 'react';\nimport styles from '../styles/BlogSection.module.scss';\nimport { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';\n\ninterface BlogSectionStaticProperties {\n\ttitle?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;\n\tcategory?: string;\n\tchildren?: ReactNode;\n}\n\nconst BlogSectionStatic = ({\n\ttitle = '',\n\tcategory = '',\n\tchildren = null,\n}: BlogSectionStaticProperties) => {\n\tconst titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);\n\tconst titleWithCategory = category ? `${category} - ${titleString}` : titleString;\n\tconst id = generateIdForBlogTitle(titleWithCategory);\n\n\treturn (\n\t\t<div className={styles['blog-section']} data-title={titleString} data-id={id}>\n\t\t\t{title ? (\n\t\t\t\t<h3 className={styles['blog-section__title']}>{title}</h3>\n\t\t\t) : null}\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\nexport default BlogSectionStatic;\n"],"names":["_jsxs","_jsx"],"mappings":";;;;AAUA,MAAM,iBAAiB,GAAG,CAAC,EAC1B,KAAK,GAAG,EAAE,EACV,QAAQ,GAAG,EAAE,EACb,QAAQ,GAAG,IAAI,GACc,KAAI;AACjC,IAAA,MAAM,WAAW,GAAG,OAAO,KAAK,KAAK,QAAQ,GAAG,KAAK,GAAG,wBAAwB,CAAC,KAAK,CAAC;AACvF,IAAA,MAAM,iBAAiB,GAAG,QAAQ,GAAG,CAAA,EAAG,QAAQ,CAAA,GAAA,EAAM,WAAW,CAAA,CAAE,GAAG,WAAW;AACjF,IAAA,MAAM,EAAE,GAAG,sBAAsB,CAAC,iBAAiB,CAAC;AAEpD,IAAA,QACCA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,EAAA,YAAA,EAAc,WAAW,aAAW,EAAE,EAAA,QAAA,EAAA,CAC1E,KAAK,IACLC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAE,MAAM,CAAC,qBAAqB,CAAC,YAAG,KAAK,EAAA,CAAM,IACvD,IAAI,EACP,QAAQ,CAAA,EAAA,CACJ;AAER;;;;"}
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -1,6 +1,19 @@
|
|
|
1
|
+
import { isValidElement } from 'react';
|
|
2
|
+
|
|
3
|
+
const extractTextFromReactNode = (node) => {
|
|
4
|
+
if (node === null || node === undefined || typeof node === 'boolean')
|
|
5
|
+
return '';
|
|
6
|
+
if (typeof node === 'string' || typeof node === 'number')
|
|
7
|
+
return String(node);
|
|
8
|
+
if (isValidElement(node))
|
|
9
|
+
return extractTextFromReactNode(node.props.children);
|
|
10
|
+
if (Array.isArray(node))
|
|
11
|
+
return node.map(extractTextFromReactNode).join('');
|
|
12
|
+
return '';
|
|
13
|
+
};
|
|
1
14
|
const generateIdForBlogTitle = (title) => title.toLowerCase().replace(/[^\w\d]/g, '-');
|
|
2
15
|
const generateUrlForBlogTitle = (title) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
|
|
3
16
|
const generateSectionHref = (id) => `?section=${id}`;
|
|
4
17
|
|
|
5
|
-
export { generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
|
|
18
|
+
export { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref, generateUrlForBlogTitle };
|
|
6
19
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/utils/index.ts"],"sourcesContent":["import { isValidElement } from 'react';\nimport type { ReactNode } from 'react';\n\nexport const extractTextFromReactNode = (node: ReactNode): string => {\n\tif (node === null || node === undefined || typeof node === 'boolean') return '';\n\tif (typeof node === 'string' || typeof node === 'number') return String(node);\n\tif (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);\n\tif (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');\n\treturn '';\n};\n\nexport const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\\w\\d]/g, '-');\n\nexport const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\\w]+/g, '-').toLowerCase());\n\nexport const generateSectionHref = (id: string) => `?section=${id}`;\n"],"names":[],"mappings":";;AAGO,MAAM,wBAAwB,GAAG,CAAC,IAAe,KAAY;IACnE,IAAI,IAAI,KAAK,IAAI,IAAI,IAAI,KAAK,SAAS,IAAI,OAAO,IAAI,KAAK,SAAS;AAAE,QAAA,OAAO,EAAE;IAC/E,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ;AAAE,QAAA,OAAO,MAAM,CAAC,IAAI,CAAC;IAC7E,IAAI,cAAc,CAAC,IAAI,CAAC;QAAE,OAAO,wBAAwB,CAAE,IAAI,CAAC,KAAkC,CAAC,QAAQ,CAAC;AAC5G,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;QAAE,OAAO,IAAI,CAAC,GAAG,CAAC,wBAAwB,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;AAC3E,IAAA,OAAO,EAAE;AACV;MAEa,sBAAsB,GAAG,CAAC,KAAa,KAAK,KAAK,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,GAAG;MAEvF,uBAAuB,GAAG,CAAC,KAAa,KAAK,kBAAkB,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,WAAW,EAAE;AAEjH,MAAM,mBAAmB,GAAG,CAAC,EAAU,KAAK,CAAA,SAAA,EAAY,EAAE,CAAA;;;;"}
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export declare const extractTextFromReactNode: (node: ReactNode) => string;
|
|
1
3
|
export declare const generateIdForBlogTitle: (title: string) => string;
|
|
2
4
|
export declare const generateUrlForBlogTitle: (title: string) => string;
|
|
3
5
|
export declare const generateSectionHref: (id: string) => string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,eAAO,MAAM,wBAAwB,GAAI,MAAM,SAAS,KAAG,MAM1D,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,MAAM,WAAiD,CAAC;AAEtG,eAAO,MAAM,uBAAuB,GAAI,OAAO,MAAM,WAAoE,CAAC;AAE1H,eAAO,MAAM,mBAAmB,GAAI,IAAI,MAAM,WAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.test.d.ts","sourceRoot":"","sources":["../../../src/utils/index.test.tsx"],"names":[],"mappings":""}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@san-siva/blogkit",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.32",
|
|
4
4
|
"description": "A reusable blog component library for React/Next.js applications with code highlighting, diagrams, and rich content features",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -24,6 +24,7 @@
|
|
|
24
24
|
"scripts": {
|
|
25
25
|
"build": "rollup -c && tsc --emitDeclarationOnly --outDir dist/types && cp -r src/assets dist/",
|
|
26
26
|
"dev": "rollup -c -w",
|
|
27
|
+
"test": "vitest run",
|
|
27
28
|
"lint": "tsc --noEmit",
|
|
28
29
|
"prepublishOnly": "npm ci && npm run lint && npm run build"
|
|
29
30
|
},
|
|
@@ -70,6 +71,7 @@
|
|
|
70
71
|
"rollup-plugin-url": "^3.0.1",
|
|
71
72
|
"sass": "^1.77.8",
|
|
72
73
|
"tslib": "^2.8.1",
|
|
73
|
-
"typescript": "^5.7.2"
|
|
74
|
+
"typescript": "^5.7.2",
|
|
75
|
+
"vitest": "^4.1.2"
|
|
74
76
|
}
|
|
75
77
|
}
|
|
@@ -15,7 +15,7 @@ import type { HTMLAttributes, ReactElement, ReactNode, RefAttributes } from 'rea
|
|
|
15
15
|
import styles from '../styles/BlogSection.module.scss';
|
|
16
16
|
|
|
17
17
|
import type { ForwardedReference } from './BlogDynamic';
|
|
18
|
-
import { generateIdForBlogTitle, generateSectionHref } from '../utils';
|
|
18
|
+
import { extractTextFromReactNode, generateIdForBlogTitle, generateSectionHref } from '../utils';
|
|
19
19
|
|
|
20
20
|
interface BlogProperties {
|
|
21
21
|
title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
|
|
@@ -28,7 +28,7 @@ const BlogSection = forwardRef<ForwardedReference, BlogProperties>(
|
|
|
28
28
|
{ title = '', category = '', children = null }: BlogProperties,
|
|
29
29
|
forwardedReference
|
|
30
30
|
) => {
|
|
31
|
-
const titleString = typeof title === 'string' ? title :
|
|
31
|
+
const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
|
|
32
32
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
33
33
|
const id = generateIdForBlogTitle(titleWithCategory);
|
|
34
34
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { HTMLAttributes, ReactElement, ReactNode } from 'react';
|
|
2
2
|
import styles from '../styles/BlogSection.module.scss';
|
|
3
|
-
import { generateIdForBlogTitle } from '../utils';
|
|
3
|
+
import { extractTextFromReactNode, generateIdForBlogTitle } from '../utils';
|
|
4
4
|
|
|
5
5
|
interface BlogSectionStaticProperties {
|
|
6
6
|
title?: string | ReactElement<HTMLAttributes<HTMLParagraphElement>, 'p'>;
|
|
@@ -13,7 +13,7 @@ const BlogSectionStatic = ({
|
|
|
13
13
|
category = '',
|
|
14
14
|
children = null,
|
|
15
15
|
}: BlogSectionStaticProperties) => {
|
|
16
|
-
const titleString = typeof title === 'string' ? title :
|
|
16
|
+
const titleString = typeof title === 'string' ? title : extractTextFromReactNode(title);
|
|
17
17
|
const titleWithCategory = category ? `${category} - ${titleString}` : titleString;
|
|
18
18
|
const id = generateIdForBlogTitle(titleWithCategory);
|
|
19
19
|
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { describe, expect, it } from 'vitest';
|
|
2
|
+
import { createElement } from 'react';
|
|
3
|
+
import { extractTextFromReactNode } from './index';
|
|
4
|
+
|
|
5
|
+
describe('extractTextFromReactNode', () => {
|
|
6
|
+
it('returns empty string for null', () => {
|
|
7
|
+
expect(extractTextFromReactNode(null)).toBe('');
|
|
8
|
+
});
|
|
9
|
+
|
|
10
|
+
it('returns empty string for undefined', () => {
|
|
11
|
+
expect(extractTextFromReactNode(undefined)).toBe('');
|
|
12
|
+
});
|
|
13
|
+
|
|
14
|
+
it('returns empty string for boolean', () => {
|
|
15
|
+
expect(extractTextFromReactNode(true)).toBe('');
|
|
16
|
+
expect(extractTextFromReactNode(false)).toBe('');
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
it('returns string as-is', () => {
|
|
20
|
+
expect(extractTextFromReactNode('Hello')).toBe('Hello');
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
it('converts number to string', () => {
|
|
24
|
+
expect(extractTextFromReactNode(42)).toBe('42');
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
it('extracts text from a simple element', () => {
|
|
28
|
+
const node = createElement('p', null, 'Section title');
|
|
29
|
+
expect(extractTextFromReactNode(node)).toBe('Section title');
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
it('extracts text from nested elements', () => {
|
|
33
|
+
const node = createElement('p', null,
|
|
34
|
+
'Hello ',
|
|
35
|
+
createElement('strong', null, 'world'),
|
|
36
|
+
);
|
|
37
|
+
expect(extractTextFromReactNode(node)).toBe('Hello world');
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
it('extracts text from deeply nested elements', () => {
|
|
41
|
+
const node = createElement('p', null,
|
|
42
|
+
createElement('em', null,
|
|
43
|
+
createElement('strong', null, 'deep'),
|
|
44
|
+
),
|
|
45
|
+
);
|
|
46
|
+
expect(extractTextFromReactNode(node)).toBe('deep');
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
it('extracts text from an array of nodes', () => {
|
|
50
|
+
const nodes = ['foo', ' ', createElement('span', null, 'bar')];
|
|
51
|
+
expect(extractTextFromReactNode(nodes)).toBe('foo bar');
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
it('handles mixed content with numbers and elements', () => {
|
|
55
|
+
const node = createElement('p', null, 'Step ', 3, ': done');
|
|
56
|
+
expect(extractTextFromReactNode(node)).toBe('Step 3: done');
|
|
57
|
+
});
|
|
58
|
+
|
|
59
|
+
it('returns empty string for element with no children', () => {
|
|
60
|
+
const node = createElement('p', null);
|
|
61
|
+
expect(extractTextFromReactNode(node)).toBe('');
|
|
62
|
+
});
|
|
63
|
+
});
|
package/src/utils/index.ts
CHANGED
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
import { isValidElement } from 'react';
|
|
2
|
+
import type { ReactNode } from 'react';
|
|
3
|
+
|
|
4
|
+
export const extractTextFromReactNode = (node: ReactNode): string => {
|
|
5
|
+
if (node === null || node === undefined || typeof node === 'boolean') return '';
|
|
6
|
+
if (typeof node === 'string' || typeof node === 'number') return String(node);
|
|
7
|
+
if (isValidElement(node)) return extractTextFromReactNode((node.props as { children?: ReactNode }).children);
|
|
8
|
+
if (Array.isArray(node)) return node.map(extractTextFromReactNode).join('');
|
|
9
|
+
return '';
|
|
10
|
+
};
|
|
11
|
+
|
|
1
12
|
export const generateIdForBlogTitle = (title: string) => title.toLowerCase().replace(/[^\w\d]/g, '-');
|
|
2
13
|
|
|
3
14
|
export const generateUrlForBlogTitle = (title: string) => encodeURIComponent(title.replace(/[^\w]+/g, '-').toLowerCase());
|