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