Refactor copy button logic

KevinBatdorf · May 29, 2023 · dffdf2f · dffdf2f
1 parent a36fcdf
commit dffdf2f
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 33 deletions.
diff --git a/src/editor/components/ButtonsPanel.tsx b/src/editor/components/ButtonsPanel.tsx
@@ -8,21 +8,6 @@ export const ButtonsPanel = ({
     setAttributes,
 }: AttributesPropsAndSetter & { bringAttentionToThemes?: boolean }) => {
     const { updateThemeHistory } = useThemeStore();
-    const addOrRemoveButton = (button: string, value: boolean) => {
-        // [] attributes cause dirty posts (i guess) so this uses something like
-        // copy:download:etc instead of an array
-        const currentButtons = attributes.buttons.split(':');
-        const newButtons = value
-            ? [...new Set([...currentButtons, button])]
-            : currentButtons.filter((b) => b !== button);
-        const buttons = newButtons?.filter(Boolean).join(':');
-
-        updateThemeHistory({
-            ...attributes,
-            buttons,
-        });
-        setAttributes({ buttons });
-    };
     return (
         <PanelBody title={__('Buttons', 'code-block-pro')} initialOpen={false}>
             <BaseControl id="code-block-pro-show-copy-button">
@@ -33,8 +18,14 @@ export const ButtonsPanel = ({
                         'Adds a button to copy the code',
                         'code-block-pro',
                     )}
-                    checked={attributes.buttons?.split(':')?.includes('copy')}
-                    onChange={(value) => addOrRemoveButton('copy', value)}
+                    checked={attributes.copyButton}
+                    onChange={(value) => {
+                        setAttributes({ copyButton: value });
+                        updateThemeHistory({
+                            ...attributes,
+                            copyButton: value,
+                        });
+                    }}
                 />
             </BaseControl>
         </PanelBody>

diff --git a/src/editor/components/buttons/ButtonList.tsx b/src/editor/components/buttons/ButtonList.tsx
@@ -2,10 +2,6 @@ import { Attributes } from '../../../types';
 import { CopyButton } from './CopyButton';
 
 export const ButtonList = (props: Attributes) => {
-    const { buttons } = props;
-    const buttonList = buttons?.split(':') || [];
-    if (!buttonList.length) return null;
-    return buttonList.includes('copy') ? (
-        <CopyButton attributes={props} />
-    ) : null;
+    const { copyButton } = props;
+    return copyButton ? <CopyButton attributes={props} /> : null;
 };
diff --git a/src/hooks/useDefaults.ts b/src/hooks/useDefaults.ts
@@ -12,7 +12,7 @@ export const useDefaults = ({
         fontSize,
         fontFamily,
         lineHeight,
-        buttons,
+        copyButton,
         buttonTheme,
         headerType,
         footerType,
@@ -32,17 +32,17 @@ export const useDefaults = ({
         previousDisablePadding,
         previousLineNumbers,
         previousHighlightingHover,
-        previousButtons,
+        previousCopyButton,
         previousButtonTheme,
     } = useThemeStore();
     const ready = useThemeStoreReady();
     const once = useRef(false);
 
     useEffect(() => {
         if (once.current) return;
-        if (buttons !== undefined || previousButtons === undefined) return;
-        setAttributes({ buttons: previousButtons });
-    }, [previousButtons, setAttributes, buttons]);
+        if (copyButton !== undefined || !previousCopyButton) return;
+        setAttributes({ copyButton: previousCopyButton });
+    }, [previousCopyButton, copyButton, setAttributes]);
 
     useEffect(() => {
         if (once.current) return;

diff --git a/src/index.tsx b/src/index.tsx
@@ -64,7 +64,6 @@ registerBlockType<Attributes>(blockConfig.name, {
         renderType: { type: 'string', default: 'code' },
         label: { type: 'string', default: '' },
         copyButton: { type: 'boolean' },
-        buttons: { type: 'string' },
         buttonTheme: { type: 'string' },
         useDecodeURI: { type: 'boolean', default: false },
     },

diff --git a/src/state/theme.ts b/src/state/theme.ts
@@ -15,7 +15,7 @@ type ThemeType = {
     previousDisablePadding?: boolean;
     previousLineNumbers?: boolean;
     previousHighlightingHover?: boolean;
-    previousButtons: string;
+    previousCopyButton: boolean;
     previousButtonTheme: string;
     updateThemeHistory: (settings: Partial<Attributes>) => void;
 };
@@ -37,7 +37,7 @@ const defaultSettings = {
     previousDisablePadding: undefined,
     previousLineNumbers: undefined,
     previousHighlightingHover: undefined,
-    previousButtons: 'copy',
+    previousCopyButton: true,
     previousButtonTheme: 'heroicons',
 };
 const storage = {
@@ -83,7 +83,7 @@ export const useThemeStore = create<ThemeType>()(
                         previousDisablePadding: attributes.disablePadding,
                         previousLineNumbers: attributes.lineNumbers,
                         previousHighlightingHover: attributes.highlightingHover,
-                        previousButtons: attributes.buttons,
+                        previousCopyButton: attributes.copyButton,
                         previousButtonTheme: attributes.buttonTheme,
                     }));
                 },

diff --git a/src/types.ts b/src/types.ts
@@ -41,7 +41,6 @@ export type Attributes = {
     renderType: string;
     label: string;
     copyButton: boolean;
-    buttons: string;
     buttonTheme: string;
     useDecodeURI: boolean;
 };