feat: add useToggleCodeBlockButton hook to code-block package

packages/code-block/src/hooks/index.ts

@@ -5,3 +5,4 @@
 export * from './useCodeBlockCombobox';
 export * from './useCodeBlockElement';
 export * from './useCodeSyntaxLeaf';
+export * from './useToggleCodeBlockButton';

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);
+      },
+    },
+  };
+};

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>

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>
+    );
+  }
+);