I am trying flutter_markdown package to markdown some content. But it is not working properly for multiple line breaks.
String exampleData="\n\nLine 1. \n\nLine2.\n\n\n\n### Heading \n\nLine3";
Markdown(data: exampleData,)
The output is
I tried with line breaks "<br />" but it didn't worked
String exampleData="Line 1. \n\nLine2. <br /> <br /> \n\n### Heading \n\nLine3";
Out put is
Can someone help me with this line breaks or any alternative packages.
check out below link!!
enter link description here
br tag is not working, so using 3 back slash + n instead of br tag
String exampleData="Line 1. \\\nLine2. \\\n## Heading \\\nLine3";
I've found a nasty trick (not a solution) that may be of help in this specific case. I don't recommend it, but couldn't find any other workaround using flutter_markdown so far, and I couldn't find any other package in substitution neither.
You can take advantage of using triple apostrophes to add vertical space.
It is a nasty workaround, but couldn't find anything better so far to add vertical space.
Replace your <br> with \x03 like this. \x03 is End of text(ETX) in ASCII:
text.replaceAll('<br>', '\x03');
A decent Work Around.
A new feature is added in Flutter_markdown package called paddingBuilders , from version 0.6.8. you can add padding to all of the blocks available in markdown like below.
MarkdownBody(
data: markDown,
paddingBuilders: <String,
MarkdownPaddingBuilder>{
'p': PPaddingBuilder(),
'h3': H3PaddingBuilder(),
},
)
where you have to define the padding builder like below.
class PPaddingBuilder extends MarkdownPaddingBuilder {
#override
EdgeInsets getPadding() => const EdgeInsets.only(top: SGSpacing.xlarge);
}
class H3PaddingBuilder extends MarkdownPaddingBuilder {
#override
EdgeInsets getPadding() => const EdgeInsets.only(top: SGSpacing.xxlarge);
}
The list of all blockTag available in Flutter_markdown from source code is below:
const List<String> _kBlockTags = <String>[
'p',
'h1',
'h2',
'h3',
'h4',
'h5',
'h6',
'li',
'blockquote',
'pre',
'ol',
'ul',
'hr',
'table',
'thead',
'tbody',
'tr'
];
PS: padding will not work for inline Tags. only block Tag applicable.
Hi I found this package https://pub.dev/packages/markdown_widget
It's not a completely solution but this package support some tags os html like <\br>, in this case I added that tag in the markdown and works
My solution, when use String single line, not use """ or ''', use \n with 2 space
Below code show same UI
var _markdownSingleLine = 'Demo \n Break \n line';
var _markdownMultiLine =
'''
Demo
Break
line
''';
Demo break line
According to a now deleted issue, flutter_markdown supports explicit line breaks using a backslash at the end of the line. Using this syntax, your example would be:
\
\
Line 1.\
\
Line2.\
\
\
\
### Heading
\
Line3
Just add '
\
u2028' for line breaks.
This is the Unicode Character 'LINE SEPARATOR'
Related
I'm building a simple code editor to help children learn HTML. One feature I'm trying to add is that when users mouseover their rendered code (in an iframe), the corresponding HTML code in the editor is highlighted. So, for example, if a user mouses-over an image of kittens, the actual code, , would be highlighted in the editor.
Mousing-over the iframe to get the html source for that element is the easy part, which I've done (using document.elementFromPoint(e.clientX, e.clientY in the iframe itself, and posting that up to the parent) - so that's not the part I need help with. The part I can't figure out is how to search for and highlight that string of selected code in the code editor.
I'm using Codemirror 6 for this project, as it seems as it will give me the most flexibility to create such a feature. However, as a Codemirror 6 novice, I'm struggling with the documentation to find out where I should start. It seems like the steps I need to complete to accomplish this are:
Search for a range in the editor's text that matches a string (ie.'<img src="kittens.gif"').
Highlight that range in the editor.
Can anyone out there give me some advice as to where in the Codemirror 6 API I should look to start implementing this? It seems like it should be easy, but my unfamiliarity with the Codemirror API and the terse documentation is making this difficult.
1. Search for a range in the editor's text that matches a string (ie.'<img src="kittens.gif"').
You can use SearchCursor class (iterator) to get the character's range where is located the DOM element in your editor.
// the import for SearchCursor class
import {SearchCursor} from "#codemirror/search"
// your editor's view
let main_view = new EditorView({ /* your code */ });
// will create a cursor based on the doc content and the DOM element as a string (outerHTML)
let cursor = new SearchCursor(main_view.state.doc, element.outerHTML);
// will search the first match of the string element.outerHTML in the editor view main_view.state.doc
cursor.next()
// display the range where is located your DOM element in your editor
console.log(cursor.value);
2. Highlight that range in the editor.
As described in the migration documentation here, marked text is replace by decoration. To highlight a range in the editor with codemirror 6, you need to create one decoration and apply it in a dispatch on your view. This decoration need to be provide by an extension that you add in the extensions of your editor view.
// the import for the 3 new classes
import {StateEffect, StateField} from "#codemirror/state"
import {Decoration} from "#codemirror/view"
// code mirror effect that you will use to define the effect you want (the decoration)
const highlight_effect = StateEffect.define();
// define a new field that will be attached to your view state as an extension, update will be called at each editor's change
const highlight_extension = StateField.define({
create() { return Decoration.none },
update(value, transaction) {
value = value.map(transaction.changes)
for (let effect of transaction.effects) {
if (effect.is(highlight_effect)) value = value.update({add: effect.value, sort: true})
}
return value
},
provide: f => EditorView.decorations.from(f)
});
// this is your decoration where you can define the change you want : a css class or directly css attributes
const highlight_decoration = Decoration.mark({
// attributes: {style: "background-color: red"}
class: 'red_back'
});
// your editor's view
let main_view = new EditorView({
extensions: [highlight_extension]
});
// this is where the change takes effect by the dispatch. The of method instanciate the effect. You need to put this code where you want the change to take place
main_view.dispatch({
effects: highlight_effect.of([highlight_decoration.range(cursor.value.from, cursor.value.to)])
});
Hope it will help you to implement what you want ;)
Have a look at #codemirror/search.
Specifically, the source code implementation of Selection Matching may be of use for you to adapt.
It uses Decoration.mark over a range of text.
You can use SearchCursor to iterate over ranges that match your pattern (or RegExpCursor)
Use getSearchCursor, something like this:
var cursor = cmEditor.getSearchCursor(keyword , CodeMirror.Pos(cmEditor.firstLine(), 0), {caseFold: true, multiline: true});
if(cursor.find(false)){ //move to that position.
cmEditor.setSelection(cursor.from(), cursor.to());
cmEditor.scrollIntoView({from: cursor.from(), to: cursor.to()}, 20);
}
Programmatically search and select a keyword
Take a look at getSearchCursor source code it it give some glow about how it works and its usage.
So use getSearchCursor for finding text and optionally use markText for highlighting text because you can mark text with setSelection method of editor.
Selection Marking Demo
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
lineNumbers: true,
styleSelectedText: true
});
editor.markText({line: 6, ch: 26}, {line: 6, ch: 42}, {className: "styled-background"});
And it seem this is what you are looking for:
codemirror: search and highlight multipule words without dialog
RegExpCursor is another option that you can use:
new RegExpCursor(
text: Text,
query: string,
options?: {ignoreCase?: boolean},
from?: number = 0,
to?: number = text.length
)
Sample usage at:
Replacing text between dollar signs for Mathml expression.
This is a particularly obscure question about the Boostrap-UI plugin for CakePHP but I'm hoping someone might be able to help.
I’m using Bootstrap-UI (https://github.com/FriendsOfCake/bootstrap-ui) version 3.0, so using Bootstrap 4.6.
I’m trying to create a form that has controls that are aligned horizontally with their labels using the example from the readme here -
This works fine except I can’t see how to define the default column distribution ie so that the classes for the label and the control container are something like col-4 and col-8 without any breakpoint defined.
If I try something like -
'align' => [
'left' => 4,
'middle' => 8,
]
The classes created are col-md-4 and col-md-8 ie it seems to default to md as the breakpoint for the columns.
I know this is a bit obscure but does anyone have any idea how to do what I want?
AFAICT that's currently not supported, meaning you can only generate the default mb breakpoint ones, or specify breakpoints yourself.
You can open an issue over at GitHub for a feature request. As a workaround you could extend the plugin'S form helper and overwrite FormHelper::_gridClass() to modify the generated classlist, something along the lines of this, which would remove the default breakpoint from the generated class string:
namespace App\View\Helper;
class FormHelper extends \BootstrapUI\View\Helper\FormHelper
{
protected function _gridClass(string $position, bool $offset = false): string
{
return str_replace('-md', '', parent::_gridClass($position, $offset));
}
}
public function initialize(): void
{
parent::initialize();
$this->initializeUI();
$this->helpers['Form'] = [
'className' => \App\View\Helper\FormHelper::class
];
}
See also https://book.cakephp.org/4/en/views/helpers.html#creating-helpers
From time to time I need a non-breaking space in my Flutter Text widgets, e.g. a "Show more" link or a number with unit like "50 km/h".
The following code works fine but it looks overly complicated:
const int $nbsp = 0x00A0; // from https://pub.dev/packages/charcode
print('Hello${String.fromCharCode($nbsp)}World'); // --> prints "Hello World", does not break
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^ :/
I'm curious if there is a shorter way to use an integer constant from the charcode package in my interpolated string?
The easy way to do it is using escape combination [\u{00A0}]:
Text('Hello\u{00A0}world');
The best solution I have come up with is creating a String extension method.
// string_extension.dart
const int $nbsp = 0x00A0;
extension StringExtension on String {
String get nonBreaking => replaceAll(' ', String.fromCharCode($nbsp));
}
Usage example:
// import 'string_extension.dart';
Text('Hello World'.nonBreaking)
I have an input address field with a custom form validation. I would like to disable only the leading space when user starts typing some text
I have checked this post however, this approach disables white space completely
I have also tried using .trim() method along with .replace(/(^\s*)|(\s*$)/gi, "") still didn't work
Here is how it looks when I have leading whitespace.
Having leading whitespace doesn't let form validation error message to be displayed
Please Note my component is a child component and I am looking for a solution which can be implemented within my component.
Need some help
Tried this approach but it disables all spaces by default
<input
v-on:keydown='key'
class="input search-city"
type="text"
placeholder="Street address or zip code"
v-model="search_string"
/>
<script>
methods: {
key: function(event){
if(event.keyCode === 32){
event.preventDefault();
}
}
}
</script>
need to disable in the input so that user's first input can be a
character.
You can use custom directives.
Put this code in the file where you initiate vue
Vue.directive('disable-leading-space', { // you can rename it to your liking
update (el) {
// using regex to only remove spaces at the beginning
el.value = el.value.replace(/^\s+/g, ""); // or you can use your own preferred way to remove leading spaces
el.dispatchEvent(new Event('input'))
}
})
and then you can use the directive like this
<input v-disable-leading-space v-model="myText">
Using directive like this makes the code to be reusable in all your vue components.
Both the .trim() method and .replace(/(^\s*)|(\s*$)/gi, "") will remove leading and trailing space from your string.
To remove just the leading white-space use .replace(/^\s*/, "")
RegEx Explanation:
^\s* is any repeated (*) white space (\s) following the start (^) of the input.
\s*$ is any repeated (*) white space (\s) preceeding the end ($) of the input.
(^\s*)|(\s*$) is either of the above (| = OR)
the /g option is "global", so it will replace multiple occurrences of the same match (not required in this case, since we are already using \s* to match repeated consecutive whitespace characters)
the /i option means case-insensitive match, which is not required in this case.
Alternatively, try:
<input v-model="search_string" #keydown.space="preventLeadingSpace"/>
methods: {
preventLeadingSpace(e) {
// only prevent the keypress if the value is blank
if (!e.target.value) e.preventDefault();
// otherwise, if the leading character is a space, remove all leading white-space
else if (e.target.value[0]==' ') e.target.value = e.target.value.replace(/^\s*/, "");
},
}
Another much simpler solution:
<input v-model.trim="search_string" .....
I'm new to AG-Grid, so forgive me if this is a dumb question. We're using the OSS version of Ag-Grid in an Angular 5 application. I have a column where I am combining two sets of summary data and showing them. I would like to have a line-break between the two pieces of text.
Right now it's doing this:
"Summary One Summary Two"
I want it to do this:
"Summary One
Summary Two"
So far I've tried and HTML break tag, \r\n and just \n and nothing has worked. Is this possible to do?
Thanks,
James
You can use cellRenderer to achieve this.
Have a look at below colDef.
{
headerName: "Custom column",
cellRenderer: function(param){
return param.data.col1 + '<br/>' + param.data.col2;
}
}
You might need to set rowHeight in gridOptions as well.
Live example: Plunk
I have an even simpler solution without cell renderer. By the way I am using the ag-theme-balham theme. Simply set the cellStyle to white-space pre and you are able to use \n to insert a new line.
columnDefs()
...
valueGetter: ({ data }) => 'first value\nsecond value',
cellStyle: { 'white-space': 'pre' }