@demos-europe/demosplan-ui 0.0.1

package/components/core/DpEditor/DpUploadModal.vue

@@ -0,0 +1,121 @@
+<license>
+  (c) 2010-present DEMOS E-Partizipation GmbH.
+
+  This file is part of the package @demos-europe/demosplan-ui,
+  for more information see the license file.
+
+  All rights reserved
+</license>
+
+<template>
+  <dp-modal
+    ref="uploadModal"
+    content-classes="u-2-of-3-lap-up u-1-of-2-desk-up">
+    <template>
+      <h3
+        v-if="editAltTextOnly"
+        class="u-mb">
+        {{ Translator.trans('image.edit') }}
+      </h3>
+      <h3
+        v-else
+        class="u-mb">
+        {{ Translator.trans('image.insert') }}
+      </h3>
+      <div v-show="editAltTextOnly === false">
+        <dp-upload-files
+          allowed-file-types="img"
+          id="imageFile"
+          :max-file-size="20 * 1024 * 1024/* 20 MiB */"
+          :max-number-of-files="1"
+          ref="uploader"
+          :translations="{ dropHereOr: Translator.trans('form.button.upload.image', { browse: '{browse}', maxUploadSize: '20MB' }) }"
+          @upload-success="setFile" />
+      </div>
+      <dp-input
+        id="altText"
+        v-model="altText"
+        class="u-mb"
+        :label="{
+          hint: Translator.trans('image.alt.explanation'),
+          text: Translator.trans('alternative.text')
+        }" />
+      <div class="u-mt text--right width-100p space-inline-s">
+        <button
+          class="btn btn--primary"
+          type="button"
+          @click="emitAndClose()">
+          {{ Translator.trans('insert') }}
+        </button>
+        <button
+          class="btn btn--secondary"
+          type="button"
+          @click="resetAndClose()">
+          {{ Translator.trans('abort') }}
+        </button>
+      </div>
+    </template>
+  </dp-modal>
+</template>
+
+<script>
+import { DpInput } from 'demosplan-ui/components'
+import DpModal from '../DpModal'
+import DpUploadFiles from '../DpUpload/DpUploadFiles'
+
+export default {
+  name: 'DpUploadModal',
+
+  components: {
+    DpInput,
+    DpModal,
+    DpUploadFiles
+  },
+
+  data () {
+    return {
+      fileUrl: '',
+      altText: '',
+      editAltTextOnly: false
+    }
+  },
+
+  methods: {
+    emitAndClose () {
+      if (this.editAltTextOnly) {
+        this.$emit('add-alt', this.altText)
+      } else if (this.fileUrl) {
+        this.$emit('insert-image', this.fileUrl, this.altText)
+      }
+      this.resetAndClose()
+    },
+
+    resetAndClose () {
+      this.altText = ''
+      this.fileUrl = ''
+      this.editAltTextOnly = false
+      this.$emit('close')
+      this.toggleModal()
+    },
+
+    setFile ({ hash }) {
+      this.fileUrl = Routing.generate('core_file', { hash: hash })
+      // Force-update the component so that DpModal updates and therefore check for new focusable elements
+      this.$forceUpdate()
+    },
+
+    toggleModal (data) {
+      const willCloseModal = this.$refs.uploadModal.isOpenModal === true
+
+      if (willCloseModal) {
+        this.$refs.uploader.clearFilesList()
+      } else if (data) {
+        this.editAltTextOnly = data.editAltOnly
+        this.altText = data.currentAlt
+      }
+
+      this.$refs.uploadModal.toggle()
+    }
+  }
+}
+</script>

package/components/core/DpEditor/libs/Decoration.js

