From ae5b321de0101e43f660552d5bc3806d1c3fcaa9 Mon Sep 17 00:00:00 2001
From: John Wedgbury <john@appoly.co.uk>
Date: Wed, 13 Jul 2022 16:19:36 +0100
Subject: [PATCH 01/15] Add "link" function to TipTap Wysiwyg editor

---
 frontend/js/components/WysiwygTiptap.vue | 102 ++++++++++++++++++++---
 1 file changed, 91 insertions(+), 11 deletions(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 515a6d665..f5a76a602 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -18,7 +18,7 @@
         <div class="wysiwyg__editor"
              ref="editor">
           <editor-menu-bar :editor="editor"
-                           v-slot="{ commands, isActive }">
+                           v-slot="{ commands, isActive, getMarkAttrs }">
             <div class="wysiwyg__menubar">
 
               <template v-if="toolbar.header">
@@ -49,13 +49,13 @@
                                     v-if="toolbar.underline"
                                     :isActive="isActive.underline()"
                                     @btn:click="commands.underline"/>
-              <!-- Disabling link option for now as Tiptap does
-                   not support it by default in the menu bar, only
-                   in the bubble mode. -->
-              <!-- <wysiwyg-menu-bar-btn icon="link"
-                                    v-if="toolbar.link"
-                                    :isActive="isActive.link()"
-                                    @btn:click="commands.link"/> -->
+
+              <a href="javascript://"
+                 @click="openLinkWindow(getMarkAttrs('link'))">
+                <wysiwyg-menu-bar-btn icon="link"
+                                      v-if="toolbar.link"
+                                      :isActive="isActive.link()"/>
+              </a>
 
               <wysiwyg-menu-bar-btn icon="ul"
                                     v-if="toolbar.bullet"
@@ -144,6 +144,25 @@
         </a17-button>
       </template>
     </div>
+    <div class="link-window" v-if="linkWindow">
+      <div class="link-window-inner">
+        <label>
+          Link:
+        </label>
+        <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink">
+
+        <label>
+          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="">
+          Open in a new window
+        </label>
+
+        <br>
+
+        <button @click="saveLink">
+          Save
+        </button>
+      </div>
+    </div>
   </a17-inputframe>
 </template>
 
@@ -184,7 +203,7 @@
   // const HIGHLIGHT = '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js'
 
   export default {
-    name: 'A17Wysiwyg',
+    name: 'A17WysiwygAppoly',
     mixins: [InputMixin, InputframeMixin, LocaleMixin, FormStoreMixin],
     props: {
       editSource: {
@@ -287,7 +306,8 @@
         focused: false,
         activeSource: false,
         counter: 0,
-        editor: null
+        editor: null,
+        linkWindow: null
       }
     },
     methods: {
@@ -330,6 +350,16 @@
       },
       getTextLength () {
         return this.editor.getHTML().replace(/<[^>]+>/g, '').length
+      },
+      openLinkWindow: function (markAttributes) {
+        this.linkWindow = {
+          href: markAttributes.href,
+          target: markAttributes.target
+        }
+      },
+      saveLink () {
+        this.editor.commands.link(this.linkWindow)
+        this.linkWindow = null
       }
     },
     beforeMount () {
@@ -380,7 +410,13 @@
             break
           }
           case 'link': {
-            extensions.push(new Link())
+            extensions.push(new Link({
+              HTMLAttributes: {
+                target: null,
+                rel: null
+              },
+              openOnClick: false
+            }))
             break
           }
           case 'blockquote': {
@@ -653,4 +689,48 @@
       }
     }
   }
