Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: support copy button

Browse Source
This commit is contained in:
Kilu 2024-07-02 12:11:47 +08:00
parent df51cfda09
commit 9c68983ff3
8 changed files with 38 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/appflowy_web_app/src/assets/math.svg Normal file
View File

@ -0,0 +1,7 @@
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30"
style="width: 16px; height: 16px; display: block; fill: inherit; flex-shrink: 0; backface-visibility: hidden;"
width="30" height="30">
<path
d="M6.04883 27.3232C7.24219 27.3232 7.86426 26.4854 8.20703 25.3936L13.9834 6.79492H27.5039C28.2275 6.79492 28.7227 6.35059 28.7227 5.65234C28.7227 4.97949 28.2275 4.53516 27.5039 4.53516H13.958C12.6631 4.53516 12.0791 5.01758 11.7363 6.13477L6.18848 24.3525H5.97266L3.58594 15.9355C3.38281 15.2373 3.00195 14.9072 2.40527 14.9072C1.73242 14.9072 1.2373 15.3896 1.2373 16.0117C1.2373 16.2656 1.30078 16.4941 1.35156 16.6846L4.04297 25.5332C4.36035 26.5615 4.93164 27.3232 6.04883 27.3232ZM16.3955 24.7334C16.8652 24.7334 17.1064 24.5684 17.4619 24.0732L20.4707 19.8203H20.5215L23.5049 24.0732C23.873 24.5684 24.1143 24.7334 24.5713 24.7334C25.2061 24.7334 25.6758 24.3018 25.6758 23.7051C25.6758 23.4258 25.6123 23.1973 25.4219 22.9561L21.9307 18.208L25.4473 13.4346C25.6377 13.168 25.7139 12.9395 25.7139 12.6855C25.7139 12.127 25.2568 11.6953 24.6475 11.6953C24.2031 11.6953 23.9365 11.8477 23.6064 12.3174L20.7246 16.5957H20.6611L17.6904 12.3047C17.373 11.8477 17.0938 11.6953 16.624 11.6953C16.0146 11.6953 15.5068 12.165 15.5068 12.7363C15.5068 13.0537 15.583 13.2568 15.8115 13.5488L19.1504 18.1445L15.6084 23.0322C15.418 23.2861 15.3672 23.4639 15.3672 23.7559C15.3672 24.3018 15.8115 24.7334 16.3955 24.7334Z"
fill="currentColor"></path>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

2
frontend/appflowy_web_app/src/components/document/Document.tsx
View File

