@oxygen-cms/ui 1.7.2 → 1.8.0

package/src/components/content/HtmlNodeView.vue

@@ -0,0 +1,89 @@
+<template>
+    <NodeViewWrapper>
+        <div :class="{wrapper: true, editable: isEditable, selected: isEditable && selected}">
+            <template v-if="editing && isEditable">
+                <CodeEditor lang="html" height="20em" :value="node.attrs.code" @input="onInput"></CodeEditor>
+                <b-field class="toolbar">
+                    <p class="control"><b-button size="is-small" icon-left="save" @click="save"></b-button></p>
+                    <p class="control"><b-button size="is-small" icon-left="trash" @click="removeSelf"></b-button></p>
+                </b-field>
+            </template>
+            <template v-else>
+                <b-field v-if="isEditable" class="toolbar">
+                    <p class="control"><b-button size="is-small" data-drag-handle icon-left="grip-vertical"></b-button></p>
+                    <p class="control"><b-button size="is-small" icon-left="pencil-alt" @click="editing = true"></b-button></p>
+                    <p class="control"><b-button size="is-small" icon-left="trash" @click="removeSelf"></b-button></p>
+                </b-field>
+                <div v-html="node.attrs.code"></div>
+            </template>
+        </div>
+    </NodeViewWrapper>
+</template>
+
+<script>
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
+import CodeEditor from "../CodeEditor.vue";
+export default {
+    name: "HtmlNodeView",
+    components: {CodeEditor, NodeViewWrapper},
+    props: nodeViewProps,
+    data() {
+        return {
+            editing: false,
+            latestValue: null
+        }
+    },
+    computed: {
+        isEditable() {
+            return this.editor && this.editor.isEditable;
+        }
+    },
+    watch: {
+        'node': 'syncLatestValue'
+    },
+    mounted() {
+        if(!this.node.attrs.code) {
+            this.editing = true;
+        }
+        this.syncLatestValue();
+    },
+    methods: {
+        onInput(value) {
+            this.latestValue = value;
+        },
+        save() {
+            console.log("save", this.latestValue);
+            this.updateAttributes({
+                code: this.latestValue
+            });
+            this.editing = false;
+        },
+        syncLatestValue() {
+            this.latestValue = this.node.attrs.code;
+        },
+        removeSelf() {
+            this.deleteNode();
+        }
+    }
+}
+</script>
+
+<style scoped>
+    .wrapper {
+        position: relative;
+    }
+    .wrapper.editable {
+        min-height: 4rem;
+        outline: 1px dashed green;
+    }
+    .wrapper.selected {
+        outline: 2px solid green;
+    }
+
+    .toolbar {
+        z-index: 9;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+    }
+</style>

package/src/components/content/MarkMenu.vue

