Is there a way to include a "tab" structure in the formly json structure to build bootstrap-ui tabs easily? For example something kind of like this:
{
Tabs: [
{
heading: 'Tab 1',
fields: [
....
]
},
{
heading: 'Tab 2',
fields: [
....
]
},
]
}
Is there an easy easy to build this type of structure? Or should I do an ng-repeat on the tabs array with formly inside the ng-repeat? Or are their performance concerns with that or any other concerns?
I would recommend not putting the tabs in formly. Rather, put formly in tabs. If you're using angular-ui-bootstrap, it'd be structured something like this:
<tabset>
<tab>
<formly-form></formly-form>
</tab>
<tab>
<formly-form></formly-form>
</tab>
</tabset>
They can even share the same model. And you could do an ng-repeat on the tabs with an array of arrays of formly field configurations. If you like, you can request an actual example of this on the website repo
Related
Creating a custom color scheme for a template is very easy in Tailwind CSS. You just modify tailwind.config.js, add your custom color palate, and use it just like Tailwind's ordinary classes. For example bg-brand-500:
theme: {
extend: {
colors: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
}
}
}
Now I'm stuck at a way to make a multi-color template.
I'm sure you have all seen templates all over the web where you can choose red or blue for example and the entire template's color scheme changes.
How do you do that in Tailwind?
Update:
In other CSS schools, like SASS, you simply create another color variables file and dynamically load a different file using the regular <link href='/path/to/red/variables.css' />.
You can use CSS variables for that.
In your tailwind config, you create the brand colors as you did, but instead of hex color codes, you use for example 50: 'var(--brand-50)'. Then in your index.css you can add these variables to the base layer, like:
#layer base {
:root {
--brand-50: #B0ECEC;
}
.theme-red {
--brand-50: #BB0000;
}
}
Now, if you add the class .theme-red to your body, text-brand-50 will be red.
In this video of Tailwind labs it is fully explained. There is also explained how to deal with opacity, although since tailwind 3.1 there is an easier way of doing that.
Hope this helps.
You might use the tw-colors plugin.
Create your themes
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
light: {
brand: {
'50': '#B0ECEC',
'100': '#A0E8E8',
'200': '#7FE1E1',
'300': '#5ED9D9',
'400': '#3DD1D1',
'500': '#2CB9B9',
'600': '#218C8C',
'700': '#165E5E',
'800': '#0C3131',
'900': '#010404'
},
},
dark: {
brand: {
'50': '#321321',
'100': '#654654',
'200': '#987987',
'300': '#786541',
'400': '#aeeeee',
'500': '#786541',
'600': '#987987',
'700': '#165E5E',
'800': '#654654',
'900': '#321321'
},
}
})
],
};
Use your themes
<html class='theme-light'>
<div class="bg-brand-500">...</div>
</html>
You can then switch themes dynamically as you like, with a switch for example
My usage scenario is to have asciimath as the primary formula engine. However, for some cases I might need more powerful features which I can find only using TeX.
Is there a way to have different open/close clauses one for the regular ascii math (say ` ) and one for TeX using, say $( and )$ ?
So I want to have mix of ascii math and TeX formulae on the same page.
Sure, you can use both!
First simply configure both (assuming MathJax 3):
<script>
MathJax = {
loader: { load: ["input/asciimath", "[tex]/html"] },
tex: {
packages: { "[+]": ["html"] },
inlineMath: [
["$", "$"],
["\\(", "\\)"]
],
displayMath: [
["$$", "$$"],
["\\[", "\\]"]
]
},
asciimath: {
delimiters: [["`", "`"]]
}
};
</script>
Then use the delimiters to signal to MathJax if you want AsciiMath or Latex:
<div>
$$\sum_{n = 100}^{1000}\left(\frac{10\sqrt{n}}{n}\right)$$
</div>
<div>
`sum_(n = 100)^(1000)(frac(10sqrt(n))(n))`
</div>
Remember that AsciiMath requires you to determine whether you want display style or not for the entire document with setting displaystyle: false / true, you can't have both, side by side, as you can for Latex:
asciimath: {
displaystyle: true
}
Code sandbox: https://codesandbox.io/s/mathjax-3-0ve5d
I am using React-Admin and I need to use/create a component for cropping an image (profile image) and storing it as a base64-image.
I found #toast-ui/react-image-editor better than other libraries but I have a problem with that. In React-Admin when we use ImageInput like this:
<ImageInput multiple label="Gallery" source="gallery" accept="image/*">
<ImageField source="src" title="title" />
</ImageInput>
the data can be loaded from the source (in Edit mode) and it will be stored there, but when we use other components like what I have mentioned, I need to know how can I pass the data as a source to that. It doesn't matter for me to use this library or any others... but I need one with simple usage.
Actually, my issue is with connecting the new component to the model that react-admin use.
I have recently written such a component, you can find it under the following link:
EditableImageComponent.
I don't use #toast-ui/react-image-editor for this, like you do, but ReactImageCrop, maybe the component will help you anyway. At the moment I have some bugs in the code (after the image is loaded, the crop has to be changed once before it is applied), but otherwise it works quite well so far.
Edit: In order to use this component in your EditView, simply call it like every other Input Component (it is assumed, that your target is called "imagename")
<EditableImage source="imagename" {...props} label="User image (Use the upload button to edit)"/>
I have use #toast-ui/react-image-editor as my image editor. i use modal to edit images in gallery. My simple code using react and bootstrap.
first import react image editor.
import 'tui-image-editor/dist/tui-image-editor.css';
import ImageEditor from '#toast-ui/react-image-editor';
if you use class component add this line.
export default class Example extends Component {
editorRef = React.createRef();
}
or if you use funtional component add this line.
function Example() {
const editorRef = React.createRef();
}
then call react image editor in the component.
<ImageEditor
ref={this.editorRef}
includeUI={{
loadImage: {
path: imagePath,
name: imageName,
},
theme: myTheme,
menu: [
"filter",
"crop",
"flip",
"resize",
"rotate",
"text",
],
initMenu: "filter",
uiSize: {
width: "100%",
height: "600px",
},
menuBarPosition: "left",
}}
cssMaxHeight={500}
cssMaxWidth={700}
selectionStyle={{
cornerSize: 20,
rotatingPointOffset: 70,
}}
usageStatistics={false}
/>
So I am trying to build myself a blog, and I want a UI for me to update a blog instead messing with the HTML files every time.
I am planning to get the content (blog content containing pics and text) from the quill editor (which is a delta object) then store it into MongoDB.
Then when I need to display it, retrieve it from the DB then render it dynamically using quill-render (https://www.npmjs.com/package/quill-render).
The question is, since I don't know how quill is designed to work so can someone tell me if this is the proper way to do it? Or is it better to let quill somehow export the content to an HTML file, store it then simply redirect to it? Thanks in advance.
I strongly recommend you to store and manipulate the Delta operations. We heavily rely on quill on Wisembly Jam and we manipulate live operations with ShareDB and store them more persistently inside PostgreSQL.
Simply use quill.getContents() to retrieve the ops (this is an array of operations, a simple JSON really easy to store).
Then, when you load your page, retrieve this JSON object from your DB, and use quill.setContents() to load it properly.
This is:
1) smaller to store than HTML
2) future proof (if Quill updates and changes things, it would still properly implement Delta format, not sure it would handle HTML the same way)
The quill documentation recommend's you to manipulate de editor data in the Delta format making it simple to save all your content in Json but, in the other hand you will have to depend on an thirty-party library to render it as HTML.
To use in Delta format, you will have to use setContents() and getContents(). Saving in your DataBase as Delta (See the Snippet in FullScreen for better visualization):
let quillEditor = new Quill('#editor', {
theme: 'snow'
});
quillEditor.on('text-change', function(){
console.clear();
console.log(quillEditor.getContents().ops);
});
//Retrieve your json from MongoDB
let myDocument = [{
"insert": "Hello "
},
{
"attributes": {
"bold": true
},
"insert": "World!"
},
{
"insert": "\n"
}
];
quillEditor.setContents(myDocument, );
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="editor"></div>
Another approuch that I've used, is to retrieve the HTML directly from the editor with QuillInstance.root.innerHTML, that will allow you to save in your DataBase a direct HTML file, that you can render later:
let quillEditor = new Quill('#editor', {
theme: 'snow'
});
quillEditor.on('text-change', function(){
console.clear();
console.log(quillEditor.root.innerHTML);
});
//Retrieve your json from MongoDB
let myDocument = [{
"insert": "Hello "
},
{
"attributes": {
"bold": true
},
"insert": "World!"
},
{
"insert": "\n"
}
];
quillEditor.setContents(myDocument);
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.snow.css">
<div id="editor"></div>
I can't make inline editing of rich text save back to the db in some cases.
Please bear with me, there will be some code pasted here, as it is the only way I can describe what I'm doing.
I have two kinds of custom widgets in my project - the ones where there is only one instance of the widget, typically defined like this in the lib\modules directory:
article-widgets
- views
- - widget.html
- index.js
And then the kind of widgets that are repeated, and can be used in several places around the site, typically defined like this:
employees
- index.js
employees-widgets
- views
- - widget.html
This one I can make work:
In the first kind I define a rich text are in article-widgets\index.js
{
name: 'ingress',
label: 'Ingress',
type: 'area',
required: true,
options: {
widgets: {
'apostrophe-rich-text': {
toolbar: ['Bold', 'Italic', 'Link', 'Unlink' ]
}
}
}
}
And then in article-widgets\views\widget.html
{{ apos.singleton(data.widget, 'ingress', 'apostrophe-rich-text',{
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
}) }}
This one is not working for me:
In the second type - I can edit inline, but changes are not saved.
In employees\index.js
{
name: 'body',
label: 'Beskrivelse',
type: 'area',
options: {
widgets: {
'apostrophe-rich-text': {
toolbar: ['Bold', 'Italic', 'Link', 'Unlink']
}
}
}
}
And then in employees-widgets\views\widget.html
{% for piece in data.widget._pieces %}
<div>
{{
apos.singleton(piece, 'body', 'apostrophe-rich-text', {
toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
})
}}
</div>
{% endfor %}
I can't understand why the later is not working. Am I doing something wrong - or is inline editing of repeated items not possible?
One of Apostrophe's subtleties is that any property beginning with an underscore (_) (except _id) is not actually part of the parent object and changes don't go back to the database
These are properties attached for convenience by Apostrophe somewhere in the retrieval process.
I don't thinkg modifying the piece from the widget is something baked in by default (typically piece-widgets are single-serving views for content) but it is possible to set up custom backend functionality.
Not a total 1:1 of your issue but if you look at the comments and comments-widgets module in this (rough) example, you can see we're modifying the piece's content via the widget.
https://github.com/stuartromanek/apostrophe-comment-system/tree/master/lib/modules