feat: add support for renderExtraFooter

simonguo · Apr 17, 2024 · 01f66d9 · 01f66d9
1 parent 18a3c85
commit 01f66d9
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -94,16 +94,19 @@ The source code is written in markdown, refer to [example.md](https://raw.github
 
 ### `<CodeView>`
 
-| Name           | Type                              | Default value           | Description                                                               |
-| -------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
-| afterCompile   | (code: string) => string          |                         | Executed after compiling the code                                         |
-| beforeCompile  | (code: string) => string          |                         | Executed before compiling the code                                        |
-| children       | any                               |                         | The code to be rendered is executed. Usually imported via markdown-loader |
-| dependencies   | object                            |                         | Dependent objects required by the executed code                           |
-| editable       | boolean                           | false                   | Renders a code editor that can modify the source code                     |
-| editor         | object                            |                         | Editor properties                                                         |
-| onChange       | (code?: string) => void           |                         | Callback triggered after code change                                      |
-| renderToolbar  | (buttons: ReactNode) => ReactNode |                         | Customize the rendering toolbar                                           |
-| sourceCode     | string                            |                         | The code to be rendered is executed                                       |
-| theme          | 'light' , 'dark'                  | 'light'                 | Code editor theme, applied to CodeMirror                                  |
-| compileOptions | object                            | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms                         |
+| Name              | Type                              | Default value           | Description                                                               |
+| ----------------- | --------------------------------- | ----------------------- | ------------------------------------------------------------------------- |
+| afterCompile      | (code: string) => string          |                         | Executed after compiling the code                                         |
+| beforeCompile     | (code: string) => string          |                         | Executed before compiling the code                                        |
+| children          | any                               |                         | The code to be rendered is executed. Usually imported via markdown-loader |
+| compileOptions    | object                            | defaultTransformOptions | https://github.com/alangpierce/sucrase#transforms                         |
+| dependencies      | object                            |                         | Dependent objects required by the executed code                           |
+| editable          | boolean                           | false                   | Renders a code editor that can modify the source code                     |
+| editor            | object                            |                         | Editor properties                                                         |
+| onChange          | (code?: string) => void           |                         | Callback triggered after code change                                      |
+| onCloseEditor     | () => void                        |                         | Callback triggered when the editor is closed                              |
+| onOpenEditor      | () => void                        |                         | Callback triggered when the editor is opened                              |
+| renderExtraFooter | () => ReactNode                   |                         | Customize the rendering footer                                            |
+| renderToolbar     | (buttons: ReactNode) => ReactNode |                         | Customize the rendering toolbar                                           |
+| sourceCode        | string                            |                         | The code to be rendered is executed                                       |
+| theme             | 'light' , 'dark'                  | 'light'                 | Code editor theme, applied to CodeMirror                                  |
diff --git a/docs/index.tsx b/docs/index.tsx
@@ -21,6 +21,15 @@ const App = () => {
         afterCompile={(code: string) => {
           return code.replace(/import\ [\*\w\,\{\}\ ]+\ from\ ?[\."'@/\w-]+;/gi, '');
         }}
+        onOpenEditor={() => {
+          console.log('open editor');
+        }}
+        onCloseEditor={() => {
+          console.log('close editor');
+        }}
+        renderExtraFooter={() => {
+          return <div>Footer</div>;
+        }}
       >
         {example}
       </CodeView>

diff --git a/src/CodeView.tsx b/src/CodeView.tsx
@@ -25,6 +25,9 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
     onChange,
     beforeCompile,
     afterCompile,
+    onOpenEditor,
+    onCloseEditor,
+    renderExtraFooter,
     ...rest
   } = props;
 
@@ -41,13 +44,16 @@ const CodeView = React.forwardRef((props: CodeViewProps, ref: React.Ref<HTMLDivE
               code={fragment.content}
               editable={editable}
               theme={theme}
+              editor={editor}
               dependencies={dependencies}
               transformOptions={transformOptions}
               renderToolbar={renderToolbar}
+              afterCompile={afterCompile}
               onChange={onChange}
+              onOpenEditor={onOpenEditor}
+              onCloseEditor={onCloseEditor}
               beforeCompile={beforeCompile}
-              afterCompile={afterCompile}
-              editor={editor}
+              renderExtraFooter={renderExtraFooter}
             />
           );
         } else if (fragment.type === 'html') {

diff --git a/src/Renderer.tsx b/src/Renderer.tsx
@@ -49,6 +49,18 @@ export interface RendererProps extends Omit<React.HTMLAttributes<HTMLElement>, '
   /** Customize the rendering toolbar */
   renderToolbar?: (buttons: React.ReactNode) => React.ReactNode;
 
+  /** Customize the rendering footer */
+  renderExtraFooter?: () => React.ReactNode;
+
+  /**
+   * Callback triggered when the editor is opened
+   */
+  onOpenEditor?: () => void;
+  /**
+   * Callback triggered when the editor is closed
+   */
+  onCloseEditor?: () => void;
+
   /** Callback triggered after code change */
   onChange?: (code?: string) => void;
 
@@ -71,6 +83,9 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
     code,
     copyCodeButtonAs,
     renderToolbar,
+    renderExtraFooter,
+    onOpenEditor,
+    onCloseEditor,
     onChange,
     beforeCompile,
     afterCompile,
@@ -91,7 +106,13 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
 
   const handleExpandEditor = useCallback(() => {
     setEditable(!editable);
-  }, [editable]);
+
+    if (editable) {
+      onCloseEditor?.();
+    } else if (!editable) {
+      onOpenEditor?.();
+    }
+  }, [editable, onCloseEditor, onOpenEditor]);
 
   const handleError = useCallback(error => {
     setErrorMessage(error.message);
@@ -183,6 +204,7 @@ const Renderer = React.forwardRef((props: RendererProps, ref: React.Ref<HTMLDivE
           code={code}
         />
       )}
+      {renderExtraFooter?.()}
     </div>
   );
 });