[Question] How to add "Ordered/Unordered List" option in rte/custom block

[rahuloftheramaneffect]

Hi

I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte:

editor.RichTextEditor.add('orderedList',
{
  icon: '1.',
  attributes: {title: 'Ordered List'},
  result: rte => rte.exec('insertOrderedList')
});

And this works if my page is pre-filled with html when the editor is initialized, like below:

Prefilled Editor:

Create Ordered List:

If, however, I drop a new block into the canvas, and then press the ordered list button, I get a NS_ERROR_ILLEGAL_VALUE message, like below:

Create new Paragraph Block:

Create Ordered List:

How can I fix this so that:

1. we can insert lists in newly created blocks?
   (Side Note: My example shows me doing this through the rte toolbar, but I am open to making lists into a new block type, if that helps and someone can tell me how to make them work.)
2. we can indent lists to create multilevel bullets (currently the indent command via the rte also does not work on new blocks, possibly for the same reasons above)
3. (Optionally) we can use the tab key to indent the lists?

[artf]

Can you create a reproducible demo, please? That error without a stack trace is useless

(Optionally) we can use the tab key to indent the lists?

You should definitely do it by yourself or rely on something like CKEditor for more advanced text usage

[rahuloftheramaneffect]

Hey! Thanks for responding so quickly.

Can you create a reproducible demo, please? That error without a stack trace is useless

Here is a zip file containing a stripped down version of my editor page.
Demo.zip

It includes a bunch of css and js files. The rte functions listed above are in editor_rte.js.

Steps to reproduce:

• Open index.html (includes an initialized editor, some pre-existing text and a few blocks).
• Double click on the pre-existing text to see the RTE toolbar. Use the list buttons on the right to verify that create list and indent content functionality works on pre-existing text.
• Drag a paragraph block into the page.
• Try to edit the text inside the new block, like previously, to create a list.
• The error should have occurred.

(Optionally) we can use the tab key to indent the lists?

You should definitely do it by yourself or rely on something like CKEditor for more advanced text usage

Ah, alright. Thank you.

Edit: I use Firefox 68.0.1

[artf]

Here is a zip file containing a stripped down version of my editor page.
Demo.zip

Sorry, but as already mentioned in the issue template you have to publish your demo online

1. JSFiddle Starter template https://jsfiddle.net/szLp8h4n
2. CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl

[rahuloftheramaneffect]

Oh! Sorry. Here's the online version:
https://jsfiddle.net/qnj1mhkt/

[artf]

Seems to be an issue only in Firefox (probably a bug). Don't really know why is happening, I'll dig dipper later

[thomas1204]

From the above comments, I can now add ordered and unordered list. Is there any way to update existing ordered and unordered List ?

@artf @rahuloftheramaneffect

[mhowey]

@artf -

I am running into this same issue also. It happens with exec('indent'), exec('outdent'), exec('insertunorderedlist'), and exec('insertorderedlist') -- all work fine in Chrome and Brave, but fail in FireFox and Safari in the same manner as mentioned above.

NOTE: I have tried with all lowercase and caps as specified like "insertUnorderedList" with the same result.

[josfh2005]

Oh! Sorry. Here's the online version:
https://jsfiddle.net/qnj1mhkt/

This seems to be a problem with de P tag. With the default text inside the div, works fine in firefox.