From c1295d8b6c7bafef3cd3bcb47e5a8f6a06c22279 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 26 Mar 2022 13:50:29 +0800
Subject: [PATCH 1/3] feat: improve style

---
 .../src/components/tiptap/extensions/emoji.ts |  50 +-
 .../tiptap/extensions/evokeMenu.tsx           |  69 ++-
 .../tiptap/extensions/tableCell.tsx           |   2 +-
 .../tiptap/extensions/tableHeader.tsx         |   2 +-
 .../src/components/tiptap/menus/table.tsx     |   2 +-
 .../wrappers/attachment/index.module.scss     |   1 -
 .../tiptap/wrappers/banner/index.module.scss  |   1 -
 .../documentChildren/index.module.scss        |  10 +-
 .../wrappers/documentChildren/index.tsx       |   2 -
 .../documentReference/index.module.scss       |  14 +-
 .../wrappers/documentReference/index.tsx      |   2 +-
 .../tiptap/wrappers/iframe/index.module.scss  |   1 -
 .../tiptap/wrappers/image/index.module.scss   |   1 -
 .../tiptap/wrappers/katex/index.module.scss   |   3 +-
 .../tiptap/wrappers/katex/index.tsx           |   3 +-
 .../tiptap/wrappers/mind/index.module.scss    |   1 -
 .../tiptap/wrappers/status/index.tsx          |   3 +-
 packages/client/src/styles/editor/base.scss   |  53 ++
 packages/client/src/styles/editor/code.scss   | 277 ++++++++++
 .../src/styles/editor/collaboration.scss      |  24 +
 packages/client/src/styles/editor/color.scss  |  16 +
 .../client/src/styles/editor/heading.scss     |  40 ++
 packages/client/src/styles/editor/index.scss  |  13 +
 .../client/src/styles/{ => editor}/katex.scss |  15 +-
 packages/client/src/styles/editor/list.scss   | 106 ++++
 packages/client/src/styles/editor/menu.scss   |  23 +
 .../styles/{jsmind.scss => editor/mind.scss}  |  91 ----
 .../client/src/styles/editor/placeholder.scss |  19 +
 .../client/src/styles/editor/selection.scss   |  91 ++++
 packages/client/src/styles/editor/table.scss  | 108 ++++
 packages/client/src/styles/editor/title.scss  |  17 +
 packages/client/src/styles/github-dark.scss   | 131 -----
 packages/client/src/styles/github.scss        | 125 -----
 packages/client/src/styles/globals.scss       | 103 +---
 packages/client/src/styles/prosemirror.scss   | 483 ------------------
 packages/client/src/styles/reset.scss         |  94 ++++
 packages/client/src/styles/var.scss           |   4 +
 37 files changed, 962 insertions(+), 1038 deletions(-)
 create mode 100644 packages/client/src/styles/editor/base.scss
 create mode 100644 packages/client/src/styles/editor/code.scss
 create mode 100644 packages/client/src/styles/editor/collaboration.scss
 create mode 100644 packages/client/src/styles/editor/color.scss
 create mode 100644 packages/client/src/styles/editor/heading.scss
 create mode 100644 packages/client/src/styles/editor/index.scss
 rename packages/client/src/styles/{ => editor}/katex.scss (98%)
 create mode 100644 packages/client/src/styles/editor/list.scss
 create mode 100644 packages/client/src/styles/editor/menu.scss
 rename packages/client/src/styles/{jsmind.scss => editor/mind.scss} (75%)
 create mode 100644 packages/client/src/styles/editor/placeholder.scss
 create mode 100644 packages/client/src/styles/editor/selection.scss
 create mode 100644 packages/client/src/styles/editor/table.scss
 create mode 100644 packages/client/src/styles/editor/title.scss
 delete mode 100644 packages/client/src/styles/github-dark.scss
 delete mode 100644 packages/client/src/styles/github.scss
 delete mode 100644 packages/client/src/styles/prosemirror.scss
 create mode 100644 packages/client/src/styles/reset.scss

diff --git a/packages/client/src/components/tiptap/extensions/emoji.ts b/packages/client/src/components/tiptap/extensions/emoji.ts
index 59c09133..260e168e 100644
--- a/packages/client/src/components/tiptap/extensions/emoji.ts
+++ b/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) => {
-            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;
+          // },
         },
       }),
     ];
