constrain the width of images in read mode

src/resources/vnote.ini

@@ -28,7 +28,10 @@ enable_code_block_highlight=true
 enable_preview_images=true
 
 ; Enable image preview constraint in edit mode to constrain the widht of the preview
-enable_preview_image_constraint=false
+enable_preview_image_constraint=true
+
+; Enable image constraint in read mode to constrain the width of the image
+enable_image_constraint=true
 
 [session]
 tools_dock_checked=true

src/vconfigmanager.cpp

@@ -130,6 +130,9 @@ void VConfigManager::initialize()
 
     m_enablePreviewImageConstraint = getConfigFromSettings("global",
                                                            "enable_preview_image_constraint").toBool();
+
+    m_enableImageConstraint = getConfigFromSettings("global",
+                                                    "enable_image_constraint").toBool();
 }
 
 void VConfigManager::readPredefinedColorsFromSettings()

src/vconfigmanager.h

@@ -165,6 +165,9 @@ public:
     inline bool getEnablePreviewImageConstraint() const;
     inline void setEnablePreviewImageConstraint(bool p_enabled);
 
+    inline bool getEnableImageConstraint() const;
+    inline void setEnableImageConstraint(bool p_enabled);
+
     // Get the folder the ini file exists.
     QString getConfigFolder() const;
 
@@ -278,6 +281,9 @@ private:
     // Constrain the width of image preview in edit mode.
     bool m_enablePreviewImageConstraint;
 
+    // Constrain the width of image in read mode.
+    bool m_enableImageConstraint;
+
     // The name of the config file in each directory, obsolete.
     // Use c_dirConfigFile instead.
     static const QString c_obsoleteDirConfigFile;
@@ -735,4 +741,20 @@ inline void VConfigManager::setEnablePreviewImageConstraint(bool p_enabled)
                         m_enablePreviewImageConstraint);
 }
 
+inline bool VConfigManager::getEnableImageConstraint() const
+{
+    return m_enableImageConstraint;
+}
+
+inline void VConfigManager::setEnableImageConstraint(bool p_enabled)
+{
+    if (m_enableImageConstraint == p_enabled) {
+        return;
+    }
+
+    m_enableImageConstraint = p_enabled;
+    setConfigToSettings("global", "enable_image_constraint",
+                        m_enableImageConstraint);
+}
+
 #endif // VCONFIGMANAGER_H

src/vmainwindow.cpp

@@ -352,6 +352,14 @@ void VMainWindow::initMarkdownMenu()
 
     initRenderBackgroundMenu(markdownMenu);
 
+    QAction *constrainImageAct = new QAction(tr("Constrain The Width of Images in Read Mode"), this);
+    constrainImageAct->setToolTip(tr("Constrain the width of images to the window in read mode (re-open current tabs to make it work)"));
+    constrainImageAct->setCheckable(true);
+    connect(constrainImageAct, &QAction::triggered,
+            this, &VMainWindow::enableImageConstraint);
+    markdownMenu->addAction(constrainImageAct);
+    constrainImageAct->setChecked(vconfig.getEnableImageConstraint());
+
     markdownMenu->addSeparator();
 
     QAction *mermaidAct = new QAction(tr("&Mermaid Diagram"), this);
@@ -1301,6 +1309,13 @@ void VMainWindow::enableImagePreviewConstraint(bool p_checked)
     vconfig.setEnablePreviewImageConstraint(p_checked);
 }
 
+void VMainWindow::enableImageConstraint(bool p_checked)
+{
+    vconfig.setEnableImageConstraint(p_checked);
+
+    vnote->updateTemplate();
+}
+
 void VMainWindow::shortcutHelp()
 {
     QString locale = VUtils::getLocale();

src/vmainwindow.h

@@ -78,6 +78,7 @@ private slots:
     void enableCodeBlockHighlight(bool p_checked);
     void enableImagePreview(bool p_checked);
     void enableImagePreviewConstraint(bool p_checked);
+    void enableImageConstraint(bool p_checked);
 
 protected:
     void closeEvent(QCloseEvent *event) Q_DECL_OVERRIDE;

src/vnote.cpp

@@ -157,8 +157,14 @@ void VNote::updateTemplate()
     }
     QString cssStyle;
     if (!rgb.isEmpty()) {
-        cssStyle = "body { background-color: #" + rgb + " !important; }";
+        cssStyle += "body { background-color: #" + rgb + " !important; }\n";
     }
+
+    if (vconfig.getEnableImageConstraint()) {
+        // Constain the image width.
+        cssStyle += "img { max-width: 100% !important; height: auto !important; }\n";
+    }
+
     QString styleHolder("<!-- BACKGROUND_PLACE_HOLDER -->");
     QString cssHolder("CSS_PLACE_HOLDER");