From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Thu, 8 Dec 2022 10:53:58 +0000 (+0100)
Subject: wip #5631 @2
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=7df4cc93fde18bb589dedbc1701acdec50c98835;p=fluidbook-toolbox.git

wip #5631 @2
---

diff --git a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
index bfb191961..6c489671d 100644
--- a/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
+++ b/app/Http/Controllers/Admin/Operations/FluidbookPublication/EditOperation.php
@@ -14,6 +14,7 @@ trait EditOperation
     protected function setupEditRoutes($segment, $routeName, $controller)
     {
         Route::match(['get'], $segment . '/{id}/edit/links', $controller . '@links');
+        Route::match(['get'], $segment . '/{id}/edit/links/versions', $controller . '@getLinkVersions');
         Route::put($segment . '/{id}/save/links', $controller . '@saveLinks');
         Route::get($segment . '/{id}/edit/{type}_{page}.{format}', $controller . '@getLinkPage')
             // ->whereIn('type', ['raster', 'images', 'texts', 'vector'])
@@ -37,6 +38,9 @@ trait EditOperation
 
     protected function getLinkPage($fluidbook_id, $type, $page, $format = 'jpg')
     {
+        if (!FluidbookPublication::hasPermission($fluidbook_id)) {
+            abort(401);
+        }
         /** @var FluidbookPublication $fluibdook */
         $fluibdook = FluidbookPublication::find($fluidbook_id);
         switch ($type) {
@@ -58,6 +62,15 @@ trait EditOperation
         return XSendFileController::sendfile($path);
     }
 
+    protected function getLinkVersions($fluidbook_id)
+    {
+        if (!FluidbookPublication::hasPermission($fluidbook_id)) {
+            abort(401);
+        }
+        $links = FluidbookLinks::getLinksVersions($fluidbook_id);
+        return response()->json($links);
+    }
+
 //    protected function getThumb($doc_id, $doc_page)
 //    {
 //
@@ -86,6 +99,9 @@ trait EditOperation
 
     public function links($id)
     {
+        if (!FluidbookPublication::hasPermission($id)) {
+            abort(401);
+        }
         return view('fluidbook_publication.link_editor', ['id' => $id, 'fluidbook' => FluidbookPublication::find($id)]);
     }
 }
diff --git a/app/Util/FluidbookLinks.php b/app/Util/FluidbookLinks.php
index 411c19d55..b9b4c6ff7 100644
--- a/app/Util/FluidbookLinks.php
+++ b/app/Util/FluidbookLinks.php
@@ -2,6 +2,7 @@
 
 namespace App\Util;
 
+use App\Models\User;
 use Cubist\Util\ArrayUtil;
 use Cubist\Util\Crypt;
 use Cubist\Util\Files\Files;
@@ -395,7 +396,7 @@ class FluidbookLinks
         return Files::mkdir('/data/extranet/www/fluidbook/books/links/' . $book_id);
     }
 
-    public static function getLinksVersions($book_id, $withLinks = false)
+    public static function getLinksVersions($book_id)
     {
         $dir = self::getLinksDir($book_id);
         $dr = opendir($dir);
@@ -413,7 +414,16 @@ class FluidbookLinks
         }
         krsort($updates);
 
-        return $updates;
+
+        $res = [];
+        foreach ($updates as $timestamp => $u) {
+            $u['name'] = User::find($u['user'])->name;
+            $u['date'] = date('Y-m-d H:i:s', $timestamp);
+            $u['timestamp'] = $timestamp;
+            $res[] = $u;
+        }
+
+        return $res;
     }
 
     public static function getMeta($book_id, $update = 'latest')
diff --git a/resources/linkeditor/js/linkeditor.js b/resources/linkeditor/js/linkeditor.js
index f3d9e12ef..74b1d9d57 100644
--- a/resources/linkeditor/js/linkeditor.js
+++ b/resources/linkeditor/js/linkeditor.js
@@ -16,6 +16,7 @@ import LinkeditorSave from './linkeditor.save';
 import LinkeditorSettings from './linkeditor.settings';
 import LinkeditorPanels from './linkeditor.panels';
 import LinkeditorForm from './linkeditor.form';
+import LinkeditorVersions from './linkeditor.versions';
 
 window.$ = window.jQuery = require('jquery');
 window.key = require('keymaster-reloaded');
@@ -80,6 +81,7 @@ LinkEditor.prototype = {
         this.panels = new LinkeditorPanels(this);
         this.form = new LinkeditorForm(this);
         this.settings = new LinkeditorSettings(this);
+        this.versions = new LinkeditorVersions(this);
 
         this.initEvents();
         this.initIcons();
@@ -88,8 +90,8 @@ LinkEditor.prototype = {
     },
 
     initIcons: function () {
-        $("#linkeditor [data-icon]").each(function () {
-            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon')));
+        $("#linkeditor [data-icon]:not(.init-icon)").each(function () {
+            $(this).append(getSpriteIcon('linkeditor-' + $(this).data('icon'))).addClass('init-icon');
         });
     },
 
diff --git a/resources/linkeditor/js/linkeditor.panels.js b/resources/linkeditor/js/linkeditor.panels.js
index 8ada98b03..d0daa84a0 100644
--- a/resources/linkeditor/js/linkeditor.panels.js
+++ b/resources/linkeditor/js/linkeditor.panels.js
@@ -10,7 +10,7 @@ function LinkeditorPanels(linkeditor) {
 LinkeditorPanels.prototype = {
     init: function () {
         var $this = this;
-        //this.linkeditor.settings.set('panels_layout', {left: ['layers', 'versions'], right: ['form']})
+
         this.sides = this.linkeditor.settings.get('panels_layout', {left: ['layers', 'versions'], right: ['form']});
         $.each(this.sides, function (side, panels) {
             var panelsContainer = $("#linkeditor-" + side + '-panel');
@@ -18,7 +18,12 @@ LinkeditorPanels.prototype = {
 
             $.each(panels, function (k, panel) {
                 $("#linkeditor-" + side + " nav").append($("#linkeditor-icon-" + panel));
-                panelsContainer.append('<div id="linkeditor-panel-' + panel + '" data-panel="' + panel + '" class="linkeditor-panel"></div>');
+                if($('#linkeditor-panel-' + panel).length>0){
+                    panelsContainer.append($('#linkeditor-panel-' + panel));
+                }else {
+                    panelsContainer.append('<div id="linkeditor-panel-' + panel + '"></div>');
+                }
+                $('#linkeditor-panel-' + panel).attr('data-panel',panel).addClass('linkeditor-panel');
             });
 
             var tool = $this.linkeditor.settings.get(side + '_tool', panels[0]);
@@ -87,6 +92,7 @@ LinkeditorPanels.prototype = {
             var w = (ww / 100) * dw;
             $(this).css('width', w);
         });
+        this.linkeditor.versions.resize();
     },
 
     toggleVersions: function () {
diff --git a/resources/linkeditor/js/linkeditor.resize.js b/resources/linkeditor/js/linkeditor.resize.js
index 043d52896..d75133359 100644
--- a/resources/linkeditor/js/linkeditor.resize.js
+++ b/resources/linkeditor/js/linkeditor.resize.js
@@ -23,6 +23,9 @@ LinkeditorResize.prototype = {
         this.linkeditor.panels.resize(this.ww);
         this.resizeMain();
         this.resizeCanvas();
+        if(this.panels) {
+            this.panels.resize();
+        }
         this.linkeditor.rulers.updateRulers();
     },
 
diff --git a/resources/linkeditor/js/linkeditor.versions.js b/resources/linkeditor/js/linkeditor.versions.js
new file mode 100644
index 000000000..4cf8d1af3
--- /dev/null
+++ b/resources/linkeditor/js/linkeditor.versions.js
@@ -0,0 +1,57 @@
+function LinkeditorVersions(linkeditor) {
+    this.linkeditor = linkeditor;
+    this.init();
+}
+
+LinkeditorVersions.prototype = {
+    init: function () {
+        this.refresh();
+    },
+
+    refresh: function () {
+        var $this = this;
+        $.ajax({
+            url: '/fluidbook-publication/' + FLUIDBOOK_DATA.id + '/edit/links/versions', method: 'get',
+            success: function (data) {
+                $this.setVersions(data);
+            }
+        });
+    },
+
+    setVersions: function (data) {
+        var list = $("#linkeditor-panel-versions-list");
+        list.html('');
+        $.each(data, function (timestamp, version) {
+            var item = '<div class="row">';
+            item += '<div class="col1">';
+            item += '<div class="date">' + version.date + '</div>';
+            item += '<div class="name">' + version.name + '</div>';
+            item += '<div class="comments">' + version.comments + '</div>';
+            item += '</div>';
+            item += '<div class="col2">';
+            item += '<div class="links"><b>' + version.links + '</b> links</div>';
+            item += '<div class="rulers"><b>' + version.rulers + '</b> rulers</div>';
+            item += '</div>'
+            item += '<div class="col3">';
+            item += '<div class="actions"><a href="#" data-icon="wayback-machine" data-tooltip="Restaurer cette version"></a></td><td><a href="#" data-icon="export-links" data-tooltip="Exporter les liens au format xlsx"></a></div>';
+            item += '</div>'
+            item += '</div>'
+            list.append(item);
+        });
+        this.linkeditor.initIcons();
+        this.resize();
+    },
+
+    resize: function () {
+        var w=$("#linkeditor-panel-versions-list").outerWidth();
+        if(w<=0){
+            return;
+        }
+        if(w<300){
+            $("#linkeditor-panel-versions-list").addClass('small');
+        }else{
+            $("#linkeditor-panel-versions-list").removeClass('small');
+        }
+    },
+};
+module.exports = LinkeditorVersions;
diff --git a/resources/linkeditor/style/form.sass b/resources/linkeditor/style/form.sass
deleted file mode 100644
index e8f714700..000000000
--- a/resources/linkeditor/style/form.sass
+++ /dev/null
@@ -1,202 +0,0 @@
-.select2-hidden-accessible
-    position: fixed !important
-
-#linkeditor-form-templates
-    display: none
-
-.linkeditor-linktype
-    &::before
-        display: inline-block
-        width: 12px
-        height: 12px
-        border-radius: 2px
-        margin: 2px 10px 0 0
-        content: ""
-        vertical-align: top
-        position: relative
-
-
-#linkeditor-panel-form
-    --form-text-color: #5d5d5d
-    --field-background: #fff
-    --field-color: #111
-    --field-border: #aaa
-
-    @media (prefers-color-scheme: dark)
-        --form-text-color: #aaa
-        --field-background: #000
-        --field-color: #ccc
-        --field-border: #777
-
-
-    padding: 12px
-    font-size: 13px
-
-    .select2-container--bootstrap
-        font-size: 13px
-        font-weight: 400
-
-        hr
-            border: 0
-            height: 1px
-            background-color: var(--form-text-color)
-            margin: 5px 0
-
-        &, .select2-selection
-            color: var(--form-text-color)
-            background-color: var(--field-background)
-            border-color: var(--field-background)
-            border-radius: 4px
-            box-shadow: none
-
-        &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection
-            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
-            border-color: var(--field-border)
-
-    h3
-        font-size: 16px
-        color: var(--form-text-color)
-        text-transform: uppercase
-        padding-top: 15px
-        border-top: 1px solid var(--form-text-color)
-        margin-top: 20px
-
-    p.help-block
-        color: var(--form-text-color)
-        font-size: 11px
-        padding-top: 2px
-
-    .freefile-file
-        position: relative
-        &.loading
-            &::after
-                background-image: url("/images/linkeditor/dots-animated.svg")
-                @media (prefers-color-scheme: dark)
-                    background-image: url("/images/linkeditor/dots-dark-animated.svg")
-            input
-                pointer-events: none
-                cursor: wait
-
-        &::after
-            content: ""
-            position: absolute
-            display: block
-            padding: 6px
-            right: 0
-            top: 6px
-            width: 25px
-            height: 25px
-            background-image: url("/images/linkeditor/dots.svg")
-            color: var(--field-color)
-            box-sizing: border-box
-            pointer-events: none
-            font-size: 17px
-            @media (prefers-color-scheme: dark)
-                background-image: url("/images/linkeditor/dots-dark.svg")
-
-        input[type=file]
-            position: absolute
-            right: 0px
-            width: 35px
-            opacity: 0
-            height: 100%
-            cursor: pointer
-
-
-    .input-group
-        position: relative
-        .input-group-append
-            position: absolute
-            height: 100%
-            top: 0
-            right: 0
-            pointer-events: none
-            padding: 8px
-
-    textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"]
-        font-family: $font
-        height: 34px
-        padding: 8px
-        width: 100%
-        font-weight: 400
-        color: var(--field-color)
-        background-color: var(--field-background)
-        border: 1px solid var(--field-background)
-        border-radius: 3px
-        font-size: 13px
-        transition: box-shadow 500ms, border 500ms
-        appearance: none
-
-        &:focus
-            border: 1px solid var(--field-border)
-            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
-
-
-    textarea
-        min-height: 150px
-        max-width: 100%
-        min-width: 100%
-
-    span
-        font-weight: 400
-        font-size: 13px
-        color: var(--form-text-color)
-
-    label
-        display: block
-        font-weight: 600
-        font-size: 12px
-        color: var(--form-text-color)
-        margin: 8px 0 5px 0
-
-    .checkbox
-        margin: 4px 0 5px 0
-
-        label
-            vertical-align: baseline
-            display: inline-block
-            position: relative
-            top: 2px
-
-        span
-            margin-left: 5px
-
-
-    #group_position, #group_dimensions, #group_transform
-        margin-top: 5px
-
-        h4
-            font-size: 12px
-            font-weight: 700
-            color: var(--form-text-color)
-            grid-column: 1 / 3
-            grid-row: 1 / 2
-            margin-bottom: 5px
-
-        display: grid
-        grid-template-columns: repeat( 2, 1fr)
-        grid-gap: 2px 25px
-
-        label
-            display: inline-block
-            width: 20px
-
-        input
-            width: calc(100% - 20px)
-
-        [data-name="rot"]
-            label
-                display: block
-            .input-group
-                .input-group-append
-                    right: 0
-
-        .input-group
-            display: inline-block
-            .input-group-append
-                right: 20px
-
-
-    #group_transform
-        input
-            width: 100%
diff --git a/resources/linkeditor/style/inc/_form.sass b/resources/linkeditor/style/inc/_form.sass
index 1cf7686de..4105443c6 100644
--- a/resources/linkeditor/style/inc/_form.sass
+++ b/resources/linkeditor/style/inc/_form.sass
@@ -2,13 +2,7 @@
     position: fixed !important
 
 #linkeditor-form-templates
-    display: block
-    position: absolute
-    pointer-events: none
-    opacity: 0
-    top: -600px
-    left: -600px
-
+    display: none
 
 .linkeditor-linktype
     &::before
@@ -23,10 +17,186 @@
 
 
 #linkeditor-panel-form
-    height: 100%
-    width: 100%
-    overflow: hidden
-    iframe
-        border: 0
+    --form-text-color: #5d5d5d
+    --field-background: #fff
+    --field-color: #111
+    --field-border: #aaa
+
+    @include dark-theme
+        --form-text-color: #aaa
+        --field-background: #000
+        --field-color: #ccc
+        --field-border: #777
+
+
+    padding: 12px
+    font-size: 13px
+
+    .select2-container--bootstrap
+        font-size: 13px
+        font-weight: 400
+
+        hr
+            border: 0
+            height: 1px
+            background-color: var(--form-text-color)
+            margin: 5px 0
+
+        &, .select2-selection
+            color: var(--form-text-color)
+            background-color: var(--field-background)
+            border-color: var(--field-background)
+            border-radius: 4px
+            box-shadow: none
+
+        &.select2-container--focus .select2-selection, &.select2-container--open .select2-selection
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.1)
+            border-color: var(--field-border)
+
+    h3
+        font-size: 16px
+        color: var(--form-text-color)
+        text-transform: uppercase
+        padding-top: 15px
+        border-top: 1px solid var(--form-text-color)
+        margin-top: 20px
+
+    p.help-block
+        color: var(--form-text-color)
+        font-size: 11px
+        padding-top: 2px
+
+    .freefile-file
+        position: relative
+        &.loading
+            &::after
+                background-image: url("/images/linkeditor/dots-animated.svg")
+                @include dark-theme
+                    background-image: url("/images/linkeditor/dots-dark-animated.svg")
+            input
+                pointer-events: none
+                cursor: wait
+
+        &::after
+            content: ""
+            position: absolute
+            display: block
+            padding: 6px
+            right: 0
+            top: 6px
+            width: 25px
+            height: 25px
+            background-image: url("/images/linkeditor/dots.svg")
+            color: var(--field-color)
+            box-sizing: border-box
+            pointer-events: none
+            font-size: 17px
+            @include dark-theme
+                background-image: url("/images/linkeditor/dots-dark.svg")
+
+        input[type=file]
+            position: absolute
+            right: 0px
+            width: 35px
+            opacity: 0
+            height: 100%
+            cursor: pointer
+
+
+    .input-group
+        position: relative
+        .input-group-append
+            position: absolute
+            height: 100%
+            top: 0
+            right: 0
+            pointer-events: none
+            padding: 8px
+
+    textarea, input[type="text"], input[type="number"], input[type="email"], input[type="url"]
+        font-family: $font
+        height: 34px
+        padding: 8px
         width: 100%
-        height: 100%
+        font-weight: 400
+        color: var(--field-color)
+        background-color: var(--field-background)
+        border: 1px solid var(--field-background)
+        border-radius: 3px
+        font-size: 13px
+        transition: box-shadow 500ms, border 500ms
+        appearance: none
+
+        &:focus
+            border: 1px solid var(--field-border)
+            box-shadow: 0 0 8px rgba(0, 0, 0, 0.3)
+
+
+    textarea
+        min-height: 150px
+        max-width: 100%
+        min-width: 100%
+
+    span
+        font-weight: 400
+        font-size: 13px
+        color: var(--form-text-color)
+
+    label
+        display: block
+        font-weight: 600
+        font-size: 12px
+        color: var(--form-text-color)
+        margin: 8px 0 5px 0
+
+    .checkbox
+        margin: 4px 0 5px 0
+
+        label
+            vertical-align: baseline
+            display: inline-block
+            position: relative
+            top: 2px
+
+        span
+            margin-left: 5px
+
+
+    #group_position, #group_dimensions, #group_transform
+        margin-top: 5px
+
+        h4
+            font-size: 12px
+            font-weight: 700
+            color: var(--form-text-color)
+            grid-column: 1 / 3
+            grid-row: 1 / 2
+            margin-bottom: 5px
+
+        display: grid
+        grid-template-columns: repeat( 2, 1fr)
+        grid-gap: 2px 25px
+
+        label
+            display: inline-block
+            width: 20px
+
+        input
+            width: calc(100% - 20px)
+
+        [data-name="rot"]
+            label
+                display: block
+            .input-group
+                .input-group-append
+                    right: 0
+
+        .input-group
+            display: inline-block
+            .input-group-append
+                right: 20px
+
+
+    #group_transform
+        input
+            width: 100%
diff --git a/resources/linkeditor/style/inc/_links.sass b/resources/linkeditor/style/inc/_links.sass
new file mode 100644
index 000000000..92ab99b4a
--- /dev/null
+++ b/resources/linkeditor/style/inc/_links.sass
@@ -0,0 +1,79 @@
+@import "variables"
+
+#linkeditor-links
+    .link
+        #linkeditor-main.grab &
+            pointer-events: none
+        box-sizing: border-box
+        position: absolute
+        border: currentColor solid 1px
+        cursor: cell
+
+        &.pendingCreate
+            opacity: 0
+
+        &.selected
+            cursor: move
+
+            .corners
+                visibility: visible
+
+        .corners
+            visibility: hidden
+            position: absolute
+            top: 0
+            left: 0
+            width: 100%
+            height: 100%
+
+            > div
+                position: absolute
+                border: 1px solid currentColor
+                background-color: #fff
+                width: 8px
+                height: 8px
+
+                &.nw
+                    cursor: nw-resize
+
+                &.n
+                    cursor: n-resize
+
+                &.ne
+                    cursor: ne-resize
+
+                &.e
+                    cursor: e-resize
+
+                &.se
+                    cursor: se-resize
+
+                &.s
+                    cursor: s-resize
+
+                &.sw
+                    cursor: sw-resize
+
+                &.w
+                    cursor: w-resize
+
+                &.n, &.nw, &.ne
+                    top: -4px
+
+                &.e, &.w
+                    top: calc(50% - 4px)
+
+                &.sw, &.s, &.se
+                    bottom: -4px
+
+                &.nw, &.w, &.sw
+                    left: -4px
+
+                &.ne, &.e, &.se
+                    right: -4px
+
+                &.n, &.s
+                    left: calc(50% - 4px)
+
+    position: relative
+    z-index: 500
diff --git a/resources/linkeditor/style/inc/_mixins.sass b/resources/linkeditor/style/inc/_mixins.sass
new file mode 100644
index 000000000..3700d4a74
--- /dev/null
+++ b/resources/linkeditor/style/inc/_mixins.sass
@@ -0,0 +1,20 @@
+@mixin tinyscrollbars
+    &::-webkit-scrollbar
+        width: 6px
+        height: 6px
+
+    &::-webkit-scrollbar-track
+        background: transparent
+
+        &:hover
+            background-color: #000
+
+    &::-webkit-scrollbar-thumb
+        background-color: #aaa
+        border: 1px solid #333
+        border-radius: 20px
+
+@mixin dark-theme
+    @media (prefers-color-scheme: dark)
+        &
+            @content
diff --git a/resources/linkeditor/style/inc/_panels.sass b/resources/linkeditor/style/inc/_panels.sass
new file mode 100644
index 000000000..5509acafd
--- /dev/null
+++ b/resources/linkeditor/style/inc/_panels.sass
@@ -0,0 +1,91 @@
+.linkeditor-sidebar
+    min-width: $sidebar-icons-width
+    background-color: #EBECEE
+    position: relative
+
+    @include dark-theme
+        background-color: #444
+
+    nav
+        position: absolute
+        left: 0
+        width: $sidebar-icons-width
+        height: 100%
+
+        [data-icon]
+            display: block
+            vertical-align: top
+            height: 30px
+            width: 30px
+            padding: 5px
+            border-radius: 5px
+            margin: 6px 0 0 7px
+            text-align: center
+            color: $toolbar-color
+            @include dark-theme
+                color: $toolbar-color-dark
+
+            &:hover, &.hover, &.active
+                background-color: #fff
+                @include dark-theme
+                    background-color: #000
+
+            svg
+                position: relative
+                top: 1px
+                height: 18px
+                width: auto
+
+
+    .handle
+        position: absolute
+        top: 0
+        right: 0
+        width: $sidebar-handle-width
+        height: 100%
+        background-color: #aaa
+        cursor: col-resize
+        z-index: 1
+
+        @include dark-theme
+            background-color: #666
+
+
+    .linkeditor-panel-side
+        display: none
+        margin-left: $sidebar-icons-width
+        margin-right: $sidebar-handle-width
+
+        overflow-x: hidden
+        @include tinyscrollbars
+
+        background: $panel-background
+        height: 100%
+        @include dark-theme
+            background-color: #333
+
+        &.open
+            display: block
+
+        .linkeditor-panel
+            display: none
+            &.open
+                display: block
+
+    &#linkeditor-right
+        border-width: 0 0 0 2px
+
+        nav
+            left: auto
+            right: 0
+
+        [data-icon]
+            margin-left: 9px
+
+        .handle
+            right: auto
+            left: 0
+
+        .linkeditor-panel-side
+            margin-left: $sidebar-handle-width
+            margin-right: $sidebar-icons-width
diff --git a/resources/linkeditor/style/inc/_rulers.sass b/resources/linkeditor/style/inc/_rulers.sass
new file mode 100644
index 000000000..9bdfe1767
--- /dev/null
+++ b/resources/linkeditor/style/inc/_rulers.sass
@@ -0,0 +1,198 @@
+@import "variables"
+
+.ruler
+    position: absolute
+    top: 0
+    left: 0
+    z-index: 400
+    border-width: 0
+    border-color: #0ff
+    border-style: solid
+
+    &:after
+        position: absolute
+        content: ""
+        display: block
+        height: 100%
+        width: 100%
+
+    &.pending-delete
+        border-color: #f00 !important
+        z-index: 1100
+
+    &:hover
+        border-color: #0f0
+
+    &[data-axis="x"]
+        width: 0px
+        height: calc(100% - $rulers-size)
+        border-left-width: 1px
+        cursor: col-resize
+        top: $rulers-size
+
+        &:after
+            left: $ruler-margin*-1
+            width: $ruler-margin*2
+
+    &[data-axis="y"]
+        border-bottom-width: 1px
+        height: 0px
+        width: calc(100% - $rulers-size)
+        left: $rulers-size
+
+        &:after
+            top: $ruler-margin*-1
+            height: $ruler-margin*2
+            cursor: row-resize
+
+#linkeditor-rulers
+    $rulers-color: #333
+    $rulers-color-dark: #eee
+
+    @include dark-theme
+        color: $rulers-color-dark
+
+
+    color: $rulers-color
+    position: absolute
+    top: 0px
+    left: 0px
+    width: 100%
+    height: 100%
+
+    #linkeditor-ruler-corner
+        position: absolute
+        top: 0px
+        left: 0px
+        width: $rulers-size
+        height: $rulers-size
+        z-index: 5
+        background-color: #aaa
+        @include dark-theme
+            background-color: #666
+
+
+    .ruler-bar
+        overflow: hidden
+        position: absolute
+        left: 0
+        top: 0
+        z-index: 1000
+
+        .info
+            position: absolute
+            top: 0
+            left: 0
+            z-index: 3
+            font-size: 12px
+            line-height: 8px
+            display: none
+
+            span
+                display: block
+                position: absolute
+                top: 0
+                left: 0
+                background-color: #fff
+                color: #000
+                @include dark-theme
+                    background-color: #000
+                    color: #fff
+
+                padding: 3px
+
+
+        .division
+            pointer-events: none
+            position: absolute
+            background: #fff
+            @include dark-theme
+                background-color: #000
+
+
+            .value
+                position: absolute
+                font-size: 12px
+
+
+            .subdivision
+                position: absolute
+
+
+    #linkeditor-ruler-x
+        height: $rulers-size
+        width: 100%
+
+        .info
+            height: $rulers-size
+            border-left: 1px dotted $rulers-color
+            @include dark-theme
+                border-color: $rulers-color-dark
+
+
+        .division, .subdivision
+            width: 0px
+            border-left: 1px solid $rulers-color
+            @include dark-theme
+                border-color: $rulers-color-dark
+
+
+        .division
+            height: $rulers-size
+
+            .value
+                bottom: 0px
+                left: 3px
+
+
+        .subdivision
+            bottom: 0
+            height: 2px
+
+            &.middle
+                height: 5px
+
+
+    #linkeditor-ruler-y
+        width: $rulers-size
+        height: 100%
+
+        .info
+            width: $rulers-size
+            border-bottom: 1px dotted $rulers-color
+            @include dark-theme
+                border-color: $rulers-color-dark
+
+
+            span
+                transform-origin: 0 0
+                transform: rotate(270deg)
+
+
+        .division, .subdivision
+            height: 0px
+            border-bottom: 1px solid $rulers-color
+            @include dark-theme
+                border-color: $rulers-color-dark
+
+
+        .division
+            width: $rulers-size
+
+            .value
+                text-align: center
+                max-width: $rulers-size
+                word-wrap: break-word
+                white-space: normal
+                line-height: 10px
+                letter-spacing: 30px
+                top: 3px
+                left: 3px
+
+
+            .subdivision
+                right: 0
+                width: 2px
+
+                &.middle
+                    width: 5px
diff --git a/resources/linkeditor/style/inc/_toolbar.sass b/resources/linkeditor/style/inc/_toolbar.sass
new file mode 100644
index 000000000..c0a389937
--- /dev/null
+++ b/resources/linkeditor/style/inc/_toolbar.sass
@@ -0,0 +1,103 @@
+#linkeditor-toolbar
+    background-color: #dbdddf
+
+    @include dark-theme
+        background-color: #444
+
+    color: $toolbar-color
+    @include dark-theme
+        color: $toolbar-color-dark
+
+    height: $toolbar-height
+    padding: 5px
+
+    nav
+        padding: 2px
+        display: inline-block
+        height: 26px
+        vertical-align: top
+        width: 33%
+
+        &#linkeditor-toolbar-center
+            text-align: center
+
+    div
+        display: inline-block
+        font-size: $font-size
+
+    .separator
+        width: 0
+        height: 26px
+        margin: 0 2px
+        border-left: 1px solid $toolbar-color
+
+    #linkeditor-page-field
+        padding: 2px 10px
+        background-color: #fff
+        @include dark-theme
+            background-color: #000
+            border-color: #333
+
+        border: 1px solid #ccc
+        border-radius: 5px
+        cursor: text
+        font-size: 13px
+        position: relative
+        top: -9px
+        user-select: none
+        margin: 0 8px
+        font-weight: 600
+
+        input
+            vertical-align: top
+            text-align: right
+            border: 0
+            background-color: transparent
+            width: 20px
+            color: $toolbar-color
+            @include dark-theme
+                color: $toolbar-color-dark
+
+            font-size: 13px
+            appearance: textfield
+
+            &::-webkit-outer-adjust-hue-button, &::-webkit-inner-adjust-hue-button
+                -webkit-appearance: none
+                margin: 0
+
+            font-weight: 600
+            position: relative
+
+            &:hover, &:focus
+                outline: 0
+                border: 0
+
+    [data-icon]
+        display: inline-block
+        vertical-align: top
+        height: 26px
+        min-width: 26px
+        padding: 3px
+        border-radius: 5px
+        margin: 0 3px
+        text-align: center
+        color: $toolbar-color
+        @include dark-theme
+            color: $toolbar-color-dark
+
+        &:hover, &.hover
+            background-color: #fff
+            @include dark-theme
+                background-color: #000
+
+        &.arrow
+            padding: 1px
+
+            svg
+                height: 16px
+
+        svg
+            position: relative
+            top: 1px
+            height: 18px
+            width: auto
diff --git a/resources/linkeditor/style/inc/_variables.sass b/resources/linkeditor/style/inc/_variables.sass
new file mode 100644
index 000000000..588d475af
--- /dev/null
+++ b/resources/linkeditor/style/inc/_variables.sass
@@ -0,0 +1,15 @@
+$font: Montserrat, sans-serif
+$font-size: 16px
+$sidebar-icons-width: 46px
+$sidebar-handle-width: 3px
+$rulers-size: 16px
+$ruler-margin: 2px
+
+$toolbar-height: 40px
+$toolbar-color: #5d5d5d
+$toolbar-color-dark: #bbb
+
+$panel-background: #dcdcdc
+
+$color: #5d5d5d
+$color-dark: #bbb
diff --git a/resources/linkeditor/style/inc/_versions.sass b/resources/linkeditor/style/inc/_versions.sass
new file mode 100644
index 000000000..03ec50f10
--- /dev/null
+++ b/resources/linkeditor/style/inc/_versions.sass
@@ -0,0 +1,75 @@
+#linkeditor-panel-versions
+    padding: 5px 10px
+
+#linkeditor-panel-versions-list
+    font-size: 12px
+    width: 100%
+    border-collapse: collapse
+    color: $color
+
+    $icon-size: 18px
+
+    @include dark-theme
+        color: $color-dark
+
+    .row
+        padding: 5px 0
+        vertical-align: top
+        border-bottom: 1px solid currentColor
+
+
+        >div
+            display: inline-block
+            vertical-align: top
+
+        .date
+            font-weight: bold
+        .comments
+            font-style: italic
+
+        .col1
+            width: calc(100% - 125px)
+
+        .col2
+            width: 70px
+
+        .col3
+            width: 55px
+            vertical-align: middle
+            padding-top: 5px
+            a
+                width: $icon-size
+                height: $icon-size
+                margin-left: 7px
+                color: currentColor
+
+                svg
+                    width: $icon-size
+                    height: $icon-size
+
+    &.small
+        .row
+            position: relative
+            > div
+                display: block
+            .rulers, .links
+                display: inline
+            .links
+                &::after
+                    content: ', '
+            .col1, .col2
+                width: calc(100% - 25px)
+                overflow: hidden
+            .col3
+                position: absolute
+                top: 10px
+                right: 10px
+                width: $icon-size
+                padding: 0
+                a
+                    display: block
+                    margin-bottom: 10px
+
+
+
+
diff --git a/resources/linkeditor/style/links.sass b/resources/linkeditor/style/links.sass
deleted file mode 100644
index 92ab99b4a..000000000
--- a/resources/linkeditor/style/links.sass
+++ /dev/null
@@ -1,79 +0,0 @@
-@import "variables"
-
-#linkeditor-links
-    .link
-        #linkeditor-main.grab &
-            pointer-events: none
-        box-sizing: border-box
-        position: absolute
-        border: currentColor solid 1px
-        cursor: cell
-
-        &.pendingCreate
-            opacity: 0
-
-        &.selected
-            cursor: move
-
-            .corners
-                visibility: visible
-
-        .corners
-            visibility: hidden
-            position: absolute
-            top: 0
-            left: 0
-            width: 100%
-            height: 100%
-
-            > div
-                position: absolute
-                border: 1px solid currentColor
-                background-color: #fff
-                width: 8px
-                height: 8px
-
-                &.nw
-                    cursor: nw-resize
-
-                &.n
-                    cursor: n-resize
-
-                &.ne
-                    cursor: ne-resize
-
-                &.e
-                    cursor: e-resize
-
-                &.se
-                    cursor: se-resize
-
-                &.s
-                    cursor: s-resize
-
-                &.sw
-                    cursor: sw-resize
-
-                &.w
-                    cursor: w-resize
-
-                &.n, &.nw, &.ne
-                    top: -4px
-
-                &.e, &.w
-                    top: calc(50% - 4px)
-
-                &.sw, &.s, &.se
-                    bottom: -4px
-
-                &.nw, &.w, &.sw
-                    left: -4px
-
-                &.ne, &.e, &.se
-                    right: -4px
-
-                &.n, &.s
-                    left: calc(50% - 4px)
-
-    position: relative
-    z-index: 500
diff --git a/resources/linkeditor/style/mixins.sass b/resources/linkeditor/style/mixins.sass
deleted file mode 100644
index b21a11790..000000000
--- a/resources/linkeditor/style/mixins.sass
+++ /dev/null
@@ -1,15 +0,0 @@
-@mixin tinyscrollbars
-    &::-webkit-scrollbar
-        width: 6px
-        height: 6px
-
-    &::-webkit-scrollbar-track
-        background: transparent
-
-        &:hover
-            background-color: #000
-
-    &::-webkit-scrollbar-thumb
-        background-color: #aaa
-        border: 1px solid #333
-        border-radius: 20px
diff --git a/resources/linkeditor/style/panels.sass b/resources/linkeditor/style/panels.sass
deleted file mode 100644
index 5202e0b01..000000000
--- a/resources/linkeditor/style/panels.sass
+++ /dev/null
@@ -1,91 +0,0 @@
-.linkeditor-sidebar
-    min-width: $sidebar-icons-width
-    background-color: #EBECEE
-    position: relative
-
-    @media (prefers-color-scheme: dark)
-        background-color: #444
-
-    nav
-        position: absolute
-        left: 0
-        width: $sidebar-icons-width
-        height: 100%
-
-        [data-icon]
-            display: block
-            vertical-align: top
-            height: 30px
-            width: 30px
-            padding: 5px
-            border-radius: 5px
-            margin: 6px 0 0 7px
-            text-align: center
-            color: $toolbar-color
-            @media (prefers-color-scheme: dark)
-                color: $toolbar-color-dark
-
-            &:hover, &.hover, &.active
-                background-color: #fff
-                @media (prefers-color-scheme: dark)
-                    background-color: #000
-
-            svg
-                position: relative
-                top: 1px
-                height: 18px
-                width: auto
-
-
-    .handle
-        position: absolute
-        top: 0
-        right: 0
-        width: $sidebar-handle-width
-        height: 100%
-        background-color: #aaa
-        cursor: col-resize
-        z-index: 1
-
-        @media (prefers-color-scheme: dark)
-            background-color: #666
-
-
-    .linkeditor-panel-side
-        display: none
-        margin-left: $sidebar-icons-width
-        margin-right: $sidebar-handle-width
-
-        overflow-x: hidden
-        @include tinyscrollbars
-
-        background: $panel-background
-        height: 100%
-        @media (prefers-color-scheme: dark)
-            background-color: #333
-
-        &.open
-            display: block
-
-        .linkeditor-panel
-            display: none
-            &.open
-                display: block
-
-    &#linkeditor-right
-        border-width: 0 0 0 2px
-
-        nav
-            left: auto
-            right: 0
-
-        [data-icon]
-            margin-left: 9px
-
-        .handle
-            right: auto
-            left: 0
-
-        .linkeditor-panel-side
-            margin-left: $sidebar-handle-width
-            margin-right: $sidebar-icons-width
diff --git a/resources/linkeditor/style/rulers.sass b/resources/linkeditor/style/rulers.sass
deleted file mode 100644
index 52478a641..000000000
--- a/resources/linkeditor/style/rulers.sass
+++ /dev/null
@@ -1,198 +0,0 @@
-@import "variables"
-
-.ruler
-    position: absolute
-    top: 0
-    left: 0
-    z-index: 400
-    border-width: 0
-    border-color: #0ff
-    border-style: solid
-
-    &:after
-        position: absolute
-        content: ""
-        display: block
-        height: 100%
-        width: 100%
-
-    &.pending-delete
-        border-color: #f00 !important
-        z-index: 1100
-
-    &:hover
-        border-color: #0f0
-
-    &[data-axis="x"]
-        width: 0px
-        height: calc(100% - $rulers-size)
-        border-left-width: 1px
-        cursor: col-resize
-        top: $rulers-size
-
-        &:after
-            left: $ruler-margin*-1
-            width: $ruler-margin*2
-
-    &[data-axis="y"]
-        border-bottom-width: 1px
-        height: 0px
-        width: calc(100% - $rulers-size)
-        left: $rulers-size
-
-        &:after
-            top: $ruler-margin*-1
-            height: $ruler-margin*2
-            cursor: row-resize
-
-#linkeditor-rulers
-    $rulers-color: #333
-    $rulers-color-dark: #eee
-
-    @media (prefers-color-scheme: dark)
-        color: $rulers-color-dark
-
-
-    color: $rulers-color
-    position: absolute
-    top: 0px
-    left: 0px
-    width: 100%
-    height: 100%
-
-    #linkeditor-ruler-corner
-        position: absolute
-        top: 0px
-        left: 0px
-        width: $rulers-size
-        height: $rulers-size
-        z-index: 5
-        background-color: #aaa
-        @media (prefers-color-scheme: dark)
-            background-color: #666
-
-
-    .ruler-bar
-        overflow: hidden
-        position: absolute
-        left: 0
-        top: 0
-        z-index: 1000
-
-        .info
-            position: absolute
-            top: 0
-            left: 0
-            z-index: 3
-            font-size: 12px
-            line-height: 8px
-            display: none
-
-            span
-                display: block
-                position: absolute
-                top: 0
-                left: 0
-                background-color: #fff
-                color: #000
-                @media (prefers-color-scheme: dark)
-                    background-color: #000
-                    color: #fff
-
-                padding: 3px
-
-
-        .division
-            pointer-events: none
-            position: absolute
-            background: #fff
-            @media (prefers-color-scheme: dark)
-                background-color: #000
-
-
-            .value
-                position: absolute
-                font-size: 12px
-
-
-            .subdivision
-                position: absolute
-
-
-    #linkeditor-ruler-x
-        height: $rulers-size
-        width: 100%
-
-        .info
-            height: $rulers-size
-            border-left: 1px dotted $rulers-color
-            @media (prefers-color-scheme: dark)
-                border-color: $rulers-color-dark
-
-
-        .division, .subdivision
-            width: 0px
-            border-left: 1px solid $rulers-color
-            @media (prefers-color-scheme: dark)
-                border-color: $rulers-color-dark
-
-
-        .division
-            height: $rulers-size
-
-            .value
-                bottom: 0px
-                left: 3px
-
-
-        .subdivision
-            bottom: 0
-            height: 2px
-
-            &.middle
-                height: 5px
-
-
-    #linkeditor-ruler-y
-        width: $rulers-size
-        height: 100%
-
-        .info
-            width: $rulers-size
-            border-bottom: 1px dotted $rulers-color
-            @media (prefers-color-scheme: dark)
-                border-color: $rulers-color-dark
-
-
-            span
-                transform-origin: 0 0
-                transform: rotate(270deg)
-
-
-        .division, .subdivision
-            height: 0px
-            border-bottom: 1px solid $rulers-color
-            @media (prefers-color-scheme: dark)
-                border-color: $rulers-color-dark
-
-
-        .division
-            width: $rulers-size
-
-            .value
-                text-align: center
-                max-width: $rulers-size
-                word-wrap: break-word
-                white-space: normal
-                line-height: 10px
-                letter-spacing: 30px
-                top: 3px
-                left: 3px
-
-
-            .subdivision
-                right: 0
-                width: 2px
-
-                &.middle
-                    width: 5px
diff --git a/resources/linkeditor/style/style.sass b/resources/linkeditor/style/style.sass
index 1235de403..f3978143d 100644
--- a/resources/linkeditor/style/style.sass
+++ b/resources/linkeditor/style/style.sass
@@ -1,6 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap')
-@import "variables"
-@import "mixins"
+@import "inc/_variables"
+@import "inc/_mixins"
 
 *
     margin: 0
@@ -13,7 +13,7 @@
 body
     font-family: "Montserrat", sans-serif
     background-color: #ebecee
-    @media (prefers-color-scheme: dark)
+    @include dark-theme
         background-color: #333
 
 img, .division, .info
@@ -76,7 +76,7 @@ body, #linkeditor, html
 
             #linkeditor-canvas
                 background-color: #505050
-                @media (prefers-color-scheme: dark)
+                @include dark-theme
                     background-color: #222
 
                 position: relative
@@ -102,7 +102,7 @@ body, #linkeditor, html
                         top: 0px
                         left: 0px
                         background-color: rgba(255, 255, 255, 0.2)
-                        @media (prefers-color-scheme: dark)
+                        @include dark-theme
                             background-color: rgba(0, 0, 0, 0.2)
 
                         .contents
@@ -132,8 +132,10 @@ body, #linkeditor, html
 #linkeditor-preload
     display: none
 
-@import "panels"
-@import "toolbar"
-@import "rulers"
-@import "links"
-@import "form"
+@import "inc/_panels"
+@import "inc/_toolbar"
+@import "inc/_rulers"
+@import "inc/_links"
+@import "inc/_form"
+@import "inc/_versions"
+
diff --git a/resources/linkeditor/style/toolbar.sass b/resources/linkeditor/style/toolbar.sass
deleted file mode 100644
index 00a9aa3d6..000000000
--- a/resources/linkeditor/style/toolbar.sass
+++ /dev/null
@@ -1,103 +0,0 @@
-#linkeditor-toolbar
-    background-color: #dbdddf
-
-    @media (prefers-color-scheme: dark)
-        background-color: #444
-
-    color: $toolbar-color
-    @media (prefers-color-scheme: dark)
-        color: $toolbar-color-dark
-
-    height: $toolbar-height
-    padding: 5px
-
-    nav
-        padding: 2px
-        display: inline-block
-        height: 26px
-        vertical-align: top
-        width: 33%
-
-        &#linkeditor-toolbar-center
-            text-align: center
-
-    div
-        display: inline-block
-        font-size: $font-size
-
-    .separator
-        width: 0
-        height: 26px
-        margin: 0 2px
-        border-left: 1px solid $toolbar-color
-
-    #linkeditor-page-field
-        padding: 2px 10px
-        background-color: #fff
-        @media (prefers-color-scheme: dark)
-            background-color: #000
-            border-color: #333
-
-        border: 1px solid #ccc
-        border-radius: 5px
-        cursor: text
-        font-size: 13px
-        position: relative
-        top: -9px
-        user-select: none
-        margin: 0 8px
-        font-weight: 600
-
-        input
-            vertical-align: top
-            text-align: right
-            border: 0
-            background-color: transparent
-            width: 20px
-            color: $toolbar-color
-            @media (prefers-color-scheme: dark)
-                color: $toolbar-color-dark
-
-            font-size: 13px
-            appearance: textfield
-
-            &::-webkit-outer-adjust-hue-button, &::-webkit-inner-adjust-hue-button
-                -webkit-appearance: none
-                margin: 0
-
-            font-weight: 600
-            position: relative
-
-            &:hover, &:focus
-                outline: 0
-                border: 0
-
-    [data-icon]
-        display: inline-block
-        vertical-align: top
-        height: 26px
-        min-width: 26px
-        padding: 3px
-        border-radius: 5px
-        margin: 0 3px
-        text-align: center
-        color: $toolbar-color
-        @media (prefers-color-scheme: dark)
-            color: $toolbar-color-dark
-
-        &:hover, &.hover
-            background-color: #fff
-            @media (prefers-color-scheme: dark)
-                background-color: #000
-
-        &.arrow
-            padding: 1px
-
-            svg
-                height: 16px
-
-        svg
-            position: relative
-            top: 1px
-            height: 18px
-            width: auto
diff --git a/resources/linkeditor/style/variables.sass b/resources/linkeditor/style/variables.sass
deleted file mode 100644
index 2b1e58b70..000000000
--- a/resources/linkeditor/style/variables.sass
+++ /dev/null
@@ -1,12 +0,0 @@
-$font: Montserrat, sans-serif
-$font-size: 16px
-$sidebar-icons-width: 46px
-$sidebar-handle-width: 3px
-$rulers-size: 16px
-$ruler-margin: 2px
-
-$toolbar-height: 40px
-$toolbar-color: #5d5d5d
-$toolbar-color-dark: #bbb
-
-$panel-background: #dcdcdc
diff --git a/resources/views/fluidbook_publication/link_editor.blade.php b/resources/views/fluidbook_publication/link_editor.blade.php
index 4b95ad906..16a00ce27 100644
--- a/resources/views/fluidbook_publication/link_editor.blade.php
+++ b/resources/views/fluidbook_publication/link_editor.blade.php
@@ -47,6 +47,11 @@
             <a href="#" id="linkeditor-icon-form" data-panel="form" data-icon="settings"
                data-action="panels.toggleForm"
                data-tooltip="{{__('Paramètres du lien')}} (F8)" data-key="f8"></a>
+            <div id="linkeditor-panel-versions">
+                <div id="linkeditor-panel-versions-list">
+
+                </div>
+            </div>
         </div>
         <aside id="linkeditor-left" class="linkeditor-sidebar" data-side="left">
             <nav id="linkeditor-left-icons">
@@ -157,7 +162,7 @@
         var SETTINGS = @json($settings);
     </script>
     <script
-            src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
+        src="/packages/linkeditor/js/linkeditor.js?v={{filemtime(public_path('packages/linkeditor/js/linkeditor.js'))}}"></script>
 @endpush
 @push('linkeditor_styles')
     <script>window._skipAutoTriggers = true;</script>