diff --git a/packages/client/src/components/tiptap/extensions/evokeMenu.tsx b/packages/client/src/components/tiptap/extensions/evokeMenu.tsx
index d9e397e3..976b50f5 100644
--- a/packages/client/src/components/tiptap/extensions/evokeMenu.tsx
+++ b/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) => {
-            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;
+          // },
         },
       }),
     ];
diff --git a/packages/client/src/components/tiptap/extensions/tableCell.tsx b/packages/client/src/components/tiptap/extensions/tableCell.tsx
index f3f80654..d6816567 100644
--- a/packages/client/src/components/tiptap/extensions/tableCell.tsx
+++ b/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(
                 <>
diff --git a/packages/client/src/components/tiptap/extensions/tableHeader.tsx b/packages/client/src/components/tiptap/extensions/tableHeader.tsx
index acd512c5..52c939ae 100644
--- a/packages/client/src/components/tiptap/extensions/tableHeader.tsx
+++ b/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="向前插入一列">
diff --git a/packages/client/src/components/tiptap/menus/table.tsx b/packages/client/src/components/tiptap/menus/table.tsx
index be0f0889..a6ab412a 100644
--- a/packages/client/src/components/tiptap/menus/table.tsx
+++ b/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)}
diff --git a/packages/client/src/components/tiptap/wrappers/attachment/index.module.scss b/packages/client/src/components/tiptap/wrappers/attachment/index.module.scss
index 977f95be..b2527f9c 100644
--- a/packages/client/src/components/tiptap/wrappers/attachment/index.module.scss
+++ b/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);
diff --git a/packages/client/src/components/tiptap/wrappers/banner/index.module.scss b/packages/client/src/components/tiptap/wrappers/banner/index.module.scss
index 6f0fb556..cb67a8a3 100644
--- a/packages/client/src/components/tiptap/wrappers/banner/index.module.scss
+++ b/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);
diff --git a/packages/client/src/components/tiptap/wrappers/documentChildren/index.module.scss b/packages/client/src/components/tiptap/wrappers/documentChildren/index.module.scss
index 60706301..b2ca9a63 100644
--- a/packages/client/src/components/tiptap/wrappers/documentChildren/index.module.scss
+++ b/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);
diff --git a/packages/client/src/components/tiptap/wrappers/documentChildren/index.tsx b/packages/client/src/components/tiptap/wrappers/documentChildren/index.tsx
index 05864b5e..eab2942c 100644
--- a/packages/client/src/components/tiptap/wrappers/documentChildren/index.tsx
+++ b/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>
   );
 };
diff --git a/packages/client/src/components/tiptap/wrappers/documentReference/index.module.scss b/packages/client/src/components/tiptap/wrappers/documentReference/index.module.scss
index 1ce1e9fb..3c902e5a 100644
--- a/packages/client/src/components/tiptap/wrappers/documentReference/index.module.scss
+++ b/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 {
diff --git a/packages/client/src/components/tiptap/wrappers/documentReference/index.tsx b/packages/client/src/components/tiptap/wrappers/documentReference/index.tsx
index 9e993030..6d72abc5 100644
--- a/packages/client/src/components/tiptap/wrappers/documentReference/index.tsx
+++ b/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>
   );
 };
diff --git a/packages/client/src/components/tiptap/wrappers/iframe/index.module.scss b/packages/client/src/components/tiptap/wrappers/iframe/index.module.scss
index 25c60abf..96fa35cc 100644
--- a/packages/client/src/components/tiptap/wrappers/iframe/index.module.scss
+++ b/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;
   }
diff --git a/packages/client/src/components/tiptap/wrappers/image/index.module.scss b/packages/client/src/components/tiptap/wrappers/image/index.module.scss
index d176beb9..64f9665d 100644
--- a/packages/client/src/components/tiptap/wrappers/image/index.module.scss
+++ b/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);
diff --git a/packages/client/src/components/tiptap/wrappers/katex/index.module.scss b/packages/client/src/components/tiptap/wrappers/katex/index.module.scss
index a77831f1..929c93a1 100644
--- a/packages/client/src/components/tiptap/wrappers/katex/index.module.scss
+++ b/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);
 }
