Merge pull request #15 from fantasticit/feat/editor

This commit is contained in:
fantasticit 2022-03-26 20:05:50 +08:00 committed by GitHub
commit fb3a9c01cd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 1104 additions and 1134 deletions

View File

@ -39,6 +39,8 @@
"@tiptap/extension-paragraph": "^2.0.0-beta.23", "@tiptap/extension-paragraph": "^2.0.0-beta.23",
"@tiptap/extension-placeholder": "^2.0.0-beta.47", "@tiptap/extension-placeholder": "^2.0.0-beta.47",
"@tiptap/extension-strike": "^2.0.0-beta.27", "@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": "^2.0.0-beta.48",
"@tiptap/extension-table-cell": "^2.0.0-beta.20", "@tiptap/extension-table-cell": "^2.0.0-beta.20",
"@tiptap/extension-table-header": "^2.0.0-beta.22", "@tiptap/extension-table-header": "^2.0.0-beta.22",

View File

@ -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>
}
/>
);
};

View File

@ -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>
}
/>
);
};

View File

@ -45,3 +45,5 @@ export * from './IconHeading3';
export * from './IconTableHeaderRow'; export * from './IconTableHeaderRow';
export * from './IconTableHeaderColumn'; export * from './IconTableHeaderColumn';
export * from './IconTableHeaderCell'; export * from './IconTableHeaderCell';
export * from './IconSub';
export * from './IconSup';

View File

@ -36,6 +36,8 @@ import { SearchNReplace } from './extensions/search';
import { SelectionExtension } from './extensions/selection'; import { SelectionExtension } from './extensions/selection';
import { Status } from './extensions/status'; import { Status } from './extensions/status';
import { Strike } from './extensions/strike'; import { Strike } from './extensions/strike';
import { Subscript } from './extensions/subscript';
import { Superscript } from './extensions/superscript';
import { Table } from './extensions/table'; import { Table } from './extensions/table';
import { TableCell } from './extensions/tableCell'; import { TableCell } from './extensions/tableCell';
import { TableHeader } from './extensions/tableHeader'; import { TableHeader } from './extensions/tableHeader';
@ -89,6 +91,8 @@ export const BaseKit = [
SelectionExtension, SelectionExtension,
Status, Status,
Strike, Strike,
Subscript,
Superscript,
Table, Table,
TableCell, TableCell,
TableHeader, TableHeader,

View File

@ -60,33 +60,29 @@ export const Emoji = Node.create({
new Plugin({ new Plugin({
key: new PluginKey('emojiPlaceholder'), key: new PluginKey('emojiPlaceholder'),
props: { props: {
decorations: (state) => { // decorations: (state) => {
if (!editor.isEditable) return; // if (!editor.isEditable) return;
// const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection); // if (!parent) {
if (!parent) { // return;
return; // }
} // const decorations: Decoration[] = [];
// const isEmpty = parent && parent.node.content.size === 0;
const decorations: Decoration[] = []; // const isSlash = parent && parent.node.textContent === ':';
const isEmpty = parent && parent.node.content.size === 0; // const isTopLevel = state.selection.$from.depth === 1;
const isSlash = parent && parent.node.textContent === ':'; // if (isTopLevel) {
const isTopLevel = state.selection.$from.depth === 1; // if (isSlash) {
// decorations.push(
if (isTopLevel) { // Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
if (isSlash) { // 'class': 'placeholder',
decorations.push( // 'data-placeholder': ` 继续输入进行过滤`,
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, { // })
'class': 'placeholder', // );
'data-placeholder': ` 继续输入进行过滤`, // }
}) // return DecorationSet.create(state.doc, decorations);
); // }
} // return null;
// },
return DecorationSet.create(state.doc, decorations);
}
return null;
},
}, },
}), }),
]; ];

View File

