Use WebKitGtk to show the compile Markdown

src/iridium-window.c

@@ -17,8 +17,10 @@
  */
 
 #include <gtksourceview/gtksource.h>
+#include <webkit2/webkit2.h>
 
 #include "iridium-config.h"
+#include "iridium-markdown.h"
 #include "iridium-note.h"
 #include "iridium-note-row.h"
 #include "iridium-tag-row.h"
@@ -36,9 +38,14 @@ struct _IridiumWindow
   GtkWidget         *main_pane;
   GtkSearchBar      *search_bar;
   GtkSearchEntry    *search_entry;
+  GtkToggleButton   *toggle_html_view;
+  GtkRevealer       *html_view_revealer;
+  WebKitWebView     *html_view;
 
   GBinding          *title_binding;
   GBinding          *content_binding;
+
+  IridiumMarkdown   *markdown;
 };
 
 G_DEFINE_TYPE (IridiumWindow, iridium_window, GTK_TYPE_APPLICATION_WINDOW)
@@ -55,12 +62,30 @@ on_search_changed (IridiumWindow *self, GtkSearchEntry *entry)
   gtk_list_box_invalidate_filter (self->note_list);
 }
 
+static void
+on_markdown_compiled (GObject *object,
+                      GAsyncResult *result,
+                      gpointer user_data)
+{
+  IridiumWindow *window;
+  gchar *html;
+  GError *error = NULL;
+
+  window = IRIDIUM_WINDOW (user_data);
+  html = iridium_markdown_compile_finish (object, result, &error);
+  webkit_web_view_load_html (window->html_view, html, NULL);
+  g_free (html);
+}
+
 static void
 on_note_selected (IridiumWindow *self, IridiumNoteRow *row, gpointer user_data)
 {
   IridiumNote *note;
   GtkTextBuffer *buffer;
   GBindingFlags flags;
+  GtkTextIter start;
+  GtkTextIter end;
+  gchar *text;
 
   if (self->title_binding != NULL)
     g_clear_object (&self->title_binding);
@@ -76,6 +101,13 @@ on_note_selected (IridiumWindow *self, IridiumNoteRow *row, gpointer user_data)
   buffer = gtk_text_view_get_buffer (GTK_TEXT_VIEW (self->source_view));
   self->title_binding = g_object_bind_property (note, "title", self->title_entry, "text", flags);
   self->content_binding = g_object_bind_property (note, "content", buffer, "text", flags);
+
+  gtk_text_buffer_get_start_iter (buffer, &start);
+  gtk_text_buffer_get_end_iter (buffer, &end);
+  text = gtk_text_buffer_get_slice (buffer, &start, &end, FALSE);
+  iridium_markdown_compile_async (self->markdown, text, G_PRIORITY_DEFAULT, NULL,
+      on_markdown_compiled, self);
+  g_free (text);
 }
 
 static void
@@ -117,6 +149,7 @@ iridium_window_dispose (GObject *object)
   self = IRIDIUM_WINDOW (object);
   g_clear_object (&self->title_binding);
   g_clear_object (&self->content_binding);
+  g_clear_object (&self->markdown);
   G_OBJECT_CLASS (iridium_window_parent_class)->dispose (object);
 }
 
@@ -140,6 +173,9 @@ iridium_window_class_init (IridiumWindowClass *klass)
   gtk_widget_class_bind_template_child (widget_class, IridiumWindow, main_pane);
   gtk_widget_class_bind_template_child (widget_class, IridiumWindow, search_bar);
   gtk_widget_class_bind_template_child (widget_class, IridiumWindow, search_entry);
+  gtk_widget_class_bind_template_child (widget_class, IridiumWindow, html_view);
+  gtk_widget_class_bind_template_child (widget_class, IridiumWindow, html_view_revealer);
+  gtk_widget_class_bind_template_child (widget_class, IridiumWindow, toggle_html_view);
 
   gtk_widget_class_bind_template_callback (widget_class, on_tag_selected);
   gtk_widget_class_bind_template_callback (widget_class, on_note_selected);
@@ -160,12 +196,15 @@ iridium_window_init (IridiumWindow *self)
 
   self->title_binding = NULL;
   self->content_binding = NULL;
+  self->markdown = iridium_markdown_new ();
 
   action = g_simple_action_new ("search", NULL);
   g_action_map_add_action (G_ACTION_MAP (self), G_ACTION (action));
   g_signal_connect (action, "activate", G_CALLBACK (search_activated), self);
   g_object_unref (action);
 
