2024-01-09 22:51:55 +08:00
|
|
|
import type { ComponentProps, FC } from 'react';
|
2023-10-23 22:49:49 +08:00
|
|
|
import React, { useEffect, useState } from 'react';
|
|
|
|
import { EditFilled } from '@ant-design/icons';
|
|
|
|
import { Tooltip } from 'antd';
|
2024-01-09 22:51:55 +08:00
|
|
|
import { createStyles } from 'antd-style';
|
|
|
|
import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor';
|
|
|
|
|
2023-10-23 22:49:49 +08:00
|
|
|
import useLocale from '../../hooks/useLocale';
|
2024-01-09 22:51:55 +08:00
|
|
|
import LiveError from '../slots/LiveError';
|
2023-10-23 22:49:49 +08:00
|
|
|
|
|
|
|
const useStyle = createStyles(({ token, css }) => {
|
|
|
|
const { colorPrimaryBorder, colorIcon, colorPrimary } = token;
|
|
|
|
|
|
|
|
return {
|
|
|
|
editor: css`
|
|
|
|
.npm__react-simple-code-editor__textarea {
|
|
|
|
outline: none;
|
|
|
|
|
|
|
|
&:hover {
|
2023-11-02 19:33:00 +08:00
|
|
|
box-shadow: inset 0 0 0 1px ${colorPrimaryBorder} !important;
|
2023-10-23 22:49:49 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
2023-11-02 19:33:00 +08:00
|
|
|
box-shadow: inset 0 0 0 1px ${colorPrimary} !important;
|
2023-10-23 22:49:49 +08:00
|
|
|
}
|
|
|
|
}
|
2024-01-09 22:51:55 +08:00
|
|
|
|
|
|
|
// override dumi editor styles
|
|
|
|
.dumi-default-source-code-editor {
|
|
|
|
.dumi-default-source-code > pre,
|
|
|
|
.dumi-default-source-code-editor-textarea {
|
|
|
|
padding: 12px 16px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.dumi-default-source-code > pre {
|
|
|
|
font-size: 13px;
|
|
|
|
line-height: 2;
|
|
|
|
font-family: 'Lucida Console', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
|
|
|
}
|
|
|
|
|
|
|
|
// disable dumi default copy button
|
|
|
|
.dumi-default-source-code-copy {
|
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-textarea:hover {
|
|
|
|
box-shadow: 0 0 0 1px ${token.colorPrimaryBorderHover} inset;
|
|
|
|
}
|
|
|
|
|
|
|
|
&-textarea:focus {
|
|
|
|
box-shadow: 0 0 0 1px ${token.colorPrimary} inset;
|
|
|
|
}
|
|
|
|
}
|
2023-10-23 22:49:49 +08:00
|
|
|
`,
|
|
|
|
|
|
|
|
editableIcon: css`
|
|
|
|
position: absolute;
|
2024-01-09 22:51:55 +08:00
|
|
|
z-index: 2;
|
2023-10-23 22:49:49 +08:00
|
|
|
height: 32px;
|
|
|
|
width: 32px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
top: 16px;
|
|
|
|
inset-inline-end: 56px;
|
|
|
|
color: ${colorIcon};
|
|
|
|
`,
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
const locales = {
|
|
|
|
cn: {
|
|
|
|
demoEditable: '编辑 Demo 可实时预览',
|
|
|
|
},
|
|
|
|
en: {
|
|
|
|
demoEditable: 'Edit demo with real-time preview',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip';
|
|
|
|
|
2024-01-23 13:30:15 +08:00
|
|
|
const LiveCode: FC<
|
|
|
|
{
|
|
|
|
error: Error | null;
|
|
|
|
} & Pick<ComponentProps<typeof SourceCodeEditor>, 'lang' | 'initialValue' | 'onChange'>
|
|
|
|
> = (props) => {
|
2023-10-23 22:49:49 +08:00
|
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { styles } = useStyle();
|
|
|
|
const [locale] = useLocale(locales);
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP);
|
|
|
|
if (shouldOpen) {
|
|
|
|
setOpen(true);
|
|
|
|
}
|
|
|
|
}, []);
|
|
|
|
|
|
|
|
const handleOpenChange = (newOpen: boolean) => {
|
|
|
|
setOpen(newOpen);
|
|
|
|
if (!newOpen) {
|
|
|
|
localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true');
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<div className={styles.editor}>
|
2024-01-09 22:51:55 +08:00
|
|
|
<SourceCodeEditor
|
|
|
|
lang={props.lang}
|
|
|
|
initialValue={props.initialValue}
|
2024-01-23 13:30:15 +08:00
|
|
|
onChange={props.onChange}
|
2024-01-09 22:51:55 +08:00
|
|
|
/>
|
2024-01-23 13:30:15 +08:00
|
|
|
<LiveError error={props.error} />
|
2023-10-23 22:49:49 +08:00
|
|
|
</div>
|
|
|
|
<Tooltip title={locale.demoEditable} open={open} onOpenChange={handleOpenChange}>
|
|
|
|
<EditFilled className={styles.editableIcon} />
|
|
|
|
</Tooltip>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default LiveCode;
|