@apollohg/react-native-prose-editor 0.1.0

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

@@ -0,0 +1,211 @@
+package com.apollohg.editor
+
+import android.content.Context
+import android.graphics.Color
+import android.graphics.drawable.GradientDrawable
+import android.util.AttributeSet
+import android.view.MotionEvent
+import android.view.ViewGroup
+import android.widget.FrameLayout
+import android.widget.LinearLayout
+import android.widget.ScrollView
+import uniffi.editor_core.*
+
+/** Container view that owns the native editor text field. */
+class RichTextEditorView @JvmOverloads constructor(
+    context: Context,
+    attrs: AttributeSet? = null,
+    defStyleAttr: Int = 0
+) : LinearLayout(context, attrs, defStyleAttr) {
+
+    private class EditorScrollView(context: Context) : ScrollView(context) {
+        private fun updateParentIntercept(action: Int) {
+            val canScroll = canScrollVertically(-1) || canScrollVertically(1)
+            if (!canScroll) return
+            when (action) {
+                MotionEvent.ACTION_DOWN,
+                MotionEvent.ACTION_MOVE -> parent?.requestDisallowInterceptTouchEvent(true)
+                MotionEvent.ACTION_UP,
+                MotionEvent.ACTION_CANCEL -> parent?.requestDisallowInterceptTouchEvent(false)
+            }
+        }
+
+        override fun onInterceptTouchEvent(ev: MotionEvent): Boolean {
+            updateParentIntercept(ev.actionMasked)
+            return super.onInterceptTouchEvent(ev)
+        }
+
+        override fun onTouchEvent(ev: MotionEvent): Boolean {
+            updateParentIntercept(ev.actionMasked)
+            return super.onTouchEvent(ev)
+        }
+    }
+
+    val editorEditText: EditorEditText
+    val editorScrollView: ScrollView
+
+    private var heightBehavior: EditorHeightBehavior = EditorHeightBehavior.FIXED
+    private var theme: EditorTheme? = null
+    private var baseBackgroundColor: Int = Color.WHITE
+    private var viewportBottomInsetPx: Int = 0
+    internal var appliedCornerRadiusPx: Float = 0f
+
+    /** Binds or unbinds the Rust editor instance. */
+    var editorId: Long = 0
+        set(value) {
+            field = value
+            if (value != 0L) {
+                editorEditText.bindEditor(value)
+            } else {
+                editorEditText.unbindEditor()
+            }
+        }
+
+    init {
+        orientation = VERTICAL
+
+        editorEditText = EditorEditText(context)
+        editorScrollView = EditorScrollView(context).apply {
+            clipToPadding = false
+            isFillViewport = false
+        }
+        editorScrollView.addView(editorEditText, createEditorLayoutParams())
+
+        addView(editorScrollView, createContainerLayoutParams())
+        updateScrollContainerAppearance()
+        updateScrollContainerInsets()
+    }
+
+    fun configure(
+        textSizePx: Float = 16f * resources.displayMetrics.density,
+        textColor: Int = Color.BLACK,
+        backgroundColor: Int = Color.WHITE
+    ) {
+        baseBackgroundColor = backgroundColor
+        editorEditText.setBaseStyle(textSizePx, textColor, backgroundColor)
+        updateScrollContainerAppearance()
+    }
+
+    fun applyTheme(theme: EditorTheme?) {
+        this.theme = theme
+        val previousScrollY = editorScrollView.scrollY
+        editorEditText.applyTheme(theme)
+        updateScrollContainerAppearance()
+        updateScrollContainerInsets()
+        if (heightBehavior == EditorHeightBehavior.FIXED) {
+            editorScrollView.post {
+                val childHeight = editorScrollView.getChildAt(0)?.height ?: 0
+                val maxScrollY = maxOf(
+                    0,
+                    childHeight + editorScrollView.paddingTop + editorScrollView.paddingBottom - editorScrollView.height
+                )
+                editorScrollView.scrollTo(0, previousScrollY.coerceIn(0, maxScrollY))
+            }
+        }
+    }
+
+    fun setHeightBehavior(heightBehavior: EditorHeightBehavior) {
+        if (this.heightBehavior == heightBehavior) return
+        this.heightBehavior = heightBehavior
+        editorEditText.setHeightBehavior(heightBehavior)
+        editorEditText.layoutParams = createEditorLayoutParams()
+        editorScrollView.layoutParams = createContainerLayoutParams()
+        editorScrollView.isVerticalScrollBarEnabled = heightBehavior == EditorHeightBehavior.FIXED
+        editorScrollView.overScrollMode = if (heightBehavior == EditorHeightBehavior.FIXED) {
+            OVER_SCROLL_IF_CONTENT_SCROLLS
+        } else {
+            OVER_SCROLL_NEVER
+        }
+        updateScrollContainerInsets()
+        requestLayout()
+    }
+
+    fun setViewportBottomInsetPx(bottomInsetPx: Int) {
+        val clampedInset = bottomInsetPx.coerceAtLeast(0)
+        if (viewportBottomInsetPx == clampedInset) return
+        viewportBottomInsetPx = clampedInset
+        updateScrollContainerInsets()
+        editorEditText.setViewportBottomInsetPx(clampedInset)
+        requestLayout()
+    }
+
+    fun setContent(html: String) {
+        if (editorId == 0L) return
+        val renderJSON = editorSetHtml(editorId.toULong(), html)
+        editorEditText.applyRenderJSON(renderJSON)
+    }
+
+    fun setContent(json: org.json.JSONObject) {
+        if (editorId == 0L) return
+        val renderJSON = editorSetJson(editorId.toULong(), json.toString())
+        editorEditText.applyRenderJSON(renderJSON)
+    }
+
+    override fun onDetachedFromWindow() {
+        super.onDetachedFromWindow()
+        if (editorId != 0L) {
+            editorEditText.unbindEditor()
+        }
+    }
+
+    override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
+        if (heightBehavior != EditorHeightBehavior.AUTO_GROW) {
+            super.onMeasure(widthMeasureSpec, heightMeasureSpec)
+            return
+        }
+
+        val childWidthSpec = getChildMeasureSpec(
+            widthMeasureSpec,
+            paddingLeft + paddingRight,
+            editorScrollView.layoutParams.width
+        )
+        val childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
+        editorScrollView.measure(childWidthSpec, childHeightSpec)
+
+        val measuredWidth = resolveSize(
+            editorScrollView.measuredWidth + paddingLeft + paddingRight,
+            widthMeasureSpec
+        )
+        val desiredHeight = editorScrollView.measuredHeight + paddingTop + paddingBottom
+        val measuredHeight = when (MeasureSpec.getMode(heightMeasureSpec)) {
+            MeasureSpec.AT_MOST -> desiredHeight.coerceAtMost(MeasureSpec.getSize(heightMeasureSpec))
+            else -> desiredHeight
+        }
+        setMeasuredDimension(measuredWidth, measuredHeight)
+    }
+
+    private fun updateScrollContainerAppearance() {
+        val cornerRadiusPx = (theme?.borderRadius ?: 0f) * resources.displayMetrics.density
+        editorScrollView.background = GradientDrawable().apply {
+            cornerRadius = cornerRadiusPx
+            setColor(theme?.backgroundColor ?: baseBackgroundColor)
+        }
+        editorScrollView.clipToOutline = cornerRadiusPx > 0f
+        appliedCornerRadiusPx = cornerRadiusPx
+    }
+
+    private fun updateScrollContainerInsets() {
+        if (heightBehavior != EditorHeightBehavior.FIXED) {
+            editorScrollView.setPadding(0, 0, 0, 0)
+            return
+        }
+
+        val density = resources.displayMetrics.density
+        val topInset = ((theme?.contentInsets?.top ?: 0f) * density).toInt()
+        val bottomInset = ((theme?.contentInsets?.bottom ?: 0f) * density).toInt()
+        editorScrollView.setPadding(0, topInset, 0, bottomInset + viewportBottomInsetPx)
+    }
+
+    private fun createContainerLayoutParams(): LayoutParams =
+        if (heightBehavior == EditorHeightBehavior.AUTO_GROW) {
+            LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)
+        } else {
+            LayoutParams(LayoutParams.MATCH_PARENT, 0, 1f)
+        }
+
+    private fun createEditorLayoutParams(): FrameLayout.LayoutParams =
+        FrameLayout.LayoutParams(
+            ViewGroup.LayoutParams.MATCH_PARENT,
+            ViewGroup.LayoutParams.WRAP_CONTENT
+        )
+}