@@ -0,0 +1,116 @@
+<template>
+    <bubble-menu ref="bubbleMenu" :editor="editor" :should-show="shouldShowMarksMenu">
+        <div class="bubble-menu">
+            <p class="control"><b-button size="is-small" :type="editor.isActive('bold') ? 'is-info' : 'is-light'" icon-left="bold" @click="toggleMark('bold')"></b-button></p>
+            <p class="control"><b-button size="is-small" :type="editor.isActive('italic') ? 'is-info' : 'is-light'" icon-left="italic" @click="toggleMark('italic')"></b-button></p>
+            <p class="control"><b-button size="is-small" :type="editor.isActive('underline') ? 'is-info' : 'is-light'" icon-left="underline" @click="toggleMark('underline')"></b-button></p>
+            <p class="control"><b-button size="is-small" :type="editor.isActive('strike') ? 'is-info' : 'is-light'" icon-left="strikethrough" @click="toggleMark('strike')"></b-button></p>
+            <p class="control"><b-button size="is-small" :type="linkPanelActive ? 'is-info' : 'is-light'" icon-left="link" @click="toggleMark('link')"></b-button>
+            </p>
+            <p class="control"><b-button size="is-small" type="is-light" icon-left="remove-format" @click="editor.chain().focus().unsetAllMarks().run()"></b-button></p>
+        </div>
+        <div v-show="linkPanelActive" type="is-light">
+            <div class="modal-card" style="z-index: 10000;">
+                <header class="modal-card-head">
+                    <p class="modal-card-title">Edit Link</p>
+                    <b-button icon-left="external-link-alt" @click="openLink">Open link</b-button>
+                </header>
+                <div class="modal-card-body">
+                    <b-field label="URL" label-position="on-border">
+                        <b-input :value="linkUrl" @input="v => onLinkUpdate({linkUrl: v, linkOpenInNewWindow: linkOpenInNewWindow})"></b-input>
+                    </b-field>
+                    <b-switch :value="linkOpenInNewWindow" @input="v => onLinkUpdate({linkOpenInNewWindow: v, linkUrl: linkUrl})">Open in new window</b-switch>
+                    <br>
+                </div>
+            </div>
+        </div>
+    </bubble-menu>
+</template>
+
+<script>
+import {debounce} from "lodash";
+import {BubbleMenu, isTextSelection} from "@tiptap/vue-2";
+
+export default {
+    name: "MarkMenu",
+    components: {BubbleMenu},
+    props: {
+        editor: {type: Object, required: true}
+    },
+    data() {
+        return {
+            linkPanelActive: false,
+            linkUrl: '',
+            linkOpenInNewWindow: false
+        }
+    },
+    methods: {
+        openLink() {
+            window.open(this.linkUrl, '_blank').focus();
+        },
+        onLinkUpdate: debounce(function ({ linkUrl, linkOpenInNewWindow }) {
+            this.linkUrl = linkUrl;
+            this.linkOpenInNewWindow = linkOpenInNewWindow;
+            let props = { href: linkUrl };
+            if(linkOpenInNewWindow) {
+                props.target = '_blank';
+            }
+            console.log('setLink', props);
+            let oldSelection = this.editor.state.selection.getBookmark();
+            this.editor.chain().extendMarkRange('link').setLink(props).run();
+            this.editor.view.dispatch(this.editor.state.tr.setSelection(oldSelection.resolve(this.editor.state.doc)));
+        }, 1000),
+        toggleMark(ty) {
+            let oldSelection = this.editor.state.selection.getBookmark();
+            let cmd = this.editor.chain().focus()
+            if(this.editor.isActive(ty))
+            {
+                cmd = cmd.extendMarkRange(ty);
+            }
+            let uppercaseTy = ty.charAt(0).toUpperCase() + ty.slice(1);;
+            let toggle = cmd['toggle' + uppercaseTy];
+            toggle().run();
+            this.editor.view.dispatch(this.editor.state.tr.setSelection(oldSelection.resolve(this.editor.state.doc)));
+        },
+        shouldShowMarksMenu({view, state, from, to}) {
+            const { doc, selection } = state
+            const { empty } = selection
+
+            let isNodeSelection = selection.node;
+
+            // Sometime check for `empty` is not enough.
+            // Doubleclick an empty paragraph returns a node size of 2.
+            // So we check also for an empty text size.
+            const isEmptyTextBlock = !doc.textBetween(from, to).length
+                && isTextSelection(state.selection)
+
+            // When clicking on an element inside the bubble menu the editor "blur" event
+            // is called and the bubble menu item is focussed. In this case we should
+            // consider the menu as part of the editor and keep showing the menu
+            const isChildOfMenu = this.$refs.bubbleMenu.$el.contains(document.activeElement)
+
+            const hasEditorFocus = view.hasFocus() || isChildOfMenu
+
+            const isMarkActive = this.editor.isActive('link') || this.editor.isActive('bold') || this.editor.isActive('italic') || this.editor.isActive('underline') || this.editor.isActive('strike');
+
+            if(this.editor.isActive('link'))
+            {
+                let attrs = this.editor.getAttributes('link');
+                this.linkUrl = attrs.href;
+                this.linkOpenInNewWindow = attrs.target === '_blank';
+                this.linkPanelActive = true;
+            } else {
+                this.linkPanelActive = false;
+            }
+
+            return hasEditorFocus && ((!empty && !isEmptyTextBlock && !isNodeSelection) || isMarkActive) && this.editor.isEditable;
+        },
+    }
+}
+</script>
+
+<style scoped>
+.bubble-menu {
+    display: flex;
+}
+</style>

package/src/components/content/MediaNodeView.vue