@@ -0,0 +1,66 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import { Decoration, DecorationSet } from 'prosemirror-view'
+import { Plugin, TextSelection } from 'prosemirror-state'
+
+const addHandle = (tr, set, pos, id) => {
+  const widget = document.createElement('span')
+  widget.classList.add('handle')
+  widget.setAttribute('data-position', pos)
+  widget.innerHTML = `<span id="container" data-position="${pos}"><div id="bubble" data-position="${pos}"></div>|</span>`
+  const deco = Decoration.widget(pos, widget, { id: id })
+  set = set.add(tr.doc, [deco])
+  return set
+}
+
+const removeHandle = (set, id) => {
+  set = set.remove(set.find(null, null,
+    spec => spec.id === id))
+  return set
+}
+
+const placeholderPlugin = new Plugin({
+  state: {
+    init () { return DecorationSet.empty },
+    apply (tr, set) {
+      // Adjust decoration positions to changes made by the transaction
+      set = set.map(tr.mapping, tr.doc)
+      // See if the transaction adds or removes any placeholders
+      const action = tr.getMeta(this)
+      if (action && action.add) {
+        set = addHandle(tr, set, action.add.pos, action.add.id)
+      } else if (action && action.remove) {
+        set = removeHandle(set, action.remove.id)
+      } else if (action && action.move) {
+        set = removeHandle(set, action.move.id)
+        set = addHandle(tr, set, action.move.pos, action.move.id)
+      }
+      return set
+    }
+  },
+  props: {
+    decorations (state) { return this.getState(state) }
+  },
+  filterTransaction (tr, state) {
+    const action = tr.getMeta(this)
+    /**
+     * The behaviour of text selections in prosemirror differs in Chrome and Firefox.
+     * In our case, Chrome treats the current caret position as selection range while Firefox applies the correct selection
+     * from initial caret position to current caret position.
+     * To fix this behaviour we modify the transaction and set the correct selection in this method.
+     */
+    if (action && action.move) {
+      tr.setSelection(new TextSelection(state.doc.resolve(action.move.initialPos), state.doc.resolve(action.move.pos)))
+    }
+    return true
+  }
+})
+
+export { placeholderPlugin }

package/components/core/DpEditor/libs/SegmentRangeChangePlugin.js

@@ -0,0 +1,35 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import { Plugin } from 'prosemirror-state'
+
+export default new Plugin({
+/*
+ *  State: {
+ *  init () {
+ *    return {}
+ *  },
+ *  apply (tr, set) {
+ *    console.log(set)
+ *  }
+ *  },
+ */
+  appendTransaction (transactions) {
+    // Console.log(transactions)
+  }
+/*
+ *  View () {
+ *  return {
+ *    update (editorView, prevState) {
+ *      debugger
+ *    }
+ *  }
+ *  }
+ */
+})

package/components/core/DpEditor/libs/editorAnonymize.js

@@ -0,0 +1,66 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+/*
+ * This is the anonymize-extension for tiptap, built on the basis of tiptap bold-extension.
+ * On mark-anonymize in tiptap, we wrap up the marked content in <span class='anonymize'></span> tags, and then before
+ * saving the changes we convert them to <dp-obscure>, so that they are correctly saved in BE. But to display the
+ * <span class='u-obscure'> tags in the editor we need to use the toDOM function provided by tiptap/prosemirror.
+ *
+ * InputRules and pasteRules help to handle diverse behaviour when we want to obscure only part of words or we want to
+ * use more than one tool (e.g. obscure and bold) simultaneously, etc.
+ */
+
+import { markInputRule, markPasteRule, toggleMark } from 'tiptap-commands'
+import { Mark } from 'tiptap'
+
+export default class EditorAnonymize extends Mark {
+  get name () {
+    return 'anonymize'
+  }
+
+  get schema () {
+    return {
+      attrs: {
+        title: {
+          default: null
+        }
+      },
+      spanning: false,
+      parseDOM: [{
+        tag: '.anonymize-me',
+        getAttrs: dom => ({
+          title: dom.getAttribute('title')
+        })
+      }],
+      toDOM: node => {
+        return ['span', {
+          ...node.attrs,
+          class: 'anonymize-me'
+        }, 0]
+      }
+    }
+  }
+
+  commands ({ type }) {
+    return () => toggleMark(type)
+  }
+
+  inputRules ({ type }) {
+    return [
+      markInputRule(/(?:<o>)([^<o>]+)(?:<o>)$/, type)
+    ]
+  }
+
+  pasteRules ({ type }) {
+    return [
+      markPasteRule(/(?:<o>)([^<o>]+)(?:<o>)/g, type)
+    ]
+  }
+}

