style: selected node style

wangeditor-team · Jun 30, 2021 · 86c9375 · 86c9375
1 parent d480c20
commit 86c9375
Show file tree

Hide file tree

Showing 8 changed files with 35 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
+  }
 }
diff --git 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
@@ -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>