syncfusion/ej2-angular-ui-components

Issue with whitespace.

levanton opened this issue · 6 comments

When the HTML type has two or more consecutive whitespaces in its content, all whitespaces are removed during rendering and none remain. "whiteSpace: 'PreserveAll'" doesn't help.

`import { Component } from '@angular/core';
import {NodeModel, HtmlModel } from '@syncfusion/ej2-angular-diagrams';

@component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'angular-diagram';
public htmlShape: HtmlModel = {type: 'HTML', content: '

text text

'}
public defaultNodeValues(defaultNode: NodeModel): NodeModel {
defaultNode.height = 50;
defaultNode.width = 50;
defaultNode.offsetX = 50;
defaultNode.style = { whiteSpace: 'PreserveAll' };
return defaultNode
}
}
`

Hi Lethanton,

After analyzing your code example, it appears that you haven't defined HTML tags to render HTML content. Additionally, when you intend to include a space before text in HTML, you should use the entity &nbsp. Please find the modified code example below.

Code example:

obj.shape = {
      type: 'HTML',
      content: '<div><p>&nbsp;&nbsp;&nbsp;&nbsp;text text&nbsp;&nbsp;</p></div>',
    };

Regards,
Shyam G

Thanks for your answer! But you misunderstood me, my description was incorrect. I don't know why but github editor removed spaces between words and added before and after.
Screenshot 2023-09-20 at 17 28 08

I don't want to include space before text in HTML.

here is an example

<p>text____text</p> # I got —> "textext" all spaces are collapsed

So, when I use more than one space in a row all spaces are collapsed and I get 0 spaces(usually I should get one space).

;  — works for me but it doesn't work for my case.

whiteSpace: 'PreserveAll'

— it helps to keep all spaces as it is in other types but not in type HTML

Hi Levanton,

In HTML, multiple consecutive spaces are typically collapsed into a single space when rendering. This behavior is part of the standard rendering rules for text content in HTML, and it applies to regular HTML elements. However, if you want to preserve multiple consecutive spaces in your HTML content, you can replace the regular space character with non-breaking spaces ( ) to preserve consecutive spaces. Please refer the sample and link below for reference.

Link: https://stackoverflow.com/questions/16951133/when-to-use-nbsp#:~:text=(it%20should%20have%20a,grammar%20on%20the%20English%20StackExchange

Sample: https://stackblitz.com/edit/angular-qddb2k-mvzd4x?file=src%2Fapp.component.html,src%2Fapp.component.ts

Regards,
Sivaranjith

Thanks. But it looks like GPT answers. Because I said that I got no spaces when I use multiple spaces. Not 1 space, I got 0 spaces when using 2,3 or more spaces in a raw.

Hi Levanton,

We could reproduce the reported issue at our end. We have confirmed the issue as a bug and logged a defect report. We will include the fix for this issue in Volume 3 SP, 2023 release. Please be patience until then.

The reported issue has been successfully addressed in service pack release version (v23.2.4). Consequently, we are closing this ticket for administrative purposes. Should you have any additional questions or concerns, please feel free to reopen the ticket, and we will be more than happy to assist you further.