package/components/core/DpEditor/libs/editorBuildSuggestion.js

@@ -0,0 +1,269 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import tippy, { sticky } from 'tippy.js'
+import { Mention } from 'tiptap-extensions'
+
+/**
+ * A utility function to attach event listeners to the suggestion popup.
+ *
+ * @param args {Object} One or more objects containing eventType and callback { eventType: 'click', handler: () => ({}) }
+ */
+function attachEventListeners (...args) {
+  const listWrapper = document.querySelector('[data-suggestion-id="suggestion-popup"]')
+  args.forEach(({ eventType, handler }) => attachSingleEventListener(listWrapper, eventType, handler))
+}
+
+/**
+ * A utility function to attach event listeners to an element.
+ *
+ * @param el {Element} A DOM Element that the event listener should be attached to.
+ * @param eventType {String} An event type that should be listened to (e.g. 'click')
+ * @param handler {Function} A callback that should be triggered when the event occurs.
+ */
+function attachSingleEventListener (el, eventType, handler) {
+  if (el) {
+    el.removeEventListener(eventType, handler)
+    el.addEventListener(eventType, handler)
+  }
+}
+
+/**
+ * Used to highlight the currently selected suggestion item in the suggestion popup.
+ *
+ * @param listIndex {Number} The index of the suggestion item that should be highlighted.
+ */
+function highlightActiveElement (listIndex) {
+  const wrapper = document.querySelector('[data-suggestion-id="suggestion-popup"]')
+  if (wrapper) {
+    const nodeList = wrapper.childNodes
+    nodeList.forEach((node, idx) => idx === listIndex
+      ? node.classList.add('suggestion__list-item--is-active')
+      : node.classList.remove('suggestion__list-item--is-active'))
+  }
+}
+
+/**
+ * Used to generate content for the suggestion popup.
+ *
+ * @param items {Array} The suggestions that will be rendered insided the suggestion popup ([{ id: <id>, name: <name> }]).
+ *
+ * @return {HTMLUListElement}
+ */
+function createFragment (items) {
+  const fragment = document.createElement('ul')
+  fragment.setAttribute('data-suggestion-id', 'suggestion-popup')
+  fragment.setAttribute('class', 'o-list suggestion__popup')
+
+  for (let i = 0; i < items.length; i++) {
+    const li = document.createElement('li')
+    li.setAttribute('class', 'o-list__item suggestion__list-item u-ph-0_5 u-pv-0_25')
+    li.setAttribute('data-suggestion-item', `${i}`)
+
+    const button = document.createElement('button')
+    button.setAttribute('class', 'btn--blank')
+    button.appendChild(document.createTextNode(items[i].name))
+
+    li.appendChild(button)
+    fragment.appendChild(li)
+  }
+  if (items.length === 0) {
+    const li = document.createElement('li')
+    li.appendChild(document.createTextNode('Keine passenden Platzhalter gefunden'))
+    fragment.appendChild(li)
+  }
+
+  return fragment
+}
+
+/**
+ * Used to create a suggestion plugin which triggers on certain characters (e.g. @) and inserts a Mention node into tiptap
+ * when a suggestion was selected.
+ *
+ * @param matcher {Object} The char that should trigger a suggestion and some config to determine possible suggestion trigger positions ({ char: <char>, allowSpaces: <boolean>, startOfLine: <boolean> }).
+ * @param suggestions {Array} All available suggestions ([{ id: <id>, name: <name> }]).
+ * @param vueEditorInstance {VueInstance} Used to focus the tiptap editor on insertion of a suggestion.
+ *
+ * @return {Mention} A mention extension that can be used by tiptap.
+ */
+function createSuggestion ({ matcher, suggestions }, vueEditorInstance) {
+  /*
+   *Adding the whitespace to the name is a hack to make the suggestions work
+   *@see https://github.com/ueberdosis/tiptap/issues/932
+   *after the upgrade to tiptap 2 this workaround should be checked again
+   *and may hopefully be removed again
+   */
+  const fixedSuggestions = suggestions.map(el => ({ id: el.id, name: el.name + ' ' }))
+  let popup = null
+  let selectedElement = 0
+  let filteredSuggestions = fixedSuggestions
+  let insertSuggestion = (...args) => ({ args })
+  let suggestionRange = null
+
+  /**
+   * Triggers insertion of a suggestion.
+   */
+  function clickHandler (e) {
+    let el = e.target
+    if (el.tagName === 'BUTTON') {
+      el = el.parentElement
+    }
+    const itemIdx = parseInt(el.getAttribute('data-suggestion-item'))
+    selectSuggestion(fixedSuggestions[itemIdx])
+    vueEditorInstance.editor.focus()
+  }
+
+  /**
+   * Removes the suggestion popup from the DOM.
+   */
+  function destroyPopup () {
+    if (popup) {
+      popup[0].destroy()
+      popup = null
+    }
+  }
+
+  /**
+   * Increments the currently selected suggestion.
+   */
+  function downHandler () {
+    if (selectedElement < fixedSuggestions.length - 1) {
+      selectedElement += 1
+      highlightActiveElement(selectedElement)
+    }
+  }
+
+  /**
+   * Triggers insertion of a suggestion.
+   */
+  function enterHandler () {
+    selectSuggestion(fixedSuggestions[selectedElement])
+  }
+
+  /**
+   * Used to render a popup containing applicable suggestions.
+   *
+   * @param items {Array} The suggestions that will be available to the suggestion popup ([{ id: <id>, name: <name> }]).
+   * @param listIndex {Number} The index of the currently selected suggestion.
+   * @param node {TipTapVirtualNode} A virtual node used for placement of the suggestion popup.
+   */
+  function renderPopup (items, listIndex, node) {
+    const boundingClientRect = node.getBoundingClientRect()
+    const { x, y } = boundingClientRect
+    if (x === 0 && y === 0) {
+      return
+    }
+    if (popup) {
+      popup[0].setContent(createFragment(items))
+    } else {
+      popup = tippy('#mainContent', {
+        getReferenceClientRect: () => boundingClientRect,
+        appendTo: () => document.body,
+        interactive: true,
+        sticky: true, // Make sure position of tippy is updated when content changes
+        plugins: [sticky],
+        content: createFragment(items),
+        trigger: 'manual', // Manual
+        showOnCreate: true,
+        theme: 'dark',
+        placement: 'top-start',
+        inertia: true,
+        duration: [400, 200]
+      })
+    }
+    highlightActiveElement(listIndex)
+    attachEventListeners({ eventType: 'click', handler: clickHandler })
+  }
+
+  /**
+   * Used to insert a suggestion into tiptap.
+   *
+   * @param suggestion {Object} The suggestion that should be inserted ({ id: <id>, name: <name> })
+   */
+  function selectSuggestion (suggestion) {
+    insertSuggestion({
+      range: suggestionRange,
+      attrs: {
+        id: suggestion.id,
+        label: suggestion.name
+      }
+    })
+  }
+
+  /**
+   * Triggers insertion of a suggestion.
+   */
+  function spaceHandler () {
+    if (fixedSuggestions.length === 1) {
+      selectSuggestion(fixedSuggestions[0])
+    }
+  }
+
+  /**
+   * Decrements the currently selected suggestion.
+   */
+  function upHandler () {
+    if (selectedElement > 0) {
+      selectedElement -= 1
+      highlightActiveElement(selectedElement)
+    }
+  }
+
+  return new Mention({
+    items: fixedSuggestions,
+    matcher: matcher,
+    mentionClass: 'suggestion__node',
+    // Is called when a suggestion starts
+    onEnter: ({ items, range, command, virtualNode }) => {
+      filteredSuggestions = items
+      suggestionRange = range
+      selectedElement = 0
+      renderPopup(filteredSuggestions, selectedElement, virtualNode)
+      insertSuggestion = command
+    },
+    // Is called when a suggestion has changed
+    onChange: ({ items, range, virtualNode }) => {
+      filteredSuggestions = items
+      suggestionRange = range
+      selectedElement = 0
+      renderPopup(filteredSuggestions, selectedElement, virtualNode)
+    },
+    // Is called when a suggestion is cancelled
+    onExit: () => {
+      // Reset all saved values
+      filteredSuggestions = []
+      suggestionRange = null
+      selectedElement = 0
+      destroyPopup()
+    },
+    // Is called on every keyDown event while a suggestion is active
+    onKeyDown: ({ event }) => {
+      if (event.key === 'ArrowUp') {
+        upHandler()
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        downHandler()
+        return true
+      }
+      if (event.key === 'Enter') {
+        enterHandler()
+        return true
+      }
+
+      if (event.key === ' ') {
+        spaceHandler()
+        return true
+      }
+      return false
+    }
+  })
+}
+
+export { createSuggestion }