@ -42,43 +42,38 @@ export const EvokeMenu = Node.create({
new Plugin({ new Plugin({
key: new PluginKey('evokeMenuPlaceholder'), key: new PluginKey('evokeMenuPlaceholder'),
props: { props: {
decorations: (state) => { // decorations: (state) => {
if (!editor.isEditable) return; // if (!editor.isEditable) return;
// const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection);
const parent = findParentNode((node) => node.type.name === 'paragraph')(state.selection); // if (!parent) {
if (!parent) { // return;
return; // }
} // const decorations: Decoration[] = [];
// const isEmpty = parent && parent.node.content.size === 0;
const decorations: Decoration[] = []; // const isSlash = parent && parent.node.textContent === '/';
const isEmpty = parent && parent.node.content.size === 0; // const isTopLevel = state.selection.$from.depth === 1;
const isSlash = parent && parent.node.textContent === '/'; // const hasOtherChildren = parent && parent.node.content.childCount > 1;
const isTopLevel = state.selection.$from.depth === 1; // if (isTopLevel) {
const hasOtherChildren = parent && parent.node.content.childCount > 1; // if (isEmpty) {
// decorations.push(
if (isTopLevel) { // Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
if (isEmpty) { // 'class': 'is-empty',
decorations.push( // 'data-placeholder': '输入 / 唤起更多',
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',
if (isSlash && !hasOtherChildren) { // 'data-placeholder': ` 继续输入进行过滤`,
decorations.push( // })
Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, { // );
'class': 'is-empty', // }
'data-placeholder': ` 继续输入进行过滤`, // return DecorationSet.create(state.doc, decorations);
}) // }
); // return null;
} // },
return DecorationSet.create(state.doc, decorations);
}
return null;
},
}, },
}), }),
]; ];

View File

@ -0,0 +1,3 @@
import Subscript from '@tiptap/extension-subscript';
export { Subscript };

View File

@ -0,0 +1,3 @@
import Superscript from '@tiptap/extension-superscript';
export { Superscript };

View File

@ -105,7 +105,7 @@ export const TableCell = BuiltInTableCell.extend({
return !!cells?.some((cell, index) => isRowSelected(index)(editor.state.selection)); return !!cells?.some((cell, index) => isRowSelected(index)(editor.state.selection));
}, },
init: (dom, editor) => { init: (dom, editor) => {
dom.classList.add('table-controller-wrapper'); dom.classList.add('bubble-memu-table-cell');
dom.classList.add('row'); dom.classList.add('row');
ReactDOM.render( ReactDOM.render(
<> <>

View File

@ -94,7 +94,7 @@ export const TableHeader = BuiltInTableHeader.extend({
return !!cells?.some((cell, index) => isColumnSelected(index)(selection)); return !!cells?.some((cell, index) => isColumnSelected(index)(selection));
}, },
init: (dom, editor) => { init: (dom, editor) => {
dom.classList.add('table-controller-wrapper'); dom.classList.add('bubble-memu-table-cell');
ReactDOM.render( ReactDOM.render(
<Space> <Space>
<Tooltip content="向前插入一列"> <Tooltip content="向前插入一列">

View File

@ -1,6 +1,7 @@
import React from 'react'; import React from 'react';
import { Button } from '@douyinfe/semi-ui'; import { Button } from '@douyinfe/semi-ui';
import { IconBold, IconItalic, IconStrikeThrough, IconUnderline, IconCode } from '@douyinfe/semi-icons'; import { IconBold, IconItalic, IconStrikeThrough, IconUnderline, IconCode } from '@douyinfe/semi-icons';
import { IconSup, IconSub } from 'components/icons';
import { Tooltip } from 'components/tooltip'; import { Tooltip } from 'components/tooltip';
import { isTitleActive } from '../services/isActive'; import { isTitleActive } from '../services/isActive';
import { ColorMenu } from './color'; import { ColorMenu } from './color';
@ -62,6 +63,26 @@ export const BaseMenu: React.FC<{ editor: any }> = ({ editor }) => {
/> />
</Tooltip> </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} /> <ColorMenu editor={editor} />
</> </>
); );

View File

@ -21,7 +21,7 @@ import { Table } from '../extensions/table';
export const TableBubbleMenu = ({ editor }) => { export const TableBubbleMenu = ({ editor }) => {
return ( return (
<BubbleMenu <BubbleMenu
className={'bubble-menu table-bubble-menu'} className={'bubble-menu bubble-menu-table'}
editor={editor} editor={editor}
pluginKey="table-bubble-menu" pluginKey="table-bubble-menu"
shouldShow={() => editor.isActive(Table.name)} shouldShow={() => editor.isActive(Table.name)}

View File

@ -0,0 +1,13 @@
import { Mark } from './mark';
export class Subscript extends Mark {
matching() {
return this.DOMNode.nodeName === 'SUB';
}
data() {
return {
type: 'subscript',
};
}
}

View File

@ -0,0 +1,13 @@
import { Mark } from './mark';
export class Superscript extends Mark {
matching() {
return this.DOMNode.nodeName === 'SUP';
}
data() {
return {
type: 'superscript',
};
}
}

View File

@ -36,6 +36,8 @@ import { Bold } from './marks/bold';
import { Code } from './marks/code'; import { Code } from './marks/code';
import { Italic } from './marks/italic'; import { Italic } from './marks/italic';
import { Link } from './marks/link'; import { Link } from './marks/link';
import { Subscript } from './marks/subscript';
import { Superscript } from './marks/superscript';
import { Underline } from './marks/underline'; import { Underline } from './marks/underline';
export class Renderer { export class Renderer {
@ -84,7 +86,7 @@ export class Renderer {
BulletList, BulletList,
]; ];
this.marks = [Bold, Code, Italic, Link, Underline]; this.marks = [Bold, Code, Italic, Link, Subscript, Superscript, Underline];
} }
setDocument(document) { setDocument(document) {

View File

@ -22,6 +22,8 @@ import { OrderedList } from '../../../extensions/orderedList';
import { Paragraph } from '../../../extensions/paragraph'; import { Paragraph } from '../../../extensions/paragraph';
import { Status } from '../../../extensions/status'; import { Status } from '../../../extensions/status';
import { Strike } from '../../../extensions/strike'; import { Strike } from '../../../extensions/strike';
import { Subscript } from '../../../extensions/subscript';
import { Superscript } from '../../../extensions/superscript';
import { Table } from '../../../extensions/table'; import { Table } from '../../../extensions/table';
import { TableCell } from '../../../extensions/tableCell'; import { TableCell } from '../../../extensions/tableCell';
import { TableHeader } from '../../../extensions/tableHeader'; import { TableHeader } from '../../../extensions/tableHeader';
@ -67,6 +69,8 @@ const SerializerConfig = {
mixable: true, mixable: true,
expelEnclosingWhitespace: true, expelEnclosingWhitespace: true,
}, },
[Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
[Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
// FIXME: 如何导出 style // FIXME: 如何导出 style
[TextStyle.name]: { open: '', close: '', mixable: true, expelEnclosingWhitespace: true }, [TextStyle.name]: { open: '', close: '', mixable: true, expelEnclosingWhitespace: true },
...marks.reduce( ...marks.reduce(

View File

@ -2,7 +2,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 10px 0;
padding: 8px 16px; padding: 8px 16px;
border: 1px solid var(--semi-color-border); border: 1px solid var(--semi-color-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);

View File

@ -1,5 +1,4 @@
.wrap { .wrap {
margin: 12px 0;
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);

View File

@ -1,15 +1,10 @@
.wrap { .wrap {
margin-top: 12px; margin-top: 0.75em;
padding: 12px; padding: 12px;
border: 1px solid var(--semi-color-border); border: 1px solid var(--semi-color-border);
border-radius: var(--border-radius);
&.isEditable { &.isEditable {
background-color: var(--semi-color-fill-0);
&:hover {
background-color: var(--semi-color-fill-1);
}
.itemWrap { .itemWrap {
pointer-events: none; pointer-events: none;
@ -24,6 +19,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 12px; margin-top: 12px;
padding: 6px;
text-decoration: none; text-decoration: none;
color: var(--semi-color-text-1); color: var(--semi-color-text-1);
border-radius: var(--border-radius); border-radius: var(--border-radius);

View File

@ -76,8 +76,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
<Text type="tertiary">使</Text> <Text type="tertiary">使</Text>
)} )}
</div> </div>
<NodeViewContent></NodeViewContent>
</NodeViewWrapper> </NodeViewWrapper>
); );
}; };

View File

@ -1,23 +1,13 @@
.wrap { .wrap {
margin-top: 12px; margin-top: 0.75em;
border-radius: var(--border-radius);
&.isEditable { &.isEditable {
border-color: transparent !important;
padding: 12px; padding: 12px;
background-color: var(--semi-color-fill-0);
&:hover {
background-color: var(--semi-color-fill-1);
}
.itemWrap { .itemWrap {
pointer-events: none; pointer-events: none;
margin-top: 12px; margin-top: 12px;
&:hover {
color: var(--semi-color-text-1);
border-color: var(--semi-color-border);
}
} }
.empty { .empty {

View File

@ -35,6 +35,7 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
<Select <Select
placeholder="请选择文档" placeholder="请选择文档"
onChange={(v) => selectDoc(v)} onChange={(v) => selectDoc(v)}
style={{ maxWidth: 180 }}
{...(wikiId && documentId ? { value: `${wikiId}/${title}/${documentId}` } : {})} {...(wikiId && documentId ? { value: `${wikiId}/${title}/${documentId}` } : {})}
> >
{(tocs || []).map((toc) => ( {(tocs || []).map((toc) => (
@ -69,7 +70,6 @@ export const DocumentReferenceWrapper = ({ editor, node, updateAttributes }) =>
</div> </div>
)} )}
</div> </div>
<NodeViewContent></NodeViewContent>
</NodeViewWrapper> </NodeViewWrapper>
); );
}; };

View File

@ -20,7 +20,6 @@
flex: 1; flex: 1;
position: relative; position: relative;
width: 100%; width: 100%;
// height: 100%;
border-radius: var(--border-radius); border-radius: var(--border-radius);
overflow: hidden; overflow: hidden;
} }

View File

@ -2,7 +2,6 @@
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
margin: 10px 0;
padding: 8px 16px; padding: 8px 16px;
border: 1px solid var(--semi-color-border); border: 1px solid var(--semi-color-border);
border-radius: var(--border-radius); border-radius: var(--border-radius);

View File

@ -1,5 +1,6 @@
.wrap { .wrap {
margin: 8px 0;
display: inline-flex; display: inline-flex;
justify-content: center; justify-content: center;
padding: 0 8px;
transform: translateY(8px);
} }

View File

@ -28,6 +28,7 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => {
return ( return (
<NodeViewWrapper as="span" className={cls(styles.wrap, 'render-wrapper')} contentEditable={false}> <NodeViewWrapper as="span" className={cls(styles.wrap, 'render-wrapper')} contentEditable={false}>
<NodeViewContent />
{isEditable ? ( {isEditable ? (
<Popover <Popover
showArrow showArrow
@ -57,7 +58,7 @@ export const KatexWrapper = ({ editor, node, updateAttributes }) => {
) : ( ) : (
content content
)} )}
<NodeViewContent></NodeViewContent> <NodeViewContent />
</NodeViewWrapper> </NodeViewWrapper>
); );
}; };

View File

@ -1,7 +1,6 @@
.wrap { .wrap {
position: relative; position: relative;
max-width: 100%; max-width: 100%;
margin: 12px 0;
line-height: 0; line-height: 0;
overflow: visible; overflow: visible;
outline: none; outline: none;

View File

@ -14,6 +14,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
return ( return (
<NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}> <NodeViewWrapper as="span" className={cls(styles.wrap, 'status')}>
<NodeViewContent />
{isEditable ? ( {isEditable ? (
<Popover <Popover
showArrow showArrow
@ -44,7 +45,7 @@ export const StatusWrapper = ({ editor, node, updateAttributes }) => {
) : ( ) : (
content content
)} )}
{/* <NodeViewContent></NodeViewContent> */} <NodeViewContent />
</NodeViewWrapper> </NodeViewWrapper>
); );
}; };

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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';

View File

@ -1,15 +1,13 @@
.katex { .katex {
font-size: 1em;
text-rendering: auto; text-rendering: auto;
font: normal 1.21em;
line-height: 1.2;
text-indent: 0;
} }
.katex * { .katex * {
-ms-high-contrast-adjust: none !important; -ms-high-contrast-adjust: none !important;
border-color: currentColor; border-color: currentColor;
} }
.katex .katex-version:after { .katex .katex-version:after {
content: "0.15.2"; content: '0.15.2';
} }
.katex .katex-mathml { .katex .katex-mathml {
clip: rect(1px, 1px, 1px, 1px); clip: rect(1px, 1px, 1px, 1px);
@ -811,7 +809,7 @@
} }
.katex .stretchy:after, .katex .stretchy:after,
.katex .stretchy:before { .katex .stretchy:before {
content: ""; content: '';
} }
.katex .hide-tail { .katex .hide-tail {
overflow: hidden; overflow: hidden;
@ -888,11 +886,11 @@
padding: 0 0.03889em; padding: 0 0.03889em;
} }
.katex .eqn-num:before { .katex .eqn-num:before {
content: "(" counter(katexEqnNo) ")"; content: '(' counter(katexEqnNo) ')';
counter-increment: katexEqnNo; counter-increment: katexEqnNo;
} }
.katex .mml-eqn-num:before { .katex .mml-eqn-num:before {
content: "(" counter(mmlEqnNo) ")"; content: '(' counter(mmlEqnNo) ')';
counter-increment: mmlEqnNo; counter-increment: mmlEqnNo;
} }
.katex .mtr-glue { .katex .mtr-glue {
@ -940,6 +938,3 @@
padding-left: 2em; padding-left: 2em;
text-align: left; text-align: left;
} }
body {
counter-reset: katexEqnNo mmlEqnNo;
}

View File

@ -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;
}
}
}
}
}
}

View File

@ -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%);
}
}

View File

@ -14,7 +14,6 @@
height: 100%; height: 100%;
} /*box-shadow:0 0 2px #000;*/ } /*box-shadow:0 0 2px #000;*/
.jsmind-inner { .jsmind-inner {
moz-user-select: -moz-none;
-moz-user-select: none; -moz-user-select: none;
-o-user-select: none; -o-user-select: none;
-khtml-user-select: none; -khtml-user-select: none;
@ -111,12 +110,6 @@ jmnodes.theme-primary jmnode.selected {
background-color: #f1c40f; background-color: #f1c40f;
color: #fff; color: #fff;
} }
jmnodes.theme-primary jmnode.root {
}
jmnodes.theme-primary jmexpander {
}
jmnodes.theme-primary jmexpander:hover {
}
/* warning theme */ /* warning theme */
jmnodes.theme-warning jmnode { jmnodes.theme-warning jmnode {
@ -132,12 +125,6 @@ jmnodes.theme-warning jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-warning jmnode.root {
}
jmnodes.theme-warning jmexpander {
}
jmnodes.theme-warning jmexpander:hover {
}
/* danger theme */ /* danger theme */
jmnodes.theme-danger jmnode { jmnodes.theme-danger jmnode {
@ -153,12 +140,6 @@ jmnodes.theme-danger jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-danger jmnode.root {
}
jmnodes.theme-danger jmexpander {
}
jmnodes.theme-danger jmexpander:hover {
}
/* success theme */ /* success theme */
jmnodes.theme-success jmnode { jmnodes.theme-success jmnode {
@ -174,12 +155,6 @@ jmnodes.theme-success jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-success jmnode.root {
}
jmnodes.theme-success jmexpander {
}
jmnodes.theme-success jmexpander:hover {
}
/* info theme */ /* info theme */
jmnodes.theme-info jmnode { jmnodes.theme-info jmnode {
@ -195,12 +170,6 @@ jmnodes.theme-info jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-info jmnode.root {
}
jmnodes.theme-info jmexpander {
}
jmnodes.theme-info jmexpander:hover {
}
/* greensea theme */ /* greensea theme */
jmnodes.theme-greensea jmnode { jmnodes.theme-greensea jmnode {
@ -214,12 +183,6 @@ jmnodes.theme-greensea jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-greensea jmnode.root {
}
jmnodes.theme-greensea jmexpander {
}
jmnodes.theme-greensea jmexpander:hover {
}
/* nephrite theme */ /* nephrite theme */
jmnodes.theme-nephrite jmnode { jmnodes.theme-nephrite jmnode {
@ -233,12 +196,6 @@ jmnodes.theme-nephrite jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-nephrite jmnode.root {
}
jmnodes.theme-nephrite jmexpander {
}
jmnodes.theme-nephrite jmexpander:hover {
}
/* belizehole theme */ /* belizehole theme */
jmnodes.theme-belizehole jmnode { jmnodes.theme-belizehole jmnode {
@ -252,12 +209,6 @@ jmnodes.theme-belizehole jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-belizehole jmnode.root {
}
jmnodes.theme-belizehole jmexpander {
}
jmnodes.theme-belizehole jmexpander:hover {
}
/* wisteria theme */ /* wisteria theme */
jmnodes.theme-wisteria jmnode { jmnodes.theme-wisteria jmnode {
@ -271,12 +222,6 @@ jmnodes.theme-wisteria jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-wisteria jmnode.root {
}
jmnodes.theme-wisteria jmexpander {
}
jmnodes.theme-wisteria jmexpander:hover {
}
/* asphalt theme */ /* asphalt theme */
jmnodes.theme-asphalt jmnode { jmnodes.theme-asphalt jmnode {
@ -290,12 +235,6 @@ jmnodes.theme-asphalt jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-asphalt jmnode.root {
}
jmnodes.theme-asphalt jmexpander {
}
jmnodes.theme-asphalt jmexpander:hover {
}
/* orange theme */ /* orange theme */
jmnodes.theme-orange jmnode { jmnodes.theme-orange jmnode {
@ -309,12 +248,6 @@ jmnodes.theme-orange jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-orange jmnode.root {
}
jmnodes.theme-orange jmexpander {
}
jmnodes.theme-orange jmexpander:hover {
}
/* pumpkin theme */ /* pumpkin theme */
jmnodes.theme-pumpkin jmnode { jmnodes.theme-pumpkin jmnode {
@ -328,12 +261,6 @@ jmnodes.theme-pumpkin jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-pumpkin jmnode.root {
}
jmnodes.theme-pumpkin jmexpander {
}
jmnodes.theme-pumpkin jmexpander:hover {
}
/* pomegranate theme */ /* pomegranate theme */
jmnodes.theme-pomegranate jmnode { jmnodes.theme-pomegranate jmnode {
@ -347,12 +274,6 @@ jmnodes.theme-pomegranate jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-pomegranate jmnode.root {
}
jmnodes.theme-pomegranate jmexpander {
}
jmnodes.theme-pomegranate jmexpander:hover {
}
/* clouds theme */ /* clouds theme */
jmnodes.theme-clouds jmnode { jmnodes.theme-clouds jmnode {
@ -366,12 +287,6 @@ jmnodes.theme-clouds jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-clouds jmnode.root {
}
jmnodes.theme-clouds jmexpander {
}
jmnodes.theme-clouds jmexpander:hover {
}
/* asbestos theme */ /* asbestos theme */
jmnodes.theme-asbestos jmnode { jmnodes.theme-asbestos jmnode {
@ -385,9 +300,3 @@ jmnodes.theme-asbestos jmnode.selected {
background-color: #11f; background-color: #11f;
color: #fff; color: #fff;
} }
jmnodes.theme-asbestos jmnode.root {
}
jmnodes.theme-asbestos jmexpander {
}
jmnodes.theme-asbestos jmexpander:hover {
}

View File

@ -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);
}
}
}

View File

@ -0,0 +1,9 @@
.ProseMirror {
.search-result {
background: rgb(255, 217, 0);
}
.search-result-current {
background: rgb(255, 0, 0);
}
}

View File

@ -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);
}
}
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}
}

View File

@ -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;
}
}

View File

@ -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;
}
}

View File

@ -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 */
}

View File

@ -1,106 +1,7 @@
@import '~@douyinfe/semi-ui/dist/css/semi.min.css'; @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
@import './var.scss'; @import './var.scss';
@import './extension.scss'; @import './reset.scss';
@import './prosemirror.scss'; @import './editor/index.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;
}
.container { .container {
margin-right: auto; margin-right: auto;
@ -178,27 +79,6 @@ a {
color: var(--semi-color-text-0); 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 { .semi-spin-wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

View File

@ -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;
}

View File

@ -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;
}

View File

@ -1,4 +1,8 @@
:root { :root {
--border-radius: 4px; --border-radius: 4px;
--box-shadow: rgb(0 0 0 / 10%) 0px 0px 10px; --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); // 自定义节点选中
} }

View File

@ -73,6 +73,8 @@ importers:
'@tiptap/extension-paragraph': ^2.0.0-beta.23 '@tiptap/extension-paragraph': ^2.0.0-beta.23
'@tiptap/extension-placeholder': ^2.0.0-beta.47 '@tiptap/extension-placeholder': ^2.0.0-beta.47
'@tiptap/extension-strike': ^2.0.0-beta.27 '@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': ^2.0.0-beta.48
'@tiptap/extension-table-cell': ^2.0.0-beta.20 '@tiptap/extension-table-cell': ^2.0.0-beta.20
'@tiptap/extension-table-header': ^2.0.0-beta.22 '@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-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-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-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': 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-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 '@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 '@tiptap/core': 2.0.0-beta.171
dev: false 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: /@tiptap/extension-table-cell/2.0.0-beta.20_@tiptap+core@2.0.0-beta.171:
resolution: {integrity: sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==} resolution: {integrity: sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==}
peerDependencies: peerDependencies: