Spell Checking

gradle/libs.versions.toml

@@ -13,11 +13,13 @@ nexus-publish = "2.0.0"
 # For sample
 androidx-appcompat = "1.7.0"
 activity-compose = "1.9.3"
+symspellkt = "2.1.1"
+korge-io = "5.4.0"
 voyager = "1.1.0-beta03"
 richeditor = "1.0.0-rc10"
 coroutines = "1.9.0"
 ktor = "3.0.1"
-android-minSdk = "21"
+android-minSdk = "26"
 android-compileSdk = "34"
 
 [libraries]
@@ -32,6 +34,8 @@ nexus-publish = { module = "io.github.gradle-nexus.publish-plugin:io.github.grad
 # For sample
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 activity-compose = { module = "androidx.activity:activity-compose", version.ref = "activity-compose" }
+symspellkt = { module = "com.darkrockstudios:symspellkt", version.ref = "symspellkt" }
+korge-io = { module = "com.soywiz.korge:korge-core", version.ref = "korge-io" }
 voyager-navigator = { module = "cafe.adriel.voyager:voyager-navigator", version.ref = "voyager" }
 richeditor-compose = { module = "com.mohamedrejeb.richeditor:richeditor-compose", version.ref = "richeditor" }
 

richeditor-compose-spellcheck/.gitignore

@@ -0,0 +1 @@
+/build

richeditor-compose-spellcheck/build.gradle.kts

@@ -0,0 +1,84 @@
+import org.jetbrains.kotlin.gradle.ExperimentalKotlinGradlePluginApi
+import org.jetbrains.kotlin.gradle.ExperimentalWasmDsl
+import org.jetbrains.kotlin.gradle.dsl.JvmTarget
+
+plugins {
+    alias(libs.plugins.kotlinMultiplatform)
+    alias(libs.plugins.compose.compiler)
+    alias(libs.plugins.composeMultiplatform)
+    alias(libs.plugins.androidLibrary)
+    alias(libs.plugins.bcv)
+    id("module.publication")
+}
+
+kotlin {
+    explicitApi()
+    applyDefaultHierarchyTemplate()
+
+    androidTarget {
+        publishLibraryVariants("release")
+        @OptIn(ExperimentalKotlinGradlePluginApi::class)
+        compilerOptions {
+            jvmTarget.set(JvmTarget.JVM_1_8)
+        }
+    }
+
+    jvm("desktop") {
+        @OptIn(ExperimentalKotlinGradlePluginApi::class)
+        compilerOptions {
+            jvmTarget.set(JvmTarget.JVM_11)
+        }
+    }
+
+    js(IR) {
+        browser()
+    }
+    @OptIn(ExperimentalWasmDsl::class)
+    wasmJs {
+        browser {
+            testTask {
+                enabled = false
+            }
+        }
+    }
+
+    iosX64()
+    iosArm64()
+    iosSimulatorArm64()
+
+    sourceSets.commonMain.dependencies {
+        implementation(projects.richeditorCompose)
+
+        implementation(compose.ui)
+        implementation(compose.foundation)
+        implementation(compose.material3)
+
+        // Spell Check
+        implementation(libs.symspellkt)
+    }
+
+    sourceSets.commonTest.dependencies {
+        implementation(kotlin("test"))
+    }
+}
+
+android {
+    namespace = "com.mohamedrejeb.richeditor.compose.spellcheck"
+    compileSdk = libs.versions.android.compileSdk.get().toInt()
+
+    defaultConfig {
+        minSdk = libs.versions.android.minSdk.get().toInt()
+    }
+
+    compileOptions {
+        sourceCompatibility = JavaVersion.VERSION_1_8
+        targetCompatibility = JavaVersion.VERSION_1_8
+    }
+}
+
+apiValidation {
+    @OptIn(kotlinx.validation.ExperimentalBCVApi::class)
+    klib {
+        enabled = true
+    }
+}

richeditor-compose-spellcheck/proguard-rules.pro

@@ -0,0 +1,21 @@
+# Add project specific ProGuard rules here.
+# You can control the set of applied configuration files using the
+# proguardFiles setting in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# If your project uses WebView with JS, uncomment the following
+# and specify the fully qualified class name to the JavaScript interface
+# class:
+#-keepclassmembers class fqcn.of.javascript.interface.for.webview {
+#   public *;
+#}
+
+# Uncomment this to preserve the line number information for
+# debugging stack traces.
+#-keepattributes SourceFile,LineNumberTable
+
+# If you keep the line number information, uncomment this to
+# hide the original source file name.
+#-renamesourcefileattribute SourceFile

sample/common/src/commonMain/kotlin/com/mohamedrejeb/richeditor/sample/common/richeditor/SpellCheckSpan.kt → richeditor-compose-spellcheck/src/commonMain/kotlin/com/mohamedrejeb/richeditor/compose/spellcheck/SpellCheck.kt

@@ -1,7 +1,9 @@
-package com.mohamedrejeb.richeditor.sample.common.richeditor
+package com.mohamedrejeb.richeditor.compose.spellcheck
 
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.Path
+import androidx.compose.ui.graphics.StrokeCap
+import androidx.compose.ui.graphics.StrokeJoin
 import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.text.SpanStyle
@@ -13,9 +15,15 @@ import com.mohamedrejeb.richeditor.annotation.ExperimentalRichTextApi
 import com.mohamedrejeb.richeditor.model.RichSpanStyle
 import com.mohamedrejeb.richeditor.model.RichTextConfig
 import com.mohamedrejeb.richeditor.utils.getBoundingBoxes
+import kotlin.math.PI
+import kotlin.math.sin
 
+/**
+ * RichSpanStyle that draws a Spell Check style red squiggle below the Spanned text.
+ */
 @OptIn(ExperimentalRichTextApi::class)
-object SpellCheck: RichSpanStyle {
+public object SpellCheck: RichSpanStyle {
+
     override val spanStyle: (RichTextConfig) -> SpanStyle = {
         SpanStyle()
     }
@@ -35,19 +43,36 @@ object SpellCheck: RichSpanStyle {
             flattenForFullParagraphs = true,
         )
 
+        val amplitude = 1.5.dp.toPx() // Height of the wave
+        val frequency = 0.15f // Controls how many waves appear
+
         boxes.fastForEach { box ->
             path.moveTo(box.left + startPadding, box.bottom + topPadding)
-            path.lineTo(box.right + startPadding, box.bottom + topPadding)
+
+            // Create the sine wave path
+            for (x in 0..box.width.toInt()) {
+                val xPos = box.left + startPadding + x
+                val yPos = box.bottom + topPadding +
+                        (amplitude * sin(x * frequency * 2 * PI)).toFloat()
+
+                if (x == 0) {
+                    path.moveTo(xPos, yPos)
+                } else {
+                    path.lineTo(xPos, yPos)
+                }
+            }
 
             drawPath(
                 path = path,
                 color = strokeColor,
                 style = Stroke(
-                    width = 2.dp.toPx(),
+                    width = 1.dp.toPx(),
+                    cap = StrokeCap.Round,
+                    join = StrokeJoin.Round
                 )
             )
         }
     }
 
     override val acceptNewTextInTheEdges: Boolean = false
-}
+}

