feat: improve style

packages/client/src/components/tiptap/extensions/emoji.ts

@@ -60,33 +60,29 @@ export const Emoji = Node.create({
       new Plugin({
         key: new PluginKey('emojiPlaceholder'),
         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;
-          },
         },
       }),
     ];

packages/client/src/components/tiptap/extensions/evokeMenu.tsx

@@ -42,43 +42,38 @@ export const EvokeMenu = Node.create({
       new Plugin({
         key: new PluginKey('evokeMenuPlaceholder'),
         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;
-          },
         },
       }),
     ];

packages/client/src/components/tiptap/extensions/tableCell.tsx

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

packages/client/src/components/tiptap/extensions/tableHeader.tsx

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

packages/client/src/components/tiptap/menus/table.tsx

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

packages/client/src/components/tiptap/wrappers/attachment/index.module.scss

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

packages/client/src/components/tiptap/wrappers/banner/index.module.scss

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

packages/client/src/components/tiptap/wrappers/documentChildren/index.module.scss

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

packages/client/src/components/tiptap/wrappers/documentChildren/index.tsx

@@ -76,8 +76,6 @@ export const DocumentChildrenWrapper = ({ editor, node, updateAttributes }) => {
           <Text type="tertiary">当前页面无法使用子文档</Text>
         )}
       </div>
-
-      <NodeViewContent></NodeViewContent>
     </NodeViewWrapper>
   );
 };

packages/client/src/components/tiptap/wrappers/documentReference/index.module.scss

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

packages/client/src/components/tiptap/wrappers/documentReference/index.tsx

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

packages/client/src/components/tiptap/wrappers/iframe/index.module.scss

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

packages/client/src/components/tiptap/wrappers/image/index.module.scss

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

packages/client/src/components/tiptap/wrappers/katex/index.module.scss

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

packages/client/src/components/tiptap/wrappers/katex/index.tsx

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

packages/client/src/components/tiptap/wrappers/mind/index.module.scss

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

packages/client/src/components/tiptap/wrappers/status/index.tsx

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

packages/client/src/styles/editor/base.scss

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

packages/client/src/styles/editor/code.scss

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

packages/client/src/styles/editor/collaboration.scss

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

packages/client/src/styles/editor/color.scss

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

packages/client/src/styles/editor/heading.scss

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

packages/client/src/styles/editor/index.scss

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

packages/client/src/styles/editor/katex.scss

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

packages/client/src/styles/editor/list.scss

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

packages/client/src/styles/editor/menu.scss

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

packages/client/src/styles/editor/mind.scss

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

packages/client/src/styles/editor/placeholder.scss

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

packages/client/src/styles/editor/selection.scss

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

packages/client/src/styles/editor/table.scss

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

packages/client/src/styles/editor/title.scss

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

packages/client/src/styles/github-dark.scss

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

packages/client/src/styles/github.scss

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

packages/client/src/styles/globals.scss

@@ -1,106 +1,7 @@
 @import '~@douyinfe/semi-ui/dist/css/semi.min.css';
 @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 {
   margin-right: auto;

packages/client/src/styles/prosemirror.scss

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

packages/client/src/styles/reset.scss

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

packages/client/src/styles/var.scss

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