diff --git a/docs/e2e/basic/demos/Text/TextArea.tsx b/docs/e2e/basic/demos/Text/TextArea.tsx
new file mode 100644
index 00000000..cc940b59
--- /dev/null
+++ b/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 (
+
+### 解析 TextArea `placeholder` 和 `value`
+
+placeholder 和输入的值都在伪类里
+
+
+
### Input 文本居中
diff --git a/src/parser/inputText.ts b/src/parser/inputText.ts
index 329429a0..1a3a5af5 100644
--- a/src/parser/inputText.ts
+++ b/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);
diff --git a/src/utils/nodeType.ts b/src/utils/nodeType.ts
index 66024f5b..0bf36d83 100644
--- a/src/utils/nodeType.ts
+++ b/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'
);
diff --git a/tests/__tests__/parser/InputText.spec.ts b/tests/__tests__/parser/InputText.spec.ts
index 4f84fcc4..7593b375 100644
--- a/tests/__tests__/parser/InputText.spec.ts
+++ b/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;
}
`;
@@ -18,11 +19,14 @@ describe('parseInputTextToText', () => {
+
+