@14ch/svelte-ui 0.0.41 → 0.0.42

package/dist/components/Textarea.svelte

@@ -4,7 +4,7 @@
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 	import { t } from '../i18n';
-	import { convertToHtml, convertToHtmlWithLink } from '../utils/formatText';
+	import { escapeHtml, convertToLink } from '../utils/formatText';
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import type {
@@ -475,21 +475,14 @@
 		value !== null && value !== undefined && !(typeof value === 'string' && value === '')
 	);
 
-	// HTML表示用の値（autoResize時の高さ調整用）
+	// HTML表示用の値（pre-wrap で表示するため HTML エスケープのみ行う）
 	const displayValue = $derived.by(() => {
 		const normalizedValue = value ?? '';
 		if (normalizedValue !== '') {
-			const converted = convertToHtml(normalizedValue);
-			const html = String(converted ?? '');
-			// 最後の行が空だったら空白を追加（高さ調整のため）
-			const lines = html.split('<br />');
-			if (lines.length > 0 && lines[lines.length - 1] === '') {
-				return html + '&nbsp;';
-			}
-			return html;
+			return escapeHtml(normalizedValue);
 		}
 		// 値が空のとき: placeholder があればその幅・高さを確保して表示、なければ inline 時のみ &nbsp;
-		return placeholder ? convertToHtml(placeholder) : inline ? '&nbsp;' : '';
+		return placeholder ? escapeHtml(placeholder) : inline ? '&nbsp;' : '';
 	});
 
 	// URLをリンク化した表示用HTML（クリック検出用オーバーレイで使用）
@@ -498,8 +491,7 @@
 		if (!linkify || normalizedValue === '') {
 			return '';
 		}
-		const result = convertToHtmlWithLink(normalizedValue);
-		return String(result ?? '');
+		return convertToLink(escapeHtml(normalizedValue));
 	});
 
 	// --------------------------------
@@ -631,6 +623,7 @@
 		position: relative;
 		width: auto;
 		max-width: 100%;
+		overflow: hidden;
 
 		&.textarea--full-height {
 			height: 100%;
@@ -699,6 +692,7 @@
 		transition: none;
 		overflow-y: auto;
 		overflow-x: hidden;
+		max-height: 100%;
 
 		&::before {
 			content: '';
@@ -709,13 +703,15 @@
 		}
 	}
 
-	/* display-text: スクロールバーの幅を確保しつつ透明にする（textarea と幅を一致させる） */
+	/* display-text: textarea の white-space: pre-wrap に合わせて空白・改行を同じルールで扱う */
 	.textarea__display-text {
+		white-space: pre-wrap;
 		scrollbar-color: transparent transparent;
 	}
 
-	/* link-text: 絶対配置のオーバーレイなのでスクロールバーを完全に非表示 */
+	/* link-text: 絶対配置オーバーレイ。pre-wrap で textarea と空白・改行を同じルールで扱う */
 	.textarea__link-text {
+		white-space: pre-wrap;
 		scrollbar-width: none;
 
 		&::-webkit-scrollbar {

package/dist/utils/formatText.js

@@ -18,7 +18,7 @@ export const convertToHtml = (value) => {
 };
 export const convertToLink = (str) => {
     let text = str;
-    text = text.replace(/((http|https|ftp):\/\/[\w?=&./#~%-;,*!$'():@+]+(?![\w\s?&./#~%";,=*'()-]*>))/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a> ');
+    text = text.replace(/((http|https|ftp):\/\/[\w?=&./#~%-;,*!$'():@+]+(?![\w\s?&./#~%";,=*'()-]*>))/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
     return text;
 };
 export const escapeHtml = (value) => {

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@14ch/svelte-ui",
 	"description": "Modern Svelte UI components library with TypeScript support",
 	"private": false,
-	"version": "0.0.41",
+	"version": "0.0.42",
 	"type": "module",
 	"keywords": [
 		"svelte",