Remove outer p tag from editor

[n/a]

Is there a way to get the editor to not place a wrapper <p> tag when it edits.

[Svet]

Hi John,

There should always be an element holding the value for the Editor. Thus, there is no option to remove the wrapping <p> tag.

If you could provide some more details about the use case scenario, we can try to suggest another approach of achieving it. 

Regards,
Svetlin
Progress Telerik

[Bob]

The <p> tag is always applied to text regardless of whether it wrapped in another tag.

    <li>Have topical MARs been completed if applicable?</li>

becomes

<li><p>Have topical MARs been completed if applicable?</p></li>

This wouldn't be so bad if we could format the <li><p> style but I can see no way of editing styles.

[Svet]

Hi,

I will try to explain why the Editor behaves like that and then I will offer a workaround for the issue.

By design the EditorComponent is a What-You-See-Is-What-You-Get (WYSIWYG) editor - its content is visually consistent. To achieve this consistency some rules have to be applied and the underlying HTML may be modified. One of these rules is to wrap each text block inside a <p> tag - thus the rendered HTML content is different from the one initially provided.

Having said that, the rendered content can  be styled by injecting custom CSS using native DOM APIs:

- For iframe mode, a reference to the underlying <iframe> should be obtained and the needed custom styles should be injected as this StackBlitz demonstrates: https://stackblitz.com/edit/angular-5vhepp-ss1ndv?file=app/app.component.ts

- For non-iframe mode, the needed elements should be targeted using custom CSS rules. Here is a sample StackBlitz:

https://stackblitz.com/edit/angular-5vhepp-pn2wgl?file=app/app.component.ts

I hope this helps.

Regards,
Svetlin
Progress Telerik

[Bob]

I have used the [iframe]=false option.
Your solution works when displaying the html in the editor.  However, once outside the editor we have the same problem:

<li>Where did it happen?</li> becomes <li><p>Where did it happen?</p></li> and throws out formatting by adding extra spaces between the list items.

The text in <li>Where did it happen?</li> is already wrapped in html tags, I can see no reason why you should add an extra <p> tag.

[Svet]

Hi Bob,

Generally, the wrapping <p> tags come from the underlying ProseMirror behavior that the Kendo UI for Angular Editor is built on. This is why, we don't have control over this behavior. I will further consult the required functionality with our Editor developer and will provide some further feedback whether it will be possible to be provided by us. However, I will be able to reply next week.

Regards,
Svetlin
Progress Telerik

[Svet]

Hi Bob,

I have consulted this case with the dedicated Editor developer. Indeed, currently there isn't an option that allows to strip the <p> wrapping tags of li elements due to the built - in behavior that comes from prosemirror. However, in the future we plan to provide a configurable option that allows to specify how to render each element type. Indeed, this feature would leave the control in the hands of the developer to determine the desired rendering of each element within the Editor. However it would requires some more effort and understanding of the underlying prosemirror concepts:

https://prosemirror.net/docs/guide/

I hope the provided information helps. Please let me know in case any further information is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Biju]

Hi Svetlin

I am also facing annoying behaviour. Do you have any fix for the issue?

The version that I am currently using "@progress/kendo-angular-editor": "^2.0.1",

Regards

Biju

[Svet]

Hi Biju,

Thank you for the provided details.

In general the Kendo UI for Angular Editor relies on ProseMirror. ProseMirror relies on a custom schema which renders specific html for the used tags. Since version 2.0.0 of the Editor:

https://www.telerik.com/kendo-angular-ui/components/editor/changelog/#ecddc2ac-0491-5cb3-b452-6819ebf48105

the default schema can be customized as demonstrated in the following article:

https://www.telerik.com/kendo-angular-ui/components/editor/schema/#toc-modifying-the-default-schema

in order to achieve any rendering for the specifically used tags in the Editor. 

To sum up, modifying the default ProseMirror schema should be done as per the requirements of the use - case scenario. We don't recommend a specific implementation as that is a feature provided by ProseMirror which can be further configured as required. I hope the provided information helps. Please let me know in case any further information or assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik

[Biju]

Thank you Svetlin for your quick replay

It really helps

[Neil]

I also have this issue where I do not want a <p> tag surrounding the text in my <li> tags. I have already made some modifications to the default ProseMirror schema so have some knowledge and understanding of ti but I can't figure out what I need to do to be able to simply allow <li>My list item text here</li>. Can a Kendo Dev please provide an example of the modifications needed to the default schema to allow this please?

I have tried the following to no avail, the list item button stops working with this modification:

const listItem = { ...(schema.spec.nodes as any).get('list_item') };
listItem.content = 'inline+';
const nodes = (schema.spec.nodes as any).update('list_item', listItem);

[Martin]

Hi Neil,

Indeed there is no straight forward approach to remove the <p> tag wrappers:

https://discuss.prosemirror.net/t/removing-the-default-paragraph-p-inside-a-list-item-li/2745

The provided code snippet is correct, but the content of the li tag needs to be set to inline*:

const li = { ...schema.spec.nodes.get('list_item') };
li.content = 'inline*'

let nodes = schema.spec.nodes.update('list_item', li);

nodes = nodes.addToEnd('iframe', iframe);

Unfortunately, with this customization of the built-in schema, the list features of the Editor (Insert ordered andInsert unordered list) will be broken:

https://screenrec.com/share/wqxFJUuHte

Regards,
Martin
Progress Telerik

[Daniel]

Is there a way to achieve this without breaking the built-in list features of the editor?

[Martin]

Hi Daniel,

So far there is no built-in option to configure the wrapper element of a <li> tag in Editor and the suggestions shared on the thread are still valid.

Please cast your vote for the following feature request in the meantime:

https://feedback.telerik.com/kendo-angular-ui/1525261-line-paragraph-spacing-feature