@apollohg/react-native-prose-editor 0.1.1 → 0.3.0

package/android/src/main/java/com/apollohg/editor/ImageResizeOverlayView.kt

@@ -0,0 +1,199 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Canvas
+import android.graphics.Color
+import android.graphics.Paint
+import android.graphics.RectF
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.View
+import kotlin.math.max
+
+internal class ImageResizeOverlayView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : View(context, attrs, defStyleAttr) {
+    private enum class Corner {
+        TOP_LEFT,
+        TOP_RIGHT,
+        BOTTOM_LEFT,
+        BOTTOM_RIGHT
+    }
+
+    private data class DragState(
+        val corner: Corner,
+        val originalRect: RectF,
+        val docPos: Int,
+        val maximumWidthPx: Float,
+        var previewRect: RectF
+    )
+
+    private var editorView: RichTextEditorView? = null
+    private var currentGeometry: EditorEditText.SelectedImageGeometry? = null
+    private var dragState: DragState? = null
+
+    private val density = resources.displayMetrics.density
+    private val handleRadiusPx = 10f * density
+    private val minimumImageSizePx = 48f * density
+    private val borderPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.parseColor("#0A84FF")
+        style = Paint.Style.STROKE
+        strokeWidth = max(2f, density)
+    }
+    private val handleFillPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.WHITE
+        style = Paint.Style.FILL
+    }
+    private val handleStrokePaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
+        color = Color.parseColor("#0A84FF")
+        style = Paint.Style.STROKE
+        strokeWidth = max(2f, density)
+    }
+
+    init {
+        setWillNotDraw(false)
+        visibility = INVISIBLE
+    }
+
+    fun bind(editorView: RichTextEditorView) {
+        this.editorView = editorView
+    }
+
+    fun refresh() {
+        currentGeometry = editorView?.selectedImageGeometry()
+        visibility = if (currentGeometry == null) INVISIBLE else VISIBLE
+        if (currentGeometry != null) {
+            bringToFront()
+        }
+        invalidate()
+    }
+
+    fun visibleRectForTesting(): RectF? =
+        currentGeometry?.rect?.let(::RectF)
+
+    fun simulateResizeForTesting(widthPx: Float, heightPx: Float) {
+        val geometry = currentGeometry ?: return
+        editorView?.resizeImage(geometry.docPos, widthPx, heightPx)
+    }
+
+    override fun onDraw(canvas: Canvas) {
+        super.onDraw(canvas)
+        val geometry = currentGeometry ?: return
+        canvas.drawRoundRect(geometry.rect, 8f * density, 8f * density, borderPaint)
+        for (corner in Corner.entries) {
+            val center = handleCenter(corner, geometry.rect)
+            canvas.drawCircle(center.x, center.y, handleRadiusPx, handleFillPaint)
+            canvas.drawCircle(center.x, center.y, handleRadiusPx, handleStrokePaint)
+        }
+    }
+
+    override fun onTouchEvent(event: MotionEvent): Boolean {
+        val geometry = currentGeometry ?: return false
+
+        when (event.actionMasked) {
+            MotionEvent.ACTION_DOWN -> {
+                val corner = cornerAt(event.x, event.y, geometry.rect) ?: return false
+                dragState = DragState(
+                    corner = corner,
+                    originalRect = RectF(geometry.rect),
+                    docPos = geometry.docPos,
+                    maximumWidthPx = editorView?.maximumImageWidthPx() ?: geometry.rect.width(),
+                    previewRect = RectF(geometry.rect)
+                )
+                parent?.requestDisallowInterceptTouchEvent(true)
+                return true
+            }
+
+            MotionEvent.ACTION_MOVE -> {
+                val state = dragState ?: return false
+                val nextRect = resizedRect(
+                    originalRect = state.originalRect,
+                    corner = state.corner,
+                    deltaX = event.x - handleCenter(state.corner, state.originalRect).x,
+                    deltaY = event.y - handleCenter(state.corner, state.originalRect).y,
+                    maximumWidthPx = state.maximumWidthPx
+                )
+                state.previewRect = RectF(nextRect)
+                currentGeometry = EditorEditText.SelectedImageGeometry(state.docPos, nextRect)
+                invalidate()
+                return true
+            }
+
+            MotionEvent.ACTION_UP, MotionEvent.ACTION_CANCEL -> {
+                val state = dragState ?: return false
+                if (event.actionMasked == MotionEvent.ACTION_UP) {
+                    editorView?.resizeImage(
+                        state.docPos,
+                        state.previewRect.width(),
+                        state.previewRect.height()
+                    )
+                }
+                dragState = null
+                parent?.requestDisallowInterceptTouchEvent(false)
+                post { refresh() }
+                return true
+            }
+        }
+
+        return false
+    }
+
+    private fun cornerAt(x: Float, y: Float, rect: RectF): Corner? {
+        return Corner.entries.firstOrNull { corner ->
+            val center = handleCenter(corner, rect)
+            val dx = x - center.x
+            val dy = y - center.y
+            (dx * dx) + (dy * dy) <= handleRadiusPx * handleRadiusPx * 2
+        }
+    }
+
+    private fun handleCenter(corner: Corner, rect: RectF) = when (corner) {
+        Corner.TOP_LEFT -> android.graphics.PointF(rect.left, rect.top)
+        Corner.TOP_RIGHT -> android.graphics.PointF(rect.right, rect.top)
+        Corner.BOTTOM_LEFT -> android.graphics.PointF(rect.left, rect.bottom)
+        Corner.BOTTOM_RIGHT -> android.graphics.PointF(rect.right, rect.bottom)
+    }
+
+    private fun anchorPoint(corner: Corner, rect: RectF) = when (corner) {
+        Corner.TOP_LEFT -> android.graphics.PointF(rect.right, rect.bottom)
+        Corner.TOP_RIGHT -> android.graphics.PointF(rect.left, rect.bottom)
+        Corner.BOTTOM_LEFT -> android.graphics.PointF(rect.right, rect.top)
+        Corner.BOTTOM_RIGHT -> android.graphics.PointF(rect.left, rect.top)
+    }
+
+    private fun resizedRect(
+        originalRect: RectF,
+        corner: Corner,
+        deltaX: Float,
+        deltaY: Float,
+        maximumWidthPx: Float?
+    ): RectF {
+        val aspectRatio = max(originalRect.width() / max(originalRect.height(), 1f), 0.1f)
+        val signedDx = if (corner == Corner.TOP_RIGHT || corner == Corner.BOTTOM_RIGHT) deltaX else -deltaX
+        val signedDy = if (corner == Corner.BOTTOM_LEFT || corner == Corner.BOTTOM_RIGHT) deltaY else -deltaY
+        val widthScale = (originalRect.width() + signedDx) / max(originalRect.width(), 1f)
+        val heightScale = (originalRect.height() + signedDy) / max(originalRect.height(), 1f)
+        val scale = max(max(widthScale, heightScale), minimumImageSizePx / max(originalRect.width(), 1f))
+        val unclampedWidth = max(minimumImageSizePx, originalRect.width() * scale)
+        val unclampedHeight = max(minimumImageSizePx / aspectRatio, unclampedWidth / aspectRatio)
+        val (width, height) = editorView?.let { boundEditor ->
+            maximumWidthPx?.let { maxWidth ->
+                boundEditor.clampImageSize(
+                    widthPx = unclampedWidth,
+                    heightPx = unclampedHeight,
+                    maximumWidthPx = maxWidth
+                )
+            } ?: boundEditor.clampImageSize(unclampedWidth, unclampedHeight)
+        } ?: (unclampedWidth to unclampedHeight)
+        val anchor = anchorPoint(corner, originalRect)
+
+        return when (corner) {
+            Corner.TOP_LEFT -> RectF(anchor.x - width, anchor.y - height, anchor.x, anchor.y)
+            Corner.TOP_RIGHT -> RectF(anchor.x, anchor.y - height, anchor.x + width, anchor.y)
+            Corner.BOTTOM_LEFT -> RectF(anchor.x - width, anchor.y, anchor.x, anchor.y + height)
+            Corner.BOTTOM_RIGHT -> RectF(anchor.x, anchor.y, anchor.x + width, anchor.y + height)
+        }
+    }
+}

