code syntax wrappers use tailwindcss

clean up new lines appearing in code syntax

site/src/components/topics/create-cta-context.tsx

@@ -39,7 +39,7 @@ const context = createCTAContext({
 export const Provider = context.Provider;
 export const useCTAHistoryContext = context.useCTAHistoryContext;
 export const useCTADispatchContext = context.useCTADispatchContext;
-				`}
+				`.trim()}
 			</CodeBlock>
 			<Content>
 				<div>

site/src/components/topics/create-cta.tsx

@@ -36,7 +36,7 @@ const ctaValue = createCTA({
 
 export history = ctaValue[0];
 export dispatch = ctaValue[1];
-				`}
+				`.trim()}
 			</CodeBlock>
 			<Content>
 				<div>

site/src/components/topics/return-cta-parameter.tsx

@@ -20,7 +20,7 @@ export const ctaParams = returnCTAParameter({
 		search: '',
 	},
 });
-				`}
+				`.trim()}
 			</CodeBlock>
 			<Content>
 				<div>

site/src/components/topics/use-cta/parameters/actions/UseCTAParameterActionsCustom.tsx

@@ -64,8 +64,8 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					Click to view
 					{' '}
 					<Code>useCTA</Code>
-					{' '}
-					<Code>custom actions</Code>
+					{' custom '}
+					<Code>actions</Code>
 					{' '}
 					example
 				</>}
@@ -153,7 +153,7 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					<li>
 						<article className={actionsClassName}>
 							<Code>
