From bcbf965f2bc762f87b6f9df49a117649408fd3b6 Mon Sep 17 00:00:00 2001
From: fantasticit <fantasticit@163.com>
Date: Fri, 1 Apr 2022 12:54:48 +0800
Subject: [PATCH] fix: fix style

---
 .../src/components/resizeable/resizeable.tsx  | 11 +++-
 .../components/wiki/tocs/index.module.scss    |  3 +-
 .../client/src/components/wiki/tocs/index.tsx |  2 +-
 .../wiki/tocs/{NavItem.tsx => nav-item.tsx}   |  0
 .../src/components/wiki/tocs/public.tsx       |  2 +-
 .../client/src/tiptap/styles/selection.scss   | 57 +++++++++++++++----
 .../src/tiptap/wrappers/image/index.tsx       | 10 +++-
 7 files changed, 67 insertions(+), 18 deletions(-)
 rename packages/client/src/components/wiki/tocs/{NavItem.tsx => nav-item.tsx} (100%)

diff --git a/packages/client/src/components/resizeable/resizeable.tsx b/packages/client/src/components/resizeable/resizeable.tsx
index 8c463c3e..f3aa18b1 100644
--- a/packages/client/src/components/resizeable/resizeable.tsx
+++ b/packages/client/src/components/resizeable/resizeable.tsx
@@ -1,4 +1,5 @@
 import React, { useRef, useEffect } from 'react';
+import cls from 'classnames';
 import { useClickOutside } from 'hooks/use-click-outside';
 import interact from 'interactjs';
 import styles from './style.module.scss';
@@ -7,12 +8,13 @@ interface IProps {
   width: number;
   height: number;
   onChange: (arg: { width: number; height: number }) => void;
+  className?: string;
 }
 
 const MIN_WIDTH = 50;
 const MIN_HEIGHT = 50;
 