+}
+
+.link-window {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 9999;
+  background-color: rgba(0, 0, 0, .5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.link-window-inner {
+  width: 100%;
+  max-width: 500px;
+  background-color: #fff;
+  border-radius: 3px;
+  padding: 20px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+}
+
+.link-window input[type=text] {
+  margin-bottom: 15px;
+  padding: 14px;
+  border: 1px solid #cbcbcb;
+  width: 100%;
+}
+
+.link-window label {
+  display: block;
+  padding: 8px 0;
+}
+
+.link-window button {
+  border: 0;
+  background: #4b4bd8;
+  color: white;
+  padding: 10px 30px;
+  cursor: pointer;
+}
+
 </style>

From a84d190058000746bc3b2ef60a7973e971608d95 Mon Sep 17 00:00:00 2001
From: John Wedgbury <john@appoly.co.uk>
Date: Wed, 13 Jul 2022 16:31:21 +0100
Subject: [PATCH 02/15] Add "link" function to TipTap Wysiwyg editor - correct
 component name

---
 frontend/js/components/WysiwygTiptap.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index f5a76a602..523163326 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -203,7 +203,7 @@
   // const HIGHLIGHT = '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js'
 
   export default {
-    name: 'A17WysiwygAppoly',
+    name: 'A17Wysiwyg',
     mixins: [InputMixin, InputframeMixin, LocaleMixin, FormStoreMixin],
     props: {
       editSource: {

From d2976c5bd3b9b4e82b914cdaacdd3572fefbab9f Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Tue, 19 Jul 2022 11:36:01 +0200
Subject: [PATCH 03/15] Fix bracket issue.

---
 frontend/js/components/WysiwygTiptap.vue | 215 +++++++++++------------
 1 file changed, 107 insertions(+), 108 deletions(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 523163326..737dfdf36 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -555,138 +555,137 @@
 </style>
 
 <style lang="scss">
-  .wysiwyg__content {
-    .ProseMirror {
-      color: $color__text;
+.wysiwyg__content {
+  .ProseMirror {
+    color: $color__text;
 
-      h1, h2, h3, h4, h5, h6 {
-        font-weight: 700;
-      }
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 700;
+    }
 
-      b, p b, p strong, strong {
-        font-weight:700;
-      }
+    b, p b, p strong, strong {
+      font-weight:700;
+    }
 
-      p, ul, ol, h1, h2, h3, h4, h5 {
-        margin-bottom: 1em;
-      }
+    p, ul, ol, h1, h2, h3, h4, h5 {
+      margin-bottom: 1em;
+    }
 
-      ol {
-        padding-left: 1em;
+    ol {
+      padding-left: 1em;
 
-        li {
-          list-style-type: decimal;
-        }
+      li {
+        list-style-type: decimal;
       }
+    }
 
-      ul {
-        padding-left: 1em;
+    ul {
+      padding-left: 1em;
 
-        li {
-          list-style-type: disc;
-        }
+      li {
+        list-style-type: disc;
       }
+    }
 
-      h1 {
-        font-size: 2em;
-        line-height: 1.25em;
-      }
+    h1 {
+      font-size: 2em;
+      line-height: 1.25em;
+    }
 
-      h2 {
-        font-size: 1.66em;
-        line-height: 1.25em;
-      }
+    h2 {
+      font-size: 1.66em;
+      line-height: 1.25em;
+    }
 
-      h3 {
-        font-size: 1.33em;
-        line-height: 1.25em;
-      }
+    h3 {
+      font-size: 1.33em;
+      line-height: 1.25em;
+    }
 
-      h4 {
-        font-size: 1.25em;
-        line-height: 1.25em;
-      }
+    h4 {
+      font-size: 1.25em;
+      line-height: 1.25em;
+    }
 
-      h5 {
-        font-size: 1em;
-        line-height: 1.25em;
-      }
+    h5 {
+      font-size: 1em;
+      line-height: 1.25em;
+    }
 
-      // default code syntax hightlighting is github
-      pre {
-        color: $color__wysiwyg-codeText;
-        padding: 15px;
-        overflow: auto;
-        background-color: $color__wysiwyg-codeBg;
-        border-radius: 3px;
-        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-      }
+    // default code syntax hightlighting is github
+    pre {
+      color: $color__wysiwyg-codeText;
+      padding: 15px;
+      overflow: auto;
+      background-color: $color__wysiwyg-codeBg;
+      border-radius: 3px;
+      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+    }
 
-      a {
-        color: $color__link;
-      }
+    a {
+      color: $color__link;
+    }
 
-      sup {
-        vertical-align: super;
-        font-size: smaller;
-      }
+    sup {
+      vertical-align: super;
+      font-size: smaller;
+    }
 
-      sub {
-        vertical-align: sub;
-        font-size: smaller;
-      }
+    sub {
+      vertical-align: sub;
+      font-size: smaller;
+    }
 
-      .tableWrapper {
-        margin: 1em 0;
-        overflow-x: auto;
-      }
+    .tableWrapper {
+      margin: 1em 0;
+      overflow-x: auto;
+    }
 
-      table {
-        border-collapse: collapse;
-        table-layout: fixed;
-        width: 100%;
-        margin: 0;
-        overflow: hidden;
-
-        .selectedCell:after {
-          content: "";
-          position: absolute;
-          left: 0;
-          right: 0;
-          top: 0;
-          bottom: 0;
-          background: rgba(234, 244, 250, .8);
-          pointer-events: none;
-          z-index: 2;
-        }
+    table {
+      border-collapse: collapse;
+      table-layout: fixed;
+      width: 100%;
+      margin: 0;
+      overflow: hidden;
+
+      .selectedCell:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        background: rgba(234, 244, 250, .8);
+        pointer-events: none;
+        z-index: 2;
       }
+    }
 
-      table td,
-      table th {
-        min-width: 1em;
-        border: 2px solid $color__border;
-        padding: 3px 5px;
-        vertical-align: top;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        position: relative;
-        width: 80px;
-      }
+    table td,
+    table th {
+      min-width: 1em;
+      border: 2px solid $color__border;
+      padding: 3px 5px;
+      vertical-align: top;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      position: relative;
+      width: 80px;
+    }
 
-      blockquote {
-        border-left: 3px solid $color__border;
-        color: rgba(0, 0, 0, .8);
-        padding-left: .8rem;
-      }
+    blockquote {
+      border-left: 3px solid $color__border;
+      color: rgba(0, 0, 0, .8);
+      padding-left: .8rem;
+    }
 
-      p.is-empty:first-child:before {
-        content: attr(data-empty-text);
-        float: left;
-        color: $color__text--light;
-        pointer-events: none;
-        height: 0;
-        font-style: italic;
-      }
+    p.is-empty:first-child:before {
+      content: attr(data-empty-text);
+      float: left;
+      color: $color__text--light;
+      pointer-events: none;
+      height: 0;
+      font-style: italic;
     }
   }
 }

From fdcd8718406975e534d51489bafc2b0734a6cb75 Mon Sep 17 00:00:00 2001
From: John Wedgbury <john@appoly.co.uk>
Date: Mon, 25 Jul 2022 10:47:25 +0100
Subject: [PATCH 04/15] TipTapWysiwyg Link: Translatable text, tabs &
 consistent styles/markup

---
 frontend/js/components/WysiwygTiptap.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 737dfdf36..229dd507f 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -147,20 +147,19 @@
     <div class="link-window" v-if="linkWindow">
       <div class="link-window-inner">
         <label>
-          Link:
+          {{ $trans('wysiwyg.link_window.link', 'Link') }}:
+          <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink" tabindex="1" ref="link_window__link">
         </label>
-        <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink">
 
         <label>
-          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="">
-          Open in a new window
+          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="" tabindex="2">
+          {{ $trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window') }}
         </label>
 
         <br>
-
-        <button @click="saveLink">
-          Save
-        </button>
+        <a17-button variant="validate" class="dialog-confirm" @click="saveLink" tabindex="3">
+          {{ $trans('wysiwyg.link_window.save', 'Save') }}
+        </a17-button>
       </div>
     </div>
   </a17-inputframe>
@@ -356,6 +355,9 @@
           href: markAttributes.href,
           target: markAttributes.target
         }
+        this.$nextTick(() => {
+          this.$refs.link_window__link.focus()
+        })
       },
       saveLink () {
         this.editor.commands.link(this.linkWindow)

From 1f8c039318065803ff2df771ceb9b0e19db90b48 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Sat, 21 Jan 2023 08:07:56 +0100
Subject: [PATCH 05/15] Refactor into tiptap 2 + custom link implementation.

---
 .eslintrc.js                              |   7 +-
 frontend/icons-wysiwyg/wysiwyg_unlink.svg |   5 +
 frontend/js/components/WysiwygTiptap.vue  | 880 +++++++++++---------
 package-lock.json                         | 964 ++++++++++++++++------
 package.json                              |  10 +-
 5 files changed, 1231 insertions(+), 635 deletions(-)
 create mode 100644 frontend/icons-wysiwyg/wysiwyg_unlink.svg

diff --git a/.eslintrc.js b/.eslintrc.js
index 7021592ea..7169d5946 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,10 +5,13 @@ module.exports = {
   },
   extends: ['plugin:vue/essential', '@vue/standard', 'prettier'],
   rules: {
+    'no-unmodified-loop-condition': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    'no-unused-vars': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
+    'no-unreachable': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
     // indent
     indent: ['error', 2, { SwitchCase: 1 }],
     'vue/script-indent': [
-      'error',
+      process.env.NODE_ENV === 'production' ? 'error' : 'warn',
       2,
       {
         baseIndent: 1,
@@ -35,7 +38,7 @@ module.exports = {
       rules: {
         indent: 'off',
         'vue/script-indent': [
-          'error',
+          process.env.NODE_ENV === 'production' ? 'error' : 'warn',
           2,
           {
             baseIndent: 1,
diff --git a/frontend/icons-wysiwyg/wysiwyg_unlink.svg b/frontend/icons-wysiwyg/wysiwyg_unlink.svg
new file mode 100644
index 000000000..93143286d
--- /dev/null
+++ b/frontend/icons-wysiwyg/wysiwyg_unlink.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="ionicon" viewBox="0 0 512 512">
+    <title>Unlink</title>
+    <path d="M208 352h-64a96 96 0 010-192h64M304 160h64a96 96 0 010 192h-64" fill="none" stroke="currentColor"
+          stroke-linecap="round" stroke-linejoin="round" stroke-width="36"/>
+</svg>
diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 229dd507f..d652174fc 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -7,119 +7,122 @@
                   :size="size"
                   :name="name"
                   :required="required">
-    <div class="wysiwyg__outer">
+    <div class="wysiwyg__outer" v-if="editor">
       <div class="wysiwyg"
-          :class="textfieldClasses"
-          v-show="!activeSource"
-          :dir="dirLocale">
+           :class="textfieldClasses"
+           v-show="!activeSource"
+           :dir="dirLocale">
         <input :name="name"
                type="hidden"
                v-model="value"/>
         <div class="wysiwyg__editor"
              ref="editor">
-          <editor-menu-bar :editor="editor"
-                           v-slot="{ commands, isActive, getMarkAttrs }">
-            <div class="wysiwyg__menubar">
-
-              <template v-if="toolbar.header">
-                <wysiwyg-menu-bar-btn icon="paragraph"
-                                      v-if="toolbar.header"
-                                      :isActive="isActive.paragraph()"
-                                      @btn:click="commands.paragraph"/>
-                <wysiwyg-menu-bar-btn v-for="headingLevel in headingOptions"
-                                      :key="headingLevel"
-                                      :icon="headingLevel > 1 ? `header-${headingLevel}` : 'header'"
-                                      :isActive="isActive.heading({ level: headingLevel })"
-                                      @btn:click="commands.heading({ level: headingLevel })"/>
-              </template>
-
-              <wysiwyg-menu-bar-btn icon="bold"
-                                    v-if="toolbar.bold"
-                                    :isActive="isActive.bold()"
-                                    @btn:click="commands.bold"/>
-              <wysiwyg-menu-bar-btn icon="italic"
-                                    v-if="toolbar.italic"
-                                    :isActive="isActive.italic()"
-                                    @btn:click="commands.italic"/>
-              <wysiwyg-menu-bar-btn icon="strike"
-                                    v-if="toolbar.strike"
-                                    :isActive="isActive.strike()"
-                                    @btn:click="commands.strike"/>
-              <wysiwyg-menu-bar-btn icon="underline"
-                                    v-if="toolbar.underline"
-                                    :isActive="isActive.underline()"
-                                    @btn:click="commands.underline"/>
-
-              <a href="javascript://"
-                 @click="openLinkWindow(getMarkAttrs('link'))">
-                <wysiwyg-menu-bar-btn icon="link"
-                                      v-if="toolbar.link"
-                                      :isActive="isActive.link()"/>
-              </a>
-
-              <wysiwyg-menu-bar-btn icon="ul"
-                                    v-if="toolbar.bullet"
-                                    :isActive="isActive.bullet_list()"
-                                    @btn:click="commands.bullet_list"/>
-
-              <wysiwyg-menu-bar-btn icon="ol"
-                                    v-if="toolbar.ordered"
-                                    :isActive="isActive.ordered_list()"
-                                    @btn:click="commands.ordered_list"/>
-
-              <wysiwyg-menu-bar-btn icon="quote"
-                                    v-if="toolbar.blockquote"
-                                    :isActive="isActive.blockquote()"
-                                    @btn:click="commands.blockquote"/>
-
-              <wysiwyg-menu-bar-btn icon="code"
-                                    v-if="toolbar['code-block']"
-                                    :isActive="isActive.code_block()"
-                                    @btn:click="commands.code_block"/>
-
-              <wysiwyg-menu-bar-btn icon="code"
-                                    v-if="toolbar['code']"
-                                    :isActive="isActive.code()"
-                                    @btn:click="commands.code"/>
-
-              <template v-if="toolbar.table">
-                <wysiwyg-menu-bar-btn icon="table"
-                                      @btn:click="commands.createTable({rowsCount: 3, colsCount: 3, withHeaderRow: true })"/>
-
-                <div class="wysiwyg__menubar-table-buttons"
-                     v-if="isActive.table()">
-
-                  <wysiwyg-menu-bar-btn icon="delete_table"
-                                        @btn:click="commands.deleteTable"/>
-
-                  <wysiwyg-menu-bar-btn icon="add_col_before"
-                                        @btn:click="commands.addColumnBefore"/>
-
-                  <wysiwyg-menu-bar-btn icon="add_col_after"
-                                        @btn:click="commands.addColumnAfter"/>
-
-                  <wysiwyg-menu-bar-btn icon="delete_col"
-                                        @btn:click="commands.deleteColumn"/>
-
-                  <wysiwyg-menu-bar-btn icon="add_row_before"
-                                        @btn:click="commands.addRowBefore"/>
-
-                  <wysiwyg-menu-bar-btn icon="add_row_after"
-                                        @btn:click="commands.addRowAfter"/>
-
-                  <wysiwyg-menu-bar-btn icon="delete_row"
-                                        @btn:click="commands.deleteRow"/>
-
-                  <wysiwyg-menu-bar-btn icon="combine_cells"
-                                        @btn:click="commands.toggleCellMerge"/>
-                </div>
-              </template>
-              <wysiwyg-menu-bar-btn icon="undo"
-                                    @btn:click="commands.undo"/>
-              <wysiwyg-menu-bar-btn icon="redo"
-                                    @btn:click="commands.redo"/>
-            </div>
-          </editor-menu-bar>
+          <div class="wysiwyg__menubar">
+
+            <template v-if="toolbar.header">
+              <wysiwyg-menu-bar-btn icon="paragraph"
+                                    v-if="toolbar.header"
+                                    :isActive="editor.isActive('paragraph')"
+                                    @btn:click="editor.chain().focus().setParagraph().run()"/>
+              <wysiwyg-menu-bar-btn v-for="headingLevel in headingOptions"
+                                    :key="headingLevel"
+                                    :icon="headingLevel > 1 ? `header-${headingLevel}` : 'header'"
+                                    :isActive="editor.isActive('heading', { level: headingLevel })"
+                                    @btn:click="editor.chain().focus().toggleHeading({ level: headingLevel }).run()"/>
+            </template>
+
+            <wysiwyg-menu-bar-btn icon="bold"
+                                  v-if="toolbar.bold"
+                                  :isActive="editor.isActive('bold')"
+                                  @btn:click="editor.chain().focus().toggleBold().run()"/>
+            <wysiwyg-menu-bar-btn icon="italic"
+                                  v-if="toolbar.italic"
+                                  :isActive="editor.isActive('italic')"
+                                  @btn:click="editor.chain().focus().toggleItalic().run()"/>
+            <wysiwyg-menu-bar-btn icon="strike"
+                                  v-if="toolbar.strike"
+                                  :isActive="editor.isActive('strike')"
+                                  @btn:click="editor.chain().focus().toggleStrike().run()"/>
+            <wysiwyg-menu-bar-btn icon="underline"
+                                  v-if="toolbar.underline"
+                                  :isActive="editor.isActive('underline')"
+                                  @btn:click="editor.chain().focus().toggleUnderline().run()"/>
+
+            <wysiwyg-menu-bar-btn icon="link"
+                                  v-if="toolbar.link"
+                                  :isActive="editor.isActive('link')"
+                                  @btn:click="openLinkWindow()"
+            />
+
+            <wysiwyg-menu-bar-btn icon="unlink"
+                                  v-if="toolbar.link && editor.isActive('link')"
+                                  :isActive="editor.isActive('link')"
+                                  @btn:click="removeLink()"/>
+
+            <wysiwyg-menu-bar-btn icon="ul"
+                                  v-if="toolbar.bullet"
+                                  :isActive="editor.isActive('bulletList')"
+                                  @btn:click="editor.chain().focus().toggleBulletList().run()"/>
+
+            <wysiwyg-menu-bar-btn icon="ol"
+                                  v-if="toolbar.ordered"
+                                  :isActive="editor.isActive('orderedList')"
+                                  @btn:click="editor.chain().focus().toggleOrderedList().run()"/>
+
+            <wysiwyg-menu-bar-btn icon="quote"
+                                  v-if="toolbar.blockquote"
+                                  :isActive="editor.isActive('blockquote')"
+                                  @btn:click="editor.chain().focus().toggleBlockquote().run()"/>
+
+            <wysiwyg-menu-bar-btn icon="code"
+                                  v-if="toolbar['code-block']"
+                                  :isActive="editor.isActive('codeBlock')"
+                                  @btn:click="editor.chain().focus().toggleCodeBlock().run()"/>
+
+            <wysiwyg-menu-bar-btn icon="code"
+                                  v-if="toolbar['code']"
+                                  :isActive="editor.isActive('code')"
+                                  @btn:click="editor.chain().focus().setCode().run()"/>
+
+            <template v-if="toolbar.table">
+              <wysiwyg-menu-bar-btn icon="table"
+                                    @btn:click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"/>
+
+              <div class="wysiwyg__menubar-table-buttons"
+                   v-if="editor.isActive('table')">
+
+                <wysiwyg-menu-bar-btn icon="delete_table"
+                                      @btn:click="editor.chain().focus().deleteTable().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="add_col_before"
+                                      @btn:click="editor.chain().focus().addColumnBefore().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="add_col_after"
+                                      @btn:click="editor.chain().focus().addColumnAfter().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="delete_col"
+                                      @btn:click="editor.chain().focus().deleteColumn().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="add_row_before"
+                                      @btn:click="editor.chain().focus().addRowBefore().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="add_row_after"
+                                      @btn:click="editor.chain().focus().addRowAfter().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="delete_row"
+                                      @btn:click="editor.chain().focus().deleteRow().run()"/>
+
+                <wysiwyg-menu-bar-btn icon="combine_cells"
+                                      @btn:click="editor.chain().focus().mergeCells().run()"/>
+              </div>
+            </template>
+            <wysiwyg-menu-bar-btn icon="undo"
+                                  :disabled="!editor.can().undo()"
+                                  @btn:click="editor.chain().focus().undo().run()"/>
+            <wysiwyg-menu-bar-btn icon="redo"
+                                  :disabled="!editor.can().redo()"
+                                  @btn:click="editor.chain().focus().redo().run()"/>
+          </div>
           <div class="wysiwyg__contentWrapper" :class="{ 'wysiwyg__contentWrapper--limitHeight' : limitHeight }">
             <editor-content class="wysiwyg__content"
                             :editor="editor"/>
@@ -146,20 +149,28 @@
     </div>
     <div class="link-window" v-if="linkWindow">
       <div class="link-window-inner">
+        <label>
+          {{ $trans('wysiwyg.link_window.text', 'Text') }}:
+          <input type="text" v-model="linkWindow.text" @keyup:enter="saveLink" tabindex="1" ref="link_window__text">
+        </label>
+
         <label>
           {{ $trans('wysiwyg.link_window.link', 'Link') }}:
-          <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink" tabindex="1" ref="link_window__link">
+          <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink" tabindex="2" ref="link_window__link">
         </label>
 
         <label>
-          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="" tabindex="2">
+          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="" tabindex="3">
           {{ $trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window') }}
         </label>
 
         <br>
-        <a17-button variant="validate" class="dialog-confirm" @click="saveLink" tabindex="3">
+        <a17-button variant="validate" class="dialog-confirm" @click="saveLink" tabindex="4">
           {{ $trans('wysiwyg.link_window.save', 'Save') }}
         </a17-button>
+        <a17-button variant="secondary" class="dialog-cancel" @click="linkWindow = null" tabindex="5">
+          {{ $trans('wysiwyg.link_window.save', 'Cancel') }}
+        </a17-button>
       </div>
     </div>
   </a17-inputframe>
@@ -167,34 +178,21 @@
 
 <script>
   import debounce from 'lodash/debounce'
-  import { Editor, EditorContent, EditorMenuBar } from 'tiptap'
-  import {
-    Blockquote,
-    Bold,
-    BulletList,
-    Code,
-    CodeBlock,
-    HardBreak,
-    Heading,
-    History,
-    Italic,
-    Link,
-    ListItem,
-    OrderedList,
-    Placeholder,
-    Strike,
-    Table,
-    TableCell,
-    TableHeader,
-    TableRow,
-    Underline  } from 'tiptap-extensions'
-  import { mapState } from 'vuex'
+  import {Editor, EditorContent, getMarkAttributes, getMarkRange} from '@tiptap/vue-2'
+  import StarterKit from '@tiptap/starter-kit'
+  import Underline from '@tiptap/extension-underline'
+  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 {mapState} from 'vuex'
 
   import WysiwygMenuBarBtn from '@/components/WysiwygMenuBarButton'
   import FormStoreMixin from '@/mixins/formStore'
   import InputMixin from '@/mixins/input'
   import InputframeMixin from '@/mixins/inputFrame'
   import LocaleMixin from '@/mixins/locale'
+  import {Link} from "@tiptap/extension-link";
 
   // Todo: load highligth depending of needs
   // import { loadScript } from '@/utils/loader'
@@ -271,7 +269,6 @@
     },
     components: {
       EditorContent,
-      EditorMenuBar,
       'wysiwyg-menu-bar-btn': WysiwygMenuBarBtn
     },
     data () {
@@ -280,27 +277,27 @@
         editorHeight: 50,
         toolbarHeight: 52,
         toolbar: this.options.modules.toolbar
-          ? this.options.modules.toolbar
-            .reduce((obj, item) => {
-              if (item.list) {
-                obj[item.list] = true
-                return obj
-              } else if (typeof item === 'object') {
-                return {
-                  ...obj,
-                  ...item
-                }
-              } else {
-                obj[item] = true
-                return obj
-              }
-            }, {})
-          : {
-            bold: true,
-            italic: true,
-            underline: true,
-            link: true
-          },
+            ? this.options.modules.toolbar
+                .reduce((obj, item) => {
+                  if (item.list) {
+                    obj[item.list] = true
+                    return obj
+                  } else if (typeof item === 'object') {
+                    return {
+                      ...obj,
+                      ...item
+                    }
+                  } else {
+                    obj[item] = true
+                    return obj
+                  }
+                }, {})
+            : {
+              bold: true,
+              italic: true,
+              underline: true,
+              link: true
+            },
         headingOptions: [],
         focused: false,
         activeSource: false,
@@ -350,121 +347,242 @@
       getTextLength () {
         return this.editor.getHTML().replace(/<[^>]+>/g, '').length
       },
-      openLinkWindow: function (markAttributes) {
+      openLinkWindow: function () {
+        this.editor.commands.extendMarkRange('link')
+        const {ranges} = this.editor.state.selection
+
+        const markAttributes = getMarkAttributes(this.editor.state, "link")
+
+        let newLink = true;
+
+        let from = ranges[0].$from.pos;
+        let to = ranges[0].$to.pos;
+
+        if (markAttributes.href) {
+          newLink = false;
+        }
+
+        let startPos = null;
+        let endPos = null;
+
+        const doc = this.editor.state.tr.doc;
+        const htmlLen = this.editor.getHTML().length
+
+        if (from === to) {
+          let foundStart = false;
+
+          let foundEnd = false;
+
+          while (!foundStart && from > 0) {
+            foundStart = from === 0 || doc.textBetween(from - 1, from) === ' '
+            if (doc.textBetween(from - 1, from) === ' ') {
+              startPos = from
+            } else if (from === 0) {
+              startPos = 0;
+            }
+            from = from - 1
+          }
+
+          while (!foundEnd && to < htmlLen) {
+            foundEnd = to === htmlLen ||
+                doc.textBetween(to, to + 1) === '' ||
+                doc.textBetween(to, to + 1) === ' '
+            endPos = to
+            to = to + 1
+          }
+        } else {
+          startPos = from
+          endPos = to
+        }
+
+        this.editor.commands.setTextSelection({from: startPos, to: endPos})
+
         this.linkWindow = {
+          newLink: newLink,
+          from: startPos ?? 0,
+          to: endPos,
+          textOriginal: this.editor.state.tr.doc.textBetween(startPos, endPos),
+          text: this.editor.state.tr.doc.textBetween(startPos, endPos),
           href: markAttributes.href,
-          target: markAttributes.target
+          target: markAttributes.target ?? null
         }
+
         this.$nextTick(() => {
           this.$refs.link_window__link.focus()
         })
       },
+      removeLink() {
+        this.editor.commands.extendMarkRange('link')
+        console.log(this.editor.commands);
+        this.editor.commands.focus().removeLink();
+      },
       saveLink () {
-        this.editor.commands.link(this.linkWindow)
+        if (this.linkWindow.text !== this.linkWindow.textOriginal) {
+          this.editor.commands.insertContentAt({
+            from: this.linkWindow.from,
+            to: this.linkWindow.to
+          }, this.linkWindow.text);
+          this.editor.commands.setTextSelection({
+            from: this.linkWindow.from,
+            to: this.linkWindow.from + this.linkWindow.text.length
+          });
+        }
+
+        if (this.linkWindow.newLink) {
+          this.editor.commands.setLink({href: this.linkWindow.href, target: this.linkWindow.target})
+        } else {
+          this.editor.commands.updateAttributes("link", {href: this.linkWindow.href, target: this.linkWindow.target})
+        }
+
         this.linkWindow = null
       }
     },
     beforeMount () {
       const content = this.value || ''
       const extensions = [
-        new History(),
-        new HardBreak()
+        // new HardBreak()
       ]
 
       if (this.placeholder && this.placeholder.length > 0) {
-        extensions.push(new Placeholder({
-          emptyNodeClass: 'is-empty',
-          emptyNodeText: this.placeHolder,
-          showOnlyWhenEditable: true
-        }))
-      }
-
-      if (this.toolbar.ordered || this.toolbar.bullet) {
-        extensions.push(new ListItem())
+        // extensions.push(new Placeholder({
+        //   emptyNodeClass: 'is-empty',
+        //   emptyNodeText: this.placeHolder,
+        //   showOnlyWhenEditable: true
+        // }))
       }
 
       Object.keys(this.toolbar).forEach(tool => {
         switch (tool) {
-          case 'header': {
-            const levels = this.toolbar[tool].filter(level => typeof level === 'number')
-            levels.forEach(level => {
-              this.headingOptions.push(level)
-            })
-            extensions.push(new Heading({
-              levels
-            }))
-            break
-          }
-          case 'bold': {
-            extensions.push(new Bold())
-            break
-          }
-          case 'italic': {
-            extensions.push(new Italic())
-            break
-          }
-          case 'strike': {
-            extensions.push(new Strike())
-            break
-          }
-          case 'underline': {
-            extensions.push(new Underline())
-            break
-          }
-          case 'link': {
-            extensions.push(new Link({
-              HTMLAttributes: {
-                target: null,
-                rel: null
-              },
-              openOnClick: false
-            }))
-            break
-          }
-          case 'blockquote': {
-            extensions.push(new Blockquote())
-            break
-          }
-          case 'bullet': {
-            extensions.push(new BulletList())
-            break
-          }
-          case 'ordered': {
-            extensions.push(new OrderedList())
-            break
-          }
-          case 'code': {
-            extensions.push(new Code())
-            break
-          }
-          case 'code-block': {
-            extensions.push(new CodeBlock())
-            break
-          }
+            // case 'link': {
+            //   extensions.push(new Link({
+            //     HTMLAttributes: {
+            //       target: null,
+            //       rel: null
+            //     },
+            //     openOnClick: false
+            //   }))
+            //   break
+            // }
           case 'table': {
-            extensions.push(new Table({
+            extensions.push(Table.configure({
               resizable: false
             }))
-            extensions.push(new TableHeader())
-            extensions.push(new TableCell())
-            extensions.push(new TableRow())
+            extensions.push(TableHeader)
+            extensions.push(TableCell)
+            extensions.push(TableRow)
             break
           }
         }
       })
 
+      extensions.push(StarterKit.configure({
+        orderedList: this.toolbar.ordered ?? false,
+        bulletList: this.toolbar.bullet ?? false,
+        listItem: this.toolbar.ordered || this.toolbar.bullet,
+      }))
+      extensions.push(Underline)
+      extensions.push(Link.configure({openOnClick: false}))
+
+      // const CustomLink = Link.extend({
+      //   addCommands() {
+      //     return {
+      //       openLinkWindow: () => ({state, chain, commands}) => {
+      //         const tr = state.tr
+      //         const { selection } = tr
+      //         const { empty, ranges } = selection
+      //
+      //         if (empty) {
+      //           const oldAttributes = getMarkAttributes(state, "link")
+      //           console.log("Oldattributes", oldAttributes);
+      //
+      //           this.openLinkWindow(oldAttributes)
+      //
+      //           tr.addMark("link", {href:"#"})
+      //         }
+      //         console.log(selection)
+      //       }
+      //       //   console.log(state)
+      //       //   chain()
+      //       //       .focus()
+      //       //       .extendMarkRange()
+      //       //       .first(() => [
+      //       //         ({commands}) => {
+      //       //           console.log('first')
+      //       //           commands.setMark("link", {href:"#"});
+      //       //           return false;
+      //       //         },
+      //       //         () => {
+      //       //           console.log('second')
+      //       //         }
+      //       //       ])
+      //       //       .command(({ tr, commands }) => {
+      //       //         console.log(commands)
+      //       //     // tr.selectParentNode()
+      //       //     var from = tr.selection.ranges[0].$from.pos;
+      //       //     var to = tr.selection.ranges[0].$to.pos;
+      //       //
+      //       //     let isEmptyStart = false;
+      //       //     let isEmptyEnd = false;
+      //       //
+      //       //     if (from === to) {
+      //       //       // If from and to are the same, the cursor is in a position and there is no selection.
+      //       //       // In that case we check if we are in a word.
+      //       //       if (from > 0) {
+      //       //         isEmptyStart = tr.doc.textBetween(from - 1, to) === ' ';
+      //       //         isEmptyEnd = tr.doc.textBetween(from, to +1) === ' ';
+      //       //       }
+      //       //
+      //       //       if (!isEmptyStart || !isEmptyEnd) {
+      //       //         commands.selectNodeBackward()
+      //       //       }
+      //       //     }
+      //       //
+      //       //     return true
+      //       //   }).command(({tr}) => {
+      //       //     const from = tr.selection.ranges[0].$from.pos;
+      //       //     const to = tr.selection.ranges[0].$to.pos;
+      //       //     console.log(from, to)
+      //       //     console.log(tr.doc.textBetween(from, to));
+      //       //   });
+      //       //   // return commands.setMark("link", {href:"#"});
+      //       // }
+      //     }
+      //   },
+      // })
+      //
+      // extensions.push(CustomLink.configure({ openOnClick: false }))
+
+      // const CustomExtension = Mark.create({
+      //   name: "link",
+      //   addCommands() {
+      //     return {
+      //       openLinkPopup: color => ({ chain }) => {
+      //         console.log(color)
+      //         return chain()
+      //           .setMark('textStyle', { color })
+      //           .run()
+      //       },
+      //     }
+      //   },
+      // })
+
+      // extensions.push(new CustomExtension());
+
       this.editor = new Editor({
-        extensions,
         content,
-        onUpdate: ({ getHTML }) => {
-          this.value = getHTML()
+        extensions,
+        onUpdate: ({editor}) => {
+          this.value = editor.getHTML()
           this.textUpdate()
           this.updateCounter()
         }
-      })
+      });
 
       this.updateCounter()
     },
+    beforeUnmount () {
+      this.editor.destroy()
+    },
     beforeDestroy () {
       this.editor.destroy()
     }
@@ -557,181 +675,181 @@
 </style>
 
 <style lang="scss">
-.wysiwyg__content {
-  .ProseMirror {
-    color: $color__text;
+  .wysiwyg__content {
+    .ProseMirror {
+      color: $color__text;
 
-    h1, h2, h3, h4, h5, h6 {
-      font-weight: 700;
-    }
+      h1, h2, h3, h4, h5, h6 {
+        font-weight: 700;
+      }
 
-    b, p b, p strong, strong {
-      font-weight:700;
-    }
+      b, p b, p strong, strong {
+        font-weight: 700;
+      }
 
-    p, ul, ol, h1, h2, h3, h4, h5 {
-      margin-bottom: 1em;
-    }
+      p, ul, ol, h1, h2, h3, h4, h5 {
+        margin-bottom: 1em;
+      }
 
-    ol {
-      padding-left: 1em;
+      ol {
+        padding-left: 1em;
 
-      li {
-        list-style-type: decimal;
+        li {
+          list-style-type: decimal;
+        }
       }
-    }
 
-    ul {
-      padding-left: 1em;
+      ul {
+        padding-left: 1em;
 
-      li {
-        list-style-type: disc;
+        li {
+          list-style-type: disc;
+        }
       }
-    }
 
-    h1 {
-      font-size: 2em;
-      line-height: 1.25em;
-    }
+      h1 {
+        font-size: 2em;
+        line-height: 1.25em;
+      }
 
-    h2 {
-      font-size: 1.66em;
-      line-height: 1.25em;
-    }
+      h2 {
+        font-size: 1.66em;
+        line-height: 1.25em;
+      }
 
-    h3 {
-      font-size: 1.33em;
-      line-height: 1.25em;
-    }
+      h3 {
+        font-size: 1.33em;
+        line-height: 1.25em;
+      }
 
-    h4 {
-      font-size: 1.25em;
-      line-height: 1.25em;
-    }
+      h4 {
+        font-size: 1.25em;
+        line-height: 1.25em;
+      }
 
-    h5 {
-      font-size: 1em;
-      line-height: 1.25em;
-    }
+      h5 {
+        font-size: 1em;
+        line-height: 1.25em;
+      }
 
-    // default code syntax hightlighting is github
-    pre {
-      color: $color__wysiwyg-codeText;
-      padding: 15px;
-      overflow: auto;
-      background-color: $color__wysiwyg-codeBg;
-      border-radius: 3px;
-      font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
-    }
+      // default code syntax hightlighting is github
+      pre {
+        color: $color__wysiwyg-codeText;
+        padding: 15px;
+        overflow: auto;
+        background-color: $color__wysiwyg-codeBg;
+        border-radius: 3px;
+        font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+      }
 
-    a {
-      color: $color__link;
-    }
+      a {
+        color: $color__link;
+      }
 
-    sup {
-      vertical-align: super;
-      font-size: smaller;
-    }
+      sup {
+        vertical-align: super;
+        font-size: smaller;
+      }
 
-    sub {
-      vertical-align: sub;
-      font-size: smaller;
-    }
+      sub {
+        vertical-align: sub;
+        font-size: smaller;
+      }
 
-    .tableWrapper {
-      margin: 1em 0;
-      overflow-x: auto;
-    }
+      .tableWrapper {
+        margin: 1em 0;
+        overflow-x: auto;
+      }
+
+      table {
+        border-collapse: collapse;
+        table-layout: fixed;
+        width: 100%;
+        margin: 0;
+        overflow: hidden;
+
+        .selectedCell:after {
+          content: "";
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          background: rgba(234, 244, 250, .8);
+          pointer-events: none;
+          z-index: 2;
+        }
+      }
 
-    table {
-      border-collapse: collapse;
-      table-layout: fixed;
-      width: 100%;
-      margin: 0;
-      overflow: hidden;
-
-      .selectedCell:after {
-        content: "";
-        position: absolute;
-        left: 0;
-        right: 0;
-        top: 0;
-        bottom: 0;
-        background: rgba(234, 244, 250, .8);
+      table td,
+      table th {
+        min-width: 1em;
+        border: 2px solid $color__border;
+        padding: 3px 5px;
+        vertical-align: top;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        position: relative;
+        width: 80px;
+      }
+
+      blockquote {
+        border-left: 3px solid $color__border;
+        color: rgba(0, 0, 0, .8);
+        padding-left: .8rem;
+      }
+
+      p.is-empty:first-child:before {
+        content: attr(data-empty-text);
+        float: left;
+        color: $color__text--light;
         pointer-events: none;
-        z-index: 2;
+        height: 0;
+        font-style: italic;
       }
     }
+  }
 
-    table td,
-    table th {
-      min-width: 1em;
-      border: 2px solid $color__border;
-      padding: 3px 5px;
-      vertical-align: top;
-      -webkit-box-sizing: border-box;
-      box-sizing: border-box;
-      position: relative;
-      width: 80px;
-    }
+  .link-window {
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 9999;
+    background-color: rgba(0, 0, 0, .5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 
-    blockquote {
-      border-left: 3px solid $color__border;
-      color: rgba(0, 0, 0, .8);
-      padding-left: .8rem;
-    }
+  .link-window-inner {
+    width: 100%;
+    max-width: 500px;
+    background-color: #fff;
+    border-radius: 3px;
+    padding: 20px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
+  }
 
-    p.is-empty:first-child:before {
-      content: attr(data-empty-text);
-      float: left;
-      color: $color__text--light;
-      pointer-events: none;
-      height: 0;
-      font-style: italic;
-    }
+  .link-window input[type=text] {
+    margin-bottom: 15px;
+    padding: 14px;
+    border: 1px solid #cbcbcb;
+    width: 100%;
+  }
+
+  .link-window label {
+    display: block;
+    padding: 8px 0;
+  }
+
+  .link-window button {
+    border: 0;
+    background: #4b4bd8;
+    color: white;
+    padding: 10px 30px;
+    cursor: pointer;
   }
-}
-
-.link-window {
-  position: fixed;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  z-index: 9999;
-  background-color: rgba(0, 0, 0, .5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.link-window-inner {
-  width: 100%;
-  max-width: 500px;
-  background-color: #fff;
-  border-radius: 3px;
-  padding: 20px;
-  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
-}
-
-.link-window input[type=text] {
-  margin-bottom: 15px;
-  padding: 14px;
-  border: 1px solid #cbcbcb;
-  width: 100%;
-}
-
-.link-window label {
-  display: block;
-  padding: 8px 0;
-}
-
-.link-window button {
-  border: 0;
-  background: #4b4bd8;
-  color: white;
-  padding: 10px 30px;
-  cursor: pointer;
-}
 
 </style>
diff --git a/package-lock.json b/package-lock.json
index 02047bdf2..e648e6cef 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,14 @@
       "version": "3.0.0-rc2",
       "dependencies": {
         "@alpinejs/mask": "^3.10.0",
+        "@tiptap/extension-link": "^2.0.0-beta.209",
+        "@tiptap/extension-table": "^2.0.0-beta.209",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.209",
+        "@tiptap/extension-table-header": "^2.0.0-beta.209",
+        "@tiptap/extension-table-row": "^2.0.0-beta.209",
+        "@tiptap/extension-underline": "^2.0.0-beta.209",
+        "@tiptap/starter-kit": "^2.0.0-beta.209",
+        "@tiptap/vue-2": "^2.0.0-beta.209",
         "alpinejs": "^3.10.0",
         "axios": "^0.21.2",
         "core-js": "^3.9.1",
@@ -21,8 +29,6 @@
         "quill": "^1.3.7",
         "smartcrop": "^2.0.3",
         "tinycolor2": "1.4.1",
-        "tiptap": "^1.27.1",
-        "tiptap-extensions": "^1.29.1",
         "truncate-utf8-bytes": "1.0.2",
         "vue": "^2.7.14",
         "vue-select": "^3.18.3",
@@ -2013,6 +2019,15 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -2152,6 +2167,425 @@
         "tailwindcss": ">=3.0.0 || insiders"
       }
     },
+    "node_modules/@tiptap/core": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.209.tgz",
+      "integrity": "sha512-DOOzfo2XKD5Qt2oEGW33/6ugwSnvpl4WbxtlKdPadLoApk6Kja3K1Eps3pihBgIGmo4tkctkCzmj8wNWS7KeWg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "prosemirror-commands": "^1.3.1",
+        "prosemirror-keymap": "^1.2.0",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-schema-list": "^1.2.2",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-transform": "^1.7.0",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
+    "node_modules/@tiptap/extension-blockquote": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.209.tgz",
+      "integrity": "sha512-ay5c+SJ1vQOL5zpsr94jN15tCt0ytd7zPMM433pkhi9ZL0qqf1fZ+D0KzDs2z8N49rfArVpoo238V3ZChBh2sA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.1"
+      }
+    },
+    "node_modules/@tiptap/extension-bold": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.209.tgz",
+      "integrity": "sha512-8jaoZSe55iwuEvwdM1mPhlgE+/tDyveECv0d1qogUcbPdIkhDQaNlIOmuH9Ftr465iIDthMjt4GB6AWi5tfsMg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-bubble-menu": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.209.tgz",
+      "integrity": "sha512-tceZAuDpy3J96uGyCzpJFD3fHABJDTJTq5E0hm+TRQT+eVGVqZI0PE3/4yVFgkCshioTuJq8veMDFcqNsSkKsQ==",
+      "dependencies": {
+        "@tiptap/core": "^2.0.0-beta.209",
+        "lodash": "^4.17.21",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2",
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
+    "node_modules/@tiptap/extension-bullet-list": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.209.tgz",
+      "integrity": "sha512-NGoSYakXCiKb5xrVe339Acu2iherOGQUR1bAeWgOKf+dINvIdjawnud6fIeB3n1h95aDvsmYuH1o9B+/bd7e3w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-code": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.0.0-beta.209.tgz",
+      "integrity": "sha512-LCcfQMroYps6o9ASpVZqYbbdTkSwxTokjmkkKKmWZlZSJ/h+1kThOnRZgcPkfSeaaC30T+LSxAXXyf1dMgl5+Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-code-block": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.209.tgz",
+      "integrity": "sha512-FlMud3yhAilHrcHbW4iUEagAdvpOJW1lTSiiDfbtVpyybjNJQQMa5zhSKi4blG2xBEGXZhqL0XuWDGERNsVawQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-state": "^1.4.1"
+      }
+    },
+    "node_modules/@tiptap/extension-document": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.0.0-beta.209.tgz",
+      "integrity": "sha512-ZRTC5j0J6fNTtIcU6UnxJm5KZrfJI2pygCJ172mMNzwE89upJMhRSP0CvPWTY7nf0odmQTJ5vD99QDR4CdOTng==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-dropcursor": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.209.tgz",
+      "integrity": "sha512-b4RxbZg4hza4p1Lp+m4CWkIIMVgoAKSo49OyvO/Y/igtQ0DcdQutSJDEPeEhuqy+jPdQFaU5GBonSvVi89Loog==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-dropcursor": "1.5.0"
+      }
+    },
+    "node_modules/@tiptap/extension-floating-menu": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.209.tgz",
+      "integrity": "sha512-m5ucAguqDxuOvNcsmvuSLcN8TMkbhFmiC6dTJOyaAGjGn6d8Ly6aZh+lEwU228TebM0TKHTp8Xob1cLjV4TGgg==",
+      "dependencies": {
+        "tippy.js": "^6.3.7"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
+    "node_modules/@tiptap/extension-gapcursor": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.209.tgz",
+      "integrity": "sha512-F03mr2VV5bZycIVWHCIYpQTzs9tC+goWJFhbJgPrT62f1gUAnlc1ZRc79mSqw1AxTsfbDvAc65OlUJb0QfxDWA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-gapcursor": "^1.3.1"
+      }
+    },
+    "node_modules/@tiptap/extension-hard-break": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.209.tgz",
+      "integrity": "sha512-BS0z9SshfJ5ESssiVaVe61901BrTLCAgxc9NPmi4Va2sszXJysI2Vm8q4jDHL6IehkCQpQZNAihT9eSBPHQR0w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-heading": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.209.tgz",
+      "integrity": "sha512-eqq9if0XsPjLvivM5gNUqSHj5I4Zpiv66NPO+pM4ig0Wq2CjjxWzzgmdSLfTPGRfsZe9kPCOgO86AAB07am3fQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-history": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.0.0-beta.209.tgz",
+      "integrity": "sha512-P5nw+r47gBdac4igeaBvW6gxsZUnS67SRgbAyQSmXVe45NXc1t0EUb2Be9YuHRKDVxhJUhGT8NawPY70Fgk4mQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-history": "^1.3.0"
+      }
+    },
+    "node_modules/@tiptap/extension-horizontal-rule": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.209.tgz",
+      "integrity": "sha512-53RU9kDVb1jowJ3Frx8QW0E05uEOCpeG3HfUCMjz8anGtefxFtMS7xYZ9sC+niJeVmXC+mUSjFGageL4iRIdqA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-state": "^1.4.1"
+      }
+    },
+    "node_modules/@tiptap/extension-italic": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.209.tgz",
+      "integrity": "sha512-KnRdbqfD01tcCnUNypA3TX3FqmQSFwu7/9YU3vwS8Zyaz+OIc/g/vJai5twg1DzFAvIcYWzRFPTFcqkjwkcW1w==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-link": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.0.0-beta.209.tgz",
+      "integrity": "sha512-X+iPnKWTb8nuZ7xieemPxZOiCQiaQw4z3RVJ7Hz4/T+ujxfxu7MJhBzjyw9htGPmUijyN4zt0NPjZ089yMzAxQ==",
+      "dependencies": {
+        "linkifyjs": "^3.0.5"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-state": "^1.4.1"
+      }
+    },
+    "node_modules/@tiptap/extension-list-item": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.209.tgz",
+      "integrity": "sha512-qkHwymyGfXIVAiqLXvL66UzGLhYpD2BYbSSAIQ6Rmuvk4aeNrsBvFv9tL7+YsYLKvlOa4+Q+PN2uhST+lOH0hw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-ordered-list": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.209.tgz",
+      "integrity": "sha512-PhJ9uqxqKVO97rb2MzW/TzQJ9XQicp9gsV/y0QbAEv1ZOH9QI/qF5sCe6BfeN8ZoMyYUEh6de3yxQL8iXSFWsw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-paragraph": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.209.tgz",
+      "integrity": "sha512-XkiguVbOX/KJwux2wdurvZRwG1UulpZ3Uhw7Yl59sLBf7YDw8H781EMgVvaLSWf3B1o27/yOyc+kiepW/Pp9Wg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-strike": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.209.tgz",
+      "integrity": "sha512-k8yaeyMYBzdq5U1zv5DYZt3KtpglPHV2JX7dYfNyoFpiX+6IJ2EwSuTXUGilZGRpyUw6UxeDF0yJbiOGMeEIDA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-table": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.209.tgz",
+      "integrity": "sha512-vyaVrH4rY+2S+qHGLn7CeDYDM/dyKx52jfmnNCN7wn9GMDsRrxqdFrQjtw0eDkGZyymIM7pEHf2h8kSNBxH2+Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "@tiptap/prosemirror-tables": "^1.1.3",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
+    "node_modules/@tiptap/extension-table-cell": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.209.tgz",
+      "integrity": "sha512-wKCD4IY2VJa9775h6c7KBZPcTnqtM6T/YpHCm4WHSXyNG+zcMMIb8aT3U8NbpOGKdK9wvQTWq6QDa/YOdkrCfA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-table-header": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.209.tgz",
+      "integrity": "sha512-EIVO41tgS9C0i1auXuHeX1zV6Oipfoz0HzwuIDzLR8Fww2/VTiXyMno+8yglSUOXLCIjc/888EVpho7OOnN5oA==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-table-row": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.209.tgz",
+      "integrity": "sha512-Ofsmscr8PiReLBIgpIvqTaeSrbqrgFWeFmzoPBNsnztDJdy/HtahYin+a7dNppwVqP975fezWM2uDfjGQJJ7bQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-text": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.209.tgz",
+      "integrity": "sha512-12PTPTQViDR7xDLwxGMPiYaV89E9olH/+4Zfoh6QiOjHqhmgYu3+/c8YZ3eARgXnfpy/EzUD0PBxiAyDZJ1vdw==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/extension-underline": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.209.tgz",
+      "integrity": "sha512-xCW0GvCE883l8+YLvDkj5lNdVpqL15uJFMvWP9v79rqlMVZGIFd49saMyAPQworZqepnhnndFOELZ0pHcCV4vQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193"
+      }
+    },
+    "node_modules/@tiptap/prosemirror-tables": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/prosemirror-tables/-/prosemirror-tables-1.1.4.tgz",
+      "integrity": "sha512-O2XnDhZV7xTHSFxMMl8Ei3UVeCxuMlbGYZ+J2QG8CzkK8mxDpBa66kFr5DdyAhvdi1ptpcH9u7/GMwItQpN4sA==",
+      "peer": true,
+      "peerDependencies": {
+        "prosemirror-keymap": "^1.1.2",
+        "prosemirror-model": "^1.8.1",
+        "prosemirror-state": "^1.3.1",
+        "prosemirror-transform": "^1.2.1",
+        "prosemirror-view": "^1.13.3"
+      }
+    },
+    "node_modules/@tiptap/starter-kit": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.209.tgz",
+      "integrity": "sha512-uR68ZfDZ5PeygGey3xc9ZuFIP+K7VRElrABnZcM6t9/Crrs70UFwSTNlkS0ezx9woj8h+8N78a6r8W1YC04TOw==",
+      "dependencies": {
+        "@tiptap/core": "^2.0.0-beta.209",
+        "@tiptap/extension-blockquote": "^2.0.0-beta.209",
+        "@tiptap/extension-bold": "^2.0.0-beta.209",
+        "@tiptap/extension-bullet-list": "^2.0.0-beta.209",
+        "@tiptap/extension-code": "^2.0.0-beta.209",
+        "@tiptap/extension-code-block": "^2.0.0-beta.209",
+        "@tiptap/extension-document": "^2.0.0-beta.209",
+        "@tiptap/extension-dropcursor": "^2.0.0-beta.209",
+        "@tiptap/extension-gapcursor": "^2.0.0-beta.209",
+        "@tiptap/extension-hard-break": "^2.0.0-beta.209",
+        "@tiptap/extension-heading": "^2.0.0-beta.209",
+        "@tiptap/extension-history": "^2.0.0-beta.209",
+        "@tiptap/extension-horizontal-rule": "^2.0.0-beta.209",
+        "@tiptap/extension-italic": "^2.0.0-beta.209",
+        "@tiptap/extension-list-item": "^2.0.0-beta.209",
+        "@tiptap/extension-ordered-list": "^2.0.0-beta.209",
+        "@tiptap/extension-paragraph": "^2.0.0-beta.209",
+        "@tiptap/extension-strike": "^2.0.0-beta.209",
+        "@tiptap/extension-text": "^2.0.0-beta.209"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      }
+    },
+    "node_modules/@tiptap/vue-2": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/vue-2/-/vue-2-2.0.0-beta.209.tgz",
+      "integrity": "sha512-XPtegyPmq+dHO3FdgwGisif8ilxKokCsJky1RLl1wJHJa/DVCDSHNJy+pOrJA/BEXYtyFBdGq4+iEshQ3XAuZA==",
+      "dependencies": {
+        "@tiptap/extension-bubble-menu": "^2.0.0-beta.209",
+        "@tiptap/extension-floating-menu": "^2.0.0-beta.209"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-view": "^1.28.2",
+        "vue": "^2.6.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -4969,7 +5403,8 @@
     "node_modules/de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -6594,18 +7029,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "node_modules/fault": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
-      "dependencies": {
-        "format": "^0.2.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -6806,14 +7229,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "node_modules/format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -7190,6 +7605,7 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true,
       "bin": {
         "he": "bin/he"
       }
@@ -7198,6 +7614,7 @@
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
       "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true,
       "engines": {
         "node": "*"
       }
@@ -8153,6 +8570,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/linkifyjs": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+      "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg=="
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -8500,19 +8922,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "node_modules/lowlight": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
-      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
-      "dependencies": {
-        "fault": "^1.0.0",
-        "highlight.js": "~10.7.0"
-      },
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
-      }
-    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -10281,18 +10690,11 @@
         "webpack": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/prosemirror-collab": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.0.tgz",
-      "integrity": "sha512-+S/IJ69G2cUu2IM5b3PBekuxs94HO1CxJIWOFrLQXUaUDKL/JfBx+QcH31ldBlBXyDEUl+k3Vltfi1E1MKp2mA==",
-      "dependencies": {
-        "prosemirror-state": "^1.0.0"
-      }
-    },
     "node_modules/prosemirror-commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.0.tgz",
       "integrity": "sha512-zL0Fxbj3fh71GPNHn5YdYgYGX2aU2XLecZYk2ekEF0oOD259HcXtM+96VjPVi5o3h4sGUdDfEEhGiREXW6U+4A==",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
@@ -10300,9 +10702,10 @@
       }
     },
     "node_modules/prosemirror-dropcursor": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.6.1.tgz",
-      "integrity": "sha512-LtyqQpkIknaT7NnZl3vDr3TpkNcG4ABvGRXx37XJ8tJNUGtcrZBh40A0344rDwlRTfUEmynQS/grUsoSWz+HgA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.5.0.tgz",
+      "integrity": "sha512-vy7i77ddKyXlu8kKBB3nlxLBnsWyKUmQIPB5x8RkYNh01QNp/qqGmdd5yZefJs0s3rtv5r7Izfu2qbtr+tYAMQ==",
+      "peer": true,
       "dependencies": {
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.1.0",
@@ -10313,6 +10716,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz",
       "integrity": "sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==",
+      "peer": true,
       "dependencies": {
         "prosemirror-keymap": "^1.0.0",
         "prosemirror-model": "^1.0.0",
@@ -10324,25 +10728,18 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.0.tgz",
       "integrity": "sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==",
+      "peer": true,
       "dependencies": {
         "prosemirror-state": "^1.2.2",
         "prosemirror-transform": "^1.0.0",
         "rope-sequence": "^1.3.0"
       }
     },
-    "node_modules/prosemirror-inputrules": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.0.tgz",
-      "integrity": "sha512-eAW/M/NTSSzpCOxfR8Abw6OagdG0MiDAiWHQMQveIsZtoKVYzm0AflSPq/ymqJd56/Su1YPbwy9lM13wgHOFmQ==",
-      "dependencies": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
     "node_modules/prosemirror-keymap": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz",
       "integrity": "sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==",
+      "peer": true,
       "dependencies": {
         "prosemirror-state": "^1.0.0",
         "w3c-keyname": "^2.2.0"
@@ -10360,6 +10757,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz",
       "integrity": "sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==",
+      "peer": true,
       "dependencies": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
@@ -10376,18 +10774,6 @@
         "prosemirror-view": "^1.27.0"
       }
     },
-    "node_modules/prosemirror-tables": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.2.tgz",
-      "integrity": "sha512-/9JTeN6s58Zq66HXaxP6uf8PAmc7XXKZFPlOGVtLvxEd6xBP6WtzaJB9wBjiGUzwbdhdMEy7V62yuHqk/3VrnQ==",
-      "dependencies": {
-        "prosemirror-keymap": "^1.1.2",
-        "prosemirror-model": "^1.8.1",
-        "prosemirror-state": "^1.3.1",
-        "prosemirror-transform": "^1.2.1",
-        "prosemirror-view": "^1.13.3"
-      }
-    },
     "node_modules/prosemirror-transform": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.0.tgz",
@@ -10923,7 +11309,8 @@
     "node_modules/rope-sequence": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz",
-      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q=="
+      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==",
+      "peer": true
     },
     "node_modules/run-parallel": {
       "version": "1.2.0",
@@ -12007,71 +12394,12 @@
         "node": "*"
       }
     },
-    "node_modules/tiptap": {
-      "version": "1.32.2",
-      "resolved": "https://registry.npmjs.org/tiptap/-/tiptap-1.32.2.tgz",
-      "integrity": "sha512-5IwVj8nGo8y5V3jbdtoEd7xNUsi8Q0N6WV2Nfs70olqz3fldXkiImBrDhZJ4Anx8vhyP6PIBttrg0prFVmwIvw==",
+    "node_modules/tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
       "dependencies": {
-        "prosemirror-commands": "^1.1.4",
-        "prosemirror-dropcursor": "^1.3.2",
-        "prosemirror-gapcursor": "^1.1.5",
-        "prosemirror-inputrules": "^1.1.3",
-        "prosemirror-keymap": "^1.1.4",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-view": "^1.16.5",
-        "tiptap-commands": "^1.17.1",
-        "tiptap-utils": "^1.13.1"
-      },
-      "peerDependencies": {
-        "vue": "^2.5.17",
-        "vue-template-compiler": "^2.5.17"
-      }
-    },
-    "node_modules/tiptap-commands": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/tiptap-commands/-/tiptap-commands-1.17.1.tgz",
-      "integrity": "sha512-CyGvMD/c6fNer5LThWGtrVMXHAqHn93ivGQpqJ58x3HNZFuoIiF9QTWXAiWbY/4QrG0ANYHKCSe9n5afickTqw==",
-      "dependencies": {
-        "prosemirror-commands": "^1.1.4",
-        "prosemirror-inputrules": "^1.1.2",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-schema-list": "^1.1.4",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1",
-        "tiptap-utils": "^1.13.1"
-      }
-    },
-    "node_modules/tiptap-extensions": {
-      "version": "1.35.2",
-      "resolved": "https://registry.npmjs.org/tiptap-extensions/-/tiptap-extensions-1.35.2.tgz",
-      "integrity": "sha512-TIMbHVJe0/3aVeTeCmqGbatDkfxduPYFOffNCmuKR+h6oQNzTu6rLVhRzoNqktfxIoi/b44SiDPorTjSN72dCw==",
-      "dependencies": {
-        "lowlight": "^1.17.0",
-        "prosemirror-collab": "^1.2.2",
-        "prosemirror-history": "^1.1.3",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1",
-        "prosemirror-transform": "^1.2.8",
-        "prosemirror-view": "^1.16.5",
-        "tiptap": "^1.32.2",
-        "tiptap-commands": "^1.17.1",
-        "tiptap-utils": "^1.13.1"
-      },
-      "peerDependencies": {
-        "vue": "^2.5.17",
-        "vue-template-compiler": "^2.5.17"
-      }
-    },
-    "node_modules/tiptap-utils": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/tiptap-utils/-/tiptap-utils-1.13.1.tgz",
-      "integrity": "sha512-RoCvMfkdu7fp9u7nsRr1OgsYU8RFjoHKHEKpx075rJ9X0t+j5Vxah9n6QzTTr4yjvcavq22WO2flFacm36zYtA==",
-      "dependencies": {
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1"
+        "@popperjs/core": "^2.9.0"
       }
     },
     "node_modules/to-fast-properties": {
@@ -12604,6 +12932,7 @@
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
       "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "dev": true,
       "dependencies": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -12650,7 +12979,8 @@
     "node_modules/w3c-keyname": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
-      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
+      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==",
+      "peer": true
     },
     "node_modules/watchpack": {
       "version": "2.4.0",
@@ -15148,6 +15478,11 @@
       "integrity": "sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==",
       "dev": true
     },
+    "@popperjs/core": {
+      "version": "2.11.6",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
+      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+    },
     "@sideway/address": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
@@ -15259,6 +15594,220 @@
         "postcss-selector-parser": "6.0.10"
       }
     },
+    "@tiptap/core": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/core/-/core-2.0.0-beta.209.tgz",
+      "integrity": "sha512-DOOzfo2XKD5Qt2oEGW33/6ugwSnvpl4WbxtlKdPadLoApk6Kja3K1Eps3pihBgIGmo4tkctkCzmj8wNWS7KeWg==",
+      "requires": {}
+    },
+    "@tiptap/extension-blockquote": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-blockquote/-/extension-blockquote-2.0.0-beta.209.tgz",
+      "integrity": "sha512-ay5c+SJ1vQOL5zpsr94jN15tCt0ytd7zPMM433pkhi9ZL0qqf1fZ+D0KzDs2z8N49rfArVpoo238V3ZChBh2sA==",
+      "requires": {}
+    },
+    "@tiptap/extension-bold": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bold/-/extension-bold-2.0.0-beta.209.tgz",
+      "integrity": "sha512-8jaoZSe55iwuEvwdM1mPhlgE+/tDyveECv0d1qogUcbPdIkhDQaNlIOmuH9Ftr465iIDthMjt4GB6AWi5tfsMg==",
+      "requires": {}
+    },
+    "@tiptap/extension-bubble-menu": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bubble-menu/-/extension-bubble-menu-2.0.0-beta.209.tgz",
+      "integrity": "sha512-tceZAuDpy3J96uGyCzpJFD3fHABJDTJTq5E0hm+TRQT+eVGVqZI0PE3/4yVFgkCshioTuJq8veMDFcqNsSkKsQ==",
+      "requires": {
+        "@tiptap/core": "^2.0.0-beta.209",
+        "lodash": "^4.17.21",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2",
+        "tippy.js": "^6.3.7"
+      }
+    },
+    "@tiptap/extension-bullet-list": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-bullet-list/-/extension-bullet-list-2.0.0-beta.209.tgz",
+      "integrity": "sha512-NGoSYakXCiKb5xrVe339Acu2iherOGQUR1bAeWgOKf+dINvIdjawnud6fIeB3n1h95aDvsmYuH1o9B+/bd7e3w==",
+      "requires": {}
+    },
+    "@tiptap/extension-code": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code/-/extension-code-2.0.0-beta.209.tgz",
+      "integrity": "sha512-LCcfQMroYps6o9ASpVZqYbbdTkSwxTokjmkkKKmWZlZSJ/h+1kThOnRZgcPkfSeaaC30T+LSxAXXyf1dMgl5+Q==",
+      "requires": {}
+    },
+    "@tiptap/extension-code-block": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-code-block/-/extension-code-block-2.0.0-beta.209.tgz",
+      "integrity": "sha512-FlMud3yhAilHrcHbW4iUEagAdvpOJW1lTSiiDfbtVpyybjNJQQMa5zhSKi4blG2xBEGXZhqL0XuWDGERNsVawQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-document": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-document/-/extension-document-2.0.0-beta.209.tgz",
+      "integrity": "sha512-ZRTC5j0J6fNTtIcU6UnxJm5KZrfJI2pygCJ172mMNzwE89upJMhRSP0CvPWTY7nf0odmQTJ5vD99QDR4CdOTng==",
+      "requires": {}
+    },
+    "@tiptap/extension-dropcursor": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-dropcursor/-/extension-dropcursor-2.0.0-beta.209.tgz",
+      "integrity": "sha512-b4RxbZg4hza4p1Lp+m4CWkIIMVgoAKSo49OyvO/Y/igtQ0DcdQutSJDEPeEhuqy+jPdQFaU5GBonSvVi89Loog==",
+      "requires": {}
+    },
+    "@tiptap/extension-floating-menu": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-floating-menu/-/extension-floating-menu-2.0.0-beta.209.tgz",
+      "integrity": "sha512-m5ucAguqDxuOvNcsmvuSLcN8TMkbhFmiC6dTJOyaAGjGn6d8Ly6aZh+lEwU228TebM0TKHTp8Xob1cLjV4TGgg==",
+      "requires": {
+        "tippy.js": "^6.3.7"
+      }
+    },
+    "@tiptap/extension-gapcursor": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-gapcursor/-/extension-gapcursor-2.0.0-beta.209.tgz",
+      "integrity": "sha512-F03mr2VV5bZycIVWHCIYpQTzs9tC+goWJFhbJgPrT62f1gUAnlc1ZRc79mSqw1AxTsfbDvAc65OlUJb0QfxDWA==",
+      "requires": {}
+    },
+    "@tiptap/extension-hard-break": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-hard-break/-/extension-hard-break-2.0.0-beta.209.tgz",
+      "integrity": "sha512-BS0z9SshfJ5ESssiVaVe61901BrTLCAgxc9NPmi4Va2sszXJysI2Vm8q4jDHL6IehkCQpQZNAihT9eSBPHQR0w==",
+      "requires": {}
+    },
+    "@tiptap/extension-heading": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-heading/-/extension-heading-2.0.0-beta.209.tgz",
+      "integrity": "sha512-eqq9if0XsPjLvivM5gNUqSHj5I4Zpiv66NPO+pM4ig0Wq2CjjxWzzgmdSLfTPGRfsZe9kPCOgO86AAB07am3fQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-history": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-history/-/extension-history-2.0.0-beta.209.tgz",
+      "integrity": "sha512-P5nw+r47gBdac4igeaBvW6gxsZUnS67SRgbAyQSmXVe45NXc1t0EUb2Be9YuHRKDVxhJUhGT8NawPY70Fgk4mQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-horizontal-rule": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.0.0-beta.209.tgz",
+      "integrity": "sha512-53RU9kDVb1jowJ3Frx8QW0E05uEOCpeG3HfUCMjz8anGtefxFtMS7xYZ9sC+niJeVmXC+mUSjFGageL4iRIdqA==",
+      "requires": {}
+    },
+    "@tiptap/extension-italic": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-italic/-/extension-italic-2.0.0-beta.209.tgz",
+      "integrity": "sha512-KnRdbqfD01tcCnUNypA3TX3FqmQSFwu7/9YU3vwS8Zyaz+OIc/g/vJai5twg1DzFAvIcYWzRFPTFcqkjwkcW1w==",
+      "requires": {}
+    },
+    "@tiptap/extension-link": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-link/-/extension-link-2.0.0-beta.209.tgz",
+      "integrity": "sha512-X+iPnKWTb8nuZ7xieemPxZOiCQiaQw4z3RVJ7Hz4/T+ujxfxu7MJhBzjyw9htGPmUijyN4zt0NPjZ089yMzAxQ==",
+      "requires": {
+        "linkifyjs": "^3.0.5"
+      }
+    },
+    "@tiptap/extension-list-item": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-list-item/-/extension-list-item-2.0.0-beta.209.tgz",
+      "integrity": "sha512-qkHwymyGfXIVAiqLXvL66UzGLhYpD2BYbSSAIQ6Rmuvk4aeNrsBvFv9tL7+YsYLKvlOa4+Q+PN2uhST+lOH0hw==",
+      "requires": {}
+    },
+    "@tiptap/extension-ordered-list": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-ordered-list/-/extension-ordered-list-2.0.0-beta.209.tgz",
+      "integrity": "sha512-PhJ9uqxqKVO97rb2MzW/TzQJ9XQicp9gsV/y0QbAEv1ZOH9QI/qF5sCe6BfeN8ZoMyYUEh6de3yxQL8iXSFWsw==",
+      "requires": {}
+    },
+    "@tiptap/extension-paragraph": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-paragraph/-/extension-paragraph-2.0.0-beta.209.tgz",
+      "integrity": "sha512-XkiguVbOX/KJwux2wdurvZRwG1UulpZ3Uhw7Yl59sLBf7YDw8H781EMgVvaLSWf3B1o27/yOyc+kiepW/Pp9Wg==",
+      "requires": {}
+    },
+    "@tiptap/extension-strike": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.209.tgz",
+      "integrity": "sha512-k8yaeyMYBzdq5U1zv5DYZt3KtpglPHV2JX7dYfNyoFpiX+6IJ2EwSuTXUGilZGRpyUw6UxeDF0yJbiOGMeEIDA==",
+      "requires": {}
+    },
+    "@tiptap/extension-table": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table/-/extension-table-2.0.0-beta.209.tgz",
+      "integrity": "sha512-vyaVrH4rY+2S+qHGLn7CeDYDM/dyKx52jfmnNCN7wn9GMDsRrxqdFrQjtw0eDkGZyymIM7pEHf2h8kSNBxH2+Q==",
+      "requires": {}
+    },
+    "@tiptap/extension-table-cell": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-cell/-/extension-table-cell-2.0.0-beta.209.tgz",
+      "integrity": "sha512-wKCD4IY2VJa9775h6c7KBZPcTnqtM6T/YpHCm4WHSXyNG+zcMMIb8aT3U8NbpOGKdK9wvQTWq6QDa/YOdkrCfA==",
+      "requires": {}
+    },
+    "@tiptap/extension-table-header": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-header/-/extension-table-header-2.0.0-beta.209.tgz",
+      "integrity": "sha512-EIVO41tgS9C0i1auXuHeX1zV6Oipfoz0HzwuIDzLR8Fww2/VTiXyMno+8yglSUOXLCIjc/888EVpho7OOnN5oA==",
+      "requires": {}
+    },
+    "@tiptap/extension-table-row": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-table-row/-/extension-table-row-2.0.0-beta.209.tgz",
+      "integrity": "sha512-Ofsmscr8PiReLBIgpIvqTaeSrbqrgFWeFmzoPBNsnztDJdy/HtahYin+a7dNppwVqP975fezWM2uDfjGQJJ7bQ==",
+      "requires": {}
+    },
+    "@tiptap/extension-text": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-text/-/extension-text-2.0.0-beta.209.tgz",
+      "integrity": "sha512-12PTPTQViDR7xDLwxGMPiYaV89E9olH/+4Zfoh6QiOjHqhmgYu3+/c8YZ3eARgXnfpy/EzUD0PBxiAyDZJ1vdw==",
+      "requires": {}
+    },
+    "@tiptap/extension-underline": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-underline/-/extension-underline-2.0.0-beta.209.tgz",
+      "integrity": "sha512-xCW0GvCE883l8+YLvDkj5lNdVpqL15uJFMvWP9v79rqlMVZGIFd49saMyAPQworZqepnhnndFOELZ0pHcCV4vQ==",
+      "requires": {}
+    },
+    "@tiptap/prosemirror-tables": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@tiptap/prosemirror-tables/-/prosemirror-tables-1.1.4.tgz",
+      "integrity": "sha512-O2XnDhZV7xTHSFxMMl8Ei3UVeCxuMlbGYZ+J2QG8CzkK8mxDpBa66kFr5DdyAhvdi1ptpcH9u7/GMwItQpN4sA==",
+      "peer": true,
+      "requires": {}
+    },
+    "@tiptap/starter-kit": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/starter-kit/-/starter-kit-2.0.0-beta.209.tgz",
+      "integrity": "sha512-uR68ZfDZ5PeygGey3xc9ZuFIP+K7VRElrABnZcM6t9/Crrs70UFwSTNlkS0ezx9woj8h+8N78a6r8W1YC04TOw==",
+      "requires": {
+        "@tiptap/core": "^2.0.0-beta.209",
+        "@tiptap/extension-blockquote": "^2.0.0-beta.209",
+        "@tiptap/extension-bold": "^2.0.0-beta.209",
+        "@tiptap/extension-bullet-list": "^2.0.0-beta.209",
+        "@tiptap/extension-code": "^2.0.0-beta.209",
+        "@tiptap/extension-code-block": "^2.0.0-beta.209",
+        "@tiptap/extension-document": "^2.0.0-beta.209",
+        "@tiptap/extension-dropcursor": "^2.0.0-beta.209",
+        "@tiptap/extension-gapcursor": "^2.0.0-beta.209",
+        "@tiptap/extension-hard-break": "^2.0.0-beta.209",
+        "@tiptap/extension-heading": "^2.0.0-beta.209",
+        "@tiptap/extension-history": "^2.0.0-beta.209",
+        "@tiptap/extension-horizontal-rule": "^2.0.0-beta.209",
+        "@tiptap/extension-italic": "^2.0.0-beta.209",
+        "@tiptap/extension-list-item": "^2.0.0-beta.209",
+        "@tiptap/extension-ordered-list": "^2.0.0-beta.209",
+        "@tiptap/extension-paragraph": "^2.0.0-beta.209",
+        "@tiptap/extension-strike": "^2.0.0-beta.209",
+        "@tiptap/extension-text": "^2.0.0-beta.209"
+      }
+    },
+    "@tiptap/vue-2": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/vue-2/-/vue-2-2.0.0-beta.209.tgz",
+      "integrity": "sha512-XPtegyPmq+dHO3FdgwGisif8ilxKokCsJky1RLl1wJHJa/DVCDSHNJy+pOrJA/BEXYtyFBdGq4+iEshQ3XAuZA==",
+      "requires": {
+        "@tiptap/extension-bubble-menu": "^2.0.0-beta.209",
+        "@tiptap/extension-floating-menu": "^2.0.0-beta.209"
+      }
+    },
     "@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -17423,7 +17972,8 @@
     "de-indent": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz",