@ -23,7 +23,7 @@ export const Document = ({
...viewMeta
}: DocumentProps) => {
return (
<div className={'flex h-full w-full flex-col items-center justify-center'}>
<div className={'mb-10 flex h-full w-full flex-col items-center justify-center'}>
<ViewMetaPreview {...viewMeta} />
<Suspense fallback={<ComponentLoading />}>
<div className={'mx-16 w-[964px] min-w-0 max-w-full'}>

1
frontend/appflowy_web_app/src/components/editor/components/blocks/heading/Heading.tsx
View File

@ -17,6 +17,7 @@ export const Heading = memo(
id={`heading-${node.blockId}`}
style={{
scrollMarginTop: HEADER_HEIGHT,
...attributes.style,
}}
className={className}
>

8
frontend/appflowy_web_app/src/components/editor/components/blocks/heading/utils.ts
View File

@ -5,13 +5,13 @@ export function getHeadingCssProperty(level: number) {
case 2:
return 'text-[1.55rem] pt-[8px] max-md:pt-[1vw] pb-[2px] max-md:pb-[0.5vw] font-bold max-sm:text-[5vw]';
case 3:
return 'text-[1.25rem] pt-[4px] font-bold max-sm:text-[4vw]';
return 'text-[1.35rem] pt-[4px] font-bold max-sm:text-[4vw]';
case 4:
return 'text-[1rem] pt-[4px] font-bold';
return 'text-[1.25rem] pt-[4px] font-bold';
case 5:
return 'pt-[4px] font-bold';
return 'text-[1.15rem] pt-[4px] font-bold';
case 6:
return 'pt-[4px] font-bold';
return 'text-[1.05rem] pt-[4px] font-bold';
default:
return '';
}

2
frontend/appflowy_web_app/src/components/editor/components/blocks/image/ImageBlock.tsx
View File

@ -40,7 +40,7 @@ export const ImageBlock = memo(
setShowToolbar(true);
}}
onMouseLeave={() => setShowToolbar(false)}
className={`${className || ''} image-block cursor-default} relative w-full py-1`}
className={`${className || ''} image-block relative w-full cursor-default`}
>
<div ref={ref} className={'absolute left-0 top-0 h-full w-full select-none caret-transparent'}>
{children}

2
frontend/appflowy_web_app/src/components/editor/components/blocks/link-preview/LinkPreview.tsx
View File

@ -35,7 +35,7 @@ export const LinkPreview = memo(
}}
{...attributes}
ref={ref}
className={`link-preview-block relative w-full cursor-pointer`}
className={`link-preview-block relative w-full cursor-pointer py-1`}
>
<div>
{data ? (

28
frontend/appflowy_web_app/src/components/editor/components/blocks/math-equation/MathEquation.tsx
View File

@ -3,8 +3,8 @@ import { notify } from '@/components/_shared/notify';
import RightTopActionsToolbar from '@/components/editor/components/block-actions/RightTopActionsToolbar';
import { EditorElementProps, MathEquationNode } from '@/components/editor/editor.type';
import { copyTextToClipboard } from '@/utils/copy';
import { FunctionsOutlined } from '@mui/icons-material';
import React, { forwardRef, memo, useRef, useState } from 'react';
import { ReactComponent as MathSvg } from '@/assets/math.svg';
import React, { forwardRef, memo, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
export const MathEquation = memo(
@ -14,6 +14,18 @@ export const MathEquation = memo(
const { t } = useTranslation();
const containerRef = useRef<HTMLDivElement>(null);
const [showToolbar, setShowToolbar] = useState(false);
const newClassName = useMemo(() => {
const classList = [
className,
'math-equation-block relative w-full container-bg w-full py-1 select-none rounded',
];
if (formula) {
classList.push('border border-transparent hover:border-line-divider hover:bg-fill-list-active cursor-pointer');
}
return classList.join(' ');
}, [formula, className]);
return (
<>
@ -26,15 +38,17 @@ export const MathEquation = memo(
setShowToolbar(true);
}}
onMouseLeave={() => setShowToolbar(false)}
className={`${className} math-equation-block relative w-full ${
formula ? 'cursor-pointer' : 'cursor-default'
} container-bg w-full select-none rounded border border-transparent py-2 px-3 hover:border-line-divider hover:bg-fill-list-active`}
className={newClassName}
>
{formula ? (
<KatexMath latex={formula} />
) : (
<div className={'flex h-[48px] w-full items-center gap-[10px] text-text-caption'}>
<FunctionsOutlined />
<div
className={
'flex h-[48px] w-full items-center gap-[10px] rounded border border-line-divider bg-fill-list-active px-4 text-text-caption'
}
>
<MathSvg className={'h-4 w-4'} />
{t('document.plugins.mathEquation.addMathEquation')}
</div>
)}

4
frontend/appflowy_web_app/src/components/editor/components/blocks/quote/Quote.tsx
View File

@ -4,12 +4,12 @@ import React, { forwardRef, memo, useMemo } from 'react';
export const Quote = memo(
forwardRef<HTMLDivElement, EditorElementProps<QuoteNode>>(({ node: _, children, ...attributes }, ref) => {
const className = useMemo(() => {
return `flex w-full flex-col ml-3 border-l-[4px] border-fill-default pl-2 ${attributes.className ?? ''}`;
return `flex w-full flex-col pl-3 py-1 ${attributes.className ?? ''}`;
}, [attributes.className]);
return (
<div {...attributes} ref={ref} className={className}>
{children}
<span className={'w-full border-l-[4px] border-fill-default pl-2'}>{children}</span>
</div>
);
})