groupTextTokens doesn't take into account <Text>-like plugins

[olegbl]

If a plugin outputs a -like component, groupTextTokens doesn't understand it and will group the text around it, causing weird behavior when soft breaks are involved.

Ideally, getIsTextType / getIsInlineTextType would be customizable via props.

[mientjan]

@olegbl Do you have a plugin for me so i can reproduce it and try to fix this? thx

[olegbl]

Sure! Here's a simple one:

<View style={{padding: 20}}>
  <View style={{width: 100, borderWidth: 1, borderColor: 'black'}}>
    <Markdown>{'Hello there\nfoo\nbar\nHello there'}</Markdown>
  </View>
  <View style={{width: 100, borderWidth: 1, borderColor: 'black'}}>
    <Markdown
      rules={{
        foo: (node, children, parent, styles) => (
          <Text key={node.key} style={styles.foo}>
            {node.content}
          </Text>
        ),
      }}
      style={StyleSheet.create({
        foo: {
          color: 'red',
        },
      })}
      plugins={[
        new PluginContainer(
          (md, name, options) => {
            const parse = state => {
              const Token = state.Token;

              for (let i = 0; i < state.tokens.length; i++) {
                const block = state.tokens[i];
                if (block.type !== 'inline') {
                  continue;
                }

                for (let j = 0; j < block.children.length; j++) {
                  const token = block.children[j];
                  if (token.type !== 'text') {
                    continue;
                  }

                  if (token.content === name) {
                    const newToken = new Token(name, '', token.nesting);
                    newToken.content = token.content;
                    block.children = md.utils.arrayReplaceAt(
                      block.children,
                      j,
                      [newToken],
                    );
                  }
                }
              }
            };

            md.core.ruler.after('inline', name, parse);
          },
          'foo',
          {},
        ),
      ]}>
      {'Hello there\nfoo\nbar\nHello there'}
    </Markdown>
  </View>
</View>

[mientjan]

The mistake i made is not using token.block which is false when confronted with inline elements. By completely removing the check getIsInlineTextType and relying on token.block this markdown.renderer is a lot more flexible.

@olegbl do you agree?

[mientjan]

This change breaks linked images. Working on a fix for this.

[mientjan]

@olegbl by setting the token.block to true or false you will be able to change the element to be checked as a inline element or a block element. see https://www.npmjs.com/package/react-native-markdown-renderer/v/3.2.5 its in beta