Можно ли интегрировать HTML код в TextField в Jetpack Compose?

Можно ли интегрировать HTML-код в TextField в Jetpack Compose?

Прямого способа встроить HTML-код в стандартный TextField или OutlinedTextField из Jetpack Compose — нет. Компонент TextField предназначен для редактирования обычного текста и не поддерживает HTML-разметку или стилизацию на уровне Rich Text. Однако в экосистеме Jetpack Compose существуют альтернативные решения для отображения и редактирования текста с базовым форматированием, а также возможность интеграции с WebView для сложных HTML-сценариев.

Основные подходы для работы с HTML-контентом в Compose

1. Использование AndroidView с WebView

Если требуется полноценное отображение и редактирование HTML (например, мини-редактор), можно встроить WebView в композ-интерфейс с помощью AndroidView. Это позволяет загружать HTML-код и редактировать его через JavaScript-движок WebView.

@Composable
fun HtmlTextFieldWebView(htmlContent: String, onHtmlChanged: (String) -> Unit) {
    AndroidView(
        factory = { context ->
            WebView(context).apply {
                settings.javaScriptEnabled = true
                webViewClient = object : WebViewClient() {
                    override fun onPageFinished(view: WebView?, url: String?) {
                        // Можно добавить логику после загрузки контента
                    }
                }
                // Загрузка HTML с возможностью редактирования (contentEditable)
                loadDataWithBaseURL(
                    null,
                    "<div contenteditable='true'>$htmlContent</div>",
                    "text/html",
                    "UTF-8",
                    null
                )
                // Слушатель изменений контента через JavaScript
                evaluateJavascript(
                    "document.querySelector('div').addEventListener('input', function() { 
                        Android.onContentChanged(document.querySelector('div').innerHTML); 
                    });",
                    null
                )
                addJavascriptInterface(object {
                    @JavascriptInterface
                    fun onContentChanged(newHtml: String) {
                        onHtmlChanged(newHtml)
                    }
                }, "Android")
            }
        },
        update = { webView ->
            // Обновление контента при изменении внешнего состояния
            webView.loadDataWithBaseURL(
                null,
                "<div contenteditable='true'>$htmlContent</div>",
                "text/html",
                "UTF-8",
                null
            )
        }
    )
}

Преимущества: Полная поддержка HTML/CSS/JavaScript.
Недостатки: Тяжеловесный компонент, сложность синхронизации состояния, потенциальные проблемы с производительностью.

2. Использование androidx.compose.foundation.text с AnnotatedString

Для отображения текста с базовым форматированием (жирный, курсив, ссылки) используйте AnnotatedString. Хотя прямой парсинг HTML не поддерживается, можно конвертировать простую HTML-разметку в AnnotatedString с помощью библиотеки androidx.compose.ui:ui-text.

import androidx.compose.ui.text.*
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.text.font.FontWeight

@Composable
fun HtmlTextDisplay(html: String) {
    val annotatedString = buildAnnotatedString {
        // Пример простого парсинга HTML-тегов (для сложных случаев используйте библиотеки)
        if (html.contains("<b>")) {
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                append(html.replace("<b>", "").replace("</b>", ""))
            }
        } else {
            append(html)
        }
    }
    Text(text = annotatedString)
}

Для полноценного парсинга HTML используйте библиотеку androidx.compose.ui:ui-text:1.6.0+, где есть экспериментальный Html.toAnnotatedString().

import androidx.compose.ui.text.Html

@Composable
fun HtmlToAnnotatedStringExample(html: String) {
    val annotatedString = Html.toAnnotatedString(html)
    Text(text = annotatedString)
}

Примечание: Этот метод только для отображения, редактирование AnnotatedString через TextField недоступно.

3. Специализированные библиотеки для Rich Text Editing

Рассмотрите библиотеки, расширяющие возможности Compose для редактирования форматированного текста:

• RichText for Compose (сторонние решения) — предоставляет компоненты для вставки ссылок, жирного текста и т.д.
• Кастомная реализация на CoreTextField — низкоуровневый API для создания собственного текстового редактора с поддержкой спанов.

// Пример кастомного редактора с выделением жирным текстом
@OptIn(ExperimentalTextApi::class)
@Composable
fun CustomRichTextField() {
    var text by remember { mutableStateOf(AnnotatedString("")) }
    CoreTextField(
        value = text,
        onValueChange = { newText ->
            text = newText
        },
        textStyle = TextStyle.Default,
        decorationBox = { innerTextField ->
            Box(modifier = Modifier.background(Color.White)) {
                innerTextField()
            }
        }
    )
}

Итог

Рекомендации:

• Для отображения HTML используйте Html.toAnnotatedString() (если нужны простые стили) или AndroidView с WebView (для сложного HTML).
• Для редактирования HTML — WebView или специализированные библиотеки Rich Text.
• Стандартный TextField для HTML не подходит, но можно имитировать базовое форматирование через AnnotatedString с кастомной логикой парсинга.

Если задача — создать текстовый редактор с поддержкой HTML (например, для комментариев или статей), оптимально использовать гибридный подход: WebView для редактирования + конвертацию в AnnotatedString для отображения в других частях UI.