SVYX-976 - SmartDocument editor readOnly not working in Listview comp…

…onent
Servoy · Oct 30, 2024 · 1ebb917 · 1ebb917
1 parent 5d54736
commit 1ebb917
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/component/projects/smartdocumenteditor/src/smartdocumenteditor/smartdocumenteditor.ts b/component/projects/smartdocumenteditor/src/smartdocumenteditor/smartdocumenteditor.ts
@@ -30,7 +30,7 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
     @Input() showToolbar: boolean;
     @Input() overWriteTabForEditor: boolean;
     @Input() styleClass: string;
-    @Input() readOnly: boolean;
+    @Input() editable: boolean;
     @Input() responsiveHeight: number;
     @Input() visible: boolean;
     @Input() viewType: string;
@@ -172,12 +172,12 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
                             this.renderer.removeClass(this.getNativeElement(), 'ckeditor-documentview');
                         }
                         break;
-                    case 'readOnly':
+                    case 'editable':
                         if (this.editorInstance) {
                             if (change.currentValue) {
-                                this.editorInstance.enableReadOnlyMode('readonly');
-                            } else {
                                 this.editorInstance.disableReadOnlyMode('readonly');
+                            } else {
+                                this.editorInstance.enableReadOnlyMode('readonly');
                             }
                         }
                         break;
@@ -320,16 +320,16 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
 
         if (this.onActionMethodID) {
             this.editorInstance.listenTo(this.editorInstance.editing.view.document, 'click', (evt) => {
-                if (this.readOnly) {
+                if (!this.editable) {
                     this.onActionMethodID(this.servoyService.createJSEvent({ target: this.getNativeElement() } as EventLike, 'onAction'));
                 }
             })
         }
 
-        if (this.readOnly) {
-            this.editorInstance.enableReadOnlyMode('readonly');
-        } else {
+        if (this.editable) {
             this.editorInstance.disableReadOnlyMode('readonly');
+        } else {
+            this.editorInstance.enableReadOnlyMode('readonly');
         }
         if (this.previewHTMLHTML) {
             this.executePreviewHTML(this.previewHTMLHTML, this.previewHTMLreadOnly);
@@ -484,7 +484,7 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
 
 
     forceSaveData(data: string) {
-        if (!this.readOnly && this.editorInstance && !this.prePreviewData) {
+        if (this.editable && this.editorInstance && !this.prePreviewData) {
             this.dataProviderID = data;
             this.dataProviderIDChange.emit(this.dataProviderID);
         }
@@ -500,7 +500,7 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
 
     addInputAtCursor(input: string) {
         if (input) {
-            if (this.readOnly || !this.editorInstance) {
+            if (!this.editable || !this.editorInstance) {
                 return false;
             }
             this.editorInstance.execute('input', { text: input })
@@ -510,7 +510,7 @@ export class SmartDocumentEditor extends ServoyBaseComponent<HTMLDivElement> {
 
     addTagAtCursor(marker: string, tag: string): boolean {
         if (tag) {
-            if (this.readOnly || !this.editorInstance) {
+            if (!this.editable || !this.editorInstance) {
                 return false;
             }
 

diff --git a/component/smartdocumenteditor/smartdocumenteditor.js b/component/smartdocumenteditor/smartdocumenteditor.js
@@ -41,12 +41,12 @@ function($sabloConstants, $sabloApplication, $window, $utils, $timeout) {
                             }
                         }
                         break;
-                    case "readOnly":
+                    case "editable":
                         if($scope.editor) {
-                            if(!!value) {
-                                $scope.editor.enableReadOnlyMode('readonly');
-                            } else {
+                            if(value) {
                                 $scope.editor.disableReadOnlyMode('readonly');
+                            } else {
+                                $scope.editor.enableReadOnlyMode('readonly');
                             }
                         }
                         break;
@@ -156,8 +156,8 @@ function($sabloConstants, $sabloApplication, $window, $utils, $timeout) {
               */
             function forceSaveData( data ) {
                 if($scope.editor) {
-                    if(!$scope.model.readOnly && $scope.editor && !$scope.prePreviewData) {
-                        console.debug( 'Editor push Trigger (ID: ' + $scope.editor.id + ', readOnly: ' + $scope.model.readOnly + ', formname: ' +  $scope.$parent['formname'] + ') , pushing data');
+                    if($scope.model.editable && $scope.editor && !$scope.prePreviewData) {
+                        console.debug( 'Editor push Trigger (ID: ' + $scope.editor.id + ', editable: ' + $scope.model.editable + ', formname: ' +  $scope.$parent['formname'] + ') , pushing data');
                         $scope.model.dataProviderID = data;
                         $scope.svyServoyapi.apply('dataProviderID');
                     }
@@ -760,7 +760,7 @@ function($sabloConstants, $sabloApplication, $window, $utils, $timeout) {
 
                             if($scope.handlers.onActionMethodID) {
                                 editor.listenTo(editor.editing.view.document, 'click', (evt) => {
-                                    if($scope.model.readOnly) {
+                                    if(!$scope.model.editable) {
                                         $scope.handlers.onActionMethodID(createJSEvent(event, 'onAction'));
                                     }
                                 })
@@ -821,7 +821,7 @@ function($sabloConstants, $sabloApplication, $window, $utils, $timeout) {
              */
             $scope.api.addInputAtCursor = function(input) {
                 if(input) {
-                    if($scope.model.readOnly || !$scope.editor) {
+                    if(!$scope.model.editable || !$scope.editor) {
                         return false;
                     }
                     $scope.editor.execute('input', { text: input })
@@ -838,7 +838,7 @@ function($sabloConstants, $sabloApplication, $window, $utils, $timeout) {
              */
             $scope.api.addTagAtCursor = function(marker, tag) {
                 if(tag) {
-                    if($scope.model.readOnly || !$scope.editor) {
+                    if(!$scope.model.editable || !$scope.editor) {
                         return false;
                     }
 

diff --git a/component/smartdocumenteditor/smartdocumenteditor.spec b/component/smartdocumenteditor/smartdocumenteditor.spec
@@ -122,7 +122,7 @@
         "showToolbar": { "type": "boolean", "default": true },
         "overWriteTabForEditor": { "type": "boolean", "default": true, "tags": {"scope": "design"} },
         "styleClass": {"type": "styleclass"},
-        "readOnly": { "type": "protected", "blockingOn": true, "default": false, "for": [ "dataProviderID", "onDataChangeMethodID" ], "tags": {"scope": "runtime"} },
+        "editable" : { "type": "protected", "blockingOn": false, "default": true,"for": ["dataProviderID","onDataChangeMethodID"] },
         "responsiveHeight": { "type": "int", "default": 500, "tags": {"doc": "Editor's height to be set in a responsive form. When responsiveHeight is set to 0, the editor will use 100% height of the parent container. When value is set to -1 it will be based on the content."} },
         "minHeight": { "type": "int", "default": null, "tags": {"doc": "Editor's min height. It's none by default. So when you want the height to be resposive and would like to have a min height for the editor, set responsiveHeight as 0 and this property with the value that fits your needs."} },
         "visible": "visible",