Integrating the Toast UI Image Editor in project. Finding that when using it it is sending a request to '/none' which I am trying to get rid of.
When loading the image we are using the loadImage path to pass in image via data:image/png;base64 and somehow it is still requesting a '/none'. I also explored using the loadImageFromURL and seeing it that way but it is still making that request.
I am also curious if this is not related to the image but might be from the Image Editor in general. I am implementing it using #toast-ui/react-image-editor with a useRef.
Load Image passed to ImageEditor:
`
loadImage: {
path: props.image,
name: 'SampleImage',
},
`
This implementation WORKS, but ideally we do not want the extra call to '/none'.
Related
im trying to add skeleton in my react project i render a gallery images from backend those images are different size (1mb,0.5mb) so the skeleton closed earler in my website thats a problem
and other size photos still not come to front but skeletton stoped to loading skeleton loading
i tried to load gallery images those ah bigger size so i add skeleton but there is some images is low size so skelton stoped after loading small size images
You can create an image component and then use a skeleton inside it.
In this case, if the image is not loaded, the component shows a skeleton. Otherwise, it shows the image. Then you have to map through your images and render the image component.
imageIds.map(id => {
return (
<ImageContainer imageId={id} />
)
})
I assumed you have an API call to get images and a list of image IDs. you can call the API inside the component and check if it is loading, use the skeleton. Otherwise, show the image.
You can implement the logic however you want.
I'm starting an open source project, a visual editor for React Material UI.
This is the link to the project.
Users will be able to drag and drop material components on the left drawer to the dropzone (middle/user layout), and use the toolbox on the right drawer to edit the CSS of individual components in the dropzone. Finally with a click of the button, the platform will generate react/ react-material-ui code and also have the capability convert the xml structure to a json for various device purposes.
This project is at the very beginning phase where I only have 1 button component.
Before diving deeper I would like to understand if my current implementations are valid or if there are better ways to implement this.
Particularly:
When I handle drag start:
ev.dataTransfer.setData("text/plain", ev.target.id);
ev.dataTransfer.effectAllowed = 'copy';
ev.dataTransfer.setData('text/html', ev.currentTarget.innerHTML);
and when I handle drop:
ev.preventDefault();
ev.stopPropagation();
let html = ev.dataTransfer.getData("text/html");
ev.currentTarget.style.border = "none";
let text = ev.dataTransfer.getData("text/plain");
let element = document.getElementById(text)
let element_prime = element.cloneNode(true)
ev.currentTarget.append(element_prime)
The reason why I feel uncomfortable is because I'm actually using the document queries, which is not exactly the "react way" of doing things.
I'm thinking of only using createRef() when selecting a component in the dropzone when working on the CSS in the toolbox area.
link to createRef()
I generate the ids of the components with:
import { nanoid } from '#reduxjs/toolkit'
######## UPDATE - 26 Apr 2022 ########
Based on some work done and relooking into the comments by #tunaayberk I found a way to gracefully handle it the react way. So react-dnd does make use of the redux flow and it has its own provider. An even better way to form the hierarchical json tree is to actually store it in the global state and just rendering the components in the dropzone from the json tree. That way we do away with handling the MUI classnames, DOM nested targets etc. Graceful way to handle this project using the react way.
checkout my medium post and give it some claps: https://medium.com/#kenneth.gzhao/react-material-ui-visual-editor-d1949262bce4
Is there a way to preload every image before showing the page to a user in Gatsby? Let's say that I want to avoid any preload effect that Gatsby is offering.
I am also wondering how I can force images that are not visible to preload. This is a major problem which I am trying to solve. Please take a look: https://festive-bassi-ce307b.netlify.app/.
If you try using the carousel then the next image that shows up will start preloading because it never was shown. This is really silly because at that point the whole page is loaded and the images as well.
I am using the gatsby-plugin-image and it's a staticImage component.
Example:
<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
quality={100}
/>
I also saw that the older gatsby-image plugin had a "loading" property that you could set to eager load. Could that property solve my problem?
Is there a way to preload every image before showing page to user in
Gatsby?
This is what eager attribute (from loading property) does according to the docs:
Loading behavior for the image. You should set this to eager for
above-the-fold images to ensure they start loading before React
hydration.
If you add:
<StaticImage
className="img1 img"
src="../images/era_of_manufacturing_ilustrations/work_planning.png"
alt="work planning image"
placeholder="blurred"
layout="constrained"
loading="eager"
quality={100}
/>
They will start loading before the rehydration process as if they were above-the-fold.
I don't understand the "preloading process" that you've pointed. Gatsby images are lazy-loaded by default but if you don't want to add a placeholder effect (the blurring), you can omit the placeholder property in the StaticImage.
Hello.
I recently got stuck with pretty important thing on my gatsby site.
I have to import script from other site cause it is providing map widget. This is the widget from polish delivery company and it is only available under link https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js.
It is activated by a function window.PPWidgetApp.toggleMap(). Problem is when i try to activate, html and css markup from widget are showing but map coming from js it is not.
Here is how I'm loading the script:
{
resolve: "gatsby-plugin-load-script",
options: {
src:
"https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js",
},
},
When I'm on specific route where I'm using this widget and i refresh the page everything is working properly. So I'm guessing problem is that when this script is loaded in index it gets cached somehow by gatsby and most of the important features are not working. So can I load the script only when I'm on let's say route /delivery ? Or is there another, better way to load this script that may work fine ?
Link to github repo with this problem: https://github.com/Exanderal/gatsby-problem
The easiest, native and built-in way to achieve is using <Helmet> component. Basically, this component embeds everything that is inside in your <head> tag.
The problem using it is that if you need to activate or to wait for its loading to make some actions (like window.PPWidgetApp.toggleMap() in your case), it could be kind of buggy since sometimes it may load properly but sometimes not. I will show you different approaches to check which one fits you better.
<Helmet> approach:
<Helmet>
<script src="https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js"/>
</Helmet>
As I said, this workaround may work for standalone scripts, but if you need to perform actions or wait for its loading it may not work. The next approach should fit you.
Custom script loading approach:
const addExternalScript = (url, callback) => {
const script = document.createElement('script');
script.src = url;
script.async=true;
script.onload = callback;
document.body.appendChild(script);
};
useEffect(()=>{
addExternalScript("https://mapa.ecommerce.poczta-polska.pl/widget/scripts/ppwidget.js",window.PPWidgetApp.toggleMap())
},[])
Basically, you are setting a custom function (addExternalScript) that creates the same script tag as the first approach and embeds the passed URL as a first function parameter. The second parameter is the callback function to trigger once it's loaded in the onload function.
Everything it's triggered in the useEffect function with empty deps ([]). The useEffect is a hook (available in React version ^16) that is triggered once the DOM tree is loaded, in this case, it's a nice way to ensure that the window object is properly loaded and set to avoid some common issues in Gatsby using global objects.
I am Working on an app with requirement where we need to create a dynamic image gallery which refreshes after few minutes.When refresh happens three things should happen without reloading the page
1) Obsolete images should be removed
2) New Images should be added
3) Non Obsolete images should stay (not reload)
4) Images should be stacked next to each other as it will be mostly used on tablet
I was looking at Boxlayout or FlowLayout and I can add the image but I am not sure how to delete it dynamically .I was able to set UUID for the image component but was not able to get component based on UUID to remove it . How can I get component based on its UUID added to the form ?
Is this the correct approach ? or there is already build in component that does that .
I saw this
How to add dynamic data in the renderer created using UI builder?
But I also read using List is discouraged
https://www.codenameone.com/javadoc/com/codename1/ui/list/package-summary.html
This is actually pretty simple to do with a BoxLayout.Y_AXIS Container. When you create an image component to add to the box layout do this:
myImageComponent.putClientProperty("imageId", imageId);
Then when you have the callback to refresh the list just do something like this:
for(Component cmp : parentContainer) {
String id = (String)myImageComponent.getClientProperty("imageId");
if(!existsInNewList(id)) {
cmp.remove();
}
}
When you are done updating the container just call animateLayout(200) or revalidate() to refresh the UI.