Browse Source

Add scroll option

Scroll option is for prose content featuring code blocks.
pull/1/head
TheoryOfNekomata 1 year ago
parent
commit
95cef92eee
2 changed files with 7 additions and 2 deletions
  1. +6
    -2
      packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx
  2. +1
    -0
      packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx

+ 6
- 2
packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx View File

@@ -10,6 +10,7 @@ export interface PrismProps extends Omit<React.HTMLProps<PrismDerivedElement>, '
lineNumbers?: boolean; lineNumbers?: boolean;
tabSize?: number; tabSize?: number;
header?: boolean; header?: boolean;
scroll?: boolean;
} }


export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
@@ -20,6 +21,7 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
className, className,
style, style,
header = false, header = false,
scroll = false,
...etcProps ...etcProps
}, forwardedRef) => { }, forwardedRef) => {
return ( return (
@@ -41,7 +43,7 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
type="submit" type="submit"
name="action" name="action"
value="copyContents" value="copyContents"
className="h-12 uppercase text-primary font-bold"
className="h-12 uppercase text-primary font-semi-expanded font-bold"
> >
Copy Copy
</button> </button>
@@ -67,7 +69,9 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
</code> </code>
</pre> </pre>
)} )}
<div className="flex-auto overflow-auto">
<div
className={clsx('flex-auto', scroll && 'overflow-auto')}
>
<RefractorCore <RefractorCore
{...etcProps} {...etcProps}
language={language} language={language}


+ 1
- 0
packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx View File

@@ -18,6 +18,7 @@ const BlogPostPage: NextPage = () => {
lineNumbers lineNumbers
header header
language="tsx" language="tsx"
scroll
code={`import {Refractor} from '@modal-soft/react-refractor'; code={`import {Refractor} from '@modal-soft/react-refractor';
import {NextPage} from 'next'; import {NextPage} from 'next';




Loading…
Cancel
Save