From 33ddd921988a2476cc0fc3182871c3209c6bb140 Mon Sep 17 00:00:00 2001
From: Philip Okugbe <16838612+Philipinho@users.noreply.github.com>
Date: Thu, 6 Feb 2025 17:43:31 +0000
Subject: [PATCH] * fix codeblock tab-size (#703)

* hide codeblock menu group during printing
---
 .../components/code-block/code-block-view.tsx | 40 ++++++++++---------
 .../code-block/code-block.module.css          |  6 +++
 .../src/features/editor/styles/code.css       |  1 +
 3 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/apps/client/src/features/editor/components/code-block/code-block-view.tsx b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
index ba25110c..07ad2ad0 100644
--- a/apps/client/src/features/editor/components/code-block/code-block-view.tsx
+++ b/apps/client/src/features/editor/components/code-block/code-block-view.tsx
@@ -1,14 +1,14 @@
-import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '@tiptap/react';
-import { ActionIcon, CopyButton, Group, Select, Tooltip } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { IconCheck, IconCopy } from '@tabler/icons-react';
-import classes from './code-block.module.css';
-import React from 'react';
-import { Suspense } from 'react';
+import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
+import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
+import { useEffect, useState } from "react";
+import { IconCheck, IconCopy } from "@tabler/icons-react";
+import classes from "./code-block.module.css";
+import React from "react";
+import { Suspense } from "react";
 import { useTranslation } from "react-i18next";
 
 const MermaidView = React.lazy(
-  () => import('@/features/editor/components/code-block/mermaid-view.tsx')
+  () => import("@/features/editor/components/code-block/mermaid-view.tsx"),
 );
 
 export default function CodeBlockView(props: NodeViewProps) {
@@ -16,7 +16,7 @@ export default function CodeBlockView(props: NodeViewProps) {
   const { node, updateAttributes, extension, editor, getPos } = props;
   const { language } = node.attrs;
   const [languageValue, setLanguageValue] = useState<string | null>(
-    language || null
+    language || null,
   );
   const [isSelected, setIsSelected] = useState(false);
 
@@ -31,9 +31,9 @@ export default function CodeBlockView(props: NodeViewProps) {
       setIsSelected(isNodeSelected);
     };
 
-    editor.on('selectionUpdate', updateSelection);
+    editor.on("selectionUpdate", updateSelection);
     return () => {
-      editor.off('selectionUpdate', updateSelection);
+      editor.off("selectionUpdate", updateSelection);
     };
   }, [editor, getPos(), node.nodeSize]);
 
@@ -46,7 +46,11 @@ export default function CodeBlockView(props: NodeViewProps) {
 
   return (
     <NodeViewWrapper className="codeBlock">
-      <Group justify="flex-end" contentEditable={false}>
+      <Group
+        justify="flex-end"
+        contentEditable={false}
+        className={classes.menuGroup}
+      >
         <Select
           placeholder="auto"
           checkIconPosition="right"
@@ -54,7 +58,7 @@ export default function CodeBlockView(props: NodeViewProps) {
           value={languageValue}
           onChange={changeLanguage}
           searchable
-          style={{ maxWidth: '130px' }}
+          style={{ maxWidth: "130px" }}
           classNames={{ input: classes.selectInput }}
           disabled={!editor.isEditable}
         />
@@ -62,12 +66,12 @@ export default function CodeBlockView(props: NodeViewProps) {
         <CopyButton value={node?.textContent} timeout={2000}>
           {({ copied, copy }) => (
             <Tooltip
-              label={copied ? t('Copied') : t('Copy')}
+              label={copied ? t("Copied") : t("Copy")}
               withArrow
               position="right"
             >
               <ActionIcon
-                color={copied ? 'teal' : 'gray'}
+                color={copied ? "teal" : "gray"}
                 variant="subtle"
                 onClick={copy}
               >
@@ -81,15 +85,15 @@ export default function CodeBlockView(props: NodeViewProps) {
       <pre
         spellCheck="false"
         hidden={
-          ((language === 'mermaid' && !editor.isEditable) ||
-            (language === 'mermaid' && !isSelected)) &&
+          ((language === "mermaid" && !editor.isEditable) ||
+            (language === "mermaid" && !isSelected)) &&
           node.textContent.length > 0
         }
       >
         <NodeViewContent as="code" className={`language-${language}`} />
       </pre>
 
-      {language === 'mermaid' && (
+      {language === "mermaid" && (
         <Suspense fallback={null}>
           <MermaidView props={props} />
         </Suspense>
diff --git a/apps/client/src/features/editor/components/code-block/code-block.module.css b/apps/client/src/features/editor/components/code-block/code-block.module.css
index c545e298..6e0a5dd3 100644
--- a/apps/client/src/features/editor/components/code-block/code-block.module.css
+++ b/apps/client/src/features/editor/components/code-block/code-block.module.css
@@ -16,3 +16,9 @@
     align-items: center;
     justify-content: center;
 }
+
+.menuGroup {
+    @media print {
+        display: none;
+    }
+}
diff --git a/apps/client/src/features/editor/styles/code.css b/apps/client/src/features/editor/styles/code.css
index b8be3521..d30fd4e9 100644
--- a/apps/client/src/features/editor/styles/code.css
+++ b/apps/client/src/features/editor/styles/code.css
@@ -10,6 +10,7 @@
     margin: 4px;
     font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
     border-radius: var(--mantine-radius-default);
+    tab-size: 4;
 
     @mixin light {
       background-color: var(--mantine-color-gray-0);