I have implemented a DraftJS - WYSIWYG component on my site but during testing noticed that pasting a specific image inside crashes the component.
Since StackOverflow text editor won't let me paste the image here, you can find it at this link. It's the banana image at the beginning of the paragraph.
Pasting it into the official demo component available on the project site crashes the component as well.
This component is however based on Facebook's Draft JS package, which handles this scenario quite well and replaces the pasted image with a camera icon image.
How can I go about escaping these dangerous pastes?
Related
I have been trying to make my own component in React to be used in AEM. I am currently following this tutorial here: https://www.youtube.com/watch?v=nec_MDPzMYk&t=86s
I am able to build the component and deploy it to my local instance of AEM, but I am unable to drag the component to the editor in AEM. The only components I seem to be able to drag and drop are Container and Text. I've added a public Dropbox folder with three screenshots to help describe my issue: https://www.dropbox.com/sh/aiifh6aahf28esu/AADZxqo1apo2NLXquz1ZNhbia?dl=0
I have edited the SPA Page policy in AEM (see first screenshot: “edit template”) to include all of the components listed here, including the new component (Basic Component) that I have added with React (see next screenshot: available components), yet when I go to drag the components to the editor, I can’t do that (see screenshot: editor).
Does anyone see what I could be doing wrong?
In case you will click on 'Drag Component here' and try do add ur component via '+' is your component in the list or not? Might be that you have changed the policy for a different responsive grid.
Also check the error.log, might be there you will find some clues. (http://:/system/console/slinglog/tailer.txt?tail=1000&grep=*&name=%2Flogs%2Ferror.log)
And component should have _cq_dialog or_cq_editConfig. Only in this case AEM allows to add components
I have a very basic implementation of ant design in a react project. I used create-react-app and have went through the suggested steps detailed in the antd documentation.
The problem i have is resizing the Content section of the Layout component. Currently, even though my Dragger component is wrapped within Content component, it is appearing below it. The Content component is represented by the Grey area on the screen. Attempts at resizing it using styling have not yielded desired results.
Here is the code pen. Im simply trying to ensure that the Upload box is located within the Content section, and not below it.
Any help would be awesome!
You've wrapped the Dragger component in a div that is absolutely positioned in the center of the body, so it's disregarding the regular content flow. If you remove that inline CSS it will behave as you'd expect.
I want to use a loader such as the one on Youtube before the content is loaded. On youtube, every piece of content uses a light gray color loader before rendering the actual content. It is made of squares and circles to simulate the actual content about to be rendered.
Do you know what it is ? Surprisingly, I couldn't find it neither on material-ui nor via a google search.
ok, I found the solution to my problem.
What I was looking for is called "placeholder UI", or "skeleton screen".
In my case, I want to use it with ReactJS. Semantic UI React has the placeholder part of the library :
https://react.semantic-ui.com/elements/placeholder/#content-line
Material-UI, and other styling libraries do not. There are however external packages for that, such as :
https://github.com/buildo/react-placeholder
https://github.com/danilowoz/react-content-loader
https://github.com/dvtng/react-loading-skeleton
It's also possible to implement skeleton screens oneself using a combination of html, svg and css.
I'm trying to implement a blog app in my React App. I'm seeking for a very complete text editor allowing to handle very globally the properties of the text. I have though of DraftJS but seems it isn't allowing a very big set of settings parameters.
Existing a more complete ReactJS's text editor ?
Update:
React Draft Wysiwyg seems pretty good and easily customizable,
Any hints would be great,
Thanks
Hi I am using svg sprite I created using icons8 website for all my website icons, and the icons are working but it seems that the website loads them more than once per page (if i open the network tab i can see it loaded twice or more). I have been looking for a solution for a while now and I cant seem to find the cause of this.
I work with react so I have a component for Icon which uses the tag with xlinkHref attribute.
did anyone encounter such behavior? if yes what would be the best way to approach a solution?