-								{` CustomCTAHistory.updateAction(
+								{`CustomCTAHistory.updateAction(
    Partial<CTAState>, 
    { useDefault?: boolean } | undefined, 
  )`}
@@ -177,10 +177,11 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					<li>
 						<article className={actionsClassName}>
 							<Code>
-								{` CustomCTAHistory.replaceAction(
+								{`
+CustomCTAHistory.replaceAction(
    CTAState, 
    { useDefault?: boolean } | undefined, 
- )`}
+ )`.trim()}
 							</Code>
 							<section>
 								<div>
@@ -201,10 +202,11 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					<li>
 						<article className={actionsClassName}>
 							<Code>
-								{` CustomCTAHistory.resetAction(
+								{`
+CustomCTAHistory.resetAction(
    CTAState | undefined, 
    { useDefault?: boolean } | undefined, 
- )`}
+ )`.trim()}
 							</Code>
 							<section>
 								<div>
@@ -225,10 +227,11 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					<li>
 						<article className={actionsClassName}>
 							<Code>
-								{` CustomCTAHistory.updateInitialAction(
+								{`
+CustomCTAHistory.updateInitialAction(
    Partial<CTAState> | undefined,
    { useDefault?: boolean } | undefined,
- )`}
+ )`.trim()}
 							</Code>
 							<section>
 								<div>
@@ -249,10 +252,12 @@ export default function UseCTAParameterActionsCustomTopic( props: SourceCodeReco
 					<li>
 						<article className={actionsClassName}>
 							<Code>
-								{` CustomCTAHistory.replaceInitialAction(
+								{
+									`CustomCTAHistory.replaceInitialAction(
    CTAState | undefined,
    { useDefault?: boolean } | undefined,
- )`}
+ )`.trim()
+								}
 							</Code>
 							<section>
 								<div>

site/src/components/topics/use-cta/parameters/actions/UseCTAParameterActionsOverridable.tsx

@@ -1,4 +1,5 @@
 import { SourceCodeRecordProps, } from '../../../../../types/source-code-record-props';
+import { useCTAParameterTransformConfig, } from '../../../../nav-sidebar/config/use-cta-config';
 
 import {
 	useCTAParameterActionsOverridableConfig,
@@ -29,6 +30,8 @@ export default function UseCTAParameterActionsOverridableTopic( props: SourceCod
 		<Sect {...useCTAParameterActionsOverridableConfig}>
 			<Content>
 				<i>Optional</i>
+				<p>Alternative to overriding built-in actions.</p>
+				<Anchor aria-label="Link to useCTA Parameter transform" href={useCTAParameterTransformConfig.href}>{useCTAParameterTransformConfig.desc}</Anchor>
 			</Content>
 			<CodeBlock copyButton={false}>{props.sourceCodeRecord.UseCTAParameterActionsOverridable}</CodeBlock>
 			<Content>

site/src/components/topics/use-cta/return/values-dispatch-cta.tsx

@@ -51,7 +51,7 @@ dispatch.cta.update( keyof CTAState, CTAState[keyof CTAState] );
 dispatch.cta.update( Partial<CTAState> );
 
 dispatch.cta.update( ( ctaHistory: CTAHistory<CTAState> ) => Partial<CTAState> | undefined );
-		`}
+		`.trim()}
 			</CodeBlock>
 			<Content>
 				<details>
@@ -68,7 +68,7 @@ dispatch( {
 	type: 'update',
 	payload: ( ctaHistory: CTAHistory<CTAState> ) => Partial<CTAState> | undefined
 } );
-				`}
+				`.trim()}
 					</CodeBlock>
 				</details>
 			</Content>
@@ -92,7 +92,7 @@ dispatch( {
 dispatch.cta.replace( CTAState );
 
 dispatch.cta.replace( ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined );
-		`}
+		`.trim()}
 			</CodeBlock>
 			<Content>
 				<details>
@@ -109,7 +109,7 @@ dispatch( {
 	type: 'replace',
 	payload: ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined
 } );
-				`}
+				`.trim()}
 					</CodeBlock>
 				</details>
 			</Content>
@@ -139,7 +139,7 @@ dispatch.cta.reset( CTAState );
 // sets the current state and initial state to what is returned from the callback
 // if the callback returns undefined, the state will not change
 dispatch.cta.reset( ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined );
-		`}
+		`.trim()}
 			</CodeBlock>
 			<Content>
 				<details>
@@ -163,8 +163,7 @@ dispatch( {
 dispatch( {
 	type: 'reset',
 	payload: ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined
-} );
-				`}
+} );`.trim()}
 					</CodeBlock>
 				</details>
 			</Content>
@@ -188,7 +187,7 @@ dispatch( {
 dispatch.cta.updateInitial( Partial<CTAState> );
 
 dispatch.cta.updateInitial( ( ctaHistory: CTAHistory<CTAState> ) => Partial<CTAState> | undefined );
-		`}
+		`.trim()}
 			</CodeBlock>
 			<Content>
 
@@ -206,7 +205,7 @@ dispatch( {
 	type: 'updateInitial',
 	payload: ( ctaHistory: CTAHistory<CTAState> ) => Partial<CTAState> | undefined
 } );
-				`}
+				`.trim()}
 					</CodeBlock>
 				</details>
 			</Content>
@@ -230,7 +229,7 @@ dispatch( {
 dispatch.cta.replaceInitial( CTAState );
 
 dispatch.cta.replaceInitial( ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined );
-				`}
+				`.trim()}
 			</CodeBlock>
 			<Content>
 				<details>
@@ -247,7 +246,7 @@ dispatch( {
 	type: 'replaceInitial',
 	payload: ( ctaHistory: CTAHistory<CTAState> ) => CTAState | undefined
 } );
-						`}
+						`.trim()}
 					</CodeBlock>
 				</details>
 			</Content>
@@ -276,7 +275,7 @@ dispatch.cta.YourCustomActionWithArgs(
 	Payload,
 	...any[] | undefined
  );
-	`}
+	`.trim()}
 			</CodeBlock>
 
 			<Content>
@@ -294,7 +293,7 @@ dispatch( {
 	payload: Payload,
 	args: any[] | undefined,
 } );
-				`}
+				`.trim()}
 					</CodeBlock>
 				</details>
 

site/src/components/ui/code.tsx

@@ -13,28 +13,32 @@ type CodeProps = {
 	lang?: string
 } & Omit<SyntaxHighlighterProps, 'language' | 'PreTag' | 'CodeTag'>;
 
-function CodeTag( props: PropsWithChildren<{ className: string
-	style: CSSProperties }>, ) {
+function CodeTag( props: PropsWithChildren<{
+	className: string
+	style: CSSProperties
+}>, ) {
 	const {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
 		style,
+		..._props
 	} = props;
 	return <code {...{
-		...props,
-		style: {
-			...style,
-			fontSize: 'inherit',
-			lineHeight: 'inherit',
-			whiteSpace: 'pre-wrap',
-			overflowWrap: 'break-word',
-		},
+		..._props,
+		className: `${props.className} whitespace-pre-wrap text-[#9cdcfe] [font-size:inherit] [line-height:inherit] hyphens-none overflow-hidden bg-[#1e1e1e] p-1 rounded-sm break-words`,
 	}} />;
 }
