ajnart / homarr

Customizable browser's home page to interact with your homeserver's Docker containers (e.g. Sonarr/Radarr)
https://homarr.dev
MIT License
5.45k stars 252 forks source link

Functionality for spoilers (click to show) when adding notes. #2025

Open mariusberget92 opened 2 months ago

mariusberget92 commented 2 months ago

Description

Just as the title says. Functionality to add spoilers.

Very much like this Some hidden stuff not on display until clicked.

Or some other spoiler functionality. Would be nice to have for notes you would like hide some of the content when having the dashboard open, like internal IP addresses and such or something else.

Priority

Low (Nice-to-have)

github-actions[bot] commented 2 months ago

Hi 👋. Thank you for submitting your first issue to Homarr. Please ensure that you've provided all nessesary information. You can use the three dots > Edit button to update your post with additional images and information. Depending on the current volume of requests, the team should get in conact with you shortly.

ajnart commented 2 months ago

That's a good suggestion, I believe you might be able to find a way to add this feature using tiptap https://mantine.dev/x/tiptap/

Please tell me if you see docs indicating how to add this feature and I'll see you add it in homarr's note editor 😉

mariusberget92 commented 2 months ago

Looks like it's pretty straight forward. https://mantine.dev/core/spoiler/

import { Spoiler } from '@mantine/core';

function Demo() {
  return (
    <Spoiler maxHeight={120} showLabel="Show more" hideLabel="Hide">
      {/* Content here */}
    </Spoiler>
  );
}

You could also add transition duration by adding the attr: transitionDuration={0} to the <Spoiler ...>

Edit: wait.. I might be stupid. That is for mantine-core, not the TipTap.

manuel-rw commented 2 months ago

This is Mantine core (a standalone component). We'd need to implement custom logic in tiptap to use it. But tiptap should offer a built in solution. Currently cannot search for it because I'm busy.

SeDemal commented 1 month ago

https://tiptap.dev/docs/editor/api/nodes/details Tiptap pro I actually wanted to add it too. There is an unofficial extension we could use, but it not being from tiptap, I don't know how the support for the future is gonna be: https://github.com/n8b8dy/tiptap-spoiler (I might just make my own integration out of spite)