feat(ckeditor/include_note): add a new size for expandable items (closes #4134)

apps/client/src/stylesheets/style.css

@@ -1230,6 +1230,43 @@ a.external:not(.no-arrow):after, a[href^="http://"]:not(.no-arrow):after, a[href
     width: 100%;
 }
 
+/* Expandable include note styles */
+.include-note-title-row {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    cursor: pointer;
+}
+
+.include-note-title-row .include-note-title {
+    margin: 0;
+}
+
+.include-note-toggle {
+    background: none;
+    border: none;
+    padding: 2px;
+    cursor: pointer;
+    font-size: 1.2em;
+    color: var(--main-text-color);
+    transition: transform 0.2s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.include-note-toggle:hover {
+    color: var(--main-link-color);
+}
+
+.include-note-toggle.expanded {
+    transform: rotate(90deg);
+}
+
+.include-note[data-box-size="expandable"] .include-note-content {
+    margin-top: 10px;
+}
+
 .alert {
     padding: 8px 14px;
     width: auto;

apps/client/src/translations/en/translation.json

@@ -215,6 +215,7 @@
     "box_size_small": "small (~ 10 lines)",
     "box_size_medium": "medium (~ 30 lines)",
     "box_size_full": "full (box shows complete text)",
+    "box_size_expandable": "expandable (collapsed by default)",
     "button_include": "Include note"
   },
   "info": {

apps/client/src/widgets/dialogs/include_note.tsx

@@ -63,6 +63,7 @@ export default function IncludeNoteDialog() {
                         { label: t("include_note.box_size_small"), value: "small" },
                         { label: t("include_note.box_size_medium"), value: "medium" },
                         { label: t("include_note.box_size_full"), value: "full" },
+                        { label: t("include_note.box_size_expandable"), value: "expandable" },
                     ]}
                 />
             </FormGroup>

apps/client/src/widgets/type_widgets/text/CKEditorWithWatchdog.tsx

@@ -7,7 +7,7 @@ import link from "../../../services/link";
 import { useKeyboardShortcuts, useLegacyImperativeHandlers, useNoteContext, useSyncedRef, useTriliumOption } from "../../react/hooks";
 import { buildConfig, BuildEditorOptions } from "./config";
 
-export type BoxSize = "small" | "medium" | "full";
+export type BoxSize = "small" | "medium" | "full" | "expandable";
 
 export interface CKEditorApi {
     /** returns true if user selected some text, false if there's no selection */

apps/client/src/widgets/type_widgets/text/utils.ts

@@ -8,15 +8,44 @@ export async function loadIncludedNote(noteId: string, $el: JQuery<HTMLElement>)
     const note = await froca.getNote(noteId);
     if (!note) return;
 
+    // Get the box size from the parent section element
+    const $section = $el.closest('section.include-note');
+    const boxSize = $section.attr('data-box-size');
+    const isExpandable = boxSize === 'expandable';
+
     const $wrapper = $('<div class="include-note-wrapper">');
     const $link = await link.createLink(note.noteId, {
         showTooltip: false
     });
 
-    $wrapper.empty().append($('<h4 class="include-note-title">').append($link));
+    if (isExpandable) {
+        // Create expandable structure with toggle
+        const $titleRow = $('<div class="include-note-title-row">');
+        const $toggle = $('<button class="include-note-toggle bx bx-chevron-right" aria-expanded="false">');
+        const $title = $('<h4 class="include-note-title">').append($link);
 
-    const { $renderedContent, type } = await content_renderer.getRenderedContent(note);
-    $wrapper.append($(`<div class="include-note-content type-${type}">`).append($renderedContent));
+        $titleRow.append($toggle, $title);
+        $wrapper.append($titleRow);
+
+        const { $renderedContent, type } = await content_renderer.getRenderedContent(note);
+        const $content = $(`<div class="include-note-content type-${type}" style="display: none;">`).append($renderedContent);
+        $wrapper.append($content);
+
+        // Add toggle functionality
+        $toggle.on('click', (e) => {
+            e.stopPropagation();
+            const isExpanded = $toggle.attr('aria-expanded') === 'true';
+            $toggle.attr('aria-expanded', String(!isExpanded));
+            $toggle.toggleClass('expanded');
+            $content.slideToggle(200);
+        });
+    } else {
+        // Standard display
+        $wrapper.append($('<h4 class="include-note-title">').append($link));
+
+        const { $renderedContent, type } = await content_renderer.getRenderedContent(note);
+        $wrapper.append($(`<div class="include-note-content type-${type}">`).append($renderedContent));
+    }
 
     $el.empty().append($wrapper);
 }

packages/ckeditor5/src/plugins/includenote.ts

@@ -7,7 +7,8 @@ export const BOX_SIZE_COMMAND_NAME = 'includeNoteBoxSize';
 export const BOX_SIZES = [
 	{ value: 'small', label: 'Small' },
 	{ value: 'medium', label: 'Medium' },
-	{ value: 'full', label: 'Full' }
+	{ value: 'full', label: 'Full' },
+	{ value: 'expandable', label: 'Expandable' }
 ] as const;
 
 export type BoxSizeValue = typeof BOX_SIZES[number]['value'];