feat: improve style

This commit is contained in:
fantasticit 2022-03-26 13:50:29 +08:00
parent b3fcbd5dca
commit c1295d8b6c
37 changed files with 962 additions and 1038 deletions

View File

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

View File

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

View File

@ -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(
<>

View File

@ -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="向前插入一列">

View File

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

View File

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

View File

@ -1,5 +1,4 @@
.wrap {
margin: 12px 0;
line-height: 0;
border-radius: var(--border-radius);
border: 1px solid var(--semi-color-border);

View File

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

View File

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

View File

@ -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 {

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

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,13 @@
@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 './selection.scss';
@import './table.scss';
@import './title.scss';

View File

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

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%;
} /*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 {
}

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,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,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 './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;

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 {
--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); // 自定义节点选中
}