@@ -0,0 +1,83 @@
+<template>
+    <NodeViewWrapper :class="{selected: isEditable && selected}">
+        <MediaInsertModal :multiselect-allowed="false" :active="mediaSelectActive" @select="selectItem" @close="removeSelf"></MediaInsertModal>
+        <MediaItemPreview v-if="item" :item="item">
+            <b-field v-if="isEditable && selected">
+                <p class="control">
+                    <b-button icon-left="grip-vertical" size="is-small" data-drag-handle></b-button>
+                </p>
+                <p class="control">
+                    <b-button size="is-small" icon-left="file-image" @click="mediaSelectActive=true"></b-button>
+                </p>
+                <p class="control">
+                    <b-button size="is-small" icon-left="trash" @click="removeSelf"></b-button>
+                </p>
+            </b-field>
+        </MediaItemPreview>
+        <em v-else>No media item selected</em>
+    </NodeViewWrapper>
+</template>
+
+<script>
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
+import MediaInsertModal from "../media/MediaInsertModal.vue";
+import MediaItemPreview from "../media/MediaItemPreview.vue";
+import MediaApi from "../../MediaApi.js";
+
+export default {
+    name: "MediaNodeView",
+    components: {MediaItemPreview, MediaInsertModal, NodeViewWrapper },
+    props: nodeViewProps,
+    data() {
+        return {
+            mediaApi: new MediaApi(),
+            mediaSelectActive: false,
+            item: null
+        }
+    },
+    computed: {
+        isEditable() {
+            return this.editor.isEditable;
+        }
+    },
+    watch: {
+        'node.attrs.id': 'fetchMediaItem'
+    },
+    mounted() {
+        if(!this.node.attrs.id) {
+            this.mediaSelectActive = true;
+        }
+        this.fetchMediaItem()
+    },
+    methods: {
+        async fetchMediaItem() {
+            if(!this.node.attrs.id) {
+                this.item = null;
+                return;
+            }
+            if(this.item !== null && this.item.id === this.node.attrs.id) { return; }
+            console.log('fetching media item');
+            this.item = (await this.mediaApi.get(this.node.attrs.id)).item;
+        },
+        selectItem(items) {
+            console.assert(items.length === 1);
+            this.updateAttributes({
+                id: items[0].id
+            });
+            this.mediaSelectActive = false;
+            this.editor.chain().focus().run();
+        },
+        removeSelf() {
+            this.deleteNode()
+            this.editor.chain().focus().insertContent({type: 'paragraph', text: ''}).run();
+        }
+    }
+}
+</script>
+
+<style scoped lang="scss">
+    @import "../../styles/_variables.scss";
+    .selected {
+        outline: 2px solid $danger;
+    }
+</style>

package/src/components/content/ObjectLinkNodeView.vue