richeditor-compose-spellcheck/src/commonMain/kotlin/com/mohamedrejeb/richeditor/compose/spellcheck/SpellCheckState.kt

@@ -0,0 +1,122 @@
+package com.mohamedrejeb.richeditor.compose.spellcheck
+
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.text.TextRange
+import androidx.compose.ui.util.fastForEach
+import com.darkrockstudios.symspellkt.api.SpellChecker
+import com.darkrockstudios.symspellkt.common.SuggestionItem
+import com.darkrockstudios.symspellkt.common.Verbosity
+import com.mohamedrejeb.richeditor.compose.spellcheck.utils.applyCapitalizationStrategy
+import com.mohamedrejeb.richeditor.compose.spellcheck.utils.isSpelledCorrectly
+import com.mohamedrejeb.richeditor.compose.spellcheck.utils.spellingIsCorrect
+import com.mohamedrejeb.richeditor.model.RichSpanStyle
+import com.mohamedrejeb.richeditor.model.RichTextState
+import com.mohamedrejeb.richeditor.utils.WordSegment
+
+public class SpellCheckState(
+    public val richTextState: RichTextState,
+    public var spellChecker: SpellChecker?
+) {
+    private var lastTextHash = -1
+    private val misspelledWords = mutableListOf<WordSegment>()
+
+    public fun handleSpanClick(span: RichSpanStyle, range: TextRange, click: Offset): WordSegment? {
+        return if (span is SpellCheck) {
+            findWordSegmentContainingRange(
+                misspelledWords,
+                range
+            )
+        } else {
+            null
+        }
+    }
+
+    public fun correctSpelling(segment: WordSegment, correction: String) {
+        val currentStyle = richTextState.getSpanStyle(segment.range)
+        richTextState.replaceTextRange(segment.range, correction)
+
+        val correctionRange =
+            TextRange(start = segment.range.start, end = segment.range.start + correction.length)
+        richTextState.addSpanStyle(currentStyle, correctionRange)
+    }
+
+    /**
+     * This is a very naive algorithm that just removes all spell check spans and
+     * reruns the entire spell check again.
+     */
+    public fun runSpellCheck() {
+        val sp = spellChecker ?: return
+
+        richTextState.apply {
+            // Remove all existing spell checks
+            getAllRichSpans()
+                .filter { it.first is SpellCheck }
+                .forEach { span ->
+                    removeRichSpan(SpellCheck, span.second)
+                }
+
+            misspelledWords.clear()
+            getWords().mapNotNullTo(misspelledWords) { segment ->
+                val suggestions = sp.lookup(segment.text)
+                if (suggestions.spellingIsCorrect(segment.text)) {
+                    null
+                } else {
+                    segment
+                }
+            }
+
+            misspelledWords.fastForEach { wordSegment ->
+                addRichSpan(SpellCheck, wordSegment.range)
+            }
+        }
+    }
+
+    public fun onTextChange(richTextState: RichTextState) {
+        val newTextHash = richTextState.annotatedString.hashCode()
+        if (lastTextHash != newTextHash) {
+            runSpellCheck()
+            lastTextHash = newTextHash
+        }
+    }
+
+    private fun findWordSegmentContainingRange(
+        segments: List<WordSegment>,
+        range: TextRange
+    ): WordSegment? {
+        return segments.find { wordSegment ->
+            val segmentRange = wordSegment.range
+            range.start >= segmentRange.start && range.end <= segmentRange.end
+        }
+    }
+
+    public fun getSuggestions(word: String): List<SuggestionItem> {
+        val sp = spellChecker ?: return emptyList()
+
+        val suggestions = sp.lookup(word, verbosity = Verbosity.All)
+        val proposedSuggestions = if (word.isSpelledCorrectly(suggestions).not()) {
+            // If things are misspelled, see if it just needs to be broken up
+            val composition = sp.wordBreakSegmentation(word)
+            val segmentedWord = composition.segmentedString
+            if (segmentedWord != null
+                && segmentedWord.equals(word, ignoreCase = true).not()
+                && suggestions.find { it.term.equals(segmentedWord, ignoreCase = true) } == null
+            ) {
+                // Add the segmented suggest as first item if it didn't already exist
+                listOf(SuggestionItem(segmentedWord, 1.0, 0.1)) + suggestions
+            } else {
+                suggestions
+            }
+        } else {
+            emptyList()
+        }
+
+        return proposedSuggestions.map { suggestionItem ->
+            suggestionItem.copy(
+                term = applyCapitalizationStrategy(
+                    source = word,
+                    target = suggestionItem.term
+                )
+            )
+        }
+    }
+}

richeditor-compose-spellcheck/src/commonMain/kotlin/com/mohamedrejeb/richeditor/compose/spellcheck/SpellCheckTextContextMenuProvider.kt

@@ -0,0 +1,32 @@
+package com.mohamedrejeb.richeditor.compose.spellcheck
+
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import com.mohamedrejeb.richeditor.utils.WordSegment
+
+@Composable
+public expect fun SpellCheckTextContextMenuProvider(
+    modifier: Modifier,
+    spellCheckMenuState: SpellCheckMenuState,
+    content: @Composable () -> Unit
+)
+
+public data class SpellCheckMenuState(
+    val spellCheckState: SpellCheckState,
+) {
+    val missSpelling: MutableState<MissSpelling?> = mutableStateOf(null)
+
+    public fun clearSpellCheck() {
+        missSpelling.value = null
+    }
+
+    public fun performCorrection(toReplace: WordSegment, correction: String) {
+        spellCheckState.correctSpelling(toReplace, correction)
+        clearSpellCheck()
+    }
+
+    public data class MissSpelling(val wordSegment: WordSegment, val menuPosition: Offset)
+}