From d70f44991f10e4495ad802ca1139b510bff8d9bf Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Sat, 1 Jul 2023 12:08:55 +0800
Subject: [PATCH] Extract actions out of react-refractor

Use actions externally.
---
 .../src/packages/react-refractor/index.tsx    | 22 ++-------------
 .../src/pages/examples/blog-post/index.tsx    | 28 +++++++++++--------
 2 files changed, 19 insertions(+), 31 deletions(-)

diff --git a/packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx b/packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx
index 7d2d3de..282cccc 100644
--- a/packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/packages/react-refractor/index.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import RefractorCore from 'react-refractor/all';
 import styles from './style.module.css';
-import {getFormValues} from '@theoryofnekomata/formxtra';
 import {Marker} from 'react-refractor';
 
 type PrismDerivedElement = HTMLDivElement;
@@ -30,20 +29,6 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
   markers = [],
   ...etcProps
 }, forwardedRef) => {
-  const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
-    e.preventDefault();
-    const { currentTarget, nativeEvent } = e;
-    const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
-    const { action } = getFormValues(currentTarget, { submitter });
-    switch (action) {
-      case 'copyContents':
-        console.log('copy contents');
-        break;
-      default:
-        break;
-    }
-  }, []);
-
   const code = codeRaw.trim();
 
   return (
@@ -58,11 +43,8 @@ export const Refractor = React.forwardRef<PrismDerivedElement, PrismProps>(({
           <div className={styles['language']}>
             {language}
           </div>
-          <form
-            onSubmit={handleAction}
-          >
-            {actions}
-          </form>
+          {actions}
+
         </div>
       )}
       <div
diff --git a/packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx b/packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx
index eba4a4e..1fc77ef 100644
--- a/packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx
+++ b/packages/web-kitchensink-reactnext/src/pages/examples/blog-post/index.tsx
@@ -1,8 +1,23 @@
 import {Refractor} from '@modal-soft/react-refractor';
 import {NextPage} from 'next';
 import * as React from 'react';
+import {getFormValues} from '@theoryofnekomata/formxtra';
 
 const BlogPostPage: NextPage = () => {
+  const handleAction: React.FormEventHandler<HTMLFormElement> = React.useCallback((e) => {
+    e.preventDefault();
+    const { currentTarget, nativeEvent } = e;
+    const { submitter } = nativeEvent as unknown as { submitter: HTMLButtonElement };
+    const { action } = getFormValues(currentTarget, { submitter });
+    switch (action) {
+    case 'copyContents':
+      console.log('copy contents');
+      break;
+    default:
+      break;
+    }
+  }, []);
+
   return (
     <>
       <div className="container mx-auto px-4">
@@ -13,7 +28,7 @@ const BlogPostPage: NextPage = () => {
           Use <code>@modal-soft/react-refractor</code> as follows on your page:
         </p>
       </div>
-      <div className="bg-shade/20 overflow-auto pt-4 pb-8">
+      <div className="bg-shade/20 overflow-auto pt-4 pb-8 text-sm">
         <div className="container mx-auto px-4">
           <Refractor
             lineNumbers
@@ -21,16 +36,7 @@ const BlogPostPage: NextPage = () => {
             language="tsx"
             scroll
             actions={
-              <>
-                <button
-                  type="submit"
-                  name="action"
-                  value="copyContents"
-                  className="h-12 uppercase text-primary font-semi-expanded font-bold"
-                >
-                  Copy
-                </button>
-              </>
+              <></>
             }
             code={`import {Refractor} from '@modal-soft/react-refractor';
 import {NextPage} from 'next';