Merge pull request #17 from Infomaniak/justify-content

Support text justification
Infomaniak · Jun 20, 2024 · c611428 · c611428
2 parents ef8d811 + fc14a68
commit c611428
Show file tree

Hide file tree

Showing 12 changed files with 124 additions and 1 deletion.
diff --git a/rich-html-editor/src/main/assets/define_listeners.js b/rich-html-editor/src/main/assets/define_listeners.js
@@ -86,7 +86,11 @@ function reportSelectionStateChangedIfNecessary() {
             newSelectionState["insertOrderedList"],
             newSelectionState["insertUnorderedList"],
             newSelectionState["subscript"],
-            newSelectionState["superscript"]
+            newSelectionState["superscript"],
+            newSelectionState["justifyLeft"],
+            newSelectionState["justifyCenter"],
+            newSelectionState["justifyRight"],
+            newSelectionState["justifyFull"]
         )
     }
 }

diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/EditorStatuses.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/EditorStatuses.kt
@@ -18,6 +18,7 @@ data class EditorStatuses(
     var isUnorderedListSelected: Boolean = false,
     var isSubscript: Boolean = false,
     var isSuperscript: Boolean = false,
+    var justification: Justification? = null,
 ) {
     private val mutex = Mutex()
 
@@ -35,6 +36,7 @@ data class EditorStatuses(
         isUnorderedListSelected: Boolean,
         isSubscript: Boolean,
         isSuperscript: Boolean,
+        justification: Justification?,
     ) {
         mutex.withLock {
             this.isBold = isBold
@@ -50,6 +52,7 @@ data class EditorStatuses(
             this.isUnorderedListSelected = isUnorderedListSelected
             this.isSubscript = isSubscript
             this.isSuperscript = isSuperscript
+            this.justification = justification
         }
     }
 }
diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/JsBridge.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/JsBridge.kt
@@ -50,6 +50,8 @@ internal class JsBridge(
 
     fun removeFormat() = execCommand(OtherCommand.REMOVE_FORMAT)
 
+    fun justify(justification: Justification) = execCommand(justification.execCommand)
+
     fun indent() = execCommand(OtherCommand.INDENT)
 
     fun outdent() = execCommand(OtherCommand.OUTDENT)
@@ -108,7 +110,19 @@ internal class JsBridge(
         isUnorderedListSelected: Boolean,
         isSubscript: Boolean,
         isSuperscript: Boolean,
+        isJustifyLeft: Boolean,
+        isJustifyCenter: Boolean,
+        isJustifyRight: Boolean,
+        isJustifyFull: Boolean,
     ) {
+        fun computeJustification(): Justification? = when {
+            isJustifyLeft -> Justification.LEFT
+            isJustifyCenter -> Justification.CENTER
+            isJustifyRight -> Justification.RIGHT
+            isJustifyFull -> Justification.FULL
+            else -> null
+        }
+
         coroutineScope.launch(defaultDispatcher) {
             editorStatuses.updateStatusesAtomically(
                 isBold,
@@ -124,6 +138,7 @@ internal class JsBridge(
                 isUnorderedListSelected,
                 isSubscript,
                 isSuperscript,
+                computeJustification(),
             )
             _editorStatusesFlow.emit(editorStatuses)
         }

diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/Justification.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/Justification.kt
@@ -0,0 +1,8 @@
+package com.infomaniak.lib.richhtmleditor
+
+enum class Justification(val execCommand: StatusCommand) {
+    LEFT(StatusCommand.JUSTIFY_LEFT),
+    CENTER(StatusCommand.JUSTIFY_CENTER),
+    RIGHT(StatusCommand.JUSTIFY_RIGHT),
+    FULL(StatusCommand.JUSTIFY_FULL),
+}
diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/RichHtmlEditorWebView.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/RichHtmlEditorWebView.kt
@@ -131,6 +131,7 @@ class RichHtmlEditorWebView @JvmOverloads constructor(
     fun toggleSubscript() = jsBridge.toggleSubscript()
     fun toggleSuperscript() = jsBridge.toggleSuperscript()
     fun removeFormat() = jsBridge.removeFormat()
+    fun justify(justification: Justification) = jsBridge.justify(justification)
     fun indent() = jsBridge.indent()
     fun outdent() = jsBridge.outdent()
     fun setTextColor(@ColorInt color: Int) = jsBridge.setTextColor(JsColor(color))

diff --git a/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/StatusCommand.kt b/rich-html-editor/src/main/java/com/infomaniak/lib/richhtmleditor/StatusCommand.kt
@@ -9,6 +9,10 @@ enum class StatusCommand(override val argumentName: String, val statusType: Stat
     UNORDERED_LIST("insertUnorderedList", StatusType.STATE),
     SUBSCRIPT("subscript", StatusType.STATE),
     SUPERSCRIPT("superscript", StatusType.STATE),
+    JUSTIFY_LEFT("justifyLeft", StatusType.STATE),
+    JUSTIFY_CENTER("justifyCenter", StatusType.STATE),
+    JUSTIFY_RIGHT("justifyRight", StatusType.STATE),
+    JUSTIFY_FULL("justifyFull", StatusType.STATE),
     FONT_NAME("fontName", StatusType.VALUE),
     FONT_SIZE("fontSize", StatusType.VALUE),
     TEXT_COLOR("foreColor", StatusType.VALUE),

diff --git a/sample/src/main/java/com/infomaniak/lib/richhtmleditor/sample/EditorSampleFragment.kt b/sample/src/main/java/com/infomaniak/lib/richhtmleditor/sample/EditorSampleFragment.kt
@@ -14,6 +14,7 @@ import androidx.fragment.app.Fragment
 import androidx.fragment.app.activityViewModels
 import androidx.lifecycle.lifecycleScope
 import com.google.android.material.dialog.MaterialAlertDialogBuilder
+import com.infomaniak.lib.richhtmleditor.Justification
 import com.infomaniak.lib.richhtmleditor.sample.databinding.CreateLinkTextInputBinding
 import com.infomaniak.lib.richhtmleditor.sample.databinding.FragmentEditorSampleBinding
 import kotlinx.coroutines.launch
@@ -78,6 +79,10 @@ class EditorSampleFragment : Fragment() {
         buttonSuperscript.setOnClickListener { editor.toggleSuperscript() }
         buttonOutdent.setOnClickListener { editor.outdent() }
         buttonIndent.setOnClickListener { editor.indent() }
+        justifyLeft.setOnClickListener { editor.justify(Justification.LEFT) }
+        justifyCenter.setOnClickListener { editor.justify(Justification.CENTER) }
+        justifyRight.setOnClickListener { editor.justify(Justification.RIGHT) }
+        justifyFull.setOnClickListener { editor.justify(Justification.FULL) }
 
         buttonExportHtml.setOnClickListener { editor.exportHtml { html -> Log.d("editor", "Output html: $html") } }
 
@@ -114,6 +119,11 @@ class EditorSampleFragment : Fragment() {
                 unorderedList.isActivated = it.isUnorderedListSelected
                 buttonSubscript.isActivated = it.isSubscript
                 buttonSuperscript.isActivated = it.isSuperscript
+
+                justifyLeft.isActivated = it.justification == Justification.LEFT
+                justifyCenter.isActivated = it.justification == Justification.CENTER
+                justifyRight.isActivated = it.justification == Justification.RIGHT
+                justifyFull.isActivated = it.justification == Justification.FULL
             }
         }
     }

diff --git a/sample/src/main/res/drawable/ic_justify_center.xml b/sample/src/main/res/drawable/ic_justify_center.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M160,840Q143,840 131.5,828.5Q120,817 120,800Q120,783 131.5,771.5Q143,760 160,760L800,760Q817,760 828.5,771.5Q840,783 840,800Q840,817 828.5,828.5Q817,840 800,840L160,840ZM320,680Q303,680 291.5,668.5Q280,657 280,640Q280,623 291.5,611.5Q303,600 320,600L640,600Q657,600 668.5,611.5Q680,623 680,640Q680,657 668.5,668.5Q657,680 640,680L320,680ZM160,520Q143,520 131.5,508.5Q120,497 120,480Q120,463 131.5,451.5Q143,440 160,440L800,440Q817,440 828.5,451.5Q840,463 840,480Q840,497 828.5,508.5Q817,520 800,520L160,520ZM320,360Q303,360 291.5,348.5Q280,337 280,320Q280,303 291.5,291.5Q303,280 320,280L640,280Q657,280 668.5,291.5Q680,303 680,320Q680,337 668.5,348.5Q657,360 640,360L320,360ZM160,200Q143,200 131.5,188.5Q120,177 120,160Q120,143 131.5,131.5Q143,120 160,120L800,120Q817,120 828.5,131.5Q840,143 840,160Q840,177 828.5,188.5Q817,200 800,200L160,200Z" />
+
+</vector>
diff --git a/sample/src/main/res/drawable/ic_justify_full.xml b/sample/src/main/res/drawable/ic_justify_full.xml
@@ -0,0 +1,12 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M160,840Q143,840 131.5,828.5Q120,817 120,800Q120,783 131.5,771.5Q143,760 160,760L800,760Q817,760 828.5,771.5Q840,783 840,800Q840,817 828.5,828.5Q817,840 800,840L160,840ZM160,680Q143,680 131.5,668.5Q120,657 120,640Q120,623 131.5,611.5Q143,600 160,600L800,600Q817,600 828.5,611.5Q840,623 840,640Q840,657 828.5,668.5Q817,680 800,680L160,680ZM160,520Q143,520 131.5,508.5Q120,497 120,480Q120,463 131.5,451.5Q143,440 160,440L800,440Q817,440 828.5,451.5Q840,463 840,480Q840,497 828.5,508.5Q817,520 800,520L160,520ZM160,360Q143,360 131.5,348.5Q120,337 120,320Q120,303 131.5,291.5Q143,280 160,280L800,280Q817,280 828.5,291.5Q840,303 840,320Q840,337 828.5,348.5Q817,360 800,360L160,360ZM160,200Q143,200 131.5,188.5Q120,177 120,160Q120,143 131.5,131.5Q143,120 160,120L800,120Q817,120 828.5,131.5Q840,143 840,160Q840,177 828.5,188.5Q817,200 800,200L160,200Z" />
+
+</vector>
diff --git a/sample/src/main/res/drawable/ic_justify_left.xml b/sample/src/main/res/drawable/ic_justify_left.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M160,840Q143,840 131.5,828.5Q120,817 120,800Q120,783 131.5,771.5Q143,760 160,760L800,760Q817,760 828.5,771.5Q840,783 840,800Q840,817 828.5,828.5Q817,840 800,840L160,840ZM160,680Q143,680 131.5,668.5Q120,657 120,640Q120,623 131.5,611.5Q143,600 160,600L560,600Q577,600 588.5,611.5Q600,623 600,640Q600,657 588.5,668.5Q577,680 560,680L160,680ZM160,520Q143,520 131.5,508.5Q120,497 120,480Q120,463 131.5,451.5Q143,440 160,440L800,440Q817,440 828.5,451.5Q840,463 840,480Q840,497 828.5,508.5Q817,520 800,520L160,520ZM160,360Q143,360 131.5,348.5Q120,337 120,320Q120,303 131.5,291.5Q143,280 160,280L560,280Q577,280 588.5,291.5Q600,303 600,320Q600,337 588.5,348.5Q577,360 560,360L160,360ZM160,200Q143,200 131.5,188.5Q120,177 120,160Q120,143 131.5,131.5Q143,120 160,120L800,120Q817,120 828.5,131.5Q840,143 840,160Q840,177 828.5,188.5Q817,200 800,200L160,200Z" />
+
+</vector>
diff --git a/sample/src/main/res/drawable/ic_justify_right.xml b/sample/src/main/res/drawable/ic_justify_right.xml
@@ -0,0 +1,13 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:tint="#000000"
+    android:viewportWidth="960"
+    android:viewportHeight="960">
+
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M160,200Q143,200 131.5,188.5Q120,177 120,160Q120,143 131.5,131.5Q143,120 160,120L800,120Q817,120 828.5,131.5Q840,143 840,160Q840,177 828.5,188.5Q817,200 800,200L160,200ZM400,360Q383,360 371.5,348.5Q360,337 360,320Q360,303 371.5,291.5Q383,280 400,280L800,280Q817,280 828.5,291.5Q840,303 840,320Q840,337 828.5,348.5Q817,360 800,360L400,360ZM160,520Q143,520 131.5,508.5Q120,497 120,480Q120,463 131.5,451.5Q143,440 160,440L800,440Q817,440 828.5,451.5Q840,463 840,480Q840,497 828.5,508.5Q817,520 800,520L160,520ZM400,680Q383,680 371.5,668.5Q360,657 360,640Q360,623 371.5,611.5Q383,600 400,600L800,600Q817,600 828.5,611.5Q840,623 840,640Q840,657 828.5,668.5Q817,680 800,680L400,680ZM160,840Q143,840 131.5,828.5Q120,817 120,800Q120,783 131.5,771.5Q143,760 160,760L800,760Q817,760 828.5,771.5Q840,783 840,800Q840,817 828.5,828.5Q817,840 800,840L160,840Z" />
+
+</vector>
diff --git a/sample/src/main/res/layout/fragment_editor_sample.xml b/sample/src/main/res/layout/fragment_editor_sample.xml
@@ -113,6 +113,34 @@
                     android:layout_height="wrap_content"
                     app:icon="@drawable/ic_indent" />
 
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/justifyLeft"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:icon="@drawable/ic_justify_left" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/justifyCenter"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:icon="@drawable/ic_justify_center" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/justifyRight"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:icon="@drawable/ic_justify_right" />
+
+                <com.google.android.material.button.MaterialButton
+                    android:id="@+id/justifyFull"
+                    style="@style/EditorButton"
+                    android:layout_width="wrap_content"
+                    android:layout_height="wrap_content"
+                    app:icon="@drawable/ic_justify_full" />
+
             </LinearLayout>
         </com.google.android.material.card.MaterialCardView>
     </HorizontalScrollView>