Develop Reference

Load dynamic font in react native CLI

Can you please help me with how we can load dynamically fonts in react native ClI. We have a theme drop down. Based on user selection will fetch the font file from s3 bucket url. But i didn't find a way to load fonts dynamically.
I have seen font-face css interface but we can use only for web app. Please find the below link.
https://developer.mozilla.org/en-US/docs/Web/API/FontFace
react-native-dynamic-font package was there but having issues with iOS. https://www.npmjs.com/package/react-native-dynamic-font
Can any one help me how we can load font dynamically

Svelte FilePond Image Preview only working on old uploads

I have an old project that I'm currently working on updating to a new version of Svelte, and have loaded up my old svelte-filepond component that all appears to work fine, apart from previewing recent images.
If I load up an old image to edit, it will preview the image fine... if I load up a new image to edit, it will not preview the image at all.
Both the old image and the new image comes from an AWS S3 Storage, Both Images load fine and have full access to get/put/update/delete. Both images require server={} configuration to preload into filepond using filepond's load: as follows.
load: (source, load) => {
const myRequest = new Request(source);
fetch(myRequest).then(response => {
response.blob()
.then(myBlob => {
load(myBlob)}
);
});
},
I have console logged out every single part of my filepond system from the moment the files enter the component until the filepond component is live and displaying the filename, filesize.
I end up with a perfect blob in both filepond components at the end, but one is displaying an image, and the other one is not. The only difference between the two images is that one is old, uploaded last year, and the other is new, uploaded recently.
Old Image
New Image
Does anyone know What could possible cause this kind of situation?

How do I include image in BootstrapVue carousel?

I am trying to add an image to the img-src="" attribute of b-carousel in BoostrapVue. The image is currently saved in the asset folder.
<b-carousel-slide img-src="../assets/life.jpg">
<h1>Hello world!</h1>
</b-carousel-slide>
I have added
Find below images of the result:
I am certain the images are correctly saved in the right location:

If using a loader with webpack (i.e. vue-loader, url-loader, etc), you need to ensure that the loader knows that img-src accepts a URL.
See the docs on information on how to tell the loaders to handle URL props on custom components: https://bootstrap-vue.js.org/docs/reference/images (specifically Vue Loader transformAssetUrls)

Ckeditor5 + Angular: how to display video added via editor

I want to use CKEditor5 in my Angular7 application and faced the following problem:
when I add a video from YouTube, using 'mediaEmbed' option in editor config, editor returns html like this:
<figure class="media"><oembed url="https://www.youtube.com/watch?v=6DDqkpR65Ak"></oembed></figure>
The browser shows an error because it does not have information about the tag oembed.
The documentation suggests using third-party services to convert this tag, but I think this is not a good idea.
How can I solve this problem?
Perhaps I should create a directive with the same name as this tag?
Or maybe create a custom button to insert a video - is it possible?
Perhaps there is a similar editor in which video insertion works out of the box and which supports the balloon menu?

I solved it using the following option:
htmlEditorConfig = {
mediaEmbed: {
previewsInData: true
}
}
And then in my HTML:
<ckeditor ... [config]="htmlEditorConfig"></ckeditor>
If you are using Angular, you will need to sanitize the string for Angular to display the media, with someting like:
import { DomSanitizer } from '#angular/platform-browser';
...
contructor(private sanitizer: DomSanitizer) {}
...
this.sanitizer.bypassSecurityTrustHtml(str);
This solution will only work with some providers (YouTube, Vimeo...), you'll find the full list in the docs.
==============================
According to the docs, here is how the previewsInData option works:
Including previews in data
Optionally, by setting mediaEmbed.previewsInData to true you can configure the media embed feature to output media in the same way they look in the editor. So if the media element is “previewable”, the media preview (HTML) is saved to the database:
<figure class="media">
<div data-oembed-url="https://media-url">
<iframe src="https://media-preview-url"></iframe>
</div>
</figure>
Currently, the preview is only available for content providers for which CKEditor 5 can predict the code: YouTube, Vimeo, Dailymotion, Spotify, etc. For other providers like Twitter or Instagram the editor cannot produce an code and it does not, so far, allow retrieving this code from an external oEmbed service. Therefore, for non-previewable media it produces the default semantic output:
<figure class="media">
<oembed url="https://media-url"></oembed>
</figure>
This means that, unless you limited the list of providers to only those which are previewable, you need to make sure that the media are displayed on your website.

In CKEditor5 it quite easy now to integrate the embed media feature by just :
install the media-embed package , npm install --save #ckeditor/ckeditor5-media-embed
add the 'media embed' to your toolbar config
As #jbgt mentioned previobale providers are limited, so maybe you need to use external libraries like iframely: https://iframely.com/docs/ckeditor as they recommend in the doc .. I hope they add an easier way to fix this..

Working with jsPDF and html2canvas in a Vuejs project (without webpack)

I am working on a functionality in a Vuejs project, by which by clicking on a button, the user can export a pdf which will contain certain Vuejs components. All went smooth up to a point. I npm installed the 2 packages, jsPDF and html2canvas (which is a dependency).
I added jsPDF to the component like so:
import jsPDF from 'jspdf'
The function that gets triggered on button click is:
exportpdf() {
let pdf = new jsPDF('p', 'px', 'a4')
pdf.addHTML(this.$refs.userinfo, function() {
pdf.save('web.pdf')
})
}
When the function was triggered on button click, I got the following error:
Uncaught (in promise) Error: You need either https://github.com/niklasvh/html2canvas or https://github.com/cburgmer/rasterizeHTML.js...
And so, I got to this issue here:
Using jsPDF and html2canvas with es6 which explains that jsPDF requires html2canvas to be on the window. But this is just a huge no no in Vuejs (see article here):
https://vuejsdevelopers.com/2017/04/22/vue-js-libraries-plugins/
So, inspired by this article, I added the html2canvas package to main.js:
import html2canvas from 'html2canvas'
...
Vue.use(html2canvas)
Now, when the function is triggered I get this:
Uncaught (in promise) Provided element is not within a Document
I also tried with document.querySelector('#userinfo') - same result. So now I consider myself officially stuck - any help is greatly appreciated.

html2canvas is not a Vue plugin, so you cannot call use(...) on it.
You can make your own plugin though.
import html2canvas from 'html2canvas'
let MyPlugin = {
install(Vue, options) {
window.html2canvas = html2canvas
}
}
// ...
Vue.use(MyPlugin)
I am not really sure why you are opposed to window.html2canvas = html2canvas if another library needs it.