Make MarkdownTextfield generic (#195)

app/src/main/java/com/jerboa/ui/components/comment/edit/CommentEdit.kt

@@ -1,5 +1,6 @@
 package com.jerboa.ui.components.comment.edit
 
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.*
@@ -80,7 +81,13 @@ fun CommentEdit(
         modifier = Modifier.simpleVerticalScrollbar(listState)
     ) {
         item {
-            MarkdownTextField(reply = content, onReplyChange = onContentChange, account = account)
+            MarkdownTextField(
+                text = content,
+                onTextChange = onContentChange,
+                account = account,
+                modifier = Modifier.fillMaxWidth(),
+                placeholder = "Type your comment"
+            )
         }
     }
 }

app/src/main/java/com/jerboa/ui/components/comment/reply/CommentReply.kt

@@ -1,6 +1,7 @@
 package com.jerboa.ui.components.comment.reply
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -150,7 +151,12 @@ fun CommentReply(
             Divider(modifier = Modifier.padding(vertical = LARGE_PADDING))
         }
         item {
-            MarkdownTextField(reply = reply, onReplyChange = onReplyChange, account = account)
+            MarkdownTextField(
+                text = reply,
+                onTextChange = onReplyChange,
+                account = account,
+                modifier = Modifier.fillMaxWidth()
+            )
         }
     }
 }
@@ -181,7 +187,13 @@ fun PostReply(
             Divider(modifier = Modifier.padding(vertical = LARGE_PADDING))
         }
         item {
-            MarkdownTextField(reply = reply, onReplyChange = onReplyChange, account = account)
+            MarkdownTextField(
+                text = reply,
+                onTextChange = onReplyChange,
+                account = account,
+                modifier = Modifier.fillMaxWidth(),
+                placeholder = "Type your comment"
+            )
         }
     }
 }

app/src/main/java/com/jerboa/ui/components/common/InputFields.kt

