Ryan/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2025-11-13 08:32:38 +10:00
Code Issues Packages Projects Releases Wiki Activity

* fix codeblock tab-size (#703)

Browse Source 
* hide codeblock menu group during printing
This commit is contained in:
Philip Okugbe
2025-02-06 17:43:31 +00:00
committed by GitHub
parent 54e8d60840
commit 33ddd92198
3 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/client/src/features/editor/components/code-block/code-block-view.tsx
View File

@ -1,14 +1,14 @@
import { NodeViewContent, NodeViewProps, NodeViewWrapper } from '@tiptap/react'; import { NodeViewContent, NodeViewProps, NodeViewWrapper } from "@tiptap/react";
import { ActionIcon, CopyButton, Group, Select, Tooltip } from '@mantine/core'; import { ActionIcon, CopyButton, Group, Select, Tooltip } from "@mantine/core";
import { useEffect, useState } from 'react'; import { useEffect, useState } from "react";
import { IconCheck, IconCopy } from '@tabler/icons-react'; import { IconCheck, IconCopy } from "@tabler/icons-react";
import classes from './code-block.module.css'; import classes from "./code-block.module.css";
import React from 'react'; import React from "react";
import { Suspense } from 'react'; import { Suspense } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
const MermaidView = React.lazy( 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) { export default function CodeBlockView(props: NodeViewProps) {
@ -16,7 +16,7 @@ export default function CodeBlockView(props: NodeViewProps) {
const { node, updateAttributes, extension, editor, getPos } = props; const { node, updateAttributes, extension, editor, getPos } = props;
const { language } = node.attrs; const { language } = node.attrs;
const [languageValue, setLanguageValue] = useState<string | null>( const [languageValue, setLanguageValue] = useState<string | null>(
language || null language || null,
); );
const [isSelected, setIsSelected] = useState(false); const [isSelected, setIsSelected] = useState(false);
@ -31,9 +31,9 @@ export default function CodeBlockView(props: NodeViewProps) {
setIsSelected(isNodeSelected); setIsSelected(isNodeSelected);
}; };
editor.on('selectionUpdate', updateSelection); editor.on("selectionUpdate", updateSelection);
return () => { return () => {
editor.off('selectionUpdate', updateSelection); editor.off("selectionUpdate", updateSelection);
}; };
}, [editor, getPos(), node.nodeSize]); }, [editor, getPos(), node.nodeSize]);
@ -46,7 +46,11 @@ export default function CodeBlockView(props: NodeViewProps) {
return ( return (
<NodeViewWrapper className="codeBlock"> <NodeViewWrapper className="codeBlock">
<Group justify="flex-end" contentEditable={false}> <Group
justify="flex-end"
contentEditable={false}
className={classes.menuGroup}
>
<Select <Select
placeholder="auto" placeholder="auto"
checkIconPosition="right" checkIconPosition="right"
@ -54,7 +58,7 @@ export default function CodeBlockView(props: NodeViewProps) {
value={languageValue} value={languageValue}
onChange={changeLanguage} onChange={changeLanguage}
searchable searchable
style={{ maxWidth: '130px' }} style={{ maxWidth: "130px" }}
classNames={{ input: classes.selectInput }} classNames={{ input: classes.selectInput }}
disabled={!editor.isEditable} disabled={!editor.isEditable}
/> />
@ -62,12 +66,12 @@ export default function CodeBlockView(props: NodeViewProps) {
<CopyButton value={node?.textContent} timeout={2000}> <CopyButton value={node?.textContent} timeout={2000}>
{({ copied, copy }) => ( {({ copied, copy }) => (
<Tooltip <Tooltip
label={copied ? t('Copied') : t('Copy')} label={copied ? t("Copied") : t("Copy")}
withArrow withArrow
position="right" position="right"
> >
<ActionIcon <ActionIcon
color={copied ? 'teal' : 'gray'} color={copied ? "teal" : "gray"}
variant="subtle" variant="subtle"
onClick={copy} onClick={copy}
> >
@ -81,15 +85,15 @@ export default function CodeBlockView(props: NodeViewProps) {
<pre <pre
spellCheck="false" spellCheck="false"
hidden={ hidden={
((language === 'mermaid' && !editor.isEditable) || ((language === "mermaid" && !editor.isEditable) ||
(language === 'mermaid' && !isSelected)) && (language === "mermaid" && !isSelected)) &&
node.textContent.length > 0 node.textContent.length > 0
} }
> >
<NodeViewContent as="code" className={`language-${language}`} /> <NodeViewContent as="code" className={`language-${language}`} />
</pre> </pre>
{language === 'mermaid' && ( {language === "mermaid" && (
<Suspense fallback={null}> <Suspense fallback={null}>
<MermaidView props={props} /> <MermaidView props={props} />
</Suspense> </Suspense>

6
apps/client/src/features/editor/components/code-block/code-block.module.css
View File

@ -16,3 +16,9 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.menuGroup {
@media print {
display: none;
}
}

1
apps/client/src/features/editor/styles/code.css
View File

@ -10,6 +10,7 @@
margin: 4px; margin: 4px;
font-family: "JetBrainsMono", var(--mantine-font-family-monospace); font-family: "JetBrainsMono", var(--mantine-font-family-monospace);
border-radius: var(--mantine-radius-default); border-radius: var(--mantine-radius-default);
tab-size: 4;
@mixin light { @mixin light {
background-color: var(--mantine-color-gray-0); background-color: var(--mantine-color-gray-0);