How do I prevent the next text block to inherit the same styles as the first one? If I add an heading and then press enter I would like it to be a paragraph on the next line, and not another heading.
You can use onKeyDown to detect when you press Enter, use Transforms or Editor API to insert new node with desired styling.
Refer:
https://docs.slatejs.org/api/transforms#transforms.insertnodes-editor-editor-nodes-node-or-node-options
https://docs.slatejs.org/api/nodes/editor#editor.insertnode-editor-editor-node-node-greater-than-void
You can have a custom plugin like this for the editor
const { insertBreak } = editor
editor.insertBreak = () => {
const { selection } = editor
if (selection) {
const [title] = Editor.nodes(editor, {
match: n =>
!Editor.isEditor(n) &&
Element.isElement(n) &&
(n.type === 'title')
})
if(title){
Transforms.insertNodes(editor, {
children: [{text: ""}],
type: 'paragraph'
})
return
}
}
insertBreak()
}
Related
I am having a TextField which allows the user to enter time and I have used RegValidator to validate. Currently, I need to fill the particular position with "0" as soon as the user clicks on backspace. Following is the code:
TextField {
id:textField
text:"11:11:11"
width:200
height:80
font.pointSize: 15
color:"white"
inputMask: "99:99:99"
validator: RegExpValidator { regExp: /^([0-1\s]?[0-9\s]|2[0-3\s]):([0-5\s][0-9\s]):([0-5\s][0-9\s])$ / }
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
inputMethodHints: Qt.ImhDigitsOnly
}
when user clicks on backspace
you mean just hitting the backspace key? Then it would be something like this :
TextField {
..
Keys.onBackPressed: text = "00:00:00"
}
EDIT
in order to reset just one of the numbers where the cursor is, you could do something like the following. I did not test it and maybe some of the indices are wrong, but you get the idea
TextField {
..
Keys.onBackPressed: {
var index = cursorPosition
var char = text.charAt(index)
if(char != ":"){
text = text.substr(0, index) + "0"+ text.substr(index);
}
}
}
http://doc.qt.io/qt-5/qml-qtquick-controls-textfield.html#cursorPosition-prop
In practice you can use displayText porperty of TextInput, like this:
TextInput {
id: textInput
inputMask: "00:00:00;0"
onDisplayTextChanged: {
// when user backspacing or deleting some character,
// this property become as visible value: "03:01:35"
// but text property has value: "03:1:35"
console.log(displayText);
}
}
I have been following the tutorial at ionic2 SearchBar to work on the filter functionality.
The question is, I am not able to figure out how to get onCancel and onClear to work.
Steps:
1) Enter some keywords in SearchBar. It calls the onInput event and I get the value from searchItem.target.value unlike in tutorial which just uses searchItem.value
2) Now i try to click on clear "x" or Cancel button and it calls the onClear/onCancel event which is immediately followed by onInput event. And during this call, it does not find the searchItem.target.value and results in undefined due to which it breaks the functionality.
Can anyone provide more in depth details on how this works?
i fixed it in tutorial sample for ionic2 by stopping onClear event propagation
import {Component} from '#angular/core';
#Component({
selector: 'my-search',
template: '<ion-toolbar primary><ion-searchbar (input)="onInput($event)" (ionClear)="onClear($event)"></ion-searchbar></ion-toolbar><ion-content><ion-list><ion-item *ngFor="let item of items">{{ item }}</ion-item></ion-list></ion-content>'
})
export class HomePage {
items = [];
constructor() {
this.initializeItems();
}
initializeItems() {
this.items = [
'Angular 1.x',
'Angular 2',
'ReactJS',
'EmberJS',
'Meteor',
'Typescript',
'Dart',
'CoffeeScript'
];
}
onClear(ev)
{
this.initializeItems();
ev.stopPropagation();
}
onInput(ev) {
// Reset items back to all of the items
this.initializeItems();
// set val to the value of the searchbar
var val = ev.target.value;
// if the value is an empty string don't filter the items
if (val && val.trim() != '') {
this.items = this.items.filter((item) => {
return (item.toLowerCase().indexOf(val.toLowerCase()) > -1);
})
}
}
}
I have used SegmentedControl in my application and given two options in that . I want to show two separate list according to selection of options that means if I select first option , it should show respective list of items and if I select second option , it should show the other respective list of items.
I want to show some data from database in ListView if I select option first and some other data in listView if I select second option.
Please someone tell me how should I do this ?
There is two way to achieve this..
1)Use single listview and change datamodel according to selected segment
2)Use diff listview and visible/invisible particular listview according to selected segment..
Here sample code of second way.
SegmentedControl {
id: segmented1
Option {
id: option1
text: "Option 1"
value: "option1"
selected: true
}
Option {
id: option2
text: "Option 2"
value: "option2"
}
onSelectedIndexChanged: {
var value = segmented1.selectedValue
console.debug("Selected value: " + value);
if (value == "option1") {
listview1.visible = true;
listview2.visible = false;
} else if (value == "option2") {
listview1.visible = false;
listview2.visible = true;
}
}
}
I have a kendo Treeview bound to a remote hierarchical datasource(JSON file).
I want to add sprites next to each one of the nodes according to what the node is.If the node doesn't have children then I want it to have the "file" sprite,if the node has children I want it to have the "folder" sprite.(The sprites are provided from kendo,the ones that are on the demos)
I'm a bit confused with the way templates work,can I alter the sprite for each of the nodes dynamically with the template?Any good example and a bit of explanation to get me going would help a lot.
Thx
In the following code what I do is define a template that checks if the node being rendered has items (subnodes) or not. If it has, it displays an icon from default sprite file (k-i-plus) otherwise it shows a different icon (k-i-refresh).
function loadMore() {
var uuid = $(this).data("uid");
var node = tree.findByUid(uuid);
tree.insertBefore(content, node);
tree.remove(node);
tree.expand(".k-item");
addLoadMore(".k-i-refresh");
}
function addLoadMore(clss) {
$(clss, tree.element).closest(".k-item").on("click", loadMore);
}
var content = [
{
text :"node1",
items:[
{ text:"node1.1" },
{ text:"node1.2" },
{ text :"node1.3",
items:[
{ text:"node1.3.1" },
{ text:"node1.3.2" },
{ text:"node1.3.3" },
{ text:"node1.3.4" }
] },
{ text:"node1.4" }
]
}
];
var tree = $("#tree").kendoTreeView({
dataSource:content,
template :"<span class='k-icon #= item.items ? 'k-i-plus' : 'k-i-refresh' #'></span>#= item.text #"
}).data("kendoTreeView");
tree.expand(".k-item");
addLoadMore(".k-i-refresh");
What you would need to do if replace k-i-plus by the CSS class name that defines the folder and change k-i-refresh by the CSS class name for the file.
If you need information on writing template there is a pretty good documentation in here.
I know I am 3+ years late for this. But in case anyone run into this same question. Here is how I achieved it:
schema: {
model: {
children: "folder",
hasChildren: function (node) {
var hasChildren = (node.folder && node.folder.length > 0);
if (hasChildren === true) {
node.spriteCssClass = "folder";
} else {
node.spriteCssClass = "html";
}
return hasChildren;
}
}
}
Just asked a question on regular expression here, basically we need to give an option to people to select some part of text which will be hidden with a MORE button on flash front end, and when some one will click on MORE it will expand it. here is sample text in tinyMCE
some text <start> some inner test </end>
so here is the regular expression to catch this start and end text,
<start>(((?!<(?:\/end|start)>).)+)<\/end>
the above expression will be used to strip this SOME INNER TEST and we will convert this to FLASH friendly MORE button.
My question is, Is there any way to highlight the text inside start & end tags on the fly (while editing) so people will know which part will be hidden for MORE button
Okay guys pat my shoulder on this :D If you don't know what are the code below then learn the basic of TinyMCE initializing. I have done this on jQuery version.
Here is my solution
var highlighter = 1; // A global variable, just to create a toggle for show/hide highlight
added three custom buttons
theme_advanced_buttons1: 'startmore, highlight, endmore, ...';
add setup: to initializing code.
// start highlight, end highlight and show highlight buttons
setup: function(ed) {
ed.addButton('startmore', {
title: 'Start More',
image: 'images/end_s.png',
onclick: function() {
ed.selection.setContent('[start]');
}
});
ed.addButton('endmore', {
title: 'End More',
image: 'images/end_m.png',
onclick: function() {
ed.selection.setContent('[end]');
if (1 == highlighter) {
highlight_tags();
}
}
});
ed.onInit.add(function(ed) {
highlight_tags();
});
ed.onSubmit.add(function(ed, e) {
var html_output = highlight_remove(tinyMCE.activeEditor.getContent());
tinyMCE.activeEditor.setContent(html_output);
});
ed.addButton('highlight', {
title: 'Show collapse selection',
image: 'images/end_highlight.png',
onclick: function() {
if (1 == highlighter) {
var html_output = highlight_remove(tinyMCE.activeEditor.getContent());
tinyMCE.activeEditor.setContent(html_output);
highlighter = 0;
} else {
highlight_tags();
highlighter = 1;
}
}
});
ed.onContextMenu.add(function(ed, e) {
tinymce.dom.Event.cancel(e);
if (1 == highlighter) {
highlight_tags();
}
});
}
onContextMenu is used to show / fix the highlight by right-clicking inside the editor.
There are issue to show highlight on they fly as as soon I setSontent() it moves the cursor at the start of first line.
Below are the regular expression functions to put the highlight around the [start][end] tags.
function highlight_tags() {
var html_output = tinyMCE.activeEditor.getContent();
html_output = highlight_remove(html_output);
var regex = new RegExp(/\[start\](((?!\[(?:end|start)\]).)+)\[end\]/ig);
html_output = html_output.replace(regex,'<span style="background-color:> yellow;">[start]$1[end]</span>');
tinyMCE.activeEditor.setContent(html_output);
}
function highlight_remove(html_output) {
var regex_fix = new RegExp(/<span\sstyle="background-color:\syellow;">(.+?)<\/span>/ig);
return html_output.replace(regex_fix,'$1');
}
Hmm so far it is serving me.
Just onSubmit I am trying to remove the highlight so it wont go in database and for a second I can see that highlight is removed. But it goes in database... so fixing this now.
Let me know if you guys didn't understand any part.
NOTE: If there is any typo in code that might be this stack overflow editor :).
NOTE: I know this code can be improved a lot, so enlighten me please.