diff --git a/packages/client/src/components/tiptap/wrappers/katex/index.tsx b/packages/client/src/components/tiptap/wrappers/katex/index.tsx
index 331bc0fb..584ae6ee 100644
--- a/packages/client/src/components/tiptap/wrappers/katex/index.tsx
+++ b/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>
   );
 };
diff --git a/packages/client/src/components/tiptap/wrappers/mind/index.module.scss b/packages/client/src/components/tiptap/wrappers/mind/index.module.scss
index 559513e6..d5d54015 100644
--- a/packages/client/src/components/tiptap/wrappers/mind/index.module.scss
+++ b/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;
diff --git a/packages/client/src/components/tiptap/wrappers/status/index.tsx b/packages/client/src/components/tiptap/wrappers/status/index.tsx
index ff00f361..2305563e 100644
--- a/packages/client/src/components/tiptap/wrappers/status/index.tsx
+++ b/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>
   );
 };
diff --git a/packages/client/src/styles/editor/base.scss b/packages/client/src/styles/editor/base.scss
new file mode 100644
index 00000000..43800d53
--- /dev/null
+++ b/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;
+}
diff --git a/packages/client/src/styles/editor/code.scss b/packages/client/src/styles/editor/code.scss
new file mode 100644
index 00000000..721597c6
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/client/src/styles/editor/collaboration.scss b/packages/client/src/styles/editor/collaboration.scss
new file mode 100644
index 00000000..44646442
--- /dev/null
+++ b/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;
+}
diff --git a/packages/client/src/styles/editor/color.scss b/packages/client/src/styles/editor/color.scss
new file mode 100644
index 00000000..d24f364e
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/client/src/styles/editor/heading.scss b/packages/client/src/styles/editor/heading.scss
new file mode 100644
index 00000000..9868183b
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/packages/client/src/styles/editor/index.scss b/packages/client/src/styles/editor/index.scss
new file mode 100644
index 00000000..68e70f27
--- /dev/null
+++ b/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';
diff --git a/packages/client/src/styles/katex.scss b/packages/client/src/styles/editor/katex.scss
similarity index 98%
rename from packages/client/src/styles/katex.scss
rename to packages/client/src/styles/editor/katex.scss
index 3ee29c9d..758653f6 100644
--- a/packages/client/src/styles/katex.scss
+++ b/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;
-}
diff --git a/packages/client/src/styles/editor/list.scss b/packages/client/src/styles/editor/list.scss
new file mode 100644
index 00000000..b09c6f3a
--- /dev/null
+++ b/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;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/client/src/styles/editor/menu.scss b/packages/client/src/styles/editor/menu.scss
new file mode 100644
index 00000000..6910903d
--- /dev/null
+++ b/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%);
+  }
+}
diff --git a/packages/client/src/styles/jsmind.scss b/packages/client/src/styles/editor/mind.scss
similarity index 75%
rename from packages/client/src/styles/jsmind.scss
rename to packages/client/src/styles/editor/mind.scss
index 9965c707..05eb2f76 100644
--- a/packages/client/src/styles/jsmind.scss
+++ b/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 {
-}
diff --git a/packages/client/src/styles/editor/placeholder.scss b/packages/client/src/styles/editor/placeholder.scss
new file mode 100644
index 00000000..4c670e0e
--- /dev/null
+++ b/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);
+    }
+  }
+}
diff --git a/packages/client/src/styles/editor/selection.scss b/packages/client/src/styles/editor/selection.scss
new file mode 100644
index 00000000..ffc6d994
--- /dev/null
+++ b/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);
+      }
+    }
+  }
+}
diff --git a/packages/client/src/styles/editor/table.scss b/packages/client/src/styles/editor/table.scss
new file mode 100644
index 00000000..d8325ce3
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/packages/client/src/styles/editor/title.scss b/packages/client/src/styles/editor/title.scss
new file mode 100644
index 00000000..b4bd444e
--- /dev/null
+++ b/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;
+    }
+  }
+}
diff --git a/packages/client/src/styles/github-dark.scss b/packages/client/src/styles/github-dark.scss
deleted file mode 100644
index 9828a05e..00000000
--- a/packages/client/src/styles/github-dark.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/packages/client/src/styles/github.scss b/packages/client/src/styles/github.scss
deleted file mode 100644
index 7024045d..00000000
--- a/packages/client/src/styles/github.scss
+++ /dev/null
@@ -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 */
-}
diff --git a/packages/client/src/styles/globals.scss b/packages/client/src/styles/globals.scss
index c7749036..9d8800a1 100644
--- a/packages/client/src/styles/globals.scss
+++ b/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 './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;
diff --git a/packages/client/src/styles/prosemirror.scss b/packages/client/src/styles/prosemirror.scss
deleted file mode 100644
index 17f22f6e..00000000
--- a/packages/client/src/styles/prosemirror.scss
+++ /dev/null
@@ -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;
-}
diff --git a/packages/client/src/styles/reset.scss b/packages/client/src/styles/reset.scss
new file mode 100644
index 00000000..96515677
--- /dev/null
+++ b/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;
+}
diff --git a/packages/client/src/styles/var.scss b/packages/client/src/styles/var.scss
index 889c8156..10d70732 100644
--- a/packages/client/src/styles/var.scss
+++ b/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); // 自定义节点选中
 }