-export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children }) => {
+export const Resizeable: React.FC<IProps> = ({ width, height, className, onChange, children }) => {
   const $container = useRef<HTMLDivElement>(null);
   const $topLeft = useRef<HTMLDivElement>(null);
   const $topRight = useRef<HTMLDivElement>(null);
@@ -62,7 +64,12 @@ export const Resizeable: React.FC<IProps> = ({ width, height, onChange, children
   }, [width, height]);
 
   return (
-    <div id="js-resizeable-container" className={styles.resizable} ref={$container} style={{ width, height }}>
+    <div
+      id="js-resizeable-container"
+      className={cls(className, styles.resizable)}
+      ref={$container}
+      style={{ width, height }}
+    >
       <span className={styles.resizer + ' ' + styles.topLeft} ref={$topLeft} data-type={'topLeft'}></span>
       <span className={styles.resizer + ' ' + styles.topRight} ref={$topRight} data-type={'topRight'}></span>
       <span className={styles.resizer + ' ' + styles.bottomLeft} ref={$bottomLeft} data-type={'bottomLeft'}></span>
diff --git a/packages/client/src/components/wiki/tocs/index.module.scss b/packages/client/src/components/wiki/tocs/index.module.scss
index aa21ca02..e28761d3 100644
--- a/packages/client/src/components/wiki/tocs/index.module.scss
+++ b/packages/client/src/components/wiki/tocs/index.module.scss
@@ -20,6 +20,7 @@
 
   .treeItemWrap {
     display: flex;
+    line-height: 28px;
 
     .left {
       display: flex;
@@ -101,5 +102,5 @@
 }
 
 .docListTitle {
-  margin: 12px .5rem;
+  margin: 12px 0.5rem;
 }
diff --git a/packages/client/src/components/wiki/tocs/index.tsx b/packages/client/src/components/wiki/tocs/index.tsx
index 1e713654..9d873c18 100644
--- a/packages/client/src/components/wiki/tocs/index.tsx
+++ b/packages/client/src/components/wiki/tocs/index.tsx
@@ -10,7 +10,7 @@ import { IconDocument, IconSetting, IconOverview, IconGlobe } from 'components/i
 import { DocumentCreator } from 'components/document/create';
 import { DataRender } from 'components/data-render';
 import { EventEmitter } from 'helpers/event-emitter';
-import { NavItem } from './NavItem';
+import { NavItem } from './nav-item';
 import { Tree } from './tree';
 import styles from './index.module.scss';
 import { isPublicWiki } from '@think/domains';
diff --git a/packages/client/src/components/wiki/tocs/NavItem.tsx b/packages/client/src/components/wiki/tocs/nav-item.tsx
similarity index 100%
rename from packages/client/src/components/wiki/tocs/NavItem.tsx
rename to packages/client/src/components/wiki/tocs/nav-item.tsx
diff --git a/packages/client/src/components/wiki/tocs/public.tsx b/packages/client/src/components/wiki/tocs/public.tsx
index da401c80..21ebf7a1 100644
--- a/packages/client/src/components/wiki/tocs/public.tsx
+++ b/packages/client/src/components/wiki/tocs/public.tsx
@@ -9,7 +9,7 @@ import { findParents } from 'components/wiki/tocs/utils';
 import { LogoImage, LogoText } from 'components/logo';
 import { DataRender } from 'components/data-render';
 import { Tree } from './tree';
-import { NavItem } from './NavItem';
+import { NavItem } from './nav-item';
 import styles from './index.module.scss';
 
 interface IProps {
diff --git a/packages/client/src/tiptap/styles/selection.scss b/packages/client/src/tiptap/styles/selection.scss
index 52e0ba60..045f9a0b 100644
--- a/packages/client/src/tiptap/styles/selection.scss
+++ b/packages/client/src/tiptap/styles/selection.scss
@@ -56,7 +56,6 @@
   .node-attachment,
   .node-banner,
   .node-iframe,
-  .node-image,
   .node-katex,
   .node-mind,
   .node-codeBlock,
@@ -72,23 +71,61 @@
     }
 
     &.selected-node {
-      position: relative;
       .render-wrapper {
+        position: relative;
         border: 1px solid var(--node-selected-border-color) !important;
 
         &:hover {
           border-color: var(--node-selected-border-color);
           box-shadow: none;
         }
-      }
 
-      &::after {
-        position: absolute;
-        content: '';
-        inset: 0px;
-        opacity: 0.3;
-        pointer-events: none;
-        background-color: rgb(179, 212, 255);
+        &::after {
+          position: absolute;
+          content: '';
+          inset: 0px;
+          pointer-events: none;
+          background-color: rgba(179, 212, 255, 0.3);
+        }
+      }
+    }
+
+    &:not(.has-focus) {
+      ::selection {
+        background-color: transparent;
+      }
+    }
+  }
+
+  .node-image {
+    .render-wrapper {
+      position: relative;
+      &:hover {
+        &::after {
+          position: absolute;
+          content: '';
+          inset: 0px;
+          pointer-events: none;
+          background-color: transparent;
+          border: 1px solid var(--node-hover-border-color) !important;
+          border-radius: var(--border-radius);
+        }
+      }
+    }
+
+    &.selected-node {
+      .render-wrapper {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          content: '';
+          inset: 0px;
+          pointer-events: none;
+          background-color: rgba(179, 212, 255, 0.3);
+          border: 1px solid var(--node-selected-border-color) !important;
+          border-radius: var(--border-radius);
+        }
       }
     }
 
diff --git a/packages/client/src/tiptap/wrappers/image/index.tsx b/packages/client/src/tiptap/wrappers/image/index.tsx
index d1caca11..cfc23912 100644
--- a/packages/client/src/tiptap/wrappers/image/index.tsx
+++ b/packages/client/src/tiptap/wrappers/image/index.tsx
@@ -71,17 +71,21 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
       );
     }
 
-    const img = <img className="render-wrapper" src={src} alt={alt} width={width} height={height} />;
+    const img = <img src={src} alt={alt} width={width} height={height} />;
 
     if (isEditable) {
       return (
-        <Resizeable width={width} height={height} onChange={onResize}>
+        <Resizeable className={cls('render-wrapper')} width={width} height={height} onChange={onResize}>
           {img}
         </Resizeable>
       );
     }
 
-    return <div style={{ display: 'inline-block', width, height, maxWidth: '100%' }}>{img}</div>;
+    return (
+      <div className={cls('render-wrapper')} style={{ display: 'inline-block', width, height, maxWidth: '100%' }}>
+        {img}
+      </div>
+    );
   })();
 
   return (