Examples and debugging of Custom Pre-Import Processor

For our site, we use Storyblok and Crowdin, and the Crowdin integration for the two. We are experiencing some issues with how richtext (HTML) content is parsed by Crowdin.

Here’s an example of richtext created in Storyblok:

[ORIGINAL TEXT]
This is a paragraph of text with a link in it. There is also a sentence where at the end, there is another link. Finally, there is a sentence without any links.
[/ORIGINAL TEXT]

But when synchronizing from Storyblok → Crowdin, this gets turned into:

[CURRENT PROCESSED HTML]
<p><span id="string_preview_id_$[0].content[0].text_0">This is a paragraph of text with </span><a href="https://www.archive.org" target="_blank" linktype="url"><span id="string_preview_id_$[0].content[1].text_0">a link</span></a><span id="string_preview_id_$[0].content[2].text_1">in it.</span><span id="string_preview_id_$[0].content[2].text_3">There is also a sentence where at the end, there is </span><a href="www.npr.org" target="_blank" linktype="url"><span id="string_preview_id_$[0].content[3].text_0">another link</span></a><span id="string_preview_id_$[0].content[4].text_2">Finally, there is a sentence without any links.</span></p>
[/CURRENT PROCESSED HTML]

What we’re trying to avoid is all these <span>-elements that seem to be added either by Storyblok or Crowdin when synchronizing, and that any punctuation or spaces are omitted (notice how both periods and spaces are missing from the original text), so that the final output would look more like:

[DESIRED PROCESSED HTML]
<p>This is a paragraph of text with <a href="https://www.archive.org" target="_blank" linktype="url">a link</a>in it. There is also a sentence where at the end, there is <a href="www.npr.org" target="_blank" linktype="url">another link</a>. Finally, there is a sentence without any links.</p>
[/DESIRED PROCESSED HTML]

One way we’ve been told we can deal with this is to use the Custom Pre-Import Processor app, but there doesn’t seem to be a whole lot of documentation or examples of how to use it, or how do debug/test before processing files:

  1. Is there a way to run this processor in a sandbox?
  2. Are there examples out there of how to use the pre-import processor?

Alternatively, if anyone has other ideas of how we might achieve or goal, any feedback or advice is appreciated.

Hello @kevinandersen

The integration is designed for stable work, and this processing is required for Storyblock to “approve” and recognize the received translated file. In the Crowdin editor, you can hide HTML tags from displaying (Editor settings → Appearance) for a more comfortable work.

You can try removing it at import and adding it back at export. Regarding the app, while there isn’t a sandbox environment for testing, you can try it in a text project with a sample test file from Storyblock.

We don’t have extensive documentation or examples publicly available, but if any extra assistance is needed, feel free to reach out to our support team (support@crowdin.com).

1 Like