@@ -103,11 +103,7 @@
{{ preamble }}
}
-
+
@if (contentForm.get('text')?.invalid && (contentForm.get('text')?.dirty || contentForm.get('text')?.touched)) {
{{ 'This field is required.' | translate }}
@@ -150,13 +146,10 @@
@if (!editMotion) {
}
+
@if (editMotion) {
-
+
}
@if (
reasonRequired &&
@@ -212,12 +205,14 @@
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-content/motion-content.component.ts b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-content/motion-content.component.ts
index 1b54bbca9f..31fe855e28 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-content/motion-content.component.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-content/motion-content.component.ts
@@ -20,7 +20,6 @@ import { getParticipantMinimalSubscriptionConfig } from '../../../../../particip
import { MotionControllerService } from '../../../../services/common/motion-controller.service';
import { MotionPermissionService } from '../../../../services/common/motion-permission.service/motion-permission.service';
import { BaseMotionDetailChildComponent } from '../../base/base-motion-detail-child.component';
-import { MotionTinyMceConfig } from '../../definitions/tinymce-config';
import { MotionContentChangeRecommendationDialogComponentData } from '../../modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component';
import { MotionChangeRecommendationDialogService } from '../../modules/motion-change-recommendation-dialog/services/motion-change-recommendation-dialog.service';
@@ -59,8 +58,6 @@ export class MotionContentComponent extends BaseMotionDetailChildComponent {
@Output()
public validStateChanged = new EventEmitter
();
- public tinyMceConfig = MotionTinyMceConfig;
-
private finalEditMode = false;
public get showPreamble(): boolean {
@@ -161,18 +158,6 @@ export class MotionContentComponent extends BaseMotionDetailChildComponent {
.subscribe(motions => this.updateMotionNumbersSubject(motions));
}
- /**
- * clicking Shift and Enter will save automatically
- *
- * @param event has the code
- */
- public onKeyDown(event: KeyboardEvent): void {
- if (event.key === `Enter` && event.shiftKey) {
- this.save.emit(this.contentForm.value);
- this.updateMotionNumbersSubject();
- }
- }
-
/**
* Click handler for attachments
*
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component.html
index 3da8c1abe8..2ab7a424b5 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/components/motion-detail-original-change-recommendations/motion-detail-original-change-recommendations.component.html
@@ -1,4 +1,4 @@
-
+
@if (!textLoaded) {
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/definitions/tinymce-config.ts b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/definitions/tinymce-config.ts
deleted file mode 100644
index 91f23f1cd1..0000000000
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/definitions/tinymce-config.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import { marker as _ } from '@colsen1991/ngx-translate-extract-marker';
-
-export const MotionTinyMceConfig = {
- style_formats: [
- {
- title: _(`Headers`),
- items: [
- { title: _(`Header 1`), format: `h1` },
- { title: _(`Header 2`), format: `h2` },
- { title: _(`Header 3`), format: `h3` },
- { title: _(`Header 4`), format: `h4` },
- { title: _(`Header 5`), format: `h5` },
- { title: _(`Header 6`), format: `h6` }
- ]
- },
- {
- title: _(`Inline`),
- items: [
- { title: _(`Bold`), icon: `bold`, format: `bold` },
- { title: _(`Italic`), icon: `italic`, format: `italic` },
- { title: _(`Underline`), icon: `underline`, format: `underline` },
- { title: _(`Strikethrough`), format: `strikethrough` },
- { title: _(`Superscript`), icon: `superscript`, format: `superscript` },
- { title: _(`Subscript`), icon: `subscript`, format: `subscript` },
- { title: _(`Code`), format: `code` }
- ]
- },
- {
- title: _(`Blocks`),
- items: [
- { title: _(`Paragraph`), format: `p` },
- { title: _(`Div`), format: `div` },
- { title: _(`Pre`), format: `pre` }
- ]
- },
- {
- title: _(`Alignment`),
- items: [
- { title: _(`Left`), format: `alignleft` },
- { title: _(`Center`), format: `aligncenter` },
- { title: _(`Right`), format: `alignright` }
- ]
- }
- ]
-};
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.html b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.html
index f9348dbabd..ee7fcb5c02 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.html
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.html
@@ -25,7 +25,7 @@
}
-
+
{{ 'Public' | translate }}
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.ts b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.ts
index ffce200208..355cc07b7e 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/components/motion-content-change-recommendation-dialog/motion-content-change-recommendation-dialog.component.ts
@@ -66,13 +66,6 @@ export class MotionContentChangeRecommendationDialogComponent extends BaseChange
*/
public lineRange!: LineRange;
- public getTinyMceSettings(): object {
- return {
- toolbar: `undo redo | bold italic underline strikethrough
- | removeformat | bullist numlist | outdent indent | link charmap code`
- };
- }
-
/**
* Creates the forms for the Motion and the MotionVersion
*/
diff --git a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/motion-change-recommendation-dialog.module.ts b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/motion-change-recommendation-dialog.module.ts
index d220937249..3c90b8d314 100644
--- a/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/motion-change-recommendation-dialog.module.ts
+++ b/client/src/app/site/pages/meetings/pages/motions/pages/motion-detail/modules/motion-change-recommendation-dialog/motion-change-recommendation-dialog.module.ts
@@ -23,9 +23,9 @@ import { MotionTitleChangeRecommendationDialogComponent } from './components/mot
MatFormFieldModule,
MatRadioModule,
MatButtonModule,
+ EditorModule,
ReactiveFormsModule,
- OpenSlidesTranslationModule.forChild(),
- EditorModule
+ OpenSlidesTranslationModule.forChild()
]
})
export class MotionChangeRecommendationDialogModule {
diff --git a/client/src/app/site/pages/meetings/pages/motions/styles/motion-common-styles.scss b/client/src/app/site/pages/meetings/pages/motions/styles/motion-common-styles.scss
index 1542e978df..5b29e64e27 100644
--- a/client/src/app/site/pages/meetings/pages/motions/styles/motion-common-styles.scss
+++ b/client/src/app/site/pages/meetings/pages/motions/styles/motion-common-styles.scss
@@ -42,6 +42,7 @@
height: 22px;
position: absolute;
left: 0;
+ text-align: left;
padding-right: 18px;
&:after {
diff --git a/client/src/app/ui/base/base-form-control.ts b/client/src/app/ui/base/base-form-control.ts
index c2933135ca..f10ece9fac 100644
--- a/client/src/app/ui/base/base-form-control.ts
+++ b/client/src/app/ui/base/base-form-control.ts
@@ -57,7 +57,8 @@ export abstract class BaseFormControlComponent implements ControlValueAccesso
private readonly _id: number;
private _disabled = false;
- protected fb = inject(UntypedFormBuilder);
+ protected fb: UntypedFormBuilder = inject(UntypedFormBuilder);
+
public constructor() {
this._id = ++BaseFormControlComponent.formControlId;
this.contentForm = this.createForm();
diff --git a/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.html b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.html
new file mode 100644
index 0000000000..310c63ca0d
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.html
@@ -0,0 +1,20 @@
+Insert/Edit Link
+
+
+
+
+
diff --git a/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.scss b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.scss
new file mode 100644
index 0000000000..bc76a27e25
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+ width: 100%;
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.ts b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.ts
new file mode 100644
index 0000000000..261adb505a
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-embed-dialog/editor-embed-dialog.component.ts
@@ -0,0 +1,40 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+interface EditorEmbedData {
+ src: string;
+ title: string;
+}
+
+interface EditorEmbedDialogInput {
+ embed?: EditorEmbedData;
+}
+
+export interface EditorEmbedDialogOutput {
+ action: `cancel` | `set-embed`;
+ embed?: EditorEmbedData;
+}
+
+@Component({
+ selector: `os-editor-image-dialog`,
+ templateUrl: `./editor-embed-dialog.component.html`,
+ styleUrls: [`editor-embed-dialog.component.scss`]
+})
+export class EditorEmbedDialogComponent {
+ public embed: EditorEmbedData;
+
+ public constructor(
+ @Inject(MAT_DIALOG_DATA) public data: EditorEmbedDialogInput,
+ private dialogRef: MatDialogRef
+ ) {
+ this.embed = data.embed;
+ }
+
+ public cancel(): void {
+ this.dialogRef.close({ action: `cancel` });
+ }
+
+ public save(): void {
+ this.dialogRef.close({ action: `set-embed`, embed: this.embed });
+ }
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.html b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.html
new file mode 100644
index 0000000000..29dbf9143e
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.html
@@ -0,0 +1,8 @@
+Edit HTML content
+
+
+
+
+
+
+
diff --git a/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.scss b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.scss
new file mode 100644
index 0000000000..b8f7dd5262
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.scss
@@ -0,0 +1,3 @@
+textarea {
+ font-size: 16px;
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.ts b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.ts
new file mode 100644
index 0000000000..c5b6150f78
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-html-dialog/editor-html-dialog.component.ts
@@ -0,0 +1,52 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+export interface EditorHtmlDialogOutput {
+ action: `cancel` | `set`;
+ html?: string;
+}
+
+@Component({
+ selector: `os-editor-html-dialog`,
+ templateUrl: `./editor-html-dialog.component.html`,
+ styleUrls: [`./editor-html-dialog.component.scss`]
+})
+export class EditorHtmlDialogComponent {
+ public isUpdate: boolean;
+
+ public constructor(
+ @Inject(MAT_DIALOG_DATA) public data: string,
+ private dialogRef: MatDialogRef
+ ) {
+ this.data = this.formatHtml(this.data);
+ }
+
+ // https://stackoverflow.com/a/60338028
+ public formatHtml(html: string): string {
+ const tab = `\t`;
+ let result = ``;
+ let indent = ``;
+
+ html.split(/>\s*\r\n`;
+
+ if (element.match(/^]*[^\/]$/) && !element.startsWith(`input`)) {
+ indent += tab;
+ }
+ });
+
+ return result.substring(1, result.length - 3);
+ }
+
+ public cancel(): void {
+ this.dialogRef.close({ action: `cancel` });
+ }
+
+ public save(): void {
+ this.dialogRef.close({ action: `set`, html: this.data });
+ }
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.html b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.html
new file mode 100644
index 0000000000..086e12447a
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.html
@@ -0,0 +1,27 @@
+Insert/Edit Link
+
+
+
+
+
diff --git a/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.scss b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.scss
new file mode 100644
index 0000000000..bc76a27e25
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+ width: 100%;
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.ts b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.ts
new file mode 100644
index 0000000000..17d8b77dd5
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-image-dialog/editor-image-dialog.component.ts
@@ -0,0 +1,41 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+interface EditorImageData {
+ src: string;
+ alt: string;
+ title: string;
+}
+
+interface EditorImageDialogInput {
+ image?: EditorImageData;
+}
+
+export interface EditorImageDialogOutput {
+ action: `cancel` | `set-image`;
+ image?: EditorImageData;
+}
+
+@Component({
+ selector: `os-editor-image-dialog`,
+ templateUrl: `./editor-image-dialog.component.html`,
+ styleUrls: [`editor-image-dialog.component.scss`]
+})
+export class EditorImageDialogComponent {
+ public image: EditorImageData;
+
+ public constructor(
+ @Inject(MAT_DIALOG_DATA) public data: EditorImageDialogInput,
+ private dialogRef: MatDialogRef
+ ) {
+ this.image = data.image;
+ }
+
+ public cancel(): void {
+ this.dialogRef.close({ action: `cancel` });
+ }
+
+ public save(): void {
+ this.dialogRef.close({ action: `set-image`, image: this.image });
+ }
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.html b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.html
new file mode 100644
index 0000000000..f24dc1d19a
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.html
@@ -0,0 +1,35 @@
+Insert/Edit Link
+
+
+
+ URL
+
+
+
+
+
+ @if (data.needsText) {
+
+ Text to display
+
+
+ }
+
+
+
+
+ Open link in
+
+
+
+
+
+ @if (isUpdate) {
+
+ }
+
+
diff --git a/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.scss b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.scss
new file mode 100644
index 0000000000..bc76a27e25
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.scss
@@ -0,0 +1,3 @@
+mat-form-field {
+ width: 100%;
+}
diff --git a/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.ts b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.ts
new file mode 100644
index 0000000000..e3d2c7e113
--- /dev/null
+++ b/client/src/app/ui/modules/editor/components/editor-link-dialog/editor-link-dialog.component.ts
@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+
+interface EditorLinkDialogInput {
+ link?: { href: string; target?: string };
+ needsText?: boolean;
+}
+
+export interface EditorLinkDialogOutput {
+ action: `remove-link` | `cancel` | `set-link`;
+ link?: { href: string; target?: string };
+ text?: string;
+}
+
+@Component({
+ selector: `os-editor-link-dialog`,
+ templateUrl: `./editor-link-dialog.component.html`,
+ styleUrls: [`editor-link-dialog.component.scss`]
+})
+export class EditorLinkDialogComponent {
+ public isUpdate: boolean;
+
+ public link: { href: string; target?: string };
+
+ public text = ``;
+
+ public constructor(
+ @Inject(MAT_DIALOG_DATA) public data: EditorLinkDialogInput,
+ private dialogRef: MatDialogRef
+ ) {
+ this.link = data.link;
+ this.isUpdate = !!data.link && !!data.link.href;
+ if (!this.link.target) {
+ this.link.target = `_self`;
+ }
+ }
+
+ public removeLink(): void {
+ this.dialogRef.close({ action: `remove-link` });
+ }
+
+ public cancel(): void {
+ this.dialogRef.close({ action: `cancel` });
+ }
+
+ public save(): void {
+ if (this.link.href && !/^[a-zA-Z]+:\/\//.test(this.link.href)) {
+ this.link.href = `http://` + this.link.href;
+ }
+
+ if (this.data.needsText) {
+ this.dialogRef.close({ action: `set-link`, link: this.link, text: this.text || this.link });
+ } else {
+ this.dialogRef.close({ action: `set-link`, link: this.link });
+ }
+ }
+}
diff --git a/client/src/app/ui/modules/editor/components/editor/editor.component.html b/client/src/app/ui/modules/editor/components/editor/editor.component.html
index 1a8d066eb0..9f3e609147 100644
--- a/client/src/app/ui/modules/editor/components/editor/editor.component.html
+++ b/client/src/app/ui/modules/editor/components/editor/editor.component.html
@@ -1,3 +1,287 @@
-@if (hasInitialized | async) {
-
-}
+
+ @if (editorReady) {
+
+ }
+
+
+