From 48e0a830bbdce1fda488517156b2f3e0d8115eb8 Mon Sep 17 00:00:00 2001
From: vodkaslime <646329483@qq.com>
Date: Wed, 21 Feb 2024 22:05:20 +0800
Subject: [PATCH] feat: add useToggleCodeBlockButton hook to code-block package

---
 packages/code-block/src/hooks/index.ts         |  1 +
 .../src/hooks/useToggleCodeBlockButton.ts      | 18 ++++++++++++++++++
 .../plate-ui/fixed-toolbar-buttons.tsx         |  2 ++
 .../plate-ui/toggle-code-block-button.tsx      | 17 +++++++++++++++++
 4 files changed, 38 insertions(+)
 create mode 100644 packages/code-block/src/hooks/useToggleCodeBlockButton.ts
 create mode 100644 templates/plate-playground-template/src/components/plate-ui/toggle-code-block-button.tsx

diff --git a/packages/code-block/src/hooks/index.ts b/packages/code-block/src/hooks/index.ts
index d404baca04..cd933eac3f 100644
--- a/packages/code-block/src/hooks/index.ts
+++ b/packages/code-block/src/hooks/index.ts
@@ -5,3 +5,4 @@
 export * from './useCodeBlockCombobox';
 export * from './useCodeBlockElement';
 export * from './useCodeSyntaxLeaf';
+export * from './useToggleCodeBlockButton';
\ No newline at end of file
diff --git a/packages/code-block/src/hooks/useToggleCodeBlockButton.ts b/packages/code-block/src/hooks/useToggleCodeBlockButton.ts
new file mode 100644
index 0000000000..ac05be6111
--- /dev/null
+++ b/packages/code-block/src/hooks/useToggleCodeBlockButton.ts
@@ -0,0 +1,18 @@
+import React from 'react';
+import { useEditorRef } from '@udecode/plate-common';
+import { toggleCodeBlock } from '../transforms';
+
+export const useToggleCodeBlockButton = () => {
+  const editor = useEditorRef();
+
+  return {
+    props: {
+      onMouseDown: (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+      },
+      onClick: () => {
+        toggleCodeBlock(editor);
+      },
+    },
+  };
+};
diff --git a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
index 9daf9f87e4..1bd59e92c1 100644
--- a/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
+++ b/templates/plate-playground-template/src/components/plate-ui/fixed-toolbar-buttons.tsx
@@ -28,6 +28,7 @@ import { TableDropdownMenu } from '@/components/plate-ui/table-dropdown-menu';
 import { InsertDropdownMenu } from './insert-dropdown-menu';
 import { MarkToolbarButton } from './mark-toolbar-button';
 import { ModeDropdownMenu } from './mode-dropdown-menu';
+import { ToggleCodeBlockButton } from './toggle-code-block-button';
 import { ToolbarGroup } from './toolbar';
 import { TurnIntoDropdownMenu } from './turn-into-dropdown-menu';
 
@@ -72,6 +73,7 @@ export function FixedToolbarButtons() {
               <MarkToolbarButton tooltip="Code (⌘+E)" nodeType={MARK_CODE}>
                 <Icons.code />
               </MarkToolbarButton>
+              <ToggleCodeBlockButton />
             </ToolbarGroup>
 
             <ToolbarGroup>
diff --git a/templates/plate-playground-template/src/components/plate-ui/toggle-code-block-button.tsx b/templates/plate-playground-template/src/components/plate-ui/toggle-code-block-button.tsx
new file mode 100644
index 0000000000..a152cf0d49
--- /dev/null
+++ b/templates/plate-playground-template/src/components/plate-ui/toggle-code-block-button.tsx
@@ -0,0 +1,17 @@
+import { withRef } from '@udecode/cn';
+import { useToggleCodeBlockButton } from '@udecode/plate-code-block';
+
+import { Icons } from '../icons';
+import { ToolbarButton } from './toolbar';
+
+export const ToggleCodeBlockButton = withRef<typeof ToolbarButton>(
+  (rest, ref) => {
+    const { props } = useToggleCodeBlockButton();
+
+    return (
+      <ToolbarButton ref={ref} tooltip="Toggle Code Block" {...props} {...rest}>
+        <Icons.codeblock />
+      </ToolbarButton>
+    );
+  }
+);