+function PreTag( props: PropsWithChildren<{
+	className: string
+	style: CSSProperties
+}>, ) {
+	return <>{props.children}</>;
+}
 
 export default function Code( props: CodeProps, ) {
 	const {
 		lang = 'typescript',
 	} = props;
-	return <SyntaxHighlighter style={vscDarkPlus} customStyle={customStyleDefault} PreTag="span" CodeTag={CodeTag} language={lang}>
+	return <SyntaxHighlighter style={vscDarkPlus} customStyle={customStyleDefault} PreTag={PreTag} CodeTag={CodeTag} language={lang}>
 		{props.children}
 	</SyntaxHighlighter>;
 }

site/src/components/ui/codeBlock/index.tsx

@@ -1,7 +1,30 @@
+import { CSSProperties, PropsWithChildren, } from 'react';
 import { Prism as SyntaxHighlighter, } from 'react-syntax-highlighter';
 import { vscDarkPlus, } from 'react-syntax-highlighter/dist/esm/styles/prism';
 import CodeBlockCopyButton from './codeBlockCopyButton';
 
+function PreTag( props: PropsWithChildren<{
+	className: string
+	style: CSSProperties
+}>, ) {
+	return <pre className={`${props.className} overflow-auto whitespace-pre rounded-sm bg-[#1e1e1e] px-2 py-4`}>{props.children}</pre>;
+}
+
+function CodeTag( props: PropsWithChildren<{
+	className: string
+	style: CSSProperties
+}>, ) {
+	const {
+		// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		style,
+		..._props
+	} = props;
+	return <code {...{
+		..._props,
+		className: `${props.className} text-[#9cdcfe] text-sm hyphens-none break-normal [direction:ltr]`,
+	}} />;
+}
+
 type CodeBlockProp = {
 	lang?: string
 	children: string
@@ -11,19 +34,26 @@ type CodeBlockProp = {
 
 export default function CodeBlock( props: CodeBlockProp, ) {
 	const {
-		lang = 'tsx',
+		lang = 'typescript',
 		children,
 		copyButton = false,
 		className = '',
 	} = props;
 	const code = children;
-	return <div className={`relative ${className}`}>
-		{copyButton && <CodeBlockCopyButton code={code} />}
-		<SyntaxHighlighter
-			language={lang}
-			style={vscDarkPlus}
-		>
-			{code}
-		</SyntaxHighlighter>
-	</div>;
+	const codeBlock = <SyntaxHighlighter
+		language={lang}
+		style={vscDarkPlus}
+		PreTag={PreTag}
+		CodeTag={CodeTag}
+	>
+		{code}
+	</SyntaxHighlighter>;
+	if ( copyButton ) {
+		return <div className={`relative ${className}`}>
+			<CodeBlockCopyButton code={code} />
+			{codeBlock}
+		</div>;
+	}
+
+	return codeBlock;
 }