+  g_object_bind_property (self->toggle_html_view, "active",
+                          self->html_view_revealer, "reveal-child", G_BINDING_DEFAULT);
   gtk_search_bar_connect_entry (self->search_bar, GTK_ENTRY (self->search_entry));
 
   notes[0] = iridium_note_new ("Hello", NULL);

src/iridium-window.ui

@@ -9,14 +9,13 @@
         <property name="show-close-button">True</property>
         <property name="title">Iridium</property>
         <child>
-          <object class="GtkMenuButton">
+          <object class="GtkToggleButton" id="toggle_html_view">
             <property name="visible">True</property>
-            <property name="use-popover">True</property>
             <child>
               <object class="GtkImage">
                 <property name="visible">True</property>
                 <property name="can-focus">False</property>
-                <property name="icon-name">open-menu-symbolic</property>
+                <property name="icon-name">view-dual</property>
               </object>
             </child>
           </object>
@@ -81,28 +80,43 @@
             <child>
               <object class="GtkBox">
                 <property name="visible">True</property>
-                <property name="orientation">GTK_ORIENTATION_VERTICAL</property>
                 <child>
-                  <object class="GtkEntry" id="title_entry">
-                    <property name="name">title-entry</property>
+                  <object class="GtkBox">
                     <property name="visible">True</property>
-                    <property name="placeholder-text">Add title …</property>
-                    <property name="margin-top">6</property>
-                    <property name="margin-left">6</property>
-                    <property name="margin-right">6</property>
-                    <property name="halign">GTK_ALIGN_FILL</property>
-                    <property name="hexpand">TRUE</property>
+                    <property name="orientation">GTK_ORIENTATION_VERTICAL</property>
+                    <child>
+                      <object class="GtkEntry" id="title_entry">
+                        <property name="name">title-entry</property>
+                        <property name="visible">True</property>
+                        <property name="placeholder-text">Add title …</property>
+                        <property name="margin-top">6</property>
+                        <property name="margin-left">6</property>
+                        <property name="margin-right">6</property>
+                        <property name="halign">GTK_ALIGN_FILL</property>
+                        <property name="hexpand">TRUE</property>
+                      </object>
+                    </child>
+                    <child>
+                      <object class="GtkScrolledWindow">
+                        <property name="visible">True</property>
+                        <property name="margin">12</property>
+                        <child>
+                          <object class="GtkSourceView" id="source_view">
+                            <property name="name">source-view</property>
+                            <property name="visible">True</property>
+                            <property name="expand">True</property>
+                          </object>
+                        </child>
+                      </object>
+                    </child>
                   </object>
                 </child>
                 <child>
-                  <object class="GtkScrolledWindow">
+                  <object class="GtkRevealer" id="html_view_revealer">
                     <property name="visible">True</property>
-                    <property name="margin">12</property>
                     <child>
-                      <object class="GtkSourceView" id="source_view">
-                        <property name="name">source-view</property>
+                      <object class="WebKitWebView" id="html_view">
                         <property name="visible">True</property>
-                        <property name="expand">True</property>
                       </object>
                     </child>
                   </object>

src/main.c

@@ -18,6 +18,7 @@
 
 #include <glib/gi18n.h>
 #include <gtksourceview/gtksource.h>
+#include <webkit2/webkit2.h>
 
 #include "iridium-config.h"
 #include "iridium-window.h"
@@ -76,6 +77,7 @@ main (int argc, char *argv[])
   textdomain (GETTEXT_PACKAGE);
 
   g_type_ensure (GTK_SOURCE_TYPE_VIEW);
+  g_type_ensure (WEBKIT_TYPE_WEB_VIEW);
   app = gtk_application_new ("org.gnome.Iridium", G_APPLICATION_FLAGS_NONE);
 
   g_signal_connect (app, "activate", G_CALLBACK (on_activate), NULL);

src/meson.build

@@ -16,6 +16,7 @@ iridium_deps = [
   dependency('gio-2.0', version: '>= 2.48'),
   dependency('gtk+-3.0', version: '>= 3.18'),
   dependency('gtksourceview-3.0', version: '>= 3.18'),
+  dependency('webkit2gtk-4.0', version: '>= 2.20.2'),
   declare_dependency(
     dependencies: cc.find_library('markdown'),
   ),