@@ -0,0 +1,181 @@
+<template>
+    <NodeViewWrapper class="object-link">
+        <b-skeleton v-if="!resolvedHref"></b-skeleton>
+        <a v-else-if="!isEditable" :href="getApiHost() + resolvedHref">{{ node.attrs.content ? node.attrs.content : defaultTitle }}</a>
+        <a v-else href="#" @click="onLinkClicked">{{ node.attrs.content ? node.attrs.content : defaultTitle }}</a>
+        <b-modal :active="node.attrs.type === 'page' && !node.attrs.id" has-modal-card aria-modal width="80%" class="choose-page" @close="deleteNode">
+            <div class="modal-card">
+                <div class="modal-card-head">
+                    <p class="modal-card-title">Choose a page</p>
+                </div>
+                <div class="modal-card-body is-flex">
+                    <PageList>
+                        <template #actions="props">
+                            <b-button type="is-primary" @click="selectedPage(props.row)">Select</b-button>
+                        </template>
+                    </PageList>
+                </div>
+            </div>
+        </b-modal>
+        <MediaInsertModal :active="node.attrs.type === 'media' && !node.attrs.id" :multiselect-allowed="false" close-verb="Remove link" :action-verb="shouldReturnToEditModal ? 'Choose' : 'Insert link'" @close="deleteNode" @select="selectedMedia"></MediaInsertModal>
+        <b-modal :active="editLinkModalActive" has-modal-card aria-modal @update:active="v => editLinkModalActive = v">
+            <div class="modal-card">
+                <div class="modal-card-head is-flex">
+                    <div>
+                        <p class="modal-card-title">Edit Link</p>
+                    </div>
+                    <div class="is-flex-grow-1"></div>
+                    <b-button icon-left="trash" @click="deleteNode">Remove</b-button>
+                </div>
+                <div class="modal-card-body">
+                    <b-field label="Title">
+                        <b-input :value="node.attrs.content" :placeholder="defaultTitle" @input="v => updateAttributes({ content: v })"></b-input>
+                    </b-field>
+                    <div class="label">Target</div>
+                    <div class="card">
+                        <div class="card-content">
+                            <div v-if="node.attrs.type === 'media' && resolvedObject" class="media is-align-items-center">
+                                <div class="media-content">
+                                    <p class="title is-4">{{ resolvedObject.name }}</p>
+                                    <p class="subtitle is-6">{{ resolvedObject.fullPath }}</p>
+                                </div>
+                                <div class="media-right buttons">
+                                    <b-button icon-left="images" @click="clearId(true)">Change...</b-button>
+                                </div>
+                            </div>
+                            <div v-if="node.attrs.type === 'page' && resolvedObject" class="media">
+                                <div class="media-icon">
+                                    <b-icon icon="file-alt" size="is-large" class="mr-4 huge-icon"></b-icon>
+                                </div>
+                                <div class="media-content">
+                                    <p class="title is-4">{{ resolvedObject.title }}</p>
+                                    <p class="subtitle is-6">{{ resolvedObject.slug }}</p>
+                                </div>
+                                <div class="media-right buttons">
+                                    <b-button icon-left="images" @click="clearId(true)">Change...</b-button>
+                                </div>
+                            </div>
+                        </div>
+                        <div v-if="node.attrs.type === 'media' && resolvedObject" class="card-image">
+                            <MediaItemPreview :item="resolvedObject" />
+                        </div>
+                    </div>
+<!--                    <b-button @click="clearId">Select different object...</b-button>-->
+                </div>
+            </div>
+        </b-modal>
+    </NodeViewWrapper>
+</template>
+
+<script>
+import { nodeViewProps, NodeViewWrapper } from '@tiptap/vue-2'
+import {getApiRoot} from "../../CrudApi.js";
+import {FetchBuilder, getApiHost} from "../../api.js";
+import MediaInsertModal from "../media/MediaInsertModal.vue";
+import MediaItemPreview from "../media/MediaItemPreview.vue";
+import {getDirectoryPathString} from "../../MediaDirectoryApi.js";
+import PageList from "../pages/PageList.vue";
+
+export default {
+    name: "ObjectLinkNodeView",
+    components: {MediaInsertModal, NodeViewWrapper, MediaItemPreview, PageList },
+    props: nodeViewProps,
+    data() {
+        return {
+            getDirectoryPathString: getDirectoryPathString,
+            editLinkModalActive: false,
+            shouldReturnToEditModal: false,
+            resolvedHref: null,
+            resolvedObject: null,
+            defaultTitle: '',
+            getApiHost
+        }
+    },
+    computed: {
+        isEditable() {
+            return this.editor.isEditable;
+        }
+    },
+    watch: {
+        'node.attrs.id': 'resolveUrl',
+        'node.attrs.type': 'resolveUrl'
+    },
+    mounted() {
+        this.resolveUrl()
+    },
+    methods: {
+        async resolveUrl() {
+            if(!this.node.attrs.id) {
+                this.resolvedHref = null;
+                return;
+            }
+            let result = await this.resolveLink({ type: this.node.attrs.type, id: this.node.attrs.id });
+            console.log(result);
+            // trim the leading '/' from the URL
+            this.resolvedHref = result.url.substring(1);
+            this.defaultTitle = result.title;
+            this.resolvedObject = result.object;
+        },
+        async resolveLink(params) {
+            return await (FetchBuilder.default(this.$buefy, 'get').withQueryParams(params).fetch(getApiRoot() + 'object-link/resolve'));
+        },
+        async selectedItem(info) {
+            let resolved = await this.resolveLink(info);
+            if(this.shouldReturnToEditModal) {
+                this.editLinkModalActive = true;
+            }
+            this.updateAttributes({
+                ...info,
+                content: resolved.title
+            });
+        },
+        async selectedPage(page) {
+            return await this.selectedItem({ type: 'page', id: page.id });
+        },
+        async selectedMedia(items) {
+            if(items.length !== 1) {
+                throw new Error('expected exactly 1 item');
+            }
+            return await this.selectedItem({ type: 'media', id: items[0].id});
+        },
+        clearId(shouldReturnToEditModal) {
+            this.shouldReturnToEditModal = shouldReturnToEditModal;
+            this.editLinkModalActive = false;
+            this.updateAttributes({
+                id: null
+            });
+        },
+        onLinkClicked() {
+            this.editLinkModalActive = true
+        }
+    }
+}
+</script>
+
+<style scoped>
+.object-link {
+    display: inline;
+}
+
+.media-icon ::v-deep .huge-icon {
+    width: 6rem;
+    height: 6rem;
+    font-size: 300%;
+}
+
+.choose-page ::v-deep .modal-card {
+    width: 100%;
+    height: 100%;
+    max-width: 1600px;
+}
+
+.choose-page ::v-deep .animation-content {
+    max-height: calc(100vh - 10rem);
+    height: 100%;
+}
+
+::v-deep .b-skeleton {
+    width: 10rem;
+    margin: 0 0.5rem;
+}
+</style>