From fd4c2de11defc2242dd9215494e8c4e6e5258cde Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 26 Mar 2022 19:22:14 +0800
Subject: [PATCH 2/3] feat: improve style

---
 packages/client/src/styles/editor/index.scss  |  1 +
 packages/client/src/styles/editor/search.scss |  9 +++
 packages/client/src/styles/extension.scss     | 74 -------------------
 packages/client/src/styles/globals.scss       | 21 ------
 4 files changed, 10 insertions(+), 95 deletions(-)
 create mode 100644 packages/client/src/styles/editor/search.scss
 delete mode 100644 packages/client/src/styles/extension.scss

diff --git a/packages/client/src/styles/editor/index.scss b/packages/client/src/styles/editor/index.scss
index 68e70f27..2944dbfd 100644
--- a/packages/client/src/styles/editor/index.scss
+++ b/packages/client/src/styles/editor/index.scss
@@ -8,6 +8,7 @@
 @import './menu.scss';
 @import './mind.scss';
 @import './placeholder.scss';
+@import './search.scss';
 @import './selection.scss';
 @import './table.scss';
 @import './title.scss';
diff --git a/packages/client/src/styles/editor/search.scss b/packages/client/src/styles/editor/search.scss
new file mode 100644
index 00000000..03b172e1
--- /dev/null
+++ b/packages/client/src/styles/editor/search.scss
@@ -0,0 +1,9 @@
+.ProseMirror {
+  .search-result {
+    background: rgb(255, 217, 0);
+  }
+
+  .search-result-current {
+    background: rgb(255, 0, 0);
+  }
+}
diff --git a/packages/client/src/styles/extension.scss b/packages/client/src/styles/extension.scss
deleted file mode 100644
index 33805924..00000000
--- a/packages/client/src/styles/extension.scss
+++ /dev/null
@@ -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;
-  }
-}
diff --git a/packages/client/src/styles/globals.scss b/packages/client/src/styles/globals.scss
index 9d8800a1..02d5295f 100644
--- a/packages/client/src/styles/globals.scss
+++ b/packages/client/src/styles/globals.scss
@@ -79,27 +79,6 @@
   color: var(--semi-color-text-0);
 }
 
