I have looked around the Quill documentation, GitHub topics, and here in Stack Overflow and I have been unable to find a simple example of using the format attribute. I would like to limit my users so that they can only bold, italicize, underline, and hyperlink text.
From what I understand, this can be achieved with a format whitelist, but I have only been able to find examples regarding custom fonts or other more complex properties.
Thank you for your time!
I did some more digging around and found the answer. The following creates a Quill editor that allows only bold, italics, underline, and links. The list of allowed formats is just an array, and all omitted formats will not be allowed in the editor, so they won't show up if a user pastes text.
var toolbarOptions = [['bold', 'italic', 'underline'],['link'],['clean']];
var formatWhitelist = ['bold','italic','link'];
var quill = new Quill('#notification-message', {
scrollingContainer: 'true',
theme: 'snow',
formats: formatWhitelist,
modules: {
toolbar: toolbarOptions
}
});
Related
I was using min-[1000px]:bg-orange-400 and max-[1000px]:bg-orange-400. Somehow they suddenly stopped working and I got this in the terminal as tailwind intellisense's output:
The 'min-' and 'max-' variants are not supported with a 'screens' configuration containing mixed units.
tailwind config:
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx}"],
theme: {
extend: {
colors: {
brand: "#2E3192",
},
},
},
};
could not find the bug
I've never seen this min and max syntax you're using, but my advise would be to use the breakpoints tailwind provides out of the box or extending their breakpoints in the tailwind config.
In your case the next breakpoint tailwind defines would be lg (1024px).
So you could go with this: bg-orange-300 lg:bg-orange-400.
You can use arbitrary media queries as well, but I would only do that as a last resort, because it doesn't align with the overall design system then and you get into specificity troubles when you're using multiple of those on one element. In that case it would look like this: bg-orange-300 [#media(min-width:1000px)]:bg-orange-400
For the 2 panels in the AgentDesktopView, I'm trying to adjust the size of Panel 1.
I've tried:
flex.AgentDesktopView
.defaultProps
.splitterOptions
.initialFirstPanelSize = '250px'
and
flex.AgentDesktopView
.defaultProps
.splitterOptions
.minimumFirstPanelSize = '250px'
I've tried searching through docs and can't find much information around it.
Twilio developer evangelist here.
If you have a plugin you can put the code in, you can try this
flex.AgentDesktopView.defaultProps.splitterOptions = {
initialFirstPanelSize: "250px",
minimumFirstPanelSize: "250px",
//minimumSecondPanelSize: "xx%"
};
Either the theme or these component options can be used ie. if you're updating the config in the manager when you changed the options:
manager.updateConfig(appConfig);
Let me know if this helps at all!
I use asciidoctor in reactjs app and I want use highlight.js for source code selection, but attributes doesn't work.
By default, asciidoctor produces just the HTML for the Asciidoc source passed to it, not an entire page. If you want the headers and footers for the page, including the code require to fetch and run highlight.js, you need to add standalone: true to your processing options:
const converted = asciidoc.convert(file, {
standalone: true,
attributes: {
'source-highlighter': 'highlight.js',
'highlightjs-theme': 'dark',
}
})
See: https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/
and: https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/
Alternatively, you can add the code import highlight.js and ask it to highlight the HTML produced by asciidoctor.
I'm trying to increase the height of the line on the selected Pivot item link in Microsoft's Fluent UI using React.
Here's a screenshot for the purposes of clarification:
The orange arrow is pointing to the blue line of which I would like to increase the height.
I have tried setting the styles attribute of the Pivot component but thus far have been unsuccessful. Here's some code
const pivotStyles: Partial<IStyleSet<IPivotStyles>> = {
link: { ? },
linkContent: { ? }
};
<Pivot styles={pivotStyles} linkSize={PivotLinkSize.large}>
<PivotItem headerText="Zane"></PivotItem>
<PivotItem headerText="Kai"></PivotItem>
<PivotItem headerText="Jay"></PivotItem>
</Pivot>
I have experimented with different attributes of both link and linkContent but haven't found a way yet. I believe what I'm trying to do is manipulate the IStyle interface but I can't find details of the attributes of it. The link there is very vague. For example, what are all the available attributes of link, linkContent, etc.?
Any thoughts on this would be most appreciated!
Thank you.
Turns out I was on the right track and just needed the exact fields. Here's what ended up working:
const pivotStyles = {
linkIsSelected: {
selectors: {
':before': {
height: '6px', // was previously defaulted at 2px
}
}
}
};
I scoured about 4.24 million sites to find this answer but here are some of the most helpful in case they are of interest:
the actual source code of Pivot.styles.ts
the Microsoft Fluent UI Pivot Documentation
A deep examination of the classes using Chrome Dev Tools also helped. ;)
Here's a picture of the end result:
Got an issue, and need your advices
I just started writing an editor grid. (I will actually use this grid as a search filter editor, i.e. columns with criteria name, operators and values).
Now, for the value field, I want to have different edit controls for different rows. For instance, when a criteria type is string I want to display a text box, when it's date time, I want a datetime editor.
So the fact is, I need to control the "edit control creation/display" just before editing starts. and it should be different among rows. Unlike the examples I found which are fixed for the columns.
In order to implement this, can you guys please suggest the steps I need to do? I can probably figure out it if one of you can direct me a way.
Thanks and best regards
Actually you can easily accomplish this by dynamically returning different editors and renders depending on the column you're in. In your ColumnModel object you can define something like this below. Note that i'm getting a type property of each record to determine its type. I have an object containing all my different types of editors, and the same for renderers, and then based on the the type i dish out a different editor or renderer for that cell.
editors: { 'default': {xtype:'textfield'},
texttype: {xtype:'textfield'},
numbertype: {xtype:'numberfield'},
combotype: {xtype:'combo'}....... etc. }
getCellEditor: function(colIndex, rowIndex) {
var store = Ext.getCmp('mygrid').getStore();
var field = this.getDataIndex(colIndex);
var rec = store.getAt(rowIndex);
var type = rec.get('type');
if (type in this.editors) {
return this.editors[type];
} else {
return this.editors['default'];
}
},
In the configuration section of your editorgrid, you will need to define your custom editors:
{
xtype: 'editorgrid',
id : 'mygridID',
stripeRows: true,
...
...
,customEditors : {
//configs go here or pre-define the configs prior to this
'columnName1' : new Ext.grid.GridEditor(new Ext.form.Combobox(configObject)),
//configs go here or pre-define the configs prior to this
'columnName7' : new Ext.grid.GridEditor(new Ext.form.CheckBox(configObject))
}
}
use this grid config - in order to select whole rows:
selType: 'rowmodel'