I am using the react-quill editor in the next.js app. I am facing issues with adding hyperlinks to text. If I add hyperlinks for ex. www.google.com redirects me to http://localhost:3000/app_name/www.google.com. If I add the hyperlink https://www.google.com it works fine. But the user won't always add HTTP or HTTPS while adding hyperlinks to text. After searching on the internet I found that this issue is related to link sanitization so I added the following code in my next.js app.
import Quill from 'quill'
try {
const Link = Quill.import('formats/link');
Link.sanitize = function (url) {
// quill by default creates relative links if scheme is missing.
if (!url.startsWith('http://') && !url.startsWith('https://')) {
return `http://${url}`
}
return url;
}
} catch (e) {
console.log(e);
}
But the above code is not working well. It works sometimes but also It gives me Server Error ReferenceError: document is not defined error on page refresh.
I have also tried to import Quill as mentioned in the following code:
const { Quill } = dynamic(import("quill"), {
ssr: false,
loading: () => <p>Loading ...</p>,
});
But I am getting TypeError: Quill is undefined
Related
I am working on a react component which has a copy button handler like this:
function copyConnHandler() {
let text = copyConnRef.current.getAttribute("connid");
if (navigator && copyConnRef) {
navigator.clipboard.writeText(text);
copyConnRef.current.setAttribute("data-hint", "copied");
}
setTimeout(() => {
if(copyConnRef){
copyConnRef.current.setAttribute("data-hint", "copy");
}
}, 700);
}
This works in most scenarios but throws Error: NotAllowedError: Document is not focused in some cases. How can I prevent it from happening? (Found the error in production using Sentry).
PS: The error was occurring in electron and chrome browsers
I'm using mapboxgl library in reactjs.
my map inside a tab. when I switch between tabs I got this error.
componentDidMount() {
mapboxgl.accessToken = '*****';
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
null,
true // Lazy load the plugin
);
}
but I got this error:
Uncaught Error: setRTLTextPlugin cannot be called multiple times.
there is a solution here you can check to simplify your search this is what you have to do
if (mapboxgl.getRTLTextPluginStatus() === 'unavailable') {
mapboxgl.setRTLTextPlugin(
'https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.2.3/mapbox-gl-rtl-text.js',
(): void => {},
true // Lazy load the plugin only when text is in arabic
)
}
The solution:
if (mapboxgl.getRTLTextPluginStatus() !== 'loaded') {mapboxgl.setRTLTextPlugin('...') }
Hi I am following the docs from here: github docs
, but all URLs with locales return 404.
For the example:
localhost:3000/de/second-page = 404
localhost:3000/en/second-page = 404
localhost:3000/de = 404
localhost:3000/en = 404
same for the default locale.
localhost:3000/second-page = 200
localhost:3000 = 200
I guess, this is because there is no pages/de/second-page.js, for the example, but what's the purpose then of this library, if it doesn't solve this problem.
I have searched a lot and I know about localSubpaths, but seems that it doesn't work:
module.exports = new NextI18Next({
otherLanguages: ['fr'],
//localeSubpaths: localeSubpathVariations[localeSubpaths],
localeSubpaths: {
de: 'de',
en: 'en',
}
})
It doesn't work in my app, but it doesn't work in their sample, too: their sample
Have you checked these two steps ?
After creating and exporting your NextI18Next instance, you need to
take the following steps to get things working:
Create an _app.js file inside your pages directory, and wrap it with
the NextI18Next.appWithTranslation higher order component (HOC). You
can see this approach in the examples/simple/pages/_app.js. Your app
component must either extend App if it's a class component or define a
getInitialProps if it's a functional component (explanation here).
Create a next.config.js file inside your root directory if you want to
use locale subpaths. You can see this approach in the
examples/simple/next.config.js (Next.js 9.5+ required).
const { nextI18NextRewrites } = require('next-i18next/rewrites')
const localeSubpaths = {
de: 'de',
en: 'en',
};
module.exports = {
rewrites: async () => nextI18NextRewrites(localeSubpaths),
publicRuntimeConfig: {
localeSubpaths,
},
}
I've been trying to connect my AdSense account with my Gatsby blog and it seems impossible. AdSense is asking me to place this code between the head tag of my html
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
I've tried gatsby adsense plugins and other things and AdSense keeps telling me the code is not in the website. Since the website is hosted in S3, I downloaded the generated index.html and changed the code and re uploaded it. I think the problem is due to an added attribute called data-checked-head to the script tag, so even though I add the code above, what I see in the browser is this:
<script data-ad-client="ca-pub-XXXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" data-checked-head="true"></script>
If this code is what AdSense sees, then of course he doesn't recognize it. Does anyone know what can I do in this case?? Or why is this attribute even there?? Thanks
I can't answer about the details of AdSense but I have had problems with meta tags in the head of HTML myself. Here's two possibilites to debug your code in regards to Gatsby:
Many plugins are disabled by default in development mode. Try gatsby build and gatsby serve and then check if it works with plugins.
Use react-helmet to place your script tag in the head of HTML. Use gatsby build and gatsby serve for testing this as well.
You can use gatsby-plugin-google-adsense for displaying ads on your site.
The best way I found is from this article, which suggest a simple React implementation of Google AdSense.
In your gatsby-ssr.js file:
const React = require('react')
const HeadComponents = [
<script
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
crossOrigin="anonymous"
async
/>,
]
exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
setHeadComponents(HeadComponents)
}
Then you create a Banner component to include in your Gatsby.js pages:
const Banner: React.FC<BannerProps> = ({
className,
style,
layout,
format,
client = 'ca-pub-XXXX',
slot,
responsive,
layoutKey,
}) => {
useEffect(() => {
try {
const adsbygoogle = window.adsbygoogle || []
adsbygoogle.push({})
} catch (e) {
console.error(e)
}
}, [])
return (
<div className="banner-container">
<ins
className="adsbygoogle"
style={style}
data-ad-layout={layout}
data-ad-format={format}
data-ad-client={client}
data-ad-slot={slot}
data-ad-layout-key={layoutKey}
data-full-width-responsive={responsive}
/>
</div>
)
}
Full article here.
Goal: Call a function that invokes a fetch call to validate it works with my backend rest-api (end to end testing basically).
Project: node module built to be imported into several react web application. The module contains only fetch calls and minimal logic. Its basically a glorified wrapper for URLs and settings. Created to cut down work required to implement common end points used in applications.
Setup: I have a docker compose building a docker test container and pulling in my rest-api docker image (built in a different system). The test container pulls in the packed module and installs it with dependencies. Then it brings up the tests alongside the backend + other images needed for the backend (DB, login system, etc).
Problem: How to implement the tests to handle the calls.
Currently I've tried calling the fetch methods directly. This works for my login fetch but any additional call fails to send the cookie. As far as I understand the code I have depends on the browser for the cookie. I've tried several solutions to get said cookie but i've been unable to get fetch of node-fetch to send it properly. My best guess is each test was creating a new cookie but I lack the knowledge to full debug this solution path.
my send solution path was to attempt to use puppeteer to load a fake page and then evaluate the function in page following examples like:
https://github.com/puppeteer/puppeteer/issues/2579
How to use imported function inside page.evaluate in Puppeteer with Jest?
Problem with this is the tests kept failing to load libraries required or some other problem.
Code:
Here is the call I'm trying to test for the most part. Each function I have wraps around this providing {url: "api/endpoint/path", method: "GET"}. With some passing in a body for larger data posts.
export function request(options) {
//Build options
options = {
headers: {
'Content-Type': 'application/json'
},
...options
};
return fetch(options.url, options)
.then(response => {
//...
//Handle errors
if (!response.ok) {
return Promise.reject(`${response.status} - ${response.statusText}`);
}
try {
return response.json();
} catch (e) {
if (e.name === 'SyntaxError') {
return Promise.reject(response.text());
}
}
});
}
Test example i've tried:
import puppeteer from "puppeteer";
import {myCall} from "my-rest-bridge";
it('Check response', async () => {
//Load browser
const browser = await puppeteer.launch({
headless: true,
args: ['--no-sandbox']
});
const page = await browser.newPage();
//Load page
await page.goto('http://docker:8888/index.html');
//Do login
expect(await page.evaluate(() => login('user', 'password')).toBe(expectedUserResponseJson);
//Make call
expect(await page.evaluate(() => myCall(input1, input2)).toBe(expectedCallResponseJson);
//Close page
await page.close();
})
Took me a while but I built a solution to my own question. Its not perfect so if anyone has a better idea please answer.
So my solution works as follows. I built an addition git project to create a shell reactjs application inside a docker image. This application pulls in my node module, iterates through all the exports, and then generates a component per function.
import React from 'react';
import * as magicNodeModule from "magic-node-module"; //obviously not the real name
import CallRest from "./CallRest";
/** Core component for the application */
export default class App extends React.Component {
/** Renders the core application */
render() {
const restCalls = Object.keys(magicNodeModule);
return (
<div id={"App"}>
<div>
Functions found:
<ul id={"function-list"}>
{restCalls.map(restCall => <li>{restCall}</li>)}
</ul>
<hr/>
</div>
{
restCalls.map(restCall => {
return (
<CallRest restName={restCall} restCall={magicNodeModule[restCall]}/>
);
})
}
</div>
)
}
}
This component (CallRest) contains an input box, submit button, and output div. A user, or in my use case puppeteer, can input data into the input. Then by clicking submit it will run the fetch call and insert the resulting output into the div. Works very much like swagger 2 for those that are familiar with the system.
The solution is still built up as a series of docker images inside of a compose. Though it did require setting up a reverse proxy to allow the react app to communicate with backend API. As well it pulls in a fresh copy of the node module as a pack zip and installs it into the docker. This way I only have to build the shell react docker once in a blue moon.