We Keep Coding

Why there are spaces between my <span> elements in contenteditable?

I'm trying to build a Notion-like editor in Svelte, I've made some good progress, but I'm now scratching my head trying to figure out why exactly i get spaces between span elements.
I'm dividing the text in spans based on their formatting, here's an example of an output:
<div contenteditable="true">
<p>
<span contenteditable="true" id="a1" data-index="0">some text</span> //normal text
<span contenteditable="true" id="a2" class="bold" data-index="0">some other text</span> //bold text
</p>
</div>
In between them a #textnode with a little bit of space gets created and I can't figure out how to avoid it. I've tried multiple CSS options, but no matter the CSS properties, these spaces persists. My understanding is that these #textnodes are on the DOM itself.
Here's the code responsible for this output. The $fragments array is modified through keydown events and binds to the HTML of the span element, synchronizing the changes. The default behaviour of a character insertion is prevented through e.preventDefault().
{#each $fragments[$selectedFragment].children[childIndex].text as fragment, i}
{#if fragment.tag == "span"}
<span
contenteditable="true"
id={fragment.id}
class="edit-row"
data-index={i}
class:bold={fragment?.formattingOptions?.bold}
class:italic={fragment?.formattingOptions?.italic}
>{fragment.text}</span>
{/if}
{/each}
I've also tried putting the code in a single line to avoid generating spaces somehow, but no changes:
<p id={$fragments[$selectedFragment].children[childIndex].id} class="{$fragments[$selectedFragment].children[childIndex].format} edit" data-index={childIndex} bind:this={element}>{#key $justKey}{#each $fragments[$selectedFragment].children[childIndex].text as fragment, i}{#if fragment.tag == "span"}<span contenteditable="true" id={fragment.id} class="edit-row" data-index={i} class:bold={fragment?.formattingOptions?.bold} class:italic={fragment?.formattingOptions?.italic}>{fragment.text}</span>{/if}{/each}{/key}</p>
Here's the demo: https://epub-theta.vercel.app/fragments
If you need any further details, please let me know.
Thank you for your help.
UPDATE: adding elements through browser's inspector does not generate these spaces, so it has something to do with how they get inserted by Svelte, or some space/line break somewhere somehow. Still searching.
UPDATE: definitely an issue with how Svelte renders the HTML, there is whitespace between elements by default and this is the outcome. No clear solution in sight, only some hacky workarounds that end up breaking other code.

either place the span tags next to each other on the same line or comment out the space.
<div contenteditable="true">
<p>
<span contenteditable="true" id="a1" data-index="0">some text</span><!--
--><span contenteditable="true" id="a2" class="bold" data-index="0">some other text</span>
</p>
</div>

This problem is related to the ongoing issue of whitespace handling in Svelte. There are solutions for SSR pages, but since in my case the HTML is user-generated I couldn't find a non-disruptive way to fix it.
For now I'll use this workaround which leaves the impression that these small spaces are not there:
span {
margin: -0.8px;
}

React <Link> does nothing when clicking on it inside a map

in the Code below I am trying to use Link. The problem is, the first Link element does work, while the second Link element inside the map does not work. It does nothing when clicking on it. I searched a lot on different websites but could not find a reason why that is the case. Can anyone explain to me why this is the case and if there is a solution to my problem?
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<div className={style.dataItem} key={value.id}>
<p><Link to='/test'>{value.last_name}, {value.first_name}</Link></p>
</div>
);
})}
</div>
</div>
)
Thanks in advance
Alexej

You should use Link element on top lavel at least to provide a much wider hit area to click:
return (
<div>
<p><Link to='/test'>Testlink</Link></p>
<div className={style.searchBarContainer}>
<input className={style.searchBar} type="text" placeholder={placeholder}
onChange={handleChange} onFocus={handleFocusIn}
onBlur={handleFocusOut}/>
<div className={style.searchIcon}><i className="search icon"></i></div>
</div>
<div className={style.dataWindow}>
{searchInput.map((value, key) =>{
return(
<Link to='/test' key={value.id}>
<div className={style.dataItem}>
<p>{value.last_name}, {value.first_name}</p>
</div>
</Link>
);
})}
</div>
</div>
)

Your code is working here in my CodeSandbox. The problem must be somewhere else.

