Slate: how to insert a node with child nodes

Created on 26 May 2017  路  4Comments  路  Source: ianstormtaylor/slate

I want insert a link,
i used transform's insertInline api to insert a link,
but can't insert a text node in the same time.
how can i do this

question

Most helpful comment

Just to supplement @oyeanuj's comment with an example (slightly different approach, adding the text when constructing the inline.)

const link = Inline.create({
  type: 'link', // or whatever you have in your schema
  data: { href: 'http://foo.bar' },
  nodes: [ Text.createFromString('foo') ]
})
// Then use insertInline however you're already doing it
onChange(state
  .transform()
  .insertInline(link)
  .apply()
)

And I second the suggestion of joining the Slack channel! Lots of helpful folks in there like @oyeanuj and plenty of code snippets floating around :)

All 4 comments

@chengzhenping You can use create an inline first using Inline.create, then insert it using insertInline and then use insertNodeByKey and pass the inline created as the parent to insert it in.

Btw, I'd recommend joining the Slack channel as there are more folks out there who can help with these issues.

Just to supplement @oyeanuj's comment with an example (slightly different approach, adding the text when constructing the inline.)

const link = Inline.create({
  type: 'link', // or whatever you have in your schema
  data: { href: 'http://foo.bar' },
  nodes: [ Text.createFromString('foo') ]
})
// Then use insertInline however you're already doing it
onChange(state
  .transform()
  .insertInline(link)
  .apply()
)

And I second the suggestion of joining the Slack channel! Lots of helpful folks in there like @oyeanuj and plenty of code snippets floating around :)

can you supply the slack channel name ,thks

my email [email protected] ,or you can invite me, thks a lot

Was this page helpful?
0 / 5 - 0 ratings

Related issues

chrpeter picture chrpeter  路  3Comments

AlexeiAndreev picture AlexeiAndreev  路  3Comments

adrianclay picture adrianclay  路  3Comments

varoot picture varoot  路  3Comments

vdms picture vdms  路  3Comments