diff --git a/src/app/components/components.module.ts b/src/app/components/components.module.ts
index a9ea8e5..1097a85 100644
--- a/src/app/components/components.module.ts
+++ b/src/app/components/components.module.ts
@@ -34,6 +34,8 @@ import {VersionModalComponent} from './version-modal/version-modal.component';
import {EditorPageRoutingModule} from '../pages/editor/editor-routing.module';
import {EditorPage} from '../pages/editor/editor.page';
import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
+import {WysiwygEditorComponent} from './editor/database/editors/wysiwyg/wysiwyg-editor.component';
+import {WysiwygModalComponent} from './editor/database/editors/wysiwyg/wysiwyg-modal.component';
@NgModule({
declarations: [
@@ -63,6 +65,8 @@ import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
VersionModalComponent,
EditorPage,
WysiwygComponent,
+ WysiwygEditorComponent,
+ WysiwygModalComponent,
],
imports: [
CommonModule,
@@ -103,6 +107,8 @@ import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
VersionModalComponent,
EditorPage,
WysiwygComponent,
+ WysiwygEditorComponent,
+ WysiwygModalComponent,
],
exports: [
NodePickerComponent,
@@ -131,6 +137,8 @@ import {WysiwygComponent} from './wysiwyg/wysiwyg.component';
VersionModalComponent,
EditorPage,
WysiwygComponent,
+ WysiwygEditorComponent,
+ WysiwygModalComponent,
]
})
export class ComponentsModule {}
diff --git a/src/app/components/editor/database/columns/columns.component.html b/src/app/components/editor/database/columns/columns.component.html
index cdfb9eb..d93cb16 100644
--- a/src/app/components/editor/database/columns/columns.component.html
+++ b/src/app/components/editor/database/columns/columns.component.html
@@ -28,6 +28,7 @@
Text
Number
Paragraph
+ Rich-Text
Boolean
Select
Multi-Select
diff --git a/src/app/components/editor/database/database.component.ts b/src/app/components/editor/database/database.component.ts
index 0010a94..bfa7b72 100644
--- a/src/app/components/editor/database/database.component.ts
+++ b/src/app/components/editor/database/database.component.ts
@@ -14,6 +14,7 @@ import {CurrencyRendererComponent} from './renderers/currency-renderer.component
import {BooleanRendererComponent} from './renderers/boolean-renderer.component';
import {EditorNodeContract} from '../../nodes/EditorNode.contract';
import {EditorService} from '../../../service/editor.service';
+import {WysiwygEditorComponent} from './editors/wysiwyg/wysiwyg-editor.component';
@Component({
selector: 'editor-database',
@@ -171,6 +172,8 @@ export class DatabaseComponent extends EditorNodeContract implements OnInit {
x.cellRendererFramework = CurrencyRendererComponent;
} else if ( x.Type === 'index' ) {
x.editable = false;
+ } else if ( x.Type === 'wysiwyg' ) {
+ x.cellEditorFramework = WysiwygEditorComponent;
}
return x;
diff --git a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts
new file mode 100644
index 0000000..9542c68
--- /dev/null
+++ b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-editor.component.ts
@@ -0,0 +1,61 @@
+import {ICellEditorAngularComp} from 'ag-grid-angular';
+import {AfterViewInit, Component, ElementRef, ViewChild} from '@angular/core';
+import {ICellEditorParams} from 'ag-grid-community';
+import {ModalController} from '@ionic/angular';
+import {WysiwygModalComponent} from './wysiwyg-modal.component';
+
+@Component({
+ selector: 'cell-editor-wysiwyg',
+ template: ``,
+ styles: [
+ `input {
+ width: 100%;
+ border: 1px solid grey;
+ }`
+ ],
+})
+export class WysiwygEditorComponent implements ICellEditorAngularComp, AfterViewInit {
+ private params: ICellEditorParams;
+ public value: string;
+
+ @ViewChild('input') input: ElementRef;
+
+ constructor(
+ protected modals: ModalController,
+ ) { }
+
+ agInit(params: ICellEditorParams): void {
+ this.params = params;
+ this.value = this.params.value;
+ }
+
+ getValue(): any {
+ return this.value;
+ }
+
+ ngAfterViewInit(): void {
+ setTimeout(() => {
+ this.modals.create({
+ component: WysiwygModalComponent,
+ componentProps: {
+ title: this.params.colDef.headerName,
+ value: this.value,
+ }
+ }).then(modal => {
+ modal.onDidDismiss().then(value => {
+ if ( typeof value.data === 'undefined' ) {
+ return;
+ }
+
+ this.value = String(value.data);
+ this.finishEdit();
+ });
+ modal.present();
+ });
+ });
+ }
+
+ finishEdit() {
+ this.params.stopEditing();
+ }
+}
diff --git a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.html b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.html
new file mode 100644
index 0000000..30b99e9
--- /dev/null
+++ b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.html
@@ -0,0 +1,24 @@
+
+
+ {{ title }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Save
+
diff --git a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.scss b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.ts b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.ts
new file mode 100644
index 0000000..0c99e63
--- /dev/null
+++ b/src/app/components/editor/database/editors/wysiwyg/wysiwyg-modal.component.ts
@@ -0,0 +1,26 @@
+import {Component, Input} from '@angular/core';
+import {ModalController} from '@ionic/angular';
+
+@Component({
+ selector: 'editor-wysiwyg-modal',
+ templateUrl: './wysiwyg-modal.component.html',
+ styleUrls: ['./wysiwyg-modal.component.scss'],
+})
+export class WysiwygModalComponent {
+ @Input() value = '';
+ @Input() title: string;
+
+ constructor(
+ protected modals: ModalController,
+ ) {}
+
+ dismissModal() {
+ this.modals.dismiss(this.value);
+ }
+
+ onContentsChanged(contents: string) {
+ if ( this.value !== contents ) {
+ this.value = contents;
+ }
+ }
+}
diff --git a/src/app/components/wysiwyg/wysiwyg.component.scss b/src/app/components/wysiwyg/wysiwyg.component.scss
index 8eb25b8..ce56a49 100644
--- a/src/app/components/wysiwyg/wysiwyg.component.scss
+++ b/src/app/components/wysiwyg/wysiwyg.component.scss
@@ -7,15 +7,17 @@
}
.toolbar-base {
- height: 40px;
+ min-height: 40px;
border: 1px solid lightgray;
border-radius: 5px;
display: flex;
flex-direction: row;
+ flex-wrap: wrap;
.toolbar-button {
height: calc(100% - 6px);
min-width: 30px;
+ min-height: 40px;
display: flex;
justify-content: center;
align-items: center;
@@ -29,6 +31,7 @@
.toolbar-sep {
height: 100%;
+ min-height: 40px;
width: 1px;
border: 1px solid lightgrey;
margin: 0 5px;
diff --git a/src/app/components/wysiwyg/wysiwyg.component.ts b/src/app/components/wysiwyg/wysiwyg.component.ts
index e89b897..d1773ef 100644
--- a/src/app/components/wysiwyg/wysiwyg.component.ts
+++ b/src/app/components/wysiwyg/wysiwyg.component.ts
@@ -14,9 +14,23 @@ export class WysiwygComponent implements OnInit {
public isFocused = false;
protected hadOneFocusOut = false;
public initialValue = '';
+ protected isEditOnly = false;
+
+ public get editonly() {
+ return this.isEditOnly;
+ }
+
+ @Input()
+ public set editonly(val: boolean) {
+ this.isEditOnly = val;
+ if ( this.isEditOnly && !this.readonly ) {
+ this.isFocused = true;
+ }
+ }
public get displayContents() {
- return this.contents.replace(/ `${val}`);
+ return (this.contents || 'Double-click to edit...').replace(/ `${val}`);
}
public isDark() {
@@ -34,6 +48,10 @@ export class WysiwygComponent implements OnInit {
@HostListener('document:keyup.escape', ['$event'])
onFocusOut(event) {
+ if ( this.isEditOnly ) {
+ return;
+ }
+
if ( !this.hadOneFocusOut ) {
this.hadOneFocusOut = true;
setTimeout(() => {