From: soufiane <soufiane@cubedesigners.com>
Date: Thu, 17 Jul 2025 15:03:39 +0000 (+0200)
Subject: wip #7634
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2b9928ef10cfae86b8028d85186d148fcdce2f82;p=fluidbook-toolbox.git

wip #7634
---

diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index 6fec34928..3d59bcb13 100644
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -38,18 +38,25 @@ MarkdownEditor.prototype = {
         });
 
         $(window).on('mousemove', function (e) {
-            let x = e.pageX;
-            let w = $(this).innerWidth()
-            let ratio = x / w * 100
+            let panelWidth = $("#markdown-revision")[0].getBoundingClientRect().width
+            var x = e.pageX
+            var w = $(this).innerWidth()
 
             if($(".handle").hasClass("dragging")) {
+                if($(".handle.dragging").hasClass("preview-handle")) {
+                    x = Math.max(0, e.pageX - panelWidth)
+                    w = $(this).innerWidth() - panelWidth
+                }
+
+                let ratio = x / w * 100
+
                 $("body").addClass("user-select-none")
                 requestAnimationFrame(function() {
                     $(".handle.dragging").parent().width(ratio+'%')
                 })
 
-                if($("#markdown-page img")[0].getBoundingClientRect().top < $("body")[0].getBoundingClientRect().top
-                || $("#markdown-page img")[0].getBoundingClientRect().bottom > $("body")[0].getBoundingClientRect().bottom){
+                if($("#markdown-preview img")[0].getBoundingClientRect().top < $("#markdown-preview")[0].getBoundingClientRect().top
+                || $("#markdown-preview img")[0].getBoundingClientRect().bottom > $("body")[0].getBoundingClientRect().bottom){
                     $("#markdown-preview").addClass("overtake")
                 }else {
                     $("#markdown-preview").removeClass("overtake")
@@ -82,7 +89,7 @@ MarkdownEditor.prototype = {
     },
 
     loadPageHtml: function(p) {
-        const container = document.querySelector("#markdown-page")
+        const container = document.querySelector("#markdown-preview .markdown-wrapper")
         var imageFormat = FLUIDBOOK_DATA.settings.imageFormat ?? 'jpg';
 
         var c = '<div class="contents">';
diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index cd4eb42ff..c6353ead2 100644
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -138,6 +138,7 @@ body
         flex-shrink: 0
         align-items: center
         justify-content: center
+        overflow: hidden
 
         &.overtake
             overflow: auto
diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index a8e07c7a3..ebc6f7620 100644
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -11,7 +11,7 @@
 @section('content')
     @include('fluidbook_publication.link_editor_icons')
     <div class="markdown">
-        <div class="markdown-revision">
+        <div id="markdown-revision" class="markdown-revision">
             <div class="markdown-revision-nav">
                 <a href="#" id="linkeditor-icon-versions" data-panel="form" data-icon="wayback-machine"
                    data-action="panels.toggleForm"
@@ -54,9 +54,8 @@
             </div>
             <div id="markdown-preview" class="markdown-container">
                 <div class="markdown-wrapper">
-                    <div draggable="false" class="markdown-page" id="markdown-page"></div>
                 </div>
-                <div class="handle"></div>
+                <div class="handle preview-handle"></div>
             </div>
             <div class="markdown-editor-container">
                 <div id="editor"></div>