How to insert image with custom text?

[lutaev]

Hi there.
I'm working on extending of you amazing library. It would be pleasure if you help me with understanding how inserting images working. So, we have in addButton.js:

insertImage =(file)=> {
  if(!file)
    return

  let opts = {
    url: URL.createObjectURL(file),
  }

  // cleans input image value
  this.fileInput.value = ""

  return this.props.onChange(addNewBlock(this.props.editorState, 'image', opts))
}

I just want to add my custom text to be initialized with image, so, I have to add it to opts object:

let opts = {
  url: URL.createObjectURL(file),
  text: 'This is my caption text'
}

But if I do it this way, there is no text at all. I also checked image.js file and found this string rendering image caption:

<EditorBlock {...editorProps}/>

How should new EditorBlock be initialized to have text?
Thanks.

[michelson]

Hi , you could use the `updateTextOfBlock` function located in ` model/index.js` use it just after insertImage call note: you have to import the function in the addButton.js file let me know how it goes best! Atte. Miguel Michelson Martinez www.vadb.org <http://vadb.org>

…

On Mon, Dec 16, 2019 at 12:51 PM Artyom ***@***.***> wrote: Hi there. I'm working on extending of you amazing library. It would be pleasure if you help me with understanding how inserting images working. So, we have in *addButton.js*: insertImage =(file)=> { if(!file) return let opts = { url: URL.createObjectURL(file), } // cleans input image value this.fileInput.value = "" return this.props.onChange(addNewBlock(this.props.editorState, 'image', opts)) } I just want to add my custom text to be initialized with image, so, I have to add it to opts object: let opts = { url: URL.createObjectURL(file), } But if I do it this way, there is no text at all. I also checked *image.js* file and found this string rendering image caption: <EditorBlock {...editorProps}/> How should new EditorBlock be initialized to have text? Thanks. — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#191?email_source=notifications&email_token=AAAC5SFQOJFNUI5YWGX2W4DQY6PWPA5CNFSM4J3L7KD2YY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4IAYZV5Q>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAC5SFPCFLA5WVTGP4NPKLQY6PWPANCNFSM4J3L7KDQ> .

[lutaev]

Thanks for answer. I already tried updateTextOfBlock but the result was the same - no caption text at all after rendering. I also tried another function - addNewBlockAt - with the same result.

[michelson]

Have you called it within the onchange method? El lun., 16 de diciembre de 2019 1:43 p. m., Artyom < [email protected]> escribió:

…

Thanks for answer. I already tried updateTextOfBlock but the result was the same - no caption text at all after rendering. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#191?email_source=notifications&email_token=AAAC5SDGKHGSP5LWTDW3R5DQY6VZRA5CNFSM4J3L7KD2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEG7KHYQ#issuecomment-566141922>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAC5SDYWPCY6G5DHCT7ATTQY6VZRANCNFSM4J3L7KDQ> .

[lutaev]

Yes, I did it within the onChange method. Here is full code of method:

insertImage =(file)=> {
    if(!file)
      return

    let opts = {
      url: URL.createObjectURL(file),
    }

    // cleans input image value
    this.fileInput.value = ""

    this.props.onChange(addNewBlock(this.props.editorState, 'image', opts))
    setTimeout(() => {
      const { editorState } = this.props
      const currentBlock = getCurrentBlock(editorState)
      this.props.onChange(updateTextOfBlock(editorState, currentBlock, 'My caption'))
    }, 100)
  }

I see only image, but not text, editor is empty. According to draftjs, there is no leaves inside editor, possibly this fact will make things clearer.

Thanks again for your patience.

[michelson]

Hi @lutaev ,
I've added a branch in which I've implemented the custom caption on image added. As you noted the updateTextOfBlock does not work, I've updated the function with the latest api Modifier

check it out at, https://github.com/michelson/dante2/tree/default-image-caption

I guess it would be a good starting point

best

[lutaev]

Thank you very much. I'll check it.