Overriding the TagList and TagListItem components

I wanted to develop a plugin that overwrites the two components TagList and TagListItem. Unfortunately I had no success so far.

First I tried to overwrite these two components using the component manager (inkdrop.components).
Apparently these two components from the component manager are not used in the standard UI and therefore do not apply.

After that I used the inkdrop-simple-note-list plugin as a reference. In this plugin, the NoteListItemView component is overridden by a special component class name (CustomNoteListItemView).
However, this “Custom” prefix seems to be implemented only for the NoteListItemView component.

Does anyone have an idea how to override the TagList and TagListItem components?

It seems to me that this is not really possible at the moment, unless you directly replace the components that use the TagList and TagListItem components via the layout manager.
However, this seems impractical for several reasons.

If anyone has more information or suggestions on this topic, please let me know.

Hi Lukas,

You can only replace components listed in the layouts state here:

In your case, I guess SideBarMenuTagList and SidebarWorkspaceMenuTagList are what you want to override?
What kind of customization do you want to make?

Hi Takuya,

I would like to replace the following two components.

That would be EditorMetaLayout and CustomNoteListItemView, right?

I would like to replace these tags with their own components. I have tags with different structures. If the name of a tag follows a certain structure, the tag should be highlighted more clearly.
I am currently thinking about something like this. image

that sounds interesting.

yes, the tag list component is rendered in CustomNoteListItemView.
but in the editor meta layout, the tag list is a different component to let you edit the tags.
so, it needs to be refactored to support replacing the default look of the tags at the moment.

1 Like

Hi, in my hide-front-matter plugin, it replaces the undocumented NoteListItemSummaryView with another React component to override summary of each note.

This plugin saves the original component, and re-registers it when deactivated.

That’s a bit hacky and maybe not very good way, but I thought it might be helpful.

I have already tried this with the TagList component. Unfortunately I had no success.
I just installed your plugin hide-front-matter and noticed that the frontmatter properties were still shown in the preview.
Only after installing the thumbnail-list plugin, I did not get the frontmatter properties.

The hide-front-matter plugin only works in combination with the thumbnail-list plugin, because the thumbnail-list plugin loads the components from the component manager.

I designed the component manager in order to support adding/removing components from the layouts like the distraction-free mode and the sidetoc plugin.
I happened to register all the react components to the component manager, but that’s not for making them customizable.
In my opinion, it is overkill to make every component customizable for supporting niche features because it may cause unexpected behavior and bugs.

1 Like

@Lukas, thank you for researching and sharing with me about it.
I had not noticed the problem because this plugin makes only slight changes. It was my lack of debug.
I’ll mention it in the readme for now.

I also agree that there is no need to make the app so customizable that it loses its robustness.

1 Like

I also agree that it is more important to keep the app stable than to make everything customizable.
I will keep my eyes open for other ways to achieve this.


1 Like