@openeditor/react-native-prose-editor 0.0.8 → 0.0.9

package/ios/NativeBlockEditorSurface.swift

@@ -214,6 +214,7 @@ final class NativeBlockEditorSurface: UIScrollView {
     }
 
     private let stack = UIStackView()
+    private let placeholderLabel = UILabel()
     private var currentEditorId: UInt64 = 0
     private var isApplyingRemoteUpdate = false
     private var currentTheme: EditorTheme?
@@ -232,6 +233,13 @@ final class NativeBlockEditorSurface: UIScrollView {
     private var selectedTextPos: UInt32?
     private let caretView = UIView()
 
+    var placeholder: String = "" {
+        didSet {
+            placeholderLabel.text = placeholder
+            refreshPlaceholder()
+        }
+    }
+
     var baseFont: UIFont = .systemFont(ofSize: 16)
     var baseTextColor: UIColor = .label
     var baseBackgroundColor: UIColor = .systemBackground {
@@ -270,6 +278,11 @@ final class NativeBlockEditorSurface: UIScrollView {
         stack.spacing = 8
         stack.alignment = .fill
         addSubview(stack)
+        placeholderLabel.numberOfLines = 0
+        placeholderLabel.isUserInteractionEnabled = false
+        placeholderLabel.isHidden = true
+        placeholderLabel.layer.zPosition = 1
+        addSubview(placeholderLabel)
         caretView.backgroundColor = .systemBlue
         caretView.isUserInteractionEnabled = false
         caretView.layer.cornerRadius = 1
@@ -297,6 +310,16 @@ final class NativeBlockEditorSurface: UIScrollView {
         ).height
         stack.frame.size.height = contentHeight
         stack.layoutIfNeeded()
+        placeholderLabel.font = font(for: ["nodeType": "paragraph"])
+        placeholderLabel.textColor = currentTheme?.placeholderColor ?? .placeholderText
+        placeholderLabel.frame = CGRect(
+            x: leftInset,
+            y: topInset,
+            width: contentWidth,
+            height: placeholderLabel.sizeThatFits(
+                CGSize(width: contentWidth, height: .greatestFiniteMagnitude)
+            ).height
+        )
         contentSize = CGSize(width: bounds.width, height: stack.frame.maxY + bottomInset)
         refreshCaret()
         onContentHeightMayChange?(contentSize.height)
@@ -304,13 +327,16 @@ final class NativeBlockEditorSurface: UIScrollView {
 
     func applyTheme(_ theme: EditorTheme?) {
         currentTheme = theme
+        backgroundColor = theme?.backgroundColor ?? baseBackgroundColor
         contentInset = .zero
         verticalScrollIndicatorInsets = .zero
-        if let currentRoot {
-            rebuildAll(from: currentRoot)
+        if let root = currentRoot {
+            rebuildAll(from: root)
+            currentRoot = root
             refreshTableCellRegistry()
             refreshImageSelection()
         }
+        refreshPlaceholder()
         setNeedsLayout()
     }
 
@@ -351,6 +377,7 @@ final class NativeBlockEditorSurface: UIScrollView {
         refreshImageSelection()
         refreshCaret()
         currentRoot = root
+        refreshPlaceholder()
         isApplyingRemoteUpdate = false
         setNeedsLayout()
         layoutIfNeeded()
@@ -375,6 +402,22 @@ final class NativeBlockEditorSurface: UIScrollView {
         }
     }
 
+    private func refreshPlaceholder() {
+        placeholderLabel.isHidden = placeholder.isEmpty || !isRenderedDocumentEmpty()
+        setNeedsLayout()
+    }
+
+    private func isRenderedDocumentEmpty() -> Bool {
+        guard let root = currentRoot else { return false }
+        let children = root["children"] as? [[String: Any]] ?? []
+        guard children.count <= 1 else { return false }
+        guard let child = children.first else {
+            return textLeafViews.count == 1 && textLeafViews[0].attributedText.length == 0
+        }
+        guard (child["nodeType"] as? String ?? "paragraph") == "paragraph" else { return false }
+        return textLeafViews.count == 1 && textLeafViews[0].attributedText.length == 0
+    }
+
     /// Applies canonical recursive patches at the smallest native view boundary.
     /// Metadata-only changes mutate bindings in place; node replacements stop at
     /// the nearest rendered owner (normally the edited text block); and root
@@ -546,6 +589,7 @@ final class NativeBlockEditorSurface: UIScrollView {
             view.removeFromSuperview()
         }
         currentRoot = nil
+        refreshPlaceholder()
         nodeViews.removeAll()
         tableCells.removeAll()
         imageViews.removeAll()
@@ -734,6 +778,14 @@ final class NativeBlockEditorSurface: UIScrollView {
         stack.arrangedSubviews.count
     }
 
+    func isPlaceholderVisibleForTesting() -> Bool {
+        !placeholderLabel.isHidden
+    }
+
+    func placeholderColorForTesting() -> UIColor? {
+        placeholderLabel.textColor
+    }
+
     func firstTextAttributesForTesting() -> [NSAttributedString.Key: Any]? {
         func find(in view: UIView) -> TextLeafView? {
             if let leaf = view as? TextLeafView, leaf.attributedText.length > 0 {
@@ -962,7 +1014,7 @@ final class NativeBlockEditorSurface: UIScrollView {
             attributes[.strikethroughStyle] = NSUnderlineStyle.single.rawValue
         }
         if markTypes.contains("link") {
-            attributes[.foregroundColor] = tintColor
+            attributes[.foregroundColor] = currentTheme?.links?.color ?? tintColor
         }
         if markTypes.contains("code") {
             attributes[.font] = UIFont.monospacedSystemFont(ofSize: baseFont.pointSize, weight: .regular)

package/ios/NativeEditorModule.swift

@@ -538,7 +538,7 @@ public class NativeEditorModule: Module {
                 view.setEditable(editable)
             }
             Prop("placeholder") { (view: NativeEditorExpoView, placeholder: String) in
-                view.richTextView.textView.placeholder = placeholder
+                view.richTextView.placeholder = placeholder
             }
             Prop("autoFocus") { (view: NativeEditorExpoView, autoFocus: Bool) in
                 view.setAutoFocus(autoFocus)

package/ios/RichTextEditorView.swift

@@ -5064,6 +5064,13 @@ final class RichTextEditorView: UIView {
     /// The editor text view that handles input interception.
     let textView: EditorTextView
     private let blockSurface = NativeBlockEditorSurface()
+
+    var placeholder: String = "" {
+        didSet {
+            textView.placeholder = placeholder
+            blockSurface.placeholder = placeholder
+        }
+    }
     private let remoteSelectionOverlayView = RemoteSelectionOverlayView()
     private let taskListMarkerTapOverlayView = TaskListMarkerTapOverlayView()
     private let imageTapOverlayView = ImageTapOverlayView()
@@ -5400,6 +5407,18 @@ final class RichTextEditorView: UIView {
         blockSurface.topLevelViewCountForTesting
     }
 
+    func isBlockSurfacePlaceholderVisibleForTesting() -> Bool {
+        blockSurface.isPlaceholderVisibleForTesting()
+    }
+
+    func blockSurfaceBackgroundColorForTesting() -> UIColor? {
+        blockSurface.backgroundColor
+    }
+
+    func blockSurfacePlaceholderColorForTesting() -> UIColor? {
+        blockSurface.placeholderColorForTesting()
+    }
+
     func blockSurfaceFirstTextAttributesForTesting() -> [NSAttributedString.Key: Any]? {
         blockSurface.firstTextAttributesForTesting()
     }

package/package.json

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