Merge branch 'trunk' into feature/item-indent

Author: planarvoid

README.md

@@ -1,4 +1,4 @@
-<h1><img align="center" width=50px height=50px src="https://github.com/wordpress-mobile/AztecEditor-iOS/raw/develop/RepoAssets/aztec.png" alt="Aztec Logo"/>&nbsp;Aztec: Native HTML Editor for Android</h1>
+<h1><img align="center" width=50px height=50px src="https://github.com/wordpress-mobile/AztecEditor-Android/raw/trunk/RepoAssets/aztec.png" alt="Aztec Logo"/>&nbsp;Aztec: Native HTML Editor for Android</h1>
 
 [![CircleCI](https://circleci.com/gh/wordpress-mobile/AztecEditor-Android.svg?style=svg)](https://circleci.com/gh/wordpress-mobile/AztecEditor-Android)
 
@@ -7,7 +7,7 @@ documents in Android.
 
 Supports Android 4.1+ (API 16 - Jelly Bean)
 
-<img align="center" width=360px height=640px src="https://github.com/wordpress-mobile/AztecEditor-Android/raw/develop/visual_editor.png" alt="Visual Editor"/> <img align="center" width=360px height=640px src="https://github.com/wordpress-mobile/AztecEditor-Android/raw/develop/code_editor.png" alt="Visual Editor"/>
+<img align="center" width=360px height=640px src="https://github.com/wordpress-mobile/AztecEditor-Android/raw/trunk/visual_editor.png" alt="Visual Editor"/> <img align="center" width=360px height=640px src="https://github.com/wordpress-mobile/AztecEditor-Android/raw/trunk/code_editor.png" alt="Visual Editor"/>
 
 ## Getting started
 
@@ -59,7 +59,7 @@ Aztec.with(visualEditor, sourceEditor, toolbar, context)
     .setVideoThumbnailGetter(GlideVideoThumbnailLoader(context))
 ```
 
-For more options, such as edit history, listeners and plugins please refer to the [demo app implementation](https://github.com/wordpress-mobile/AztecEditor-Android/blob/develop/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt).
+For more options, such as edit history, listeners and plugins please refer to the [demo app implementation](https://github.com/wordpress-mobile/AztecEditor-Android/blob/trunk/app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt).
 
 ## Build and test
 
@@ -119,6 +119,39 @@ dependencies {
 }
 ```
 
+## Modifications
+
+You can use the API to modify Aztec behaviour. 
+
+### Toolbar items
+
+If you want to limit the functionality the Aztec library provides, you can change it calling the `setToolbarItems` method on `AztecToolbar`. 
+The following example will enable only `bold`, `plugins` and `list` items in the given order.
+
+```kotlin
+aztecToolbar.setToolbarItems(ToolbarItems.BasicLayout(ToolbarAction.BOLD, ToolbarItems.PLUGINS, ToolbarAction.LIST))
+```
+
+You can set new items which are not enabled by default. `ToolbarAction.CODE` and `ToolbarAction.PRE`. 
+- `CODE` represents inline HTML code 
+- `PRE` represents a preformat block (including code block)
+
+### Task list
+
+There is an optional list type you can enable in the editor. In addition to ordered and unordered lists you can use `task list`. 
+A task list is an unordered list which shows and saves checkboxes instead of the bullets. Enable it by calling the following method.
+```kotlin
+aztecToolbar.enableTaskList()
+```
+
+### Nested blocks
+
+By default Aztec allows nested blocks. In certain cases this doesn't have to be the preferred behaviour. There is an option to disable nested blocks.
+When switched, this editor will always add media and horizontal rule after the currently selected block, not in the middle of it.
+```kotlin
+aztecText.addMediaAfterBlocks()
+```
+
 ## Code formatting
 
 We use [ktlint](https://github.com/shyiko/ktlint) for Kotlin linting. You can run ktlint using `./gradlew ktlint`, and you can also run `./gradlew ktlintFormat` for auto-formatting. There is no IDEA plugin (like Checkstyle's) at this time.

RepoAssets/aztec.png

@@ -429,8 +429,6 @@ open class MainActivity : AppCompatActivity(),
             }
         })
 