I found my mistake: The handleFocusOut function, that is executed onBlur, was used to hide the window in which there is the link I wanted to select. The onBlur was executed before the Link element, hid the window and therefore nothing happend after clicking on the link. I am now pausing the handleFocusOut function for 100ms so that the link gets executed first and now it works. I know this is not the best solution but it is the only one that worked unitl now. I will search for a better one. Thanks everyone for helping me :)

How can I add space between the title and icon? in react

How can I add space between the title and icon? 
<div className="new-data_title">
{title},<icon icon={icon}/>
</div>
</Button>```

Simplest way is to use
or &#160
{title} <icon icon={icon}/>
check this link for more details:
[https://blog.hubspot.com/website/html-space][1]

Card flip with Onclick with cards randered from Json Data

I have a json list which i used to populate a list of react cards which has two sides. I want to flip to the info side when a button is clicked but I can only get it to flip all the cards. i can achieve it with hover within the css then only card hovered over flips.
Below is my card code
<MDBRow class="row">
<ul className="ulWidth">
<li className="liWidth"> {this.state.infos.map(post => {
return (
<div key={post.id} id="menu">
<MDBCol lg="4" className=" mb-3 column flip-card" id="myEltId">
<MDBCard className="card colCardinfoHeightImg flip-card-inner">
<img className="img-fluid infoImage" src={require('../../images/infoImage.png')} />
<MDBCardBody>
<MDBCardTitle className="CardTitle text-uppercase text-bold">{post.infoName}</MDBCardTitle>
<MDBCardText>
<strong>Data Example 1:</strong> {post.jsonData1}<br/>
<strong>Data Example 2:</strong> {post.jsonData2}<br/>
<strong>Data Example 3:</strong> {post.jsonData3}<br/>
</MDBCardText>
</MDBCardBody>
<div class="flip-card-back">
<MDBCard className=" colCardinfoHeight">
<MDBCardBody>
<MDBCardTitle>{post.infoName}</MDBCardTitle>
<MDBCardText>
<p><strong>Data Example 3:</strong>{post.jsonData4}<br/>
<strong>Data Example 3:</strong> {post.jsonData5}
</p>
<hr/>
<p><strong>Data Example 3:</strong> {post.jsonData6}<br/>
</MDBCardText>
<MDBBtn className="infoButton" color="orange" size="lg" onClick={this.clickFlipFunction}>Switch Today</MDBBtn>
</MDBCardBody>
</MDBCard>
</div>
</MDBCard>
</MDBCol>
</div>
);
})}
</li>
</ul>
</MDBRow>
this is the flip function i have attempted at the minute but it flips all the cards that are rendered.
onFlipCard(){
$(document).ready(function(){
$(".flip-card").css("transform", " rotateY(180deg)");
$(".flip-card-inner").css("transform", " rotateY(180deg)");
});
}
it works when i input the above css in the css file with the hover tag used and when the user hovers over it flips only the right card but i need it to be a clickable function.

Create an onClick event handler for the card.
Track whether the card is flipped or not within the component using something like an isCardFlipped state variable.
Whenever onClick is called, toggle the isCardFlipped state value.
Assign dynamic classnames using classnames , to show either flip-card or flip-card-inner based on the value in isCardFlipped
Edit : I would advice against the use of jquery, or to perform direct DOM manipulation. The major benefit of using React, which you might have missed out on, is to be able to update the DOM indirectly via React's internal working : in a gist, this allows only those DOM elements to be updated which have changed versus redrawing the entire DOM altogether. Read more on this here

Right now your event handler is getting all elements with the class "flip-card". That's what this part is doing:
$(".flip-card")
What you'll need instead is to use a reference to the specific element that was clicked, something like:
$(".flip-card").click(function(e){
$(e.target).css("transform", " rotateY(180deg)");
});
Event.target reference

Material-ui tooltip not working properly

I'm trying to use the material-ui tooltip. I want the tooltip to be displayed at the top.
Even after setting placement="top"
The demo can be found here
What am I doing wrong in here?

Because page has not enough space to show tooltip on top position
Just add simple padding then try it again.
<div style={{padding: '50px'}}>
<Tooltip placement="top" title="Chart Type">
<IconButton >
<ShowChart />
</IconButton>
</Tooltip>
</div>

If you use a form wrapper, the outlined variant contains a "pointer-event: none" property that would prevent the popover from getting any events.