-      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg=="
+      "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
+      "dev": true
     },
     "debug": {
       "version": "4.3.4",
@@ -18662,14 +19212,6 @@
         "reusify": "^1.0.4"
       }
     },
-    "fault": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz",
-      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
-      "requires": {
-        "format": "^0.2.0"
-      }
-    },
     "faye-websocket": {
       "version": "0.11.4",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.4.tgz",
@@ -18818,11 +19360,6 @@
         "is-callable": "^1.1.3"
       }
     },
-    "format": {
-      "version": "0.2.2",
-      "resolved": "https://registry.npmjs.org/format/-/format-0.2.2.tgz",
-      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww=="
-    },
     "forwarded": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
@@ -19085,12 +19622,14 @@
     "he": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
-      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
+      "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==",
+      "dev": true
     },
     "highlight.js": {
       "version": "10.7.3",
       "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
-      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "dev": true
     },
     "hosted-git-info": {
       "version": "2.8.9",
@@ -19780,6 +20319,11 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "linkifyjs": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-3.0.5.tgz",
+      "integrity": "sha512-1Y9XQH65eQKA9p2xtk+zxvnTeQBG7rdAXSkUG97DmuI/Xhji9uaUzaWxRj6rf9YC0v8KKHkxav7tnLX82Sz5Fg=="
+    },
     "loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -20061,15 +20605,6 @@
         "tslib": "^2.0.3"
       }
     },
