maglevcms 1.0.0.rc1

data/app/javascript/editor/components/kit/modal-root.vue

@@ -0,0 +1,81 @@
+<template>
+  <modal
+    :isOpen="!!currentModal"
+    :title="title"
+    :containerClass="containerClass"
+    @on-close="handleOutsideClick"
+  >
+    <component
+      v-for="(modal, index) in stack"
+      :key="`modal-${index}`"
+      :is="modal.component"
+      @on-close="handleClose"
+      v-bind="modal.props"
+      v-on="modal.listeners"
+      v-show="index === stack.length - 1"
+    />
+  </modal>
+</template>
+
+<script>
+import { ModalBus } from '@/plugins/event-bus'
+
+export default {
+  name: 'ModalRoot',
+  data() {
+    return {
+      stack: [], // NOTE: we stack modals!
+    }
+  },
+  created() {
+    ModalBus.$on(
+      'open',
+      ({
+        component,
+        title = '',
+        props = null,
+        listeners = {},
+        closeOnClick = true,
+      }) => {
+        this.stack.push({
+          component,
+          title,
+          props,
+          listeners,
+          closeOnClick,
+        })
+      },
+    )
+
+    ModalBus.$on('close', () => this.handleClose())
+    document.addEventListener('keyup', this.handleKeyup)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keyup', this.handleKeyup)
+  },
+  computed: {
+    currentModal() {
+      return this.stack.length === 0 ? null : this.stack[this.stack.length - 1]
+    },
+    title() {
+      return this.currentModal?.title
+    },
+    containerClass() {
+      return this.currentModal?.props?.modalClass
+    },
+  },
+  methods: {
+    handleOutsideClick(force) {
+      if (!this.closeOnClick && !force) return
+      this.handleClose()
+    },
+    handleKeyup(e) {
+      if (e.keyCode === 27) this.handleClose()
+    },
+    handleClose() {
+      if (!this.currentModal) return
+      this.stack.pop()
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/modal.vue

@@ -0,0 +1,39 @@
+<template>
+  <transition name="modal">
+    <div class="modal-mask" v-if="isOpen">
+      <div class="modal-wrapper" @click="$emit('on-close')">
+        <div class="modal-container" :class="containerClass" @click.stop>
+          <div class="modal-header">
+            <slot name="header">
+              <h3 class="text-gray-800 font-semibold antialiased text-lg">
+                {{ title }}
+              </h3>
+            </slot>
+            <button
+              class="modal-close-button"
+              type="button"
+              @click="$emit('on-close', true)"
+            >
+              <icon name="ri-close-circle-line" />
+            </button>
+          </div>
+
+          <div class="modal-body">
+            <slot></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+export default {
+  name: 'Modal',
+  props: {
+    isOpen: Boolean,
+    title: { type: String, default: 'Modal' },
+    containerClass: { type: String, default: 'w-108' },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/page-icon.vue

@@ -0,0 +1,21 @@
+<template>
+  <icon :name="iconName" />
+</template>
+
+<script>
+export default {
+  name: 'PageIcon',
+  props: {
+    page: { type: Object, required: true },
+    size: { type: String, default: '1.25rem' },
+  },
+  computed: {
+    iconName() {
+      return this.isIndexPage ? 'home-4-line' : 'ri-file-line'
+    },
+    isIndexPage() {
+      return this.services.page.isIndex(this.page)
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/pagination/button.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    class="flex items-center justify-center h-6 w-6 text-sm rounded-sm"
+    :class="buttonClass"
+    @click="$emit('click', page)"
+  >
+    <slot>
+      {{ page }}
+    </slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'PageButton',
+  props: {
+    page: { required: true },
+    activePage: { type: Number },
+  },
+  computed: {
+    buttonClass() {
+      return {
+        'bg-white': !this.enabled,
+        'hover:bg-gray-100': !this.enabled,
+        'text-gray-900': !this.enabled,
+        'bg-editor-primary': this.enabled,
+        'text-white': this.enabled,
+      }
+    },
+    enabled() {
+      return this.page === this.activePage
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/pagination/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="flex justify-between items-center h-12">
+    <div class="text-sm">
+      <span v-if="totalItems > 0">
+        {{ $t(labelI18nKey, { start, end, totalItems }) }}
+      </span>
+      <span v-else>
+        {{ $t(noItemsI18nKey) }}
+      </span>
+    </div>
+    <div class="flex items-center" v-if="visible">
+      <page-button :page="activePage - 1" @click="change" class="mr-1">
+        <icon name="arrow-drop-left" />
+      </page-button>
+
+      <page-button
+        :page="1"
+        :activePage="activePage"
+        @click="change"
+        class="mr-1"
+      />
+
+      <page-button
+        v-for="(page, index) in pages"
+        :key="`page-${index}`"
+        :page="page"
+        :activePage="activePage"
+        @click="change"
+        class="mr-1"
+      />
+
+      <page-button
+        :page="totalPages"
+        :activePage="activePage"
+        @click="change"
+        class="mr-1"
+      />
+
+      <page-button :page="activePage + 1" @click="change">
+        <icon name="arrow-drop-right" />
+      </page-button>
+    </div>
+  </div>
+</template>
+
+<script>
+// Inspired by https://github.com/arnedesmedt/vue-ads-pagination (MIT License)
+import PageButton from './button'
+
+export default {
+  name: 'Pagination',
+  components: { PageButton },
+  props: {
+    labelI18nKey: { type: String, default: 'pagination.defaultLabel' },
+    noItemsI18nKey: { type: String, default: 'pagination.defaultNoItems' },
+    activePage: { type: Number, default: 1 },
+    perPage: { type: Number, default: 10 },
+    totalItems: { type: Number, default: 1 },
+    maxVisiblePages: { type: Number, default: 5 },
+  },
+  computed: {
+    visible() {
+      return this.totalItems > this.perPage
+    },
+    start() {
+      return (this.activePage - 1) * this.perPage + 1
+    },
+    end() {
+      let end = this.activePage * this.perPage
+      return end > this.totalItems - 1 ? this.totalItems : end
+    },
+    totalPages() {
+      return this.perPage === 0 ? 0 : Math.ceil(this.totalItems / this.perPage)
+    },
+    pages() {
+      let filteredPages = this.filteredPages
+      return filteredPages
+        ? [
+            filteredPages[0] - 1 === 2 ? 2 : '...',
+            ...filteredPages,
+            filteredPages[filteredPages.length - 1] === this.totalPages - 2
+              ? this.totalPages - 1
+              : '...',
+          ]
+        : [...Array(this.totalPages - 2).keys()].map((page) => page + 2)
+    },
+    filteredPages() {
+      let diff = this.maxVisiblePages / 2
+      let toFilterPages = [...Array(this.totalPages).keys()]
+        .map((page) => page + 1)
+        .slice(2, -2)
+      if (toFilterPages.length > this.maxVisiblePages) {
+        let diffFirst = this.activePage - toFilterPages[0]
+        let diffLast = this.activePage - toFilterPages[toFilterPages.length - 1]
+        if (diffFirst < diff) {
+          return toFilterPages.slice(0, this.maxVisiblePages)
+        } else if (diffLast >= -diff) {
+          return toFilterPages.slice(-this.maxVisiblePages)
+        } else {
+          return toFilterPages.filter((page) => {
+            let diffPage = this.activePage - page
+            return diffPage < 0 ? Math.abs(diffPage) <= diff : diffPage < diff
+          })
+        }
+      }
+      return null
+    },
+  },
+  methods: {
+    change(page) {
+      if (page < 1 || page > this.totalPages || page === '...') return
+      this.$emit('change', page)
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/rich-text-input/block-button.vue

@@ -0,0 +1,75 @@
+<template>
+  <dropdown placement="left" ref="dropdown">
+    <template v-slot:button>
+      <button
+        class="rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 flex items-center focus:outline-none focus:ring"
+      >
+        <icon :name="iconName" class="w-4 h-4 text-dark" />
+        <icon name="arrow-down-s-line" class="ml-1" />
+      </button>
+    </template>
+
+    <template v-slot:content>
+      <div class="w-full flex">
+        <button class="py-2 px-3 hover:bg-gray-200" @click="commands.paragraph">
+          <icon name="format-paragraph" />
+        </button>
+        <button
+          class="py-2 px-3 hover:bg-gray-200"
+          @click="commands.heading({ level: 2 })"
+        >
+          <icon name="format-heading-2" />
+        </button>
+        <button
+          class="py-2 px-3 hover:bg-gray-200"
+          @click="commands.heading({ level: 3 })"
+        >
+          <icon name="format-heading-3" />
+        </button>
+        <button
+          class="py-2 px-3 hover:bg-gray-200"
+          @click="commands.heading({ level: 4 })"
+        >
+          <icon name="format-heading-4" />
+        </button>
+        <button
+          class="py-2 px-3 hover:bg-gray-200"
+          @click="commands.blockquote"
+        >
+          <icon name="format-blockquote" />
+        </button>
+        <button
+          class="py-2 px-3 hover:bg-gray-200"
+          @click="commands.code_block"
+        >
+          <icon name="format-code" />
+        </button>
+      </div>
+    </template>
+  </dropdown>
+</template>
+
+<script>
+export default {
+  name: 'EditorBlockButton',
+  props: {
+    commands: { type: Object, required: true },
+    isActive: { type: Object, required: true },
+  },
+  computed: {
+    iconName() {
+      if (this.isActive.heading({ level: 2 })) return 'format-heading-2'
+      else if (this.isActive.heading({ level: 3 })) return 'format-heading-3'
+      else if (this.isActive.heading({ level: 4 })) return 'format-heading-4'
+      else if (this.isActive.blockquote()) return 'format-blockquote'
+      else if (this.isActive.code_block()) return 'format-code'
+      else return 'format-paragraph'
+    },
+  },
+  watch: {
+    iconName() {
+      this.$refs.dropdown.close()
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/rich-text-input/extensions/Doc.js

@@ -0,0 +1,12 @@
+import { Node } from 'tiptap'
+
+export default class Doc extends Node {
+  get name() {
+    return 'doc'
+  }
+  get schema() {
+    return {
+      content: 'block',
+    }
+  }
+}

data/app/javascript/editor/components/kit/rich-text-input/extensions/LineBreak.js

@@ -0,0 +1,38 @@
+import { Node } from 'tiptap'
+import { chainCommands, exitCode } from 'tiptap-commands'
+
+export default class LineBreak extends Node {
+  get name() {
+    return 'line_break'
+  }
+
+  get schema() {
+    return {
+      inline: true,
+      group: 'inline',
+      selectable: false,
+      parseDOM: [{ tag: 'br' }],
+      toDOM: () => ['br'],
+    }
+  }
+
+  commands({ type }) {
+    return () =>
+      chainCommands(exitCode, (state, dispatch) => {
+        dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView())
+        return true
+      })
+  }
+
+  keys({ type }) {
+    const command = chainCommands(exitCode, (state, dispatch) => {
+      dispatch(state.tr.replaceSelectionWith(type.create()).scrollIntoView())
+      return true
+    })
+    return {
+      Enter: command,
+      'Mod-Enter': command,
+      'Shift-Enter': command,
+    }
+  }
+}

data/app/javascript/editor/components/kit/rich-text-input/extensions/marks/Link.js

@@ -0,0 +1,57 @@
+import { Link } from 'tiptap-extensions'
+
+export default class MaglevLink extends Link {
+  get name() {
+    return 'link'
+  }
+
+  get schema() {
+    return {
+      attrs: {
+        href: {
+          default: null,
+        },
+        target: {
+          default: null,
+        },
+        linkType: {
+          default: null,
+        },
+        linkId: {
+          default: null,
+        },
+        sectionId: {
+          default: null,
+        },
+      },
+      inclusive: false,
+      parseDOM: [
+        {
+          tag: 'a[href]',
+          getAttrs: (dom) => ({
+            href: dom.getAttribute('href'),
+            target: dom.getAttribute('target'),
+            linkType: dom.getAttribute('maglev-link-type'),
+            linkId: dom.getAttribute('maglev-link-id'),
+            sectionId: dom.getAttribute('maglev-section-id'),
+          }),
+        },
+      ],
+      toDOM: (node) => {
+        const { linkType, linkId, sectionId, ...attrs } = node.attrs
+        return [
+          'a',
+          {
+            ...attrs,
+            rel: 'noopener noreferrer nofollow',
+            target: attrs.target || this.options.target,
+            'maglev-link-type': linkType,
+            'maglev-link-id': linkId,
+            'maglev-section-id': sectionId,
+          },
+          0,
+        ]
+      },
+    }
+  }
+}

data/app/javascript/editor/components/kit/rich-text-input/format-buttons.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex">
+    <editor-menu-button
+      iconName="format-bold"
+      class="rounded-l-sm"
+      :isActive="isActive.bold()"
+      @click="commands.bold"
+    />
+    <editor-menu-button
+      iconName="format-italic"
+      :isActive="isActive.italic()"
+      @click="commands.italic"
+    />
+    <editor-menu-button
+      iconName="format-underline"
+      :isActive="isActive.underline()"
+      @click="commands.underline"
+    />
+    <editor-menu-button
+      iconName="format-strikethrough"
+      class="rounded-r-sm"
+      :isActive="isActive.strike()"
+      @click="commands.strike"
+    />
+  </div>
+</template>
+
+<script>
+import EditorMenuButton from './menu-button.vue'
+
+export default {
+  name: 'EditorFormatButtons',
+  components: { EditorMenuButton },
+  props: {
+    commands: { type: Object, required: true },
+    isActive: { type: Object, required: true },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/rich-text-input/link-buttons.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="flex">
+    <editor-menu-button
+      iconName="format-link"
+      class="rounded-l-sm"
+      @click="openLinkPickerModal"
+    />
+    <editor-menu-button
+      iconName="format-link-unlink"
+      :isActive="isActive.link()"
+      class="rounded-r-sm"
+      @click="unLink"
+    />
+  </div>
+</template>
+
+<script>
+import EditorMenuButton from './menu-button.vue'
+import LinkPicker from '@/components/link-picker'
+
+export default {
+  name: 'EditorLinkButtons',
+  components: { EditorMenuButton },
+  props: {
+    editor: { type: Object, required: true },
+    commands: { type: Object, required: true },
+    isActive: { type: Object, required: true },
+  },
+  computed: {
+    currentLink() {
+      return this.isActive.link() ? { ...this.editor.getMarkAttrs('link') } : {}
+    },
+  },
+  methods: {
+    isSelectionEmpty() {
+      const { view } = this.editor
+      const { selection } = view.state
+      return selection.empty && !this.isActive.link()
+    },
+    setLink(link) {
+      var { linkType, linkId, sectionId, href, openNewWindow } = link
+      this.commands.link({
+        href,
+        target: openNewWindow ? '_blank' : '',
+        linkType,
+        linkId,
+        sectionId,
+      })
+      this.closeModal()
+    },
+    guessLinkType() {
+      let type = this.currentLink?.linkType
+      let href = this.currentLink?.href
+
+      if (!type && href && href.startsWith('mailto:')) type = 'email'
+      if (!type) type = 'url'
+
+      return type
+    },
+    sanitizeLink() {
+      let link = {
+        linkType: this.guessLinkType(),
+        linkId: this.currentLink.linkId,
+        sectionId: this.currentLink.sectionId,
+        href: this.currentLink.href,
+        openNewWindow: this.currentLink.target === '_blank',
+      }
+
+      if (link.linkType === 'email') {
+        const matching = /^mailto:(.*)$/g.exec(link.href)
+        link.email = matching && matching[1] ? matching[1] : null
+      }
+
+      return link
+    },
+    openLinkPickerModal() {
+      this.openModal({
+        title: this.$t('linkPicker.insertTitle'),
+        component: LinkPicker,
+        props: { currentLink: this.sanitizeLink(), mode: 'insert' },
+        listeners: {
+          select: (link) => this.setLink(link),
+        },
+      })
+    },
+    unLink() {
+      this.commands.link({})
+    },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/rich-text-input/list-buttons.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="flex">
+    <editor-menu-button
+      iconName="format-list-unordered"
+      class="rounded-l-sm"
+      :isActive="isActive.bullet_list()"
+      @click="commands.bullet_list"
+    />
+    <editor-menu-button
+      iconName="format-list-ordered"
+      class="rounded-r-sm"
+      :isActive="isActive.ordered_list()"
+      @click="commands.ordered_list"
+    />
+  </div>
+</template>
+
+<script>
+import EditorMenuButton from './menu-button.vue'
+
+export default {
+  name: 'EditorListButtons',
+  components: { EditorMenuButton },
+  props: {
+    commands: { type: Object, required: true },
+    isActive: { type: Object, required: true },
+  },
+}
+</script>

data/app/javascript/editor/components/kit/rich-text-input/menu-button.vue

@@ -0,0 +1,22 @@
+<template>
+  <button
+    class="px-2 py-2 bg-gray-100 hover:bg-gray-200 focus:outline-none focus:ring"
+    :class="{
+      'bg-gray-400 hover:bg-gray-400': isActive,
+      'bg-gray-100': !isActive,
+    }"
+    @click="$emit('click')"
+  >
+    <icon :name="iconName" class="w-4 h-4 text-dark" />
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'EditorMenuButton',
+  props: {
+    isActive: { type: Boolean, default: false },
+    iconName: { type: String, default: 'format-bold' },
+  },
+}
+</script>