@openeditor/react-native-prose-editor 0.0.12 → 0.0.14

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

@@ -48,6 +48,7 @@ internal data class SelectedImageGeometry(val docPos: Int, val rect: RectF)
 
 class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     var onPageOpen: ((String, String, String?, String?) -> Unit)? = null
+    var onAttachmentOpen: ((String?, String, String?, Long?, String?) -> Unit)? = null
     var isScrollingEnabled: Boolean = true
 
     internal var geometryRevision: Long = 0
@@ -618,6 +619,9 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
     internal fun tableFillColorsForTesting(): List<Int> = tableCells.map { it.baseFillColor }
 
     private fun viewForNode(node: JSONObject, depth: Int, path: List<Int>): View {
+        if (node.optString("nodeType") == "attachment") {
+            return attachmentView(node, depth).also { nodeViews[path] = it }
+        }
         if (node.optString("nodeType") == "page") {
             return pageView(node, depth).also { nodeViews[path] = it }
         }
@@ -772,36 +776,31 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
 
     private fun calloutView(node: JSONObject, depth: Int, path: List<Int>): View {
         val density = resources.displayMetrics.density
-        val tone = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
-        val accent = when (tone) {
-            "success" -> 0xFF16A34A.toInt()
-            "warning" -> 0xFFD97706.toInt()
-            "danger" -> 0xFFDC2626.toInt()
-            else -> 0xFF2563EB.toInt()
-        }
         val container = LinearLayout(context).apply {
-            orientation = LinearLayout.VERTICAL
+            orientation = LinearLayout.HORIZONTAL
+            gravity = android.view.Gravity.TOP
             val padding = (12 * density).toInt()
             setPadding(padding, padding, padding, padding)
             background = roundedDrawable(
-                Color.argb(24, Color.red(accent), Color.green(accent), Color.blue(accent)),
-                Color.argb(140, Color.red(accent), Color.green(accent), Color.blue(accent)),
-                1f,
+                currentTheme?.codeBlock?.backgroundColor ?: 0xFFF5F5F5.toInt(),
+                Color.TRANSPARENT,
+                0f,
                 10f
             )
         }
         container.addView(TextView(context).apply {
-            text = tone.replaceFirstChar { it.uppercase() }
-            setTextColor(accent)
-            setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f)
-            setTypeface(typeface, Typeface.BOLD)
-            isClickable = this@NativeBlockEditorSurface.isEditable
-            setOnClickListener { cycleCalloutTone(node) }
+            text = node.optJSONObject("attrs")?.optString("emoji", "💡") ?: "💡"
+            setTextSize(TypedValue.COMPLEX_UNIT_SP, 20f)
         })
+        val content = LinearLayout(context).apply {
+            orientation = LinearLayout.VERTICAL
+            setPadding((10 * density).toInt(), 0, 0, 0)
+        }
         val children = node.optJSONArray("children")
         for (index in 0 until (children?.length() ?: 0)) {
-            children?.optJSONObject(index)?.let { container.addView(viewForNode(it, depth + 1, path + index)) }
+            children?.optJSONObject(index)?.let { content.addView(viewForNode(it, depth + 1, path + index)) }
         }
+        container.addView(content, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
         return container
     }
 
@@ -829,14 +828,6 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         }
     }
 