-    "lowlight": {
-      "version": "1.20.0",
-      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.20.0.tgz",
-      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
-      "requires": {
-        "fault": "^1.0.0",
-        "highlight.js": "~10.7.0"
-      }
-    },
     "lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -21302,18 +21837,11 @@
         "log-update": "^2.3.0"
       }
     },
-    "prosemirror-collab": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-collab/-/prosemirror-collab-1.3.0.tgz",
-      "integrity": "sha512-+S/IJ69G2cUu2IM5b3PBekuxs94HO1CxJIWOFrLQXUaUDKL/JfBx+QcH31ldBlBXyDEUl+k3Vltfi1E1MKp2mA==",
-      "requires": {
-        "prosemirror-state": "^1.0.0"
-      }
-    },
     "prosemirror-commands": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.0.tgz",
       "integrity": "sha512-zL0Fxbj3fh71GPNHn5YdYgYGX2aU2XLecZYk2ekEF0oOD259HcXtM+96VjPVi5o3h4sGUdDfEEhGiREXW6U+4A==",
+      "peer": true,
       "requires": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
@@ -21321,9 +21849,10 @@
       }
     },
     "prosemirror-dropcursor": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.6.1.tgz",
-      "integrity": "sha512-LtyqQpkIknaT7NnZl3vDr3TpkNcG4ABvGRXx37XJ8tJNUGtcrZBh40A0344rDwlRTfUEmynQS/grUsoSWz+HgA==",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-dropcursor/-/prosemirror-dropcursor-1.5.0.tgz",
+      "integrity": "sha512-vy7i77ddKyXlu8kKBB3nlxLBnsWyKUmQIPB5x8RkYNh01QNp/qqGmdd5yZefJs0s3rtv5r7Izfu2qbtr+tYAMQ==",
+      "peer": true,
       "requires": {
         "prosemirror-state": "^1.0.0",
         "prosemirror-transform": "^1.1.0",
@@ -21334,6 +21863,7 @@
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/prosemirror-gapcursor/-/prosemirror-gapcursor-1.3.1.tgz",
       "integrity": "sha512-GKTeE7ZoMsx5uVfc51/ouwMFPq0o8YrZ7Hx4jTF4EeGbXxBveUV8CGv46mSHuBBeXGmvu50guoV2kSnOeZZnUA==",
+      "peer": true,
       "requires": {
         "prosemirror-keymap": "^1.0.0",
         "prosemirror-model": "^1.0.0",
@@ -21345,25 +21875,18 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/prosemirror-history/-/prosemirror-history-1.3.0.tgz",
       "integrity": "sha512-qo/9Wn4B/Bq89/YD+eNWFbAytu6dmIM85EhID+fz9Jcl9+DfGEo8TTSrRhP15+fFEoaPqpHSxlvSzSEbmlxlUA==",
+      "peer": true,
       "requires": {
         "prosemirror-state": "^1.2.2",
         "prosemirror-transform": "^1.0.0",
         "rope-sequence": "^1.3.0"
       }
     },
-    "prosemirror-inputrules": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/prosemirror-inputrules/-/prosemirror-inputrules-1.2.0.tgz",
-      "integrity": "sha512-eAW/M/NTSSzpCOxfR8Abw6OagdG0MiDAiWHQMQveIsZtoKVYzm0AflSPq/ymqJd56/Su1YPbwy9lM13wgHOFmQ==",
-      "requires": {
-        "prosemirror-state": "^1.0.0",
-        "prosemirror-transform": "^1.0.0"
-      }
-    },
     "prosemirror-keymap": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.0.tgz",
       "integrity": "sha512-TdSfu+YyLDd54ufN/ZeD1VtBRYpgZnTPnnbY+4R08DDgs84KrIPEPbJL8t1Lm2dkljFx6xeBE26YWH3aIzkPKg==",
+      "peer": true,
       "requires": {
         "prosemirror-state": "^1.0.0",
         "w3c-keyname": "^2.2.0"
@@ -21381,6 +21904,7 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/prosemirror-schema-list/-/prosemirror-schema-list-1.2.2.tgz",
       "integrity": "sha512-rd0pqSDp86p0MUMKG903g3I9VmElFkQpkZ2iOd3EOVg1vo5Cst51rAsoE+5IPy0LPXq64eGcCYlW1+JPNxOj2w==",
+      "peer": true,
       "requires": {
         "prosemirror-model": "^1.0.0",
         "prosemirror-state": "^1.0.0",
@@ -21397,18 +21921,6 @@
         "prosemirror-view": "^1.27.0"
       }
     },
-    "prosemirror-tables": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/prosemirror-tables/-/prosemirror-tables-1.3.2.tgz",
-      "integrity": "sha512-/9JTeN6s58Zq66HXaxP6uf8PAmc7XXKZFPlOGVtLvxEd6xBP6WtzaJB9wBjiGUzwbdhdMEy7V62yuHqk/3VrnQ==",
-      "requires": {
-        "prosemirror-keymap": "^1.1.2",
-        "prosemirror-model": "^1.8.1",
-        "prosemirror-state": "^1.3.1",
-        "prosemirror-transform": "^1.2.1",
-        "prosemirror-view": "^1.13.3"
-      }
-    },
     "prosemirror-transform": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.7.0.tgz",
@@ -21819,7 +22331,8 @@
     "rope-sequence": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rope-sequence/-/rope-sequence-1.3.3.tgz",
-      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q=="
+      "integrity": "sha512-85aZYCxweiD5J8yTEbw+E6A27zSnLPNDL0WfPdw3YYodq7WjnTKo0q4dtyQ2gz23iPT8Q9CUyJtAaUNcTxRf5Q==",
+      "peer": true
     },
     "run-parallel": {
       "version": "1.2.0",
@@ -22631,63 +23144,12 @@
       "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz",
       "integrity": "sha512-5gQXogvRKAhJChgQPSAXaXbrQVq+w2Ckl/5jeno5N9eMcYbz0docSS3n0YNywAyDQBsUFokmHzNM8yvX2+eLVg=="
     },
