Hello,

I'm trialing IC5.0 and have a few questions about the editor for the Team and for 3rd party developers:

1. To make mobile editing more powerful and comfortable, I'd like to add functionality to copy, cut and delete a selected node (a paragraph, a quote, a spoiler etc). Like it is done for tables. Or like there are context buttons to add new paragraphs before and after nodes. Or like there are context menu for each node on Tiptap demo website. Is it technically possible?

2. I'd like to remove emoji/fa icons button from the editor and instead make a new one with only our custom gif emoticons. Or to use the existing button but remove the aforementioned thousands of standart emojies and FA icons from the editor. Is it possible? I mean not hide with CSS but completely disable that standart stuff in the editor, to have only our custom emoticons .

3. Would be great to add a "line break" button, cause we need line breaks (Shift+Enter) on mobiles, too. Sometimes a new paragraph is too much.

4. "Undo/Redo" buttons are must have for Android devices without GBoard, cause there is no way to undo things otherwise. Would be great to have them.

5. If #1 in this list is not possible, then an alternative could be to add a "Source" button which temporarily turns everything into BBcode for editing in difficult and complicated situations. I know it is possible in principle in TipTap, but is it possible in IC5?

6. While trialing I did not find how to embed external images by link. There are settings in the AdminCP to allow embedding of external media/external images, but there is no Image button in my editor. Could you please make a screenshot how it looks in your editor?

7. Thank you!

2 hours ago, konon said:

To make mobile editing more powerful and comfortable, I'd like to add functionality to copy, cut and delete a selected node (a paragraph, a quote, a spoiler etc). Like it is done for tables. Or like there are context buttons to add new paragraphs before and after nodes. Or like there are context menu for each node on Tiptap demo website. Is it technically possible?

This would usually be something the device would do, rather than the editor. Others may of course have other opinions on this. I can only say this is no something possible within our current product

2 hours ago, konon said:

I'd like to remove emoji/fa icons button from the editor and instead make a new one with only our custom gif emoticons. Or to use the existing button but remove the aforementioned thousands of standart emojies and FA icons from the editor. Is it possible? I mean not hide with CSS but completely disable that standart stuff in the editor, to have only our custom emoticons .

Not at present, however of course this is our first release, and I have seen this mentioned a few times

2 hours ago, konon said:

Would be great to add a "line break" button, cause we need line breaks (Shift+Enter) on mobiles, too. Sometimes a new paragraph is too much.

A good suggestion :)

2 hours ago, konon said:

"Undo/Redo" buttons are must have for Android devices without GBoard, cause there is no way to undo things otherwise. Would be great to have them.

Undo/redo is generally something we would leave to the device to handle, rather than the software

2 hours ago, konon said:

While trialing I did not find how to embed external images by link. There are settings in the AdminCP to allow embedding of external media/external images, but there is no Image button in my editor. Could you please make a screenshot how it looks in your editor?

You should just be able to paste the link. For example

3 hours ago, Marc said:

This would usually be something the device would do, rather than the editor. Others may of course have other opinions on this. I can only say this is no something possible within our current product

Thanks Marc! I think now that questions 2-6 are more or less solvable, at least in the next releases or with the help of 3rd party devs. But I feel the first question is probably not so easy to solve.

The problem is when I hold backspace on my mobile keyboard, the content erases as expected until the cursor reaches the beginning of a now empty quote, or empty code block, or empty wrap in box. And then the cursor stucks and I have to spend some time to figure out how to delete those empty elements (maybe this is a bug?). And at those moments I imagine the flow of PM's going from regular users to my box with the same issues.

But if there was at least a tiny "Trash can" button somewhere to delete a whole node that is currently "in focus", is it empty or not, like it is done for Tables, that would be an awesome addition. Same with context buttons to copy/cut a whole current node, so moving blocks of content on mobile would be so much easier. If it is not possible in IC5 currently even with the 3rd party help, then this is my suggestion

Edited February 10Feb 10 by konon

Hi Marc, I have a question about the editor's API. Here Matt F told about that and showed an example how to add Undo and Redo buttons. So, my question is will there be some kind of documentation available in the future, to learn how to do it by myself? I'm not a dev but I'd like to learn this stuff. Who knows maybe I could figure out how to solve the question #1 or at least to try

@Matt Finger would be your man for that question :)

Yeah, we're still working on more comprehensive documentation but I did post a basic guide in the Beta Testing Group

Just to preface, I did spot a bug where custom buttons aren't actually added, so the following answer applies to the next release/patch

For your questions specifically,

