Refactor ReadableContentView component into a custom hook

[geriux]

Currently, the ReadableContentView component is responsible for handling the max width of the canvas and providing alignment styles based on the window screen and the align prop. However, we want to refactor this functionality into a custom hook instead.

The new custom hook will use the useWindowDimensions hook to get the window width and height, and will take the align prop into account when calculating the alignment styles and canvas max width. It will return an object with the styles and canvas max width for the given align prop.

By using the useWindowDimensions hook, we can also reduce the number of listeners in the code and make it more efficient since we are currently adding dimension listeners within this component.

To implement this change, we will remove the ReadableContentView component and replace its usage with the new custom hook. We will also update any tests or other components that rely on ReadableContentView.

It will also remove nesting two extra Views since we often encounter an issue where nesting too many Views crashes the editor.