-.react-resizable {
-  position: relative;
-}
-
-.react-resizable-handle {
-  position: absolute;
-  bottom: -4px;
-  left: 50%;
-  width: 56px;
-  height: 8px;
-  background-color: #d9d9d9;
-  border-radius: 4px;
-  position: absolute;
-  margin-left: -28px;
-}
-
-.react-resizable-handle-n,
-.react-resizable-handle-s {
-  cursor: ns-resize;
-}
-
 .semi-spin-wrapper {
   display: flex;
   flex-direction: column;

From f0e7950c5f7fa4b7314580d9ef643c7088ec72a4 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Sat, 26 Mar 2022 20:05:19 +0800
Subject: [PATCH 3/3] feat: add sub/sup script support

---
 packages/client/package.json                  |  2 ++
 .../client/src/components/icons/IconSub.tsx   | 22 +++++++++++++++++++
 .../client/src/components/icons/IconSup.tsx   | 22 +++++++++++++++++++
 .../client/src/components/icons/index.tsx     |  2 ++
 .../client/src/components/tiptap/basekit.tsx  |  4 ++++
 .../components/tiptap/extensions/subscript.ts |  3 +++
 .../tiptap/extensions/superscript.ts          |  3 +++
 .../src/components/tiptap/menus/baseMenu.tsx  | 21 ++++++++++++++++++
 .../htmlToProsemirror/marks/subscript.ts      | 13 +++++++++++
 .../htmlToProsemirror/marks/superscript.ts    | 13 +++++++++++
 .../markdown/htmlToProsemirror/renderer.ts    |  4 +++-
 .../markdown/prosemirrorToMarkdown/index.ts   |  4 ++++
 pnpm-lock.yaml                                | 20 +++++++++++++++++
 13 files changed, 132 insertions(+), 1 deletion(-)
 create mode 100644 packages/client/src/components/icons/IconSub.tsx
 create mode 100644 packages/client/src/components/icons/IconSup.tsx
 create mode 100644 packages/client/src/components/tiptap/extensions/subscript.ts
 create mode 100644 packages/client/src/components/tiptap/extensions/superscript.ts
 create mode 100644 packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/subscript.ts
 create mode 100644 packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/superscript.ts

diff --git a/packages/client/package.json b/packages/client/package.json
index 83e9cf6c..a7d43d8f 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -39,6 +39,8 @@
     "@tiptap/extension-paragraph": "^2.0.0-beta.23",
     "@tiptap/extension-placeholder": "^2.0.0-beta.47",
     "@tiptap/extension-strike": "^2.0.0-beta.27",
+    "@tiptap/extension-subscript": "^2.0.0-beta.10",
+    "@tiptap/extension-superscript": "^2.0.0-beta.10",
     "@tiptap/extension-table": "^2.0.0-beta.48",
     "@tiptap/extension-table-cell": "^2.0.0-beta.20",
     "@tiptap/extension-table-header": "^2.0.0-beta.22",
diff --git a/packages/client/src/components/icons/IconSub.tsx b/packages/client/src/components/icons/IconSub.tsx
new file mode 100644
index 00000000..6eb2a3ef
--- /dev/null
+++ b/packages/client/src/components/icons/IconSub.tsx
@@ -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>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/IconSup.tsx b/packages/client/src/components/icons/IconSup.tsx
new file mode 100644
index 00000000..f2e7b0d1
--- /dev/null
+++ b/packages/client/src/components/icons/IconSup.tsx
@@ -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>
+      }
+    />
+  );
+};
diff --git a/packages/client/src/components/icons/index.tsx b/packages/client/src/components/icons/index.tsx
index fb4feb8f..2a157225 100644
--- a/packages/client/src/components/icons/index.tsx
+++ b/packages/client/src/components/icons/index.tsx
@@ -45,3 +45,5 @@ export * from './IconHeading3';
 export * from './IconTableHeaderRow';
 export * from './IconTableHeaderColumn';
 export * from './IconTableHeaderCell';
+export * from './IconSub';
+export * from './IconSup';
diff --git a/packages/client/src/components/tiptap/basekit.tsx b/packages/client/src/components/tiptap/basekit.tsx
index e4fd19e2..f038dce9 100644
--- a/packages/client/src/components/tiptap/basekit.tsx
+++ b/packages/client/src/components/tiptap/basekit.tsx
@@ -36,6 +36,8 @@ import { SearchNReplace } from './extensions/search';
 import { SelectionExtension } from './extensions/selection';
 import { Status } from './extensions/status';
 import { Strike } from './extensions/strike';
+import { Subscript } from './extensions/subscript';
+import { Superscript } from './extensions/superscript';
 import { Table } from './extensions/table';
 import { TableCell } from './extensions/tableCell';
 import { TableHeader } from './extensions/tableHeader';
