feat: update editor

packages/client/package.json

@@ -6,7 +6,7 @@
     "prebuild": "rimraf .next",
     "build": "next build",
     "start": "cross-env NODE_ENV=production next start -p 5002",
-    "pm2": "pm2 start npm --name @think/client -- start"
+    "pm2": "pm2 start -i max npm --name @think/client -- start"
   },
   "dependencies": {
     "@douyinfe/semi-icons": "^2.3.1",

packages/client/src/components/icons/IconTableHeaderCell.tsx

@@ -5,7 +5,7 @@ export const IconTableHeaderCell: React.FC<{ style?: React.CSSProperties }> = ({
     <Icon
       style={style}
       svg={
-        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
           <path
             d="M128 266.666667A138.666667 138.666667 0 0 1 266.666667 128h490.666666A138.666667 138.666667 0 0 1 896 266.666667v490.666666A138.666667 138.666667 0 0 1 757.333333 896H266.666667A138.666667 138.666667 0 0 1 128 757.333333V266.666667zM266.666667 192A74.666667 74.666667 0 0 0 192 266.666667V362.666667h170.666667v-170.666667H266.666667zM192 426.666667h170.666667v170.666666h-170.666667v-170.666666z m234.666667 0v170.666666h170.666666v-170.666666h-170.666666z m234.666666 0v170.666666h170.666667v-170.666666h-170.666667zM597.333333 661.333333h-170.666666v170.666667h170.666666v-170.666667z m64 170.666667v-170.666667h170.666667v96a74.666667 74.666667 0 0 1-74.666667 74.666667H661.333333z m0-469.333333v-170.666667h96c41.216 0 74.666667 33.450667 74.666667 74.666667V362.666667h-170.666667z m-64-170.666667v170.666667h-170.666666v-170.666667h170.666666z m-405.333333 469.333333h170.666667v170.666667H266.666667a74.666667 74.666667 0 0 1-74.666667-74.666667V661.333333z"
             p-id="15067"

packages/client/src/components/icons/IconTableHeaderColumn.tsx

@@ -5,7 +5,7 @@ export const IconTableHeaderColumn: React.FC<{ style?: React.CSSProperties }> =
     <Icon
       style={style}
       svg={
-        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
+        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16">
           <path d="M64 960l896 0L960 64 64 64 64 960zM640 384l0 256L384 640 384 384 640 384zM384 896l0-192 256 0 0 192L384 896zM320 896 258.88 896 320 834.88 320 896zM320 744.384 168.384 896 128 896l0-76.096 192-192L320 744.384zM128 729.344 128 611.904l192-192 0 117.504L128 729.344zM128 521.344 128 403.904l192-192 0 117.504L128 521.344zM128 313.344 128 227.904 227.904 128l85.504 0L128 313.344zM896 896l-192 0 0-192 192 0L896 896zM896 640l-192 0L704 384l192 0L896 640zM896 128l0 192-192 0L704 128 896 128zM640 320 384 320 384 128l256 0L640 320z"></path>
         </svg>
       }

packages/client/src/components/icons/IconTableHeaderRow.tsx

@@ -5,7 +5,7 @@ export const IconTableHeaderRow: React.FC<{ style?: React.CSSProperties }> = ({
     <Icon
       style={style}
       svg={
-        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20">
+        <svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" width="18" height="18">
           <path d="M128.1024 371.5072V216.9856a28.5696 28.5696 0 0 1 28.8768-28.2624h711.8848a28.5696 28.5696 0 0 1 28.8768 28.2624v154.5216z m769.6384 231.8336H675.0208v-182.272h222.8224v182.272z m0 204.0832a28.5696 28.5696 0 0 1-28.8768 28.2624H675.0208v-182.272h222.8224v153.6z m-496.128 27.7504v-182.272H624.64v182.272z m-244.6336 0a28.5696 28.5696 0 0 1-28.8768-28.2624V652.3904h222.8224v182.3744H156.9792z m193.9456-231.8336H128.1024v-182.272h222.8224zM624.64 421.0688v182.3744H401.6128V421.0688z m251.392-281.9072h-727.04a71.0656 71.0656 0 0 0-71.68 70.4512v605.3888a71.0656 71.0656 0 0 0 71.68 70.3488h727.04a71.68 71.68 0 0 0 71.68-70.3488V209.5104a71.0656 71.0656 0 0 0-71.68-70.3488z m0 0"></path>
           <path d="M169.984 211.2512h685.568a20.48 20.48 0 0 1 20.48 20.48v120.4224H149.504V231.7312a20.48 20.48 0 0 1 20.48-20.48z"></path>
         </svg>

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

@@ -17,8 +17,4 @@ export const BulletList = BuiltInBulletList.extend({
       },
     };
   },
-
-  addInputRules() {
-    return [listInputRule(/^\s*([-+*])\s([^\s[])$/, this.type)];
-  },
 });

packages/client/src/components/tiptap/menus/colorPicker/style.module.scss

@@ -11,11 +11,17 @@
     width: 32px;
     height: 32px;
     cursor: pointer;
+    border-radius: 4px;
+    border: 1px solid transparent;
 
     &:nth-of-type(n + 8) {
       margin-top: 4px;
     }
 
+    &:hover {
+      border-color: rgb(193, 199, 208);
+    }
+
     > span {
       display: block;
       width: 28px;

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

@@ -26,7 +26,7 @@ export const TableBubbleMenu = ({ editor }) => {
       pluginKey="table-bubble-menu"
       shouldShow={() => editor.isActive(Table.name)}
       tippyOptions={{
-        maxWidth: 456,
+        maxWidth: 486,
         placement: 'bottom',
       }}
       matchRenderContainer={(node: HTMLElement) =>

packages/client/src/components/tiptap/services/markdown/htmlToProsemirror/nodes/heading.ts

@@ -4,11 +4,11 @@ export class Heading extends Node {
 
   getLevel() {
     const matches = this.DOMNode.nodeName.match(/^H([1-6])/);
-    return matches ? matches[1] : null;
+    return matches ? +matches[1] : null;
   }
 
   matching() {
-    return Boolean(this.getLevel());
+    return this.DOMNode?.tagName?.startsWith('H') && Boolean(this.getLevel());
   }
 
   data() {

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

@@ -2,10 +2,11 @@
   position: relative;
 
   .handleWrap {
-    position: absolute;
+    display: flex;
-    right: 0.5rem;
+    justify-content: space-between;
-    top: 0.5rem;
+    padding: 6px 8px;
-    z-index: 100;
+    background-color: var(--semi-color-fill-0);
+    border-bottom: 1px solid var(--semi-color-border);
 
     .selectorWrap {
       margin-right: 8px;

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

@@ -6,35 +6,29 @@ import { IconCopy } from '@douyinfe/semi-icons';
 import { copy } from 'helpers/copy';
 import styles from './index.module.scss';
 
-export const CodeBlockWrapper = ({
+export const CodeBlockWrapper = ({ editor, node: { attrs }, updateAttributes, extension }) => {
-  editor,
-  node: {
-    attrs: { language: defaultLanguage },
-  },
-  updateAttributes,
-  extension,
-}) => {
   const isEditable = editor.isEditable;
+  const { language: defaultLanguage } = attrs;
   const $container = useRef<HTMLPreElement>();
 
   return (
     <NodeViewWrapper className={cls(styles.wrap, 'render-wrapper')}>
       <div className={styles.handleWrap}>
-        {isEditable && (
+        <Select
-          <Select
+          size="small"
-            size="small"
+          defaultValue={defaultLanguage || 'null'}
-            defaultValue={defaultLanguage || 'null'}
+          onChange={(value) => updateAttributes({ language: value })}
-            onChange={(value) => updateAttributes({ language: value })}
+          className={styles.selectorWrap}
-            className={styles.selectorWrap}
+          disabled={!isEditable}
-          >
+          filter
-            <Select.Option value="null">auto</Select.Option>
+        >
-            {extension.options.lowlight.listLanguages().map((lang, index) => (
+          <Select.Option value="null">auto</Select.Option>
-              <Select.Option key={index} value={lang}>
+          {extension.options.lowlight.listLanguages().map((lang, index) => (
-                {lang}
+            <Select.Option key={index} value={lang}>
-              </Select.Option>
+              {lang}
-            ))}
+            </Select.Option>
-          </Select>
+          ))}
-        )}
+        </Select>
         <Tooltip content="复制" spacing={6}>
           <Button
             size="small"

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

@@ -40,10 +40,28 @@
   }
 
   hr {
+    position: relative;
     border: 0;
     height: 2px;
     background: var(--semi-color-border);
-    margin: 18px 0;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      left: 0;
+      display: block;
+      width: 100%;
+      height: 12px;
+    }
+
+    &::before {
+      top: 0;
+    }
+
+    &::after {
+      bottom: 0;
+    }
   }
 }
 

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

@@ -5,6 +5,7 @@
   border-radius: 3px;
   box-shadow: var(--box-shadow);
   background-color: var(--semi-color-nav-bg);
+  border: 1px solid var(--semi-color-border);
   overflow-x: auto;
 }
 
@@ -14,6 +15,7 @@
   border-radius: 3px;
   box-shadow: var(--box-shadow);
   background-color: var(--semi-color-nav-bg);
+  border: 1px solid var(--semi-color-border);
 
   &.row {
     column-gap: 8px;

packages/server/package.json

@@ -9,7 +9,7 @@
     "dev": "nest start --watch",
     "debug": "nest start --debug --watch",
     "start": "cross-env NODE_ENV=production node dist/main",
-    "pm2": "pm2 start npm --name @think/server -- start",
+    "pm2": "pm2 start -i max npm --name @think/server -- start",
     "lint": "tslint -p tsconfig.json -c tslint.json",
     "test": "jest",
     "test:watch": "jest --watch",