In react native, I need to render the form inside the markdown. I found react-native-marked and it's tokenizer with custom components to be doing close to what i need but it just renders the text. Is it possible to render the actual form inside the markdown?
import React from 'react';
import Markdown, {
MarkedTokenizer,
Renderer,
CustomToken,
RendererInterface,
} from 'react-native-marked';
import {TextInput} from 'react-native';
class CustomTokenizer extends MarkedTokenizer<CustomToken> {
// Override
text(this: MarkedTokenizer<CustomToken>, src: string) {
const match = src.match(/\[\[customForm\]\]/);
if (match) {
const token: CustomToken = {
type: 'custom',
raw: match[0],
identifier: 'customForm',
args: {
pageId: '123',
},
};
return token;
}
return super.codespan(src);
}
}
class CustomRenderer extends Renderer implements RendererInterface {
// Custom Token implementation
custom(
identifier: string,
_raw: string,
_children?: React.ReactNode[],
args?: Record<string, unknown>,
): React.ReactNode {
if (identifier === 'customForm') {
return <TextInput placeholder='enter your text here' />;
}
return null;
}
}
export const MarkdownForm: React.FC = () => {
const markdownText = 'Some text [[customForm]] more text';
const renderer = new CustomRenderer();
const tokenizer = new CustomTokenizer();
return (
<Markdown renderer={renderer} tokenizer={tokenizer} value={markdownText} />
);
};