package/android/src/main/java/com/apollohg/editor/NativeEditorExpoView.kt

@@ -146,6 +146,12 @@ class NativeEditorExpoView(
         refreshMentionQuery()
     }
 
+    fun setRemoteSelectionsJson(remoteSelectionsJson: String?) {
+        richTextView.setRemoteSelections(
+            RemoteSelectionDecoration.fromJson(context, remoteSelectionsJson)
+        )
+    }
+
     fun setAutoFocus(autoFocus: Boolean) {
         if (!autoFocus || didApplyAutoFocus) {
             return
@@ -164,6 +170,10 @@ class NativeEditorExpoView(
         updateKeyboardToolbarVisibility()
     }
 
+    fun setAllowImageResizing(allowImageResizing: Boolean) {
+        richTextView.setImageResizingEnabled(allowImageResizing)
+    }
+
     fun setToolbarItemsJson(toolbarItemsJson: String?) {
         keyboardToolbarView.setItems(NativeToolbarItem.fromJson(toolbarItemsJson))
     }
@@ -306,6 +316,7 @@ class NativeEditorExpoView(
     override fun onSelectionChanged(anchor: Int, head: Int) {
         refreshToolbarStateFromEditorSelection()
         refreshMentionQuery()
+        richTextView.refreshRemoteSelections()
         val event = mapOf<String, Any>("anchor" to anchor, "head" to head)
         onSelectionChange(event)
     }
@@ -316,6 +327,7 @@ class NativeEditorExpoView(
             keyboardToolbarView.applyState(state)
         }
         refreshMentionQuery()
+        richTextView.refreshRemoteSelections()
         if (heightBehavior == EditorHeightBehavior.AUTO_GROW) {
             post {
                 requestLayout()
@@ -566,8 +578,8 @@ class NativeEditorExpoView(
         val toolbarTheme = richTextView.editorEditText.theme?.toolbar
         val density = resources.displayMetrics.density
         params.gravity = Gravity.BOTTOM or Gravity.START
-        val horizontalInsetPx = ((toolbarTheme?.horizontalInset ?: 0f) * density).toInt()
-        val keyboardOffsetPx = ((toolbarTheme?.keyboardOffset ?: 0f) * density).toInt()
+        val horizontalInsetPx = ((toolbarTheme?.resolvedHorizontalInset() ?: 0f) * density).toInt()
+        val keyboardOffsetPx = ((toolbarTheme?.resolvedKeyboardOffset() ?: 0f) * density).toInt()
         params.leftMargin = horizontalInsetPx
         params.rightMargin = horizontalInsetPx
         params.bottomMargin = currentImeBottom + keyboardOffsetPx
@@ -611,7 +623,7 @@ class NativeEditorExpoView(
             .coerceAtLeast(0)
         val toolbarTheme = richTextView.editorEditText.theme?.toolbar
         val density = resources.displayMetrics.density
-        val horizontalInsetPx = ((toolbarTheme?.horizontalInset ?: 0f) * density).toInt()
+        val horizontalInsetPx = ((toolbarTheme?.resolvedHorizontalInset() ?: 0f) * density).toInt()
         if (keyboardToolbarView.measuredHeight == 0) {
             val availableWidth = (hostWidth - horizontalInsetPx * 2).coerceAtLeast(0)
             val widthSpec = MeasureSpec.makeMeasureSpec(availableWidth, MeasureSpec.AT_MOST)
@@ -630,6 +642,7 @@ class NativeEditorExpoView(
     private fun handleToolbarItemPress(item: NativeToolbarItem) {
         when (item.type) {
             ToolbarItemKind.mark -> item.mark?.let { richTextView.editorEditText.performToolbarToggleMark(it) }
+            ToolbarItemKind.blockquote -> richTextView.editorEditText.performToolbarToggleBlockquote()
             ToolbarItemKind.list -> item.listType?.name?.let { handleListToggle(it) }
             ToolbarItemKind.command -> when (item.command) {
                 ToolbarCommand.indentList -> richTextView.editorEditText.performToolbarIndentListItem()

package/android/src/main/java/com/apollohg/editor/NativeEditorModule.kt

@@ -14,6 +14,42 @@ class NativeEditorModule : Module() {
         Function("editorDestroy") { id: Int ->
             editorDestroy(id.toULong())
         }
+        Function("collaborationSessionCreate") { configJson: String ->
+            collaborationSessionCreate(configJson).toLong()
+        }
+        Function("collaborationSessionDestroy") { id: Int ->
+            collaborationSessionDestroy(id.toULong())
+        }
+        Function("collaborationSessionGetDocumentJson") { id: Int ->
+            collaborationSessionGetDocumentJson(id.toULong())
+        }
+        Function("collaborationSessionGetEncodedState") { id: Int ->
+            collaborationSessionGetEncodedState(id.toULong())
+        }
+        Function("collaborationSessionGetPeersJson") { id: Int ->
+            collaborationSessionGetPeersJson(id.toULong())
+        }
+        Function("collaborationSessionStart") { id: Int ->
+            collaborationSessionStart(id.toULong())
+        }
+        Function("collaborationSessionApplyLocalDocumentJson") { id: Int, json: String ->
+            collaborationSessionApplyLocalDocumentJson(id.toULong(), json)
+        }
+        Function("collaborationSessionApplyEncodedState") { id: Int, encodedStateJson: String ->
+            collaborationSessionApplyEncodedState(id.toULong(), encodedStateJson)
+        }
+        Function("collaborationSessionReplaceEncodedState") { id: Int, encodedStateJson: String ->
+            collaborationSessionReplaceEncodedState(id.toULong(), encodedStateJson)
+        }
+        Function("collaborationSessionHandleMessage") { id: Int, messageJson: String ->
+            collaborationSessionHandleMessage(id.toULong(), messageJson)
+        }
+        Function("collaborationSessionSetLocalAwareness") { id: Int, awarenessJson: String ->
+            collaborationSessionSetLocalAwareness(id.toULong(), awarenessJson)
+        }
+        Function("collaborationSessionClearLocalAwareness") { id: Int ->
+            collaborationSessionClearLocalAwareness(id.toULong())
+        }
 
         Function("editorSetHtml") { id: Int, html: String ->
             editorSetHtml(id.toULong(), html)
@@ -103,6 +139,36 @@ class NativeEditorModule : Module() {
                 markName
             )
         }
+        Function(
+            "editorSetMarkAtSelectionScalar"
+        ) { id: Int, scalarAnchor: Int, scalarHead: Int, markName: String, attrsJson: String ->
+            editorSetMarkAtSelectionScalar(
+                id.toULong(),
+                scalarAnchor.toUInt(),
+                scalarHead.toUInt(),
+                markName,
+                attrsJson
+            )
+        }
+        Function(
+            "editorUnsetMarkAtSelectionScalar"
+        ) { id: Int, scalarAnchor: Int, scalarHead: Int, markName: String ->
+            editorUnsetMarkAtSelectionScalar(
+                id.toULong(),
+                scalarAnchor.toUInt(),
+                scalarHead.toUInt(),
+                markName
+            )
+        }
+        Function(
+            "editorToggleBlockquoteAtSelectionScalar"
+        ) { id: Int, scalarAnchor: Int, scalarHead: Int ->
+            editorToggleBlockquoteAtSelectionScalar(
+                id.toULong(),
+                scalarAnchor.toUInt(),
+                scalarHead.toUInt()
+            )
+        }
         Function(
             "editorWrapInListAtSelectionScalar"
         ) { id: Int, scalarAnchor: Int, scalarHead: Int, listType: String ->
@@ -154,6 +220,15 @@ class NativeEditorModule : Module() {
         Function("editorToggleMark") { id: Int, markName: String ->
             editorToggleMark(id.toULong(), markName)
         }
+        Function("editorSetMark") { id: Int, markName: String, attrsJson: String ->
+            editorSetMark(id.toULong(), markName, attrsJson)
+        }
+        Function("editorUnsetMark") { id: Int, markName: String ->
+            editorUnsetMark(id.toULong(), markName)
+        }
+        Function("editorToggleBlockquote") { id: Int ->
+            editorToggleBlockquote(id.toULong())
+        }
 
         Function("editorSetSelection") { id: Int, anchor: Int, head: Int ->
             editorSetSelection(id.toULong(), anchor.toUInt(), head.toUInt())
@@ -205,7 +280,7 @@ class NativeEditorModule : Module() {
                 view.richTextView.editorEditText.isEditable = editable
             }
             Prop("placeholder") { view: NativeEditorExpoView, placeholder: String ->
-                view.richTextView.editorEditText.hint = placeholder
+                view.richTextView.editorEditText.placeholderText = placeholder
             }
             Prop("autoFocus") { view: NativeEditorExpoView, autoFocus: Boolean ->
                 view.setAutoFocus(autoFocus)
@@ -219,12 +294,18 @@ class NativeEditorModule : Module() {
             Prop("heightBehavior") { view: NativeEditorExpoView, heightBehavior: String ->
                 view.setHeightBehavior(heightBehavior)
             }
+            Prop("allowImageResizing") { view: NativeEditorExpoView, allowImageResizing: Boolean ->
+                view.setAllowImageResizing(allowImageResizing)
+            }
             Prop("themeJson") { view: NativeEditorExpoView, themeJson: String? ->
                 view.setThemeJson(themeJson)
             }
             Prop("addonsJson") { view: NativeEditorExpoView, addonsJson: String? ->
                 view.setAddonsJson(addonsJson)
             }
+            Prop("remoteSelectionsJson") { view: NativeEditorExpoView, remoteSelectionsJson: String? ->
+                view.setRemoteSelectionsJson(remoteSelectionsJson)
+            }
             Prop("toolbarItemsJson") { view: NativeEditorExpoView, toolbarItemsJson: String? ->
                 view.setToolbarItemsJson(toolbarItemsJson)
             }