Supports expanded/collapsed signatures

linagora · Sep 11, 2023 · 0eccdb2 · 0eccdb2
1 parent 11cf392
commit 0eccdb2
Show file tree

Hide file tree

Showing 8 changed files with 187 additions and 24 deletions.
diff --git a/lib/assets/summernote-no-plugins.html b/lib/assets/summernote-no-plugins.html
@@ -28,6 +28,44 @@
   .note-frame {
       border-radius: 0px;
   }
+  .tmail-signature {
+    text-align: left;
+    margin: 16px 0px 16px 0px;
+  }
+
+  .tmail-signature-button,
+  .tmail-signature-button * {
+    box-sizing: border-box;
+  }
+
+  .tmail-signature-button {
+    padding: 6px 40px 6px 16px;
+    border-radius: 4px;
+    color: #fff;
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 11.8319L5.53383 8.1098C5.18027 7.81516 4.6548 7.86293 4.36016 8.21649C4.06553 8.57006 4.1133 9.09553 4.46686 9.39016L9.46686 13.5568C9.7759 13.8144 10.2248 13.8144 10.5338 13.5568L15.5338 9.39016C15.8874 9.09553 15.9352 8.57006 15.6405 8.21649C15.3459 7.86293 14.8204 7.81516 14.4669 8.1098L10.0003 11.8319Z' fill='%23AEAEC0'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: right 16px center;
+    background-color: #FFFFFF;
+    border-radius: 36px;
+    border-style: solid;
+    border-color: var(--m-3-syslight-outline-shadow-outline-variant, #cac4d0);
+    border-width: 0.5px;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 0;
+    position: relative;
+    cursor: pointer;
+    color: var(--m-3-syslight-tetirary-tertiary, #8c9caf);
+    text-align: left;
+    font: var(--m-3-body-large-2, 400 17px/24px "Inter", sans-serif);
+  }
+
+  .tmail-signature-content {
+    padding: 12px;
+    overflow: hidden;
+  }
 </style>
 </body>
 </html>
diff --git a/lib/assets/summernote.html b/lib/assets/summernote.html
@@ -11,10 +11,11 @@
   <script src="summernote-lite.min.js"></script>
 </head>
 <body>
-<div id="summernote-2"></div>
+<div id="summernote-2"><!--blockQuotedContent--></div>
 <!--summernote at mention plugin-->
 <script src="plugins/summernote-at-mention/summernote-at-mention.js"></script>
 <!--minor styling to improve editor design-->
+<!--customBodyCssStyle-->
 <style>
   body {
       display: block;
@@ -26,6 +27,44 @@
   .note-frame {
       border-radius: 0px;
   }
+  .tmail-signature {
+    text-align: left;
+    margin: 16px 0px 16px 0px;
+  }
+
+  .tmail-signature-button,
+  .tmail-signature-button * {
+    box-sizing: border-box;
+  }
+
+  .tmail-signature-button {
+    padding: 6px 40px 6px 16px;
+    border-radius: 4px;
+    color: #fff;
+    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 11.8319L5.53383 8.1098C5.18027 7.81516 4.6548 7.86293 4.36016 8.21649C4.06553 8.57006 4.1133 9.09553 4.46686 9.39016L9.46686 13.5568C9.7759 13.8144 10.2248 13.8144 10.5338 13.5568L15.5338 9.39016C15.8874 9.09553 15.9352 8.57006 15.6405 8.21649C15.3459 7.86293 14.8204 7.81516 14.4669 8.1098L10.0003 11.8319Z' fill='%23AEAEC0'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-position: right 16px center;
+    background-color: #FFFFFF;
+    border-radius: 36px;
+    border-style: solid;
+    border-color: var(--m-3-syslight-outline-shadow-outline-variant, #cac4d0);
+    border-width: 0.5px;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+    justify-content: flex-start;
+    flex-shrink: 0;
+    position: relative;
+    cursor: pointer;
+    color: var(--m-3-syslight-tetirary-tertiary, #8c9caf);
+    text-align: left;
+    font: var(--m-3-body-large-2, 400 17px/24px "Inter", sans-serif);
+  }
+
+  .tmail-signature-content {
+    padding: 12px;
+    overflow: hidden;
+  }
 </style>
 </body>
 </html>
diff --git a/lib/src/html_editor_controller_mobile.dart b/lib/src/html_editor_controller_mobile.dart
@@ -77,6 +77,10 @@ class HtmlEditorController extends unsupported.HtmlEditorController {
     return text ?? '';
   }
 
+  /// Gets the text from the editor and returns it as a [String]. With signature content
+  @override
+  Future<String> getTextWithSignatureContent() => Future.value('');
+
   /// Sets the text of the editor. Some pre-processing is applied to convert
   /// [String] elements like "\n" to HTML elements.
   @override

diff --git a/lib/src/html_editor_controller_unsupported.dart b/lib/src/html_editor_controller_unsupported.dart
@@ -93,6 +93,9 @@ class HtmlEditorController {
   /// Gets the text from the editor and returns it as a [String].
   Future<String> getText() => Future.value('');
 
+  /// Gets the text from the editor and returns it as a [String]. With signature content
+  Future<String> getTextWithSignatureContent() => Future.value('');
+
   /// Gets the selected HTML from the editor. You should use
   /// [controller.editorController.getSelectedText()] on mobile.
   ///

diff --git a/lib/src/html_editor_controller_web.dart b/lib/src/html_editor_controller_web.dart
@@ -6,6 +6,7 @@ import 'package:flutter/foundation.dart';
 import 'package:html_editor_enhanced/html_editor.dart';
 import 'package:html_editor_enhanced/src/html_editor_controller_unsupported.dart'
     as unsupported;
+import 'package:html_editor_enhanced/utils/icon_utils.dart';
 import 'package:meta/meta.dart';
 
 /// Controller for web
@@ -66,6 +67,21 @@ class HtmlEditorController extends unsupported.HtmlEditorController {
     return text;
   }
 
+  /// Gets the text with signature content from the editor and returns it as a [String].
+  @override
+  Future<String> getTextWithSignatureContent() async {
+    _evaluateJavascriptWeb(data: {'type': 'toIframe: getTextWithSignatureContent'});
+    var e = await html.window.onMessage.firstWhere(
+            (element) => json.decode(element.data)['type'] == 'toDart: getTextWithSignatureContent');
+    String text = json.decode(e.data)['text'];
+    if (processOutputHtml &&
+        (text.isEmpty ||
+            text == '<p></p>' ||
+            text == '<p><br></p>' ||
+            text == '<p><br/></p>')) text = '';
+    return text;
+  }
+
   @override
   Future<String> getSelectedTextWeb({bool withHtmlTags = false}) async {
     if (withHtmlTags) {
@@ -360,7 +376,13 @@ class HtmlEditorController extends unsupported.HtmlEditorController {
   @override
   void insertSignature(String signature) {
     _evaluateJavascriptWeb(
-        data: {'type': 'toIframe: insertSignature', 'signature': signature});
+      data: {
+        'type': 'toIframe: insertSignature',
+        'signature': signature,
+        'iconCollapsed' : IconUtils.chevronDownSVGIconUrlEncoded,
+        'iconExpanded' : IconUtils.chevronUpSVGIconUrlEncoded
+      }
+    );
   }
 
   @override

diff --git a/lib/src/widgets/html_editor_widget_web.dart b/lib/src/widgets/html_editor_widget_web.dart
@@ -235,6 +235,12 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
                 var str = \$('#summernote-2').summernote('code');
                 window.parent.postMessage(JSON.stringify({"type": "toDart: getText", "text": str}), "*");
               }
+              if (data["type"].includes("getTextWithSignatureContent")) {
+                ${JavascriptUtils.jsHandleReplaceSignatureContent}
+                
+                var str = \$('#summernote-2').summernote('code');
+                window.parent.postMessage(JSON.stringify({"type": "toDart: getTextWithSignatureContent", "text": str}), "*");
+              }
               if (data["type"].includes("getHeight")) {
                 var height = document.body.scrollHeight;
                 window.parent.postMessage(JSON.stringify({"view": "$createdViewId", "type": "toDart: htmlHeight", "height": height}), "*");

diff --git a/lib/utils/icon_utils.dart b/lib/utils/icon_utils.dart
@@ -0,0 +1,10 @@
+
+class IconUtils {
+  static const String chevronUpSVGIconUrlEncoded = '''
+    url("data:image/svg+xml,%3Csvg class='chevron-down' width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M14.5352 11.9709C14.8347 12.2276 15.2857 12.193 15.5424 11.8934C15.7991 11.5939 15.7644 11.143 15.4649 10.8863L10.4649 6.60054C10.1974 6.37127 9.8027 6.37127 9.53521 6.60054L4.53521 10.8863C4.23569 11.143 4.201 11.5939 4.45773 11.8934C4.71446 12.193 5.16539 12.2276 5.46491 11.9709L10.0001 8.08364L14.5352 11.9709Z' fill='%23AEAEC0' /%3E%3C/svg%3E")
+  ''';
+
+  static const String chevronDownSVGIconUrlEncoded = '''
+    url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.0003 11.8319L5.53383 8.1098C5.18027 7.81516 4.6548 7.86293 4.36016 8.21649C4.06553 8.57006 4.1133 9.09553 4.46686 9.39016L9.46686 13.5568C9.7759 13.8144 10.2248 13.8144 10.5338 13.5568L15.5338 9.39016C15.8874 9.09553 15.9352 8.57006 15.6405 8.21649C15.3459 7.86293 14.8204 7.81516 14.4669 8.1098L10.0003 11.8319Z' fill='%23AEAEC0'/%3E%3C/svg%3E%0A")
+  ''';
+}
diff --git a/lib/utils/javascript_utils.dart b/lib/utils/javascript_utils.dart
@@ -2,33 +2,74 @@
 class JavascriptUtils {
 
   static const String jsHandleInsertSignature = '''
-    const nodeSignature = document.getElementsByClassName('tmail-signature');
-    if (nodeSignature.length <= 0) {
-      const nodeEditor = document.getElementsByClassName('note-editable')[0];
-      
-      const divSignature = document.createElement('div');
-      divSignature.setAttribute('class', 'tmail-signature');
-      divSignature.innerHTML = data['signature'];
-      
-      const listHeaderQuotedMessage = nodeEditor.querySelectorAll('cite');
-      const listQuotedMessage = nodeEditor.querySelectorAll('blockquote');
-      
-      if (listHeaderQuotedMessage.length > 0) {
-        nodeEditor.insertBefore(divSignature, listHeaderQuotedMessage[0]);
-      } else if (listQuotedMessage.length > 0) {
-        nodeEditor.insertBefore(divSignature, listQuotedMessage[0]);
-      } else {
-        nodeEditor.appendChild(divSignature);
-      }
+    let nodeSignature = document.querySelector('.tmail-signature');
+    if (nodeSignature) {
+      nodeSignature.innerHTML = data['signature'];
     } else {
-      nodeSignature[0].innerHTML = data['signature'];
+      let nodeEditor = document.querySelector('.note-editable');
+      if (nodeEditor) {
+        let signatureContainer = document.createElement('div');
+        signatureContainer.setAttribute('class', 'tmail-signature');
+        
+        let signatureContent = document.createElement('div');
+        signatureContent.setAttribute('class', 'tmail-signature-content');
+        signatureContent.innerHTML = data['signature'];
+        signatureContent.style.display = 'none';
+        
+        let signatureButton = document.createElement('button');
+        signatureButton.setAttribute('class', 'tmail-signature-button');
+        signatureButton.textContent = 'Signature';
+        
+        signatureButton.addEventListener('click', function handleClick(event) {
+          let contentDiv = document.querySelector('.tmail-signature-content');
+          let buttonSignature = document.querySelector('.tmail-signature-button');
+          if (contentDiv && buttonSignature) {
+            if (contentDiv.style.display === 'block') {
+              contentDiv.style.display = 'none';
+              buttonSignature.style.backgroundImage = data['iconCollapsed'];
+            } else {
+              contentDiv.style.display = 'block';
+              buttonSignature.style.backgroundImage = data['iconExpanded'];
+            }
+          }
+        });
+        
+        signatureContainer.appendChild(signatureButton);
+        signatureContainer.appendChild(signatureContent);
+        
+        let headerQuotedMessage = nodeEditor.querySelector('cite');
+        let quotedMessage = nodeEditor.querySelector('blockquote');
+        
+        if (headerQuotedMessage) {
+          nodeEditor.insertBefore(signatureContainer, headerQuotedMessage);
+        } else if (quotedMessage) {
+          nodeEditor.insertBefore(signatureContainer, quotedMessage);
+        } else {
+          nodeEditor.appendChild(signatureContainer);
+        }
+      }
     }
   ''';
 
   static const String jsHandleRemoveSignature = '''
-    const nodeSignature = document.getElementsByClassName('tmail-signature');
-    if (nodeSignature.length > 0) {
-      nodeSignature[0].remove();
+    let nodeSignature = document.querySelector('.tmail-signature');
+    if (nodeSignature) {
+      nodeSignature.remove();
+    }
+  ''';
+
+  static const String jsHandleReplaceSignatureContent = '''
+    let nodeSignature = document.querySelector('.tmail-signature');
+    let signatureContent = document.querySelector('.tmail-signature-content');
+    if (nodeSignature && signatureContent) {
+      signatureContent.className = 'tmail-signature';
+      signatureContent.style.display = 'block';
+        
+      if (nodeSignature.outerHTML) {
+        nodeSignature.outerHTML = signatureContent.outerHTML;
+      } else { 
+        nodeSignature.parentNode.replaceChild(signatureContent, nodeSignature); 
+      }
     }
   ''';