Not clear how to use beforeRender

[paulm17]

Hi there,

I'm trying to use beforeRender to render my own html with an image type.

converter.beforeRender(function (groupType, data) {
      const result = data.ops.map((op) => {
        const val = op.insert

        if (val.type === "image") {
          return `<span class="inline-block w-[22px] h-[22px]"><img class="w-full h-full" src="${val.value}" /></span>`
        } else {
          return false
        }
      })

      return result
    })

Of course the above code changes images just fine, but for everything else. It gets overridden with false. 😆

Can you please make a correct example? Your "Rendering Custom Blot Formats" example was helpful as I am able to change custom blots. But due to no example for native blots. I'm a bit lost.

Many thanks. 👍

[paulm17]

So on the basis that I'm going to provide for ALL the ops, rather than singling out one for replacement...

converter.beforeRender(function (groupType, data: any) {
      const result = data.ops.map((op: DeltaInsertOp) => {
        const val = op.insert

        if (val.type === "text") {
          return `${val.value}`
        } else if (val.type === "mention") {
          return `<span id="mention-${val.value.id}" class="bg-[rgba(71,78,125,1)] text-[rgba(221,223,251,1)] w-full h-[24px] py-[3px] px-[4px] rounded-[6px]">@${val.value.name}</span>`
        } else if (val.type === "image") {
          return `<span class="inline-block w-[22px] h-[22px]"><img class="w-full h-full" src="${val.value}" /></span>`
        }
      })

      return `<p>${result.join("")}</p>`
    })

This works. But if I can single one out for replacement. Please let me know.

[paulm17]

Closing due to moving to tiptap.