On 2/10/2025 at 3:33 AM, konon said:

1. To make mobile editing more powerful and comfortable, I'd like to add functionality to copy, cut and delete a selected node (a paragraph, a quote, a spoiler etc). Like it is done for tables. Or like there are context buttons to add new paragraphs before and after nodes. Or like there are context menu for each node on Tiptap demo website. Is it technically possible?

Yes, it's possible but it's not something we're considering out of the box. It should actually do this when you press Backspace on an empty node already, but certainly something a custom button can handle.

The hard part which you'd need to play around with is the selection handling to ensure it works smoothly, but the JS would be something roughly like

ips.ui.editorv5.registerExtension('deleteButton', {
    addCommands() {
        return {
            deleteNodeInSelection: () => ({editor, chain}) => {
                const {$from} = editor.state.selection;
                const path = [...$from.path];
                try {
                    // if we're at the start of the document, or the current node is a paragraph, don't delete
                    if (path.length <= 3 || path[3] < 2 || path[3].type.name === 'paragraph') {
                        return false;
                    }
                    return chain().setNodeSelection(path[2]).deleteSelection();
                } catch (e) {}
                return false;
            }
        }
    },
    addButtons() {
        return {
            deleteNode: {
                html: '<span><i class="fa-solid fa-trash-can"></i></span>',
                command: ({chain}) => chain().deleteNodeInSelection().focus().run(),
                // This puts the button at the end of the toolbar
                locations: [null],
                isAvailable: editor => editor.can().deleteNodeInSelection(),
                isActive: editor => false
            }
        }
    }
})

// OPTIONAL - create an AdminCP Restriction Option
ips.setString({"ipsCustomExtension__deleteButton__": "Show Delete Button"});

// Make the title display properly
ips.setString({"ipsCustomExtension__deleteButton_deleteNode": "Delete Current Node"});

Here's a recording of it in action

On 2/10/2025 at 3:33 AM, konon said:

1. I'd like to remove emoji/fa icons button from the editor and instead make a new one with only our custom gif emoticons. Or to use the existing button but remove the aforementioned thousands of standart emojies and FA icons from the editor. Is it possible? I mean not hide with CSS but completely disable that standart stuff in the editor, to have only our custom emoticons .

Customizing the Icon Panel's inner HTML is not something we're considering, so the options are create a custom Editor Extension and build out your own panel, or just use CSS to hide. We are working on a local branch with performance improvements to that panel which will also allow for easy hiding using a CSS one-liner:

.ipsEditor__toolbar .ipsIconPicker [data-icon-category]:not([data-icon-category="Custom Set 1"],[data-icon-category="Custom Set 2 (or whatever name you chose)"]/*, ...allTheOtherCategories*/) {
	display: none;
}
 

On 2/10/2025 at 3:33 AM, konon said:

1. Would be great to add a "line break" button, cause we need line breaks (Shift+Enter) on mobiles, too. Sometimes a new paragraph is too much.

2. "Undo/Redo" buttons are must have for Android devices without GBoard, cause there is no way to undo things otherwise. Would be great to have them.

Once again, these are not something we're going to add in the standard release but there are built-in commands for tiptap which can be implemented in a custom extension.

On 2/10/2025 at 3:33 AM, konon said:

1. If #1 in this list is not possible, then an alternative could be to add a "Source" button which temporarily turns everything into BBcode for editing in difficult and complicated situations. I know it is possible in principle in TipTap, but is it possible in IC5?

Good thing #1 is technically possible, since this is a definite "no" 😂. Not to be dismissive, but BBCode is incompatible with the current tiptap schema. Therefore, when converting between BBCode and tiptap nodes there will be content loss, not to mention an entire conversion library would need to be created to do this.

On 2/10/2025 at 3:33 AM, konon said:

1. While trialing I did not find how to embed external images by link. There are settings in the AdminCP to allow embedding of external media/external images, but there is no Image button in my editor. Could you please make a screenshot how it looks in your editor?

Like Marc said, you really just need to paste the link and it will convert automatically. We may implement the manual "insert image from URL" dialog from v4 if there's enough demand for it, but it is also possible to do with extensions.

15 minutes ago, Matt Finger said:

Customizing the Icon Panel's inner HTML is not something we're considering, so the options are create a custom Editor Extension and build out your own panel, or just use CSS to hide. We are working on a local branch with performance improvements to that panel which will also allow for easy hiding using a CSS one-liner:

You need to add this option back, there's no reason for us to be forced to have this emoji on the dropdown when we want to just display our own