@kvass/rich-text 1.4.18 → 1.5.0

package/index.js

@@ -1,4 +1,13 @@
-import Component from './src/Component.vue'
+import Component, { Tiptap } from './src/Component.vue'
+import Link from '@tiptap/extension-link'
+import Superscript from '@tiptap/extension-superscript'
+import Table from '@tiptap/extension-table'
+import TableRow from '@tiptap/extension-table-row'
+import TableCell from '@tiptap/extension-table-cell'
+import TableHeader from '@tiptap/extension-table-header'
+
+import { NodeViewWrapper, NodeViewContent, nodeViewProps, VueNodeViewRenderer } from '@tiptap/vue-2'
+
 export default Component
 
 const Options = {
@@ -6,6 +15,16 @@ const Options = {
     primary: 'Primærfarge',
     secondary: 'Sekundærfarge',
   },
+  commands: [
+    'heading',
+    'heading-h3',
+    'bold',
+    'italic',
+    'superscript',
+    'orderedList',
+    'bulletList',
+    'link',
+  ],
 }
 const setup = options => {
   for (let key in options) {
@@ -14,4 +33,21 @@ const setup = options => {
   }
 }
 
-export { setup, Options }
+const DefaultCommands = Options.commands
+
+export {
+  setup,
+  Options,
+  DefaultCommands,
+  Tiptap,
+  Link,
+  Superscript,
+  Table,
+  TableRow,
+  TableCell,
+  TableHeader,
+  NodeViewWrapper,
+  NodeViewContent,
+  nodeViewProps,
+  VueNodeViewRenderer,
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kvass/rich-text",
-  "version": "1.4.18",
+  "version": "1.5.0",
   "description": "rich text component for kvass",
   "main": "index.js",
   "scripts": {
@@ -37,6 +37,10 @@
     "@tiptap/extension-image": "^2.2.2",
     "@tiptap/extension-link": "^2.2.2",
     "@tiptap/extension-superscript": "^2.2.2",
+    "@tiptap/extension-table": "^2.27.2",
+    "@tiptap/extension-table-cell": "^2.27.2",
+    "@tiptap/extension-table-header": "^2.27.2",
+    "@tiptap/extension-table-row": "^2.27.2",
     "@tiptap/pm": "^2.2.2",
     "@tiptap/starter-kit": "^2.2.2",
     "@tiptap/vue-2": "^2.2.2"

package/src/Component.vue

@@ -36,11 +36,7 @@
               'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
             }"
             :disabled="disabled || item.disabled"
-            @click="
-              item.customFunc
-                ? item.customFunc()
-                : editor.chain().focus()[item.commandKey](item.commandProps).run()
-            "
+            @click="() => onMenuBarButtonClick(item)"
             type="button"
           >
             <FontAwesomeIcon :icon="item.icon" />
@@ -61,20 +57,39 @@
             'is-active': editor.isActive(item.isActiveKey || item.stateKey, item.commandProps),
           }"
           :disabled="disabled || item.disabled"
-          @click="
-            item.customFunc
-              ? item.customFunc()
-              : editor.chain().focus()[item.commandKey](item.commandProps).run()
-          "
+          @click="() => onMenuBarButtonClick(item)"
         >
           <FontAwesomeIcon :icon="item.icon" size="sm" />
         </button>
       </div>
+
+      <transition name="toolbar">
+        <div v-if="editor.isActive('table') && tableExtension" class="richtext__menubar-table">
+          <div class="richtext__menubar-buttons">
+            <template v-for="(ctrl, index) in tableExtension.controls">
+              <div v-if="ctrl.separator" :key="'sep-' + index" class="richtext__separator"></div>
+              <button
+                v-else
+                :key="'tbl-' + index"
+                type="button"
+                :class="{ 'is-confirming': confirmationIndex === index }"
+                :disabled="!editor.can()[ctrl.command]()"
+                @mousedown.prevent
+                @click="handleTableControl(ctrl, index)"
+                :title="ctrl.label"
+              >
+                <Icon :icon="ctrl.icon" size="lg" />
+              </button>
+            </template>
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
 
 <script>
+import * as Tiptap from '@tiptap/core'
 import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-2'
 import Link from '@tiptap/extension-link'
 import Image from '@tiptap/extension-image'
@@ -82,22 +97,12 @@ import Superscript from '@tiptap/extension-superscript'
 import CallToAction from './extensions/cta'
 import StarterKit from '@tiptap/starter-kit'
 
-const DefaultCommands = [
-  'heading',
-  'heading-h3',
-  'bold',
-  'italic',
-  'superscript',
-  'orderedList',
-  'bulletList',
-  'link',
-  'cta',
-]
-
 import { Options } from '../index'
 
-export { DefaultCommands }
+export { Tiptap }
 export default {
+  name: 'RichText',
+  inject: ['RichTextOptions'],
   props: {
     value: {
       type: String,
@@ -106,7 +111,10 @@ export default {
     disabled: Boolean,
     commands: {
       type: Array,
-      default: () => DefaultCommands,
+      default() {
+        const hasInject = this.RichTextOptions && this.RichTextOptions.commands
+        return hasInject ? this.RichTextOptions.commands : Options.commands
+      },
     },
     labels: {
       type: Object,
@@ -134,6 +142,7 @@ export default {
       linkUrl: null,
       bubbleState: null,
       bubbleOptions: { theme: 'primary' },
+      confirmationIndex: null,
     }
   },
   computed: {
@@ -217,11 +226,24 @@ export default {
           },
           disabled: this.editor && this.editor.state.selection.empty,
           icon: ['far', 'link'],
-          extension: Link,
+          extension: Link.extend({
+            priority: 100,
+            parseHTML() {
+              return [{ tag: 'a[href]:not([data-cta])' }]
+            },
+          }).configure({
+            openOnClick: false,
+            autolink: true,
+            enableClickSelection: true,
+            HTMLAttributes: {
+              rel: 'noopener noreferrer',
+            },
+          }),
           appearance: {
             menu: true,
             bubble: true,
           },
+          priority: 100,
         },
         {
           stateKey: 'image',
@@ -234,31 +256,28 @@ export default {
             bubble: false,
           },
         },
-        {
-          stateKey: 'cta',
-          commandKey: 'toggleCta',
-          customFunc: () => {
-            this.bubbleState = 'cta'
-          },
-          disabled: this.editor && this.editor.state.selection.empty,
-          icon: ['far', 'mouse-pointer'],
-          extension: CallToAction,
-          appearance: {
-            menu: true,
-            bubble: true,
-          },
-        },
       ]
     },
+    tableExtension() {
+      return this.commands.find(cmd => cmd.stateKey === 'table')
+    },
   },
   methods: {
     getCommands(appearance) {
       return this.commands
-        .map(cmd => this.availableCommands.find(a => a.stateKey === cmd))
+        .map(cmd => {
+          if (typeof cmd === 'string') return this.availableCommands.find(a => a.stateKey === cmd)
+          if (typeof cmd === 'function') return cmd.call(this)
+          return cmd
+        })
         .filter(Boolean)
         .filter(cmd => !appearance || cmd.appearance[appearance])
     },
+    onMenuBarButtonClick(item) {
+      if (item.customFunc) return item.customFunc.call(this, { editor: this.editor })
 
+      return this.editor.chain().focus()[item.commandKey](item.commandProps).run()
+    },
     setLink(value) {
       let editor = this.editor.chain().focus()
       switch (this.bubbleState) {
@@ -304,6 +323,19 @@ export default {
       if (!typeof value === 'string') return
       return ['/', '#'].some(v => value.startsWith(v))
     },
+    handleTableControl(ctrl, index) {
+      if (ctrl.requiresConfirmation) {
+        if (this.confirmationIndex === index) {
+          this.editor.chain().focus()[ctrl.command]().run()
+          this.confirmationIndex = null
+        } else {
+          this.confirmationIndex = index
+        }
+      } else {
+        this.confirmationIndex = null
+        this.editor.chain().focus()[ctrl.command]().run()
+      }
+    },
   },
   mounted() {
     this.editor = new Editor({
@@ -312,13 +344,12 @@ export default {
         StarterKit,
         ...this.getCommands()
           .map(({ extension }) => extension)
+          .flat()
           .filter(Boolean),
       ],
       content: this.value,
       onUpdate: () => {
-        let html = this.editor.getHTML().replace(/^<p>\s*<\/p>$/, '')
-
-        this.$emit('input', html)
+        this.$emit('input', this.editor.getHTML())
       },
       onSelectionUpdate: ({ editor }) => {
         if (!this.bubbleShouldShow({ editor })) this.bubbleState = null
@@ -331,8 +362,6 @@ export default {
   components: {
     EditorContent,
     BubbleMenu,
-    // EditorMenuBar,
-    // EditorMenuBubble,
   },
 }
 </script>
@@ -343,6 +372,8 @@ export default {
   flex-grow: 1;
   display: flex;
   flex-direction: column-reverse;
+  background-color: #ffffff;
+  border-radius: var(--border-radius, 3px);
 
   &--disabled {
     background-color: var(--vue-elder-input-color, #fafafa);
@@ -397,7 +428,8 @@ export default {
         border-radius: var(--border-radius);
         text-decoration: none;
 
-        display: inline-block;
+        display: inline-flex;
+        gap: 0.5em;
       }
 
       a[data-cta='primary'] {
@@ -481,17 +513,41 @@ export default {
     }
   }
 
+  &__separator {
+    width: 1px;
+    height: 1.25rem;
+    background-color: var(--border-color);
+    margin: 0 0.5rem;
+    align-self: center;
+  }
+
   &__menubar {
     padding: 0.75rem;
     position: sticky;
     top: 0;
     z-index: 1;
 
+    display: flex;
+    flex-direction: column;
+
     &-buttons {
       width: max-content;
       box-shadow: 0 2px 4px -2px rgba(black, 0.1);
     }
 
+    &-table {
+      animation: fadeIn 0.2s ease-in-out;
+      margin-top: 0.5rem;
+
+      .richtext__menubar-buttons {
+        background-color: #f8f9fa;
+        border: 1px solid var(--border-color);
+        border-radius: var(--border-radius);
+        display: flex;
+        margin-top: 0.5rem;
+      }
+    }
+
     button {
       padding: 0.5rem;
       min-width: 2.5rem;
@@ -527,6 +583,16 @@ export default {
       &.is-active {
         background-color: darken(#ffffff, 3%);
       }
+
+      &.is-confirming {
+        background-color: #e3342f;
+        color: white !important;
+        border-color: #e3342f !important;
+
+        &:hover {
+          background-color: darken($color: #e3342f, $amount: 10%) !important;
+        }
+      }
     }
   }
 
@@ -537,5 +603,76 @@ export default {
   .tippy-box {
     max-width: initial !important;
   }
+
+  .toolbar-enter-active,
+  .toolbar-leave-active {
+    transition: all 0.25s ease-out;
+    max-height: 50px;
+    opacity: 1;
+    transform: translateY(0);
+  }
+
+  .toolbar-enter,
+  .toolbar-leave-to {
+    max-height: 0;
+    opacity: 0;
+    margin-top: 0;
+    transform: translateY(-5px);
+    overflow: hidden;
+  }
+
+  &__editor {
+    .ProseMirror {
+      table {
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+
+        td,
+        th {
+          min-width: 1em;
+          border: 2px solid #ced4da;
+          padding: 3px 5px;
+          vertical-align: top;
+          box-sizing: border-box;
+          position: relative;
+
+          > * {
+            margin-bottom: 0;
+          }
+        }
+
+        th {
+          font-weight: bold;
+          text-align: left;
+          background-color: #f1f3f5;
+        }
+
+        .selectedCell:after {
+          z-index: 2;
+          position: absolute;
+          content: '';
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: rgba(200, 200, 255, 0.4);
+          pointer-events: none;
+        }
+
+        .column-resize-handle {
+          position: absolute;
+          right: -2px;
+          top: 0;
+          bottom: 0;
+          width: 4px;
+          background-color: #adf;
+          pointer-events: none;
+        }
+      }
+    }
+  }
 }
 </style>