Custom trait doesn't persist after page reload #5806
Unanswered
dwr-ghostdev
asked this question in
Q&A
Replies: 2 comments 6 replies
-
Shouldn't the "muted" param be part of the video url? At least this is how it works on YouTube. |
Beta Was this translation helpful? Give feedback.
4 replies
-
My aim was to extend the video component with aspect ratio dropdown: const videoType = editor.DomComponents.getType("video")
// Define the new trait
const aspectRatioTrait = {
type: "select",
label: "Aspect Ratio",
name: "aspectRatio",
options: [
{ value: "16:9", name: "16:9" },
{ value: "4:3", name: "4:3" },
{ value: "1:1", name: "1:1" },
{ value: "21:9", name: "21:9" }
]
}
// Add the new trait to the video component's traits
if (videoType) {
const sourceTraits = videoType.model.prototype.getSourceTraits()
const youtubeTraits = videoType.model.prototype.getYoutubeTraits()
const vimeoTraits = videoType.model.prototype.getVimeoTraits()
videoType.model.prototype.getSourceTraits = () => [aspectRatioTrait, ...sourceTraits]
videoType.model.prototype.getYoutubeTraits = () => [aspectRatioTrait, ...youtubeTraits]
videoType.model.prototype.getVimeoTraits = () => [aspectRatioTrait, ...vimeoTraits]
editor.DomComponents.addType("video", videoType)
} |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
I have a GrapesJs project that requires the video component to have a "muted" trait. It's part of the default attributes, but for some reason, the trait isn't there by default. So, I have to add it via a custom trait.
I'm having a problem with its persistence. The code works initially; by initially, after I drag the component onto the canvas - it shows the checkbox inside the Traits Manager and it also adds the "muted" attribute every toggle.
The problem is this: if I refresh the page or if I refresh the editor, the "muted" trait inside the Trait Manager disappears as well as the attributed set by trait in the element's attribute.
This is what I've tried so far:
What seems to be the problem with this? Is there lacking code?
Edit: added context and more details
Additional detail/s:
For context:
This is what my Trait Manager looks like after I drag my Video component onto the canvas:
This is the video element after checking "Muted":
After the page reload:
Trait Manager:
Video element (in the DOM)
As you can see, it didn't have the "Muted" control and the "muted" attribute is missing as well.
Beta Was this translation helpful? Give feedback.
All reactions