package/components/core/DpEditor/libs/editorCustomDelete.js

@@ -0,0 +1,32 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import { Mark } from 'tiptap'
+import { toggleMark } from 'tiptap-commands'
+
+export default class EditorCustomDelete extends Mark {
+  get name () {
+    return 'delete'
+  }
+
+  get schema () {
+    return {
+      parseDOM: [
+        {
+          tag: 'del'
+        }
+      ],
+      toDOM: () => ['del', { title: Translator.trans('text.deleted') }, 0]
+    }
+  }
+
+  commands ({ type }) {
+    return () => toggleMark(type)
+  }
+}

package/components/core/DpEditor/libs/editorCustomImage.js

@@ -0,0 +1,100 @@
+/**
+ * (c) 2010-present DEMOS E-Partizipation GmbH.
+ *
+ * This file is part of the package @demos-europe/demosplan-ui,
+ * for more information see the license file.
+ *
+ * All rights reserved
+ */
+
+import DpResizableImage from '../DpResizableImage'
+import { Node } from 'tiptap'
+import { nodeInputRule } from 'tiptap-commands'
+
+/**
+ * Matches following attributes in Markdown-typed image: [, alt, src, title]
+ *
+ * Example:
+ * ![Lorem](image.jpg) -> [, "Lorem", "image.jpg"]
+ * ![](image.jpg "Ipsum") -> [, "", "image.jpg", "Ipsum"]
+ * ![Lorem](image.jpg "Ipsum") -> [, "Lorem", "image.jpg", "Ipsum"]
+ */
+const IMAGE_INPUT_REGEX = /!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\)/
+
+export default class Image extends Node {
+  get name () {
+    return 'image'
+  }
+
+  get schema () {
+    return {
+      inline: true,
+      attrs: {
+        src: {},
+        alt: {
+          default: null
+        },
+        title: {
+          default: null
+        },
+        width: {
+          default: null
+        },
+        height: {
+          default: null
+        }
+      },
+      group: 'inline',
+      draggable: true,
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: dom => {
+            return ({
+              src: dom.getAttribute('src'),
+              title: dom.getAttribute('title'),
+              alt: dom.getAttribute('alt'),
+              width: dom.getAttribute('width'),
+              height: dom.getAttribute('height')
+            })
+          }
+        }
+      ],
+      toDOM: node => {
+        return ['img', { ...node.attrs, unselectable: 'on' }]
+      }
+    }
+  }
+
+  commands ({ type }) {
+    return {
+      insertImage: attrs => (state, dispatch) => {
+        const { selection } = state
+        const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos
+        const node = type.create(attrs)
+        const transaction = state.tr.insert(position, node)
+        dispatch(transaction)
+      }
+    }
+  }
+
+  inputRules ({ type }) {
+    return [
+      nodeInputRule(IMAGE_INPUT_REGEX, type, match => {
+        const [, alt, src, title, width, height] = match
+        return {
+          src,
+          alt,
+          title,
+          width,
+          height
+        }
+      })
+    ]
+  }
+
+  // Return a vue component
+  get view () {
+    return DpResizableImage
+  }
+}