mirror of
https://github.com/jaywcjlove/wxmp.git
synced 2026-01-12 00:08:50 +08:00
51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
import React from 'react';
|
||
import { ICommand, IMarkdownEditor, ToolBarProps } from '@uiw/react-markdown-editor';
|
||
import toast from 'react-hot-toast';
|
||
import styled from 'styled-components';
|
||
|
||
const Button = styled.button`
|
||
/* white-space: nowrap;
|
||
width: initial !important;
|
||
display: flex;
|
||
align-items: center; */
|
||
`;
|
||
|
||
const CopyView: React.FC<{ command: ICommand; editorProps: IMarkdownEditor & ToolBarProps }> = (props) => {
|
||
const { editorProps } = props;
|
||
const handleClick = () => {
|
||
const dom: HTMLDivElement | null = editorProps.preview.current;
|
||
if (!dom) {
|
||
toast.error(<div>dom is null</div>);
|
||
return;
|
||
}
|
||
dom.focus();
|
||
const htmlContent = dom.innerHTML;
|
||
navigator.clipboard
|
||
.writeText(htmlContent)
|
||
.then(() => {
|
||
toast.success(<div>复制成功！去公众号编辑器粘贴吧！</div>);
|
||
})
|
||
.catch((err) => {
|
||
toast.error(<div>{JSON.stringify(err)}</div>);
|
||
console.error('Failed to copy: ', err);
|
||
});
|
||
};
|
||
return (
|
||
<Button type="button" onClick={handleClick}>
|
||
{props.command.icon}
|
||
</Button>
|
||
);
|
||
};
|
||
|
||
export const copy: ICommand = {
|
||
name: 'copy',
|
||
keyCommand: 'copy',
|
||
button: (command, props, opts) => <CopyView command={command} editorProps={{ ...props, ...opts }} />,
|
||
icon: (
|
||
<svg fill="currentColor" viewBox="0 0 24 24" height="16" width="16">
|
||
<path d="M20 2H10a2 2 0 0 0-2 2v2h8a2 2 0 0 1 2 2v8h2a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z" />
|
||
<path d="M4 22h10c1.103 0 2-.897 2-2V10c0-1.103-.897-2-2-2H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2zm2-10h6v2H6v-2zm0 4h6v2H6v-2z" />
|
||
</svg>
|
||
),
|
||
};
|