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;
tabSize?: number;
header?: boolean;
scroll?: boolean;
}

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



Loading…
Cancel
Save