-    private fun cycleCalloutTone(node: JSONObject) {
-        if (!isEditable) return
-        val tones = listOf("info", "success", "warning", "danger")
-        val current = node.optJSONObject("attrs")?.optString("tone", "info") ?: "info"
-        val next = tones[(tones.indexOf(current).coerceAtLeast(0) + 1) % tones.size]
-        updateNodeAttrs(node, JSONObject().put("tone", next))
-    }
-
     private fun updateNodeAttrs(node: JSONObject, patch: JSONObject) {
         if (currentEditorId == 0L) return
         val attrs = JSONObject(node.optJSONObject("attrs")?.toString() ?: "{}")
@@ -960,6 +951,36 @@ class NativeBlockEditorSurface(context: Context) : ScrollView(context) {
         return row
     }
 
+    private fun attachmentView(node: JSONObject, depth: Int): View {
+        val density = resources.displayMetrics.density
+        val attrs = node.optJSONObject("attrs")
+        return LinearLayout(context).apply {
+            orientation = LinearLayout.HORIZONTAL
+            gravity = android.view.Gravity.CENTER_VERTICAL
+            val padding = (10 * density).toInt()
+            setPadding(padding + (depth * 8 * density).toInt(), padding, padding, padding)
+            background = borderDrawable(Color.TRANSPARENT, currentTheme?.table?.borderColor ?: baseTextColor, 1f)
+            addView(TextView(context).apply { text = "📎"; setTextSize(TypedValue.COMPLEX_UNIT_SP, 22f) }, LinearLayout.LayoutParams((38 * density).toInt(), ViewGroup.LayoutParams.WRAP_CONTENT))
+            addView(LinearLayout(context).apply {
+                orientation = LinearLayout.VERTICAL
+                addView(TextView(context).apply { text = attrs?.optString("name").orEmpty().ifEmpty { "Attachment" }; setTextColor(baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 15f); setTypeface(typeface, Typeface.BOLD) })
+                addView(TextView(context).apply { text = attrs?.optString("mimeType").orEmpty().ifEmpty { "File" }; setTextColor(currentTheme?.placeholderColor ?: baseTextColor); setTextSize(TypedValue.COMPLEX_UNIT_SP, 12f) })
+            }, LinearLayout.LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT, 1f))
+            isClickable = true
+            isFocusable = true
+            contentDescription = "Open ${attrs?.optString("name").orEmpty().ifEmpty { "attachment" }}"
+            setOnClickListener {
+                onAttachmentOpen?.invoke(
+                    attrs?.optString("attachmentId")?.takeIf(String::isNotEmpty),
+                    attrs?.optString("name").orEmpty().ifEmpty { "Attachment" },
+                    attrs?.optString("mimeType")?.takeIf(String::isNotEmpty),
+                    attrs?.optLong("size")?.takeIf { attrs.has("size") && !attrs.isNull("size") },
+                    attrs?.optString("url")?.takeIf(String::isNotEmpty),
+                )
+            }
+        }
+    }
+
     private fun configureTextLeaf(leaf: TextLeaf, node: JSONObject) {
         val rendered = attributedInlineContent(node)
         val hadFocus = leaf.hasFocus()

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

@@ -733,6 +733,14 @@ class NativeEditorExpoView(
             href?.let { event["href"] = it }
             emitAddonEvent(mapOf("eventJson" to JSONObject(event).toString()))
         }
+        richTextView.onAttachmentOpen = { attachmentId, name, mimeType, size, url ->
+            val event = mutableMapOf<String, Any>("type" to "attachmentOpen", "name" to name)
+            attachmentId?.let { event["attachmentId"] = it }
+            mimeType?.let { event["mimeType"] = it }
+            size?.let { event["size"] = it }
+            url?.let { event["url"] = it }
+            emitAddonEvent(mapOf("eventJson" to JSONObject(event).toString()))
+        }
         richTextView.onBeforeDetachedFromWindow = {
             prepareForDetachFromWindow()
         }

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

@@ -39,6 +39,7 @@ class RichTextEditorView @JvmOverloads constructor(
     var onEditorUpdate: ((String) -> Unit)? = null
     var onFocusChange: ((Boolean) -> Unit)? = null
     var onPageOpen: ((String, String, String?, String?) -> Unit)? = null
+    var onAttachmentOpen: ((String?, String, String?, Long?, String?) -> Unit)? = null
 
     var editorId: Long
         get() = currentEditorId
@@ -62,6 +63,7 @@ class RichTextEditorView @JvmOverloads constructor(
         blockSurface.onEditorUpdate = { update -> onEditorUpdate?.invoke(update) }
         blockSurface.onFocusChange = { focused -> onFocusChange?.invoke(focused) }
         blockSurface.onPageOpen = { pageId, title, icon, href -> onPageOpen?.invoke(pageId, title, icon, href) }
+        blockSurface.onAttachmentOpen = { attachmentId, name, mimeType, size, url -> onAttachmentOpen?.invoke(attachmentId, name, mimeType, size, url) }
         updateAppearance()
     }
 

package/dist/NativeRichTextEditor.d.ts

@@ -88,6 +88,14 @@ export interface NativeRichTextEditorProps {
         icon?: string | null;
         href?: string | null;
     }) => void;
+    /** Called when an Attachment block is pressed. */
+    onOpenAttachment?: (attachment: {
+        attachmentId: string | null;
+        name: string;
+        mimeType: string | null;
+        size: number | null;
+        url: string | null;
+    }) => void;
     /** Whether plain URLs typed or pasted into the editor should be converted into link marks automatically. */
     autoDetectLinks?: boolean;
     /** Whether `data:image/...` sources are accepted for image insertion and HTML parsing. */

package/dist/NativeRichTextEditor.js

@@ -559,7 +559,7 @@ function doesLiveMentionQueryConflictWithNativeSelectRequest(request, currentQue
         currentQuery.range.anchor !== request.range.anchor ||
         currentQuery.range.head !== request.range.head);
 }
-exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, valueJSONUpdateMode = 'replace', preserveSelectionOnValueJSONReset = false, selectionOnValueJSONReset, schema, placeholder, editable = true, maxLength, autoFocus = false, autoCapitalize, autoCorrect, keyboardType, keyboardAppearance, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onOpenPage, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
+exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEditor({ initialContent, initialJSON, value, valueJSON, valueJSONRevision, valueJSONUpdateMode = 'replace', preserveSelectionOnValueJSONReset = false, selectionOnValueJSONReset, schema, placeholder, editable = true, maxLength, autoFocus = false, autoCapitalize, autoCorrect, keyboardType, keyboardAppearance, heightBehavior = 'autoGrow', showToolbar = true, toolbarPlacement = 'keyboard', toolbarItems = EditorToolbar_1.DEFAULT_EDITOR_TOOLBAR_ITEMS, onToolbarAction, onRequestLink, onRequestImage, onOpenPage, onOpenAttachment, autoDetectLinks = false, onContentChange, onContentChangeJSON, onSelectionChange, onActiveStateChange, onHistoryStateChange, onFocus, onBlur, style, containerStyle, theme, addons, remoteSelections, allowBase64Images = false, allowImageResizing = true, }, ref) {
     const bridgeRef = (0, react_1.useRef)(null);
     const nativeViewRef = (0, react_1.useRef)(null);
     const [isReady, setIsReady] = (0, react_1.useState)(false);
@@ -2054,6 +2054,16 @@ exports.NativeRichTextEditor = (0, react_1.forwardRef)(function NativeRichTextEd
         }
         if (!parsed)
             return;
+        if (parsed.type === 'attachmentOpen') {
+            onOpenAttachment?.({
+                attachmentId: parsed.attachmentId ?? null,
+                name: parsed.name,
+                mimeType: parsed.mimeType ?? null,
+                size: parsed.size ?? null,
+                url: parsed.url ?? null,
+            });
+            return;
+        }
         if (parsed.type === 'pageOpen') {
             onOpenPage?.({
                 pageId: parsed.pageId,

package/dist/addons.d.ts

@@ -65,6 +65,13 @@ export interface SerializedEditorAddons {
     mentions?: SerializedMentionsAddonConfig;
 }
 export type EditorAddonEvent = {
+    type: 'attachmentOpen';
+    attachmentId?: string | null;
+    name: string;
+    mimeType?: string | null;
+    size?: number | null;
+    url?: string | null;
+} | {
     type: 'pageOpen';
     pageId: string;
     title: string;

package/ios/NativeBlockEditorSurface.swift

@@ -2,6 +2,17 @@ import UIKit
 
 final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestureRecognizerDelegate {
     var onPageOpen: ((String, String, String?, String?) -> Void)?
+    var onAttachmentOpen: ((String?, String, String?, NSNumber?, String?) -> Void)?
+    private final class AttachmentRow: UIStackView {
+        var open: (() -> Void)?
+        override init(frame: CGRect) {
+            super.init(frame: frame)
+            isUserInteractionEnabled = true
+            addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(handleOpen)))
+        }
+        required init(coder: NSCoder) { fatalError("init(coder:) has not been implemented") }
+        @objc private func handleOpen() { open?() }
+    }
     private final class TextLeafView: UITextView {
         struct PositionSegment {
             let range: NSRange
@@ -697,6 +708,11 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     }
 
     private func view(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
+        if node["nodeType"] as? String == "attachment" {
+            let rendered = attachmentView(for: node, depth: depth)
+            nodeViews[path] = rendered
+            return rendered
+        }
         if node["nodeType"] as? String == "page" {
             let rendered = pageView(for: node, depth: depth)
             nodeViews[path] = rendered
@@ -848,37 +864,27 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
     }
 
     private func calloutView(for node: [String: Any], depth: Int, path: [Int]) -> UIView {
-        let tone = stringAttr(node, "tone") ?? "info"
-        let accent: UIColor = switch tone {
-        case "success": .systemGreen
-        case "warning": .systemOrange
-        case "danger": .systemRed
-        default: .systemBlue
-        }
         let container = UIStackView()
-        container.axis = .vertical
-        container.spacing = 8
+        container.axis = .horizontal
+        container.alignment = .top
+        container.spacing = 10
         container.layoutMargins = UIEdgeInsets(top: 12, left: 12, bottom: 12, right: 12)
         container.isLayoutMarginsRelativeArrangement = true
-        container.backgroundColor = accent.withAlphaComponent(0.1)
-        container.layer.borderColor = accent.withAlphaComponent(0.55).cgColor
-        container.layer.borderWidth = 1
+        container.backgroundColor = UIColor.secondarySystemBackground
         container.layer.cornerRadius = 10
 
-        let toneButton = UIButton(type: .system)
-        toneButton.setTitle(tone.capitalized, for: .normal)
-        toneButton.setTitleColor(accent, for: .normal)
-        toneButton.titleLabel?.font = .systemFont(ofSize: 12, weight: .semibold)
-        toneButton.contentHorizontalAlignment = .leading
-        toneButton.isEnabled = isEditable
-        toneButton.addAction(UIAction { [weak self] _ in
-            self?.cycleCalloutTone(node)
-        }, for: .touchUpInside)
-        container.addArrangedSubview(toneButton)
+        let emoji = UILabel()
+        emoji.text = stringAttr(node, "emoji") ?? "💡"
+        emoji.font = .systemFont(ofSize: 20)
+        container.addArrangedSubview(emoji)
 
+        let content = UIStackView()
+        content.axis = .vertical
+        content.spacing = 4
         for (index, child) in (node["children"] as? [[String: Any]] ?? []).enumerated() {
-            container.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
+            content.addArrangedSubview(view(for: child, depth: depth + 1, path: path + [index]))
         }
+        container.addArrangedSubview(content)
         return container
     }
 
@@ -916,14 +922,6 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         }
     }
 
-    private func cycleCalloutTone(_ node: [String: Any]) {
-        guard isEditable else { return }
-        let tones = ["info", "success", "warning", "danger"]
-        let current = stringAttr(node, "tone") ?? "info"
-        let next = tones[((tones.firstIndex(of: current) ?? 0) + 1) % tones.count]
-        updateNodeAttrs(node, patch: ["tone": next])
-    }
-
     private func updateNodeAttrs(_ node: [String: Any], patch: [String: Any]) {
         guard currentEditorId != 0 else { return }
         var attrs = node["attrs"] as? [String: Any] ?? [:]
@@ -1088,6 +1086,49 @@ final class NativeBlockEditorSurface: UIScrollView, UITextViewDelegate, UIGestur
         return row
     }
 
+    private func attachmentView(for node: [String: Any], depth: Int) -> UIView {
+        let row = AttachmentRow()
+        row.axis = .horizontal
+        row.alignment = .center
+        row.spacing = 10
+        row.layoutMargins = UIEdgeInsets(top: 10, left: CGFloat(depth) * 8 + 10, bottom: 10, right: 10)
+        row.isLayoutMarginsRelativeArrangement = true
+        row.layer.cornerRadius = 10
+        row.layer.borderWidth = 1
+        row.layer.borderColor = UIColor.separator.cgColor
+        let icon = UILabel()
+        icon.text = "📎"
+        icon.font = .systemFont(ofSize: 22)
+        row.addArrangedSubview(icon)
+        let details = UIStackView()
+        details.axis = .vertical
+        details.spacing = 2
+        let name = UILabel()
+        name.text = stringAttr(node, "name") ?? "Attachment"
+        name.font = .systemFont(ofSize: 15, weight: .semibold)
+        name.textColor = baseTextColor
+        name.lineBreakMode = .byTruncatingMiddle
+        let meta = UILabel()
+        meta.text = stringAttr(node, "mimeType") ?? "File"
+        meta.font = .systemFont(ofSize: 12)
+        meta.textColor = .secondaryLabel
+        details.addArrangedSubview(name)
+        details.addArrangedSubview(meta)
+        row.addArrangedSubview(details)
+        row.accessibilityTraits = .button
+        row.accessibilityLabel = "Open \(name.text ?? "attachment")"
+        row.open = { [weak self] in
+            self?.onAttachmentOpen?(
+                self?.stringAttr(node, "attachmentId"),
+                self?.stringAttr(node, "name") ?? "Attachment",
+                self?.stringAttr(node, "mimeType"),
+                (node["attrs"] as? [String: Any])?["size"] as? NSNumber,
+                self?.stringAttr(node, "url")
+            )
+        }
+        return row
+    }
+
     private func configureTextLeaf(_ leaf: TextLeafView, for node: [String: Any]) {
         let wasFirstResponder = leaf.isFirstResponder
         let previousSelection = leaf.selectedRange

package/ios/NativeEditorExpoView.swift

@@ -2109,6 +2109,16 @@ class NativeEditorExpoView: ExpoView, UIGestureRecognizerDelegate {
                   let json = String(data: data, encoding: .utf8) else { return }
             self?.onAddonEvent(["eventJson": json])
         }
+        richTextView.onAttachmentOpen = { [weak self] attachmentId, name, mimeType, size, url in
+            var event: [String: Any] = ["type": "attachmentOpen", "name": name]
+            if let attachmentId { event["attachmentId"] = attachmentId }
+            if let mimeType { event["mimeType"] = mimeType }
+            if let size { event["size"] = size }
+            if let url { event["url"] = url }
+            guard let data = try? JSONSerialization.data(withJSONObject: event),
+                  let json = String(data: data, encoding: .utf8) else { return }
+            self?.onAddonEvent(["eventJson": json])
+        }
         configureAccessoryToolbar()
 
         addSubview(richTextView)

package/ios/RichTextEditorView.swift

@@ -647,6 +647,7 @@ final class RichTextEditorView: UIView {
     var onEditorUpdate: ((String) -> Void)?
     var onFocusChange: ((Bool) -> Void)?
     var onPageOpen: ((String, String, String?, String?) -> Void)?
+    var onAttachmentOpen: ((String?, String, String?, NSNumber?, String?) -> Void)?
     private var lastAutoGrowWidth: CGFloat = 0
     private var cachedAutoGrowMeasuredHeight: CGFloat = 0
     private var remoteSelections: [RemoteSelectionDecoration] = []
@@ -764,6 +765,9 @@ final class RichTextEditorView: UIView {
         blockSurface.onPageOpen = { [weak self] pageId, title, icon, href in
             self?.onPageOpen?(pageId, title, icon, href)
         }
+        blockSurface.onAttachmentOpen = { [weak self] attachmentId, name, mimeType, size, url in
+            self?.onAttachmentOpen?(attachmentId, name, mimeType, size, url)
+        }
         blockSurface.onContentHeightMayChange = { [weak self] measuredHeight in
             guard let self, self.heightBehavior == .autoGrow else { return }
             self.cachedAutoGrowMeasuredHeight = measuredHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openeditor/react-native-prose-editor",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "OpenEditor-owned native rich text editor engine for React Native",
   "license": "Apache-2.0",
   "homepage": "https://github.com/EasyLink-HQ/openeditor",