fix: preset style not present on text - refs #257668

src/BlockStyleWrapper/BlockStyleWrapperEdit.test.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import '@testing-library/jest-dom/extend-expect';
+
+import BlockStyleWrapperEdit from './BlockStyleWrapperEdit';
+
+jest.mock('react-portal', () => {
+  return {
+    Portal: ({ children }) => children,
+  };
+});
+
+describe('BlockStyleWrapperEdit', () => {
+  const defaultProps = {
+    selected: true,
+    block: {},
+    data: {
+      align: 'left',
+      size: 'medium',
+      styles: {
+        backgroundColor: 'red',
+        textColor: 'blue',
+      },
+    },
+  };
+
+  const initialState = {
+    userSession: {
+      token: 'mockToken',
+    },
+  };
+
+  const mockStore = configureMockStore();
+  const store = mockStore(initialState);
+
+  it('renders correctly when selected is true', () => {
+    const { container } = render(
+      <Provider store={store}>
+        <Router>
+          <BlockStyleWrapperEdit {...defaultProps} />
+        </Router>
+      </Provider>,
+    );
+
+    expect(container.querySelector('.open-styles-button')).toBeInTheDocument();
+    expect(container.querySelector('.styled')).toBeInTheDocument();
+  });
+});

src/StyleWrapper/StyleWrapperView.jsx

@@ -172,7 +172,7 @@ const StyleWrapperView = (props) => {
   const ViewComponentWrapper = style?.viewComponent;
 
   return styled ? (
-    nativeIntegration ? (
+    nativeIntegration && !style_name?.includes('content-box') ? (
       children
     ) : (
       <div {...attrs} ref={props.setRef}>

src/StyleWrapper/StyleWrapperView.test.jsx

@@ -31,6 +31,12 @@ describe('getInlineStyles', () => {
     borderRadius: '5px',
   };
 
+  const dataWithLessProperties = {
+    margin: { top: '1', right: '1', bottom: '1', left: '1', unit: 'em' },
+    padding: { top: '2', right: '2', bottom: '2', left: '2', unit: 'em' },
+    borderRadius: '5px',
+  };
+
   const expectedStyles = {
     backgroundColor: 'red',
     '--background-color': 'red',
@@ -46,6 +52,13 @@ describe('getInlineStyles', () => {
     padding: '2em 2em 2em 2em',
     borderRadius: '5px',
   };
+
+  const expectedStylesWithLessProperties = {
+    margin: '1em 1em 1em 1em',
+    padding: '2em 2em 2em 2em',
+    borderRadius: '5px',
+  };
+
   it('returns the correct styles', () => {
     const props = {
       mode: 'edit',
@@ -120,6 +133,25 @@ describe('getInlineStyles', () => {
     const styles = getInlineStyles(newData, props);
     expect(styles).toEqual(newExpectedStyles);
   });
+
+  it('returns the correct styles with missing properties', () => {
+    const newData = {
+      ...dataWithLessProperties,
+      shadowColor: '',
+    };
+
+    const newExpectedStyles = {
+      ...expectedStylesWithLessProperties,
+      lineHeight: undefined,
+    };
+
+    const props = {
+      mode: 'edit',
+    };
+
+    const styles = getInlineStyles(newData, props);
+    expect(styles).toEqual(newExpectedStyles);
+  });
 });
 
 describe('getStyle', () => {