Merge pull request #2 from Mauzzz0/feat/ckeditor5

feat: Added release mention plugin

client/components/editor/editor-ckeditor.vue

@@ -18,7 +18,7 @@
 import _ from 'lodash'
 import { get, sync } from 'vuex-pathify'
 import DecoupledEditor from '@requarks/ckeditor5'
-// import DecoupledEditor from '../../../../wiki-ckeditor5/build/ckeditor'
+// import DecoupledEditor from '../../../../requarks5-wiki-ckeditor5/build/ckeditor'
 import EditorConflict from './ckeditor/conflict.vue'
 import { html as beautify } from 'js-beautify/js/lib/beautifier.min.js'
 import gql from 'graphql-tag'
@@ -87,7 +87,8 @@ export default {
       return {
         id: '@' + page.title,
         text: page.title,
-        link: '/' + page.path
+        link: '/' + page.path,
+        pageId: page.id
       }
     })
 
@@ -119,56 +120,6 @@ export default {
       this.editor.setData(this.$store.get('editor/content'))
     }
 
-    this.editor.conversion.for('upcast').elementToAttribute({
-      view: {
-        name: 'a',
-        key: 'data-mention',
-        classes: 'mention',
-        attributes: {
-          href: true,
-          'data-user-id': true
-        }
-      },
-      model: {
-        key: 'mention',
-        value: viewItem => {
-          // The mention feature expects that the mention attribute value
-          // in the model is a plain object with a set of additional attributes.
-          // In order to create a proper object, use the toMentionAttribute helper method:
-          const mentionAttribute = this.editor.plugins.get('Mention').toMentionAttribute(viewItem, {
-            // Add any other properties that you need.
-            link: viewItem.getAttribute('href')
-          })
-
-          return mentionAttribute
-        }
-      },
-      converterPriority: 'high'
-    })
-
-    // Downcast the model 'mention' text attribute to a view <a> element.
-    this.editor.conversion.for('downcast').attributeToElement({
-      model: 'mention',
-      view: (modelAttributeValue, writer) => {
-        // Do not convert empty attributes (lack of value means no mention).
-        if (!modelAttributeValue) {
-          return
-        }
-
-        return writer.createAttributeElement('a', {
-          class: 'is-internal-link is-valid-page',
-          'data-mention': modelAttributeValue.id,
-          'href': modelAttributeValue.link
-        }, {
-          // Make mention attribute to be wrapped by other attribute elements.
-          priority: 20,
-          // Prevent merging mentions together.
-          id: modelAttributeValue.uid
-        })
-      },
-      converterPriority: 'high'
-    })
-
     this.editor.model.document.on('change:data', _.debounce(evt => {
       this.$store.set('editor/content', beautify(this.editor.getData(), { indent_size: 2, end_with_newline: true }))
     }, 300))

client/themes/default/scss/app.scss

@@ -1144,8 +1144,8 @@
   }
 
   .mention {
-    background-color: rgba(153, 0, 48, .1);
-    color: #990030;
+    //background-color: #ececec;
+    color: #1676d2;
 
     @at-root .theme--dark & {
       color: mc('pink', '500');

yarn.lock

@@ -2111,7 +2111,7 @@
     semver "^7.3.5"
     tar "^6.1.11"
 
-"@mdi/font@7":
+"@mdi/font@^7.4.47":
   version "7.4.47"
   resolved "https://registry.yarnpkg.com/@mdi/font/-/font-7.4.47.tgz#2ae522867da3a5c88b738d54b403eb91471903af"
   integrity sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==