-        toolbar.enableTaskList()
-
         aztec = Aztec.with(visualEditor, sourceEditor, toolbar, this)
                 .setImageGetter(GlideImageLoader(this))
                 .setVideoThumbnailGetter(GlideVideoThumbnailLoader(this))

app/src/main/kotlin/org/wordpress/aztec/demo/MainActivity.kt

@@ -254,6 +254,9 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
     var isInCalypsoMode = true
     var isInGutenbergMode: Boolean = false
     val alignmentRendering: AlignmentRendering
+    // If this field is true, the media and horizontal line are added inline. If it's false, they are added after the
+    // current block.
+    var shouldAddMediaInline: Boolean = true
 
     var consumeHistoryEvent: Boolean = false
 
@@ -369,6 +372,15 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
         isInGutenbergMode = isCompatibleWithGutenberg
     }
 
+    /**
+     * Default behaviour is to add media and horizontal rule inline. They could be added inside lists and quotes.
+     * If you call this method, this behaviour will be disabled and the media and horizontal rule will be automatically
+     * added after the currently selected block. For example after the list in which you have your cursor.
+     */
+    fun addMediaAfterBlocks() {
+        this.shouldAddMediaInline = false
+    }
+
     // Newer AppCompatEditText returns Editable?, and using that would require changing all of Aztec to not use `text.`
     override fun getText(): Editable {
         return super.getText()!!
@@ -685,6 +697,9 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
                 history.beforeTextChanged(this@AztecText)
             }
             wasStyleRemoved = blockFormatter.tryRemoveBlockStyleFromFirstLine()
