Writeopia · leandroBorgesFerreira · Oct 13, 2025 · Oct 12, 2025 · Oct 12, 2025 · Oct 12, 2025
diff --git a/application/core/utils/src/commonMain/kotlin/io/writeopia/common/utils/icons/WrIcons.kt b/application/core/utils/src/commonMain/kotlin/io/writeopia/common/utils/icons/WrIcons.kt
@@ -58,6 +58,7 @@ import io.writeopia.common.utils.icons.all.Undo2
 import io.writeopia.common.utils.icons.all.WandSparkles
 import io.writeopia.common.utils.icons.all.X
 import io.writeopia.common.utils.icons.all.Zap
+import io.writeopia.common.utils.icons.all.Link
 
 object WrIcons {
     val settings: ImageVector = Bolt
@@ -172,6 +173,8 @@ object WrIcons {
 
     val chart = ChartScatter
 
+    val link = Link
+
     val allIcons: Map<String, ImageVector> =
         mapOf(
             "settings" to settings,
@@ -228,6 +231,7 @@ object WrIcons {
             "ai" to ai,
             "command" to command,
             "chart" to chart,
+            "link" to link,
         )
 
     fun fromName(name: String): ImageVector? = allIcons[name]

diff --git a/application/core/utils/src/commonMain/kotlin/io/writeopia/common/utils/icons/all/link.kt b/application/core/utils/src/commonMain/kotlin/io/writeopia/common/utils/icons/all/link.kt
@@ -0,0 +1,51 @@
+package io.writeopia.common.utils.icons.all
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
+import androidx.compose.ui.graphics.vector.ImageVector
+import androidx.compose.ui.graphics.vector.path
+import androidx.compose.ui.unit.dp
+
+internal val Link: ImageVector
+    get() {
+        if (_link != null) return _link!!
+
+        _link = ImageVector.Builder(
+            name = "link",
+            defaultWidth = 24.dp,
+            defaultHeight = 24.dp,
+            viewportWidth = 24f,
+            viewportHeight = 24f
+        ).apply {
+            path(
+                stroke = SolidColor(Color.Black),
+                strokeLineWidth = 2f,
+                strokeLineCap = StrokeCap.Round,
+                strokeLineJoin = StrokeJoin.Round
+            ) {
+                moveTo(10f, 13f)
+                arcToRelative(5f, 5f, 0f, false, false, 7.54f, 0.54f)
+                lineToRelative(3f, -3f)
+                arcToRelative(5f, 5f, 0f, false, false, -7.07f, -7.07f)
+                lineToRelative(-1.72f, 1.71f)
+            }
+            path(
+                stroke = SolidColor(Color.Black),
+                strokeLineWidth = 2f,
+                strokeLineCap = StrokeCap.Round,
+                strokeLineJoin = StrokeJoin.Round
+            ) {
+                moveTo(14f, 11f)
+                arcToRelative(5f, 5f, 0f, false, false, -7.54f, -0.54f)
+                lineToRelative(-3f, 3f)
+                arcToRelative(5f, 5f, 0f, false, false, 7.07f, 7.07f)
+                lineToRelative(1.71f, -1.71f)
+            }
+        }.build()
+
+        return _link!!
+    }
+
+private var _link: ImageVector? = null
diff --git a/writeopia_models/src/commonMain/kotlin/io/writeopia/sdk/models/span/SpanInfo.kt b/writeopia_models/src/commonMain/kotlin/io/writeopia/sdk/models/span/SpanInfo.kt
@@ -4,7 +4,12 @@ import kotlin.math.abs
 import kotlin.math.max
 import kotlin.math.min
 
-data class SpanInfo private constructor(val start: Int, val end: Int, val span: Span) {
+data class SpanInfo private constructor(
+    val start: Int,
+    val end: Int,
+    val span: Span,
+    val extra: String? = null
+) {
 
     operator fun plus(spanInfo: SpanInfo) =
         if (spanInfo.span == spanInfo.span) {
@@ -29,10 +34,16 @@ data class SpanInfo private constructor(val start: Int, val end: Int, val span:
     /**
      *  Serialize the object as a string: "start:end:span"
      */
-    fun toText(): String = "$start:$end:${span.toText()}"
+    fun toText(): String = "$start:$end:${span.toText()}:$extra"
 
     fun size() = abs(end - start)
 
+    fun expandable() =
+        when (this.span) {
+            Span.LINK -> false
+            else -> true
+        }
+
     fun intersection(spanInfo: SpanInfo): Intersection {
         val (smaller, bigger) = orderSpansBySize(this, spanInfo)
 
@@ -80,19 +91,25 @@ data class SpanInfo private constructor(val start: Int, val end: Int, val span:
 
         fun fromString(serialized: String): SpanInfo {
             val parts = serialized.split(":")
-            require(parts.size == 3) { "Invalid serialized format" }
+            require(parts.size == 3 || parts.size == 4) { "Invalid serialized format" }
 
             val start = parts[0].toIntOrNull() ?: error("Invalid start value")
             val end = parts[1].toIntOrNull() ?: error("Invalid end value")
             val span = Span.textFromString(parts[2])
+            val extra = if (parts.size >= 4) parts[3] else null
 
-            return SpanInfo(start, end, span)
+            return SpanInfo(start, end, span, extra)
         }
 
-        fun create(start: Int, end: Int, span: Span): SpanInfo {
+        fun create(
+            start: Int,
+            end: Int,
+            span: Span,
+            extra: String? = null
+        ): SpanInfo {
             val (realStart, realEnd) = if (start <= end) start to end else end to start
 
-            return SpanInfo(realStart, realEnd, span)
+            return SpanInfo(realStart, realEnd, span, extra)
         }
     }
 }
@@ -112,6 +129,7 @@ enum class Span(val label: String) {
     HIGHLIGHT_YELLOW("HIGHLIGHT"),
     HIGHLIGHT_GREEN("HIGHLIGHT_GREEN"),
     HIGHLIGHT_RED("HIGHLIGHT_RED"),
+    LINK("LINK"),
     NONE("");
 
     fun toText() = this.label

diff --git a/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/components/EditionScreen.kt b/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/components/EditionScreen.kt
@@ -1,5 +1,6 @@
 package io.writeopia.ui.components
 
+import androidx.compose.animation.Crossfade
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.horizontalScroll
 import androidx.compose.foundation.layout.PaddingValues
@@ -9,20 +10,31 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ContentCut
 import androidx.compose.material.icons.filled.DeleteOutline
 import androidx.compose.material.icons.outlined.FormatBold
 import androidx.compose.material.icons.outlined.FormatItalic
 import androidx.compose.material.icons.outlined.FormatUnderlined
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.SolidColor
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.window.Popup
+import androidx.compose.ui.window.PopupProperties
 import io.writeopia.sdk.models.span.Span
 import io.writeopia.ui.icons.WrSdkIcons
 import org.jetbrains.compose.ui.tooling.preview.Preview
@@ -200,62 +212,87 @@ fun EditionScreenForText(
     modifier: Modifier = Modifier,
     iconSize: Dp = 36.dp,
     onSpanClick: (Span) -> Unit = {},
+    onLinkConfirm: (String) -> Unit = {},
 ) {
     val iconPadding = PaddingValues(vertical = 4.dp)
     val clipShape = MaterialTheme.shapes.medium
     val spaceWidth = 8.dp
 
-    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
-        val tint = MaterialTheme.colorScheme.onPrimary
+    var showLinkScreen by remember { mutableStateOf(false) }
 
-        Row(
-            modifier = Modifier
-                .horizontalScroll(rememberScrollState()),
-            verticalAlignment = Alignment.CenterVertically
-        ) {
-            Icon(
-                modifier = Modifier
-                    .clip(clipShape)
-                    .clickable {
-                        onSpanClick(Span.BOLD)
-                    }
-                    .size(iconSize)
-                    .padding(iconPadding),
-                imageVector = Icons.Outlined.FormatBold,
-                contentDescription = "BOLD",
-//            contentDescription = stringResource(R.string.delete),
-                tint = tint
+    Crossfade(showLinkScreen) { showLink ->
+        if (showLink) {
+            AddLinkScreen(
+                modifier = Modifier,
+                cancel = { showLinkScreen = false },
+                onLinkConfirm = onLinkConfirm
             )
+        } else {
+            Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
+                val tint = MaterialTheme.colorScheme.onPrimary
 
-            Icon(
-                modifier = Modifier
-                    .clip(clipShape)
-                    .clickable {
-                        onSpanClick(Span.ITALIC)
-                    }
-                    .size(iconSize)
-                    .padding(iconPadding),
-                imageVector = Icons.Outlined.FormatItalic,
-                contentDescription = "ITALIC",
+                Row(
+                    modifier = Modifier.horizontalScroll(rememberScrollState()),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Icon(
+                        modifier = Modifier
+                            .clip(clipShape)
+                            .clickable {
+                                onSpanClick(Span.BOLD)
+                            }
+                            .size(iconSize)
+                            .padding(iconPadding),
+                        imageVector = Icons.Outlined.FormatBold,
+                        contentDescription = "BOLD",
 //            contentDescription = stringResource(R.string.delete),
-                tint = tint
-            )
+                        tint = tint,
+                    )
 
-            Spacer(modifier = Modifier.width(spaceWidth))
+                    Icon(
+                        modifier = Modifier
+                            .clip(clipShape)
+                            .clickable {
+                                onSpanClick(Span.ITALIC)
+                            }
+                            .size(iconSize)
+                            .padding(iconPadding),
+                        imageVector = Icons.Outlined.FormatItalic,
+                        contentDescription = "ITALIC",
+//            contentDescription = stringResource(R.string.delete),
+                        tint = tint
+                    )
 
-            Icon(
-                modifier = Modifier
-                    .clip(clipShape)
-                    .clickable {
-                        onSpanClick(Span.UNDERLINE)
-                    }
-                    .size(iconSize)
-                    .padding(iconPadding),
-                imageVector = Icons.Outlined.FormatUnderlined,
-                contentDescription = "UNDERLINE",
+                    Spacer(modifier = Modifier.width(spaceWidth))
+
+                    Icon(
+                        modifier = Modifier
+                            .clip(clipShape)
+                            .clickable {
+                                onSpanClick(Span.UNDERLINE)
+                            }
+                            .size(iconSize)
+                            .padding(iconPadding),
+                        imageVector = Icons.Outlined.FormatUnderlined,
+                        contentDescription = "UNDERLINE",
 //            contentDescription = stringResource(R.string.delete),
-                tint = tint
-            )
+                        tint = tint
+                    )
+
+                    Spacer(modifier = Modifier.width(spaceWidth))
+
+                    Icon(
+                        modifier = Modifier
+                            .clip(clipShape)
+                            .clickable {
+                                showLinkScreen = true
+                            }
+                            .size(iconSize)
+                            .padding(PaddingValues(vertical = 5.dp)),
+                        imageVector = WrSdkIcons.linkPage,
+                        contentDescription = "Link to page",
+                        tint = tint
+                    )
 
 //            Spacer(modifier = Modifier.width(spaceWidth))
 //
@@ -295,6 +332,53 @@ fun EditionScreenForText(
 //                contentDescription = "Link to page",
 //                tint = tint
 //            )
+                }
+            }
+        }
+    }
+}
+
+@Composable
+private fun AddLinkScreen(
+    modifier: Modifier = Modifier,
+    cancel: () -> Unit,
+    onLinkConfirm: (String) -> Unit = {},
+) {
+    var linkText by remember { mutableStateOf("") }
+
+    Popup(properties = PopupProperties(focusable = true), onDismissRequest = cancel) {
+        Card(modifier = modifier.shadow(elevation = 6.dp, shape = CardDefaults.shape)) {
+            Row(
+                modifier = Modifier.padding(horizontal = 8.dp, vertical = 4.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                BasicTextField(
+                    modifier = Modifier.width(300.dp),
+                    value = linkText,
+                    onValueChange = { linkText = it },
+                    maxLines = 1,
+                    singleLine = true,
+                    textStyle = MaterialTheme.typography
+                        .bodyMedium
+                        .copy(color = MaterialTheme.colorScheme.onBackground),
+                    cursorBrush = SolidColor(MaterialTheme.colorScheme.onBackground)
+                )
+
+                Spacer(modifier = Modifier.width(8.dp))
+
+                Icon(
+                    imageVector = WrSdkIcons.check,
+                    contentDescription = "Confirm",
+                    modifier = Modifier
+                        .clip(MaterialTheme.shapes.medium)
+                        .clickable {
+                            onLinkConfirm(linkText)
+                        }
+                        .size(28.dp)
+                        .padding(4.dp),
+                    tint = MaterialTheme.colorScheme.onBackground
+                )
+            }
         }
     }
 }

diff --git a/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/TextToolbox.kt b/writeopia_ui/src/commonMain/kotlin/io/writeopia/ui/drawer/TextToolbox.kt
@@ -21,6 +21,7 @@ import io.writeopia.ui.components.EditionScreenForText
 fun TextToolbox(
     hasSelection: Boolean,
     onSpanClick: (Span) -> Unit = {},
+    onLinkClick: (String) -> Unit = {},
 ) {
     Popup(offset = IntOffset(0, -40)) {
         AnimatedVisibility(
@@ -37,6 +38,7 @@ fun TextToolbox(
                     .padding(horizontal = 8.dp, vertical = 2.dp),
                 iconSize = 28.dp,
                 onSpanClick = onSpanClick,
+                onLinkConfirm = onLinkClick,
             )
         }
     }