We Keep Coding

does not show the default image when there is an error loading the product image

I am using Vuetify and Nuxt.js.
After searching for products, a table is displayed with their list in the rows of which an image of each product is shown.
If the product does not have an image and a 404 error appears, then the default image should appear, which is stored in /assets/images/nofoto.png.
I also use v-hover for these images.
When the table is normally loaded, the image is not displayed by default,
but when you hover the mouse using v-hover to the place where the picture should be, then it appears.
If you remove v-hover, then the image by default does not show at all.
Tried using :eager="true" but it didn't work.
I thought the reason was dynamic :src and Webpack converts it to normal src, but attempts to fix it have failed.
Maybe I was wrong and that's not the point.
Tried looking for an answer in the Vuetify documentation but couldn't find anything on the matter other than :eager.
Can you please tell me what could be the reason that nofoto.png is not displayed immediately without hovering over v-hover?
import getImageURL from "#/js/images";
methods: {
getImageURL(id, def) {
return getImageURL(id, def);
},
<template v-slot:item.productID="{ item }">
<v-hover v-slot="{ hover }">
<div class="wrap-image">
<v-img :class="{ 'show-img': hover }"
class="imageItem"
:src="item.error ? require('../../assets/images/nofoto.png') :getImageURL(item.productID, true)"
v-on:error="item.error = true" content-color-bg="transparent" contain alt="Your image description">
</v-img>
</div>
</v-hover>
</template>
.show-img{
transform: scale(1.2);
}
.wrap-image{
display: flex;
overflow: hidden;
height: 85px;
max-width: 100px;
}
.imageItem {
align-self: center;
max-width: 80%;
transition: 0.5s ease;
}

ReactQuill - How to style placeholder attribute?

I want to style the text assigned to the placeholder attribute and make its font size larger. How do I do this with ReactQuill?
<ReactQuill placeholder= "some fun text" onChange = {onContentChange} value={contentValue} theme="snow" style={{
height:"300px",
padding:"20px",
lineHeight:"0px",
}}/>

You can edit editor's styles using custom CSS. Add this to your index.css file or if you are using any CSS framework like styled-components, write this CSS there.
.quill > .ql-container > .ql-editor.ql-blank::before{
font-size: 20px;
color: red;
}

Vuetify text fields on one line

I have this template for a Vue component (See it in CODEPEN):
<div class="some-class">
<v-form >
<v-container #click="someMethod()">
<v-row>
<v-col cols="3" sm="3" v-for="p in placeholders" :key="p">
<v-text-field :placeholder="p" single-line outlined >
</v-text-field>
</v-col>
</v-row>
</v-container>
</v-form>
</div>
where placeholders is an array like:
['Title 1', 'Title 2', 'Title 3',...'Title 21']
and some-class is in the style section of the component:
<style>
div.some-class {
display: inline-block;
max-width: 100%;
overflow-x: auto;
}
</style>
I would like to have them all on one line so I can scroll horizontally. But instead I get this:
How can I tweak the style to see all the text fields on one line?

Vuetify uses a flex grid. The reason that it's not overflowing is that you have to set the flex-wrap to nowrap.
Basically, just add the styles below to your v-row:
.nowrap-overflow {
flex-wrap: nowrap;
overflow-x: auto;
}
Modified codepen here:
https://codepen.io/CodingDeer/pen/zYYGOGd

How to target a component in svelte with css?

How would I do something like this:
<style>
Nested {
color: blue;
}
</style>
<Nested />
i.e. How do I apply a style to a component from its parent?

You need to pass props to the parent component with export let, then tie those props to class or style in the child component.
You can either put a style tag on the element in the child you want to style dynamically and use a variable you export for the parent to determine the value of a style directly, then assign the color on the tag like this:
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested color="green"/>
<!-- in Nested.svelte -->
<script>
export let color;
</script>
<p style="color: {color}">
Yes this will work
</p>
Upside here is flexibility if you only have one or two styles to adjust, downside is that you won't be able to adjust multiple CSS properties from a single prop.
or
You can still use the :global selector but just add a specific ref to the element being styled in the child like so:
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested ref="green"/>
<style>
:global([ref=green]) {
background: green;
color: white;
padding: 5px;
border-radius: .5rem;
}
</style>
<!-- in Nested.svelte -->
<script>
export let ref;
</script>
<p {ref}>
Yes this will work also
</p>
This ensures global only affects the exact ref element inside the child it's intended for and not any other classes or native elements. You can see it in action at this REPL link

The only way I can think of is with an additional div element.
App.svelte
<script>
import Nested from './Nested.svelte'
</script>
<style>
div :global(.style-in-parent) {
color: green;
}
</style>
<div>
<Nested />
</div>
Nested.svelte
<div class="style-in-parent">
Colored based on parent style
</div>
Multiple Nested elements
You could even allow the class name to be dynamic and allow for different colors if you use multiple Nested components. Here's a link to a working example.

You could use inline styles and $$props...
<!-- in parent component -->
<script>
import Nested from './Nested.svelte';
</script>
<Nested style="background: green; color: white; padding: 10px; text-align: center; font-weight: bold" />
<!-- in Nested.svelte -->
<script>
let stylish=$$props.style
</script>
<div style={stylish}>
Hello World
</div>
REPL

using :global(*) is the simplest solution.
No need to specify a class in the child if you want to style all immediate children for example
In the parent component:
<style>
div > :global(*) {
color: blue;
}
<style>
<div>
<Nested />
<div>
Nested will be blue.

I take a look and found nothing relevant (maybe here), so here is an alternative by adding <div> around your custom component.
<style>
.Nested {
color: blue;
}
</style>
<div class="Nested">
<Nested />
</div>
Maybe you will found something but this one works.

The way I do it is like this:
<style lang="stylus">
section
// section styles
:global(img)
// image styles
</style>
This generates css selectors like section.svelte-15ht3eh img that only affects the children img tag of the section tag.
No classes or tricks involved there.

How to set default font family and size in draft.js

I am learning draft.js editor and can't find how to configure default font-family and font size.
I tried this way:
let editorState = EditorState.createEmpty();
let newState = RichUtils.toggleBlockType(
editorState,
'aligncenter'
);
newState = RichUtils.toggleInlineStyle(
newState,
'FONT_SIZE_36'
);
newState = RichUtils.toggleInlineStyle(
newState,
'TIMES_NEW_ROMAN'
);
What is weird, aligncenter style works fine, but font size and family disappears when component gets focus.
Can you please suggest correct way how to do it?

Using RichUtils.toggleInlineStyle() is for modifying the currently selected range of text (or setting the inline style for text that will be entered at the current cursor position). There is not a way to use this to set the default inline styles for the entire document (nor is this recommended).
To get default styles, you should use CSS and set the styles you want for the entire editor. Then you should override those styles for specific text ranges using toggleInlineStyle when the user wants a non-default style (for instance selecting font-size from a dropdown).
Here's the catch. Currently you can pre-define these inline styles using styleMap but you can't really create them on-the-fly as a user chooses an arbitrary font-family (or size or color).
I have been struggling with this also while trying to implement a color-picker for react-rte.org.
(Technically, you can add styles on the fly, but it won't trigger a re-render, so that's not really usable.)
There is an open issue for this here:
https://github.com/facebook/draft-js/issues/52
I expect this will be resolved within a week or so and I can edit this answer with example code to accomplish what you're after.

if your trying to set the default font size in draft.js Editor just set up your component like this below
notice the div that is wrapped around the Editor, EmojiSuggestions, and mentionSuggestion components. Just set the className for the editor to your font size. in my case it is fs-1. Note I have added an editorStyles.editor class that is coming from an attached scss file. This contains some scss for the editor.
Here is what the scss looks like, no need to add this though if you are just trying to edit the default font style
Just showing this, but not needed to set default font size. That is done in div wrapper
.editor {
box-sizing: border-box;
border: 1px solid #ddd;
cursor: text;
padding: 16px;
border-radius: 2px;
margin-bottom: 9px;
box-shadow: inset 0px 1px 8px -3px #ABABAB;
background: #fefefe;
}
.editor :global(.public-DraftEditor-content) {
min-height: 140px;
}
.mention {
color: #2c7be5
}
<div
style={{minHeight: "7em", maxHeight: "10em", overflow: "auto"}}
className={`border border-2x border-300 bg-light rounded-soft fs-1 ${editorStyles.editor}` }
onClick={() => { messageFieldRef.current.focus(); }}
>
<Editor
editorKey={'editor'}
currentContent={ContentState}
editorState={tempEditorState ? tempEditorState : editorState}
onChange={setEditorState}
plugins={plugins}
ref={messageFieldRef}
/>
<EmojiSuggestions />
<MentionSuggestions
open={open}
onOpenChange={onOpenChange}
suggestions={suggestions}
onSearchChange={onSearchChange}
onAddMention={(e) => {// get the mention object selected
}}
entryComponent={Entry}
/>
</div>
<div>
<EmojiSelect closeOnEmojiSelect />
<span color="light" className="px-3 py-1 bg-soft-info rounded-capsule shadow-none fs--1 ml-3" >
<FontAwesomeIcon icon="tags" transform="left-3"/>
Press <strong>#</strong> while typing to insert custom fields
</span>
</div>