MinHeight, Toolbar toggle, style for combobox

Wino.Mail/Dialogs/SignatureEditorDialog.xaml

@@ -162,7 +162,11 @@
                 </AppBarButton>
 
                 <AppBarElementContainer VerticalAlignment="Center">
-                    <ComboBox x:Name="AlignmentListView" SelectionChanged="AlignmentChanged">
+                    <ComboBox
+                        x:Name="AlignmentListView"
+                        Background="Transparent"
+                        BorderBrush="Transparent"
+                        SelectionChanged="AlignmentChanged">
                         <ComboBoxItem Tag="left">
                             <StackPanel Orientation="Horizontal" Spacing="8">
                                 <Viewbox Width="16">
@@ -229,34 +233,17 @@
                         <PathIcon Data="{StaticResource EmojiPathIcon}" />
                     </AppBarButton.Icon>
                 </AppBarButton>
-                <AppBarButton
+
-                    x:Name="LinkButton"
+                <AppBarToggleButton
+                    x:Name="WebviewToolBarButton"
                     Width="48"
-                    Click="LinkButtonClicked"
+                    Click="WebViewToggleButtonClicked"
-                    FrameworkElement.AllowFocusOnInteraction="True"
+                    Label="Webview ToolBar"
-                    Label="Add HyperLink"
+                    ToolTipService.ToolTip="Webview ToolBar">
-                    ToolTipService.ToolTip="Add HyperLink">
+                    <AppBarToggleButton.Icon>
-                    <AppBarButton.Flyout>
+                        <PathIcon Data="{StaticResource WebviewToolBarPathIcon}" />
-                        <Flyout x:Name="HyperlinkFlyout">
+                    </AppBarToggleButton.Icon>
-                            <StackPanel Width="250" Spacing="6">
+                </AppBarToggleButton>
-                                <TextBox x:Name="HyperlinkTextBox" Header="Text" />
-                                <TextBox
-                                    x:Name="LinkUrlTextBox"
-                                    Header="Link"
-                                    PlaceholderText="https://" />
-                                <Button
-                                    x:Name="AddHyperlinkButton"
-                                    Margin="0,6"
-                                    HorizontalAlignment="Stretch"
-                                    Click="HyperlinkAddClicked"
-                                    Content="{x:Bind domain:Translator.AddHyperlink}" />
-                            </StackPanel>
-                        </Flyout>
-                    </AppBarButton.Flyout>
-                    <AppBarButton.Icon>
-                        <PathIcon Data="{StaticResource AddLinkPathIcon}" />
-                    </AppBarButton.Icon>
-                </AppBarButton>
             </CommandBar>
             <Border
                 Grid.Row="1"

Wino.Mail/Dialogs/SignatureEditorDialog.xaml.cs

@@ -122,14 +122,6 @@ namespace Wino.Dialogs
             Hide();
         }
 
-        private async void HyperlinkAddClicked(object sender, RoutedEventArgs e)
-        {
-            await InvokeScriptSafeAsync($"addHyperlink('{LinkUrlTextBox.Text}')");
-
-            LinkUrlTextBox.Text = string.Empty;
-            HyperlinkFlyout.Hide();
-        }
-
         private async void BoldButtonClicked(object sender, RoutedEventArgs e)
         {
             await InvokeScriptSafeAsync("editor.execCommand('bold')");
@@ -253,13 +245,6 @@ namespace Wino.Dialogs
             return string.Empty;
         }
 
-        private async void LinkButtonClicked(object sender, RoutedEventArgs e)
-        {
-            HyperlinkTextBox.Text = await TryGetSelectedTextAsync();
-
-            HyperlinkFlyout.ShowAt(LinkButton);
-        }
-
         private async Task UpdateEditorThemeAsync()
         {
             await _domLoadedTask.Task;
@@ -373,5 +358,11 @@ namespace Wino.Dialogs
         private void SignatureNameTextBoxTextChanged(object sender, TextChangedEventArgs e) => IsPrimaryButtonEnabled = !string.IsNullOrWhiteSpace(SignatureNameTextBox.Text);
 
         private void InvertComposerThemeClicked(object sender, RoutedEventArgs e) => IsComposerDarkMode = !IsComposerDarkMode;
+
+        private async void WebViewToggleButtonClicked(object sender, RoutedEventArgs e)
+        {
+            var enable = WebviewToolBarButton.IsChecked == true ? "true" : "false";
+            await InvokeScriptSafeAsync($"toggleToolbar('{enable}');");
+        }
     }
 }

Wino.Mail/JS/editor.html

@@ -24,9 +24,13 @@
             border-radius: initial;
         }
 
+        .jodit-wysiwyg {
+            min-height: 200px
+        }
+
         /* Hide taskbar in css. Should not be hidden from configuration, because it's used to sync state with native buttons. */
         .jodit-toolbar__box {
-            /* display: none; */
+            display: none;
         }
 
         body {

Wino.Mail/JS/editor.js

@@ -1,7 +1,7 @@
 const editor = Jodit.make("#editor", {
     "useSearch": false,
     "toolbar": true,
-    "buttons": "bold,italic,underline,strikethrough,eraser,ul,ol,font,fontsize,paragraph,indent,outdent,left,brush",
+    "buttons": "bold,italic,underline,strikethrough,brush,ul,ol,font,fontsize,paragraph,image,link,indent,outdent,left",
     "inline": true,
     "toolbarAdaptive": false,
     "toolbarInlineForSelection": false,
@@ -14,6 +14,7 @@ const editor = Jodit.make("#editor", {
         "insertImageAsBase64URI": true
     },
     "enter": "DIV",
+    "minHeight": 200
 });
 
 // Handle the image input change event
@@ -86,23 +87,12 @@ function SetDarkEditor() {
     DarkReader.enable();
 }
 
-//function getSelectedText() {
+function toggleToolbar(enable) {
-//    var range = quill.getSelection();
+    const toolbar = document.querySelector('.jodit-toolbar__box');
-//    if (range) {
+    if (enable == 'true') {
-//        if (range.length == 0) {
+        toolbar.style.display = 'flex';
-
+    }
-//        }
+    else {
-//        else {
+        toolbar.style.display = 'none';
-//            return quill.getText(range.index, range.length);
+    }
-//        }
+}
-//    }
-//}
-
-//function addHyperlink(url) {
-//    var range = quill.getSelection();
-
-//    if (range) {
-//        quill.formatText(range.index, range.length, 'link', url);
-//        quill.setSelection(0, 0);
-//    }
-//}