Preview page adds RTL support

ruslin-note · May 9, 2023 · a38c297 · a38c297
1 parent 8fb6da7
commit a38c297
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 4 deletions.
diff --git a/app/src/main/java/org/dianqk/ruslin/data/preference/TextDirectionPreference.kt b/app/src/main/java/org/dianqk/ruslin/data/preference/TextDirectionPreference.kt
@@ -29,6 +29,12 @@ sealed class TextDirectionPreference(val value: Int) {
         Auto -> context.getString(R.string.auto)
     }
 
+    fun toHtmlDirAttribute(): String = when (this) {
+        Ltr -> "ltr"
+        Rtl -> "rtl"
+        Auto -> "auto"
+    }
+
     fun getTextDirection(): TextDirection = when (this) {
         Ltr -> TextDirection.Ltr
         Rtl -> TextDirection.Rtl

diff --git a/app/src/main/java/org/dianqk/ruslin/ui/page/note_detail/NoteDetailPage.kt b/app/src/main/java/org/dianqk/ruslin/ui/page/note_detail/NoteDetailPage.kt
@@ -43,7 +43,11 @@ fun NoteDetailPage(
     val titles = listOf(stringResource(id = R.string.edit), stringResource(id = R.string.preview))
     var selectedTabIndex by remember { mutableStateOf(if (viewModel.isPreview) PREVIEW_TAB_INDEX else EDIT_TAB_INDEX) }
     val focusManager = LocalFocusManager.current
-    val contentTextDirection = LocalContentTextDirection.current.getTextDirection()
+    val contentTextDirection = LocalContentTextDirection.current
+
+    LaunchedEffect(contentTextDirection) {
+        viewModel.updateTextDirectionPreference(contentTextDirection)
+    }
 
     Scaffold(
         topBar = {
@@ -86,7 +90,7 @@ fun NoteDetailPage(
                 .zIndex(if (selectedTabIndex == EDIT_TAB_INDEX) 1f else 0f),
             title = uiState.title,
             body = uiState.body,
-            textDirection = contentTextDirection,
+            textDirection = contentTextDirection.getTextDirection(),
             onTitleChanged = viewModel::updateTitle,
             onBodyChanged = viewModel::updateBody,
             onSaveResource = { uri: Uri ->

diff --git a/app/src/main/java/org/dianqk/ruslin/ui/page/note_detail/NoteDetailViewModel.kt b/app/src/main/java/org/dianqk/ruslin/ui/page/note_detail/NoteDetailViewModel.kt
@@ -16,6 +16,7 @@ import kotlinx.coroutines.flow.update
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import org.dianqk.ruslin.data.NotesRepository
+import org.dianqk.ruslin.data.preference.TextDirectionPreference
 import org.dianqk.ruslin.ui.RuslinDestinationsArgs
 import uniffi.ruslin.FfiNote
 import java.io.FileOutputStream
@@ -28,6 +29,7 @@ data class NoteDetailUiState(
     val body: String = "",
     val isLoading: Boolean = false,
     val previewHtml: String = "<!DOCTYPE html><html><body></body><html>",
+    val textDirectionPreference: TextDirectionPreference = TextDirectionPreference.default,
 )
 
 const val TAG = "NoteDetailViewModel"
@@ -83,6 +85,12 @@ class NoteDetailViewModel @Inject constructor(
         }
     }
 
+    fun updateTextDirectionPreference(textDirectionPreference: TextDirectionPreference) {
+        _uiState.update {
+            it.copy(textDirectionPreference = textDirectionPreference)
+        }
+    }
+
     fun updateTitle(newTitle: String) {
         edited = true
         _uiState.update {
@@ -163,15 +171,16 @@ class NoteDetailViewModel @Inject constructor(
         }
     }
 
-    fun setPreviewHtml(body: String) {
+    private fun setPreviewHtml(body: String) {
+        val htmlDirAttribute = uiState.value.textDirectionPreference.toHtmlDirAttribute()
         viewModelScope.launch {
             withContext(Dispatchers.IO) {
                 // TODO: Adapted to m3 theme, already adapted to the background color
                 val previewHtml = buildString {
                     append(
                         """
                                 <!DOCTYPE html>
-                                <html>
+                                <html dir="$htmlDirAttribute">
                                     <head>
                                         <meta charset="UTF-8">
                                         <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">