@@ -42,120 +42,137 @@ import kotlinx.coroutines.launch
 
 @Composable
 fun MarkdownTextField(
-    reply: TextFieldValue,
-    onReplyChange: (TextFieldValue) -> Unit,
+    text: TextFieldValue,
+    onTextChange: (TextFieldValue) -> Unit,
     account: Account?,
+    modifier: Modifier = Modifier,
+    placeholder: String = "",
+    focusImmediate: Boolean = true,
+    outlined: Boolean = false,
 ) {
     val focusRequester = remember { FocusRequester() }
     val imageUploading = rememberSaveable { mutableStateOf(false) }
-    val launcher = imageUploadLauncher(account, onReplyChange, reply, imageUploading)
+    val launcher = imageUploadLauncher(account, onTextChange, text, imageUploading)
 
     var showCreateLink by remember { mutableStateOf(false) }
     var showPreview by remember { mutableStateOf(false) }
 
     if (showCreateLink) {
         CreateLinkDialog(
-            value = reply,
+            value = text,
             onDismissRequest = { showCreateLink = false },
             onClickOk = {
                 showCreateLink = false
-                onReplyChange(it)
+                onTextChange(it)
             },
         )
     }
 
     if (showPreview) {
         ShowPreviewDialog(
-            content = reply.text,
+            content = text.text,
             onDismissRequest = { showPreview = false },
         )
     }
 
     Column {
-        TextField(
-            value = reply,
-            onValueChange = onReplyChange,
-            placeholder = { Text(text = "Type your comment") },
-            modifier = Modifier
-                .fillMaxWidth()
-                .focusRequester(focusRequester),
-            keyboardOptions = KeyboardOptions.Default.copy(
-                capitalization = KeyboardCapitalization.Sentences,
-                keyboardType = KeyboardType.Text,
-                // autoCorrect = true,
-            ),
-            colors = TextFieldDefaults.textFieldColors(
-                textColor = MaterialTheme.colors.onSurface,
-                backgroundColor = Color.Transparent,
-                focusedIndicatorColor = Color.Transparent,
-                unfocusedIndicatorColor = Color.Transparent,
+        if (outlined) {
+            OutlinedTextField(
+                value = text,
+                onValueChange = onTextChange,
+                label = { Text(text = placeholder) },
+                modifier = modifier.focusRequester(focusRequester),
+                keyboardOptions = KeyboardOptions.Default.copy(
+                    capitalization = KeyboardCapitalization.Sentences,
+                    keyboardType = KeyboardType.Text,
+                    // autoCorrect = true,
+                ),
             )
-        )
+        } else {
+            TextField(
+                value = text,
+                onValueChange = onTextChange,
+                placeholder = { Text(text = placeholder) },
+                modifier = modifier.focusRequester(focusRequester),
+                keyboardOptions = KeyboardOptions.Default.copy(
+                    capitalization = KeyboardCapitalization.Sentences,
+                    keyboardType = KeyboardType.Text,
+                    // autoCorrect = true,
+                ),
+                colors = TextFieldDefaults.textFieldColors(
+                    textColor = MaterialTheme.colors.onSurface,
+                    backgroundColor = Color.Transparent,
+                    focusedIndicatorColor = Color.Transparent,
+                    unfocusedIndicatorColor = Color.Transparent,
+                )
+            )
+        }
+
         MarkdownHelperBar(
             imageUploading = imageUploading.value,
             onBoldClick = {
                 simpleMarkdownSurround(
                     "**",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onItalicsClick = {
                 simpleMarkdownSurround(
                     "*",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onQuoteClick = {
                 simpleMarkdownSurround(
                     "> ",
-                    value = reply,
-                    onValueChange = onReplyChange,
+                    value = text,
+                    onValueChange = onTextChange,
                     surround = false,
                 )
             },
             onHeaderClick = {
                 simpleMarkdownSurround(
                     "# ",
-                    value = reply,
-                    onValueChange = onReplyChange,
+                    value = text,
+                    onValueChange = onTextChange,
                     surround = false,
                 )
             },
             onCodeClick = {
                 simpleMarkdownSurround(
                     "`",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onStrikethroughClick = {
                 simpleMarkdownSurround(
                     "~~",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onSubscriptClick = {
                 simpleMarkdownSurround(
                     "~",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onSuperscriptClick = {
                 simpleMarkdownSurround(
                     "^",
-                    value = reply,
-                    onValueChange = onReplyChange
+                    value = text,
+                    onValueChange = onTextChange
                 )
             },
             onListClick = {
                 simpleMarkdownSurround(
                     "- ",
-                    value = reply,
-                    onValueChange = onReplyChange,
+                    value = text,
+                    onValueChange = onTextChange,
                     surround = false,
                 )
             },
@@ -172,7 +189,9 @@ fun MarkdownTextField(
     }
 
     DisposableEffect(Unit) {
-        focusRequester.requestFocus()
+        if (focusImmediate) {
+            focusRequester.requestFocus()
+        }
         onDispose { }
     }
 }
@@ -223,7 +242,9 @@ fun CreateLinkDialog(
         buttons = {
             Row(
                 horizontalArrangement = Arrangement.End,
-                modifier = Modifier.padding(horizontal = XXL_PADDING).fillMaxWidth(),
+                modifier = Modifier
+                    .padding(horizontal = XXL_PADDING)
+                    .fillMaxWidth(),
             ) {
                 TextButton(
                     onClick = onDismissRequest,
@@ -274,7 +295,9 @@ fun ShowPreviewDialog(
         buttons = {
             Row(
                 horizontalArrangement = Arrangement.End,
-                modifier = Modifier.padding(horizontal = XXL_PADDING).fillMaxWidth(),
+                modifier = Modifier
+                    .padding(horizontal = XXL_PADDING)
+                    .fillMaxWidth(),
             ) {
                 TextButton(
                     onClick = onDismissRequest,
@@ -298,8 +321,8 @@ fun CreateLinkDialogPreview() {
 @Composable
 private fun imageUploadLauncher(
     account: Account?,
-    onReplyChange: (TextFieldValue) -> Unit,
-    reply: TextFieldValue,
+    onTextChange: (TextFieldValue) -> Unit,
+    text: TextFieldValue,
     imageUploading: MutableState<Boolean>,
 ): ManagedActivityResultLauncher<String, Uri?> {
     val ctx = LocalContext.current
@@ -324,7 +347,7 @@ private fun imageUploadLauncher(
                     val url = uploadPictrsImage(acct, imageIs, ctx)
                     url?.also {
                         imageUploading.value = false
-                        onReplyChange(TextFieldValue(appendMarkdownImage(reply.text, it)))
+                        onTextChange(TextFieldValue(appendMarkdownImage(text.text, it)))
                     }
                 }
             }
@@ -589,7 +612,7 @@ fun MyDropDown(
 
 @Preview
 @Composable
-fun ReplyMarkdownBarPreview() {
+fun TextMarkdownBarPreview() {
     MarkdownHelperBar(
         onHeaderClick = {},
         onPreviewClick = {},

app/src/main/java/com/jerboa/ui/components/post/create/CreatePost.kt

@@ -15,13 +15,16 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.input.KeyboardType
+import androidx.compose.ui.text.input.TextFieldValue
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavController
 import androidx.navigation.compose.rememberNavController
 import com.jerboa.datatypes.CommunitySafe
 import com.jerboa.datatypes.sampleCommunitySafe
+import com.jerboa.db.Account
 import com.jerboa.ui.components.common.CircularIcon
+import com.jerboa.ui.components.common.MarkdownTextField
 import com.jerboa.ui.components.common.PickImage
 import com.jerboa.ui.components.common.simpleVerticalScrollbar
 import com.jerboa.ui.theme.*
@@ -84,8 +87,8 @@ fun CreatePostHeader(
 fun CreatePostBody(
     name: String,
     onNameChange: (name: String) -> Unit,
-    body: String,
-    onBodyChange: (body: String) -> Unit,
+    body: TextFieldValue,
+    onBodyChange: (body: TextFieldValue) -> Unit,
     url: String,
     onUrlChange: (url: String) -> Unit,
     onPickedImage: (image: Uri) -> Unit,
@@ -94,6 +97,7 @@ fun CreatePostBody(
     navController: NavController = rememberNavController(),
     formValid: (valid: Boolean) -> Unit,
     suggestedTitle: String? = null,
+    account: Account?,
 ) {
 
     val nameField = validatePostName(name)
@@ -158,16 +162,16 @@ fun CreatePostBody(
                 horizontalAlignment = Alignment.End
             )
         }
-        // TODO change this to reply text field at some point
         item {
-            OutlinedTextField(
-                label = {
-                    Text("Body")
-                },
-                value = body,
-                onValueChange = onBodyChange,
+            MarkdownTextField(
+                text = body,
+                onTextChange = onBodyChange,
                 modifier = Modifier
                     .fillMaxWidth(),
+                outlined = true,
+                account = account,
+                focusImmediate = false,
+                placeholder = "Body"
             )
         }
         item {
@@ -229,14 +233,15 @@ fun CreatePostBody(
 fun CreatePostBodyPreview() {
     CreatePostBody(
         name = "",
-        body = "",
+        body = TextFieldValue(""),
         url = "",
         community = sampleCommunitySafe,
         formValid = {},
         onPickedImage = {},
         onUrlChange = {},
         onBodyChange = {},
         onNameChange = {},
+        account = null,
     )
 }
 
@@ -245,13 +250,14 @@ fun CreatePostBodyPreview() {
 fun CreatePostBodyPreviewNoCommunity() {
     CreatePostBody(
         name = "",
-        body = "",
+        body = TextFieldValue(""),
         url = "",
         suggestedTitle = "a title here....",
         formValid = {},
         onNameChange = {},
         onBodyChange = {},
         onUrlChange = {},
         onPickedImage = {},
+        account = null,
     )
 }