From 86c9375225b6d86171fa93a04c18f66bf609be13 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=8E=8B=E7=A6=8F=E6=9C=8B?= <wangfupeng1988@163.com>
Date: Wed, 30 Jun 2021 14:49:33 +0800
Subject: [PATCH] style: selected node style

---
 .../src/modules/divider/render-elem.tsx            |  8 +++++---
 .../src/modules/image/render-elem.tsx              |  2 +-
 packages/core/src/assets/progress.less             |  2 +-
 packages/core/src/assets/textarea.less             |  5 +++++
 packages/core/src/utils/dom.ts                     |  7 ++++++-
 packages/video-module/src/assets/index.less        | 10 +++++++++-
 packages/video-module/src/module/elem-to-html.ts   |  2 +-
 packages/video-module/src/module/render-elem.tsx   | 14 +++++++-------
 8 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/packages/basic-modules/src/modules/divider/render-elem.tsx b/packages/basic-modules/src/modules/divider/render-elem.tsx
index c6300747e..b5f739f49 100644
--- a/packages/basic-modules/src/modules/divider/render-elem.tsx
+++ b/packages/basic-modules/src/modules/divider/render-elem.tsx
@@ -17,11 +17,13 @@ function renderDivider(
 
   // 是否选中
   const selected = isNodeSelected(editor, elemNode, 'divider')
-  renderStyle.boxShadow = selected ? '0 0 0 3px #B4D5FF' : 'none'
-  // TODO 抽离选中样式
 
   const vnode = (
-    <div className="w-e-textarea-divider" style={renderStyle}>
+    <div
+      className="w-e-textarea-divider"
+      data-selected={selected ? 'true' : ''} // 标记为 选中
+      style={renderStyle}
+    >
       <hr />
     </div>
   )
diff --git a/packages/basic-modules/src/modules/image/render-elem.tsx b/packages/basic-modules/src/modules/image/render-elem.tsx
index f504375be..95412a316 100644
--- a/packages/basic-modules/src/modules/image/render-elem.tsx
+++ b/packages/basic-modules/src/modules/image/render-elem.tsx
@@ -134,7 +134,7 @@ function renderImage(elemNode: SlateElement, children: VNode[] | null, editor: I
   const renderStyle: any = {}
   if (width) renderStyle.width = width
   if (height) renderStyle.height = height
-  if (selected) renderStyle.boxShadow = '0 0 0 1px #B4D5FF' // TODO 统一选中格式
+  if (selected) renderStyle.boxShadow = '0 0 0 1px #B4D5FF' // 自定义 selected 样式，因为有拖拽触手
 
   // 【注意】void node 中，renderElem 不用处理 children 。core 会统一处理。
   const vnode = <img style={renderStyle} src={src} alt={alt} data-href={url} />
diff --git a/packages/core/src/assets/progress.less b/packages/core/src/assets/progress.less
index 614325bab..2ab939337 100644
--- a/packages/core/src/assets/progress.less
+++ b/packages/core/src/assets/progress.less
@@ -2,6 +2,6 @@
   position: absolute;
   width: 0;
   height: 1px;
-  background-color: #3658e2;
+  background-color: #4290f7;
   transition: width 0.3s;
 }
diff --git a/packages/core/src/assets/textarea.less b/packages/core/src/assets/textarea.less
index ab29bc8d4..55a69d002 100644
--- a/packages/core/src/assets/textarea.less
+++ b/packages/core/src/assets/textarea.less
@@ -29,6 +29,11 @@
     margin: 0 3px;
     max-width: 100%;
   }
+
+  // 选中的节点
+  [data-selected="true"] {
+    box-shadow: 0 0 0 2px #B4D5FF;
+  }
 }
 
 .w-e-text-placeholder {
diff --git a/packages/core/src/utils/dom.ts b/packages/core/src/utils/dom.ts
index 16693e592..2beab05b1 100644
--- a/packages/core/src/utils/dom.ts
+++ b/packages/core/src/utils/dom.ts
@@ -244,7 +244,12 @@ export function getFirstVoidChild(elem: DOMElement): DOMElement | null {
     const { nodeName, nodeType } = curElem
     if (nodeType === 1) {
       const name = nodeName.toLowerCase()
-      if (htmlVoidElements.includes(name)) {
+      if (
+        htmlVoidElements.includes(name) ||
+        // 补充一些
+        name === 'iframe' ||
+        name === 'video'
+      ) {
         return curElem // 得到 void elem 并返回
       }
 
diff --git a/packages/video-module/src/assets/index.less b/packages/video-module/src/assets/index.less
index d1be05a9e..6757c4d15 100644
--- a/packages/video-module/src/assets/index.less
+++ b/packages/video-module/src/assets/index.less
@@ -1,5 +1,13 @@
 .w-e-textarea-video-container {
   text-align: center;
   border: 1px solid #d9d9d9;
-  padding: 5px 0;
+
+  // 默认宽度
+  iframe {
+    width: 450px;
+    height: 245px;
+  }
+  video {
+    width: 450px;
+  }
 }
\ No newline at end of file
diff --git a/packages/video-module/src/module/elem-to-html.ts b/packages/video-module/src/module/elem-to-html.ts
index b24926486..d43b6cbd2 100644
--- a/packages/video-module/src/module/elem-to-html.ts
+++ b/packages/video-module/src/module/elem-to-html.ts
@@ -16,7 +16,7 @@ function videoToHtml(elemNode: Element, childrenHtml: string, editor: IDomEditor
     res += src
   } else {
     // 其他，mp4 等 url 格式
-    res += `<video controls width="300"><source src="${src}" type="video/mp4"/></video>`
+    res += `<video controls><source src="${src}" type="video/mp4"/></video>`
   }
   res += '\n</div>'
 
diff --git a/packages/video-module/src/module/render-elem.tsx b/packages/video-module/src/module/render-elem.tsx
index a1360af43..c076830c4 100644
--- a/packages/video-module/src/module/render-elem.tsx
+++ b/packages/video-module/src/module/render-elem.tsx
@@ -12,12 +12,8 @@ function renderVideo(elemNode: SlateElement, children: VNode[] | null, editor: I
   // @ts-ignore
   const { src = '' } = elemNode
 
-  const renderStyle: any = {}
-
   // 是否选中
   const selected = isNodeSelected(editor, elemNode, 'video')
-  renderStyle.boxShadow = selected ? '0 0 0 3px #B4D5FF' : 'none'
-  // TODO 抽离选中样式
 
   let vnode: VNode
   if (src.trim().indexOf('<iframe') === 0) {
@@ -26,15 +22,19 @@ function renderVideo(elemNode: SlateElement, children: VNode[] | null, editor: I
       <div
         contentEditable={false}
         className="w-e-textarea-video-container"
-        style={renderStyle}
+        data-selected={selected ? 'true' : ''} // 标记为 选中
         innerHTML={src} // 内嵌第三方 iframe 视频
       ></div>
     )
   } else {
     // 其他，mp4 格式
     vnode = (
-      <div contentEditable={false} className="w-e-textarea-video-container" style={renderStyle}>
-        <video controls width="300">
+      <div
+        contentEditable={false}
+        className="w-e-textarea-video-container"
+        data-selected={selected ? 'true' : ''} // 标记为 选中
+      >
+        <video controls>
           <source src={src} type="video/mp4" />
           {`Sorry, your browser doesn't support embedded videos.\n 抱歉，浏览器不支持 video 视频`}
         </video>