maglevcms 2.1.0 → 3.0.0.beta2

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

@@ -1,116 +0,0 @@
-<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">
-        <uikit-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">
-        <uikit-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.vue'
-
-export default {
-  name: 'UIKitPagination',
-  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/frontend/editor/components/kit/rich-text-input/block-button.vue

@@ -1,75 +0,0 @@
-<template>
-  <uikit-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"
-      >
-        <uikit-icon :name="iconName" class="w-4 h-4 text-dark" />
-        <uikit-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">
-          <uikit-icon name="format-paragraph" />
-        </button>
-        <button
-          class="py-2 px-3 hover:bg-gray-200"
-          @click="commands.heading({ level: 2 })"
-        >
-          <uikit-icon name="format-heading-2" />
-        </button>
-        <button
-          class="py-2 px-3 hover:bg-gray-200"
-          @click="commands.heading({ level: 3 })"
-        >
-          <uikit-icon name="format-heading-3" />
-        </button>
-        <button
-          class="py-2 px-3 hover:bg-gray-200"
-          @click="commands.heading({ level: 4 })"
-        >
-          <uikit-icon name="format-heading-4" />
-        </button>
-        <button
-          class="py-2 px-3 hover:bg-gray-200"
-          @click="commands.blockquote"
-        >
-          <uikit-icon name="format-blockquote" />
-        </button>
-        <button
-          class="py-2 px-3 hover:bg-gray-200"
-          @click="commands.code_block"
-        >
-          <uikit-icon name="format-code" />
-        </button>
-      </div>
-    </template>
-  </uikit-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/frontend/editor/components/kit/rich-text-input/extensions/Doc.js

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

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

@@ -1,38 +0,0 @@
-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/frontend/editor/components/kit/rich-text-input/extensions/marks/Link.js

@@ -1,57 +0,0 @@
-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/frontend/editor/components/kit/rich-text-input/extensions/marks/Superscript.js

@@ -1,43 +0,0 @@
-import { Mark } from 'tiptap'
-import { toggleMark, markInputRule, markPasteRule } from 'tiptap-commands'
-
-export default class Superscript extends Mark {
-
-  get name() {
-    return 'sup'
-  }
-
-  get schema() {
-    return {
-      parseDOM: [
-        {
-          tag: 'sup',
-        },        
-      ],
-      toDOM: () => ['sup', 0],
-    }
-  }
-
-  keys({ type }) {
-    return {
-      'Mod-^': toggleMark(type),
-    }
-  }
-
-  commands({ type }) {
-    return () => toggleMark(type)
-  }
-
-  // NOTE: "^^" are used as delimiters to trigger the superscript formatting
-  inputRules({ type }) {
-    return [
-      markInputRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)$/, type),
-    ]
-  }
-
-  pasteRules({ type }) {
-    return [
-      markPasteRule(/(?:\^\^|__)([^\^*_]+)(?:\^\^|__)/g, type),
-    ]
-  }
-}

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

@@ -1,47 +0,0 @@
-<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"
-    />
-    <editor-menu-button
-      iconName="format-superscript"
-      class="rounded-r-sm"
-      :isActive="isActive.sup()"
-      @click="commands.sup"
-      v-if="extraExtensions.superscript"
-    />
-  </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 },
-    extraExtensions: { type: Object, default: () => ({ table: false, superscript: false }) },
-  }
-}
-</script>

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

@@ -1,91 +0,0 @@
-<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/index.vue'
-
-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', modalClass: 'h-144 w-120' },
-        listeners: {
-          select: (link) => this.setLink(link),
-        },
-      })
-    },
-    unLink() {
-      this.commands.link({})
-    },
-  },
-}
-</script>

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

@@ -1,29 +0,0 @@
-<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/frontend/editor/components/kit/rich-text-input/menu-button.vue

@@ -1,22 +0,0 @@
-<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')"
-  >
-    <uikit-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>

data/app/frontend/editor/components/kit/rich-text-input/table-button.vue

@@ -1,112 +0,0 @@
-<template>
-  <div>
-    <button
-      v-if="!isTableActive"
-      class="block h-full rounded-sm px-2 py-2 bg-gray-100 hover:bg-gray-200 flex items-center focus:outline-none focus:ring"
-      @click="insertTable"
-    >
-      <uikit-icon name="ri-table-2" class="w-4 h-4 text-dark" />
-    </button>
-
-    <uikit-dropdown placement="bottom" ref="dropdown" v-else>
-      <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"
-        >
-          <uikit-icon name="ri-table-2" class="w-4 h-4 text-dark" />
-          <uikit-icon name="arrow-down-s-line" class="ml-1" />
-        </button>
-      </template>
-
-      <template v-slot:content>
-        <div class="w-full flex space-x-2">
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.deleteTable"
-          >
-            <uikit-icon name="delete-bin-line" class="w-4 h-4 text-dark" />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.addColumnBefore"
-          >
-            <uikit-icon
-              name="ri-insert-column-left"
-              class="w-4 h-4 text-dark"
-            />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.addColumnAfter"
-          >
-            <uikit-icon
-              name="ri-insert-column-right"
-              class="w-4 h-4 text-dark"
-            />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.deleteColumn"
-          >
-            <uikit-icon name="ri-delete-column" class="w-4 h-4 text-dark" />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.addRowBefore"
-          >
-            <uikit-icon name="ri-insert-row-top" class="w-4 h-4 text-dark" />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.addRowAfter"
-          >
-            <uikit-icon name="ri-insert-row-bottom" class="w-4 h-4 text-dark" />
-          </button>
-          <button
-            class="py-2 px-3 hover:bg-gray-200"
-            @click="commands.deleteRow"
-          >
-            <uikit-icon name="ri-delete-row" class="w-4 h-4 text-dark" />
-          </button>
-        </div>
-      </template>
-    </uikit-dropdown>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'EditorTableButton',
-  props: {
-    commands: { type: Object, required: true },
-    isActive: { type: Object, required: true },
-  },
-  computed: {
-    isTableActive() {
-      return this.isActive.table()
-    },
-    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 'ri-table-line'
-    },
-  },
-  methods: {
-    insertTable() {
-      this.commands.createTable({
-        rowsCount: 3,
-        colsCount: 3,
-        withHeaderRow: true,
-      })
-    },
-  },
-  watch: {
-    iconName() {
-      this.$refs.dropdown.close()
-    },
-  },
-}
-</script>