-    "tiptap": {
-      "version": "1.32.2",
-      "resolved": "https://registry.npmjs.org/tiptap/-/tiptap-1.32.2.tgz",
-      "integrity": "sha512-5IwVj8nGo8y5V3jbdtoEd7xNUsi8Q0N6WV2Nfs70olqz3fldXkiImBrDhZJ4Anx8vhyP6PIBttrg0prFVmwIvw==",
-      "requires": {
-        "prosemirror-commands": "^1.1.4",
-        "prosemirror-dropcursor": "^1.3.2",
-        "prosemirror-gapcursor": "^1.1.5",
-        "prosemirror-inputrules": "^1.1.3",
-        "prosemirror-keymap": "^1.1.4",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-view": "^1.16.5",
-        "tiptap-commands": "^1.17.1",
-        "tiptap-utils": "^1.13.1"
-      }
-    },
-    "tiptap-commands": {
-      "version": "1.17.1",
-      "resolved": "https://registry.npmjs.org/tiptap-commands/-/tiptap-commands-1.17.1.tgz",
-      "integrity": "sha512-CyGvMD/c6fNer5LThWGtrVMXHAqHn93ivGQpqJ58x3HNZFuoIiF9QTWXAiWbY/4QrG0ANYHKCSe9n5afickTqw==",
-      "requires": {
-        "prosemirror-commands": "^1.1.4",
-        "prosemirror-inputrules": "^1.1.2",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-schema-list": "^1.1.4",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1",
-        "tiptap-utils": "^1.13.1"
-      }
-    },
-    "tiptap-extensions": {
-      "version": "1.35.2",
-      "resolved": "https://registry.npmjs.org/tiptap-extensions/-/tiptap-extensions-1.35.2.tgz",
-      "integrity": "sha512-TIMbHVJe0/3aVeTeCmqGbatDkfxduPYFOffNCmuKR+h6oQNzTu6rLVhRzoNqktfxIoi/b44SiDPorTjSN72dCw==",
-      "requires": {
-        "lowlight": "^1.17.0",
-        "prosemirror-collab": "^1.2.2",
-        "prosemirror-history": "^1.1.3",
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1",
-        "prosemirror-transform": "^1.2.8",
-        "prosemirror-view": "^1.16.5",
-        "tiptap": "^1.32.2",
-        "tiptap-commands": "^1.17.1",
-        "tiptap-utils": "^1.13.1"
-      }
-    },
-    "tiptap-utils": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/tiptap-utils/-/tiptap-utils-1.13.1.tgz",
-      "integrity": "sha512-RoCvMfkdu7fp9u7nsRr1OgsYU8RFjoHKHEKpx075rJ9X0t+j5Vxah9n6QzTTr4yjvcavq22WO2flFacm36zYtA==",
-      "requires": {
-        "prosemirror-model": "^1.13.1",
-        "prosemirror-state": "^1.3.3",
-        "prosemirror-tables": "^1.1.1"
+    "tippy.js": {
+      "version": "6.3.7",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-6.3.7.tgz",
+      "integrity": "sha512-E1d3oP2emgJ9dRQZdf3Kkn0qJgI6ZLpyS5z6ZkY1DF3kaQaBsGZsndEpHwx+eC+tYM41HaSNvNtLx8tU57FzTQ==",
+      "requires": {
+        "@popperjs/core": "^2.9.0"
       }
     },
     "to-fast-properties": {
@@ -23091,6 +23553,7 @@
       "version": "2.7.14",
       "resolved": "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.14.tgz",
       "integrity": "sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==",
+      "dev": true,
       "requires": {
         "de-indent": "^1.0.2",
         "he": "^1.2.0"
@@ -23133,7 +23596,8 @@
     "w3c-keyname": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.6.tgz",
-      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg=="
+      "integrity": "sha512-f+fciywl1SJEniZHD6H+kUO8gOnwIr7f4ijKA6+ZvJFjeGi1r4PDLl53Ayud9O/rk64RqgoQine0feoeOU0kXg==",
+      "peer": true
     },
     "watchpack": {
       "version": "2.4.0",
diff --git a/package.json b/package.json
index a38443e1b..929c568a2 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,14 @@
   },
   "dependencies": {
     "@alpinejs/mask": "^3.10.0",
+    "@tiptap/extension-link": "^2.0.0-beta.209",
+    "@tiptap/extension-table": "^2.0.0-beta.209",
+    "@tiptap/extension-table-cell": "^2.0.0-beta.209",
+    "@tiptap/extension-table-header": "^2.0.0-beta.209",
+    "@tiptap/extension-table-row": "^2.0.0-beta.209",
+    "@tiptap/extension-underline": "^2.0.0-beta.209",
+    "@tiptap/starter-kit": "^2.0.0-beta.209",
+    "@tiptap/vue-2": "^2.0.0-beta.209",
     "alpinejs": "^3.10.0",
     "axios": "^0.21.2",
     "core-js": "^3.9.1",
@@ -26,8 +34,6 @@
     "quill": "^1.3.7",
     "smartcrop": "^2.0.3",
     "tinycolor2": "1.4.1",
-    "tiptap": "^1.27.1",
-    "tiptap-extensions": "^1.29.1",
     "truncate-utf8-bytes": "1.0.2",
     "vue": "^2.7.14",
     "vue-select": "^3.18.3",

From d515a525037dfbbc4abf0dacf3db4a93b0594d56 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Sat, 21 Jan 2023 08:08:36 +0100
Subject: [PATCH 06/15] Fix coding style.

---
 frontend/js/components/WysiwygTiptap.vue | 70 ++++++++++++------------
 1 file changed, 35 insertions(+), 35 deletions(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index d652174fc..df6e89350 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -178,7 +178,7 @@
 
 <script>
   import debounce from 'lodash/debounce'
-  import {Editor, EditorContent, getMarkAttributes, getMarkRange} from '@tiptap/vue-2'
+  import {Editor, EditorContent, getMarkAttributes} from '@tiptap/vue-2'
   import StarterKit from '@tiptap/starter-kit'
   import Underline from '@tiptap/extension-underline'
   import Table from '@tiptap/extension-table'
@@ -277,27 +277,27 @@
         editorHeight: 50,
         toolbarHeight: 52,
         toolbar: this.options.modules.toolbar
-            ? this.options.modules.toolbar
-                .reduce((obj, item) => {
-                  if (item.list) {
-                    obj[item.list] = true
-                    return obj
-                  } else if (typeof item === 'object') {
-                    return {
-                      ...obj,
-                      ...item
-                    }
-                  } else {
-                    obj[item] = true
-                    return obj
-                  }
-                }, {})
-            : {
-              bold: true,
-              italic: true,
-              underline: true,
-              link: true
-            },
+          ? this.options.modules.toolbar
+            .reduce((obj, item) => {
+              if (item.list) {
+                obj[item.list] = true
+                return obj
+              } else if (typeof item === 'object') {
+                return {
+                  ...obj,
+                  ...item
+                }
+              } else {
+                obj[item] = true
+                return obj
+              }
+            }, {})
+          : {
+            bold: true,
+            italic: true,
+            underline: true,
+            link: true
+          },
         headingOptions: [],
         focused: false,
         activeSource: false,
@@ -385,8 +385,8 @@
 
           while (!foundEnd && to < htmlLen) {
             foundEnd = to === htmlLen ||
-                doc.textBetween(to, to + 1) === '' ||
-                doc.textBetween(to, to + 1) === ' '
+              doc.textBetween(to, to + 1) === '' ||
+              doc.textBetween(to, to + 1) === ' '
             endPos = to
             to = to + 1
           }
@@ -398,7 +398,7 @@
         this.editor.commands.setTextSelection({from: startPos, to: endPos})
 
         this.linkWindow = {
-          newLink: newLink,
+          newLink,
           from: startPos ?? 0,
           to: endPos,
           textOriginal: this.editor.state.tr.doc.textBetween(startPos, endPos),
@@ -453,16 +453,16 @@
 
       Object.keys(this.toolbar).forEach(tool => {
         switch (tool) {
-            // case 'link': {
-            //   extensions.push(new Link({
-            //     HTMLAttributes: {
-            //       target: null,
-            //       rel: null
-            //     },
-            //     openOnClick: false
-            //   }))
-            //   break
-            // }
+          // case 'link': {
+          //   extensions.push(new Link({
+          //     HTMLAttributes: {
+          //       target: null,
+          //       rel: null
+          //     },
+          //     openOnClick: false
+          //   }))
+          //   break
+          // }
           case 'table': {
             extensions.push(Table.configure({
               resizable: false

From abb0ff22cdff08991fb51306eb7198957e2bd99d Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Sat, 21 Jan 2023 08:41:59 +0100
Subject: [PATCH 07/15] Set tiptap as default + allow all by default.

---
 .eslintrc.js                                  |   2 +-
 .../js/components/WysiwygMenuBarButton.vue    |   8 +
 frontend/js/components/WysiwygTiptap.vue      | 168 +++++-------------
 package-lock.json                             |  23 +++
 package.json                                  |   2 +
 src/Services/Forms/Fields/Wysiwyg.php         |  20 ++-
 .../icons/icons-wysiwyg-svg.blade.php         |   2 +-
 7 files changed, 97 insertions(+), 128 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 7169d5946..bcb366a06 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,7 +30,7 @@ module.exports = {
     'no-console':
       process.env.NODE_ENV === 'production'
         ? ['error', { allow: ['error'] }]
-        : 'off'
+        : 'warn'
   },
   overrides: [
     {
diff --git a/frontend/js/components/WysiwygMenuBarButton.vue b/frontend/js/components/WysiwygMenuBarButton.vue
index 067bf8192..9fb5b571e 100644
--- a/frontend/js/components/WysiwygMenuBarButton.vue
+++ b/frontend/js/components/WysiwygMenuBarButton.vue
@@ -1,6 +1,7 @@
 <template>
   <button class="wysiwyg__menubar-button"
           :class="{ 'is-active': isActive }"
+          :disabled="disabled"
           type="button"
           @click="handleClick">
     <span class="icon"
@@ -25,6 +26,10 @@
       isActive: {
         type: Boolean,
         default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
       }
     },
     methods: {
@@ -36,6 +41,9 @@
 </script>
 
 <style lang="scss">
+  .wysiwyg__menubar-button:disabled {
+    opacity: 10%;
+  }
   // This icon is not part of the sizes above.
   .icon--wysiwyg_hr,
   .icon--wysiwyg_hr svg {
diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index df6e89350..2a5343b87 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -21,6 +21,7 @@
 
             <template v-if="toolbar.header">
               <wysiwyg-menu-bar-btn icon="paragraph"
+                                    :disabled="editor.isActive('paragraph')"
                                     v-if="toolbar.header"
                                     :isActive="editor.isActive('paragraph')"
                                     @btn:click="editor.chain().focus().setParagraph().run()"/>
@@ -75,19 +76,26 @@
                                   @btn:click="editor.chain().focus().toggleBlockquote().run()"/>
 
             <wysiwyg-menu-bar-btn icon="code"
-                                  v-if="toolbar['code-block']"
+                                  v-if="toolbar.codeBlock"
                                   :isActive="editor.isActive('codeBlock')"
                                   @btn:click="editor.chain().focus().toggleCodeBlock().run()"/>
 
             <wysiwyg-menu-bar-btn icon="code"
-                                  v-if="toolbar['code']"
+                                  v-if="toolbar.code"
                                   :isActive="editor.isActive('code')"
                                   @btn:click="editor.chain().focus().setCode().run()"/>
 
-            <template v-if="toolbar.table">
-              <wysiwyg-menu-bar-btn icon="table"
-                                    @btn:click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"/>
+            <wysiwyg-menu-bar-btn icon="table"
+                                  @btn:click="editor.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()"/>
+            <wysiwyg-menu-bar-btn icon="undo"
+                                  :disabled="!editor.can().undo()"
+                                  @btn:click="editor.chain().focus().undo().run()"/>
+            <wysiwyg-menu-bar-btn icon="redo"
+                                  :disabled="!editor.can().redo()"
+                                  @btn:click="editor.chain().focus().redo().run()"/>
 
+            <template v-if="toolbar.table">
+              <br />
               <div class="wysiwyg__menubar-table-buttons"
                    v-if="editor.isActive('table')">
 
@@ -116,12 +124,6 @@
                                       @btn:click="editor.chain().focus().mergeCells().run()"/>
               </div>
             </template>
-            <wysiwyg-menu-bar-btn icon="undo"
-                                  :disabled="!editor.can().undo()"
-                                  @btn:click="editor.chain().focus().undo().run()"/>
-            <wysiwyg-menu-bar-btn icon="redo"
-                                  :disabled="!editor.can().redo()"
-                                  @btn:click="editor.chain().focus().redo().run()"/>
           </div>
           <div class="wysiwyg__contentWrapper" :class="{ 'wysiwyg__contentWrapper--limitHeight' : limitHeight }">
             <editor-content class="wysiwyg__content"
@@ -193,11 +195,8 @@
   import InputframeMixin from '@/mixins/inputFrame'
   import LocaleMixin from '@/mixins/locale'
   import {Link} from "@tiptap/extension-link";
-
-  // Todo: load highligth depending of needs
-  // import { loadScript } from '@/utils/loader'
-  //
-  // const HIGHLIGHT = '//cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.12.0/build/highlight.min.js'
+  import {Placeholder} from "@tiptap/extension-placeholder";
+  import {HardBreak} from "@tiptap/extension-hard-break";
 
   export default {
     name: 'A17Wysiwyg',
@@ -411,10 +410,12 @@
           this.$refs.link_window__link.focus()
         })
       },
-      removeLink() {
-        this.editor.commands.extendMarkRange('link')
-        console.log(this.editor.commands);
-        this.editor.commands.focus().removeLink();
+      removeLink () {
+        this.editor.chain()
+          .focus()
+          .extendMarkRange('link')
+          .unsetLink()
+          .run()
       },
       saveLink () {
         if (this.linkWindow.text !== this.linkWindow.textOriginal) {
@@ -438,31 +439,35 @@
       }
     },
     beforeMount () {
+      if (this.toolbar.header) {
+        this.headingOptions = this.toolbar.header.filter((header) => {
+          return (typeof header === 'number')
+        })
+      }
+
       const content = this.value || ''
       const extensions = [
-        // new HardBreak()
+        HardBreak
       ]
 
       if (this.placeholder && this.placeholder.length > 0) {
-        // extensions.push(new Placeholder({
-        //   emptyNodeClass: 'is-empty',
-        //   emptyNodeText: this.placeHolder,
-        //   showOnlyWhenEditable: true
-        // }))
+        extensions.push(Placeholder.configure({
+          emptyNodeClass: 'is-empty',
+          emptyNodeText: this.placeHolder,
+          showOnlyWhenEditable: true
+        }))
       }
 
       Object.keys(this.toolbar).forEach(tool => {
         switch (tool) {
-          // case 'link': {
-          //   extensions.push(new Link({
-          //     HTMLAttributes: {
-          //       target: null,
-          //       rel: null
-          //     },
-          //     openOnClick: false
-          //   }))
-          //   break
-          // }
+          case 'link': {
+            extensions.push(Link.configure({openOnClick: false}))
+            break;
+          }
+          case 'underline': {
+            extensions.push(Underline)
+            break;
+          }
           case 'table': {
             extensions.push(Table.configure({
               resizable: false
@@ -478,95 +483,10 @@
       extensions.push(StarterKit.configure({
         orderedList: this.toolbar.ordered ?? false,
         bulletList: this.toolbar.bullet ?? false,
-        listItem: this.toolbar.ordered || this.toolbar.bullet,
+        listItem: this.toolbar.ordered || this.toolbar.bullet || false,
+        code: this.toolbar.code ?? false,
+        codeBlock: this.toolbar.codeBlock ?? false,
       }))
-      extensions.push(Underline)
-      extensions.push(Link.configure({openOnClick: false}))
-
-      // const CustomLink = Link.extend({
-      //   addCommands() {
-      //     return {
-      //       openLinkWindow: () => ({state, chain, commands}) => {
-      //         const tr = state.tr
-      //         const { selection } = tr
-      //         const { empty, ranges } = selection
-      //
-      //         if (empty) {
-      //           const oldAttributes = getMarkAttributes(state, "link")
-      //           console.log("Oldattributes", oldAttributes);
-      //
-      //           this.openLinkWindow(oldAttributes)
-      //
-      //           tr.addMark("link", {href:"#"})
-      //         }
-      //         console.log(selection)
-      //       }
-      //       //   console.log(state)
-      //       //   chain()
-      //       //       .focus()
-      //       //       .extendMarkRange()
-      //       //       .first(() => [
-      //       //         ({commands}) => {
-      //       //           console.log('first')
-      //       //           commands.setMark("link", {href:"#"});
-      //       //           return false;
-      //       //         },
-      //       //         () => {
-      //       //           console.log('second')
-      //       //         }
-      //       //       ])
-      //       //       .command(({ tr, commands }) => {
-      //       //         console.log(commands)
-      //       //     // tr.selectParentNode()
-      //       //     var from = tr.selection.ranges[0].$from.pos;
-      //       //     var to = tr.selection.ranges[0].$to.pos;
-      //       //
-      //       //     let isEmptyStart = false;
-      //       //     let isEmptyEnd = false;
-      //       //
-      //       //     if (from === to) {
-      //       //       // If from and to are the same, the cursor is in a position and there is no selection.
-      //       //       // In that case we check if we are in a word.
-      //       //       if (from > 0) {
-      //       //         isEmptyStart = tr.doc.textBetween(from - 1, to) === ' ';
-      //       //         isEmptyEnd = tr.doc.textBetween(from, to +1) === ' ';
-      //       //       }
-      //       //
-      //       //       if (!isEmptyStart || !isEmptyEnd) {
-      //       //         commands.selectNodeBackward()
-      //       //       }
-      //       //     }
-      //       //
-      //       //     return true
-      //       //   }).command(({tr}) => {
-      //       //     const from = tr.selection.ranges[0].$from.pos;
-      //       //     const to = tr.selection.ranges[0].$to.pos;
-      //       //     console.log(from, to)
-      //       //     console.log(tr.doc.textBetween(from, to));
-      //       //   });
-      //       //   // return commands.setMark("link", {href:"#"});
-      //       // }
-      //     }
-      //   },
-      // })
-      //
-      // extensions.push(CustomLink.configure({ openOnClick: false }))
-
-      // const CustomExtension = Mark.create({
-      //   name: "link",
-      //   addCommands() {
-      //     return {
-      //       openLinkPopup: color => ({ chain }) => {
-      //         console.log(color)
-      //         return chain()
-      //           .setMark('textStyle', { color })
-      //           .run()
-      //       },
-      //     }
-      //   },
-      // })
-
-      // extensions.push(new CustomExtension());
 
       this.editor = new Editor({
         content,
diff --git a/package-lock.json b/package-lock.json
index e648e6cef..21ea23b81 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,7 +9,9 @@
       "version": "3.0.0-rc2",
       "dependencies": {
         "@alpinejs/mask": "^3.10.0",
+        "@tiptap/extension-hard-break": "^2.0.0-beta.209",
         "@tiptap/extension-link": "^2.0.0-beta.209",
+        "@tiptap/extension-placeholder": "^2.0.0-beta.209",
         "@tiptap/extension-table": "^2.0.0-beta.209",
         "@tiptap/extension-table-cell": "^2.0.0-beta.209",
         "@tiptap/extension-table-header": "^2.0.0-beta.209",
@@ -2437,6 +2439,21 @@
         "@tiptap/core": "^2.0.0-beta.193"
       }
     },
+    "node_modules/@tiptap/extension-placeholder": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.0.0-beta.209.tgz",
+      "integrity": "sha512-L94thCy0qECMP1mcDjvN7P2RtMT7cc1IB6FbB+C1gnDaPXlJbiZFGsnuyjcCfoVX1rFZXBb6Ud0aSG0VaXWQCQ==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/ueberdosis"
+      },
+      "peerDependencies": {
+        "@tiptap/core": "^2.0.0-beta.193",
+        "prosemirror-model": "^1.18.1",
+        "prosemirror-state": "^1.4.1",
+        "prosemirror-view": "^1.28.2"
+      }
+    },
     "node_modules/@tiptap/extension-strike": {
       "version": "2.0.0-beta.209",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.209.tgz",
@@ -15724,6 +15741,12 @@
       "integrity": "sha512-XkiguVbOX/KJwux2wdurvZRwG1UulpZ3Uhw7Yl59sLBf7YDw8H781EMgVvaLSWf3B1o27/yOyc+kiepW/Pp9Wg==",
       "requires": {}
     },
+    "@tiptap/extension-placeholder": {
+      "version": "2.0.0-beta.209",
+      "resolved": "https://registry.npmjs.org/@tiptap/extension-placeholder/-/extension-placeholder-2.0.0-beta.209.tgz",
+      "integrity": "sha512-L94thCy0qECMP1mcDjvN7P2RtMT7cc1IB6FbB+C1gnDaPXlJbiZFGsnuyjcCfoVX1rFZXBb6Ud0aSG0VaXWQCQ==",
+      "requires": {}
+    },
     "@tiptap/extension-strike": {
       "version": "2.0.0-beta.209",
       "resolved": "https://registry.npmjs.org/@tiptap/extension-strike/-/extension-strike-2.0.0-beta.209.tgz",
diff --git a/package.json b/package.json
index 929c568a2..23580d58b 100644
--- a/package.json
+++ b/package.json
@@ -14,7 +14,9 @@
   },
   "dependencies": {
     "@alpinejs/mask": "^3.10.0",
+    "@tiptap/extension-hard-break": "^2.0.0-beta.209",
     "@tiptap/extension-link": "^2.0.0-beta.209",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.209",
     "@tiptap/extension-table": "^2.0.0-beta.209",
     "@tiptap/extension-table-cell": "^2.0.0-beta.209",
     "@tiptap/extension-table-header": "^2.0.0-beta.209",
diff --git a/src/Services/Forms/Fields/Wysiwyg.php b/src/Services/Forms/Fields/Wysiwyg.php
index 53d362995..f03e16218 100644
--- a/src/Services/Forms/Fields/Wysiwyg.php
+++ b/src/Services/Forms/Fields/Wysiwyg.php
@@ -21,11 +21,27 @@ class Wysiwyg extends BaseFormField
 
     public bool $editSource = false;
 
-    public ?array $toolbarOptions = null;
+    public ?array $toolbarOptions = [
+        ['header' => [2, 3, 4, 5, 6, false]],
+        'bold',
+        'italic',
+        'underline',
+        'strike',
+        'blockquote',
+        "code-block",
+        'ordered',
+        'bullet',
+        ["align" => []],
+        ["direction" => "rtl"],
+        'code',
+        'link',
+        'clean',
+        'table'
+    ];
 
     public ?array $options = null;
 
-    public string $type = 'quill';
+    public string $type = 'tiptap';
 
     public bool $limitHeight = false;
 
diff --git a/views/partials/icons/icons-wysiwyg-svg.blade.php b/views/partials/icons/icons-wysiwyg-svg.blade.php
index 11abe4b0f..7e944023c 100644
--- a/views/partials/icons/icons-wysiwyg-svg.blade.php
+++ b/views/partials/icons/icons-wysiwyg-svg.blade.php
@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon--wysiwyg_add_col_after" viewBox="0 0 24 24"><title>wysiwyg_add_col_after</title><path fill="currentColor" d="M5 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875H6.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H2.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313H7.5ZM16 19a3 3 0 0 0 6 0V5a3 3 0 0 0-6 0v14Zm-2 0V5a5 5 0 0 1 10 0v14a5 5 0 0 1-10 0Z"/></symbol><symbol id="icon--wysiwyg_add_col_before" viewBox="0 0 24 24"><title>wysiwyg_add_col_before</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25ZM2 19a3 3 0 0 0 6 0V5a3 3 0 1 0-6 0v14Zm-2 0V5a5 5 0 1 1 10 0v14a5 5 0 0 1-10 0Z"/></symbol><symbol id="icon--wysiwyg_add_row_after" viewBox="0 0 24 24"><title>wysiwyg_add_row_after</title><path fill="currentColor" d="M19 0a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V2.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312V7.5a.937.937 0 1 0 1.875 0V6.25c0-.173.14-.313.312-.313h1.25ZM5 16a3 3 0 0 0 0 6h14a3 3 0 0 0 0-6H5Zm0-2h14a5 5 0 0 1 0 10H5a5 5 0 0 1 0-10Z"/></symbol><symbol id="icon--wysiwyg_add_row_before" viewBox="0 0 24 24"><title>wysiwyg_add_row_before</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25ZM5 2a3 3 0 1 0 0 6h14a3 3 0 0 0 0-6H5Zm0-2h14a5 5 0 0 1 0 10H5A5 5 0 1 1 5 0Z"/></symbol><symbol id="icon--wysiwyg_bold" viewBox="0 0 24 24"><title>text-bold</title><path fill="currentColor" d="M17.194 10.962A6.271 6.271 0 0 0 12.844.248H4.3a1.25 1.25 0 0 0 0 2.5h1.013a.25.25 0 0 1 .25.25V21a.25.25 0 0 1-.25.25H4.3a1.25 1.25 0 1 0 0 2.5h9.963a6.742 6.742 0 0 0 2.93-12.786Zm-4.35-8.214a3.762 3.762 0 0 1 0 7.523H8.313a.25.25 0 0 1-.25-.25V3a.25.25 0 0 1 .25-.25Zm1.42 18.5H8.313a.25.25 0 0 1-.25-.25v-7.977a.25.25 0 0 1 .25-.25h5.951a4.239 4.239 0 0 1 0 8.477Z"/></symbol><symbol id="icon--wysiwyg_checklist" viewBox="0 0 24 24"><title>checklist-alternate</title><path fill="currentColor" d="M21 0H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Zm1 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1Z"/><path fill="currentColor" d="M11.249 4.5a1.251 1.251 0 0 0-1.75.25L7.365 7.6l-.482-.481a1.25 1.25 0 0 0-1.767 1.764l1.5 1.5a1.262 1.262 0 0 0 1.884-.134l3-4a1.25 1.25 0 0 0-.251-1.749Zm0 9a1.251 1.251 0 0 0-1.75.25L7.365 16.6l-.482-.481a1.25 1.25 0 1 0-1.767 1.768l1.5 1.5a1.265 1.265 0 0 0 1.884-.138l3-4a1.25 1.25 0 0 0-.251-1.749ZM18.5 7.749H14a1.25 1.25 0 0 0 0 2.5h4.5a1.25 1.25 0 0 0 0-2.5Zm0 8H14a1.25 1.25 0 0 0 0 2.5h4.5a1.25 1.25 0 1 0 0-2.5Z"/></symbol><symbol id="icon--wysiwyg_code" viewBox="0 0 24 24"><title>angle-brackets</title><path fill="currentColor" d="M9.147 21.552a1.244 1.244 0 0 1-.895-.378L.84 13.561a2.257 2.257 0 0 1 0-3.125l7.412-7.613a1.25 1.25 0 0 1 1.791 1.744l-6.9 7.083a.5.5 0 0 0 0 .7l6.9 7.082a1.25 1.25 0 0 1-.9 2.122Zm5.707 0a1.25 1.25 0 0 1-.9-2.122l6.9-7.083a.5.5 0 0 0 0-.7l-6.9-7.082a1.25 1.25 0 0 1 1.791-1.744l7.411 7.612a2.257 2.257 0 0 1 0 3.125l-7.412 7.614a1.244 1.244 0 0 1-.89.38Zm6.514-9.373Z"/></symbol><symbol id="icon--wysiwyg_combine_cells" viewBox="0 0 24 24"><title>wysiwyg_combine_cells</title><path fill="currentColor" d="M2 19a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v14Zm-2 0V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5Zm12-9a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm0 6a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1Zm0-13a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V4a1 1 0 0 1 1-1Z"/></symbol><symbol id="icon--wysiwyg_delete_col" viewBox="0 0 24 24"><title>wysiwyg_delete_col</title><path fill="currentColor" d="M12.641 21.931a7.01 7.01 0 0 0 1.146 1.74A5 5 0 0 1 7 19V5a5 5 0 1 1 10 0v7.29a6.972 6.972 0 0 0-2 .965V5a3 3 0 0 0-6 0v14a3 3 0 0 0 3.641 2.931ZM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875Z"/></symbol><symbol id="icon--wysiwyg_delete_row" viewBox="0 0 24 24"><title>wysiwyg_delete_row</title><path fill="currentColor" d="M13.255 15a6.972 6.972 0 0 0-.965 2H5A5 5 0 0 1 5 7h14a5 5 0 0 1 4.671 6.787 7.01 7.01 0 0 0-1.74-1.146A3 3 0 0 0 19 9H5a3 3 0 0 0 0 6h8.255ZM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875Z"/></symbol><symbol id="icon--wysiwyg_delete_table" viewBox="0 0 24 24"><title>wysiwyg_delete_table</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875ZM12.29 17H9v5h3.674c.356.75.841 1.426 1.427 2H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354V14.1a7.018 7.018 0 0 0-2-1.427V9h-5v3.29a6.972 6.972 0 0 0-2 .965V9H9v6h4.255a6.972 6.972 0 0 0-.965 2ZM17 7h5V5a3 3 0 0 0-3-3h-2v5Zm-2 0V2H9v5h6ZM7 2H5a3 3 0 0 0-3 3v2h5V2ZM2 9v6h5V9H2Zm0 8v2a3 3 0 0 0 3 3h2v-5H2Z"/></symbol><symbol id="icon--wysiwyg_github" viewBox="0 0 24 24"><title>wysiwyg_github</title><path fill="currentColor" d="M11.999.5C5.649.5.5 5.648.5 12c0 5.082 3.294 9.392 7.865 10.914.574.103.756-.236.756-.541 0-.274.006-1.037 0-1.997-3.198.694-3.861-1.515-3.861-1.515-.523-1.329-1.275-1.682-1.275-1.682-1.045-.714.077-.699.077-.699 1.153.08 1.762 1.184 1.762 1.184 1.026 1.758 2.691 1.25 3.346.956.106-.742.402-1.251.731-1.536-2.554-.292-5.238-1.277-5.238-5.686 0-1.255.448-2.281 1.184-3.086-.118-.289-.514-1.46.112-3.043 0 0 .967-.309 3.162 1.18a11.011 11.011 0 0 1 2.88-.388c.976.005 1.96.132 2.88.388 2.195-1.488 3.159-1.18 3.159-1.18.627 1.583.232 2.754.114 3.043.736.805 1.183 1.831 1.183 3.086 0 4.42-2.689 5.391-5.251 5.674.412.357.787 1.047.787 2.12v3.184c0 .308.186.647.77.536C20.209 21.389 23.5 17.08 23.5 12 23.5 5.648 18.352.5 11.999.5Z"/></symbol><symbol id="icon--wysiwyg_hr" viewBox="0 0 24 24"><title>wysiwyg_hr</title><path fill="currentColor" d="M5 13a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H5Z"/></symbol><symbol id="icon--wysiwyg_image" viewBox="0 0 24 24"><title>paginate-filter-picture-alternate</title><circle fill="currentColor" cx="9.75" cy="6.247" r="2.25"/><path fill="currentColor" d="M16.916 8.71A1.027 1.027 0 0 0 16 8.158a1.007 1.007 0 0 0-.892.586l-1.558 3.434a.249.249 0 0 1-.422.053l-.82-1.024a1 1 0 0 0-.813-.376 1.007 1.007 0 0 0-.787.426L7.59 15.71a.5.5 0 0 0 .41.79h12a.5.5 0 0 0 .425-.237.5.5 0 0 0 .022-.486Z"/><path fill="currentColor" d="M22 0H5.5a2 2 0 0 0-2 2v16.5a2 2 0 0 0 2 2H22a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-.145 18.354a.5.5 0 0 1-.354.146H6a.5.5 0 0 1-.5-.5V2.5A.5.5 0 0 1 6 2h15.5a.5.5 0 0 1 .5.5V18a.5.5 0 0 1-.145.351Z"/><path fill="currentColor" d="M19.5 22h-17a.5.5 0 0 1-.5-.5v-17a1 1 0 0 0-2 0V22a2 2 0 0 0 2 2h17.5a1 1 0 0 0 0-2Z"/></symbol><symbol id="icon--wysiwyg_italic" viewBox="0 0 24 24"><title>text-italic</title><path fill="currentColor" d="M22.5.248h-7.637a1.25 1.25 0 0 0 0 2.5h1.086a.25.25 0 0 1 .211.384L4.78 21.017a.5.5 0 0 1-.422.231H1.5a1.25 1.25 0 0 0 0 2.5h7.637a1.25 1.25 0 0 0 0-2.5H8.051a.25.25 0 0 1-.211-.384L19.22 2.98a.5.5 0 0 1 .422-.232H22.5a1.25 1.25 0 0 0 0-2.5Z"/></symbol><symbol id="icon--wysiwyg_link" viewBox="0 0 24 24"><title>hyperlink-2</title><path fill="currentColor" d="M12.406 14.905a1 1 0 0 0-.543 1.307 1 1 0 0 1-.217 1.09l-2.828 2.829a2 2 0 0 1-2.828 0L3.868 18.01a2 2 0 0 1 0-2.829L6.7 12.353a1.013 1.013 0 0 1 1.091-.217 1 1 0 0 0 .763-1.849 3.034 3.034 0 0 0-3.268.652l-2.832 2.828a4.006 4.006 0 0 0 0 5.657l2.122 2.121a4 4 0 0 0 5.656 0l2.829-2.828a3.008 3.008 0 0 0 .651-3.27 1 1 0 0 0-1.306-.542Z"/><path fill="currentColor" d="M7.757 16.241a1.011 1.011 0 0 0 1.414 0l7.779-7.778a1 1 0 0 0-1.414-1.414l-7.779 7.778a1 1 0 0 0 0 1.414Z"/><path fill="currentColor" d="m21.546 4.574-2.121-2.121a4.006 4.006 0 0 0-5.657 0l-2.829 2.828a3.006 3.006 0 0 0-.651 3.269 1 1 0 1 0 1.849-.764 1 1 0 0 1 .217-1.086l2.828-2.828a2 2 0 0 1 2.829 0l2.121 2.121a2 2 0 0 1 0 2.829L17.3 11.645a1.015 1.015 0 0 1-1.091.217 1 1 0 0 0-.765 1.849 3.026 3.026 0 0 0 3.27-.651l2.828-2.828a4.007 4.007 0 0 0 .004-5.658Z"/></symbol><symbol id="icon--wysiwyg_mention" viewBox="0 0 24 24"><title>read-email-at-alternate</title><path fill="currentColor" d="M12 .5A11.634 11.634 0 0 0 .262 12 11.634 11.634 0 0 0 12 23.5a11.836 11.836 0 0 0 6.624-2 1.25 1.25 0 1 0-1.393-2.076A9.34 9.34 0 0 1 12 21a9.132 9.132 0 0 1-9.238-9A9.132 9.132 0 0 1 12 3a9.132 9.132 0 0 1 9.238 9v.891a1.943 1.943 0 0 1-3.884 0V12A5.355 5.355 0 1 0 12 17.261a5.376 5.376 0 0 0 3.861-1.634 4.438 4.438 0 0 0 7.877-2.736V12A11.634 11.634 0 0 0 12 .5Zm0 14.261A2.763 2.763 0 1 1 14.854 12 2.812 2.812 0 0 1 12 14.761Z"/></symbol><symbol id="icon--wysiwyg_ol" viewBox="0 0 24 24"><title>list-numbers</title><path fill="currentColor" d="M7.75 4.5h15a1 1 0 0 0 0-2h-15a1 1 0 0 0 0 2Zm15 6.5h-15a1 1 0 1 0 0 2h15a1 1 0 0 0 0-2Zm0 8.5h-15a1 1 0 0 0 0 2h15a1 1 0 0 0 0-2ZM2.212 17.248a2 2 0 0 0-1.933 1.484.75.75 0 1 0 1.45.386.5.5 0 1 1 .483.63.75.75 0 1 0 0 1.5.5.5 0 1 1-.482.635.75.75 0 1 0-1.445.4 2 2 0 1 0 3.589-1.648.251.251 0 0 1 0-.278 2 2 0 0 0-1.662-3.111Zm2.038-6.5a2 2 0 0 0-4 0 .75.75 0 0 0 1.5 0 .5.5 0 0 1 1 0 1.031 1.031 0 0 1-.227.645L.414 14.029A.75.75 0 0 0 1 15.248h2.5a.75.75 0 0 0 0-1.5h-.419a.249.249 0 0 1-.195-.406L3.7 12.33a2.544 2.544 0 0 0 .55-1.582ZM4 5.248h-.25A.25.25 0 0 1 3.5 5V1.623A1.377 1.377 0 0 0 2.125.248H1.5a.75.75 0 0 0 0 1.5h.25A.25.25 0 0 1 2 2v3a.25.25 0 0 1-.25.25H1.5a.75.75 0 0 0 0 1.5H4a.75.75 0 0 0 0-1.5Z"/></symbol><symbol id="icon--wysiwyg_paragraph" viewBox="0 0 24 24"><title>paragraph</title><path fill="currentColor" d="M22.5.248H7.228a6.977 6.977 0 1 0 0 13.954h2.318a.25.25 0 0 1 .25.25V22.5a1.25 1.25 0 0 0 2.5 0V3a.25.25 0 0 1 .25-.25h3.682a.25.25 0 0 1 .25.25v19.5a1.25 1.25 0 0 0 2.5 0V3a.249.249 0 0 1 .25-.25H22.5a1.25 1.25 0 0 0 0-2.5ZM9.8 11.452a.25.25 0 0 1-.25.25H7.228a4.477 4.477 0 1 1 0-8.954h2.318A.25.25 0 0 1 9.8 3Z"/></symbol><symbol id="icon--wysiwyg_quote" viewBox="0 0 24 24"><title>close-quote</title><path fill="currentColor" d="M18.559 3.932a4.942 4.942 0 1 0 0 9.883 4.609 4.609 0 0 0 1.115-.141.25.25 0 0 1 .276.368 6.83 6.83 0 0 1-5.878 3.523 1.25 1.25 0 0 0 0 2.5 9.71 9.71 0 0 0 9.428-9.95V8.873a4.947 4.947 0 0 0-4.941-4.941Zm-12.323 0a4.942 4.942 0 0 0 0 9.883 4.6 4.6 0 0 0 1.115-.141.25.25 0 0 1 .277.368 6.83 6.83 0 0 1-5.878 3.523 1.25 1.25 0 0 0 0 2.5 9.711 9.711 0 0 0 9.428-9.95V8.873a4.947 4.947 0 0 0-4.942-4.941Z"/></symbol><symbol id="icon--wysiwyg_redo" viewBox="0 0 24 24"><title>redo</title><path fill="currentColor" d="M22.608.161a.5.5 0 0 0-.545.108L19.472 2.86a.25.25 0 0 1-.292.045 12.537 12.537 0 0 0-12.966.865A12.259 12.259 0 0 0 6.1 23.632a1.25 1.25 0 0 0 1.476-2.018 9.759 9.759 0 0 1 .091-15.809 10 10 0 0 1 9.466-1.1.25.25 0 0 1 .084.409l-1.85 1.85a.5.5 0 0 0 .354.853h6.7a.5.5 0 0 0 .5-.5V.623a.5.5 0 0 0-.313-.462Z"/></symbol><symbol id="icon--wysiwyg_remove" viewBox="0 0 24 24"><title>delete-2-alternate</title><path fill="currentColor" d="M20.485 3.511A12.01 12.01 0 1 0 24 12a12.009 12.009 0 0 0-3.515-8.489Zm-1.767 15.21A9.51 9.51 0 1 1 21.5 12a9.508 9.508 0 0 1-2.782 6.721Z"/><path fill="currentColor" d="M16.987 7.01a1.275 1.275 0 0 0-1.8 0l-3.177 3.177L8.829 7.01a1.277 1.277 0 0 0-1.805 1.806l3.176 3.177-3.176 3.178a1.277 1.277 0 0 0 1.805 1.806l3.176-3.177 3.177 3.178a1.277 1.277 0 0 0 1.8-1.806l-3.176-3.178 3.176-3.177a1.278 1.278 0 0 0 .005-1.807Z"/></symbol><symbol id="icon--wysiwyg_strike" viewBox="0 0 24 24"><title>text-strike-through</title><path fill="currentColor" d="M23.75 12.952A1.25 1.25 0 0 0 22.5 11.7h-8.936a.492.492 0 0 1-.282-.09c-.722-.513-1.482-.981-2.218-1.432-2.8-1.715-4.5-2.9-4.5-4.863 0-2.235 2.207-2.569 3.523-2.569a4.54 4.54 0 0 1 3.081.764 2.662 2.662 0 0 1 .447 1.99v.3a1.25 1.25 0 1 0 2.5 0v-.268a4.887 4.887 0 0 0-1.165-3.777C13.949.741 12.359.248 10.091.248c-3.658 0-6.023 1.989-6.023 5.069 0 2.773 1.892 4.512 4 5.927a.25.25 0 0 1-.139.458H1.5a1.25 1.25 0 0 0 0 2.5h10.977a.251.251 0 0 1 .159.058 4.339 4.339 0 0 1 1.932 3.466c0 3.268-3.426 3.522-4.477 3.522-1.814 0-3.139-.405-3.834-1.173a3.394 3.394 0 0 1-.65-2.7 1.25 1.25 0 0 0-2.488-.246A5.76 5.76 0 0 0 4.4 21.753c1.2 1.324 3.114 2 5.688 2 4.174 0 6.977-2.42 6.977-6.022a6.059 6.059 0 0 0-.849-3.147.25.25 0 0 1 .216-.377H22.5a1.25 1.25 0 0 0 1.25-1.255Z"/></symbol><symbol id="icon--wysiwyg_table" viewBox="0 0 24 24"><title>wysiwyg_table</title><path fill-rule="evenodd" fill="currentColor" d="M17 17v5h2a3 3 0 0 0 3-3v-2h-5Zm-2 0H9v5h6v-5Zm2-2h5V9h-5v6Zm-2 0V9H9v6h6Zm2-8h5V5a3 3 0 0 0-3-3h-2v5Zm-2 0V2H9v5h6Zm9 9.177V19a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354v7.646a.843.843 0 0 1 0 .354ZM7 2H5a3 3 0 0 0-3 3v2h5V2ZM2 9v6h5V9H2Zm0 8v2a3 3 0 0 0 3 3h2v-5H2Z"/></symbol><symbol id="icon--wysiwyg_ul" viewBox="0 0 24 24"><title>list-bullets</title><circle fill="currentColor" cx="2.5" cy="3.998" r="2.5"/><circle fill="currentColor" cx="2.5" cy="11.998" r="2.5"/><circle fill="currentColor" cx="2.5" cy="19.998" r="2.5"/><path fill="currentColor" d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2ZM23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Zm0 8H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z"/></symbol><symbol id="icon--wysiwyg_underline" viewBox="0 0 24 24"><title>text-underline</title><path fill="currentColor" d="M22.5 21.248h-21a1.25 1.25 0 0 0 0 2.5h21a1.25 1.25 0 0 0 0-2.5ZM1.978 2.748h1.363a.25.25 0 0 1 .25.25v8.523a8.409 8.409 0 0 0 16.818 0V3a.25.25 0 0 1 .25-.25h1.363a1.25 1.25 0 0 0 0-2.5H16.3a1.25 1.25 0 0 0 0 2.5h1.363a.25.25 0 0 1 .25.25v8.523a5.909 5.909 0 0 1-11.818 0V3a.25.25 0 0 1 .25-.25H7.7a1.25 1.25 0 1 0 0-2.5H1.978a1.25 1.25 0 0 0 0 2.5Z"/></symbol><symbol id="icon--wysiwyg_undo" viewBox="0 0 24 24"><title>undo</title><path fill="currentColor" d="M17.786 3.77a12.542 12.542 0 0 0-12.965-.865.249.249 0 0 1-.292-.045L1.937.269A.507.507 0 0 0 1.392.16a.5.5 0 0 0-.308.462v6.7a.5.5 0 0 0 .5.5h6.7a.5.5 0 0 0 .354-.854L6.783 5.115a.253.253 0 0 1-.068-.228.249.249 0 0 1 .152-.181 10 10 0 0 1 9.466 1.1 9.759 9.759 0 0 1 .094 15.809 1.25 1.25 0 0 0 1.473 2.016 12.122 12.122 0 0 0 5.013-9.961 12.125 12.125 0 0 0-5.127-9.9Z"/></symbol></svg>
\ No newline at end of file
+<svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon--wysiwyg_add_col_after" viewBox="0 0 24 24"><title>wysiwyg_add_col_after</title><path fill="currentColor" d="M5 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875H6.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H2.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313H7.5ZM16 19a3 3 0 0 0 6 0V5a3 3 0 0 0-6 0v14Zm-2 0V5a5 5 0 0 1 10 0v14a5 5 0 0 1-10 0Z"/></symbol><symbol id="icon--wysiwyg_add_col_before" viewBox="0 0 24 24"><title>wysiwyg_add_col_before</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25ZM2 19a3 3 0 0 0 6 0V5a3 3 0 1 0-6 0v14Zm-2 0V5a5 5 0 1 1 10 0v14a5 5 0 0 1-10 0Z"/></symbol><symbol id="icon--wysiwyg_add_row_after" viewBox="0 0 24 24"><title>wysiwyg_add_row_after</title><path fill="currentColor" d="M19 0a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V2.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312V7.5a.937.937 0 1 0 1.875 0V6.25c0-.173.14-.313.312-.313h1.25ZM5 16a3 3 0 0 0 0 6h14a3 3 0 0 0 0-6H5Zm0-2h14a5 5 0 0 1 0 10H5a5 5 0 0 1 0-10Z"/></symbol><symbol id="icon--wysiwyg_add_row_before" viewBox="0 0 24 24"><title>wysiwyg_add_row_before</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm2.5 5.938a.937.937 0 1 0 0-1.875h-1.25a.312.312 0 0 1-.313-.313V16.5a.937.937 0 1 0-1.875 0v1.25c0 .173-.14.313-.312.313H16.5a.937.937 0 1 0 0 1.875h1.25c.173 0 .313.14.313.312v1.25a.937.937 0 1 0 1.875 0v-1.25c0-.173.14-.313.312-.313h1.25ZM5 2a3 3 0 1 0 0 6h14a3 3 0 0 0 0-6H5Zm0-2h14a5 5 0 0 1 0 10H5A5 5 0 1 1 5 0Z"/></symbol><symbol id="icon--wysiwyg_bold" viewBox="0 0 24 24"><title>text-bold</title><path fill="currentColor" d="M17.194 10.962A6.271 6.271 0 0 0 12.844.248H4.3a1.25 1.25 0 0 0 0 2.5h1.013a.25.25 0 0 1 .25.25V21a.25.25 0 0 1-.25.25H4.3a1.25 1.25 0 1 0 0 2.5h9.963a6.742 6.742 0 0 0 2.93-12.786Zm-4.35-8.214a3.762 3.762 0 0 1 0 7.523H8.313a.25.25 0 0 1-.25-.25V3a.25.25 0 0 1 .25-.25Zm1.42 18.5H8.313a.25.25 0 0 1-.25-.25v-7.977a.25.25 0 0 1 .25-.25h5.951a4.239 4.239 0 0 1 0 8.477Z"/></symbol><symbol id="icon--wysiwyg_checklist" viewBox="0 0 24 24"><title>checklist-alternate</title><path fill="currentColor" d="M21 0H3a3 3 0 0 0-3 3v18a3 3 0 0 0 3 3h18a3 3 0 0 0 3-3V3a3 3 0 0 0-3-3Zm1 21a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1Z"/><path fill="currentColor" d="M11.249 4.5a1.251 1.251 0 0 0-1.75.25L7.365 7.6l-.482-.481a1.25 1.25 0 0 0-1.767 1.764l1.5 1.5a1.262 1.262 0 0 0 1.884-.134l3-4a1.25 1.25 0 0 0-.251-1.749Zm0 9a1.251 1.251 0 0 0-1.75.25L7.365 16.6l-.482-.481a1.25 1.25 0 1 0-1.767 1.768l1.5 1.5a1.265 1.265 0 0 0 1.884-.138l3-4a1.25 1.25 0 0 0-.251-1.749ZM18.5 7.749H14a1.25 1.25 0 0 0 0 2.5h4.5a1.25 1.25 0 0 0 0-2.5Zm0 8H14a1.25 1.25 0 0 0 0 2.5h4.5a1.25 1.25 0 1 0 0-2.5Z"/></symbol><symbol id="icon--wysiwyg_code" viewBox="0 0 24 24"><title>angle-brackets</title><path fill="currentColor" d="M9.147 21.552a1.244 1.244 0 0 1-.895-.378L.84 13.561a2.257 2.257 0 0 1 0-3.125l7.412-7.613a1.25 1.25 0 0 1 1.791 1.744l-6.9 7.083a.5.5 0 0 0 0 .7l6.9 7.082a1.25 1.25 0 0 1-.9 2.122Zm5.707 0a1.25 1.25 0 0 1-.9-2.122l6.9-7.083a.5.5 0 0 0 0-.7l-6.9-7.082a1.25 1.25 0 0 1 1.791-1.744l7.411 7.612a2.257 2.257 0 0 1 0 3.125l-7.412 7.614a1.244 1.244 0 0 1-.89.38Zm6.514-9.373Z"/></symbol><symbol id="icon--wysiwyg_combine_cells" viewBox="0 0 24 24"><title>wysiwyg_combine_cells</title><path fill="currentColor" d="M2 19a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V5a3 3 0 0 0-3-3H5a3 3 0 0 0-3 3v14Zm-2 0V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v14a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5Zm12-9a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1Zm0 6a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1Zm0-13a1 1 0 0 1 1 1v3a1 1 0 0 1-2 0V4a1 1 0 0 1 1-1Z"/></symbol><symbol id="icon--wysiwyg_delete_col" viewBox="0 0 24 24"><title>wysiwyg_delete_col</title><path fill="currentColor" d="M12.641 21.931a7.01 7.01 0 0 0 1.146 1.74A5 5 0 0 1 7 19V5a5 5 0 1 1 10 0v7.29a6.972 6.972 0 0 0-2 .965V5a3 3 0 0 0-6 0v14a3 3 0 0 0 3.641 2.931ZM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875Z"/></symbol><symbol id="icon--wysiwyg_delete_row" viewBox="0 0 24 24"><title>wysiwyg_delete_row</title><path fill="currentColor" d="M13.255 15a6.972 6.972 0 0 0-.965 2H5A5 5 0 0 1 5 7h14a5 5 0 0 1 4.671 6.787 7.01 7.01 0 0 0-1.74-1.146A3 3 0 0 0 19 9H5a3 3 0 0 0 0 6h8.255ZM19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875Z"/></symbol><symbol id="icon--wysiwyg_delete_table" viewBox="0 0 24 24"><title>wysiwyg_delete_table</title><path fill="currentColor" d="M19 14a5 5 0 1 1 0 10 5 5 0 0 1 0-10Zm-2.5 5.938h5a.937.937 0 1 0 0-1.875h-5a.937.937 0 1 0 0 1.875ZM12.29 17H9v5h3.674c.356.75.841 1.426 1.427 2H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354V14.1a7.018 7.018 0 0 0-2-1.427V9h-5v3.29a6.972 6.972 0 0 0-2 .965V9H9v6h4.255a6.972 6.972 0 0 0-.965 2ZM17 7h5V5a3 3 0 0 0-3-3h-2v5Zm-2 0V2H9v5h6ZM7 2H5a3 3 0 0 0-3 3v2h5V2ZM2 9v6h5V9H2Zm0 8v2a3 3 0 0 0 3 3h2v-5H2Z"/></symbol><symbol id="icon--wysiwyg_github" viewBox="0 0 24 24"><title>wysiwyg_github</title><path fill="currentColor" d="M11.999.5C5.649.5.5 5.648.5 12c0 5.082 3.294 9.392 7.865 10.914.574.103.756-.236.756-.541 0-.274.006-1.037 0-1.997-3.198.694-3.861-1.515-3.861-1.515-.523-1.329-1.275-1.682-1.275-1.682-1.045-.714.077-.699.077-.699 1.153.08 1.762 1.184 1.762 1.184 1.026 1.758 2.691 1.25 3.346.956.106-.742.402-1.251.731-1.536-2.554-.292-5.238-1.277-5.238-5.686 0-1.255.448-2.281 1.184-3.086-.118-.289-.514-1.46.112-3.043 0 0 .967-.309 3.162 1.18a11.011 11.011 0 0 1 2.88-.388c.976.005 1.96.132 2.88.388 2.195-1.488 3.159-1.18 3.159-1.18.627 1.583.232 2.754.114 3.043.736.805 1.183 1.831 1.183 3.086 0 4.42-2.689 5.391-5.251 5.674.412.357.787 1.047.787 2.12v3.184c0 .308.186.647.77.536C20.209 21.389 23.5 17.08 23.5 12 23.5 5.648 18.352.5 11.999.5Z"/></symbol><symbol id="icon--wysiwyg_hr" viewBox="0 0 24 24"><title>wysiwyg_hr</title><path fill="currentColor" d="M5 13a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2H5Z"/></symbol><symbol id="icon--wysiwyg_image" viewBox="0 0 24 24"><title>paginate-filter-picture-alternate</title><circle fill="currentColor" cx="9.75" cy="6.247" r="2.25"/><path fill="currentColor" d="M16.916 8.71A1.027 1.027 0 0 0 16 8.158a1.007 1.007 0 0 0-.892.586l-1.558 3.434a.249.249 0 0 1-.422.053l-.82-1.024a1 1 0 0 0-.813-.376 1.007 1.007 0 0 0-.787.426L7.59 15.71a.5.5 0 0 0 .41.79h12a.5.5 0 0 0 .425-.237.5.5 0 0 0 .022-.486Z"/><path fill="currentColor" d="M22 0H5.5a2 2 0 0 0-2 2v16.5a2 2 0 0 0 2 2H22a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2Zm-.145 18.354a.5.5 0 0 1-.354.146H6a.5.5 0 0 1-.5-.5V2.5A.5.5 0 0 1 6 2h15.5a.5.5 0 0 1 .5.5V18a.5.5 0 0 1-.145.351Z"/><path fill="currentColor" d="M19.5 22h-17a.5.5 0 0 1-.5-.5v-17a1 1 0 0 0-2 0V22a2 2 0 0 0 2 2h17.5a1 1 0 0 0 0-2Z"/></symbol><symbol id="icon--wysiwyg_italic" viewBox="0 0 24 24"><title>text-italic</title><path fill="currentColor" d="M22.5.248h-7.637a1.25 1.25 0 0 0 0 2.5h1.086a.25.25 0 0 1 .211.384L4.78 21.017a.5.5 0 0 1-.422.231H1.5a1.25 1.25 0 0 0 0 2.5h7.637a1.25 1.25 0 0 0 0-2.5H8.051a.25.25 0 0 1-.211-.384L19.22 2.98a.5.5 0 0 1 .422-.232H22.5a1.25 1.25 0 0 0 0-2.5Z"/></symbol><symbol id="icon--wysiwyg_link" viewBox="0 0 24 24"><title>hyperlink-2</title><path fill="currentColor" d="M12.406 14.905a1 1 0 0 0-.543 1.307 1 1 0 0 1-.217 1.09l-2.828 2.829a2 2 0 0 1-2.828 0L3.868 18.01a2 2 0 0 1 0-2.829L6.7 12.353a1.013 1.013 0 0 1 1.091-.217 1 1 0 0 0 .763-1.849 3.034 3.034 0 0 0-3.268.652l-2.832 2.828a4.006 4.006 0 0 0 0 5.657l2.122 2.121a4 4 0 0 0 5.656 0l2.829-2.828a3.008 3.008 0 0 0 .651-3.27 1 1 0 0 0-1.306-.542Z"/><path fill="currentColor" d="M7.757 16.241a1.011 1.011 0 0 0 1.414 0l7.779-7.778a1 1 0 0 0-1.414-1.414l-7.779 7.778a1 1 0 0 0 0 1.414Z"/><path fill="currentColor" d="m21.546 4.574-2.121-2.121a4.006 4.006 0 0 0-5.657 0l-2.829 2.828a3.006 3.006 0 0 0-.651 3.269 1 1 0 1 0 1.849-.764 1 1 0 0 1 .217-1.086l2.828-2.828a2 2 0 0 1 2.829 0l2.121 2.121a2 2 0 0 1 0 2.829L17.3 11.645a1.015 1.015 0 0 1-1.091.217 1 1 0 0 0-.765 1.849 3.026 3.026 0 0 0 3.27-.651l2.828-2.828a4.007 4.007 0 0 0 .004-5.658Z"/></symbol><symbol id="icon--wysiwyg_mention" viewBox="0 0 24 24"><title>read-email-at-alternate</title><path fill="currentColor" d="M12 .5A11.634 11.634 0 0 0 .262 12 11.634 11.634 0 0 0 12 23.5a11.836 11.836 0 0 0 6.624-2 1.25 1.25 0 1 0-1.393-2.076A9.34 9.34 0 0 1 12 21a9.132 9.132 0 0 1-9.238-9A9.132 9.132 0 0 1 12 3a9.132 9.132 0 0 1 9.238 9v.891a1.943 1.943 0 0 1-3.884 0V12A5.355 5.355 0 1 0 12 17.261a5.376 5.376 0 0 0 3.861-1.634 4.438 4.438 0 0 0 7.877-2.736V12A11.634 11.634 0 0 0 12 .5Zm0 14.261A2.763 2.763 0 1 1 14.854 12 2.812 2.812 0 0 1 12 14.761Z"/></symbol><symbol id="icon--wysiwyg_ol" viewBox="0 0 24 24"><title>list-numbers</title><path fill="currentColor" d="M7.75 4.5h15a1 1 0 0 0 0-2h-15a1 1 0 0 0 0 2Zm15 6.5h-15a1 1 0 1 0 0 2h15a1 1 0 0 0 0-2Zm0 8.5h-15a1 1 0 0 0 0 2h15a1 1 0 0 0 0-2ZM2.212 17.248a2 2 0 0 0-1.933 1.484.75.75 0 1 0 1.45.386.5.5 0 1 1 .483.63.75.75 0 1 0 0 1.5.5.5 0 1 1-.482.635.75.75 0 1 0-1.445.4 2 2 0 1 0 3.589-1.648.251.251 0 0 1 0-.278 2 2 0 0 0-1.662-3.111Zm2.038-6.5a2 2 0 0 0-4 0 .75.75 0 0 0 1.5 0 .5.5 0 0 1 1 0 1.031 1.031 0 0 1-.227.645L.414 14.029A.75.75 0 0 0 1 15.248h2.5a.75.75 0 0 0 0-1.5h-.419a.249.249 0 0 1-.195-.406L3.7 12.33a2.544 2.544 0 0 0 .55-1.582ZM4 5.248h-.25A.25.25 0 0 1 3.5 5V1.623A1.377 1.377 0 0 0 2.125.248H1.5a.75.75 0 0 0 0 1.5h.25A.25.25 0 0 1 2 2v3a.25.25 0 0 1-.25.25H1.5a.75.75 0 0 0 0 1.5H4a.75.75 0 0 0 0-1.5Z"/></symbol><symbol id="icon--wysiwyg_paragraph" viewBox="0 0 24 24"><title>paragraph</title><path fill="currentColor" d="M22.5.248H7.228a6.977 6.977 0 1 0 0 13.954h2.318a.25.25 0 0 1 .25.25V22.5a1.25 1.25 0 0 0 2.5 0V3a.25.25 0 0 1 .25-.25h3.682a.25.25 0 0 1 .25.25v19.5a1.25 1.25 0 0 0 2.5 0V3a.249.249 0 0 1 .25-.25H22.5a1.25 1.25 0 0 0 0-2.5ZM9.8 11.452a.25.25 0 0 1-.25.25H7.228a4.477 4.477 0 1 1 0-8.954h2.318A.25.25 0 0 1 9.8 3Z"/></symbol><symbol id="icon--wysiwyg_quote" viewBox="0 0 24 24"><title>close-quote</title><path fill="currentColor" d="M18.559 3.932a4.942 4.942 0 1 0 0 9.883 4.609 4.609 0 0 0 1.115-.141.25.25 0 0 1 .276.368 6.83 6.83 0 0 1-5.878 3.523 1.25 1.25 0 0 0 0 2.5 9.71 9.71 0 0 0 9.428-9.95V8.873a4.947 4.947 0 0 0-4.941-4.941Zm-12.323 0a4.942 4.942 0 0 0 0 9.883 4.6 4.6 0 0 0 1.115-.141.25.25 0 0 1 .277.368 6.83 6.83 0 0 1-5.878 3.523 1.25 1.25 0 0 0 0 2.5 9.711 9.711 0 0 0 9.428-9.95V8.873a4.947 4.947 0 0 0-4.942-4.941Z"/></symbol><symbol id="icon--wysiwyg_redo" viewBox="0 0 24 24"><title>redo</title><path fill="currentColor" d="M22.608.161a.5.5 0 0 0-.545.108L19.472 2.86a.25.25 0 0 1-.292.045 12.537 12.537 0 0 0-12.966.865A12.259 12.259 0 0 0 6.1 23.632a1.25 1.25 0 0 0 1.476-2.018 9.759 9.759 0 0 1 .091-15.809 10 10 0 0 1 9.466-1.1.25.25 0 0 1 .084.409l-1.85 1.85a.5.5 0 0 0 .354.853h6.7a.5.5 0 0 0 .5-.5V.623a.5.5 0 0 0-.313-.462Z"/></symbol><symbol id="icon--wysiwyg_remove" viewBox="0 0 24 24"><title>delete-2-alternate</title><path fill="currentColor" d="M20.485 3.511A12.01 12.01 0 1 0 24 12a12.009 12.009 0 0 0-3.515-8.489Zm-1.767 15.21A9.51 9.51 0 1 1 21.5 12a9.508 9.508 0 0 1-2.782 6.721Z"/><path fill="currentColor" d="M16.987 7.01a1.275 1.275 0 0 0-1.8 0l-3.177 3.177L8.829 7.01a1.277 1.277 0 0 0-1.805 1.806l3.176 3.177-3.176 3.178a1.277 1.277 0 0 0 1.805 1.806l3.176-3.177 3.177 3.178a1.277 1.277 0 0 0 1.8-1.806l-3.176-3.178 3.176-3.177a1.278 1.278 0 0 0 .005-1.807Z"/></symbol><symbol id="icon--wysiwyg_strike" viewBox="0 0 24 24"><title>text-strike-through</title><path fill="currentColor" d="M23.75 12.952A1.25 1.25 0 0 0 22.5 11.7h-8.936a.492.492 0 0 1-.282-.09c-.722-.513-1.482-.981-2.218-1.432-2.8-1.715-4.5-2.9-4.5-4.863 0-2.235 2.207-2.569 3.523-2.569a4.54 4.54 0 0 1 3.081.764 2.662 2.662 0 0 1 .447 1.99v.3a1.25 1.25 0 1 0 2.5 0v-.268a4.887 4.887 0 0 0-1.165-3.777C13.949.741 12.359.248 10.091.248c-3.658 0-6.023 1.989-6.023 5.069 0 2.773 1.892 4.512 4 5.927a.25.25 0 0 1-.139.458H1.5a1.25 1.25 0 0 0 0 2.5h10.977a.251.251 0 0 1 .159.058 4.339 4.339 0 0 1 1.932 3.466c0 3.268-3.426 3.522-4.477 3.522-1.814 0-3.139-.405-3.834-1.173a3.394 3.394 0 0 1-.65-2.7 1.25 1.25 0 0 0-2.488-.246A5.76 5.76 0 0 0 4.4 21.753c1.2 1.324 3.114 2 5.688 2 4.174 0 6.977-2.42 6.977-6.022a6.059 6.059 0 0 0-.849-3.147.25.25 0 0 1 .216-.377H22.5a1.25 1.25 0 0 0 1.25-1.255Z"/></symbol><symbol id="icon--wysiwyg_table" viewBox="0 0 24 24"><title>wysiwyg_table</title><path fill-rule="evenodd" fill="currentColor" d="M17 17v5h2a3 3 0 0 0 3-3v-2h-5Zm-2 0H9v5h6v-5Zm2-2h5V9h-5v6Zm-2 0V9H9v6h6Zm2-8h5V5a3 3 0 0 0-3-3h-2v5Zm-2 0V2H9v5h6Zm9 9.177V19a5 5 0 0 1-5 5H5a5 5 0 0 1-5-5V5a5 5 0 0 1 5-5h14a5 5 0 0 1 5 5v2.823a.843.843 0 0 1 0 .354v7.646a.843.843 0 0 1 0 .354ZM7 2H5a3 3 0 0 0-3 3v2h5V2ZM2 9v6h5V9H2Zm0 8v2a3 3 0 0 0 3 3h2v-5H2Z"/></symbol><symbol id="icon--wysiwyg_ul" viewBox="0 0 24 24"><title>list-bullets</title><circle fill="currentColor" cx="2.5" cy="3.998" r="2.5"/><circle fill="currentColor" cx="2.5" cy="11.998" r="2.5"/><circle fill="currentColor" cx="2.5" cy="19.998" r="2.5"/><path fill="currentColor" d="M8.5 5H23a1 1 0 0 0 0-2H8.5a1 1 0 0 0 0 2ZM23 11H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Zm0 8H8.5a1 1 0 0 0 0 2H23a1 1 0 0 0 0-2Z"/></symbol><symbol id="icon--wysiwyg_underline" viewBox="0 0 24 24"><title>text-underline</title><path fill="currentColor" d="M22.5 21.248h-21a1.25 1.25 0 0 0 0 2.5h21a1.25 1.25 0 0 0 0-2.5ZM1.978 2.748h1.363a.25.25 0 0 1 .25.25v8.523a8.409 8.409 0 0 0 16.818 0V3a.25.25 0 0 1 .25-.25h1.363a1.25 1.25 0 0 0 0-2.5H16.3a1.25 1.25 0 0 0 0 2.5h1.363a.25.25 0 0 1 .25.25v8.523a5.909 5.909 0 0 1-11.818 0V3a.25.25 0 0 1 .25-.25H7.7a1.25 1.25 0 1 0 0-2.5H1.978a1.25 1.25 0 0 0 0 2.5Z"/></symbol><symbol id="icon--wysiwyg_undo" viewBox="0 0 24 24"><title>undo</title><path fill="currentColor" d="M17.786 3.77a12.542 12.542 0 0 0-12.965-.865.249.249 0 0 1-.292-.045L1.937.269A.507.507 0 0 0 1.392.16a.5.5 0 0 0-.308.462v6.7a.5.5 0 0 0 .5.5h6.7a.5.5 0 0 0 .354-.854L6.783 5.115a.253.253 0 0 1-.068-.228.249.249 0 0 1 .152-.181 10 10 0 0 1 9.466 1.1 9.759 9.759 0 0 1 .094 15.809 1.25 1.25 0 0 0 1.473 2.016 12.122 12.122 0 0 0 5.013-9.961 12.125 12.125 0 0 0-5.127-9.9Z"/></symbol><symbol class="ionicon" id="icon--wysiwyg_unlink" viewBox="0 0 512 512"><title>Unlink</title><path d="M208 352h-64a96 96 0 0 1 0-192h64m96 0h64a96 96 0 0 1 0 192h-64" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="36"/></symbol></svg>
\ No newline at end of file

From cb4d50f878bd2bae6042a8456cb2e13556958233 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Sat, 21 Jan 2023 10:05:13 +0100
Subject: [PATCH 08/15] Add browser support.

---
 frontend/js/components/StandaloneBrowser.vue | 30 +++++++++++++-----
 frontend/js/components/WysiwygTiptap.vue     | 26 ++++++++++++++--
 src/Services/Forms/Fields/Browser.php        | 21 ++++++++-----
 src/Services/Forms/Fields/Wysiwyg.php        | 32 ++++++++++++++++++--
 src/View/Components/Fields/Wysiwyg.php       | 19 +++++++++++-
 views/partials/form/_wysiwyg.blade.php       |  2 ++
 6 files changed, 108 insertions(+), 22 deletions(-)

diff --git a/frontend/js/components/StandaloneBrowser.vue b/frontend/js/components/StandaloneBrowser.vue
index 4d8852dbd..f7cdf33f3 100755
--- a/frontend/js/components/StandaloneBrowser.vue
+++ b/frontend/js/components/StandaloneBrowser.vue
@@ -76,7 +76,13 @@
       },
       endpoint: {
         type: Object,
-        required: true
+        required: false,
+        default: null
+      },
+      endpointMultiple: {
+        type: Array,
+        required: false,
+        default: null
       },
       max: {
         type: Number,
@@ -93,12 +99,13 @@
         endpointName: null,
         browserTitle: 'Select', // @todo
         browserNote: null,
+        currentSource: null,
         selected: []
       }
     },
     computed: {
       currentEndpoint () {
-        return this.endpoints.find(endpoint => endpoint.value === this.endpoint.value)
+        return this.endpoints.find(endpoint => endpoint.value === this.currentSource)
       },
       multiSources () {
         return this.endpoints.length > 1
@@ -186,7 +193,7 @@
         const form = this.$refs.form
         const formdata = this.getFormData(form)
 
-        this.$http.get(this.endpoint.value, { params: formdata }).then((resp) => {
+        this.$http.get(this.currentEndpoint.value, { params: formdata }).then((resp) => {
           // add items here
           if (hardReload) {
             this.clearFullItems()
@@ -229,16 +236,23 @@
         this.closeModal()
       },
       changeBrowserSource (source) {
-        // @todo: Not supported for now.
-        // this.$store.commit(BROWSER.UPDATE_BROWSER_ENDPOINT, source)
+        this.currentSource = source.value;
         this.reloadList(true)
       }
     },
     mounted () {
       this.openModal();
-      this.endpoints = [
-        this.endpoint
-      ]
+      if (this.endpointMultiple) {
+        this.endpoints = this.endpointMultiple
+      }
+      else {
+        this.endpoints = [
+          this.endpoint
+        ]
+      }
+
+      this.currentSource = this.endpoints[0].value;
+
       // bind scroll on the feed
       this.reloadList()
     }
diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 2a5343b87..a05169a8f 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -56,7 +56,8 @@
             />
 
             <wysiwyg-menu-bar-btn icon="unlink"
-                                  v-if="toolbar.link && editor.isActive('link')"
+                                  v-if="toolbar.link"
+                                  :disabled="!editor.isActive('link')"
                                   :isActive="editor.isActive('link')"
                                   @btn:click="removeLink()"/>
 
@@ -149,6 +150,14 @@
         </a17-button>
       </template>
     </div>
+    <standalone-browser
+        v-if="browserIsOpen && browserEndpoints"
+        ref="localbrowser"
+        :endpoint-multiple="browserEndpoints"
+        @selected="setLinkFromBrowser"
+        @close="browserIsOpen = false"
+        :max="1"
+    />
     <div class="link-window" v-if="linkWindow">
       <div class="link-window-inner">
         <label>
@@ -159,6 +168,7 @@
         <label>
           {{ $trans('wysiwyg.link_window.link', 'Link') }}:
           <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink" tabindex="2" ref="link_window__link">
+          <a v-if="browserEndpoints" @click="browserIsOpen = true">Select internal page</a>
         </label>
 
         <label>
@@ -189,6 +199,7 @@
   import TableHeader from '@tiptap/extension-table-header'
   import {mapState} from 'vuex'
 
+  import StandaloneBrowser from "@/components/StandaloneBrowser.vue";
   import WysiwygMenuBarBtn from '@/components/WysiwygMenuBarButton'
   import FormStoreMixin from '@/mixins/formStore'
   import InputMixin from '@/mixins/input'
@@ -225,6 +236,10 @@
       initialValue: {
         default: ''
       },
+      browserEndpoints: {
+        required: false,
+        default: null
+      },
       limitHeight: {
         type: Boolean,
         default: false
@@ -268,6 +283,7 @@
     },
     components: {
       EditorContent,
+      StandaloneBrowser,
       'wysiwyg-menu-bar-btn': WysiwygMenuBarBtn
     },
     data () {
@@ -302,7 +318,8 @@
         activeSource: false,
         counter: 0,
         editor: null,
-        linkWindow: null
+        linkWindow: null,
+        browserIsOpen: false,
       }
     },
     methods: {
@@ -417,6 +434,9 @@
           .unsetLink()
           .run()
       },
+      setLinkFromBrowser(item) {
+        this.linkWindow.href = '#twillInternalLink::' + item[0].endpointType + '#' + item[0].id
+      },
       saveLink () {
         if (this.linkWindow.text !== this.linkWindow.textOriginal) {
           this.editor.commands.insertContentAt({
@@ -736,7 +756,7 @@
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: 9999;
+    z-index: 450;
     background-color: rgba(0, 0, 0, .5);
     display: flex;
     justify-content: center;
diff --git a/src/Services/Forms/Fields/Browser.php b/src/Services/Forms/Fields/Browser.php
index fb2dc32a4..fe33081c8 100644
--- a/src/Services/Forms/Fields/Browser.php
+++ b/src/Services/Forms/Fields/Browser.php
@@ -145,21 +145,28 @@ public function connectedBrowserField(string $connectedBrowserField): self
      */
     public function modules(array $modules): self
     {
-        if (count($modules) === 1) {
+        if (count($modules) === 1 && ! isset($modules[0])) {
             $this->moduleName = getModuleNameByModel(array_pop($modules));
 
-            if (!$this->label) {
+            if (! $this->label) {
                 $this->label = Str::headline($this->moduleName);
             }
 
-            if (!$this->name) {
+            if (! $this->name) {
                 $this->name = Str::snake($this->moduleName);
             }
         } else {
             foreach ($modules as $module) {
-                $this->modules[] = [
-                    'name' => getModuleNameByModel($module),
-                ];
+                if (isset($module['name'])) {
+                    $this->modules[] = [
+                        'name' => getModuleNameByModel($module['name']),
+                        'label' => $module['label']
+                    ];
+                } else {
+                    $this->modules[] = [
+                        'name' => getModuleNameByModel($module),
+                    ];
+                }
             }
         }
 
@@ -168,7 +175,7 @@ public function modules(array $modules): self
 
     protected function getAdditionalConstructorArguments(): array
     {
-        if (!$this->name && !$this->moduleName) {
+        if (! $this->name && ! $this->moduleName) {
             throw new \InvalidArgumentException(
                 'Browser field is missing name field. Use ->name when using more than 1 module.'
             );
diff --git a/src/Services/Forms/Fields/Wysiwyg.php b/src/Services/Forms/Fields/Wysiwyg.php
index f03e16218..2146963a0 100644
--- a/src/Services/Forms/Fields/Wysiwyg.php
+++ b/src/Services/Forms/Fields/Wysiwyg.php
@@ -7,9 +7,6 @@
 use A17\Twill\Services\Forms\Fields\Traits\HasPlaceholder;
 use A17\Twill\Services\Forms\Fields\Traits\IsTranslatable;
 
-/**
- * @todo: Split this? Text, Textarea, Number, ...?
- */
 class Wysiwyg extends BaseFormField
 {
     use IsTranslatable;
@@ -51,6 +48,8 @@ class Wysiwyg extends BaseFormField
 
     public ?array $customOptions = null;
 
+    public ?array $browserModules;
+
     public static function make(): static
     {
         return new self(
@@ -148,4 +147,31 @@ public function customOptions(array $customOptions): self
 
         return $this;
     }
+
+    /**
+     * The browser module(s) that can be used to select existing content.
+     */
+    public function browserModules(?array $modules = null): static
+    {
+        if (count($modules) === 1 && ! isset($modules[0])) {
+            $this->browserModules[] = [
+                'name' => getModuleNameByModel(array_pop($modules))
+            ];
+        } else {
+            foreach ($modules as $module) {
+                if (isset($module['name'])) {
+                    $this->browserModules[] = [
+                        'name' => getModuleNameByModel($module['name']),
+                        'label' => $module['label']
+                    ];
+                } else {
+                    $this->browserModules[] = [
+                        'name' => getModuleNameByModel($module),
+                    ];
+                }
+            }
+        }
+
+        return $this;
+    }
 }
diff --git a/src/View/Components/Fields/Wysiwyg.php b/src/View/Components/Fields/Wysiwyg.php
index 74787b288..8306c5971 100644
--- a/src/View/Components/Fields/Wysiwyg.php
+++ b/src/View/Components/Fields/Wysiwyg.php
@@ -29,7 +29,9 @@ public function __construct(
         public bool $limitHeight = false,
         public bool $syntax = false,
         public string $customTheme = 'github',
-        public ?array $customOptions = null
+        public ?array $customOptions = null,
+        public ?array $browserModules = null,
+        public ?array $endpoints = null,
     ) {
         parent::__construct(
             name: $name,
@@ -44,6 +46,21 @@ public function __construct(
             translated: $translated,
             default: $default
         );
+
+        if (! $this->endpoints) {
+            $this->endpoints = isset($this->browserModules) ? collect($this->browserModules)->map(function ($module) {
+                return [
+                    'label' => $module['label'] ?? ucfirst($module['name']),
+                    'value' => moduleRoute(
+                        $module['name'],
+                        $module['routePrefix'] ?? null,
+                        'browser',
+                        $module['params'] ?? [],
+                        false
+                    ),
+                ];
+            })->toArray() : null;
+        }
     }
 
     public function render(): View
diff --git a/views/partials/form/_wysiwyg.blade.php b/views/partials/form/_wysiwyg.blade.php
index 1d3818ec5..067e9d74f 100644
--- a/views/partials/form/_wysiwyg.blade.php
+++ b/views/partials/form/_wysiwyg.blade.php
@@ -22,6 +22,7 @@
             @if ($editSource) editSource: true, @endif
             @if ($inModal) inModal: true, @endif
             @if ($limitHeight) limitHeight: true, @endif
+            @if ($endpoints) browserEndpoints: {!! e(json_encode($endpoints)) !!}, @endif
             @if ($default)
                 initialValue: '{{ $default }}',
                 hasDefaultStore: true,
@@ -43,6 +44,7 @@
             @if ($readOnly) readonly @endif
             @if ($editSource) :edit-source='true' @endif
             @if ($limitHeight) :limit-height='true' @endif
+            @if ($endpoints) :browser-endpoints='{!! json_encode($endpoints) !!}' @endif
             @if ($default)
             :initial-value="'{{ $default }}'"
             :has-default-store="true"

From 5feebe23dd38b3fb670aec823cb38500664e041f Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Mon, 23 Jan 2023 10:50:19 +0100
Subject: [PATCH 09/15] Add hr

---
 frontend/js/components/WysiwygTiptap.vue | 8 ++++++++
 package-lock.json                        | 1 +
 package.json                             | 1 +
 src/Services/Forms/Fields/Wysiwyg.php    | 1 +
 4 files changed, 11 insertions(+)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index a05169a8f..81a87ea07 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -49,6 +49,10 @@
                                   :isActive="editor.isActive('underline')"
                                   @btn:click="editor.chain().focus().toggleUnderline().run()"/>
 
+            <wysiwyg-menu-bar-btn icon="hr"
+                                  v-if="toolbar.hr"
+                                  @btn:click="editor.chain().focus().setHorizontalRule().run()"/>
+
             <wysiwyg-menu-bar-btn icon="link"
                                   v-if="toolbar.link"
                                   :isActive="editor.isActive('link')"
@@ -208,6 +212,7 @@
   import {Link} from "@tiptap/extension-link";
   import {Placeholder} from "@tiptap/extension-placeholder";
   import {HardBreak} from "@tiptap/extension-hard-break";
+  import {HorizontalRule} from "@tiptap/extension-horizontal-rule";
 
   export default {
     name: 'A17Wysiwyg',
@@ -497,6 +502,9 @@
             extensions.push(TableRow)
             break
           }
+          case 'hr': {
+            extensions.push(HorizontalRule)
+          }
         }
       })
 
diff --git a/package-lock.json b/package-lock.json
index 21ea23b81..8c9bfbd24 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@alpinejs/mask": "^3.10.0",
         "@tiptap/extension-hard-break": "^2.0.0-beta.209",
+        "@tiptap/extension-horizontal-rule": "^2.0.0-beta.209",
         "@tiptap/extension-link": "^2.0.0-beta.209",
         "@tiptap/extension-placeholder": "^2.0.0-beta.209",
         "@tiptap/extension-table": "^2.0.0-beta.209",
diff --git a/package.json b/package.json
index 23580d58b..6bfa2658a 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
   "dependencies": {
     "@alpinejs/mask": "^3.10.0",
     "@tiptap/extension-hard-break": "^2.0.0-beta.209",
+    "@tiptap/extension-horizontal-rule": "^2.0.0-beta.209",
     "@tiptap/extension-link": "^2.0.0-beta.209",
     "@tiptap/extension-placeholder": "^2.0.0-beta.209",
     "@tiptap/extension-table": "^2.0.0-beta.209",
diff --git a/src/Services/Forms/Fields/Wysiwyg.php b/src/Services/Forms/Fields/Wysiwyg.php
index 2146963a0..4957eafd2 100644
--- a/src/Services/Forms/Fields/Wysiwyg.php
+++ b/src/Services/Forms/Fields/Wysiwyg.php
@@ -28,6 +28,7 @@ class Wysiwyg extends BaseFormField
         "code-block",
         'ordered',
         'bullet',
+        'hr',
         ["align" => []],
         ["direction" => "rtl"],
         'code',

From 0051a2d6646e5c890acc6fb97bfc5239c0ccde7c Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Mon, 23 Jan 2023 15:09:58 +0100
Subject: [PATCH 10/15] Add support for wrappers.

---
 .../js/components/WysiwygMenuBarButton.vue    | 30 +++++++-
 frontend/js/components/WysiwygTiptap.vue      | 77 ++++++++++++++++++-
 .../Forms/Fields/Helpers/TiptapWrapper.php    | 40 ++++++++++
 src/Services/Forms/Fields/Wysiwyg.php         | 34 +++++++-
 4 files changed, 173 insertions(+), 8 deletions(-)
 create mode 100644 src/Services/Forms/Fields/Helpers/TiptapWrapper.php

diff --git a/frontend/js/components/WysiwygMenuBarButton.vue b/frontend/js/components/WysiwygMenuBarButton.vue
index 9fb5b571e..50acb61eb 100644
--- a/frontend/js/components/WysiwygMenuBarButton.vue
+++ b/frontend/js/components/WysiwygMenuBarButton.vue
@@ -1,9 +1,13 @@
 <template>
-  <button class="wysiwyg__menubar-button"
-          :class="{ 'is-active': isActive }"
+  <button :class="{ 'is-active': isActive, 'wysiwyg__menubar-button': icon || iconUrl }"
           :disabled="disabled"
           type="button"
+          :title="label"
           @click="handleClick">
+    <template v-if="iconUrl">
+      <img class="icon--custom" :src="iconUrl" :alt="label"/>
+    </template>
+    <template v-else-if="icon">
     <span class="icon"
           :class="`icon--wysiwyg_${icon}`"
           aria-hidden="true">
@@ -11,7 +15,11 @@
       <title>{{ icon }}</title>
       <use :xlink:href="`#icon--wysiwyg_${icon}`"></use>
     </svg>
-  </span>
+    </span>
+    </template>
+    <template v-else>
+      {{ label }}
+    </template>
   </button>
 </template>
 
@@ -21,7 +29,15 @@
     props: {
       icon: {
         type: String,
-        required: true
+        required: false
+      },
+      iconUrl: {
+        type: String,
+        required: false
+      },
+      label: {
+        type: String,
+        required: false,
       },
       isActive: {
         type: Boolean,
@@ -44,6 +60,12 @@
   .wysiwyg__menubar-button:disabled {
     opacity: 10%;
   }
+
+  .icon--custom {
+    width: 14px;
+    height: 14px;
+  }
+
   // This icon is not part of the sizes above.
   .icon--wysiwyg_hr,
   .icon--wysiwyg_hr svg {
diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 81a87ea07..65fb73a3b 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -100,9 +100,9 @@
                                   @btn:click="editor.chain().focus().redo().run()"/>
 
             <template v-if="toolbar.table">
-              <br />
               <div class="wysiwyg__menubar-table-buttons"
                    v-if="editor.isActive('table')">
+                <br/>
 
                 <wysiwyg-menu-bar-btn icon="delete_table"
                                       @btn:click="editor.chain().focus().deleteTable().run()"/>
@@ -129,6 +129,18 @@
                                       @btn:click="editor.chain().focus().mergeCells().run()"/>
               </div>
             </template>
+
+            <template v-if="this.toolbar.wrappers">
+              <br/>
+              <template v-for="wrapper in this.toolbar.wrappers">
+                <wysiwyg-menu-bar-btn :icon-url="wrapper.icon"
+                                      :key="wrapper.id"
+                                      :isActive="editor.isActive(wrapper.class)"
+                                      :label="wrapper.label"
+                                      @btn:click="editor.commands['set' + wrapper.id]()"/>
+              </template>
+            </template>
+
           </div>
           <div class="wysiwyg__contentWrapper" :class="{ 'wysiwyg__contentWrapper--limitHeight' : limitHeight }">
             <editor-content class="wysiwyg__content"
@@ -194,7 +206,7 @@
 
 <script>
   import debounce from 'lodash/debounce'
-  import {Editor, EditorContent, getMarkAttributes} from '@tiptap/vue-2'
+  import {Editor, EditorContent, getMarkAttributes, mergeAttributes, Node} from '@tiptap/vue-2'
   import StarterKit from '@tiptap/starter-kit'
   import Underline from '@tiptap/extension-underline'
   import Table from '@tiptap/extension-table'
@@ -439,7 +451,7 @@
           .unsetLink()
           .run()
       },
-      setLinkFromBrowser(item) {
+      setLinkFromBrowser (item) {
         this.linkWindow.href = '#twillInternalLink::' + item[0].endpointType + '#' + item[0].id
       },
       saveLink () {
@@ -483,6 +495,50 @@
         }))
       }
 
+      if (this.toolbar.wrappers) {
+        this.toolbar.wrappers.forEach((wrapper) => {
+          extensions.push(Node.create({
+            name: wrapper.id,
+            group: 'block',
+            marks: '_',
+            atom: true,
+            content: 'block+',
+            addOptions () {
+              return {
+                HTMLAttributes: {
+                  class: wrapper.className,
+                  'data-customwrapper': wrapper.id,
+                  'data-customwrapper-label': wrapper.label
+                },
+              }
+            },
+            parseHTML () {
+              return [
+                {
+                  tag: 'div',
+                  getAttrs: element => {
+                    element.getAttribute('data-customwrapper', wrapper.id)
+                  }
+                },
+              ]
+            },
+            renderHTML ({HTMLAttributes}) {
+              return ['div', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes), 0]
+            },
+            addCommands () {
+              const commandName = 'set' + this.name
+              const commandsList = {}
+
+              commandsList[commandName] = () => ({chain}) => {
+                return chain().toggleWrap(this.name).toggleOrderedList().run()
+              }
+
+              return commandsList;
+            },
+          }))
+        })
+      }
+
       Object.keys(this.toolbar).forEach(tool => {
         switch (tool) {
           case 'link': {
@@ -627,6 +683,21 @@
     .ProseMirror {
       color: $color__text;
 
+      [data-customwrapper] {
+        position: relative;
+        width: 100%;
+        padding: 3px;
+        border: 1px dashed hsl(0, 0%, 66.7%);
+        margin-top: 10px;
+      }
+
+      [data-customwrapper]::before {
+        content: attr(data-customwrapper-label);
+        position: relative;
+        background-color: white;
+        top: -15px;
+      }
+
       h1, h2, h3, h4, h5, h6 {
         font-weight: 700;
       }
diff --git a/src/Services/Forms/Fields/Helpers/TiptapWrapper.php b/src/Services/Forms/Fields/Helpers/TiptapWrapper.php
new file mode 100644
index 000000000..9e0115ca5
--- /dev/null
+++ b/src/Services/Forms/Fields/Helpers/TiptapWrapper.php
@@ -0,0 +1,40 @@
+<?php
+
+namespace A17\Twill\Services\Forms\Fields\Helpers;
+
+use Illuminate\Support\Str;
+
+class TiptapWrapper
+{
+    public const ELEMENT_UL = 'ul';
+    public const ELEMENT_OL = 'ol';
+    public const ELEMENT_NONE = null;
+
+    private const SUPPORTED_ELEMENTS = ['ul', 'ol', null];
+
+    public function __construct(
+        public string $className,
+        public ?string $label = null,
+        public ?string $icon = null,
+        public ?string $createElement = self::ELEMENT_NONE
+    ) {
+        if (! in_array($this->createElement, self::SUPPORTED_ELEMENTS, true)) {
+            throw new \Exception($this->createElement . ' is not supported in tiptapWrappers');
+        }
+
+        if (! $this->label) {
+            $this->label = $this->className;
+        }
+    }
+
+    public function toArray(): array
+    {
+        return [
+            'id' => Str::slug($this->className),
+            'label' => $this->label,
+            'className' => $this->className,
+            'createElement' => $this->createElement,
+            'icon' => $this->icon,
+        ];
+    }
+}
diff --git a/src/Services/Forms/Fields/Wysiwyg.php b/src/Services/Forms/Fields/Wysiwyg.php
index 4957eafd2..54a278225 100644
--- a/src/Services/Forms/Fields/Wysiwyg.php
+++ b/src/Services/Forms/Fields/Wysiwyg.php
@@ -2,6 +2,7 @@
 
 namespace A17\Twill\Services\Forms\Fields;
 
+use A17\Twill\Services\Forms\Fields\Helpers\TiptapWrapper;
 use A17\Twill\Services\Forms\Fields\Traits\HasMaxlength;
 use A17\Twill\Services\Forms\Fields\Traits\HasOnChange;
 use A17\Twill\Services\Forms\Fields\Traits\HasPlaceholder;
@@ -34,9 +35,14 @@ class Wysiwyg extends BaseFormField
         'code',
         'link',
         'clean',
-        'table'
+        'table',
     ];
 
+    /**
+     * @var TiptapWrapper[]
+     */
+    protected array $tiptapWrappers = [];
+
     public ?array $options = null;
 
     public string $type = 'tiptap';
@@ -149,6 +155,32 @@ public function customOptions(array $customOptions): self
         return $this;
     }
 
+    /**
+     * Add wrappers that can be used in the editor.
+     */
+    public function addTiptapWrapper(TiptapWrapper $wrapper): static
+    {
+        $this->tiptapWrappers[$wrapper->className] = $wrapper;
+
+        return $this;
+    }
+
+    protected function getToolbarOptions(): array
+    {
+        $base = $this->toolbarOptions;
+        if ($this->tiptapWrappers !== []) {
+            $wrapperList = [];
+            foreach ($this->tiptapWrappers as $wrapper) {
+                $wrapperList[] = $wrapper->toArray();
+            }
+            $base[] = [
+                'wrappers' => $wrapperList
+            ];
+        }
+
+        return $base;
+    }
+
     /**
      * The browser module(s) that can be used to select existing content.
      */

From 01fd42605ca581956afe1bf01d22c018fd5f7fc3 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Mon, 23 Jan 2023 15:30:19 +0100
Subject: [PATCH 11/15] Supported createElements.

---
 frontend/js/components/WysiwygTiptap.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 65fb73a3b..8d6ff3cd3 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -530,7 +530,15 @@
               const commandsList = {}
 
               commandsList[commandName] = () => ({chain}) => {
-                return chain().toggleWrap(this.name).toggleOrderedList().run()
+                if (wrapper.createElement) {
+                  switch (wrapper.createElement) {
+                    case 'ol':
+                      return chain().toggleWrap(this.name).toggleOrderedList().run()
+                    case 'ul':
+                      return chain().toggleWrap(this.name).toggleBulletList().run()
+                  }
+                }
+                return chain().toggleWrap(this.name).run()
               }
 
               return commandsList;

From b5de177533a560bdc4c951a5d429e83649439e29 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Tue, 24 Jan 2023 11:32:24 +0100
Subject: [PATCH 12/15] Design update of modal.

---
 frontend/js/components/WysiwygTiptap.vue | 119 +++++++++--------------
 frontend/scss/setup/_variables.scss      |   1 +
 2 files changed, 49 insertions(+), 71 deletions(-)

diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index 8d6ff3cd3..f9ab5b74b 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -174,33 +174,34 @@
         @close="browserIsOpen = false"
         :max="1"
     />
-    <div class="link-window" v-if="linkWindow">
-      <div class="link-window-inner">
-        <label>
-          {{ $trans('wysiwyg.link_window.text', 'Text') }}:
-          <input type="text" v-model="linkWindow.text" @keyup:enter="saveLink" tabindex="1" ref="link_window__text">
-        </label>
-
-        <label>
-          {{ $trans('wysiwyg.link_window.link', 'Link') }}:
-          <input type="text" v-model="linkWindow.href" @keyup:enter="saveLink" tabindex="2" ref="link_window__link">
-          <a v-if="browserEndpoints" @click="browserIsOpen = true">Select internal page</a>
-        </label>
-
-        <label>
-          <input type="checkbox" v-model="linkWindow.target" true-value="_blank" false-value="" tabindex="3">
-          {{ $trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window') }}
-        </label>
-
-        <br>
-        <a17-button variant="validate" class="dialog-confirm" @click="saveLink" tabindex="4">
-          {{ $trans('wysiwyg.link_window.save', 'Save') }}
-        </a17-button>
-        <a17-button variant="secondary" class="dialog-cancel" @click="linkWindow = null" tabindex="5">
-          {{ $trans('wysiwyg.link_window.save', 'Cancel') }}
-        </a17-button>
-      </div>
-    </div>
+    <a17-modal :title="$trans('wysiwyg.link_window.title', 'Edit link')" ref="link-modal"
+               class="modal--form modal--link">
+      <template v-if="linkWindow">
+        <a17-textfield name="link_text" v-model="linkWindow.text"
+                       :label="$trans('wysiwyg.link_window.text', 'Text to display')"/>
+        <a17-textfield name="link_link" v-model="linkWindow.link" :label="$trans('wysiwyg.link_window.link', 'Link')"
+                       :placeholder="$trans('wysiwyg.link_window.link_placeholder', 'Link to URL address')"
+        />
+        <div>
+          <a href="#" class="link-browser-link" v-if="browserEndpoints" @click="browserIsOpen = true">
+            {{$trans('wysiwyg.link_window.internal_browser_link', 'Select internal content')}}
+          </a>
+        </div>
+        <a17-inputframe>
+          <a17-checkbox name="target" @change="linkWindow.target = $event ? '_blank' : null"
+                        :label="$trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window')"/>
+        </a17-inputframe>
+
+        <div class="modalValidation">
+          <a17-button variant="validate" class="dialog-confirm" @click="saveLink" tabindex="4">
+            {{ $trans('wysiwyg.link_window.save', 'Save') }}
+          </a17-button>
+          <a17-button variant="aslink-grey" class="dialog-cancel" @click="linkWindow = null" tabindex="5">
+            {{ $trans('wysiwyg.link_window.save', 'Cancel') }}
+          </a17-button>
+        </div>
+      </template>
+    </a17-modal>
   </a17-inputframe>
 </template>
 
@@ -441,7 +442,7 @@
         }
 
         this.$nextTick(() => {
-          this.$refs.link_window__link.focus()
+          this.$refs['link-modal'].open()
         })
       },
       removeLink () {
@@ -472,6 +473,7 @@
           this.editor.commands.updateAttributes("link", {href: this.linkWindow.href, target: this.linkWindow.target})
         }
 
+        this.$refs['link-modal'].close()
         this.linkWindow = null
       }
     },
@@ -604,6 +606,24 @@
 <style scoped lang="scss">
   $height_input: 45px;
 
+  .modal {
+    &--link {
+      z-index: $zindex__modal__lower;
+    }
+
+    .link-browser-link {
+      color: $color__text--light;
+      margin-top: 10px;
+      display: block;
+    }
+  }
+
+  .modalValidation {
+    display: flex;
+    align-items: center;
+    margin-top: 35px;
+  }
+
   .wysiwyg {
     position: relative;
 
@@ -836,47 +856,4 @@
       }
     }
   }
-
-  .link-window {
-    position: fixed;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 0;
-    z-index: 450;
-    background-color: rgba(0, 0, 0, .5);
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .link-window-inner {
-    width: 100%;
-    max-width: 500px;
-    background-color: #fff;
-    border-radius: 3px;
-    padding: 20px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
-  }
-
-  .link-window input[type=text] {
-    margin-bottom: 15px;
-    padding: 14px;
-    border: 1px solid #cbcbcb;
-    width: 100%;
-  }
-
-  .link-window label {
-    display: block;
-    padding: 8px 0;
-  }
-
-  .link-window button {
-    border: 0;
-    background: #4b4bd8;
-    color: white;
-    padding: 10px 30px;
-    cursor: pointer;
-  }
-
 </style>
diff --git a/frontend/scss/setup/_variables.scss b/frontend/scss/setup/_variables.scss
index ba66c5488..9fc01a228 100644
--- a/frontend/scss/setup/_variables.scss
+++ b/frontend/scss/setup/_variables.scss
@@ -62,6 +62,7 @@ $bezier__ease-in-out: cubic-bezier(.5, 0, .5, 0);
 $zindex__tooltip:600;
 $zindex__notif:550;
 $zindex__modal:500;
+$zindex__modal__lower:450;
 $zindex__overlay:400;
 $zindex__user: 301;
 $zindex__search:300;

From 9c227a57f7d7898be24885b62a051082fe8fc835 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Tue, 24 Jan 2023 12:41:03 +0100
Subject: [PATCH 13/15] Ui fixes.

---
 frontend/js/components/Checkbox.vue           | 49 +++++++++++--------
 frontend/js/components/Textfield.vue          |  1 +
 frontend/js/components/WysiwygTiptap.vue      | 16 ++++--
 .../components/media-library/MediaLibrary.vue |  7 ---
 frontend/js/utils/sticky.js                   |  2 -
 5 files changed, 41 insertions(+), 34 deletions(-)

diff --git a/frontend/js/components/Checkbox.vue b/frontend/js/components/Checkbox.vue
index 59d407ae8..5af1cb7af 100755
--- a/frontend/js/components/Checkbox.vue
+++ b/frontend/js/components/Checkbox.vue
@@ -1,7 +1,12 @@
 <template>
   <span class="checkbox">
-    <input type="checkbox" class="checkbox__input" :class="checkboxClasses" :value="value" :name="name" :id="uniqId" :disabled="disabled"  v-model="checkedValue">
-    <label class="checkbox__label" :for="uniqId">{{ label }} <span class="checkbox__icon"><span v-svg symbol="check"></span></span></label>
+    <input type="checkbox" :key="uniqId" class="checkbox__input" :class="checkboxClasses" :value="value" :name="name"
+           :id="uniqId" :disabled="disabled" v-model="checkedValue">
+    <label class="checkbox__label" :for="uniqId">{{ label }}
+      <span class="checkbox__icon">
+        <span v-svg symbol="check"></span>
+      </span>
+    </label>
   </span>
 </template>
 
@@ -16,7 +21,9 @@
         default: ''
       },
       initialValue: {
-        default: function () { return [] }
+        default: function () {
+          return []
+        }
       },
       name: {
         type: String,
@@ -59,8 +66,8 @@
 <style lang="scss" scoped>
 
   .checkbox {
-    color:$color__text;
-    min-width:30px;
+    color: $color__text;
+    min-width: 30px;
   }
 
   .checkbox__input {
@@ -73,7 +80,7 @@
     border: 0 none;
     clip: rect(1px, 1px, 1px, 1px);
     overflow: hidden;
-    opacity:0;
+    opacity: 0;
   }
 
   .checkbox__label {
@@ -103,17 +110,17 @@
 
   .checkbox__icon {
     background-color: $color__fborder--active;
-    color:$color__background;
+    color: $color__background;
     opacity: 0;
   }
 
   .checkbox__icon .icon {
-    color:$color__background;
+    color: $color__background;
     top: 2px;
     position: relative;
     display: block;
-    margin-left:auto;
-    margin-right:auto;
+    margin-left: auto;
+    margin-right: auto;
   }
 
   .checkbox__input:focus + .checkbox__label::before,
@@ -122,9 +129,9 @@
   }
 
   .checkbox__label:hover,
-  .checkbox__input:hover   + .checkbox__label,
+  .checkbox__input:hover + .checkbox__label,
   .checkbox__input:checked + .checkbox__label {
-    color:$color__text;
+    color: $color__text;
   }
 
   .checkbox__input:checked + .checkbox__label .checkbox__icon {
@@ -144,20 +151,20 @@
 
   /* Green variant */
   .checkbox__input--bold + .checkbox__label .checkbox__icon {
-    background-color:$color__publish
+    background-color: $color__publish
   }
 
   /* Minus variant (for Bulk Edit) */
   .checkbox--minus {
     .checkbox__label::after {
-      content:'';
-      display:block;
-      width:9px;
-      height:2px;
-      background-color:$color__fborder--active;
-      position:absolute;
-      left:2px + 15px - 14px;
-      top:8px;
+      content: '';
+      display: block;
+      width: 9px;
+      height: 2px;
+      background-color: $color__fborder--active;
+      position: absolute;
+      left: 2px + 15px - 14px;
+      top: 8px;
     }
 
     .checkbox__input:checked + .checkbox__label .checkbox__icon {
diff --git a/frontend/js/components/Textfield.vue b/frontend/js/components/Textfield.vue
index 75fd039ac..04ddfba69 100755
--- a/frontend/js/components/Textfield.vue
+++ b/frontend/js/components/Textfield.vue
@@ -261,6 +261,7 @@
         this.checkFieldValidity(event.target)
 
         this.$emit('change', newValue)
+        this.$emit('input', newValue)
 
         this.allowSubmit()
       }, 250),
diff --git a/frontend/js/components/WysiwygTiptap.vue b/frontend/js/components/WysiwygTiptap.vue
index f9ab5b74b..dd6449160 100755
--- a/frontend/js/components/WysiwygTiptap.vue
+++ b/frontend/js/components/WysiwygTiptap.vue
@@ -177,9 +177,14 @@
     <a17-modal :title="$trans('wysiwyg.link_window.title', 'Edit link')" ref="link-modal"
                class="modal--form modal--link">
       <template v-if="linkWindow">
-        <a17-textfield name="link_text" v-model="linkWindow.text"
+        <a17-textfield name="link_text"
+                       :initial-value="linkWindow.text"
+                       v-model="linkWindow.text"
                        :label="$trans('wysiwyg.link_window.text', 'Text to display')"/>
-        <a17-textfield name="link_link" v-model="linkWindow.link" :label="$trans('wysiwyg.link_window.link', 'Link')"
+        <a17-textfield name="link_link"
+                       :initial-value="linkWindow.href"
+                       v-model="linkWindow.href"
+                       :label="$trans('wysiwyg.link_window.link', 'Link')"
                        :placeholder="$trans('wysiwyg.link_window.link_placeholder', 'Link to URL address')"
         />
         <div>
@@ -188,7 +193,10 @@
           </a>
         </div>
         <a17-inputframe>
-          <a17-checkbox name="target" @change="linkWindow.target = $event ? '_blank' : null"
+          <a17-checkbox name="link_target"
+                        :initial-value="linkWindow.target"
+                        @change="linkWindow.target = $event ? '_blank' : null"
+                        value="_blank"
                         :label="$trans('wysiwyg.link_window.open_in_new_window', 'Open in a new window')"/>
         </a17-inputframe>
 
@@ -438,7 +446,7 @@
           textOriginal: this.editor.state.tr.doc.textBetween(startPos, endPos),
           text: this.editor.state.tr.doc.textBetween(startPos, endPos),
           href: markAttributes.href,
-          target: markAttributes.target ?? null
+          target: markAttributes.target ?? ''
         }
 
         this.$nextTick(() => {
diff --git a/frontend/js/components/media-library/MediaLibrary.vue b/frontend/js/components/media-library/MediaLibrary.vue
index cfd41d605..3314f3b89 100755
--- a/frontend/js/components/media-library/MediaLibrary.vue
+++ b/frontend/js/components/media-library/MediaLibrary.vue
@@ -412,13 +412,6 @@
         const form = this.$refs.form
         const formdata = this.getFormData(form)
 
-        // if (this.selected[this.connector]) {
-        //   formdata.except = this.selected[this.connector].map((media) => {
-        //     return media.id
-        //   })
-        //   console.log(formdata.except)
-        // }
-
         // see api/media-library for actual ajax
         api.get(this.endpoint, formdata, (resp) => {
           // add medias here
diff --git a/frontend/js/utils/sticky.js b/frontend/js/utils/sticky.js
index 96e3f8adf..1c4372046 100755
--- a/frontend/js/utils/sticky.js
+++ b/frontend/js/utils/sticky.js
@@ -75,8 +75,6 @@ export default class Sticky {
   //
 
   _refresh () {
-    // console.log(getCurrentMediaQuery)
-    // if (getCurrentMediaQuery.indexOf("small") !== -1) return false
     if (!this.target) return false
 
     const scrollPos = this.lastScrollPos

From a519be3a4f8218d428919cefd6bc388345b8832b Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Tue, 24 Jan 2023 13:52:31 +0100
Subject: [PATCH 14/15] Update docs.

---
 .../1_documentation/4_form-fields/wysiwyg.md  | 65 +++++++++----------
 src/Services/Forms/Fields/Wysiwyg.php         |  2 -
 2 files changed, 31 insertions(+), 36 deletions(-)

diff --git a/docs/content/1_documentation/4_form-fields/wysiwyg.md b/docs/content/1_documentation/4_form-fields/wysiwyg.md
index 0db85e58a..b0a182e60 100644
--- a/docs/content/1_documentation/4_form-fields/wysiwyg.md
+++ b/docs/content/1_documentation/4_form-fields/wysiwyg.md
@@ -65,32 +65,29 @@ Wysiwyg::make()
 :::#tab:::
 :::#tabs:::
 
-By default, the WYSIWYG field is based on [Quill](https://quilljs.com/).
+By default, the WYSIWYG field is based on [Tiptap](https://tiptap.dev/).
 
-You can add all [toolbar options](https://quilljs.com/docs/modules/toolbar/) from Quill with the `toolbarOptions` key.
+You can configure the toolbar if needed.
 
-For example, this configuration will render a `wysiwyg` field with almost all features from Quill and Snow theme.
+For example, this configuration will render the *default* toolbar.
 
 ```blade
 @php
 $wysiwygOptions = [
-  ['header' => [2, 3, 4, 5, 6, false]],
-  'bold',
-  'italic',
-  'underline',
-  'strike',
-  ["script" => "super"],
-  ["script" => "sub"],
-  "blockquote",
-  "code-block",
-  ['list' => 'ordered'],
-  ['list' => 'bullet'],
-  ['indent' => '-1'],
-  ['indent' => '+1'],
-  ["align" => []],
-  ["direction" => "rtl"],
-  'link',
-  "clean",
+    ['header' => [2, 3, 4, 5, 6, false]],
+    'bold',
+    'italic',
+    'underline',
+    'strike',
+    'blockquote',
+    "code-block",
+    'ordered',
+    'bullet',
+    'hr',
+    'code',
+    'link',
+    'clean',
+    'table',
 ];
 @endphp
 
@@ -110,20 +107,20 @@ image module is not integrated with Twill's media library. It outputs the base64
 It is not a recommended way of using and storing images, prefer using one or multiple `medias` form fields or blocks
 fields for flexible content. This will give you greater control over your frontend output.
 
-| Option         | Description                                                                                                              | Type/values                                                | Default value                           |
-|:---------------|:-------------------------------------------------------------------------------------------------------------------------|:-----------------------------------------------------------|:----------------------------------------|
-| name           | Name of the field                                                                                                        | string                                                     |                                         |
-| label          | Label of the field                                                                                                       | string                                                     |                                         |
-| type           | Type of wysiwyg field                                                                                                    | quill<br/>tiptap                                           | quill                                   |
-| toolbarOptions | Array of options/tools that will be displayed in the editor                                                              | [Quill options](https://quilljs.com/docs/modules/toolbar/) | bold<br/>italic<br />underline<br/>link |
-| editSource     | Displays a button to view source code                                                                                    | boolean                                                    | false                                   |
-| hideCounter    | Hide the character counter displayed at the bottom                                                                       | boolean                                                    | false                                   |
-| limitHeight    | Limit the editor height from growing beyond the viewport                                                                 | boolean                                                    | false                                   |
-| translated     | Defines if the field is translatable                                                                                     | boolean                                                    | false                                   |
-| maxlength      | Max character count of the field                                                                                         | integer                                                    | 255                                     |
-| note           | Hint message displayed above the field                                                                                   | string                                                     |                                         |
-| placeholder    | Text displayed as a placeholder in the field                                                                             | string                                                     |                                         |
-| required       | Displays an indicator that this field is required<br/>A backend validation rule is required to prevent users from saving | boolean                                                    | false                                   |
+| Option         | Description                                                                                                              | Type/values      | Default value |
+|:---------------|:-------------------------------------------------------------------------------------------------------------------------|:-----------------|:--------------|
+| name           | Name of the field                                                                                                        | string           |               |
+| label          | Label of the field                                                                                                       | string           |               |
+| type           | Type of wysiwyg field                                                                                                    | quill<br/>tiptap | tiptap        |
+| toolbarOptions | Array of options/tools that will be displayed in the editor                                                              |                  | See above     |
+| editSource     | Displays a button to view source code                                                                                    | boolean          | false         |
+| hideCounter    | Hide the character counter displayed at the bottom                                                                       | boolean          | false         |
+| limitHeight    | Limit the editor height from growing beyond the viewport                                                                 | boolean          | false         |
+| translated     | Defines if the field is translatable                                                                                     | boolean          | false         |
+| maxlength      | Max character count of the field                                                                                         | integer          | 255           |
+| note           | Hint message displayed above the field                                                                                   | string           |               |
+| placeholder    | Text displayed as a placeholder in the field                                                                             | string           |               |
+| required       | Displays an indicator that this field is required<br/>A backend validation rule is required to prevent users from saving | boolean          | false         |
 
 A migration to save a `wysiwyg` field would be:
 
diff --git a/src/Services/Forms/Fields/Wysiwyg.php b/src/Services/Forms/Fields/Wysiwyg.php
index 54a278225..150848262 100644
--- a/src/Services/Forms/Fields/Wysiwyg.php
+++ b/src/Services/Forms/Fields/Wysiwyg.php
@@ -30,8 +30,6 @@ class Wysiwyg extends BaseFormField
         'ordered',
         'bullet',
         'hr',
-        ["align" => []],
-        ["direction" => "rtl"],
         'code',
         'link',
         'clean',

From fe35fb81a9d32fcfde6c3e13e1b530d670567f54 Mon Sep 17 00:00:00 2001
From: Harings Rob <haringsrob@gmail.com>
Date: Tue, 24 Jan 2023 13:53:43 +0100
Subject: [PATCH 15/15] Additional cleanup.

---
 docs/content/1_documentation/4_form-fields/wysiwyg.md | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/docs/content/1_documentation/4_form-fields/wysiwyg.md b/docs/content/1_documentation/4_form-fields/wysiwyg.md
index b0a182e60..fc4b97b26 100644
--- a/docs/content/1_documentation/4_form-fields/wysiwyg.md
+++ b/docs/content/1_documentation/4_form-fields/wysiwyg.md
@@ -8,7 +8,7 @@
 ```php
 Wysiwyg::make()
     ->name('case_study')
-    ->toolbarOptions(['list-ordered', 'list-unordered'])
+    ->toolbarOptions([ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ])
     ->maxLength(200)
     ->note('Some note')
 ```
@@ -20,7 +20,6 @@ Wysiwyg::make()
 <x-twill::wysiwyg 
     name="case_study" 
     :label="twillTrans('Case study text')"
-    :toolbar-options="['list-ordered', 'list-unordered']" 
     :placeholder="twillTrans('Case study placeholder')"
     :maxlength="200" 
     :note="twillTrans('Help text')"
@@ -29,7 +28,7 @@ Wysiwyg::make()
 <x-twill::wysiwyg 
     name="case_study" 
     :label="twillTrans('Case study text')"
-    :toolbar-options="[ [ 'header' => [1, 2, false] ], 'list-ordered', 'list-unordered', [ 'indent' => '-1'], [ 'indent' => '+1' ] ]" 
+    :toolbar-options="[ [ 'header' => [1, 2, false] ], 'ordered', 'bullet' ]" 
     :placeholder="twillTrans('Case study placeholder')"
     :edit-source="true"
     :translated="true"
@@ -45,7 +44,6 @@ Wysiwyg::make()
 @formField('wysiwyg', [
     'name' => 'case_study',
     'label' => 'Case study text',
-    'toolbarOptions' => ['list-ordered', 'list-unordered'],
     'placeholder' => 'Case study text',
     'maxlength' => 200,
     'note' => 'Hint message',
@@ -54,7 +52,7 @@ Wysiwyg::make()
 @formField('wysiwyg', [
     'name' => 'case_study',
     'label' => 'Case study text',
-    'toolbarOptions' => [ [ 'header' => [1, 2, false] ], 'list-ordered', 'list-unordered', [ 'indent' => '-1'], [ 'indent' => '+1' ] ],
+    'toolbarOptions' => [ [ 'header' => [1, 2, false] ],
     'placeholder' => 'Case study text',
     'maxlength' => 200,
     'editSource' => true,