From: soufiane <soufiane@cubedesigners.com>
Date: Wed, 9 Jul 2025 15:13:31 +0000 (+0200)
Subject: wait #7634 @5:00
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=62ffba049c26e7ab350c7c7a85604bc71b336b54;p=fluidbook-toolbox.git

wait #7634 @5:00
---

diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/MarkdownOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/MarkdownOperation.php
index 3e4e1c035..0a3057556 100644
--- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/MarkdownOperation.php
+++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/MarkdownOperation.php
@@ -12,9 +12,10 @@ trait MarkdownOperation
     protected function setupMarkdownRoutes($segment, $routeName, $controller)
     {
         Route::match(['get'], $segment . '/{id}/edit/markdown', $controller . '@markdown')->name('fluidbook_markdowneditor');
+        Route::match(['post'], $segment . '/{id}/markdown', $controller . '@getFilesById');
     }
 
-    public function markdown($id, Request $request)
+    public function markdown($id)
     {
         if (!FluidbookPublication::hasPermission($id)) {
             abort(401);
@@ -24,4 +25,13 @@ trait MarkdownOperation
 
         return view('fluidbook_publication.markdown_editor', ['version' => 'stable', 'id' => $id, 'fluidbook' => FluidbookPublication::find($id), 'access' => "", 'token' => $token]);
     }
+
+    public static function getFilesById(Request $request,$id) {
+        $p = $request->page;
+        $path = public_path("/markdown_files/$id/p$p.md");
+
+        if(!file_exists($path)) return false;
+
+        return file_get_contents(public_path("/markdown_files/$id/p$p.md"));
+    }
 }
diff --git a/resources/markdowneditor/js/markdowneditor.js b/resources/markdowneditor/js/markdowneditor.js
index d89096a98..0a41ecb8d 100644
--- a/resources/markdowneditor/js/markdowneditor.js
+++ b/resources/markdowneditor/js/markdowneditor.js
@@ -1,19 +1,44 @@
+import Editor from '@toast-ui/editor';
+window.$ = window.jQuery = require('jquery');
+
+$.ajaxSetup({
+    headers: {
+        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
+    }
+});
+
+
 function MarkdownEditor() {
+    this.mobileFirst = FLUIDBOOK_DATA.settings.mobileNavigationType === 'mobilefirst';
+    this.single = ['mobilefirst', 'portrait'].indexOf(FLUIDBOOK_DATA.settings.mobileNavigationType) >= 0 || FLUIDBOOK_DATA.settings.pages <= 1;
+    this.pagesSource = 'pages';
+    this.rasterizePages = this.splitPages(FLUIDBOOK_DATA.settings.rasterizePages);
+    this.vectorPages = this.splitPages(FLUIDBOOK_DATA.settings.vectorPages);
+    this.noCache = '?t=' + (new Date(FLUIDBOOK_DATA.composition_updated_at)).getTime();
+    this.currentPage = Math.max(0,parseInt(window.location.hash.substring(1))) || 0;
+    this.editor = null;
     this.init()
 }
 
 MarkdownEditor.prototype = {
     init: function() {
-        this.pagesSource = 'pages';
-        this.rasterizePages = this.splitPages(FLUIDBOOK_DATA.settings.rasterizePages);
-        this.vectorPages = this.splitPages(FLUIDBOOK_DATA.settings.vectorPages);
-        this.noCache = '?t=' + (new Date(FLUIDBOOK_DATA.composition_updated_at)).getTime();
+        this.markdown();
         this.loadPage(2)
     },
 
-    loadPage: function(p,side) {
-        const container = document.querySelector("#markdown-preview")
+    loadPage: function() {
+        this.loadPageHtml(this.currentPage, 'left');
+        if (!this.single) {
+            this.loadPageHtml(this.currentPage + 1, 'right');
+        }
+
+        this.setContentMarkdown()
+    },
+
+    loadPageHtml: function(p,side) {
+        const container = document.querySelector("#markdown-page-"+side)
         var imageFormat = FLUIDBOOK_DATA.settings.imageFormat ?? 'jpg';
+
         var c = '<div class="contents">';
         //if (this.linkeditor.utils.isSpecialPage(p)) {
             //let data = this.linkeditor.utils.getSpecialPageAssetData(p);
@@ -33,7 +58,9 @@ MarkdownEditor.prototype = {
             }
         //}
         c += '</div>';
-        container.innerHTML = c;
+        if (p > 0 || p <= FLUIDBOOK_DATA.settings.pages) {
+            container.innerHTML = c;
+        }
     },
 
     splitPages: function (str) {
@@ -51,6 +78,37 @@ MarkdownEditor.prototype = {
         }
         return res;
     },
+
+    setContentMarkdown: function() {
+        if(this.currentPage === 0) this.currentPage = 1
+        const $this = this
+        $.ajax({
+            url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id +'/markdown',
+            type: 'post',
+            data: {page:this.currentPage},
+            success: function (response) {
+                $this.editor.setMarkdown(response)
+                $this.editor.moveCursorToStart(true)
+            }
+        });
+    },
+
+    markdown: function() {
+        this.editor = new Editor({
+            el: document.querySelector('#editor'),
+            initialEditType: 'markdown',
+            previewStyle: 'vertical'
+        });
+
+        this.editor.getMarkdown();
+    }
+
+    /*isSpecialPage: function (page) {
+        if (page === undefined) {
+            page = this.linkeditor.currentPage;
+        }
+        return page.toString().indexOf('link_') === 0 || (THEME[page] !== undefined && THEME[page] !== null);
+    },*/
 }
 
 
diff --git a/resources/markdowneditor/style/style.sass b/resources/markdowneditor/style/style.sass
index 8c27bf512..dcdc8ce81 100644
--- a/resources/markdowneditor/style/style.sass
+++ b/resources/markdowneditor/style/style.sass
@@ -24,3 +24,11 @@ body
             top: 50%
             left: 50%
             transform: translate(-50%,-50%)
+
+    &-wrapper
+        display: flex
+        align-items: center
+
+    &-page
+        width: 50%
+        position: relative
diff --git a/resources/views/fluidbook_publication/markdown_editor.blade.php b/resources/views/fluidbook_publication/markdown_editor.blade.php
index 84ab323b4..490c863d5 100644
--- a/resources/views/fluidbook_publication/markdown_editor.blade.php
+++ b/resources/views/fluidbook_publication/markdown_editor.blade.php
@@ -10,8 +10,10 @@
 @section('content')
     <div class="markdown-editor">
         <div id="markdown-preview" class="markdown-container">
-            <div id="left"></div>
-            <div id="right"></div>
+            <div class="markdown-wrapper">
+                <div draggable="false" class="markdown-page" id="markdown-page-left"></div>
+                <div draggable="false" class="markdown-page" id="markdown-page-right"></div>
+            </div>
         </div>
         <div id="editor" class="markdown-editor-container"></div>
     </div>
@@ -30,13 +32,6 @@
         src="/packages/markdowneditor/js/markdowneditor.js?v={{filemtime(public_path('packages/markdowneditor/js/markdowneditor.js'))}}"></script>
     <script src="https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js"></script>
     <script>
-        const editor = new toastui.Editor({
-            el: document.querySelector('#editor'),
-            initialEditType: 'markdown',
-            initialValue: '{{ $content }}',
-            previewStyle: 'vertical'
-        });
 
-        editor.getMarkdown();
     </script>
 @endpush