Add embedding option in text editor

client/src/app/site/pages/meetings/modules/list-of-speakers-content/components/moderation-note/moderation-note.component.html

@@ -53,7 +53,7 @@ <h2 class="accessibility-h2 accessibility-h2-3 subtitle-text">{{ 'Moderation not
             }
             @if (isEditing) {
                 <form [formGroup]="moderatorNoteForm">
-                    <os-editor formControlName="moderator_notes"></os-editor>
+                    <os-editor formControlName="moderator_notes" [isModerationNote]="true"></os-editor>
                 </form>
             }
         </mat-card-content>

client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.html

@@ -1,35 +1,128 @@
-<h1 mat-dialog-title>{{ 'Insert/edit link' | translate }}</h1>
-<div mat-dialog-content>
-    <div>
-        <mat-form-field>
-            <mat-label>{{ 'URL' | translate }}</mat-label>
-            <input matInput [(ngModel)]="link.href" />
-        </mat-form-field>
+<div
+    aria-label="Insert/edit external link"
+    cdkFocusInitial
+    class="title"
+    role="button"
+    tabindex="0"
+    (click)="toggleArrow('toggleExternalReference')"
+    (keydown.enter)="toggleArrow('toggleExternalReference')"
+    (keydown.space)="toggleArrow('toggleExternalReference')"
+>
+    <div class="references">
+        <h1 aria-label="Insert/edit external link" mat-dialog-title>{{ 'Insert/edit external link' | translate }}</h1>
+        @if (canEmbed) {
+            <button #btn class="arrows" matIconButton>
+                @if (toggleExternalReference) {
+                    <mat-icon>keyboard_arrow_up</mat-icon>
+                } @else {
+                    <mat-icon>keyboard_arrow_down</mat-icon>
+                }
+            </button>
+        }
     </div>
-
-    <div>
-        @if (data.needsText) {
+</div>
+@if (toggleExternalReference || !canEmbed) {
+    <div mat-dialog-content [formGroup]="externalLink">
+        <div class="card-grid">
             <mat-form-field>
-                <mat-label>{{ 'Text to display' | translate }}</mat-label>
-                <input matInput [(ngModel)]="text" />
+                <mat-label>{{ 'URL' | translate }}</mat-label>
+                <input formControlName="extUrl" matInput />
             </mat-form-field>
-        }
+        </div>
+        <div>
+            @if (data.needsText) {
+                <mat-form-field>
+                    <mat-label>{{ 'Text to display' | translate }}</mat-label>
+                    <input formControlName="extText" matInput />
+                </mat-form-field>
+            }
+        </div>
+        <div>
+            <mat-form-field>
+                <mat-label>{{ 'Open link in ...' | translate }}</mat-label>
+                <select formControlName="extDisplayMode" matNativeControl>
+                    <option value="_self">{{ 'Current window' | translate }}</option>
+                    <option value="_blank">{{ 'New window' | translate }}</option>
+                </select>
+            </mat-form-field>
+        </div>
+        <div class="clear-button">
+            <button aria-label="Reset" color="gray" mat-icon-button (click)="initForm(externalLink)">
+                <mat-icon>clear</mat-icon>
+            </button>
+        </div>
     </div>
-
-    <div>
-        <mat-form-field>
-            <mat-label>{{ 'Open link in ...' | translate }}</mat-label>
-            <select matNativeControl [(ngModel)]="link.target">
-                <option translate value="_self">Current window</option>
-                <option translate value="_blank">New window</option>
-            </select>
-        </mat-form-field>
+}
+@if (canEmbed) {
+    <div
+        cdkTrapFocus
+        class="title"
+        role="button"
+        tabindex="0"
+        (click)="toggleArrow('toggleInternalReference')"
+        (keydown.enter)="toggleArrow('toggleInternalReference')"
+        (keydown.space)="toggleArrow('toggleInternalReference')"
+    >
+        <div class="references">
+            <h1 aria-label="Link a topic/motion/assignment" mat-dialog-title>
+                {{ 'Link a topic/motion/assignment' | translate }}
+            </h1>
+            <button class="arrows" matIconButton>
+                @if (toggleInternalReference) {
+                    <mat-icon>keyboard_arrow_up</mat-icon>
+                } @else {
+                    <mat-icon>keyboard_arrow_down</mat-icon>
+                }
+            </button>
+        </div>
     </div>
-</div>
-<div mat-dialog-actions>
-    <button color="accent" mat-button translate [disabled]="!link.href" (click)="save()">Ok</button>
+    @if (toggleInternalReference) {
+        <div mat-dialog-content>
+            <div class="card-grid" [formGroup]="internalRadioOptions">
+                <mat-radio-group aria-label="Select an option" class="radio-group" formControlName="options">
+                    <mat-radio-button aria-label="Topics" [value]="'Topics'" (click)="changeEditMode()">
+                        {{ this.translate.instant('Topics') }}
+                    </mat-radio-button>
+                    <mat-radio-button aria-label="Motions" [value]="'Motions'" (click)="changeEditMode()">
+                        {{ this.translate.instant('Motions') }}
+                    </mat-radio-button>
+                    <mat-radio-button aria-label="Assignments" [value]="'Assignments'" (click)="changeEditMode()">
+                        {{ this.translate.instant('Assignments') }}
+                    </mat-radio-button>
+                </mat-radio-group>
+                <mat-form-field [formGroup]="internalReferenceSelector">
+                    <mat-label>
+                        {{ this.translate.instant(selectedRepoName) }}
+                    </mat-label>
+                    @let selectedFormControl = selectedRepoName + 'FormControl';
+                    @for (currentRepo of [repo ?? agendaItemRepo]; track currentRepo) {
+                        <os-repo-search-selector
+                            [formControlName]="selectedFormControl"
+                            [keepOpen]="currentRepo?.keepOpen"
+                            [repo]="currentRepo"
+                            [subscriptionConfig]="searchSubscriptionConfig[selectedRepoName]"
+                            [wider]="currentRepo?.wider"
+                        ></os-repo-search-selector>
+                    }
+                </mat-form-field>
+            </div>
+            <div class="clear-button">
+                <button aria-label="Reset" color="gray" mat-icon-button (click)="internalReferenceSelector.reset()">
+                    <mat-icon>clear</mat-icon>
+                </button>
+            </div>
+        </div>
+    }
+}
+
+<div class="matDialogActions" mat-dialog-actions>
+    <button aria-label="Ok" color="accent" mat-button [disabled]="!externalUrl && !this.item" (click)="save()">
+        {{ 'Ok' | translate }}
+    </button>
     @if (isUpdate) {
-        <button color="warn" mat-button translate (click)="removeLink()">Remove link</button>
+        <button aria-label="Remove link" color="warn" mat-button (click)="removeLink()">
+            {{ 'Remove link ' | translate }}
+        </button>
     }
-    <button mat-button translate (click)="cancel()">Cancel</button>
+    <button aria-label="Cancel" mat-button (click)="cancel()">{{ 'Cancel' | translate }}</button>
 </div>

client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.scss

@@ -1,3 +1,41 @@
 mat-form-field {
     width: 100%;
 }
+
+.radio-group {
+    display: flex;
+    gap: 15px;
+    margin-bottom: 5px;
+}
+
+.references {
+    display: flex;
+
+    .arrows {
+        display: flex;
+        margin-top: 7px;
+        margin-left: auto;
+        transform: translateX(-20px);
+    }
+}
+
+.title {
+    padding: 0;
+}
+
+.title:focus {
+    padding: 0;
+    outline: none;
+    box-shadow: none;
+    & h1 {
+        text-decoration: underline 2px #ccc;
+        border-radius: 25px;
+    }
+}
+
+.clear-button {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: -15px;
+    margin-bottom: -20px;
+}