mirror of https://github.com/fantasticit/think.git
feat: improve editor
This commit is contained in:
parent
503e4c5b57
commit
edd964ab5f
|
@ -5,12 +5,11 @@ const config = getConfig().client;
|
||||||
|
|
||||||
/** @type {import('next').NextConfig} */
|
/** @type {import('next').NextConfig} */
|
||||||
const nextConfig = semi({
|
const nextConfig = semi({
|
||||||
reactStrictMode: true,
|
|
||||||
assetPrefix: config.assetPrefix,
|
assetPrefix: config.assetPrefix,
|
||||||
env: {
|
env: {
|
||||||
SERVER_API_URL: config.apiUrl,
|
SERVER_API_URL: config.apiUrl,
|
||||||
COLLABORATION_API_URL: config.collaborationUrl,
|
COLLABORATION_API_URL: config.collaborationUrl,
|
||||||
ENABLE_ALIYUN_OSS: config?.oss?.aliyun?.accessKeyId,
|
ENABLE_ALIYUN_OSS: !!config?.oss?.aliyun?.accessKeyId,
|
||||||
},
|
},
|
||||||
webpack: (config, { dev, isServer }) => {
|
webpack: (config, { dev, isServer }) => {
|
||||||
config.resolve.plugins.push(new TsconfigPathsPlugin());
|
config.resolve.plugins.push(new TsconfigPathsPlugin());
|
||||||
|
|
|
@ -22,15 +22,15 @@ export const CreateUser: React.FC<{ document: IDocument; container: () => HTMLEl
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Space>
|
<Space>
|
||||||
<Avatar size="extra-extra-small" src={document.createUser && document.createUser.avatar}>
|
<Avatar size="small" src={document.createUser && document.createUser.avatar}>
|
||||||
<IconUser />
|
<IconUser />
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div>
|
<div>
|
||||||
<p>
|
<p style={{ margin: 0 }}>
|
||||||
创建者:
|
创建者:
|
||||||
{document.createUser && document.createUser.name}
|
{document.createUser && document.createUser.name}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p style={{ margin: '8px 0 0' }}>
|
||||||
最近更新日期:
|
最近更新日期:
|
||||||
<LocaleTime date={document.updatedAt} timeago />
|
<LocaleTime date={document.updatedAt} timeago />
|
||||||
{' ⦁ '}阅读量:
|
{' ⦁ '}阅读量:
|
||||||
|
|
|
@ -0,0 +1,17 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconTableHeaderCell: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||||
|
<path
|
||||||
|
d="M128 266.666667A138.666667 138.666667 0 0 1 266.666667 128h490.666666A138.666667 138.666667 0 0 1 896 266.666667v490.666666A138.666667 138.666667 0 0 1 757.333333 896H266.666667A138.666667 138.666667 0 0 1 128 757.333333V266.666667zM266.666667 192A74.666667 74.666667 0 0 0 192 266.666667V362.666667h170.666667v-170.666667H266.666667zM192 426.666667h170.666667v170.666666h-170.666667v-170.666666z m234.666667 0v170.666666h170.666666v-170.666666h-170.666666z m234.666666 0v170.666666h170.666667v-170.666666h-170.666667zM597.333333 661.333333h-170.666666v170.666667h170.666666v-170.666667z m64 170.666667v-170.666667h170.666667v96a74.666667 74.666667 0 0 1-74.666667 74.666667H661.333333z m0-469.333333v-170.666667h96c41.216 0 74.666667 33.450667 74.666667 74.666667V362.666667h-170.666667z m-64-170.666667v170.666667h-170.666666v-170.666667h170.666666z m-405.333333 469.333333h170.666667v170.666667H266.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V661.333333z"
|
||||||
|
p-id="15067"
|
||||||
|
></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,14 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconTableHeaderColumn: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
|
||||||
|
<path d="M64 960l896 0L960 64 64 64 64 960zM640 384l0 256L384 640 384 384 640 384zM384 896l0-192 256 0 0 192L384 896zM320 896 258.88 896 320 834.88 320 896zM320 744.384 168.384 896 128 896l0-76.096 192-192L320 744.384zM128 729.344 128 611.904l192-192 0 117.504L128 729.344zM128 521.344 128 403.904l192-192 0 117.504L128 521.344zM128 313.344 128 227.904 227.904 128l85.504 0L128 313.344zM896 896l-192 0 0-192 192 0L896 896zM896 640l-192 0L704 384l192 0L896 640zM896 128l0 192-192 0L704 128 896 128zM640 320 384 320 384 128l256 0L640 320z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Icon } from '@douyinfe/semi-ui';
|
||||||
|
|
||||||
|
export const IconTableHeaderRow: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||||
|
return (
|
||||||
|
<Icon
|
||||||
|
style={style}
|
||||||
|
svg={
|
||||||
|
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||||
|
<path d="M128.1024 371.5072V216.9856a28.5696 28.5696 0 0 1 28.8768-28.2624h711.8848a28.5696 28.5696 0 0 1 28.8768 28.2624v154.5216z m769.6384 231.8336H675.0208v-182.272h222.8224v182.272z m0 204.0832a28.5696 28.5696 0 0 1-28.8768 28.2624H675.0208v-182.272h222.8224v153.6z m-496.128 27.7504v-182.272H624.64v182.272z m-244.6336 0a28.5696 28.5696 0 0 1-28.8768-28.2624V652.3904h222.8224v182.3744H156.9792z m193.9456-231.8336H128.1024v-182.272h222.8224zM624.64 421.0688v182.3744H401.6128V421.0688z m251.392-281.9072h-727.04a71.0656 71.0656 0 0 0-71.68 70.4512v605.3888a71.0656 71.0656 0 0 0 71.68 70.3488h727.04a71.68 71.68 0 0 0 71.68-70.3488V209.5104a71.0656 71.0656 0 0 0-71.68-70.3488z m0 0"></path>
|
||||||
|
<path d="M169.984 211.2512h685.568a20.48 20.48 0 0 1 20.48 20.48v120.4224H149.504V231.7312a20.48 20.48 0 0 1 20.48-20.48z"></path>
|
||||||
|
</svg>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
|
@ -42,3 +42,6 @@ export * from './IconList';
|
||||||
export * from './IconHeading1';
|
export * from './IconHeading1';
|
||||||
export * from './IconHeading2';
|
export * from './IconHeading2';
|
||||||
export * from './IconHeading3';
|
export * from './IconHeading3';
|
||||||
|
export * from './IconTableHeaderRow';
|
||||||
|
export * from './IconTableHeaderColumn';
|
||||||
|
export * from './IconTableHeaderCell';
|
||||||
|
|
|
@ -16,7 +16,7 @@ export const Attachment = Node.create({
|
||||||
content: '',
|
content: '',
|
||||||
marks: '',
|
marks: '',
|
||||||
group: 'block',
|
group: 'block',
|
||||||
draggable: true,
|
selectable: true,
|
||||||
atom: true,
|
atom: true,
|
||||||
|
|
||||||
addOptions() {
|
addOptions() {
|
||||||
|
|
|
@ -17,6 +17,7 @@ export const Banner = Node.create({
|
||||||
content: 'paragraph+',
|
content: 'paragraph+',
|
||||||
group: 'block',
|
group: 'block',
|
||||||
defining: true,
|
defining: true,
|
||||||
|
selectable: true,
|
||||||
|
|
||||||
addAttributes() {
|
addAttributes() {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -16,6 +16,7 @@ export const Status = Node.create({
|
||||||
group: 'inline',
|
group: 'inline',
|
||||||
inline: true,
|
inline: true,
|
||||||
atom: true,
|
atom: true,
|
||||||
|
selectable: true,
|
||||||
|
|
||||||
addAttributes() {
|
addAttributes() {
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -47,7 +47,7 @@ export const Table = BuiltInTable.extend({
|
||||||
|
|
||||||
return [
|
return [
|
||||||
'div',
|
'div',
|
||||||
{ class: 'tableWrapper adas' },
|
{ class: 'tableWrapper' },
|
||||||
['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]],
|
['table', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), ['tbody', 0]],
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,6 +9,9 @@ import {
|
||||||
IconMergeCell,
|
IconMergeCell,
|
||||||
IconSplitCell,
|
IconSplitCell,
|
||||||
IconDeleteTable,
|
IconDeleteTable,
|
||||||
|
IconTableHeaderRow,
|
||||||
|
IconTableHeaderColumn,
|
||||||
|
IconTableHeaderCell,
|
||||||
} from 'components/icons';
|
} from 'components/icons';
|
||||||
import { Tooltip } from 'components/tooltip';
|
import { Tooltip } from 'components/tooltip';
|
||||||
import { Divider } from '../wrappers/divider';
|
import { Divider } from '../wrappers/divider';
|
||||||
|
@ -24,6 +27,7 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
shouldShow={() => editor.isActive(Table.name)}
|
shouldShow={() => editor.isActive(Table.name)}
|
||||||
tippyOptions={{
|
tippyOptions={{
|
||||||
maxWidth: 456,
|
maxWidth: 456,
|
||||||
|
placement: 'bottom',
|
||||||
}}
|
}}
|
||||||
matchRenderContainer={(node: HTMLElement) =>
|
matchRenderContainer={(node: HTMLElement) =>
|
||||||
node && node.classList && node.classList.contains('tableWrapper') && node.tagName === 'DIV'
|
node && node.classList && node.classList.contains('tableWrapper') && node.tagName === 'DIV'
|
||||||
|
@ -93,6 +97,38 @@ export const TableBubbleMenu = ({ editor }) => {
|
||||||
|
|
||||||
<Divider />
|
<Divider />
|
||||||
|
|
||||||
|
<Tooltip content="设置(或取消)当前列为表头">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="tertiary"
|
||||||
|
theme="borderless"
|
||||||
|
icon={<IconTableHeaderColumn />}
|
||||||
|
onClick={() => editor.chain().focus().toggleHeaderColumn().run()}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip content="设置(或取消)当前行为表头">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="tertiary"
|
||||||
|
theme="borderless"
|
||||||
|
icon={<IconTableHeaderRow />}
|
||||||
|
onClick={() => editor.chain().focus().toggleHeaderRow().run()}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Tooltip content="设置(或取消)当前单元格为表头">
|
||||||
|
<Button
|
||||||
|
size="small"
|
||||||
|
type="tertiary"
|
||||||
|
theme="borderless"
|
||||||
|
icon={<IconTableHeaderCell />}
|
||||||
|
onClick={() => editor.chain().focus().toggleHeaderCell().run()}
|
||||||
|
/>
|
||||||
|
</Tooltip>
|
||||||
|
|
||||||
|
<Divider />
|
||||||
|
|
||||||
<Tooltip content="合并单元格">
|
<Tooltip content="合并单元格">
|
||||||
<Button
|
<Button
|
||||||
size="small"
|
size="small"
|
||||||
|
|
|
@ -21,14 +21,6 @@ export const extractFileExtension = (fileName) => {
|
||||||
return fileName.split('.').pop();
|
return fileName.split('.').pop();
|
||||||
};
|
};
|
||||||
|
|
||||||
export const readFileAsDataURL = (file) => {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
const reader = new FileReader();
|
|
||||||
reader.addEventListener('load', (e) => resolve(e.target.result), { once: true });
|
|
||||||
reader.readAsDataURL(file);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
export const normalizeFileSize = (size) => {
|
export const normalizeFileSize = (size) => {
|
||||||
if (size < 1024) {
|
if (size < 1024) {
|
||||||
return size + ' Byte';
|
return size + ' Byte';
|
||||||
|
|
|
@ -13,5 +13,7 @@ export const markdownToProsemirror = ({ schema, content, hasTitle }) => {
|
||||||
const parser = new DOMParser();
|
const parser = new DOMParser();
|
||||||
const { body } = parser.parseFromString(html, 'text/html');
|
const { body } = parser.parseFromString(html, 'text/html');
|
||||||
body.append(document.createComment(content));
|
body.append(document.createComment(content));
|
||||||
return htmlToPromsemirror(body, !hasTitle);
|
const node = htmlToPromsemirror(body, !hasTitle);
|
||||||
|
|
||||||
|
return node;
|
||||||
};
|
};
|
||||||
|
|
|
@ -3,7 +3,6 @@
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
border: 1px solid var(--semi-color-border);
|
border: 1px solid var(--semi-color-border);
|
||||||
margin: 16px 0;
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
margin-top: 0.25em;
|
margin-top: 0.25em;
|
||||||
|
|
|
@ -2,11 +2,8 @@
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
border: 1px solid var(--semi-color-border);
|
border: 1px solid var(--semi-color-border);
|
||||||
border-left: 0;
|
|
||||||
border-right: 0;
|
|
||||||
|
|
||||||
&.isEditable {
|
&.isEditable {
|
||||||
border: 0;
|
|
||||||
background-color: var(--semi-color-fill-0);
|
background-color: var(--semi-color-fill-0);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
|
||||||
&.isEditable {
|
&.isEditable {
|
||||||
|
border-color: transparent !important;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
background-color: var(--semi-color-fill-0);
|
background-color: var(--semi-color-fill-0);
|
||||||
|
|
||||||
|
@ -11,12 +12,17 @@
|
||||||
|
|
||||||
.itemWrap {
|
.itemWrap {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
|
margin-top: 12px;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: var(--semi-color-text-1);
|
color: var(--semi-color-text-1);
|
||||||
border-color: var(--semi-color-border);
|
border-color: var(--semi-color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.empty {
|
||||||
|
margin-top: 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.itemWrap {
|
.itemWrap {
|
||||||
|
@ -24,7 +30,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid var(--semi-color-border);
|
border: 1px solid var(--semi-color-border);
|
||||||
margin-top: 12px;
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--semi-color-text-1);
|
color: var(--semi-color-text-1);
|
||||||
|
@ -44,7 +49,6 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
border: 1px solid var(--semi-color-border);
|
border: 1px solid var(--semi-color-border);
|
||||||
margin-top: 12px;
|
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: var(--semi-color-text-1);
|
color: var(--semi-color-text-1);
|
||||||
|
|
|
@ -22,7 +22,10 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper as="div" className={cls('render-wrapper', styles.wrap, isEditable && styles.isEditable)}>
|
<NodeViewWrapper
|
||||||
|
as="div"
|
||||||
|
className={cls(styles.wrap, isEditable && styles.isEditable, isEditable && 'render-wrapper')}
|
||||||
|
>
|
||||||
<div>
|
<div>
|
||||||
{isEditable && (
|
{isEditable && (
|
||||||
<DataRender
|
<DataRender
|
||||||
|
@ -55,13 +58,13 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
||||||
query: { wikiId, documentId },
|
query: { wikiId, documentId },
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<a className={styles.itemWrap} target="_blank">
|
<a className={cls(styles.itemWrap, !isEditable && 'render-wrapper')} target="_blank">
|
||||||
<IconDocument />
|
<IconDocument />
|
||||||
<span>{title || '请选择文档'}</span>
|
<span>{title || '请选择文档'}</span>
|
||||||
</a>
|
</a>
|
||||||
</Link>
|
</Link>
|
||||||
) : (
|
) : (
|
||||||
<div className={styles.empty}>
|
<div className={cls(styles.empty, !isEditable && 'render-wrapper')}>
|
||||||
<span>{'用户未选择文档'}</span>
|
<span>{'用户未选择文档'}</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,34 +1,38 @@
|
||||||
.items {
|
.items {
|
||||||
max-height: 50vh;
|
border-radius: var(--border-radius);
|
||||||
overflow: auto;
|
|
||||||
padding: 0.2rem;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--semi-color-text-0);
|
|
||||||
border-radius: var(--semi-border-radius-medium);
|
|
||||||
background-color: var(--semi-color-bg-0);
|
background-color: var(--semi-color-bg-0);
|
||||||
border: 1px solid var(--semi-color-border);
|
box-shadow: rgb(9 30 66 / 31%) 0px 0px 1px, rgb(9 30 66 / 25%) 0px 4px 8px -2px;
|
||||||
|
width: 200px;
|
||||||
|
max-height: 380px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: block;
|
align-items: center;
|
||||||
margin: 0;
|
border-radius: 0px;
|
||||||
width: 100%;
|
box-sizing: border-box;
|
||||||
text-align: left;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.2rem 0.4rem;
|
|
||||||
color: inherit;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
color: rgb(9, 30, 66);
|
||||||
|
fill: rgb(255, 255, 255);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 12px 12px 11px;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--semi-color-info);
|
background-color: #f4f5f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-selected {
|
&.is-selected {
|
||||||
border-color: var(--semi-color-info);
|
background-color: rgb(222, 235, 255);
|
||||||
|
color: rgb(0, 82, 204);
|
||||||
|
fill: rgb(222, 235, 255);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
|
@ -71,7 +71,7 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
const img = <img src={src} alt={alt} width={width} height={height} />;
|
const img = <img className="render-wrapper" src={src} alt={alt} width={width} height={height} />;
|
||||||
|
|
||||||
if (isEditable) {
|
if (isEditable) {
|
||||||
return (
|
return (
|
||||||
|
|
|
@ -1,35 +1,38 @@
|
||||||
.items {
|
.items {
|
||||||
width: 160px;
|
border-radius: var(--border-radius);
|
||||||
max-height: 40vh;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0.2rem;
|
|
||||||
position: relative;
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
color: var(--semi-color-text-0);
|
|
||||||
border-radius: var(--semi-border-radius-medium);
|
|
||||||
background-color: var(--semi-color-bg-0);
|
background-color: var(--semi-color-bg-0);
|
||||||
border: 1px solid var(--semi-color-border);
|
box-shadow: rgb(9 30 66 / 31%) 0px 0px 1px, rgb(9 30 66 / 25%) 0px 4px 8px -2px;
|
||||||
|
width: 200px;
|
||||||
|
max-height: 380px;
|
||||||
|
overflow-x: hidden;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
display: block;
|
align-items: center;
|
||||||
margin: 0;
|
border-radius: 0px;
|
||||||
width: 100%;
|
box-sizing: border-box;
|
||||||
text-align: left;
|
|
||||||
background: transparent;
|
|
||||||
border-radius: 0.4rem;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.2rem 0.4rem;
|
|
||||||
color: inherit;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
color: rgb(9, 30, 66);
|
||||||
|
fill: rgb(255, 255, 255);
|
||||||
|
text-decoration: none;
|
||||||
|
padding: 12px 12px 11px;
|
||||||
|
width: 100%;
|
||||||
|
border: 0;
|
||||||
|
outline: 0;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
border-color: var(--semi-color-info);
|
background-color: #f4f5f7;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.is-selected {
|
&.is-selected {
|
||||||
border-color: var(--semi-color-info);
|
background-color: rgb(222, 235, 255);
|
||||||
|
color: rgb(0, 82, 204);
|
||||||
|
fill: rgb(222, 235, 255);
|
||||||
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
|
|
@ -5,8 +5,6 @@
|
||||||
line-height: 0;
|
line-height: 0;
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
outline: none;
|
outline: none;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
border: 1px solid var(--semi-color-border);
|
|
||||||
|
|
||||||
.jsmindWrap {
|
.jsmindWrap {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -30,8 +28,9 @@
|
||||||
.renderWrap {
|
.renderWrap {
|
||||||
position: relative;
|
position: relative;
|
||||||
min-height: 50px;
|
min-height: 50px;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
border: 1px solid var(--semi-color-border);
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
> input {
|
> input {
|
||||||
|
|
|
@ -98,7 +98,12 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
}, [isEditable]);
|
}, [isEditable]);
|
||||||
|
|
||||||
const content = (
|
const content = (
|
||||||
<div ref={$container} className={styles.renderWrap} tabIndex={0} style={{ width: '100%', height: '100%' }}>
|
<div
|
||||||
|
ref={$container}
|
||||||
|
className={cls(styles.renderWrap, 'render-wrapper')}
|
||||||
|
tabIndex={0}
|
||||||
|
style={{ width: '100%', height: '100%' }}
|
||||||
|
>
|
||||||
{!isEditable && (
|
{!isEditable && (
|
||||||
<div className={styles.mindHandlerWrap}>
|
<div className={styles.mindHandlerWrap}>
|
||||||
<Button
|
<Button
|
||||||
|
@ -121,8 +126,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
|
<NodeViewWrapper className={cls(styles.wrap)}>
|
||||||
<NodeViewContent as="div">
|
|
||||||
{isEditable ? (
|
{isEditable ? (
|
||||||
<Resizeable width={width} height={height} onChange={onResize}>
|
<Resizeable width={width} height={height} onChange={onResize}>
|
||||||
{content}
|
{content}
|
||||||
|
@ -130,7 +134,7 @@ export const MindWrapper = ({ editor, node, updateAttributes }) => {
|
||||||
) : (
|
) : (
|
||||||
<div style={{ display: 'inline-block', width, height }}>{content}</div>
|
<div style={{ display: 'inline-block', width, height }}>{content}</div>
|
||||||
)}
|
)}
|
||||||
</NodeViewContent>
|
{/* <NodeViewContent as="div"></NodeViewContent> */}
|
||||||
</NodeViewWrapper>
|
</NodeViewWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,8 +1,17 @@
|
||||||
|
import { string } from 'lib0';
|
||||||
import { HttpClient } from './HttpClient';
|
import { HttpClient } from './HttpClient';
|
||||||
|
|
||||||
export const uploadFile = async (file: Blob): Promise<string> => {
|
export const readFileAsDataURL = (file): Promise<string | ArrayBuffer> => {
|
||||||
if (process.env.ENABLE_ALIYUN_OSS) {
|
return new Promise((resolve) => {
|
||||||
return Promise.reject(new Error('阿里云OSS配置不完善,请自行实现上传文件!'));
|
const reader = new FileReader();
|
||||||
|
reader.addEventListener('load', (e) => resolve(e.target.result), { once: true });
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export const uploadFile = async (file: Blob): Promise<string | ArrayBuffer> => {
|
||||||
|
if (!process.env.ENABLE_ALIYUN_OSS) {
|
||||||
|
return readFileAsDataURL(file);
|
||||||
}
|
}
|
||||||
|
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
|
|
|
@ -6,10 +6,6 @@
|
||||||
box-shadow: var(--box-shadow);
|
box-shadow: var(--box-shadow);
|
||||||
background-color: var(--semi-color-nav-bg);
|
background-color: var(--semi-color-nav-bg);
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
|
|
||||||
&.table-bubble-menu {
|
|
||||||
transform: translateY(-2em);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-controller-wrapper {
|
.table-controller-wrapper {
|
||||||
|
|
|
@ -165,6 +165,11 @@
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 1em;
|
font-size: 1em;
|
||||||
|
line-height: 1.714;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
letter-spacing: -0.005em;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul[data-type='taskList'] {
|
ul[data-type='taskList'] {
|
||||||
|
@ -261,14 +266,12 @@
|
||||||
min-width: 48px;
|
min-width: 48px;
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
background-color: #0d0d0d;
|
|
||||||
background-color: var(--semi-color-fill-0);
|
background-color: var(--semi-color-fill-0);
|
||||||
|
|
||||||
code {
|
code {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
line-height: 1.5rem;
|
line-height: 1.5rem;
|
||||||
border-radius: var(--border-radius);
|
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
white-space: pre;
|
white-space: pre;
|
||||||
|
@ -315,11 +318,12 @@
|
||||||
|
|
||||||
th {
|
th {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
background-color: rgb(244, 245, 247);
|
||||||
}
|
}
|
||||||
|
|
||||||
.selectedCell {
|
.selectedCell {
|
||||||
border-style: double;
|
border-style: double;
|
||||||
border-color: var(--semi-color-info);
|
border-color: rgb(0 101 255);
|
||||||
background: var(--semi-color-info-light-hover);
|
background: var(--semi-color-info-light-hover);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -414,14 +418,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-codeBlock,
|
.node-codeBlock,
|
||||||
|
.node-katex,
|
||||||
.node-documentChildren,
|
.node-documentChildren,
|
||||||
.node-documentReference,
|
.node-documentReference {
|
||||||
.node-katex {
|
|
||||||
.render-wrapper {
|
.render-wrapper {
|
||||||
border: 1px solid transparent;
|
border: 1px solid var(--semi-color-border);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.node-codeBlock,
|
||||||
.node-katex {
|
.node-katex {
|
||||||
.render-wrapper {
|
.render-wrapper {
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
@ -442,7 +447,6 @@
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
// #e0ebfa
|
|
||||||
|
|
||||||
.render-wrapper {
|
.render-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
@ -451,8 +455,8 @@
|
||||||
|
|
||||||
&.selected-node {
|
&.selected-node {
|
||||||
.render-wrapper {
|
.render-wrapper {
|
||||||
border: 1px solid rgb(0 101 255);
|
border: 1px solid rgb(0 101 255) !important;
|
||||||
background-color: var(--semi-color-info-light-hover);
|
background-color: #e0ebfa;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -466,7 +470,7 @@
|
||||||
td,
|
td,
|
||||||
th {
|
th {
|
||||||
border-color: rgb(0 101 255);
|
border-color: rgb(0 101 255);
|
||||||
background-color: var(--semi-color-info-light-hover);
|
background-color: #e0ebfa;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -24,11 +24,11 @@ db:
|
||||||
# oss 文件存储服务
|
# oss 文件存储服务
|
||||||
oss:
|
oss:
|
||||||
aliyun:
|
aliyun:
|
||||||
accessKeyId: 'LTAI5tNd19aX1TZJwGjKJWVE'
|
accessKeyId: ''
|
||||||
accessKeySecret: 'nlZJQprIO45QDeeANVlBZ6F7SIjBZs'
|
accessKeySecret: ''
|
||||||
bucket: 'wipi'
|
bucket: ''
|
||||||
https: true
|
https: true
|
||||||
region: 'oss-cn-shanghai'
|
region: ''
|
||||||
|
|
||||||
# jwt 配置
|
# jwt 配置
|
||||||
jwt:
|
jwt:
|
||||||
|
|
Loading…
Reference in New Issue