I'm trying to create a list of paragraph styles in TinyMCE that apply to paragraphs. A paragraph should only have one of the styles applied. So a paragraph can be either normal, lead or small. It should not be more than one at once.
This is what I've tried:
formats: {
"p-normal": { block: "p", classes: "govuk-body" },
"p-lead": { block: "p", classes: "govuk-body-l" },
"p-small": { block: "p", classes: "govuk-body-s" }
},
style_formats: [
{ title: "Paragraph styles", items: [
{ title: "Normal paragraph", format: "p-normal" },
{ title: "Lead paragraph", format: "p-lead" },
{ title: "Small paragraph", format: "p-small" }
] }
]
If I make a paragraph normal and then change it to a lead paragraph it ends up looking like this:
<p class="govuk-body p-lead">Test</p>
And in the format dropdown both styles are ticked. Can I make it so only one format can be active and previously applied formats are removed?
I've found a way to do this by using an event handler to act before the format is toggled and remove all formats applied where the cursor is.
Here is the event handler:
init_instance_callback: function(editor) {
editor.on('BeforeExecCommand', function (e) {
if (e.command === "mceToggleFormat") {
var formats = this.formatter.matchAll(["p-normal", "p-lead", "p-small"]);
for (var i = 0; i < formats.length; i++) {
this.formatter.remove(formats[i]);
}
}
});
}
You need to check for all the formats that are exclusive and then remove any that are applied. If you had more than one group of exclusive formats you'd need to check the group based on which format was being applied.
Related
I would like to modify MUI Chip color and background color "globally" but using different colors than the ones defined in the same theme for severity.
This is what actually looks like (only by using theme defined severity colors):
This is how I want it to look:
It's actually possible to achieve that by using createTheme module or I need to take a different approach?
This is my attempt:
export const defaultTheme = createTheme(
{
palette: {
// Palette definitions
},
components: {
MuiChip: {
styleOverrides: {
root: {
severity: {
success: {
color: colors.success.main,
backgroundColor: colors.success.light,
},
// And so on with the remaining severity levels
},
},
},
},
},
},
);
If you want to modify the background color in the theme, you can add a name to the theme, I provide you with an example and let you try.
export const yourTheme = createTheme({
palette: {
successChip: {
contrastText: '#5ccc09',
main: '#eaf9e0',
},
rejectChip: {
contrastText: '#ff595d',
main: '#ffe9ea',
}
}
});
<Chip label="Professional" color="successChip"/>
<Chip label="Rejected" color="rejectChip"/>
And then you will get what you want it to look like.
I'm working on a custom language extension and I'm having issues with how to show functions for a variable.
I'm importing my language in the form of json, so i've created a typescript-file that i import into my extensions.ts:
export interface CustomIntellisense {
text: string;
help: string;
}
const data = [{
"text": "Void.String",
"help": "<h1>String String()</h1><p>Default constructor.<code>String something;</code></p>"
},
{
"text": "String.toInteger",
"help": "<h1>Integer toInteger()</h1><p>Converts a String to its numeric representation."
},
{
"text": "Void.Integer",
"help": "<h1>Integer Integer()</h1><p>Default constructor.</p>"
}];
export let json: CustomIntellisense[] = data;
My idea here is that the elements containing "Void" in text gets created as a variable, while the other element gets added as a method.
const provider1 = vscode.languages.registerCompletionItemProvider({ language: 'myLanguage', scheme: 'file' }, {
provideCompletionItems(document: vscode.TextDocument, position: vscode.Position, token: vscode.CancellationToken, context: vscode.CompletionContext) {
let items: vscode.CompletionItem[] = [];
let re = /\"/gi;
json.forEach(element => {
const item = new vscode.CompletionItem(element.text.split('.')[1]);
item.insertText = new vscode.SnippetString(element.help);
const markdownDocumentation = new vscode.MarkdownString();
markdownDocumentation.supportHtml = true;
markdownDocumentation.appendMarkdown(element.help);
item.documentation = markdownDocumentation;
if (element.text.includes('Void.')) { //If text includes Void this should be a variable
item.kind = vscode.CompletionItemKind.Variable;
}
else {
item.kind = vscode.CompletionItemKind.Method;
}
items.push(item);
});
return items;
}
});
The items gets added to the view, but I can't figure out how to 'filter' what is shown.
The official example on how to achieve this can be found here:
https://github.com/microsoft/vscode-extension-samples/blob/main/completions-sample/src/extension.ts
But this only explains how to filter based on the text/name, and i cant filter this specifically for each variableName i use.. If i somehow could detect what kind of Variable i'm working on I could possibly create a function that fetches if its a String/Int, then parse through my file and add methods in my 2nd CompletionItemProvider. But I havent found any good way of deciding the type of variable..
What i want is this:
If i click ctrl+space i want toInteger() to be the only thing that shows up, but instead it lists up everything all the time:
Anyone have a clue how to achieve this?
After a lot of searches in SO without any particular solution, I am compelled to ask this question.
What I want is to hide a row group icon on a single group row. Like in the below picture I have a group row that has only one record, which is already shown in the top row. I want to hide that collapse icon on that single record. Only collapse/expand icon shown when group rows are more than one.
For reference see AG-Grid Master-Detail Section, here they specify which rows to expand. Same functionality I needed here.
I'm using the below versions of AG-Grid Angular (v9)
"#ag-grid-community/core": "^25.3.0",
"#ag-grid-enterprise/row-grouping": "^26.0.0",
"#ag-grid-enterprise/server-side-row-model": "^25.3.0",
"ag-grid-angular": "^25.3.0",
"ag-grid-community": "^25.3.0",
Here is my code:
this.rowModelType = 'serverSide';
this.serverSideStoreType = 'partial';
this.cacheBlockSize = 20;
this.gridOptions = {
rowData: this.loanlist,
columnDefs: this.generateColumns(),
getNodeChildDetails: function(rowItem) {
if (rowItem.orderCount > 1) {
return {
expanded: true
}
} else {
return null;
}
}
}
The issue is the getNodeChildDetails is not accessible. Browser console showing me the below warning and my above code is not working.
This is simple to achieve using a cellRendererSelector on the autoGroupColumnDef. You can specify whether to show the default agGroupCellRenderer or simply return another renderer (or, just return null):
this.autoGroupColumnDef = {
cellRendererSelector: (params) => {
if (params.value == 'United States') {
return null;
} else {
return {
component: 'agGroupCellRenderer',
};
}
},
};
In the example below, we are disabling the row group expand functionality on the United States row.
See this implemented in the following plunkr.
The solution isn't that hard - but could be tough, agreed (one day faced with the same case)
So - the answer is custom cell renderer.
It would look a little bit different (separate column for collapse\expande action) - but you would get all control of it.
Custom rendeder component for this action would look like :
template: `
<em
[ngClass]="{'icon-arrow-down':params.node.expanded, 'icon-arrow-right': !params.node.expanded}"
*ngIf="yourFunctionHere()"
(click)="toggleClick()">
</em>`,
export class MasterDetailActionComponent implements ICellRendererAngularComp {
private params: any;
agInit(params: any): void {
this.params = params;
}
public toggleClick(): void {
this.params.node.setExpanded(!this.params.node.expanded);
}
public yourFunctionHere(): boolean {
// so here you are able to access grid api via params.api
// but anyway params.node - would give you everything related to row also
}
refresh(): boolean {
return false;
}
}
in [ngClass] - you are able to handle the visual part (icons) - modify\customize
and don't forget to add this component in the gridOptions:
frameworkComponents: {
'masterDetailActionCellRenderer': MasterDetailActionComponent,
}
and include this column in your columnDef:
columnDefs: [
headerName: "",
width: 75,
field: "expand",
cellRenderer: "masterDetailActionCellRenderer",
filter: false,
resizable: true,
suppressMenu: true,
sortable: false,
suppressMovable: false,
lockVisible: true,
getQuickFilterText: (params) => { return '' }
]
So I have an editable line of text on my website. Whenever the text is changed and is above a certain length, I truncate the text.
Simplified jsfiddle here - http://jsfiddle.net/3kwCr/1/
On subsequent clicks on the text to edit, the truncated value with ellipsis is picked up. How do I get jEditable to pick up the actual value which is present as an attribute in the div?
data: function() { $('.editable-value').attr('value') }
will not work as I have several of these editable lines of text
I need something like
data: function() { this.attr('value') }
where this would the div object to which .editable has been applied to.
Just wrap this into jQuery object so you can use jQuery methods on it. Below is updated code. I also updated the example jsFiddle.
$('.editable').editable(function(value, settings) {
$(this).attr('value', value);
if (value.length > 10) {
return(value.slice(0,10)) + '...';
} else {
return(value);
}
}, {
data : function(value) { return($(this).attr('value')); },
type : 'text',
submit : 'OK'
});
I have an html form in which the fields are extremely scattered. The page has been created using html table - rowspan and colspan combinations.
I need to convert this form to ExtJS and display it in a window.
After carrying out some research, I feel that table layout could be best choice for positioning the fields. But there are few issues which I have been facing as following:
If I give rowspan or colspan as 2 or more, then also the fields don't increase in size to occupy the availabe space and remain confined to single column.
If I resize the window, then the table doesn't resize (though, the form does as the tbar present at the top expand to occupy the complete space).
I have used the layout as 'fit' for window and layout as 'table' for the form.
I have also tried using 'anchor' layout for form and then having a fieldset with table layout, but the positioning didn't work.
Could someone please throw some light on this. Following is a basic code snippet I am using:
var form = Ext.create('Ext.form.Panel', {
url:'voyage_berth_monitoring.php',
fieldDefaults: {
labelAlign: 'right'
},
layout:{
type:'table',
columns:3
},
defaults:{
anchor:'100%'
},
tbar:[
{
xtype:'button',
text:'Clear'
},
{
xtype:'button',
text:'Delete'
},
{
xtype:'tbfill'
},
{
xtype:'button',
text:'Save'
},
{
xtype:'button',
text:'Exit'
}
],
items: [
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield',
colspan:2
},
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield'
},
{
fieldLabel:'item',
xtype:'textfield'
}
]
});
var win = Ext.create('Ext.window.Window', {
title: 'Window',
closable: true,
closeAction:'hide',
minimizable:true,
maximizable:true,
height:350,
width:750,
layout:'fit',
autoScroll:true,
items: form
});
win.show();
Basicly i had the same problem with the layout table, couldn't find any way to span my displayfields to the length of the td, and also the same issue with the 2 columns field.
The solution i prefered was to extend the table layout and give it that flexibility
Ext.define('Extended.TableLayout', {
alias:'layout.extendedTable',
extend: 'Ext.layout.container.Table',
type: 'extendedTable',
columns: 2,
rightMargin: 20,
tableAttrs:{
width: '100%'
},
tdAttrs:{
width:'50%'
},
itemCls:'x-table-cell',
renderItems: function(items) {
var totalWidth = this.getLayoutTargetSize().width,
len = items.length,
i, item, colNr;
for (i = 0; i < len; i++) {
item = items[i];
colNr = this.columns;
if ((colNr > 1) && Ext.isNumber(item.colspan)) {
colNr = colNr - item.colspan + 1;
}
item.width = Math.floor(totalWidth/colNr) - this.rightMargin;
}
this.callParent(arguments);
}
});
Using the extendedTable layout i get the desired look
One alternative it to serialize your HTML form data as JSON and load it into an EXT store. Once it's in a store, EXT will happily do whatever you want with it.