Supports expanded/collapsed signatures

linagora · Sep 14, 2023 · 21ab300 · 21ab300
1 parent 11cf392
commit 21ab300
Show file tree

Hide file tree

Showing 11 changed files with 279 additions and 42 deletions.
diff --git a/lib/assets/summernote-no-plugins.html b/lib/assets/summernote-no-plugins.html
@@ -12,7 +12,7 @@
     <!--darkCSS-->
 </head>
 <body>
-<div id="summernote-2"><!--blockQuotedContent--></div>
+<div id="summernote-2"></div>
 <!--headString-->
 <!--summernoteScripts-->
 <!--minor styling to improve editor design-->
@@ -28,6 +28,68 @@
   .note-frame {
       border-radius: 0px;
   }
+
+  blockquote {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-left: 5px solid #eee;
+  }
+
+  pre {
+    display: block;
+    padding: 10px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: auto;
+  }
+
+  .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
@@ -15,6 +15,7 @@
 <!--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,68 @@
   .note-frame {
       border-radius: 0px;
   }
+
+  blockquote {
+    margin-left: 8px;
+    margin-right: 8px;
+    padding-left: 12px;
+    padding-right: 12px;
+    border-left: 5px solid #eee;
+  }
+
+  pre {
+    display: block;
+    padding: 10px;
+    margin: 0 0 10px;
+    font-size: 13px;
+    line-height: 1.5;
+    color: #333;
+    word-break: break-all;
+    word-wrap: break-word;
+    background-color: #f5f5f5;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    overflow: auto;
+  }
+
+  .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
@@ -66,6 +66,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 +375,11 @@ class HtmlEditorController extends unsupported.HtmlEditorController {
   @override
   void insertSignature(String signature) {
     _evaluateJavascriptWeb(
-        data: {'type': 'toIframe: insertSignature', 'signature': signature});
+      data: {
+        'type': 'toIframe: insertSignature',
+        'signature': signature,
+      }
+    );
   }
 
   @override

diff --git a/lib/src/html_editor_mobile.dart b/lib/src/html_editor_mobile.dart
@@ -15,7 +15,6 @@ class HtmlEditor extends StatelessWidget {
     this.htmlToolbarOptions = const HtmlToolbarOptions(),
     this.otherOptions = const OtherOptions(),
     this.plugins = const [],
-    this.blockQuotedContent,
   }) : super(key: key);
 
   /// The controller that is passed to the widget, which allows multiple [HtmlEditor]
@@ -38,9 +37,6 @@ class HtmlEditor extends StatelessWidget {
   /// Sets the list of Summernote plugins enabled in the editor.
   final List<Plugins> plugins;
 
-  /// Content attach in editor when initial
-  final String? blockQuotedContent;
-
   @override
   Widget build(BuildContext context) {
     if (!kIsWeb) {

diff --git a/lib/src/html_editor_unsupported.dart b/lib/src/html_editor_unsupported.dart
@@ -11,7 +11,6 @@ class HtmlEditor extends StatelessWidget {
     this.htmlToolbarOptions = const HtmlToolbarOptions(),
     this.otherOptions = const OtherOptions(),
     this.plugins = const [],
-    this.blockQuotedContent,
   }) : super(key: key);
 
   /// The controller that is passed to the widget, which allows multiple [HtmlEditor]
@@ -34,9 +33,6 @@ class HtmlEditor extends StatelessWidget {
   /// Sets the list of Summernote plugins enabled in the editor.
   final List<Plugins> plugins;
 
-  /// Content attach in editor when initial
-  final String? blockQuotedContent;
-
   @override
   Widget build(BuildContext context) {
     return const Text('Unsupported in this environment');

diff --git a/lib/src/html_editor_web.dart b/lib/src/html_editor_web.dart
@@ -13,7 +13,6 @@ class HtmlEditor extends StatelessWidget {
     this.htmlToolbarOptions = const HtmlToolbarOptions(),
     this.otherOptions = const OtherOptions(),
     this.plugins = const [],
-    this.blockQuotedContent,
   }) : super(key: key);
 
   /// The controller that is passed to the widget, which allows multiple [HtmlEditor]
@@ -36,9 +35,6 @@ class HtmlEditor extends StatelessWidget {
   /// Sets the list of Summernote plugins enabled in the editor.
   final List<Plugins> plugins;
 
-  /// Content attach in editor when initial
-  final String? blockQuotedContent;
-
   @override
   Widget build(BuildContext context) {
     if (kIsWeb) {
@@ -51,7 +47,6 @@ class HtmlEditor extends StatelessWidget {
         htmlToolbarOptions: htmlToolbarOptions,
         otherOptions: otherOptions,
         initBC: context,
-        blockQuotedContent: blockQuotedContent,
       );
     } else {
       return const Text(

diff --git a/lib/src/widgets/html_editor_widget_web.dart b/lib/src/widgets/html_editor_widget_web.dart
@@ -24,7 +24,6 @@ class HtmlEditorWidget extends StatefulWidget {
     required this.htmlToolbarOptions,
     required this.otherOptions,
     required this.initBC,
-    this.blockQuotedContent,
   }) : super(key: key);
 
   final HtmlEditorController controller;
@@ -34,7 +33,6 @@ class HtmlEditorWidget extends StatefulWidget {
   final HtmlToolbarOptions htmlToolbarOptions;
   final OtherOptions otherOptions;
   final BuildContext initBC;
-  final String? blockQuotedContent;
 
   @override
   State<HtmlEditorWidget> createState() => _HtmlEditorWidgetWebState();
@@ -235,6 +233,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}), "*");
@@ -429,6 +433,7 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
           }
         }
         
+        ${JavascriptUtils.jsHandleOnClickSignature}
         ${JavascriptUtils.jsDetectBrowser}
         
         function onSelectionChange() {
@@ -516,8 +521,6 @@ class _HtmlEditorWidgetWebState extends State<HtmlEditorWidget> {
         .replaceFirst('<!--summernoteScripts-->', summernoteScripts)
         .replaceFirst('<!--customBodyCssStyle-->',
             widget.htmlEditorOptions.customBodyCssStyle)
-        .replaceFirst(
-            '<!--blockQuotedContent-->', widget.blockQuotedContent ?? '')
         .replaceFirst('"jquery.min.js"',
             '"assets/packages/html_editor_enhanced/assets/jquery.min.js"')
         .replaceFirst('"summernote-lite.min.css"',

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")
+  ''';
+}