🐛 fix: should parse textarea value and placeholder

Merge pull request #161 from ant-design/fix/textarea

Author: arvinxx

docs/e2e/basic/demos/Text/TextArea.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useElements, TestLayout } from '@docs-utils';
+import { Input } from 'antd';
+
+const {TextArea} = Input
+
+/**
+ *
+ */
+export default () => {
+  const { elements, ref } = useElements();
+
+  return (
+    <TestLayout elements={elements}>
+      <div ref={ref}>
+        <TextArea placeholder="测试 TextArea" />
+      </div>
+    </TestLayout>
+  );
+};

docs/e2e/basic/text.md

@@ -95,6 +95,12 @@ placeholder 和输入的值都在伪类里
 
 <code src="./demos/Text/Input.tsx" />
 
+### 解析 TextArea `placeholder` 和 `value`
+
+placeholder 和输入的值都在伪类里
+
+<code src="./demos/Text/TextArea.tsx" />
+
 ### Input 文本居中
 
 <code src="./demos/Text/InputAligin.tsx" />

src/parser/inputText.ts

@@ -5,7 +5,7 @@ import { getTextLinesAndRange } from '../utils/text';
  * 解析输入框文本
  */
 export const parseInputTextToText = (
-  node: HTMLInputElement,
+  node: HTMLInputElement | HTMLTextAreaElement,
 ): Text | undefined => {
   // 判断一下是否有伪类
   const inputTextStyle: CSSStyleDeclaration = getComputedStyle(
@@ -16,7 +16,7 @@ export const parseInputTextToText = (
 
   /// *** 处理 input 的文本值 *** ///
 
-  const { value, placeholder } = node as HTMLInputElement;
+  const { value, placeholder } = node;
   if (!value && !placeholder) return;
   if (value) {
     pseudoText = node.type === 'password' ? value.replace(/./g, '•') : value;
@@ -97,7 +97,7 @@ export const parseInputTextToText = (
   const { lineHeight } = inputTextStyle;
 
   // TODO: 还有什么时候需要垂直居中呢?
-  if (parseFloat(lineHeight) > rangeBCR.height) {
+  if (node.nodeName !== 'TEXTAREA' && parseFloat(lineHeight) > rangeBCR.height) {
     // 需要垂直居中的地方
     console.log(y, nodeBCR.y);
     console.log(nodeBCR.height, rangeBCR.height);

src/utils/nodeType.ts

@@ -46,7 +46,7 @@ export const isImageNode = (node: Element): node is HTMLImageElement => {
  */
 export const isTextInputNode = (node: Element): node is HTMLInputElement => {
   return (
-    isNodeType(node, 'input') &&
+    isNodeType(node, ['input', 'textarea']) &&
     (node as HTMLInputElement).type !== 'checkbox' &&
     (node as HTMLInputElement).type !== 'radio'
   );

tests/__tests__/parser/InputText.spec.ts

@@ -1,4 +1,5 @@
-import { parseInputTextToText, Text } from 'html2sketch';
+import type { Text } from 'html2sketch';
+import { parseInputTextToText } from 'html2sketch';
 
 describe('parseInputTextToText', () => {
   beforeAll(() => {
@@ -7,7 +8,7 @@ describe('parseInputTextToText', () => {
   body{
     margin: 0;
   }
-  .input::placeholder{
+  .input::placeholder {
     color:red;
   }
 </style>`;
@@ -18,11 +19,14 @@ describe('parseInputTextToText', () => {
 
 
   <input id="input" />
+  <textarea id="pure-textarea"></textarea>
 
   <input id="input-placeholder" class="input" placeholder="测试输入框" />
+  <textarea id="textarea-placeholder" class="input" placeholder="测试输入框"></textarea>
 
   <div>
     <input id="input-value" placeholder="测试输入框" value="这是值" />
+    <textarea id="textarea-value" placeholder="测试输入框">这是值</textarea>
   </div>
 
 
@@ -41,6 +45,14 @@ describe('parseInputTextToText', () => {
     expect(input).toBeUndefined();
   });
 
+  it('textarea 不返回', () => {
+    const node = document.getElementById('pure-textarea') as HTMLTextAreaElement;
+    console.log(node)
+    const input = parseInputTextToText(node);
+
+    expect(input).toBeUndefined();
+  });
+
   it('input-placeholder 解析成文本', () => {
     const node = document.getElementById(
       'input-placeholder',
@@ -51,6 +63,18 @@ describe('parseInputTextToText', () => {
     expect(json._class).toBe('text');
     expect(json.attributedString.string).toBe('测试输入框');
   });
+
+  it('textarea-placeholder 解析成文本', () => {
+    const node = document.getElementById(
+      'textarea-placeholder',
+    ) as HTMLInputElement;
+    const input = parseInputTextToText(node) as Text;
+    expect(input.textStyle.color.red).toBe(255);
+    const json = input.toSketchJSON();
+    expect(json._class).toBe('text');
+    expect(json.attributedString.string).toBe('测试输入框');
+  });
+
   it('input-value 解析成文本', () => {
     const node = document.getElementById('input-value') as HTMLInputElement;
     const input = parseInputTextToText(node) as Text;
@@ -60,6 +84,14 @@ describe('parseInputTextToText', () => {
     expect(input.x).toBeLessThanOrEqual(2);
   });
 
+  it('textarea-value 解析成文本', () => {
+    const node = document.getElementById('textarea-value') as HTMLTextAreaElement;
+    const input = parseInputTextToText(node) as Text;
+    const json = input.toSketchJSON();
+    expect(json._class).toBe('text');
+    expect(json.attributedString.string).toBe('这是值');
+  });
+
   it('input-center 解析成文本', () => {
     const node = document.getElementById('input-center') as HTMLInputElement;
     const input = parseInputTextToText(node) as Text;