Expensify/react-native-live-markdown

Is it possible to hide the markdown decorators but have the style remain?

Closed this issue · 3 comments

For example,

If a user types *This is bold* and this is not - apply the bold style to "this is bold" but without the * decorators.
I know I can change the color of the decorators but that extra space where the decorator sits still remains.

<MarkdownTextInput
            flex={1}
            key={textInputKey}
            textAlignVertical="top"
            ref={ref}
            maxLength={maxLength || null}
            multiline
            defaultValue={defaultValue}
            placeholder={placeholder}
            {...extraInputProps}
            {...fullScreenInputProps}
        >
            { value?.text || value}
 </MarkdownTextInput>

Hey @aleksandar-zoric-workvivo, thanks for your question.

Technically, we could extend markdownStyle so that you can set the font size of syntax elements (in this case, the asterisk) to 0 so that they are hidden and don't occupy any space. On the other hand, it would not work well for labeled links (e.g. [link](http://example.com)) since it would render as: linkhttp://example.com.

Also, it might be confusing for some users that if you place the cursor right after

This is bold and this is not

and then hit backspace, the text would change into

*This is bold and this is not

MarkdownTextInput component is designed to provide live markdown preview without removing syntax characters, as opposed to rich text input solutions that follow the WYSIWYG rule.

Hi @tomekzaw,

Ideally I'd only need to hide it (fontSize:0) for bold and italic markdown elements.
For others such as links, I'd be happy to leave it as is.

If easier to hide it for all markdown decorators, so be it.
I'd expect users to only use bold, italic and list decorators.

I have no problem patching the package myself here, if you can direct me where to make the change - if it's a simple enough thing.

@aleksandar-zoric-workvivo I'm afraid there's only one global setting for font size for all syntax elements, no matter if bold, italic or link. One thing you might want to try is to disable all parsing rules except the ones that recognize bold and italic in parser/index.ts (don't forget to build the .js file with npm run build inside parser directory and make sure to include the output file in the patch as well).

As for the code pointer, I believe the change would be pretty analogical to this PR: #233