Comments (9)
It seems that Svelte would append the element again in the target
element.
https://github.com/djyde/cusdis/blob/master/widget/index.js#L6
Maybe we should clear the target before mounting to the target:
function render(target) {
if (target) {
+ target.innerHTML = ''
new Widget({
target,
props: {
attrs: target.dataset,
},
});
}
}
from cusdis.
I'm handling the issue, today with the window.renderCusdis
can re-render the widget. Just the previus widget still there. How is the best way to handle that issue.
In my case use a useScript to wait the script loaded and do render for each change page. When change pass the ref of the cudis widget in the renderCusdis
import { useEffect, useRef } from "react";
import Section from "aura-design/section";
import { useScript } from "@utils/useScript";
const ArticleComment = ({ title, id, uid, path }) => {
const { loaded, error } = useScript("https://cusdis.com/js/cusdis.es.js");
const cudis = useRef(null);
useEffect(() => {
if (loaded) {
window.renderCusdis(cudis.current);
}
}, [id]);
if (error) {
return <></>;
}
return (
<Section container="smash">
<h3>Cajita de comentarios</h3>
<div
id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id={{ MY_ID }}
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
ref={cudis}
/>
</Section>
);
};
from cusdis.
Have you tried using useLayoutEffect
instead of useEffect
?
from cusdis.
Yes, i try with it, and still happening the issue.
useLayoutEffect(() => {
if (loaded) {
window.renderCusdis(cudis.current);
}
}, [id]);
The html in the page:
<div
id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id={{ MY_ID }}
data-page-id="XS5CIxAAACgAuW1j"
data-page-url="http://localhost:3000/poemas/una-llamada-a-un-enemigo"
data-page-title="una-llamada-a-un-enemigo"
>
<div class="comment-main svelte-uevs8k">
<div style="margin-top: 1em">
<div class="cusdis-reply-info cusdis-field svelte-91lf04">
<div class="svelte-91lf04">
<input type="text" placeholder="Nickname" class="svelte-91lf04" />
</div>
<div class="svelte-91lf04">
<input type="text" placeholder="Email" class="svelte-91lf04" />
</div>
</div>
<div class="cusdis-field svelte-91lf04">
<textarea placeholder="Reply..." class="svelte-91lf04"></textarea>
</div>
<div class="cusdis-field svelte-91lf04">
<button cusdis-disabled="false" class="submit-btn svelte-91lf04">
Post Comment
</button>
</div>
</div>
<div>
<div
class="svelte-1lz2d3d cusdis-padding"
style="margin-top: 2em; margin-bottom: 2em"
>
<div style="margin-bottom: 0.5em">
<div
class="cusdis-comment-nickname cusdis-inline cusdis-font-bold svelte-1lz2d3d"
>
garitma
</div>
<div class="cusdis-comment-date cusdis-inline svelte-1lz2d3d">
2021-04-22 02:13
</div>
</div>
<div
class="cusdis-comment-content svelte-1lz2d3d"
style="margin-bottom: 0.5em"
>
<p>pruebas de fun 2</p>
</div>
<div style="margin-top: 0.25em; margin-bottom: 0.25em">
<button type="button" class="cusdis-link-btn svelte-1lz2d3d">
Reply
</button>
</div>
</div>
</div>
<div class="cusdis-footer svelte-uevs8k">
Powered by <a href="https://cusdis.com">Cusdis</a>
</div>
</div>
<div class="comment-main svelte-uevs8k">
<div style="margin-top: 1em">
<div class="cusdis-reply-info cusdis-field svelte-91lf04">
<div class="svelte-91lf04">
<input type="text" placeholder="Nickname" class="svelte-91lf04" />
</div>
<div class="svelte-91lf04">
<input type="text" placeholder="Email" class="svelte-91lf04" />
</div>
</div>
<div class="cusdis-field svelte-91lf04">
<textarea placeholder="Reply..." class="svelte-91lf04"></textarea>
</div>
<div class="cusdis-field svelte-91lf04">
<button cusdis-disabled="false" class="submit-btn svelte-91lf04">
Post Comment
</button>
</div>
</div>
<div></div>
<div class="cusdis-footer svelte-uevs8k">
Powered by <a href="https://cusdis.com">Cusdis</a>
</div>
</div>
<div class="comment-main svelte-uevs8k">
<div style="margin-top: 1em">
<div class="cusdis-reply-info cusdis-field svelte-91lf04">
<div class="svelte-91lf04">
<input type="text" placeholder="Nickname" class="svelte-91lf04" />
</div>
<div class="svelte-91lf04">
<input type="text" placeholder="Email" class="svelte-91lf04" />
</div>
</div>
<div class="cusdis-field svelte-91lf04">
<textarea placeholder="Reply..." class="svelte-91lf04"></textarea>
</div>
<div class="cusdis-field svelte-91lf04">
<button cusdis-disabled="false" class="submit-btn svelte-91lf04">
Post Comment
</button>
</div>
</div>
<div>
<div
class="svelte-1lz2d3d cusdis-padding"
style="margin-top: 2em; margin-bottom: 2em"
>
<div style="margin-bottom: 0.5em">
<div
class="cusdis-comment-nickname cusdis-inline cusdis-font-bold svelte-1lz2d3d"
>
garitma
</div>
<div class="cusdis-comment-date cusdis-inline svelte-1lz2d3d">
2021-04-22 02:13
</div>
</div>
<div
class="cusdis-comment-content svelte-1lz2d3d"
style="margin-bottom: 0.5em"
>
<p>pruebas de fun 2</p>
</div>
<div style="margin-top: 0.25em; margin-bottom: 0.25em">
<button type="button" class="cusdis-link-btn svelte-1lz2d3d">
Reply
</button>
</div>
</div>
</div>
<div class="cusdis-footer svelte-uevs8k">
Powered by <a href="https://cusdis.com">Cusdis</a>
</div>
</div>
</div>
from cusdis.
Oh, ok 👌 It should work. Thank you
from cusdis.
It is working for me now.
https://garitma.com/poemas/huele-a-deseo
import { useLayoutEffect, useRef } from "react";
import Section from "aura-design/section";
import { useScript } from "@utils/useScript";
const ArticleComment = ({ title, id, uid, path }) => {
const { loaded, error } = useScript("https://cusdis.com/js/cusdis.es.js");
const cudis = useRef(null);
useLayoutEffect(() => {
if (loaded) {
cudis.current.innerHTML = "";
window.renderCusdis(cudis.current);
}
}, [id]);
if (error) {
return <></>;
}
return (
<Section container="smash">
<h3>Cajita de comentarios</h3>
<div
id="cusdis_thread"
data-host="https://cusdis.com"
data-app-id={{ MY_ID }}
data-page-id="{{ PAGE_ID }}"
data-page-url="{{ PAGE_URL }}"
data-page-title="{{ PAGE_TITLE }}"
ref={cudis}
/>
</Section>
);
};
export default ArticleComment;
from cusdis.
@pablopvsky Cool!
Maybe I should improve the CSS part 🤣 I am not an CSS expert.
from cusdis.
i can help with it, i am thinking how can be the best way and do a pr of it 😬
from cusdis.
@pablopvsky That's great! I opened another issue for CSS issues #39
from cusdis.
Related Issues (20)
- How to modify design? For example, put input form after comments
- latest commit loss of height style HOT 3
- Is possible to pre fill the email field with and email?
- Comment page rewrite
- Dashboard rewrite
- JS SDK for 2.0
- Feature requests, code highlighting
- react-cusdis not supporting react v18 HOT 3
- The official website of cusdis.com cannot be connected HOT 1
- When I import data from disqus, it shows Something went wrong
- I got an error when deploy on Railway HOT 5
- Error: text color is not loaded properly in dark mode. HOT 4
- MySQL database lose Property 'subscription' HOT 1
- How can I modify the font in Cusdis? HOT 2
- postcss v8.2.10 results in failed deployment on Vercel, latest version v8.4.27 works HOT 2
- Postgres 15. permission denied for schema public during deployment HOT 1
- How do I make a visitor's email address mandatory? HOT 1
- DOCS: Integrating Cusdis with Docusaurus websites HOT 2
- Not support nodejs18.x on vercel deployment HOT 1
- How to customize the style if I'm using JSSDK HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from cusdis.