package/expo-module.config.json

@@ -0,0 +1,9 @@
+{
+  "platforms": ["ios", "android"],
+  "ios": {
+    "modules": ["NativeEditorModule"]
+  },
+  "android": {
+    "modules": ["com.apollohg.editor.NativeEditorModule"]
+  }
+}

package/ios/EditorAddons.swift

@@ -0,0 +1,228 @@
+import UIKit
+
+struct NativeMentionSuggestion {
+    let key: String
+    let title: String
+    let subtitle: String?
+    let label: String
+    let attrs: [String: Any]
+
+    init?(dictionary: [String: Any]) {
+        guard let key = dictionary["key"] as? String,
+              let title = dictionary["title"] as? String,
+              let label = dictionary["label"] as? String
+        else {
+            return nil
+        }
+
+        self.key = key
+        self.title = title
+        self.subtitle = dictionary["subtitle"] as? String
+        self.label = label
+        self.attrs = dictionary["attrs"] as? [String: Any] ?? [:]
+    }
+}
+
+struct NativeMentionsAddonConfig {
+    let trigger: String
+    let suggestions: [NativeMentionSuggestion]
+    let theme: EditorMentionTheme?
+
+    init?(dictionary: [String: Any]) {
+        let trigger = (dictionary["trigger"] as? String)?.trimmingCharacters(in: .whitespacesAndNewlines)
+        self.trigger = (trigger?.isEmpty == false ? trigger : "@") ?? "@"
+        self.suggestions = ((dictionary["suggestions"] as? [[String: Any]]) ?? []).compactMap(NativeMentionSuggestion.init(dictionary:))
+        if let theme = dictionary["theme"] as? [String: Any] {
+            self.theme = EditorMentionTheme(dictionary: theme)
+        } else {
+            self.theme = nil
+        }
+    }
+}
+
+struct NativeEditorAddons {
+    let mentions: NativeMentionsAddonConfig?
+
+    static func from(json: String?) -> NativeEditorAddons {
+        guard let json,
+              let data = json.data(using: .utf8),
+              let raw = try? JSONSerialization.jsonObject(with: data) as? [String: Any]
+        else {
+            return NativeEditorAddons(mentions: nil)
+        }
+
+        return NativeEditorAddons(
+            mentions: (raw["mentions"] as? [String: Any]).flatMap(NativeMentionsAddonConfig.init(dictionary:))
+        )
+    }
+}
+
+struct MentionQueryState: Equatable {
+    let query: String
+    let trigger: String
+    let anchor: UInt32
+    let head: UInt32
+}
+
+func isMentionIdentifierScalar(_ scalar: Unicode.Scalar) -> Bool {
+    CharacterSet.alphanumerics.contains(scalar) || scalar == "_" || scalar == "-"
+}
+
+func resolveMentionQueryState(
+    in text: String,
+    cursorScalar: UInt32,
+    trigger: String,
+    isCaretInsideMention: Bool
+) -> MentionQueryState? {
+    guard !isCaretInsideMention else { return nil }
+
+    let scalars = Array(text.unicodeScalars)
+    let scalarCount = UInt32(scalars.count)
+    guard cursorScalar <= scalarCount else { return nil }
+
+    let triggerScalars = Array(trigger.unicodeScalars)
+    guard triggerScalars.count == 1, let triggerScalar = triggerScalars.first else {
+        return nil
+    }
+
+    var start = Int(cursorScalar)
+    while start > 0 {
+        let previous = scalars[start - 1]
+        if previous.properties.isWhitespace
+            || previous == "\n"
+            || previous == "\u{FFFC}"
+            || (!isMentionIdentifierScalar(previous) && previous != triggerScalar)
+        {
+            break
+        }
+        start -= 1
+    }
+
+    guard start < scalars.count, scalars[start] == triggerScalar else {
+        return nil
+    }
+    if start > 0 {
+        let previous = scalars[start - 1]
+        if isMentionIdentifierScalar(previous) {
+            return nil
+        }
+    }
+
+    let queryStart = start + 1
+    let cursor = Int(cursorScalar)
+    guard queryStart <= cursor else { return nil }
+    let query = String(String.UnicodeScalarView(scalars[queryStart..<cursor]))
+    if query.unicodeScalars.contains(where: {
+        $0.properties.isWhitespace || $0 == "\n" || $0 == "\u{FFFC}"
+    }) {
+        return nil
+    }
+
+    return MentionQueryState(
+        query: query,
+        trigger: trigger,
+        anchor: UInt32(start),
+        head: cursorScalar
+    )
+}
+
+final class MentionSuggestionChipButton: UIButton {
+    private let titleLabelView = UILabel()
+    private let subtitleLabelView = UILabel()
+    private let stackView = UIStackView()
+    private var theme: EditorMentionTheme?
+
+    let suggestion: NativeMentionSuggestion
+
+    init(suggestion: NativeMentionSuggestion, theme: EditorMentionTheme?) {
+        self.suggestion = suggestion
+        self.theme = theme
+        super.init(frame: .zero)
+        translatesAutoresizingMaskIntoConstraints = false
+        layer.cornerRadius = 12
+        clipsToBounds = true
+        if #available(iOS 15.0, *) {
+            var configuration = UIButton.Configuration.plain()
+            configuration.contentInsets = .zero
+            self.configuration = configuration
+        }
+
+        titleLabelView.translatesAutoresizingMaskIntoConstraints = false
+        titleLabelView.isUserInteractionEnabled = false
+        titleLabelView.font = .systemFont(ofSize: 14, weight: .semibold)
+        titleLabelView.text = suggestion.label
+        titleLabelView.numberOfLines = 1
+
+        subtitleLabelView.translatesAutoresizingMaskIntoConstraints = false
+        subtitleLabelView.isUserInteractionEnabled = false
+        subtitleLabelView.font = .systemFont(ofSize: 12)
+        subtitleLabelView.text = suggestion.subtitle
+        subtitleLabelView.numberOfLines = 1
+        subtitleLabelView.isHidden = suggestion.subtitle == nil
+
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        stackView.isUserInteractionEnabled = false
+        stackView.axis = .vertical
+        stackView.alignment = .fill
+        stackView.spacing = 1
+        stackView.addArrangedSubview(titleLabelView)
+        stackView.addArrangedSubview(subtitleLabelView)
+        addSubview(stackView)
+
+        NSLayoutConstraint.activate([
+            stackView.topAnchor.constraint(equalTo: topAnchor, constant: 8),
+            stackView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 12),
+            stackView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -12),
+            stackView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8),
+            heightAnchor.constraint(greaterThanOrEqualToConstant: 40),
+        ])
+
+        addTarget(self, action: #selector(handleTouchDown), for: [.touchDown, .touchDragEnter])
+        addTarget(self, action: #selector(handleTouchUp), for: [.touchCancel, .touchDragExit, .touchUpInside, .touchUpOutside])
+        apply(theme: theme)
+        updateAppearance(highlighted: false)
+    }
+
+    required init?(coder: NSCoder) {
+        return nil
+    }
+
+    func apply(theme: EditorMentionTheme?) {
+        self.theme = theme
+        layer.cornerRadius = theme?.borderRadius ?? 12
+        layer.borderColor = (theme?.borderColor ?? UIColor.clear).cgColor
+        layer.borderWidth = theme?.borderWidth ?? 0
+        subtitleLabelView.isHidden = suggestion.subtitle == nil
+        updateAppearance(highlighted: isHighlighted)
+    }
+
+    override var isHighlighted: Bool {
+        didSet {
+            updateAppearance(highlighted: isHighlighted)
+        }
+    }
+
+    @objc private func handleTouchDown() {
+        updateAppearance(highlighted: true)
+    }
+
+    @objc private func handleTouchUp() {
+        updateAppearance(highlighted: false)
+    }
+
+    private func updateAppearance(highlighted: Bool) {
+        backgroundColor = highlighted
+            ? (theme?.optionHighlightedBackgroundColor ?? UIColor.systemBlue.withAlphaComponent(0.12))
+            : (theme?.backgroundColor ?? UIColor.secondarySystemBackground)
+        titleLabelView.textColor = highlighted
+            ? (theme?.optionHighlightedTextColor ?? theme?.optionTextColor ?? .label)
+            : (theme?.optionTextColor ?? theme?.textColor ?? .label)
+        subtitleLabelView.textColor = theme?.optionSecondaryTextColor ?? .secondaryLabel
+    }
+
+    func contentViewsAllowTouchPassthroughForTesting() -> Bool {
+        !stackView.isUserInteractionEnabled
+            && !titleLabelView.isUserInteractionEnabled
+            && !subtitleLabelView.isUserInteractionEnabled
+    }
+}

package/ios/EditorCore.xcframework/Info.plist

@@ -0,0 +1,44 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+	<key>AvailableLibraries</key>
+	<array>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libeditor_core.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64_x86_64-simulator</string>
+			<key>LibraryPath</key>
+			<string>libeditor_core.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+				<string>x86_64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+			<key>SupportedPlatformVariant</key>
+			<string>simulator</string>
+		</dict>
+		<dict>
+			<key>BinaryPath</key>
+			<string>libeditor_core.a</string>
+			<key>LibraryIdentifier</key>
+			<string>ios-arm64</string>
+			<key>LibraryPath</key>
+			<string>libeditor_core.a</string>
+			<key>SupportedArchitectures</key>
+			<array>
+				<string>arm64</string>
+			</array>
+			<key>SupportedPlatform</key>
+			<string>ios</string>
+		</dict>
+	</array>
+	<key>CFBundlePackageType</key>
+	<string>XFWK</string>
+	<key>XCFrameworkFormatVersion</key>
+	<string>1.0</string>
+</dict>
+</plist>