@@ -89,6 +91,8 @@ export const BaseKit = [
   SelectionExtension,
   Status,
   Strike,
+  Subscript,
+  Superscript,
   Table,
   TableCell,
   TableHeader,
diff --git a/packages/client/src/components/tiptap/extensions/subscript.ts b/packages/client/src/components/tiptap/extensions/subscript.ts
new file mode 100644
index 00000000..18c9f724
--- /dev/null
+++ b/packages/client/src/components/tiptap/extensions/subscript.ts
@@ -0,0 +1,3 @@
+import Subscript from '@tiptap/extension-subscript';
+
+export { Subscript };
diff --git a/packages/client/src/components/tiptap/extensions/superscript.ts b/packages/client/src/components/tiptap/extensions/superscript.ts
new file mode 100644
index 00000000..2d1ce12e
--- /dev/null
+++ b/packages/client/src/components/tiptap/extensions/superscript.ts
@@ -0,0 +1,3 @@
+import Superscript from '@tiptap/extension-superscript';
+
+export { Superscript };
diff --git a/packages/client/src/components/tiptap/menus/baseMenu.tsx b/packages/client/src/components/tiptap/menus/baseMenu.tsx
index 082b5122..fc9f59f0 100644
--- a/packages/client/src/components/tiptap/menus/baseMenu.tsx
+++ b/packages/client/src/components/tiptap/menus/baseMenu.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Button } from '@douyinfe/semi-ui';
 import { IconBold, IconItalic, IconStrikeThrough, IconUnderline, IconCode } from '@douyinfe/semi-icons';
+import { IconSup, IconSub } from 'components/icons';
 import { Tooltip } from 'components/tooltip';
 import { isTitleActive } from '../services/isActive';
 import { ColorMenu } from './color';
@@ -62,6 +63,26 @@ export const BaseMenu: React.FC<{ editor: any }> = ({ editor }) => {
         />
       </Tooltip>
 
+      <Tooltip content="上标">
+        <Button
+          theme={editor.isActive('superscript') ? 'light' : 'borderless'}
+          type="tertiary"
+          icon={<IconSup />}
+          onClick={() => editor.chain().focus().toggleSuperscript().run()}
+          disabled={isTitleActive(editor)}
+        />
+      </Tooltip>
+
+      <Tooltip content="下标">
+        <Button
+          theme={editor.isActive('subscript') ? 'light' : 'borderless'}
+          type="tertiary"
+          icon={<IconSub />}
+          onClick={() => editor.chain().focus().toggleSubscript().run()}
+          disabled={isTitleActive(editor)}
+        />
+      </Tooltip>
+
       <ColorMenu editor={editor} />
     </>
   );
diff --git a/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/subscript.ts b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/subscript.ts
new file mode 100644
index 00000000..df27821d
--- /dev/null
+++ b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/subscript.ts
@@ -0,0 +1,13 @@
+import { Mark } from './mark';
+
+export class Subscript extends Mark {
+  matching() {
+    return this.DOMNode.nodeName === 'SUB';
+  }
+
+  data() {
+    return {
+      type: 'subscript',
+    };
+  }
+}
diff --git a/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/superscript.ts b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/superscript.ts
new file mode 100644
index 00000000..500928c4
--- /dev/null
+++ b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/marks/superscript.ts
@@ -0,0 +1,13 @@
+import { Mark } from './mark';
+
+export class Superscript extends Mark {
+  matching() {
+    return this.DOMNode.nodeName === 'SUP';
+  }
+
+  data() {
+    return {
+      type: 'superscript',
+    };
+  }
+}
diff --git a/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/renderer.ts b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/renderer.ts
index e21ddda7..5f33c119 100644
--- a/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/renderer.ts
+++ b/packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/renderer.ts
@@ -36,6 +36,8 @@ import { Bold } from './marks/bold';
 import { Code } from './marks/code';
 import { Italic } from './marks/italic';
 import { Link } from './marks/link';
