IdsEditor: Font style and alignment not working in safari

[jbrcna]

Describe the bug unable to change header style and/or alignment in safari browser

To Reproduce

Steps to reproduce the behavior: Header style Issue

1. Go to https://main.wc.design.infor.com/ids-editor/example.html
2. Change Font style to Header 1
3. Try also other header styles
4. See error
5. Nothing happens

Alignment style Issue

1. Go to https://main.wc.design.infor.com/ids-editor/example.html
2. Enter text
3. Select the text then change alignment (left, center, right)
4. See error
5. Nothing happens

Expected behavior Font style and Alignment should work properly

Version

• ids-enterprise: [e.g. v4.9.0 or v4.10.0]

Screenshots If applicable, add screenshots to help explain your problem.

Platform Safari

Additional context Add any other context about the problem here.

[tmcconechy]

@andriivarhanov - is this fixed on https://github.com/infor-design/enterprise-wc/pull/973 by any chance?

[andriivarhanov]

@tmcconechy no, it's not there

[tmcconechy]

ok we can fix it later

[andriivarhanov]

@tmcconechy I’ve looked into it and it appears we can’t fix it the way it’s implemented. Safari doesn’t support ShadowRoot.getSelection and it looks like document.getSelection  is not going through the Shadow DOM to return the selected node. Two options:

• There is a Selection.getComposedRange in development but it’s not implemented anywhere yet so we can wait
• We can put the editor’s content to iframe to have it’s own document object inside Shadow DOM and use it for document.getSelection

[tmcconechy]

Yeah i dont really like the iFrame idea. I think we can just table this one for now. But @deep7102 any ideas?

[deep7102]

Same do not like iFrame did not see any good way to implement this either, so thinking to table this one for now.