mirror of https://github.com/fantasticit/think.git
Merge pull request #15 from fantasticit/feat/editor
This commit is contained in:
fantasticit
GitHub
commit
fb3a9c01cd
|
|
@ -39,6 +39,8 @@
|
|||
"@tiptap/extension-paragraph": "^2.0.0-beta.23",
|
||||
"@tiptap/extension-placeholder": "^2.0.0-beta.47",
|
||||
"@tiptap/extension-strike": "^2.0.0-beta.27",
|
||||
"@tiptap/extension-subscript": "^2.0.0-beta.10",
|
||||
"@tiptap/extension-superscript": "^2.0.0-beta.10",
|
||||
"@tiptap/extension-table": "^2.0.0-beta.48",
|
||||
"@tiptap/extension-table-cell": "^2.0.0-beta.20",
|
||||
"@tiptap/extension-table-header": "^2.0.0-beta.22",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
import { Icon } from '@douyinfe/semi-ui';
|
||||
|
||||
export const IconSub: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||
return (
|
||||
<Icon
|
||||
style={style}
|
||||
svg={
|
||||
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||
<g stroke="currentColor" fill="none" fill-rule="evenodd">
|
||||
<path stroke-width="20" stroke-linecap="round" d="m40 50 114 168M154 50 40 218"></path>
|
||||
<path
|
||||
d="M231.92 225.48c2.72 0 4.08-1.48 4.08-4.44 0-2.88-1.36-4.32-4.08-4.32H198.8c6.48-5.52 12.28-11.24 17.4-17.16 2.16-2.48 4.28-5.16 6.36-8.04 2.08-2.88 3.94-5.82 5.58-8.82 1.64-3 2.96-6.04 3.96-9.12 1-3.08 1.5-6.14 1.5-9.18 0-3.36-.48-6.42-1.44-9.18s-2.38-5.12-4.26-7.08-4.2-3.48-6.96-4.56c-2.76-1.08-5.9-1.62-9.42-1.62-7.92 0-13.8 2.26-17.64 6.78-3.84 4.52-5.76 10.66-5.76 18.42 0 2.24.32 3.74.96 4.5.64.76 1.96 1.14 3.96 1.14 1.76 0 2.98-.44 3.66-1.32.68-.88 1.02-2.32 1.02-4.32 0-4.8 1.04-8.74 3.12-11.82s5.4-4.62 9.96-4.62c4 0 7.16 1.32 9.48 3.96 2.32 2.64 3.48 6.12 3.48 10.44 0 3.2-.64 6.42-1.92 9.66-1.28 3.24-2.94 6.4-4.98 9.48a84.099 84.099 0 0 1-6.84 8.94c-2.52 2.88-5.04 5.6-7.56 8.16-2.52 2.56-4.92 4.94-7.2 7.14-2.28 2.2-4.18 4.1-5.7 5.7-.64 1.04-.96 2.04-.96 3-.56 1.04-.86 2.06-.9 3.06-.04 1 .1 1.88.42 2.64.32.76.8 1.38 1.44 1.86.64.48 1.36.72 2.16.72h40.2Z"
|
||||
strokeWidth="5"
|
||||
fill="currentColor"
|
||||
fillRule="nonzero"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import { Icon } from '@douyinfe/semi-ui';
|
||||
|
||||
export const IconSup: React.FC<{ style?: React.CSSProperties }> = ({ style = {} }) => {
|
||||
return (
|
||||
<Icon
|
||||
style={style}
|
||||
svg={
|
||||
<svg width="16" height="16" viewBox="0 0 256 256" role="presentation">
|
||||
<g stroke="currentColor" fill="none" fill-rule="evenodd">
|
||||
<path stroke-width="20" stroke-linecap="round" d="m40 50 114 168M154 50 40 218"></path>
|
||||
<path
|
||||
d="M231.92 103.48c2.72 0 4.08-1.48 4.08-4.44 0-2.88-1.36-4.32-4.08-4.32H198.8c6.48-5.52 12.28-11.24 17.4-17.16 2.16-2.48 4.28-5.16 6.36-8.04 2.08-2.88 3.94-5.82 5.58-8.82 1.64-3 2.96-6.04 3.96-9.12 1-3.08 1.5-6.14 1.5-9.18 0-3.36-.48-6.42-1.44-9.18s-2.38-5.12-4.26-7.08-4.2-3.48-6.96-4.56c-2.76-1.08-5.9-1.62-9.42-1.62-7.92 0-13.8 2.26-17.64 6.78-3.84 4.52-5.76 10.66-5.76 18.42 0 2.24.32 3.74.96 4.5.64.76 1.96 1.14 3.96 1.14 1.76 0 2.98-.44 3.66-1.32.68-.88 1.02-2.32 1.02-4.32 0-4.8 1.04-8.74 3.12-11.82s5.4-4.62 9.96-4.62c4 0 7.16 1.32 9.48 3.96 2.32 2.64 3.48 6.12 3.48 10.44 0 3.2-.64 6.42-1.92 9.66-1.28 3.24-2.94 6.4-4.98 9.48a84.099 84.099 0 0 1-6.84 8.94c-2.52 2.88-5.04 5.6-7.56 8.16-2.52 2.56-4.92 4.94-7.2 7.14-2.28 2.2-4.18 4.1-5.7 5.7-.64 1.04-.96 2.04-.96 3-.56 1.04-.86 2.06-.9 3.06-.04 1 .1 1.88.42 2.64.32.76.8 1.38 1.44 1.86.64.48 1.36.72 2.16.72h40.2Z"
|
||||
strokeWidth="5"
|
||||
fill="currentColor"
|
||||
fillRule="nonzero"
|
||||
></path>
|
||||
</g>
|
||||
</svg>
|
||||
}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
@ -45,3 +45,5 @@ export * from './IconHeading3';
|
|||
export * from './IconTableHeaderRow';
|
||||
export * from './IconTableHeaderColumn';
|
||||
export * from './IconTableHeaderCell';
|
||||
export * from './IconSub';
|
||||
export * from './IconSup';
|
||||
|
|
|
|||
|
|
@ -36,6 +36,8 @@ import { SearchNReplace } from './extensions/search';
|
|||
import { SelectionExtension } from './extensions/selection';
|
||||
import { Status } from './extensions/status';
|
||||
import { Strike } from './extensions/strike';
|
||||
import { Subscript } from './extensions/subscript';
|
||||
import { Superscript } from './extensions/superscript';
|
||||
import { Table } from './extensions/table';
|
||||
import { TableCell } from './extensions/tableCell';
|
||||
import { TableHeader } from './extensions/tableHeader';
|
||||
|
|
@ -89,6 +91,8 @@ export const BaseKit = [
|
|||
SelectionExtension,
|
||||
Status,
|
||||
Strike,
|
||||
Subscript,
|
||||
Superscript,
|
||||
Table,
|
||||
TableCell,
|
||||
TableHeader,
|
||||
|
|
|
|||
|
|
@ -60,33 +60,29 @@ export const Emoji = Node.create({
|
|||
new Plugin({
|
||||
key: new PluginKey('emojiPlaceholder'),
|
||||
props: {
|
||||
decorations: (state) => {
|
||||
if (!editor.isEditable) return;
|
||||
|
||||
const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const decorations: Decoration[] = [];
|
||||
const isEmpty = parent && parent.node.content.size === 0;
|
||||
const isSlash = parent && parent.node.textContent === ':';
|
||||
const isTopLevel = state.selection.$from.depth === 1;
|
||||
|
||||
if (isTopLevel) {
|
||||
if (isSlash) {
|
||||
decorations.push(
|
||||
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
'class': 'placeholder',
|
||||
'data-placeholder': ` 继续输入进行过滤`,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return DecorationSet.create(state.doc, decorations);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// decorations: (state) => {
|
||||
// if (!editor.isEditable) return;
|
||||
// const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
|
||||
// if (!parent) {
|
||||
// return;
|
||||
// }
|
||||
// const decorations: Decoration[] = [];
|
||||
// const isEmpty = parent && parent.node.content.size === 0;
|
||||
// const isSlash = parent && parent.node.textContent === ':';
|
||||
// const isTopLevel = state.selection.$from.depth === 1;
|
||||
// if (isTopLevel) {
|
||||
// if (isSlash) {
|
||||
// decorations.push(
|
||||
// Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
// 'class': 'placeholder',
|
||||
// 'data-placeholder': ` 继续输入进行过滤`,
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// return DecorationSet.create(state.doc, decorations);
|
||||
// }
|
||||
// return null;
|
||||
// },
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -42,43 +42,38 @@ export const EvokeMenu = Node.create({
|
|||
new Plugin({
|
||||
key: new PluginKey('evokeMenuPlaceholder'),
|
||||
props: {
|
||||
decorations: (state) => {
|
||||
if (!editor.isEditable) return;
|
||||
|
||||
const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
|
||||
if (!parent) {
|
||||
return;
|
||||
}
|
||||
|
||||
const decorations: Decoration[] = [];
|
||||
const isEmpty = parent && parent.node.content.size === 0;
|
||||
const isSlash = parent && parent.node.textContent === '/';
|
||||
const isTopLevel = state.selection.$from.depth === 1;
|
||||
const hasOtherChildren = parent && parent.node.content.childCount > 1;
|
||||
|
||||
if (isTopLevel) {
|
||||
if (isEmpty) {
|
||||
decorations.push(
|
||||
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
'class': 'is-empty',
|
||||
'data-placeholder': '输入 / 唤起更多',
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
if (isSlash && !hasOtherChildren) {
|
||||
decorations.push(
|
||||
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
'class': 'is-empty',
|
||||
'data-placeholder': ` 继续输入进行过滤`,
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return DecorationSet.create(state.doc, decorations);
|
||||
}
|
||||
return null;
|
||||
},
|
||||
// decorations: (state) => {
|
||||
// if (!editor.isEditable) return;
|
||||
// const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
|
||||
// if (!parent) {
|
||||
// return;
|
||||
// }
|
||||
// const decorations: Decoration[] = [];
|
||||
// const isEmpty = parent && parent.node.content.size === 0;
|
||||
// const isSlash = parent && parent.node.textContent === '/';
|
||||
// const isTopLevel = state.selection.$from.depth === 1;
|
||||
// const hasOtherChildren = parent && parent.node.content.childCount > 1;
|
||||
// if (isTopLevel) {
|
||||
// if (isEmpty) {
|
||||
// decorations.push(
|
||||
// Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
// 'class': 'is-empty',
|
||||
// 'data-placeholder': '输入 / 唤起更多',
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// if (isSlash && !hasOtherChildren) {
|
||||
// decorations.push(
|
||||
// Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
|
||||
// 'class': 'is-empty',
|
||||
// 'data-placeholder': ` 继续输入进行过滤`,
|
||||
// })
|
||||
// );
|
||||
// }
|
||||
// return DecorationSet.create(state.doc, decorations);
|
||||
// }
|
||||
// return null;
|
||||
// },
|
||||
},
|
||||
}),
|
||||
];
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
import Subscript from '@tiptap/extension-subscript';
|
||||
|
||||
export { Subscript };
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
import Superscript from '@tiptap/extension-superscript';
|
||||
|
||||
export { Superscript };
|
||||
|
|
@ -105,7 +105,7 @@ export const TableCell = BuiltInTableCell.extend({
|
|||
return !!cells?.some((cell, index) => isRowSelected(index)(editor.state.selection));
|
||||
},
|
||||
init: (dom, editor) => {
|
||||
dom.classList.add('table-controller-wrapper');
|
||||
dom.classList.add('bubble-memu-table-cell');
|
||||
dom.classList.add('row');
|
||||
ReactDOM.render(
|
||||
<>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export const TableHeader = BuiltInTableHeader.extend({
|
|||
return !!cells?.some((cell, index) => isColumnSelected(index)(selection));
|
||||
},
|
||||
init: (dom, editor) => {
|
||||
dom.classList.add('table-controller-wrapper');
|
||||
dom.classList.add('bubble-memu-table-cell');
|
||||
ReactDOM.render(
|
||||
<Space>
|
||||
<Tooltip content="向前插入一列">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React from 'react';
|
||||
import { Button } from '@douyinfe/semi-ui';
|
||||
import { IconBold, IconItalic, IconStrikeThrough, IconUnderline, IconCode } from '@douyinfe/semi-icons';
|
||||
import { IconSup, IconSub } from 'components/icons';
|
||||
import { Tooltip } from 'components/tooltip';
|
||||
import { isTitleActive } from '../services/isActive';
|
||||
import { ColorMenu } from './color';
|
||||
|
|
@ -62,6 +63,26 @@ export const BaseMenu: React.FC<{ editor: any }> = ({ editor }) => {
|
|||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="上标">
|
||||
<Button
|
||||
theme={editor.isActive('superscript') ? 'light' : 'borderless'}
|
||||
type="tertiary"
|
||||
icon={<IconSup />}
|
||||
onClick={() => editor.chain().focus().toggleSuperscript().run()}
|
||||
disabled={isTitleActive(editor)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="下标">
|
||||
<Button
|
||||
theme={editor.isActive('subscript') ? 'light' : 'borderless'}
|
||||
type="tertiary"
|
||||
icon={<IconSub />}
|
||||
onClick={() => editor.chain().focus().toggleSubscript().run()}
|
||||
disabled={isTitleActive(editor)}
|
||||
/>
|
||||
</Tooltip>
|
||||
|
||||
<ColorMenu editor={editor} />
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import { Table } from '../extensions/table';
|
|||
export const TableBubbleMenu = ({ editor }) => {
|
||||
return (
|
||||
<BubbleMenu
|
||||
className={'bubble-menu table-bubble-menu'}
|
||||
className={'bubble-menu bubble-menu-table'}
|
||||
editor={editor}
|
||||
pluginKey="table-bubble-menu"
|
||||
shouldShow={() => editor.isActive(Table.name)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
import { Mark } from './mark';
|
||||
|
||||
export class Subscript extends Mark {
|
||||
matching() {
|
||||
return this.DOMNode.nodeName === 'SUB';
|
||||
}
|
||||
|
||||
data() {
|
||||
return {
|
||||
type: 'subscript',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
import { Mark } from './mark';
|
||||
|
||||
export class Superscript extends Mark {
|
||||
matching() {
|
||||
return this.DOMNode.nodeName === 'SUP';
|
||||
}
|
||||
|
||||
data() {
|
||||
return {
|
||||
type: 'superscript',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -36,6 +36,8 @@ import { Bold } from './marks/bold';
|
|||
import { Code } from './marks/code';
|
||||
import { Italic } from './marks/italic';
|
||||
import { Link } from './marks/link';
|
||||
import { Subscript } from './marks/subscript';
|
||||
import { Superscript } from './marks/superscript';
|
||||
import { Underline } from './marks/underline';
|
||||
|
||||
export class Renderer {
|
||||
|
|
@ -84,7 +86,7 @@ export class Renderer {
|
|||
BulletList,
|
||||
];
|
||||
|
||||
this.marks = [Bold, Code, Italic, Link, Underline];
|
||||
this.marks = [Bold, Code, Italic, Link, Subscript, Superscript, Underline];
|
||||
}
|
||||
|
||||
setDocument(document) {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,8 @@ import { OrderedList } from '../../../extensions/orderedList';
|
|||
import { Paragraph } from '../../../extensions/paragraph';
|
||||
import { Status } from '../../../extensions/status';
|
||||
import { Strike } from '../../../extensions/strike';
|
||||
import { Subscript } from '../../../extensions/subscript';
|
||||
import { Superscript } from '../../../extensions/superscript';
|
||||
import { Table } from '../../../extensions/table';
|
||||
import { TableCell } from '../../../extensions/tableCell';
|
||||
import { TableHeader } from '../../../extensions/tableHeader';
|
||||
|
|
@ -67,6 +69,8 @@ const SerializerConfig = {
|
|||
mixable: true,
|
||||
expelEnclosingWhitespace: true,
|
||||
},
|
||||
[Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
|
||||
[Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
|
||||
// FIXME: 如何导出 style？
|
||||
[TextStyle.name]: { open: '', close: '', mixable: true, expelEnclosingWhitespace: true },
|
||||
...marks.reduce(
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--semi-color-border);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
.wrap {
|
||||
margin: 12px 0;
|
||||
line-height: 0;
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--semi-color-border);
|
||||
|
|
|
|||
|
|
@ -1,15 +1,10 @@
|
|||
.wrap {
|
||||
margin-top: 12px;
|
||||
margin-top: 0.75em;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--semi-color-border);
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&.isEditable {
|
||||
background-color: var(--semi-color-fill-0);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--semi-color-fill-1);
|
||||
}
|
||||
|
||||
.itemWrap {
|
||||
pointer-events: none;
|
||||
|
||||
|
|
@ -24,6 +19,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 12px;
|
||||
padding: 6px;
|
||||
text-decoration: none;
|
||||
color: var(--semi-color-text-1);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -76,8 +76,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
|
|||
<Text type="tertiary">当前页面无法使用子文档</Text>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<NodeViewContent></NodeViewContent>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,13 @@
|
|||
.wrap {
|
||||
margin-top: 12px;
|
||||
margin-top: 0.75em;
|
||||
border-radius: var(--border-radius);
|
||||
|
||||
&.isEditable {
|
||||
border-color: transparent !important;
|
||||
padding: 12px;
|
||||
background-color: var(--semi-color-fill-0);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--semi-color-fill-1);
|
||||
}
|
||||
|
||||
.itemWrap {
|
||||
pointer-events: none;
|
||||
margin-top: 12px;
|
||||
|
||||
&:hover {
|
||||
color: var(--semi-color-text-1);
|
||||
border-color: var(--semi-color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
|
|
|
|||
|
|
@ -35,6 +35,7 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
|||
<Select
|
||||
placeholder="请选择文档"
|
||||
onChange={(v) => selectDoc(v)}
|
||||
style={{ maxWidth: 180 }}
|
||||
{...(wikiId && documentId ? { value: `${wikiId}/${title}/${documentId}` } : {})}
|
||||
>
|
||||
{(tocs || []).map((toc) => (
|
||||
|
|
@ -69,7 +70,6 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
|
|||
</div>
|
||||
)}
|
||||
</div>
|
||||
<NodeViewContent></NodeViewContent>
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -20,7 +20,6 @@
|
|||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
// height: 100%;
|
||||
border-radius: var(--border-radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
padding: 8px 16px;
|
||||
border: 1px solid var(--semi-color-border);
|
||||
border-radius: var(--border-radius);
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.wrap {
|
||||
margin: 8px 0;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => {
|
|||
|
||||
return (
|
||||
<NodeViewWrapper as="span" className={cls(styles.wrap, 'render-wrapper')} contentEditable={false}>
|
||||
<NodeViewContent />
|
||||
{isEditable ? (
|
||||
<Popover
|
||||
showArrow
|
||||
|
|
@ -57,7 +58,7 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => {
|
|||
) : (
|
||||
content
|
||||
)}
|
||||
<NodeViewContent></NodeViewContent>
|
||||
<NodeViewContent />
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
.wrap {
|
||||
position: relative;
|
||||
max-width: 100%;
|
||||
margin: 12px 0;
|
||||
line-height: 0;
|
||||
overflow: visible;
|
||||
outline: none;
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
|
|||
|
||||
return (
|
||||
<NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
|
||||
<NodeViewContent />
|
||||
{isEditable ? (
|
||||
<Popover
|
||||
showArrow
|
||||
|
|
@ -44,7 +45,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
|
|||
) : (
|
||||
content
|
||||
)}
|
||||
{/* <NodeViewContent></NodeViewContent> */}
|
||||
<NodeViewContent />
|
||||
</NodeViewWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
.ProseMirror {
|
||||
color: var(--semi-color-text-0);
|
||||
white-space: break-spaces;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
font-family: 'Chinese Quote', 'Segoe UI', Roboto, RobotoNum, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
letter-spacing: 0.008em;
|
||||
line-height: 1.74;
|
||||
outline: none !important;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--semi-color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--semi-color-border);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1em;
|
||||
line-height: 1.714;
|
||||
font-weight: normal;
|
||||
margin-top: 0.75rem;
|
||||
margin-bottom: 0px;
|
||||
letter-spacing: -0.005em;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid var(--semi-color-fill-2);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background: var(--semi-color-border);
|
||||
margin: 18px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
|
@ -0,0 +1,277 @@
|
|||
.ProseMirror {
|
||||
code {
|
||||
cursor: text;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
line-height: 1.3;
|
||||
background-color: var(--semi-color-fill-1);
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
counter-reset: line 0;
|
||||
display: flex;
|
||||
min-width: 48px;
|
||||
overflow-x: auto;
|
||||
line-height: 1.3;
|
||||
background-color: var(--semi-color-fill-0);
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
|
||||
width: 100%;
|
||||
max-height: 370px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*!
|
||||
Theme: GitHub
|
||||
Description: Light theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-light
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #005cc5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #735c0f;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #24292e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #24292e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
|
||||
body[theme-mode='dark'] {
|
||||
/*!
|
||||
Theme: GitHub Dark
|
||||
Description: Dark theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-dark
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #1f6feb;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #f2cc60;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #c9d1d9;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #c9d1d9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
.collaboration-cursor__caret {
|
||||
border-left: 1px solid #0d0d0d;
|
||||
border-right: 1px solid #0d0d0d;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.collaboration-cursor__label {
|
||||
border-radius: 3px 3px 3px 0;
|
||||
color: #0d0d0d;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
left: -1px;
|
||||
line-height: normal;
|
||||
padding: 0.1rem 0.3rem;
|
||||
position: absolute;
|
||||
top: -1.4em;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
.color {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
background-color: var(--color);
|
||||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||||
border-radius: 2px;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-bottom: 0.15em;
|
||||
margin-right: 0.1em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
.ProseMirror {
|
||||
h1 {
|
||||
font-size: 1.87em;
|
||||
margin: 26px 0 12px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
margin: 21px 0 12px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
margin: 16px 0 12px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
margin: 14px 0 12px 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
margin: 5px 0 12px 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child,
|
||||
h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@import './base.scss';
|
||||
@import './code.scss';
|
||||
@import './collaboration.scss';
|
||||
@import './color.scss';
|
||||
@import './heading.scss';
|
||||
@import './katex.scss';
|
||||
@import './list.scss';
|
||||
@import './menu.scss';
|
||||
@import './mind.scss';
|
||||
@import './placeholder.scss';
|
||||
@import './search.scss';
|
||||
@import './selection.scss';
|
||||
@import './table.scss';
|
||||
@import './title.scss';
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
.katex {
|
||||
font-size: 1em;
|
||||
text-rendering: auto;
|
||||
font: normal 1.21em;
|
||||
line-height: 1.2;
|
||||
text-indent: 0;
|
||||
}
|
||||
.katex * {
|
||||
-ms-high-contrast-adjust: none !important;
|
||||
border-color: currentColor;
|
||||
}
|
||||
.katex .katex-version:after {
|
||||
content: "0.15.2";
|
||||
content: '0.15.2';
|
||||
}
|
||||
.katex .katex-mathml {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
|
|
@ -811,7 +809,7 @@
|
|||
}
|
||||
.katex .stretchy:after,
|
||||
.katex .stretchy:before {
|
||||
content: "";
|
||||
content: '';
|
||||
}
|
||||
.katex .hide-tail {
|
||||
overflow: hidden;
|
||||
|
|
@ -888,11 +886,11 @@
|
|||
padding: 0 0.03889em;
|
||||
}
|
||||
.katex .eqn-num:before {
|
||||
content: "(" counter(katexEqnNo) ")";
|
||||
content: '(' counter(katexEqnNo) ')';
|
||||
counter-increment: katexEqnNo;
|
||||
}
|
||||
.katex .mml-eqn-num:before {
|
||||
content: "(" counter(mmlEqnNo) ")";
|
||||
content: '(' counter(mmlEqnNo) ')';
|
||||
counter-increment: mmlEqnNo;
|
||||
}
|
||||
.katex .mtr-glue {
|
||||
|
|
@ -940,6 +938,3 @@
|
|||
padding-left: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
body {
|
||||
counter-reset: katexEqnNo mmlEqnNo;
|
||||
}
|
||||
|
|
@ -0,0 +1,106 @@
|
|||
.ProseMirror {
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol,
|
||||
ul > ul,
|
||||
ol > ol {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol,
|
||||
ol ol ol ol,
|
||||
ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
ol ol ol,
|
||||
ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
ul[data-type='taskList'] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--semi-color-border);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 4.071429px;
|
||||
top: -0.357143px;
|
||||
width: 6.714286px;
|
||||
height: 12.142857px;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
|
||||
transform: rotate(45deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
&[data-checked='true'] {
|
||||
color: var(--semi-color-text-2);
|
||||
|
||||
> span {
|
||||
background-color: var(--semi-color-primary);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
p {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.bubble-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--semi-color-nav-bg);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.bubble-memu-table-cell {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--semi-color-nav-bg);
|
||||
|
||||
&.row {
|
||||
column-gap: 8px;
|
||||
flex-direction: column;
|
||||
transform: translate(0, 70%);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,6 @@
|
|||
height: 100%;
|
||||
} /*box-shadow:0 0 2px #000;*/
|
||||
.jsmind-inner {
|
||||
moz-user-select: -moz-none;
|
||||
-moz-user-select: none;
|
||||
-o-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -111,12 +110,6 @@ jmnodes.theme-primary jmnode.selected {
|
|||
background-color: #f1c40f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-primary jmnode.root {
|
||||
}
|
||||
jmnodes.theme-primary jmexpander {
|
||||
}
|
||||
jmnodes.theme-primary jmexpander:hover {
|
||||
}
|
||||
|
||||
/* warning theme */
|
||||
jmnodes.theme-warning jmnode {
|
||||
|
|
@ -132,12 +125,6 @@ jmnodes.theme-warning jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-warning jmnode.root {
|
||||
}
|
||||
jmnodes.theme-warning jmexpander {
|
||||
}
|
||||
jmnodes.theme-warning jmexpander:hover {
|
||||
}
|
||||
|
||||
/* danger theme */
|
||||
jmnodes.theme-danger jmnode {
|
||||
|
|
@ -153,12 +140,6 @@ jmnodes.theme-danger jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-danger jmnode.root {
|
||||
}
|
||||
jmnodes.theme-danger jmexpander {
|
||||
}
|
||||
jmnodes.theme-danger jmexpander:hover {
|
||||
}
|
||||
|
||||
/* success theme */
|
||||
jmnodes.theme-success jmnode {
|
||||
|
|
@ -174,12 +155,6 @@ jmnodes.theme-success jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-success jmnode.root {
|
||||
}
|
||||
jmnodes.theme-success jmexpander {
|
||||
}
|
||||
jmnodes.theme-success jmexpander:hover {
|
||||
}
|
||||
|
||||
/* info theme */
|
||||
jmnodes.theme-info jmnode {
|
||||
|
|
@ -195,12 +170,6 @@ jmnodes.theme-info jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-info jmnode.root {
|
||||
}
|
||||
jmnodes.theme-info jmexpander {
|
||||
}
|
||||
jmnodes.theme-info jmexpander:hover {
|
||||
}
|
||||
|
||||
/* greensea theme */
|
||||
jmnodes.theme-greensea jmnode {
|
||||
|
|
@ -214,12 +183,6 @@ jmnodes.theme-greensea jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-greensea jmnode.root {
|
||||
}
|
||||
jmnodes.theme-greensea jmexpander {
|
||||
}
|
||||
jmnodes.theme-greensea jmexpander:hover {
|
||||
}
|
||||
|
||||
/* nephrite theme */
|
||||
jmnodes.theme-nephrite jmnode {
|
||||
|
|
@ -233,12 +196,6 @@ jmnodes.theme-nephrite jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-nephrite jmnode.root {
|
||||
}
|
||||
jmnodes.theme-nephrite jmexpander {
|
||||
}
|
||||
jmnodes.theme-nephrite jmexpander:hover {
|
||||
}
|
||||
|
||||
/* belizehole theme */
|
||||
jmnodes.theme-belizehole jmnode {
|
||||
|
|
@ -252,12 +209,6 @@ jmnodes.theme-belizehole jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-belizehole jmnode.root {
|
||||
}
|
||||
jmnodes.theme-belizehole jmexpander {
|
||||
}
|
||||
jmnodes.theme-belizehole jmexpander:hover {
|
||||
}
|
||||
|
||||
/* wisteria theme */
|
||||
jmnodes.theme-wisteria jmnode {
|
||||
|
|
@ -271,12 +222,6 @@ jmnodes.theme-wisteria jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-wisteria jmnode.root {
|
||||
}
|
||||
jmnodes.theme-wisteria jmexpander {
|
||||
}
|
||||
jmnodes.theme-wisteria jmexpander:hover {
|
||||
}
|
||||
|
||||
/* asphalt theme */
|
||||
jmnodes.theme-asphalt jmnode {
|
||||
|
|
@ -290,12 +235,6 @@ jmnodes.theme-asphalt jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-asphalt jmnode.root {
|
||||
}
|
||||
jmnodes.theme-asphalt jmexpander {
|
||||
}
|
||||
jmnodes.theme-asphalt jmexpander:hover {
|
||||
}
|
||||
|
||||
/* orange theme */
|
||||
jmnodes.theme-orange jmnode {
|
||||
|
|
@ -309,12 +248,6 @@ jmnodes.theme-orange jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-orange jmnode.root {
|
||||
}
|
||||
jmnodes.theme-orange jmexpander {
|
||||
}
|
||||
jmnodes.theme-orange jmexpander:hover {
|
||||
}
|
||||
|
||||
/* pumpkin theme */
|
||||
jmnodes.theme-pumpkin jmnode {
|
||||
|
|
@ -328,12 +261,6 @@ jmnodes.theme-pumpkin jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-pumpkin jmnode.root {
|
||||
}
|
||||
jmnodes.theme-pumpkin jmexpander {
|
||||
}
|
||||
jmnodes.theme-pumpkin jmexpander:hover {
|
||||
}
|
||||
|
||||
/* pomegranate theme */
|
||||
jmnodes.theme-pomegranate jmnode {
|
||||
|
|
@ -347,12 +274,6 @@ jmnodes.theme-pomegranate jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-pomegranate jmnode.root {
|
||||
}
|
||||
jmnodes.theme-pomegranate jmexpander {
|
||||
}
|
||||
jmnodes.theme-pomegranate jmexpander:hover {
|
||||
}
|
||||
|
||||
/* clouds theme */
|
||||
jmnodes.theme-clouds jmnode {
|
||||
|
|
@ -366,12 +287,6 @@ jmnodes.theme-clouds jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-clouds jmnode.root {
|
||||
}
|
||||
jmnodes.theme-clouds jmexpander {
|
||||
}
|
||||
jmnodes.theme-clouds jmexpander:hover {
|
||||
}
|
||||
|
||||
/* asbestos theme */
|
||||
jmnodes.theme-asbestos jmnode {
|
||||
|
|
@ -385,9 +300,3 @@ jmnodes.theme-asbestos jmnode.selected {
|
|||
background-color: #11f;
|
||||
color: #fff;
|
||||
}
|
||||
jmnodes.theme-asbestos jmnode.root {
|
||||
}
|
||||
jmnodes.theme-asbestos jmexpander {
|
||||
}
|
||||
jmnodes.theme-asbestos jmexpander:hover {
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
.ProseMirror {
|
||||
.is-empty {
|
||||
position: relative;
|
||||
|
||||
&.has-focus {
|
||||
&::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #aaa;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.node-codeBlock::before {
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
.ProseMirror {
|
||||
.search-result {
|
||||
background: rgb(255, 217, 0);
|
||||
}
|
||||
|
||||
.search-result-current {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,91 @@
|
|||
.ProseMirror {
|
||||
hr.selected-node {
|
||||
background-color: var(--node-selected-border-color);
|
||||
}
|
||||
|
||||
.node-status {
|
||||
.semi-tag-default {
|
||||
height: 27px;
|
||||
border: 1px solid var(--node-border-color);
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
.semi-tag-default {
|
||||
border: 1px solid var(--node-selected-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-codeBlock,
|
||||
.node-katex,
|
||||
.node-documentChildren,
|
||||
.node-documentReference {
|
||||
.render-wrapper {
|
||||
border: 1px solid var(--node-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.node-codeBlock,
|
||||
.node-katex {
|
||||
.render-wrapper {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.node-attachment,
|
||||
.node-banner,
|
||||
.node-iframe,
|
||||
.node-image,
|
||||
.node-katex,
|
||||
.node-mind,
|
||||
.node-codeBlock,
|
||||
.node-documentChildren,
|
||||
.node-documentReference {
|
||||
&:not(.has-focus) {
|
||||
::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.render-wrapper {
|
||||
position: relative;
|
||||
user-select: text;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--node-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
.render-wrapper {
|
||||
border: 1px solid var(--node-selected-border-color) !important;
|
||||
|
||||
&:hover {
|
||||
border-color: var(--node-selected-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-image,
|
||||
.node-attachment,
|
||||
.node-iframe,
|
||||
.node-mind,
|
||||
.node-banner {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
td,
|
||||
th {
|
||||
border-color: var(--node-selected-border-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,108 @@
|
|||
.ProseMirror {
|
||||
.tableWrapper {
|
||||
max-width: 100%;
|
||||
overflow: auto;
|
||||
margin-top: 0.75em;
|
||||
|
||||
&.has-focus {
|
||||
padding: 1em 0 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
|
||||
td,
|
||||
th {
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--semi-color-fill-2);
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 3px 5px;
|
||||
vertical-align: top;
|
||||
overflow: visible;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: var(--semi-color-fill-0);
|
||||
}
|
||||
|
||||
.selectedCell {
|
||||
border-style: double;
|
||||
border-color: rgb(0 101 255);
|
||||
background: var(--semi-color-info-light-hover);
|
||||
}
|
||||
|
||||
.grip-column {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.7em;
|
||||
left: 0;
|
||||
top: -1em;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.grip-row {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0.7em;
|
||||
top: 0;
|
||||
left: -1em;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.grip-table {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
top: -1em;
|
||||
left: -1em;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: #adf;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
.ProseMirror {
|
||||
.title {
|
||||
font-size: 2.4em;
|
||||
font-weight: bold;
|
||||
color: var(--semi-color-text-0);
|
||||
margin: 10px 0 22px;
|
||||
border-bottom: 1px solid var(--semi-color-border);
|
||||
|
||||
&.is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #aaa;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
.bubble-menu {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--semi-color-nav-bg);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.table-controller-wrapper {
|
||||
display: flex;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
box-shadow: var(--box-shadow);
|
||||
background-color: var(--semi-color-nav-bg);
|
||||
|
||||
&.row {
|
||||
column-gap: 8px;
|
||||
flex-direction: column;
|
||||
transform: translate(0, 70%);
|
||||
}
|
||||
}
|
||||
|
||||
.resizeable-image-container {
|
||||
width: 100%;
|
||||
font-size: 0;
|
||||
|
||||
&.left {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.center {
|
||||
text-align: center;
|
||||
}
|
||||
&.right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.resizeable-image-small {
|
||||
max-width: 200px;
|
||||
}
|
||||
.resizeable-image-medium {
|
||||
width: 50%;
|
||||
}
|
||||
.resizeable-image-large {
|
||||
width: 100%;
|
||||
}
|
||||
.resizeable-image-float-none {
|
||||
float: none;
|
||||
}
|
||||
}
|
||||
|
||||
.color {
|
||||
white-space: nowrap;
|
||||
|
||||
&::before {
|
||||
background-color: var(--color);
|
||||
border: 1px solid rgba(128, 128, 128, 0.3);
|
||||
border-radius: 2px;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
height: 1em;
|
||||
margin-bottom: 0.15em;
|
||||
margin-right: 0.1em;
|
||||
vertical-align: middle;
|
||||
width: 1em;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
body[theme-mode="dark"] {
|
||||
/*!
|
||||
Theme: GitHub Dark
|
||||
Description: Dark theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-dark
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #c9d1d9;
|
||||
background: #0d1117;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #ff7b72;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #d2a8ff;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #79c0ff;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #a5d6ff;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #ffa657;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #8b949e;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #7ee787;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #c9d1d9;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #1f6feb;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #f2cc60;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #c9d1d9;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #c9d1d9;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #aff5b4;
|
||||
background-color: #033a16;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #ffdcd7;
|
||||
background-color: #67060c;
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
}
|
||||
|
||||
img {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
/*!
|
||||
Theme: GitHub
|
||||
Description: Light theme as seen on github.com
|
||||
Author: github.com
|
||||
Maintainer: @Hirse
|
||||
Updated: 2021-05-15
|
||||
|
||||
Outdated base version: https://github.com/primer/github-syntax-light
|
||||
Current colors taken from GitHub's CSS
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
color: #24292e;
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.hljs-doctag,
|
||||
.hljs-keyword,
|
||||
.hljs-meta .hljs-keyword,
|
||||
.hljs-template-tag,
|
||||
.hljs-template-variable,
|
||||
.hljs-type,
|
||||
.hljs-variable.language_ {
|
||||
/* prettylights-syntax-keyword */
|
||||
color: #d73a49;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-title.class_,
|
||||
.hljs-title.class_.inherited__,
|
||||
.hljs-title.function_ {
|
||||
/* prettylights-syntax-entity */
|
||||
color: #6f42c1;
|
||||
}
|
||||
|
||||
.hljs-attr,
|
||||
.hljs-attribute,
|
||||
.hljs-literal,
|
||||
.hljs-meta,
|
||||
.hljs-number,
|
||||
.hljs-operator,
|
||||
.hljs-variable,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-id {
|
||||
/* prettylights-syntax-constant */
|
||||
color: #005cc5;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-string,
|
||||
.hljs-meta .hljs-string {
|
||||
/* prettylights-syntax-string */
|
||||
color: #032f62;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-symbol {
|
||||
/* prettylights-syntax-variable */
|
||||
color: #e36209;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-code,
|
||||
.hljs-formula {
|
||||
/* prettylights-syntax-comment */
|
||||
color: #6a737d;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-quote,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-pseudo {
|
||||
/* prettylights-syntax-entity-tag */
|
||||
color: #22863a;
|
||||
}
|
||||
|
||||
.hljs-subst {
|
||||
/* prettylights-syntax-storage-modifier-import */
|
||||
color: #24292e;
|
||||
}
|
||||
|
||||
.hljs-section {
|
||||
/* prettylights-syntax-markup-heading */
|
||||
color: #005cc5;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-bullet {
|
||||
/* prettylights-syntax-markup-list */
|
||||
color: #735c0f;
|
||||
}
|
||||
|
||||
.hljs-emphasis {
|
||||
/* prettylights-syntax-markup-italic */
|
||||
color: #24292e;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-strong {
|
||||
/* prettylights-syntax-markup-bold */
|
||||
color: #24292e;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
/* prettylights-syntax-markup-inserted */
|
||||
color: #22863a;
|
||||
background-color: #f0fff4;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
/* prettylights-syntax-markup-deleted */
|
||||
color: #b31d28;
|
||||
background-color: #ffeef0;
|
||||
}
|
||||
|
||||
.hljs-char.escape_,
|
||||
.hljs-link,
|
||||
.hljs-params,
|
||||
.hljs-property,
|
||||
.hljs-punctuation,
|
||||
.hljs-tag {
|
||||
/* purposely ignored */
|
||||
}
|
||||
|
|
@ -1,106 +1,7 @@
|
|||
@import '~@douyinfe/semi-ui/dist/css/semi.min.css';
|
||||
@import './var.scss';
|
||||
@import './extension.scss';
|
||||
@import './prosemirror.scss';
|
||||
@import './github.scss';
|
||||
@import './github-dark.scss';
|
||||
@import './jsmind.scss';
|
||||
@import './katex.scss';
|
||||
|
||||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
height: 100vh;
|
||||
height: var(--app-height);
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
|
||||
> div#__next {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
// display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
@import './reset.scss';
|
||||
@import './editor/index.scss';
|
||||
|
||||
.container {
|
||||
margin-right: auto;
|
||||
|
|
@ -178,27 +79,6 @@ a {
|
|||
color: var(--semi-color-text-0);
|
||||
}
|
||||
|
||||
.react-resizable {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.react-resizable-handle {
|
||||
position: absolute;
|
||||
bottom: -4px;
|
||||
left: 50%;
|
||||
width: 56px;
|
||||
height: 8px;
|
||||
background-color: #d9d9d9;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
margin-left: -28px;
|
||||
}
|
||||
|
||||
.react-resizable-handle-n,
|
||||
.react-resizable-handle-s {
|
||||
cursor: ns-resize;
|
||||
}
|
||||
|
||||
.semi-spin-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
|
|||
|
|
@ -1,483 +0,0 @@
|
|||
.collaboration-cursor__caret {
|
||||
border-left: 1px solid #0d0d0d;
|
||||
border-right: 1px solid #0d0d0d;
|
||||
margin-left: -1px;
|
||||
margin-right: -1px;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.collaboration-cursor__label {
|
||||
border-radius: 3px 3px 3px 0;
|
||||
color: #0d0d0d;
|
||||
font-size: 12px;
|
||||
font-style: normal;
|
||||
font-weight: 600;
|
||||
left: -1px;
|
||||
line-height: normal;
|
||||
padding: 0.1rem 0.3rem;
|
||||
position: absolute;
|
||||
top: -1.4em;
|
||||
user-select: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.ProseMirror {
|
||||
color: var(--semi-color-text-0);
|
||||
white-space: break-spaces;
|
||||
word-break: break-word;
|
||||
word-wrap: break-word;
|
||||
font-family: 'Chinese Quote', 'Segoe UI', Roboto, RobotoNum, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei',
|
||||
'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
letter-spacing: 0.008em;
|
||||
line-height: 1.74;
|
||||
outline: none !important;
|
||||
|
||||
&:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.is-empty {
|
||||
&.has-focus {
|
||||
&::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #aaa;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.node-codeBlock::before {
|
||||
transform: translate(10px, 10px);
|
||||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
border: 0;
|
||||
height: 2px;
|
||||
background: var(--semi-color-border);
|
||||
margin: 18px 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
padding-left: 28px;
|
||||
}
|
||||
|
||||
li > ul,
|
||||
li > ol,
|
||||
ul > ul,
|
||||
ol > ol {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol,
|
||||
ol ol ol ol,
|
||||
ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: decimal;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
ol ol ol,
|
||||
ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol,
|
||||
ol ol ol ol ol ol ol ol ol ol ol ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 2.4em;
|
||||
font-weight: bold;
|
||||
color: var(--semi-color-text-0);
|
||||
margin: 10px 0 22px;
|
||||
border-bottom: 1px solid var(--semi-color-border);
|
||||
|
||||
&.is-empty::before {
|
||||
content: attr(data-placeholder);
|
||||
float: left;
|
||||
color: #aaa;
|
||||
pointer-events: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.87em;
|
||||
margin: 26px 0 12px 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.6em;
|
||||
margin: 21px 0 12px 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3em;
|
||||
margin: 16px 0 12px 0;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.1em;
|
||||
margin: 14px 0 12px 0;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1em;
|
||||
margin: 5px 0 12px 0;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1em;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
h1:first-child,
|
||||
h2:first-child,
|
||||
h3:first-child,
|
||||
h4:first-child,
|
||||
h5:first-child,
|
||||
h6:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--semi-color-link);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
img {
|
||||
border-radius: var(--border-radius);
|
||||
border: 1px solid var(--semi-color-border);
|
||||
}
|
||||
|
||||
p {
|
||||
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'] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
> span {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 6px;
|
||||
display: block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid var(--semi-color-border);
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
|
||||
&::after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
left: 4.071429px;
|
||||
top: -0.357143px;
|
||||
width: 6.714286px;
|
||||
height: 12.142857px;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
|
||||
transform: rotate(45deg) scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
&[data-checked='true'] {
|
||||
color: var(--semi-color-text-2);
|
||||
|
||||
> span {
|
||||
background-color: var(--semi-color-primary);
|
||||
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
> div {
|
||||
p {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
blockquote {
|
||||
box-sizing: border-box;
|
||||
padding-left: 10px;
|
||||
border-left: 2px solid var(--semi-color-fill-2);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
code {
|
||||
cursor: text;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
padding: 4px;
|
||||
line-height: 1.3;
|
||||
background-color: var(--semi-color-fill-1);
|
||||
font-family: Consolas, Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
pre {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
counter-reset: line 0;
|
||||
display: flex;
|
||||
min-width: 48px;
|
||||
overflow-x: auto;
|
||||
line-height: 1.3;
|
||||
background-color: var(--semi-color-fill-0);
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5rem;
|
||||
margin: 8px;
|
||||
padding: 0;
|
||||
white-space: pre;
|
||||
background-color: transparent;
|
||||
|
||||
width: 100%;
|
||||
max-height: 370px;
|
||||
overflow: auto;
|
||||
overscroll-behavior: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
max-width: 100%;
|
||||
margin: 1em 0;
|
||||
overflow: auto;
|
||||
|
||||
&.has-focus {
|
||||
padding-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
table-layout: fixed;
|
||||
margin: 1em 0;
|
||||
|
||||
td,
|
||||
th {
|
||||
position: relative;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: var(--semi-color-fill-2);
|
||||
box-sizing: border-box;
|
||||
min-width: 1em;
|
||||
padding: 3px 5px;
|
||||
vertical-align: top;
|
||||
overflow: visible;
|
||||
|
||||
> * {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
th {
|
||||
font-weight: bold;
|
||||
background-color: rgb(244, 245, 247);
|
||||
}
|
||||
|
||||
.selectedCell {
|
||||
border-style: double;
|
||||
border-color: rgb(0 101 255);
|
||||
background: var(--semi-color-info-light-hover);
|
||||
}
|
||||
|
||||
.grip-column {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 0.7em;
|
||||
left: 0;
|
||||
top: -1em;
|
||||
margin-bottom: 3px;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.grip-row {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0.7em;
|
||||
top: 0;
|
||||
left: -1em;
|
||||
margin-right: 3px;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.grip-table {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
display: block;
|
||||
width: 0.8em;
|
||||
height: 0.8em;
|
||||
top: -1em;
|
||||
left: -1em;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
background: #ced4da;
|
||||
|
||||
&:hover,
|
||||
&.selected {
|
||||
background: var(--semi-color-info);
|
||||
}
|
||||
}
|
||||
|
||||
.column-resize-handle {
|
||||
background-color: #adf;
|
||||
bottom: -2px;
|
||||
position: absolute;
|
||||
right: -2px;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result {
|
||||
background: rgb(255, 217, 0);
|
||||
}
|
||||
|
||||
.search-result-current {
|
||||
background: rgb(255, 0, 0);
|
||||
}
|
||||
|
||||
/******* 选中样式 *******/
|
||||
hr.selected-node {
|
||||
background-color: rgb(0, 101, 255);
|
||||
}
|
||||
|
||||
.node-status {
|
||||
.semi-tag-default {
|
||||
border: 1px solid var(--semi-color-border);
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
.semi-tag-default {
|
||||
border: 1px solid rgb(0 101 255);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.node-codeBlock,
|
||||
.node-katex,
|
||||
.node-documentChildren,
|
||||
.node-documentReference {
|
||||
.render-wrapper {
|
||||
border: 1px solid var(--semi-color-border);
|
||||
}
|
||||
}
|
||||
|
||||
.node-codeBlock,
|
||||
.node-katex {
|
||||
.render-wrapper {
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
.node-attachment,
|
||||
.node-banner,
|
||||
.node-iframe,
|
||||
.node-image,
|
||||
.node-katex,
|
||||
.node-mind,
|
||||
.node-codeBlock,
|
||||
.node-documentChildren,
|
||||
.node-documentReference {
|
||||
&:not(.has-focus) {
|
||||
::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.render-wrapper {
|
||||
position: relative;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
.render-wrapper {
|
||||
border: 1px solid rgb(0 101 255) !important;
|
||||
background-color: #e0ebfa;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tableWrapper {
|
||||
::selection {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.selected-node {
|
||||
td,
|
||||
th {
|
||||
border-color: rgb(0 101 255);
|
||||
background-color: #e0ebfa;
|
||||
}
|
||||
}
|
||||
}
|
||||
/******* 选中样式 *******/
|
||||
}
|
||||
|
||||
.resize-cursor {
|
||||
cursor: ew-resize;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
|
@ -0,0 +1,94 @@
|
|||
/* Box sizing rules */
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Remove default margin */
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
p,
|
||||
figure,
|
||||
blockquote,
|
||||
dl,
|
||||
dd {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
|
||||
ul[role='list'],
|
||||
ol[role='list'] {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
/* Set core root defaults */
|
||||
html:focus-within {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Set core body defaults */
|
||||
body {
|
||||
height: 100vh;
|
||||
height: var(--app-height);
|
||||
text-rendering: optimizeSpeed;
|
||||
line-height: 1.5;
|
||||
|
||||
> div#__next {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* A elements that don't have a class get default styles */
|
||||
a:not([class]) {
|
||||
text-decoration-skip-ink: auto;
|
||||
}
|
||||
|
||||
/* Make images easier to work with */
|
||||
img,
|
||||
picture {
|
||||
display: inline-block;
|
||||
max-width: 100%;
|
||||
// display: block;
|
||||
}
|
||||
|
||||
/* Inherit fonts for inputs and buttons */
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
}
|
||||
|
||||
/* Remove all animations and transitions for people that prefer not to see them */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html:focus-within {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -1,4 +1,8 @@
|
|||
:root {
|
||||
--border-radius: 4px;
|
||||
--box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px;
|
||||
|
||||
--node-border-color: rgb(28 31 35 / 8%);
|
||||
--node-hover-border-color: #bacefd; // 自定义节点 hover
|
||||
--node-selected-border-color: rgb(0 101 255); // 自定义节点选中
|
||||
}
|
||||
|
|
|
|||
|
|
@ -73,6 +73,8 @@ importers:
|
|||
'@tiptap/extension-paragraph': ^2.0.0-beta.23
|
||||
'@tiptap/extension-placeholder': ^2.0.0-beta.47
|
||||
'@tiptap/extension-strike': ^2.0.0-beta.27
|
||||
'@tiptap/extension-subscript': ^2.0.0-beta.10
|
||||
'@tiptap/extension-superscript': ^2.0.0-beta.10
|
||||
'@tiptap/extension-table': ^2.0.0-beta.48
|
||||
'@tiptap/extension-table-cell': ^2.0.0-beta.20
|
||||
'@tiptap/extension-table-header': ^2.0.0-beta.22
|
||||
|
|
@ -150,6 +152,8 @@ importers:
|
|||
'@tiptap/extension-paragraph': 2.0.0-beta.23_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-placeholder': 2.0.0-beta.47_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-strike': 2.0.0-beta.27_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-subscript': 2.0.0-beta.10_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-superscript': 2.0.0-beta.10_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-table': 2.0.0-beta.48_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-table-cell': 2.0.0-beta.20_@tiptap+core@2.0.0-beta.171
|
||||
'@tiptap/extension-table-header': 2.0.0-beta.22_@tiptap+core@2.0.0-beta.171
|
||||
|
|
@ -1807,6 +1811,22 @@ packages:
|
|||
'@tiptap/core': 2.0.0-beta.171
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-subscript/2.0.0-beta.10_@tiptap+core@2.0.0-beta.171:
|
||||
resolution: {integrity: sha512-er8/1lp0Rb+SKwEioW0w4oVf3EkdQZ0WS/5kPBG4W0DncfUMT+bw5de76S3kRL9PLZ9UShAL7wuXtuiSi5QsMw==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.1
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.171
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-superscript/2.0.0-beta.10_@tiptap+core@2.0.0-beta.171:
|
||||
resolution: {integrity: sha512-TUUBS8XsD2MorGORYVlhGDH7wcc9diSbHscD4Dnz8pKWVR0JPUd/od4h5qSffDzAOKxtphTiX9LOFWk6zVooKg==}
|
||||
peerDependencies:
|
||||
'@tiptap/core': ^2.0.0-beta.1
|
||||
dependencies:
|
||||
'@tiptap/core': 2.0.0-beta.171
|
||||
dev: false
|
||||
|
||||
/@tiptap/extension-table-cell/2.0.0-beta.20_@tiptap+core@2.0.0-beta.171:
|
||||
resolution: {integrity: sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==}
|
||||
peerDependencies:
|
||||
|
|
|
|||
Loading…
Reference in New Issue