Lexical does not render images when setting editorState

[mmolinahn]

I currently have this code to render the LexicalView:

        let theme = Theme()
        let editorConfig = EditorConfig(theme: theme, plugins: [InlineImagePlugin()])
        let lexicalView = LexicalView(editorConfig: editorConfig, featureFlags: FeatureFlags())

        let editor = lexicalView.editor

       if let newEditorState = try? EditorState.fromJSON(json: jsonString, editor: editor) {
            try? editor.setEditorState(newEditorState)
        }

the value for jsonString used above is: "{\"root\":{\"children\":[{\"children\":[{\"src\":\"https://t4.ftcdn.net/jpg/01/43/42/83/360_F_143428338_gcxw3Jcd0tJpkvvb53pfEztwtU9sxsgT.jpg\",\"maxWidth\":\"100%\",\"maxHeight\":800,\"width\":10,\"height\":20,\"type\":\"image\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"paragraph\",\"version\":1}],\"direction\":null,\"format\":\"\",\"indent\":0,\"type\":\"root\",\"version\":1}}"

I expect the image to render in the lexical view, but it just shows empty.

In order to render any image in LexicalView I have to run this:

        try? editor.update {
            let imageNode = ImageNode(url: "https://t4.ftcdn.net/jpg/01/43/42/83/360_F_143428338_gcxw3Jcd0tJpkvvb53pfEztwtU9sxsgT.jpg", size: CGSize(width: 300, height: 300), sourceID: "")
              if let selection = try getSelection() {
                _ = try selection.insertNodes(nodes: [imageNode], selectStart: false)
              }
        }

The problem with this approach is that it renders the inline image functionality worthless when I have to manually insert images.

Is this expected behavior? Or am I using it wrong?

For reference this is the entire class (it's a SwiftUI project so it is in a UIViewRepresentable):

import Foundation
import Lexical
import SwiftUI
import LexicalInlineImagePlugin

struct LexicalReadOnlyViewRepresentable: UIViewRepresentable {
    @State var jsonString: String

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

    func makeUIView(context: Context) -> some UIView {
        let theme = Theme()
        let editorConfig = EditorConfig(theme: theme, plugins: [InlineImagePlugin()])
        let lexicalView = LexicalView(editorConfig: editorConfig, featureFlags: FeatureFlags())

        let editor = lexicalView.editor

       if let newEditorState = try? EditorState.fromJSON(json: jsonString, editor: editor) {
            try? editor.setEditorState(newEditorState)
        }

       // have to write this code for any images to show up
        try? editor.update {

            let imageNode = ImageNode(url: "https://t4.ftcdn.net/jpg/01/43/42/83/360_F_143428338_gcxw3Jcd0tJpkvvb53pfEztwtU9sxsgT.jpg", size: CGSize(width: 300, height: 300), sourceID: "")
              if let selection = try getSelection() {
                _ = try selection.insertNodes(nodes: [imageNode], selectStart: false)
              }
        }

        return lexicalView
    }
}

[mmolinahn]

I mostly want to clarify if my expectation of loading the state should render images is correct or not. @amyworrall any help appreciated!

[mmolinahn]

It looks like the url is not being decoded from the EditorState we pass. url (which is a different key than what the JS version uses, src) is not one of the CodingKeys for ImageNode and it is not accounted for in the decode method.

Is this intentional? Treating the ImageNode different than other nodes?

[amyworrall]

Almost certainly not intentional. Happy to accept a PR :)

(Sorry I've been a bit lax on replying here, I’ve been off sick for a bit.)

Amy

On 21 Feb 2024, at 02:38, bluebonneville @.***> wrote:

It looks like the url is not being decoded from the EditorState we pass. url (which is a different key than what the JS version uses, src) is not one of the CodingKeys for ImageNode and it is not accounted for in the decode method.

Is this intentional? Treating the ImageNode different than other nodes?

— Reply to this email directly, view it on GitHub https://github.com/facebook/lexical-ios/issues/57#issuecomment-1955766930, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAEUB6T22GL4PQ7KKAYYX3LYUVM3PAVCNFSM6AAAAABDLIJ542VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSNJVG43DMOJTGA. You are receiving this because you were mentioned.

[mmolinahn]

Thanks Amy! I'll work on the PR :)