Create a new CSS property for filter

[javadsamiee]

I want to create a new property for filter: opacity(80%);

https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity

I want to use "toStyle" and "fromStyle" to create it and this is my code that I have used

editor.StyleManager.addProperty('filters', {
  name: 'Opacity',
  property: 'filter',
  type: 'slider',
  units: ['%'],
  defaults: '100%',
  min: 0,
  max: 100,
  step: 1,
  toStyle(value, unit) {
    return `opacity(${value}${unit})`;
  },
  fromStyle(style) {
    const match = style.match(/opacity\((\d+)%\)/);
    return match ? match[1] : '100';
  },
});

But the result is filter: 5% not filter: opacity(5%), how can I improve it?

[mohamedsalem401]

It looks like the toStyle function is missing the logic to append the opacity() function correctly.
Can you try the following snippet instead and let me know if it works?

editor.StyleManager.addProperty('filters', {
  name: 'Opacity',
  property: 'filter',
  type: 'slider',
  units: ['%'],
  defaults: '100%',
  min: 0,
  max: 100,
  step: 1,
  toStyle(value, unit) {
    let currentFilters = this.getStyle()['filter'] || '';
    currentFilters = currentFilters.replace(/opacity\(\d+%\)/, '').trim();
    return `${currentFilters} opacity(${value}${unit})`.trim();
  },
  fromStyle(style) {
    const match = style.match(/opacity\((\d+)%\)/);
    return match ? match[1] : '100';
  },
});

[javadsamiee]

Same result, have you tested it yourself? if it is possible please give a demo

[mohamedsalem401]

Hey, Sorry I provided a snippet that fixes a different issue related to overriding other filters.

I think the issue has to do with the fact that toStyle and fromStyle aren't part of the API for adding properties.

Here's what you can do instead:

• Define an opacity CSS value instead.
• Override the style manager for this property.

[mosh-tudor]

@javadsamiee You can use this lib https://github.com/GrapesJS/style-filter/

[artf]

yeah, unfortunately toStyle/fromStyle are only available on the composite/stack types. But I'd be happy to see a PR to bring this functionality on the regular property.