In a react-website (programmed in TypeScript), I want to copy an image into the user's clipboard, which works fine for Chrome and Safari, using navigator.clipboard.write() with ClipboardItem.
However, FireFox does not support this - it only supports another function: browser.clipboard.setImageData() (reference).
How can I use this function inside my react-TS code?
Thanks!
Related
I'm currently implementing the Monaco Editor from Microsoft (https://github.com/microsoft/monaco-editor), with a plugin for yaml validation, autocompletion, etc. . (https://github.com/remcohaszing/monaco-yaml) in our react js APP.
Maybe it is also important to tell you, that our authentication process gets managed via Keycloak.
When I'm running my code in development (React-scripts start) everything is working as expected.
I can create the editor, the schema gets implemented correctly and autocompletion is also working.
BUT as soon as I try to use the editor in PRODUCTION Build it seems that it cant load my workers correctly, following the editor is not working as it should.
I always get these errors in production:
I tried to use monaco-editor-webpack-plugin with React Rewired but it didnt have an positive effect either.
I also tried to use the worker loader to load the workers, but it also didnt help
Any more Ideas how I can fix this ? Has this to do something with CORS ? Because it tries to load files in a url? Or am I missing something ?
Thanks in advance
What I tried: Monaco Webpack Plugin, plain webpack, worker-loader
Expected Behaviour: Monaco Editor with Monaco Yaml working in production build.
Current behaviour: Working fine in development build, cannot load workers in production.
The problem was, that my keycloak (on a different port) rejected to load the working scripts. After handling this problems, the editor is working fine.
I am using
chrome.devtools.inspectedWindow.getResources(allFiles => {})
It works, but I get the webpack compiled code and not the original React files. In the chrome source panel, it shows the original files using source maps. Can access the original files from chrome devtools? Please help with any pointers.
Can you try react-dev-tools extension
Selecting the react component and clicking the <> on top-right will take you to its React component source code.
More info at https://reactjs.org/blog/2014/01/02/react-chrome-developer-tools.html
I'm new with Robot Framework. I made couple of scripts, that I have tested with Chrome and Firefox. With Chrome everything works fine, but with Firefox I have one tricky problem. I try to click link called Post like this:
Click Link link=Post
With Firefox it won't work and I just get following error:
ElementNotInteractableException: Message:
In Chrome, this same test is working fine.
Firefox version is 53.0.3 (64-bit).
Selenium Driver version: 3.4.3
Geckodriver version: 0.16.1
Any suggestions? What can I try?
You can use
Click Element xpath=(//a[text()='Post'])[1]
or there will be different class for mobile and web I guess.
You can add these to narrow down on single element out of two.
Something like:
Click Element xpath=//a[text()='Post']/parent::div[contains(#class,'web')]
My website works fine on Chrome but is broken on Apple Mobile Safari.
I have troubleshot the situation and have found that it is the below line of code placed in side of my angular controller that is causing the problem. With out this code everything works fine.
The code takes all images on the page and puts them inside of an array. Anything I can do differently to ensure proper compatibility? Thank you!
$scope.load_picture_cotent = function () {
$scope.pictures = Array.from(
document.querySelectorAll
('div.album [style^="background-image"]')).map
(el=>el.style.backgroundImage.replace(/url\((.*)\)/,'$1')
.replace(/"/g,'')
.replace(/thumbnails/,'highresolution'));
console.log($scope.pictures);
}
You can also view the website here.
Please let me know if you need any more information or would like me to expand my post to include more information.
you are using ECMA 2015 lambda notation, try to wrap this with babel and try it again, did you check the browsers compatibility status with ECMA Script 2015?
Thank you bretanac93.
He was right, I was using a newer version of Javascript than is currently supported by browsers.
He recommended I use Babel which is a compiler that converts new Javascript to a compatible Javascript.
I used babel to compile the compatibility javascript and it works like a charm.
I'm using Angular on my site, but I've been having reports on it often not working. Often users have to try different browsers/devices to get it to work. On my computer it works fine on Chrome, Opera and Firefox, latest versions. I've had reports of the page not working for visitors when using Firefox (version 31.6.0) and Safari though.
I have a smartphone of brand Öwn (Chilean or Peruvian I think), and the angular code does not work on this phone. I've tried using Chrome and the Öwn browser (some browser of their own). I have expandable content powered by jQuery, and that works fine, so it's definitely only Angular the page has problems with.
I tried removing all dependencies (using ngAnimate and ui.bootstrap for datepicker, and ngDialog), but still doesn't work on my phone.
I'm sorry I don't have more details. This is the page where the problems happen:
https://www.easterisland.travel/tours/
Does anyone have a clue? Thank you!
The problem in the end was in the code of an Angular function. When declaring a new object, I hadn't applied a value to one of the variables. This:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP};
should have been this:
var tourObj = {groupId: groupId, pricePP: pricePP, savingsPP: savingsPP};
It was tricky since some browsers accepted it (Chrome and later Firefox) but many didn't. To locate the problem I checked error console of Safari Mac, and all it said was that angular.min.js.map and angular-animate.min.js.map were missing. .map files are for showing debug messages with minified code. Once the .map files had been added (find .map files for angular here, clicking folder for your angular version), the error console showed me exact location of the error.