188c5f506c
Add an inline spoiler (Telegram/Discord-style hidden text): a TipTap mark `spoiler` rendered as <span data-spoiler="true" class="spoiler">, blurred via CSS and revealed on click (UI-only is-revealed class, never persisted). - packages/editor-ext: the Spoiler mark (inclusive:false, set/toggle/unset commands, ||text|| input rule), exported; a lossless turndown rule emitting raw inline HTML; round-trip test. - apps/client: SpoilerView mark-view (ReactMarkViewRenderer, Link pattern), registration in extensions, bubble-menu toggle button (editable only), CSS (blur + @media print reveal), en/ru i18n. - apps/server: register Spoiler in collaboration.util tiptapExtensions so the mark survives HTML<->JSON export/index/import/Yjs; a test proving the public share keeps the spoiler (it isn't stripped with comments). No keyboard shortcut: the proposed Mod-Shift-s collides with Strike (and Mod-Shift-h with Highlight); the ||text|| input rule + the bubble-menu button cover ergonomics. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
22 lines
369 B
CSS
22 lines
369 B
CSS
.spoiler {
|
|
background: rgba(0, 0, 0, 0.85);
|
|
border-radius: 0.25em;
|
|
cursor: pointer;
|
|
filter: blur(0.3em);
|
|
transition: filter 0.15s ease;
|
|
user-select: none;
|
|
}
|
|
|
|
.spoiler.is-revealed {
|
|
filter: none;
|
|
background: rgba(125, 125, 125, 0.18);
|
|
user-select: auto;
|
|
}
|
|
|
|
@media print {
|
|
.spoiler {
|
|
filter: none;
|
|
background: rgba(125, 125, 125, 0.18);
|
|
}
|
|
}
|