cjwirth / RichEditorView

RichEditorView is a simple, modular, drop-in UIView subclass for Rich Text Editing.
BSD 3-Clause "New" or "Revised" License
1.89k stars 445 forks source link

HTML Content is not repopulated in RichEditorView input field, when edit any particular data. #267

Open vchaubey-ontic opened 1 year ago

vchaubey-ontic commented 1 year ago

I am working in SwiftUI, and implementing RichEditorView in Chat Module, where user can send message and edit message. I'm facing issue in both part

1 - When I send message my inout filed is not getting empty, means editor is not reloaded. Simulator Screenshot - iPhone 14 Pro - 2023-08-14 at 14 41 37

2 - Whe Simulator Screenshot - iPhone 14 Pro - 2023-08-14 at 14 42 31 n I edit data is not repopulated in the field it's again reloaded issue.

Simulator Screenshot - iPhone 14 Pro - 2023-08-14 at 14 43 05

Even $text is receiving the updated html content, as send button getting enable but data is not populating.

Could some body please help how to reload the editor post sending message to make it empty of editing to make it repopulated.

I have used editor view like this.

struct RichTextEditor: UIViewRepresentable {

    class Coordinator: RichEditorDelegate, RichEditorToolbarDelegate {

        var parent: RichTextEditor
        var isDefaultFocus: Bool
        @Binding var colorPickerType: ColorPickerType?

        init(_ parent: RichTextEditor, isDefaultFocus: Bool = false, colorPickerType: Binding<ColorPickerType?>) {
            self.parent = parent
            self.isDefaultFocus = isDefaultFocus
            self._colorPickerType = colorPickerType
            NotificationCenter.default.addObserver(self, selector: #selector(colorPicked(notification:)), name: AppNotifications.colorPicked, object: nil)
        }

        func richEditorTookFocus(_ editor: RichEditorView) {

        }

        func richEditorLostFocus(_ editor: RichEditorView) {

        }

        func richEditor(_ editor: RichEditorView, contentDidChange content: String) {
            parent.htmlText = content
        }

        func richEditorToolbarChangeTextColor(_ toolbar: RichEditorToolbar) {
            colorPickerType = .text
        }

        func richEditorToolbarChangeBackgroundColor(_ toolbar: RichEditorToolbar) {
            colorPickerType = .background
        }

        func richEditorToolbarInsertLink(_ toolbar: RichEditorToolbar) {
            if let hasSelection = toolbar.editor?.hasRangeSelection, hasSelection, let href = toolbar.editor?.runJS("document.getSelection().getRangeAt(0).toString()"){
                toolbar.editor?.insertLink(href, title: "Link")
            }
        }

        func richEditorDidLoad(_ editor: RichEditorView) {
            editor.setEditorBackgroundColor(UIColor(parent.editorBackgroundColor))
            editor.setEditorFontColor(UIColor(Color.primary))
            if isDefaultFocus {
                editor.focus()
            }
        }

        func richEditor(_ editor: RichEditorView, heightDidChange height: Int) {
            withAnimation {
                if CGFloat(height) > parent.maxHeight {
                    parent.height = parent.maxHeight
                } else if CGFloat(height) < parent.minHeight {
                    parent.height = parent.minHeight
                } else if CGFloat(height) != parent.height {
                    parent.height = CGFloat(height)
                }
            }
        }

        @objc func colorPicked(notification: NSNotification) {
            if let colorPickerType = notification.userInfo?["colorPickerType"] as? ColorPickerType, let selectedColor = notification.userInfo?["color"] as? UIColor {
                switch colorPickerType {
                case .text :
                    self.parent.toolbar.editor?.setTextColor(selectedColor)
                case .background :
                    self.parent.toolbar.editor?.setTextBackgroundColor(selectedColor)
                }
            }
        }
    }

    func makeCoordinator() -> Coordinator {
        Coordinator(self, isDefaultFocus: isDefaultFocus, colorPickerType: $colorPickerType)
    }

    @Binding var htmlText: String
    @Binding var colorPickerType: ColorPickerType?
    var isDefaultFocus : Bool
    var minHeight: CGFloat
    @Binding var height: CGFloat
    var maxHeight: CGFloat
    let toolbar: RichEditorToolbar = RichEditorToolbar(frame: CGRect(x: 0, y: 0, width: 100, height: 44))
    var editorBackgroundColor = Color.red

    func makeUIView(context: Context) -> RichEditorView {
        let editor = RichEditorView(frame: .zero)
        editor.delegate = context.coordinator
        editor.html = htmlText
        editor.isScrollEnabled = true
        editor.placeholder = "Write something..."

        toolbar.options = [
            RichEditorDefaultOption.bold,
            RichEditorDefaultOption.italic,
            RichEditorDefaultOption.strike,
            RichEditorDefaultOption.underline,
            RichEditorDefaultOption.textColor,
            RichEditorDefaultOption.textBackgroundColor,
            RichEditorDefaultOption.link,
            RichEditorDefaultOption.orderedList,
            RichEditorDefaultOption.unorderedList,
            RichEditorDefaultOption.indent,
            RichEditorDefaultOption.outdent,
            RichEditorDefaultOption.alignLeft,
            RichEditorDefaultOption.alignCenter,
            RichEditorDefaultOption.alignRight,
        ]

        toolbar.editor = editor
        toolbar.delegate = context.coordinator

        editor.inputAccessoryView = toolbar

        return editor
    }

    func updateUIView(_ uiView: RichEditorView, context: Context) { }

}
vchaubey-ontic commented 1 year ago

@cjwirth could you please check