+import { Subscript } from './marks/subscript';
+import { Superscript } from './marks/superscript';
 import { Underline } from './marks/underline';
 
 export class Renderer {
@@ -84,7 +86,7 @@ export class Renderer {
       BulletList,
     ];
 
-    this.marks = [Bold, Code, Italic, Link, Underline];
+    this.marks = [Bold, Code, Italic, Link, Subscript, Superscript, Underline];
   }
 
   setDocument(document) {
diff --git a/packages/client/src/components/tiptap/services/markdown/prosemirrorToMarkdown/index.ts b/packages/client/src/components/tiptap/services/markdown/prosemirrorToMarkdown/index.ts
index 04a76722..9b1ce7ad 100644
--- a/packages/client/src/components/tiptap/services/markdown/prosemirrorToMarkdown/index.ts
+++ b/packages/client/src/components/tiptap/services/markdown/prosemirrorToMarkdown/index.ts
@@ -22,6 +22,8 @@ import { OrderedList } from '../../../extensions/orderedList';
 import { Paragraph } from '../../../extensions/paragraph';
 import { Status } from '../../../extensions/status';
 import { Strike } from '../../../extensions/strike';
+import { Subscript } from '../../../extensions/subscript';
+import { Superscript } from '../../../extensions/superscript';
 import { Table } from '../../../extensions/table';
 import { TableCell } from '../../../extensions/tableCell';
 import { TableHeader } from '../../../extensions/tableHeader';
@@ -67,6 +69,8 @@ const SerializerConfig = {
       mixable: true,
       expelEnclosingWhitespace: true,
     },
+    [Subscript.name]: { open: '<sub>', close: '</sub>', mixable: true },
+    [Superscript.name]: { open: '<sup>', close: '</sup>', mixable: true },
     // FIXME: 如何导出 style？
     [TextStyle.name]: { open: '', close: '', mixable: true, expelEnclosingWhitespace: true },
     ...marks.reduce(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b5f8558d..e63fe000 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -73,6 +73,8 @@ importers:
       '@tiptap/extension-paragraph': ^2.0.0-beta.23
       '@tiptap/extension-placeholder': ^2.0.0-beta.47
       '@tiptap/extension-strike': ^2.0.0-beta.27
+      '@tiptap/extension-subscript': ^2.0.0-beta.10
+      '@tiptap/extension-superscript': ^2.0.0-beta.10
       '@tiptap/extension-table': ^2.0.0-beta.48
       '@tiptap/extension-table-cell': ^2.0.0-beta.20
       '@tiptap/extension-table-header': ^2.0.0-beta.22
@@ -150,6 +152,8 @@ importers:
       '@tiptap/extension-paragraph': 2.0.0-beta.23_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-placeholder': 2.0.0-beta.47_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-strike': 2.0.0-beta.27_@tiptap+core@2.0.0-beta.171
+      '@tiptap/extension-subscript': 2.0.0-beta.10_@tiptap+core@2.0.0-beta.171
+      '@tiptap/extension-superscript': 2.0.0-beta.10_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-table': 2.0.0-beta.48_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-table-cell': 2.0.0-beta.20_@tiptap+core@2.0.0-beta.171
       '@tiptap/extension-table-header': 2.0.0-beta.22_@tiptap+core@2.0.0-beta.171
@@ -1807,6 +1811,22 @@ packages:
       '@tiptap/core': 2.0.0-beta.171
     dev: false
 
+  /@tiptap/extension-subscript/2.0.0-beta.10_@tiptap+core@2.0.0-beta.171:
+    resolution: {integrity: sha512-er8/1lp0Rb+SKwEioW0w4oVf3EkdQZ0WS/5kPBG4W0DncfUMT+bw5de76S3kRL9PLZ9UShAL7wuXtuiSi5QsMw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.1
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.171
+    dev: false
+
+  /@tiptap/extension-superscript/2.0.0-beta.10_@tiptap+core@2.0.0-beta.171:
+    resolution: {integrity: sha512-TUUBS8XsD2MorGORYVlhGDH7wcc9diSbHscD4Dnz8pKWVR0JPUd/od4h5qSffDzAOKxtphTiX9LOFWk6zVooKg==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0-beta.1
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.171
+    dev: false
+
   /@tiptap/extension-table-cell/2.0.0-beta.20_@tiptap+core@2.0.0-beta.171:
     resolution: {integrity: sha512-IllQyxLQvgm1FAewz3U+DkgNHRthmuVrtUQnG6la45qdUOLCOrpFbRRaQ1LJ/BpbvZ2Xs1o2yAa97BqZOPwovQ==}
     peerDependencies: