@oxygen-cms/ui 2.0.0 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oxygen-cms/ui",
-  "version": "2.0.0",
+  "version": "2.1.1",
   "description": "Various utilities for UI-building in Vue.js",
   "main": "none",
   "repository": {

package/src/components/ContentResourceEdit.vue

@@ -135,8 +135,8 @@
 
         <!-- SLOT: Inline settings (shown between toolbar and editor) -->
         <slot
-            name="inline-settings"
             v-if="!isFullscreen"
+            name="inline-settings"
             :model="model"
             :is-dirty="isDirty"
             :server-model="serverModel"
@@ -144,11 +144,12 @@
         ></slot>
 
         <!-- Editor Toolbar -->
-        <div v-if="!loading" class="has-background-white-bis px-4 py-3 is-flex is-align-items-center" style="border-bottom: 1px solid #dbdbdb; gap: 1rem;">
+        <div class="has-background-white-bis px-4 py-3 is-flex is-align-items-center" style="border-bottom: 1px solid #dbdbdb; gap: 1rem;">
             <b-field class="mb-0">
                 <p class="control">
                 <b-button
                     :type="editorMode === 'code' ? 'is-dark' : ''"
+                    :disabled="loading"
                     @click="switchEditorMode('code')"
                 >
                     Code
@@ -156,6 +157,7 @@
                 <p class="control">
                 <b-button
                     :type="editorMode === 'split' ? 'is-dark' : ''"
+                    :disabled="loading"
                     @click="switchEditorMode('split')"
                 >
                     Split
@@ -163,31 +165,32 @@
                 <p class="control">
                 <b-button
                     :type="editorMode === 'preview' ? 'is-dark' : ''"
+                    :disabled="loading"
                     @click="switchEditorMode('preview')"
                 >
                     Preview
                 </b-button></p>
             </b-field>
 
-            <b-button icon-left="image" :disabled="editorMode === 'preview'" @click="isMediaModalActive = true">
+            <b-button icon-left="image" :disabled="loading || editorMode === 'preview'" @click="isMediaModalActive = true">
                 Insert Photo or File
             </b-button>
 
-            <b-switch v-if="hasFullPagePreview" :value="renderLayout" size="is-small" @input="updateQueryParam('fullPage', $event)">
+            <b-switch v-if="hasFullPagePreview" :value="renderLayout" :disabled="loading" size="is-small" @input="updateQueryParam('fullPage', $event)">
                 Preview full page
             </b-switch>
 
             <b-switch
-                :value="isFullscreen" size="is-small" @input="updateQueryParam('fullscreen', $event)"
+                :value="isFullscreen" :disabled="loading" size="is-small" @input="updateQueryParam('fullscreen', $event)"
             >Focus</b-switch>
 
             <div class="is-flex-grow-1"></div>
 
             <b-field>
                 <p class="control">
-                    <b-dropdown position="is-bottom-left" aria-role="menu">
+                    <b-dropdown position="is-bottom-left" aria-role="menu" :disabled="loading">
                         <template #trigger>
-                            <b-button :label="versionStrategyLabel" icon-right="caret-down" :disabled="!isDirty" />
+                            <b-button :label="versionStrategyLabel" icon-right="caret-down" :disabled="loading || !isDirty" />
                         </template>
                         <b-dropdown-item aria-role="menuitem" @click="versionStrategy = 'guess'">
                             Create New Version if Needed
@@ -205,7 +208,7 @@
                         type="is-primary"
                         icon-left="save"
                         :loading="saving"
-                        :disabled="!isDirty"
+                        :disabled="loading || !isDirty"
                         @click="save"
                     >
                         Save
@@ -444,7 +447,8 @@ export default {
             previewHtml: '',
             previewDebounceTimer: null,
             editingTitle: false,
-            editingTitleValue: ''
+            editingTitleValue: '',
+            isLoadingFromServer: false
         }
     },
     computed: {
@@ -534,7 +538,12 @@ export default {
     watch: {
         'model.content': {
             handler(newVal) {
-                console.log('model.content changed, length:', newVal ? newVal.length : 0, 'mode:', this.editorMode);
+                console.log('model.content changed, length:', newVal ? newVal.length : 0, 'mode:', this.editorMode, 'isLoadingFromServer:', this.isLoadingFromServer);
+                // Skip refresh if we're loading from server - the query watcher or mounted hook will handle it
+                if (this.isLoadingFromServer) {
+                    console.log('Skipping refresh - loading from server');
+                    return;
+                }
                 if (this.editorMode === 'split' || this.editorMode === 'preview') {
                     this.debouncedRefreshPreview();
                 }
@@ -577,12 +586,19 @@ export default {
         },
         async fetchData() {
             this.loading = true;
+            this.isLoadingFromServer = true;
             try {
                 const response = await this.resourceApi.get(this.resourceId);
                 this.setModel(response.item);
                 this.editingNonHead = !this.isHeadVersion;
+                // Trigger initial preview refresh after data loads
+                if (this.editorMode === 'split' || this.editorMode === 'preview') {
+                    this.refreshPreview();
+                }
             } catch (error) {
                 console.error('Failed to fetch resource:', error);
+            } finally {
+                this.isLoadingFromServer = false;
             }
         },
         setModel(model) {

package/src/components/UserProfileForm.vue

@@ -34,7 +34,7 @@
 
         <b-button v-if="admin" @click="isUserPreferencesModalActive = true">Open User Preferences...</b-button>
 
-        <ShowIfPermitted v-if="!admin" :keys="['user.general', 'user.editor']">
+        <ShowIfPermitted v-if="!admin" :keys="['user.editor']">
             <b-notification :closable="false" class="bottom-margin">
                 <h2 class="subtitle">User Preferences</h2>
                 <p>You can modify and personalize certain aspects of this administration interface to suit your own preferences.</p>

package/src/components/preferences/UserPreferences.vue

@@ -1,10 +1,7 @@
 <template>
     <div>
-        <h3 class="subtitle">General</h3>
-        <PreferencesField label="Font Size" data-key="user.general::fontSize" type="select" default-text="group"></PreferencesField>
         <h3 class="subtitle">Editor</h3>
         <PreferencesField label="Default Mode" data-key="user.editor::defaultMode" type="select" default-text="group"></PreferencesField>
-        <PreferencesField label="Overall Theme" data-key="user.editor::theme" type="select" default-text="group"></PreferencesField>
         <h4 class="subtitle is-6">Code Editor</h4>
         <PreferencesField label="Theme" data-key="user.editor::ace.theme" type="select" grouped default-text="group"></PreferencesField>
         <PreferencesField label="Font Size" data-key="user.editor::ace.fontSize" type="select" default-text="group"></PreferencesField>
@@ -12,8 +9,6 @@
         <PreferencesField label="Highlight Active Line" data-key="user.editor::ace.highlightActiveLine" type="switch" default-text="group"></PreferencesField>
         <PreferencesField label="Show Print Margin" data-key="user.editor::ace.showPrintMargin" type="switch" default-text="group"></PreferencesField>
         <PreferencesField label="Show Invisibles" data-key="user.editor::ace.showInvisibles" type="switch" default-text="group"></PreferencesField>
-        <h4 class="subtitle is-6">Design Editor</h4>
-        <PreferencesField label="Theme" data-key="user.editor::ckeditor.skin" type="select" grouped default-text="group"></PreferencesField>
     </div>
 </template>
 

package/src/modules/PagesPartials.js

@@ -1,4 +1,3 @@
-import LegacyPage from "../components/LegacyPage.vue";
 import { WEB_CONTENT } from "../main.js";
 import PageEdit from "../components/pages/PageEdit.vue";
 import PartialEdit from "../components/partials/PartialEdit.vue";
@@ -42,17 +41,6 @@ export default function(ui) {
     const pagesProps = { displayName: 'Pages', routePrefix: 'pages', inTrash: false, tableComponent: PageTable, actionsComponent: PageActions, singularDisplayName: 'Page', defaultSortField: 'title', defaultSortOrder: 'asc', resourceApi: new PagesApi(), createDropdownComponent: CreatePageDropdown }
 
     ui.addAuthenticatedRoutes([
-        {
-            path: 'pages/:subpath/edit',
-            component: LegacyPage,
-            props: (route) => {
-                return {
-                    fullPath: route.fullPath,
-                    legacyPrefix: '/oxygen/view',
-                    adminPrefix: '/oxygen'
-                }
-            }
-        },
         {
             path: 'partials/trash',
             name: 'partials.trash',

package/src/components/LegacyPage.vue

@@ -1,263 +0,0 @@
-<template>
-    <div class="full-height full-height-container legacy-container">
-        <transition name="fade">
-            <iframe v-show="!loading" ref="iframe" class="iframe" />
-        </transition>
-
-        <MediaInsertModal :active.sync="isInsertMediaItemModalActive" @close="closeInsertMediaItemModal" @select="onFilesSelected" />
-    </div>
-</template>
-
-<script>
-import MediaInsertModal from "./media/MediaInsertModal.vue";
-
-import {getApiHost, initCsrfCookie, morphToNotification} from "../api";
-import MediaApi from "../MediaApi";
-import {LOGIN_AGAIN_NOTIFICATION} from "../AuthApi";
-
-// from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
-
-const iframeURLChange = (iframe, callback, legacyPage) => {
-    var unloadHandler = function() {
-        console.log('[LegacyPage] Starting load');
-        legacyPage.loadingPath = 'unknown';
-    };
-
-    function attachUnload() {
-        // Remove the unloadHandler in case it was already attached.
-        // Otherwise, the change will be dispatched twice.
-        iframe.contentWindow.removeEventListener("unload", unloadHandler);
-        iframe.contentWindow.addEventListener("unload", unloadHandler);
-    }
-
-    iframe.addEventListener("load", attachUnload);
-    attachUnload();
-}
-
-// This component manages the tricky/hacky integration of two incompatible GUI systems.
-// Legacy pages are rendered inside an iframe, and legacy pages can transition between each other using SmoothState.js
-// When the iframe location is updated, so is the url of the parent page using this.$router.push()
-
-export default {
-    name: "LegacyPage",
-    components: { MediaInsertModal },
-    beforeRouteLeave(to, from, next) {
-        window.document.body.style.overflowY = 'auto';
-        window.document.documentElement.style.overflowY = 'auto';
-        this.$parent.$data.requestedCollapsed = false;
-        next();
-    },
-    props: {
-        fullPath: { type: String, required: true },
-        legacyPrefix: { type: String, required: true },
-        adminPrefix: { type: String, required: true }
-    },
-    data() {
-        return {
-            loadingPath: null,
-            currentPath: null,
-            isInsertMediaItemModalActive: false,
-            resolveInsertMediaItems: null,
-            rejectInsertMediaItems: null
-        }
-    },
-    computed: {
-        loading() { return this.loadingPath !== null; },
-        userPreferences() { return this.$store.getters.userPreferences; }
-    },
-    'watch': {
-        'fullPath': 'onFullPathChanged'
-    },
-    async mounted() {
-        this.loadingPath = 'prefs';
-
-        window.document.body.style.overflowY = 'hidden';
-        window.document.documentElement.style.overflowY = 'hidden';
-        let iframe = this.$refs.iframe;
-
-        iframeURLChange(iframe, this.onNavigated.bind(this), this);
-
-        this.loadPath(this.$route.fullPath);
-
-        iframe.addEventListener('load', this.onLoaded.bind(this));
-        if(iframe.contentDocument.readyState === "complete") {
-            console.warn('[LegacyPage] mounted: page was already loaded - perhaps this page was cached?');
-            await this.onLoaded();
-        }
-    },
-    unmounted() {
-        this.$parent.$data.requestedCollapsed = false;
-    },
-    methods: {
-        onFullPathChanged(newFullPath) {
-            console.log('Route changed', );
-            this.loadPath(newFullPath);
-        },
-        setupIframeIntegrations() {
-            console.log('[LegacyPage] Setting up iframe integrations for', this.$refs.iframe.contentWindow.location.href);
-            let elem = this.$refs.iframe;
-            elem.contentWindow.Oxygen = elem.contentWindow.Oxygen || {};
-            elem.contentWindow.Oxygen.user = this.userPreferences.preferences;
-            elem.contentWindow.Oxygen.onNavigationBegin = this.onNavigated.bind(this);
-            elem.contentWindow.Oxygen.onNavigationEnd = this.onLoaded.bind(this);
-            elem.contentWindow.Oxygen.notify = this.showInnerNotification.bind(this);
-            elem.contentWindow.Oxygen.openAlertDialog = this.openAlertDialog.bind(this);
-            elem.contentWindow.Oxygen.hardRedirect = this.hardRedirect.bind(this);
-            elem.contentWindow.Oxygen.insertMediaItem = this.openInsertMediaItemModal.bind(this);
-            elem.contentWindow.Oxygen.openConfirmDialog = this.openConfirmDialog.bind(this);
-            elem.contentWindow.Oxygen.popState = this.popState.bind(this);
-            elem.contentWindow.Oxygen.onToggleFullscreen = this.onToggleFullscreen.bind(this);
-
-            if(elem.contentWindow.Oxygen.onLoadedInsideIFrame) {
-                elem.contentWindow.Oxygen.onLoadedInsideIFrame();
-            } else {
-                console.warn('[LegacyPage] no onLoadedInsideIFrame callback set');
-            }
-        },
-        fullURLToVuePath(url) {
-            let urlObj = new URL(url);
-            let urlString = urlObj.toString();
-            if(urlObj.pathname.startsWith(this.legacyPrefix)) {
-                let loc = urlString.split(this.legacyPrefix)[1];
-                return { loadInside: 'iframe', location: this.adminPrefix + loc, locationWithoutPrefix: loc };
-            } else if(urlObj.pathname.startsWith(this.adminPrefix)) {
-                return { loadInside: 'vue', location: urlString.split(this.adminPrefix)[1] };
-            } else {
-                return { loadInside: false, location: urlString };
-            }
-        },
-        vuePathToURL(path) {
-            return getApiHost() + this.legacyPrefix.replace(/^\//, '') + path;
-        },
-        // We detect when the iframe url changes, and update our window accordingly...
-        onNavigated(newURL) {
-            console.log('[LegacyPage] Navigated to ' + newURL);
-        },
-        showInnerNotification(data) {
-            this.$buefy.notification.open(morphToNotification(data));
-        },
-        openAlertDialog(message) {
-            this.$buefy.dialog.alert({
-                message: message,
-                size: 'is-small'
-            });
-        },
-        openConfirmDialog(options) {
-            this.$buefy.dialog.confirm(options);
-        },
-        popState() {
-            this.$router.back();
-        },
-        async onLoaded() {
-            let path = this.$refs.iframe.contentWindow.location.href;
-            if(path === 'about:blank') { return; }
-            console.log('[LegacyPage] Loaded', path);
-
-            if(path !== this.currentPath) {
-                let { loadInside, location } = this.fullURLToVuePath(path);
-                console.log('[LegacyPage] ', 'loadInside:', loadInside, 'location:', location);
-                if(loadInside === 'iframe') {
-                    window.history.pushState({}, "", location);
-                } else if(loadInside === 'vue') {
-                    if(location.startsWith('/auth/login?location=')) {
-                        // If the legacy page is redirecting us to login,
-                        // then that must be because our auth expired/failed.
-                        // So we explicitly log ourselves out, and redirect to the login page.
-                        let redirectTo = this.fullURLToVuePath(this.currentPath);
-                        if(redirectTo.loadInside !== 'iframe') { throw new Error("this.currentPath was not inside iframe"); }
-                        console.log("Requested redirect to /auth/login . Clearing user state first", redirectTo);
-                        this.$store.commit('setUser', null);
-                        this.$buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
-                        await initCsrfCookie();
-                        location = { name: 'login', query: { redirect: redirectTo.locationWithoutPrefix } };
-                    }
-
-                    await this.$router.push(location);
-                    return;
-                } else {
-                    // load outside of iframe
-                    window.location = location;
-                    return;
-                }
-                this.currentPath = path;
-            }
-
-            document.title = this.$refs.iframe.contentDocument.title;
-            this.setupIframeIntegrations();
-
-            this.loadingPath = null;
-        },
-        loadPath(routePath) {
-            let path = this.vuePathToURL(routePath);
-            if(path.endsWith('/oxygen/view/auth/login')) {
-                console.log('[LegacyPage] Need to login again, redirecting...');
-                window.location.replace('/oxygen/auth/login');
-            }
-
-            console.log('[LegacyPage] Loading', path);
-
-            this.loadingPath = path;
-
-            let elem = this.$refs.iframe;
-            if(elem.src !== path) {
-                // load the page from scratch
-                elem.src = path;
-            }
-        },
-        hardRedirect(loc) {
-            window.location.replace(loc);
-        },
-        openInsertMediaItemModal() {
-            this.isInsertMediaItemModalActive = true;
-            return new Promise((resolve, reject) => {
-                this.resolveInsertMediaItems = resolve;
-                this.rejectInsertMediaItems = reject;
-            });
-        },
-        closeInsertMediaItemModal() {
-            this.rejectInsertMediaItems({ message: 'modal closed' });
-            this.isInsertMediaItemModalActive = false;
-        },
-        onFilesSelected(files) {
-            let include = files.map(item => MediaApi.generateIncludeStatement(item)).join("\n") + "\n";
-            let filenames = files.map(item => item.fullPath).join(",");
-            this.resolveInsertMediaItems(include);
-            this.isInsertMediaItemModalActive = false;
-            this.$buefy.toast.open({
-                message: 'Inserted ' + filenames,
-                type: 'is-info',
-                queue: false
-            });
-        },
-        onToggleFullscreen(mode) {
-            this.$parent.$data.requestedCollapsed = mode;
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    @import  './util.css';
-    @import '../styles/_variables.scss';
-
-    .iframe {
-        flex: 1;
-        width: 100%;
-    }
-
-    .hidden {
-        transition: opacity 1s ease, visibility 1s ease;
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    .visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .legacy-container {
-        position: relative;
-        background-color: $grey-lightest;
-    }
-</style>