+            if (!shouldAddMediaInline) {
+                blockFormatter.moveSelectionIfImageSelected()
+            }
 
             if (selectionStart == 0 || selectionEnd == 0) {
                 deleteInlineStyleFromTheBeginning()
@@ -1173,7 +1188,9 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
             AztecTextFormat.FORMAT_ALIGN_RIGHT -> return blockFormatter.toggleTextAlignment(textFormat)
             AztecTextFormat.FORMAT_PREFORMAT -> blockFormatter.togglePreformat()
             AztecTextFormat.FORMAT_QUOTE -> blockFormatter.toggleQuote()
-            AztecTextFormat.FORMAT_HORIZONTAL_RULE -> lineBlockFormatter.applyHorizontalRule()
+            AztecTextFormat.FORMAT_HORIZONTAL_RULE -> {
+                lineBlockFormatter.applyHorizontalRule(shouldAddMediaInline)
+            }
             else -> {
                 plugins.filter { it is IToolbarButton && it.action.textFormats.contains(textFormat) }
                         .map { it as IToolbarButton }
@@ -1962,11 +1979,11 @@ open class AztecText : AppCompatEditText, TextWatcher, UnknownHtmlSpan.OnUnknown
     }
 
     fun insertImage(drawable: Drawable?, attributes: Attributes) {
-        lineBlockFormatter.insertImage(drawable, attributes, onImageTappedListener, onMediaDeletedListener)
+        lineBlockFormatter.insertImage(shouldAddMediaInline, drawable, attributes, onImageTappedListener, onMediaDeletedListener)
     }
 
     fun insertVideo(drawable: Drawable?, attributes: Attributes) {
-        lineBlockFormatter.insertVideo(drawable, attributes, onVideoTappedListener, onMediaDeletedListener)
+        lineBlockFormatter.insertVideo(shouldAddMediaInline, drawable, attributes, onVideoTappedListener, onMediaDeletedListener)
     }
 
     fun removeMedia(attributePredicate: AttributePredicate) {

aztec/src/main/kotlin/org/wordpress/aztec/AztecText.kt

@@ -16,8 +16,10 @@ import org.wordpress.aztec.handlers.BlockHandler
 import org.wordpress.aztec.handlers.HeadingHandler
 import org.wordpress.aztec.handlers.ListItemHandler
 import org.wordpress.aztec.spans.AztecHeadingSpan
+import org.wordpress.aztec.spans.AztecHorizontalRuleSpan
 import org.wordpress.aztec.spans.AztecListItemSpan
 import org.wordpress.aztec.spans.AztecListSpan
+import org.wordpress.aztec.spans.AztecMediaSpan
 import org.wordpress.aztec.spans.AztecOrderedListSpan
 import org.wordpress.aztec.spans.AztecPreformatSpan
 import org.wordpress.aztec.spans.AztecQuoteSpan
@@ -307,6 +309,23 @@ class BlockFormatter(editor: AztecText,
         }
     }
 
+    fun moveSelectionIfImageSelected() {
+        if (selectionStart == selectionEnd &&
+                (hasImageRightAfterSelection() || hasHorizontalRuleRightAfterSelection())) {
+            editor.setSelection(selectionStart - 1)
+        }
+    }
+
+    private fun hasImageRightAfterSelection() =
+            editableText.getSpans(selectionStart, selectionEnd, AztecMediaSpan::class.java).any {
+                editableText.getSpanStart(it) == selectionStart
+            }
+
+    private fun hasHorizontalRuleRightAfterSelection() =
+            editableText.getSpans(selectionStart, selectionEnd, AztecHorizontalRuleSpan::class.java).any {
+                editableText.getSpanStart(it) == selectionStart
+            }
+
     fun removeBlockStyle(textFormat: ITextFormat) {
         removeBlockStyle(textFormat, selectionStart, selectionEnd, makeBlock(textFormat, 0).map { it -> it.javaClass })
     }

aztec/src/main/kotlin/org/wordpress/aztec/formatting/BlockFormatter.kt

@@ -7,8 +7,6 @@ import android.text.TextUtils
 import androidx.appcompat.content.res.AppCompatResources
 import org.wordpress.aztec.AztecAttributes
 import org.wordpress.aztec.AztecText
-import org.wordpress.aztec.AztecText.OnImageTappedListener
-import org.wordpress.aztec.AztecText.OnVideoTappedListener
 import org.wordpress.aztec.AztecTextFormat
 import org.wordpress.aztec.Constants
 import org.wordpress.aztec.ITextFormat
@@ -19,10 +17,10 @@ import org.wordpress.aztec.spans.AztecImageSpan
 import org.wordpress.aztec.spans.AztecMediaClickableSpan
 import org.wordpress.aztec.spans.AztecMediaSpan
 import org.wordpress.aztec.spans.AztecVideoSpan
+import org.wordpress.aztec.spans.IAztecBlockSpan
 import org.wordpress.aztec.spans.IAztecNestable
 import org.wordpress.aztec.watchers.EndOfBufferMarkerAdder
 import org.xml.sax.Attributes
-import java.util.ArrayList
 
 class LineBlockFormatter(editor: AztecText) : AztecFormatter(editor) {
 
@@ -95,11 +93,14 @@ class LineBlockFormatter(editor: AztecText) : AztecFormatter(editor) {
         return false
     }
 
-    fun applyHorizontalRule() {
-        editor.removeInlineStylesFromRange(selectionStart, selectionEnd)
-        editor.removeBlockStylesFromRange(selectionStart, selectionEnd, true)
-
-        val nestingLevel = IAztecNestable.getNestingLevelAt(editableText, selectionStart)
+    fun applyHorizontalRule(inline: Boolean) {
+        val nestingLevel = if (inline) {
+            editor.removeInlineStylesFromRange(selectionStart, selectionEnd)
+            editor.removeBlockStylesFromRange(selectionStart, selectionEnd, true)
+            IAztecNestable.getNestingLevelAt(editableText, selectionStart)
+        } else {
+            0
+        }
 
         val span = AztecHorizontalRuleSpan(
                 editor.context,
@@ -112,34 +113,108 @@ class LineBlockFormatter(editor: AztecText) : AztecFormatter(editor) {
         val builder = SpannableStringBuilder(Constants.MAGIC_STRING)
         builder.setSpan(span, 0, 1, Spanned.SPAN_EXCLUSIVE_EXCLUSIVE)
 
-        val start = selectionStart
-        editableText.replace(start, selectionEnd, builder)
-
-        val newSelectionPosition = editableText.indexOf(Constants.MAGIC_CHAR, start) + 1
-        editor.setSelection(newSelectionPosition)
+        if (inline) {
+            editableText.replace(selectionStart, selectionEnd, builder)
+            val newSelectionPosition = editableText.indexOf(Constants.MAGIC_CHAR, selectionStart) + 1
+            editor.setSelection(newSelectionPosition)
+        } else {
+            insertSpanAfterBlock(builder)
+        }
     }
 
-    fun insertVideo(drawable: Drawable?, attributes: Attributes, onVideoTappedListener: OnVideoTappedListener?,
+    fun insertVideo(inline: Boolean, drawable: Drawable?, attributes: Attributes, onVideoTappedListener: AztecText.OnVideoTappedListener?,
                     onMediaDeletedListener: AztecText.OnMediaDeletedListener?) {
-        val nestingLevel = IAztecNestable.getNestingLevelAt(editableText, selectionStart)
+        val nestingLevel = if (inline) IAztecNestable.getNestingLevelAt(editableText, selectionStart) else 0
         val span = AztecVideoSpan(editor.context, drawable, nestingLevel, AztecAttributes(attributes), onVideoTappedListener,
                 onMediaDeletedListener, editor)
-        insertMedia(span)
+        if (inline) {
+            insertMediaInline(span)
+        } else {
+            insertMediaAfterBlock(span)
+        }
     }
 
-    fun insertImage(drawable: Drawable?, attributes: Attributes, onImageTappedListener: OnImageTappedListener?,
+    fun insertImage(inline: Boolean, drawable: Drawable?, attributes: Attributes, onImageTappedListener: AztecText.OnImageTappedListener?,
                     onMediaDeletedListener: AztecText.OnMediaDeletedListener?) {
-        val nestingLevel = IAztecNestable.getNestingLevelAt(editableText, selectionStart)
+        val nestingLevel = if (inline) IAztecNestable.getNestingLevelAt(editableText, selectionStart) else 0
         val span = AztecImageSpan(editor.context, drawable, nestingLevel, AztecAttributes(attributes), onImageTappedListener,
                 onMediaDeletedListener, editor)
-        insertMedia(span)
+        if (inline) {
+            insertMediaInline(span)
+        } else {
+            insertMediaAfterBlock(span)
+        }
     }
 
-    private fun insertMedia(span: AztecMediaSpan) {
+    private fun insertMediaInline(span: AztecMediaSpan) {
         editor.removeInlineStylesFromRange(selectionStart, selectionEnd)
 
         val ssb = SpannableStringBuilder(Constants.IMG_STRING)
 
+        buildClickableMediaSpan(ssb, span)
+
+        // We need to be sure the cursor is placed correctly after media insertion
+        // Note that media has '\n' around them when needed
+        val isLastItem = selectionEnd == EndOfBufferMarkerAdder.safeLength(editor)
+        editableText.replace(selectionStart, selectionEnd, ssb)
+
+        setSelection(isLastItem, selectionEnd)
+    }
+
+    private fun insertMediaAfterBlock(span: AztecMediaSpan) {
+        val ssb = SpannableStringBuilder(Constants.IMG_STRING)
+        buildClickableMediaSpan(ssb, span)
+        insertSpanAfterBlock(ssb)
+    }
+
+    private fun insertSpanAfterBlock(ssb: SpannableStringBuilder) {
+        val position = getEndOfBlock()
+        // We need to be sure the cursor is placed correctly after media insertion
+        // Note that media has '\n' around them when needed
+        val isLastItem = position == EndOfBufferMarkerAdder.safeLength(editor)
+        if (isLastItem) {
+            editableText.getSpans(position, editableText.length, IAztecBlockSpan::class.java).filter {
+                it !is AztecMediaSpan && editableText.getSpanEnd(it) == editableText.length
+            }.map {
+                SpanData(it, editableText.getSpanStart(it), position + 1, editableText.getSpanFlags(it))
+            }.applyWithRemovedSpans {
+                editableText.append(ssb)
+            }
+        } else {
+            ssb.append("\n")
+            val ssbLength = ssb.length
+            editableText.getSpans(position, position + ssbLength, IAztecBlockSpan::class.java).filter {
+                it !is AztecMediaSpan && editableText.getSpanStart(it) == position
+            }.map {
+                SpanData(it, editableText.getSpanStart(it) + ssbLength, editableText.getSpanEnd(it) + ssbLength, editableText.getSpanFlags(it))
+            }.applyWithRemovedSpans {
+                editableText.insert(position, ssb)
+            }
+        }
+        setSelection(isLastItem, position)
+    }
+
+    private fun List<SpanData>.applyWithRemovedSpans(action: () -> Unit) {
+        this.onEach { editableText.removeSpan(it.span) }
+        action()
+        this.onEach {
+            editableText.setSpan(it.span, it.spanStart, it.spanEnd, it.spanFlags)
+        }
+    }
+
+    data class SpanData(val span: IAztecBlockSpan, val spanStart: Int, val spanEnd: Int, val spanFlags: Int)
+
+    private fun setSelection(isLastItem: Boolean, position: Int) {
+        val newSelection = if (isLastItem) {
+            EndOfBufferMarkerAdder.safeLength(editor)
+        } else {
+            if (position < EndOfBufferMarkerAdder.safeLength(editor)) position + 1 else position
+        }
+        editor.setSelection(newSelection)
+        editor.isMediaAdded = true
+    }
+
+    private fun buildClickableMediaSpan(ssb: SpannableStringBuilder, span: AztecMediaSpan) {
         ssb.setSpan(
                 span,
                 0,
@@ -153,18 +228,23 @@ class LineBlockFormatter(editor: AztecText) : AztecFormatter(editor) {
                 1,
                 Spanned.SPAN_EXCLUSIVE_EXCLUSIVE
         )
+    }
 
-        // We need to be sure the cursor is placed correctly after media insertion
-        // Note that media has '\n' around them when needed
-        val isLastItem = selectionEnd == EndOfBufferMarkerAdder.safeLength(editor)
-        editableText.replace(selectionStart, selectionEnd, ssb)
-
-        val newSelection = if (isLastItem) {
-            EndOfBufferMarkerAdder.safeLength(editor)
-        } else {
-            if (selectionEnd < EndOfBufferMarkerAdder.safeLength(editor)) selectionEnd + 1 else selectionEnd
+    private fun getEndOfBlock(): Int {
+        if (selectionStart == 0 && selectionEnd == 0) {
+            return 0
         }
-        editor.setSelection(newSelection)
-        editor.isMediaAdded = true
+        var position = 0
+        editableText.getSpans(selectionStart, selectionEnd, IAztecBlockSpan::class.java).forEach {
+            val spanEnd = editableText.getSpanEnd(it)
+            if (spanEnd > position) {
+                position = spanEnd
+            }
+        }
+        if (position <= 0 && selectionEnd != 0) {
+            // If the text contains "\n" return that as the position, else set the position to the end of the text
+            position = editableText.indexOf("\n", selectionEnd).takeIf { it >= 0 } ?: editableText.length
+        }
+        return position
     }
 }

aztec/src/main/kotlin/org/wordpress/aztec/formatting/LineBlockFormatter.kt

@@ -753,6 +753,9 @@ class AztecToolbar : FrameLayout, IAztecToolbar, OnMenuItemClickListener {
         this.toolbarItems = toolbarItems
     }
 
+    /**
+     * Call this method to enable a task list with checkboxes
+     */
     fun enableTaskList() {
         this.tasklistEnabled = true
     }