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

lazy load (#237)

Browse Source
This commit is contained in:
Philip Okugbe
2024-09-02 15:51:28 +01:00
committed by GitHub
parent 7fdd355cc3
commit 2b9765fb35
3 changed files with 65 additions and 39 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,15 +1,21 @@
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 MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
import classes from "./code-block.module.css";
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 MermaidView from "@/features/editor/components/code-block/mermaid-view.tsx";
import classes from './code-block.module.css';
import React from 'react';
import { Suspense } from 'react';
const MermaidView = React.lazy(
() => import('@/features/editor/components/code-block/mermaid-view.tsx')
);
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);
@ -24,9 +30,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]);
@ -47,7 +53,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}
/>
@ -55,12 +61,12 @@ export default function CodeBlockView(props: NodeViewProps) {
<CopyButton value={node?.textContent} timeout={2000}>
{({ copied, copy }) => (
<Tooltip
label={copied ? "Copied" : "Copy"}
label={copied ? 'Copied' : 'Copy'}
withArrow
position="right"
>
<ActionIcon
color={copied ? "teal" : "gray"}
color={copied ? 'teal' : 'gray'}
variant="subtle"
onClick={copy}
>
@ -74,15 +80,19 @@ 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" && <MermaidView props={props} />}
{language === 'mermaid' && (
<Suspense fallback={null}>
<MermaidView props={props} />
</Suspense>
)}
</NodeViewWrapper>
);
}