@demos-europe/demosplan-ui 0.3.25 → 0.3.27

package/.idea/shelf/Uncommitted_changes_before_Checkout_at_30_07_2024_14_34_[Changes]/shelved.patch

@@ -0,0 +1,78 @@
+Index: src/components/DpEditor/DpEditor.vue
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+><template>\n  <div class=\"o-form__control-tiptap\">\n    <div\n      v-if=\"maxlength !== 0\"\n      :class=\"prefixClass('lbl__hint')\"\n      v-cleanhtml=\"counterText\" />\n    <dp-link-modal\n      v-if=\"toolbar.linkButton\"\n      ref=\"linkModal\"\n      @insert=\"insertUrl\" />\n    <dp-upload-modal\n      v-if=\"toolbar.imageButton && tusEndpoint\"\n      :basic-auth=\"basicAuth\"\n      ref=\"uploadModal\"\n      :get-file-by-hash=\"routes.getFileByHash\"\n      :tus-endpoint=\"tusEndpoint\"\n      @insert-image=\"insertImage\"\n      @add-alt=\"addAltTextToImage\"\n      @close=\"resetEditingImage\" />\n    <slot\n      name=\"modal\"\n      :appendText=\"appendText\"\n      :handleInsertText=\"handleInsertText\" />\n    <div\n      v-if=\"editor\"\n      :class=\"prefixClass('row tiptap')\">\n      <div :class=\"prefixClass('col')\">\n        <div :class=\"[isFullscreen ? 'fullscreen': '', prefixClass('editor')]\">\n          <div :class=\"[readonly ? prefixClass('readonly'): '', prefixClass('menubar')]\">\n            <!-- Cut -->\n            <button\n              :aria-label=\"translations.cut\"\n              :class=\"prefixClass('menubar__button')\"\n              data-cy=\"editor:cut\"\n              :disabled=\"readonly\"\n              type=\"button\"\n              @click=\"cut\"\n              v-tooltip=\"translations.cut\">\n              <i\n                :class=\"prefixClass('fa fa-scissors')\"\n                aria-hidden=\"true\" />\n            </button>\n            &#10072;\n            <!-- Undo -->\n            <button\n              :aria-label=\"translations.undo\"\n              :class=\"prefixClass('menubar__button')\"\n              data-cy=\"editor:undo\"\n              :disabled=\"readonly\"\n              type=\"button\"\n              @click=\"editor.chain().focus().undo().run()\"\n              v-tooltip=\"translations.undo\">\n              <i\n                :class=\"prefixClass('fa fa-reply')\"\n                aria-hidden=\"true\" />\n            </button>\n            <!-- Redo -->\n            <button\n              :aria-label=\"translations.redo\"\n              :class=\"prefixClass('menubar__button')\"\n              data-cy=\"editor:redo\"\n              :disabled=\"readonly\"\n              type=\"button\"\n              @click=\"editor.chain().focus().redo().run()\"\n              v-tooltip=\"translations.redo\">\n              <i\n                :class=\"prefixClass('fa fa-share')\"\n                aria-hidden=\"true\" />\n            </button>\n            <template v-if=\"toolbar.textDecoration\">\n              &#10072;\n              <!-- Bold -->\n\n              <button\n                :aria-label=\"translations.bold\"\n                :class=\"[editor.isActive('bold') ? prefixClass('is-active'): '', prefixClass('menubar__button')]\"\n                data-cy=\"editor:bold\"\n                :disabled=\"readonly\"\n                type=\"button\"\n                @click=\"editor.chain().focus().toggleBold().run()\"\n                v-tooltip=\"translations.bold\">\n                <i\n                  :class=\"prefixClass('fa fa-bold')\"\n                  aria-hidden=\"true\" />\n              </button>\n\n              <!-- Italic -->\n              <button\n                :aria-label=\"translations.italic\"\n                :class=\"[editor.isActive('italic') ? prefixClass('is-active') : '', prefixClass('menubar__button') ]\"\n                data-cy=\"editor:italic\"\n                :disabled=\"readonly\"\n                type=\"button\"\n                @click=\"editor.chain().focus().toggleItalic().run()\"\n                v-tooltip=\"translations.italic\">\n                <i\n                  :class=\"prefixClass('fa fa-italic')\"\n                  aria-hidden=\"true\" />\n              </button>\n              <!-- Underline -->\n              <button\n                :aria-label=\"translations.underline\"\n                :class=\"[editor.isActive('underline') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                data-cy=\"editor:underline\"\n                :disabled=\"readonly\"\n                type=\"button\"\n                @click=\"editor.chain().focus().toggleUnderline().run()\"\n                v-tooltip=\"translations.underline\">\n                <i\n                  :class=\"prefixClass('fa fa-underline')\"\n                  aria-hidden=\"true\" />\n              </button>\n            </template>\n            <!-- Strike through -->\n            <button\n              v-if=\"toolbar.strikethrough\"\n              :aria-label=\"translations.strikethrough\"\n              :class=\"[editor.isActive('strike') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n              data-cy=\"editor:strikethrough\"\n              :disabled=\"readonly\"\n              type=\"button\"\n              @click=\"editor.chain().focus().toggleStrike().run()\"\n              v-tooltip=\"translations.strikethrough\">\n              <i\n                :class=\"prefixClass('fa fa-strikethrough')\"\n                aria-hidden=\"true\" />\n            </button>\n            <div\n              v-if=\"toolbar.insertAndDelete\"\n              :class=\"prefixClass('inline-block relative')\">\n              <button\n                :class=\"[editor.isActive('insert') || editor.isActive('delete') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                :disabled=\"readonly\"\n                type=\"button\"\n                @click.stop=\"toggleSubMenu('diffMenu', !diffMenu.isOpen)\"\n                @keydown.tab.shift.exact=\"toggleSubMenu('diffMenu', false)\">\n                <dp-icon\n                  class=\"align-text-top inline-block\"\n                  icon=\"highlighter\" />\n                <i :class=\"prefixClass('fa fa-caret-down')\" />\n              </button>\n              <div\n                v-if=\"diffMenu.isOpen\"\n                :class=\"prefixClass('button_submenu')\">\n                <button\n                  v-for=\"(button, idx) in diffMenu.buttons\"\n                  :key=\"`diffMenu_${idx}`\"\n                  :class=\"{ 'is-active': editor.isActive(button.name) }\"\n                  type=\"button\"\n                  :disabled=\"readonly\"\n                  @keydown.tab.exact=\"() => { idx === diffMenu.buttons.length -1 ? toggleSubMenu('diffMenu', false) : null }\"\n                  @keydown.tab.shift.exact=\"() => { idx === 0 ? toggleSubMenu('diffMenu', false) : null }\"\n                  @click.stop=\"executeSubMenuButtonAction(button, 'diffMenu', true)\">\n                  {{ Translator.trans(button.label) }}\n                </button>\n              </div>\n              &#10072;\n            </div>\n            <div\n              v-else-if=\"toolbar.mark /* display the Button without fold out, if ony 'mark' is enabled */\"\n              :class=\"prefixClass('inline-block relative')\">\n              <button\n                v-for=\"(button, idx) in diffMenu.buttons\"\n                :key=\"`diffMenu_${idx}`\"\n                :class=\"[editor.isActive(button.name) ? prefixClass('is-active') : '' , prefixClass('menubar__button')]\"\n                type=\"button\"\n                :disabled=\"readonly\"\n                :aria-label=\"Translator.trans(button.label)\"\n                v-tooltip=\"Translator.trans(button.label)\"\n                @keydown.tab.exact=\"() => { idx === diffMenu.buttons.length -1 ? toggleSubMenu('diffMenu', false) : null }\"\n                @keydown.tab.shift.exact=\"() => { idx === 0 ? toggleSubMenu('diffMenu', false) : null }\"\n                @click.stop=\"executeSubMenuButtonAction(button, 'diffMenu', true)\">\n                <dp-icon\n                  class=\"align-text-top\"\n                  icon=\"highlighter\" />\n              </button>\n            </div>\n            <!-- lists -->\n            <template v-if=\"toolbar.listButtons\">\n              <!-- Unordered List -->\n              <button\n                @click=\"editor.chain().focus().toggleBulletList().run()\"\n                :class=\"[editor.isActive('bullet_list') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                type=\"button\"\n                :aria-label=\"Translator.trans('editor.unordered.list')\"\n                v-tooltip=\"Translator.trans('editor.unordered.list')\"\n                :disabled=\"readonly\">\n                <i :class=\"prefixClass('fa fa-list-ul')\" />\n              </button>\n              <!-- Ordered List -->\n              <button\n                @click=\"editor.chain().focus().toggleOrderedList().run()\"\n                :class=\"[editor.isActive('ordered_list') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                type=\"button\"\n                :aria-label=\"Translator.trans('editor.ordered.list')\"\n                v-tooltip=\"Translator.trans('editor.ordered.list')\"\n                :disabled=\"readonly\">\n                <i :class=\"prefixClass('fa fa-list-ol')\" />\n              </button>\n              &#10072;\n            </template>\n            <!--Heading Buttons - for each heading level in props a button will be rendered. We want to keep it\n            flexible because the user should not always be able to define e.g. H1. It depends where the text should\n            appear.-->\n            <template v-if=\"toolbar.headings.length > 0\">\n              <button\n                v-for=\"heading in toolbar.headings\"\n                :key=\"'heading_' + heading\"\n                type=\"button\"\n                :class=\"[editor.isActive('heading', { level: heading }) ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                @click=\"editor.chain().focus().toggleHeading({ level: heading }).run()\"\n                v-tooltip=\"Translator.trans('editor.heading.level', { level: heading })\"\n                :disabled=\"readonly\">\n                {{ `H${heading}` }}\n              </button>\n              &#10072;\n            </template>\n            <!-- Obscure text -->\n            <button\n              v-if=\"obscureEnabled\"\n              @click=\"editor.chain().focus().toggleObscure().run()\"\n              :class=\"[editor.isActive('obscure') ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n              type=\"button\"\n              v-tooltip=\"translations.obscureTitle\"\n              :disabled=\"readonly\">\n              <i\n                :class=\"prefixClass('fa fa-pencil-square')\"\n                aria-hidden=\"true\" />\n            </button>\n            <!--Add links-->\n            <button\n              v-if=\"toolbar.linkButton\"\n              @click.stop=\"showLinkPrompt(editor.commands.toggleLink, editor.getAttributes('customLink'))\"\n              :class=\"prefixClass('menubar__button')\"\n              type=\"button\"\n              v-tooltip=\"Translator.trans('editor.link.edit.insert')\">\n              <i :class=\"prefixClass('fa fa-link')\" />\n            </button>\n            <!-- Insert images-->\n            <button\n              v-if=\"toolbar.imageButton\"\n              @click.stop=\"openUploadModal(null)\"\n              :class=\"prefixClass('menubar__button')\"\n              type=\"button\"\n              v-tooltip=\"translations.insertImage\"\n              :disabled=\"readonly\">\n              <i :class=\"prefixClass('fa fa-picture-o')\" />\n            </button>\n            <!-- Insert and edit tables -->\n            <div\n              v-if=\"toolbar.table\"\n              :class=\"prefixClass('inline-block relative')\">\n              <button\n                :class=\"[tableMenu.isOpen ? prefixClass('is-active') : '', prefixClass('menubar__button')]\"\n                type=\"button\"\n                @click.stop=\"toggleSubMenu('tableMenu', !tableMenu.isOpen)\"\n                @keydown.tab.shift.exact=\"toggleSubMenu('tableMenu', false)\"\n                :disabled=\"readonly\">\n                <i :class=\"prefixClass('fa fa-table')\" />\n                <i :class=\"prefixClass('fa fa-caret-down')\" />\n              </button>\n              <div\n                v-if=\"tableMenu.isOpen\"\n                :class=\"prefixClass('button_submenu')\">\n                <button\n                  v-for=\"(button, idx) in tableMenu.buttons\"\n                  :key=\"`tableMenu_${idx}`\"\n                  type=\"button\"\n                  :disabled=\"readonly\"\n                  @keydown.tab.exact=\"() => { idx === tableMenu.buttons.length -1 ? toggleSubMenu('tableMenu', false) : null }\"\n                  @keydown.tab.shift.exact=\"() => { idx === 0 ? toggleSubMenu('tableMenu', false) : null }\"\n                  @click.stop=\"executeSubMenuButtonAction(button, 'tableMenu')\">\n                  {{ Translator.trans(button.label) }}\n                </button>\n              </div>\n            </div>\n            <!-- Fullscreen -->\n            <button\n              v-if=\"toolbar.fullscreenButton\"\n              @click=\"fullscreen\"\n              :class=\"[isFullscreen ? prefixClass('is-active') : '', prefixClass('menubar__button float-right')]\"\n              type=\"button\"\n              :aria-label=\"Translator.trans('editor.fullscreen')\"\n              v-tooltip=\"Translator.trans('editor.fullscreen')\">\n              <i\n                :class=\"prefixClass('fa fa-arrows-alt')\"\n                aria-hidden=\"true\" />\n            </button>\n            <slot name=\"button\" />\n          </div>\n          <editor-content\n            v-if=\"editor\"\n            :data-cy=\"`editor${editorId}`\"\n            :editor=\"editor\"\n            :class=\"prefixClass('editor__content overflow-hidden')\" />\n          <!-- this hidden input is needed if we use this component without the inline-editing-wrapper TiptapEditText.vue,\n          so we can save the text entered in the textarea via a form element -->\n          <input\n            v-if=\"hiddenInput !== ''\"\n            :data-dp-validate-if=\"dataDpValidateIf || false\"\n            type=\"hidden\"\n            :id=\"hiddenInput\"\n            :data-dp-validate-error-fieldname=\"dataDpValidateErrorFieldname || null\"\n            :name=\"hiddenInput\"\n            :class=\"[required ? prefixClass('is-required') : '', prefixClass('tiptap__input--hidden')]\"\n            :data-dp-validate-maxlength=\"maxlength\"\n            :value=\"hiddenInputValue\">\n          <i\n            v-if=\"!isFullscreen\"\n            aria-hidden=\"true\"\n            :class=\"prefixClass('fa fa-angle-down resizeVertical')\"\n            @mousedown=\"resizeVertically\"\n            draggable=\"true\" />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nimport { de } from '../shared/translations'\nimport {\n  Bold,\n  BulletList,\n  Document,\n  HardBreak,\n  Heading,\n  History,\n  Italic,\n  Link,\n  ListItem,\n  OrderedList,\n  Paragraph,\n  Strike,\n  Table,\n  TableCell,\n  TableHeader,\n  TableRow,\n  Text,\n  Underline\n} from './libs/tiptapExtensions'\nimport { CleanHtml, Tooltip } from '~/directives'\nimport {\n  Editor, // Wrapper for prosemirror state\n  EditorContent, // Renderless content element\n} from '@tiptap/vue-2'\nimport {\n  buildSuggestion,\n  CustomDelete,\n  CustomImage,\n  CustomInsert,\n  CustomLink,\n  CustomMark,\n  InsertAtCursorPos,\n  Obscure,\n  Mention\n} from './libs/customExtensions'\nimport DpIcon from '../DpIcon/DpIcon'\nimport DpLinkModal from './DpLinkModal'\nimport DpUploadModal from './DpUploadModal'\nimport DpResizableImage from './DpResizableImage'\nimport { handleWordPaste } from './libs/handleWordPaste'\nimport { maxlengthHint } from '~/utils/'\nimport { prefixClassMixin } from '~/mixins'\nimport { v4 as uuid } from 'uuid'\n\nexport default {\n  name: 'DpEditor',\n\n  components: {\n    DpIcon,\n    EditorContent,\n    DpLinkModal,\n    DpResizableImage,\n    DpUploadModal\n  },\n\n  directives: {\n    cleanhtml: CleanHtml,\n    tooltip: Tooltip\n  },\n\n  mixins: [prefixClassMixin],\n\n  props: {\n    /**\n     * The Tus endpoint requires basicAuth to be added to the file header.\n     */\n    basicAuth: {\n      type: String,\n      required: false,\n      default: ''\n    },\n\n    dataDpValidateErrorFieldname: {\n      type: String,\n      required: false,\n      default: ''\n    },\n\n    dataDpValidateIf: {\n      type: String,\n      default: '',\n      required: false\n    },\n\n    /**\n     * Only needed for testing purposes with data-cy\n     */\n    editorId: {\n      type: String,\n      required: false,\n      default: ''\n    },\n\n    /**\n     * Global path for file uploader endpoint.\n     */\n    tusEndpoint: {\n      type: String,\n      required: false,\n      default: ''\n    },\n\n    /**\n     * To send data with submit form action we sometimes need to have a hidden input with tiptap's content. If the\n     * hidden input should be added, the prop should be a string with input name (e.g. r_name)\n     */\n    hiddenInput: {\n      type: String,\n      required: false,\n      default: ''\n    },\n\n    required: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n\n    /**\n     * Defaults will be set in this.toolbar:\n     * {\n     *    headings: [], # Array of numbers 1-6\n     *    imageButton: false,\n     *    insertAndDelete: false,\n     *    fullscreenButton: true,\n     *    linkButton: false,\n     *    listButtons: true,\n     *    mark: false,\n     *    strikethrough: false,\n     *    table: false,\n     *    textDecoration: true\n     * }\n     *\n     * and can be overwritten\n     */\n    toolbarItems: {\n      required: false,\n      type: Object,\n      default: () => ({})\n    },\n\n    maxlength: {\n      type: [Number, null],\n      default: null\n    },\n\n    /**\n     * Set to true if you want to use the 'obscure text' button\n     */\n    obscure: {\n      type: Boolean,\n      required: false,\n      default: false\n    },\n\n    readonly: {\n      required: false,\n      default: false,\n      type: Boolean\n    },\n\n    /**\n     * getFileByHash: (Optional) function that receives a file hash as parameter\n     * and returns a route to that file. Used for displaying images.\n     */\n    routes: {\n      type: Object,\n      required: false,\n      default: () => ({}),\n      validator: (prop) => {\n        return Object.keys(prop).every(key => [\n          'getFileByHash'\n        ].includes(key))\n      }\n    },\n\n    /**\n     * Pass in an Array of suggestions if you would like to use the suggestion plugin in tiptap.\n     */\n    suggestions: {\n      type: Array,\n      validator: (value) => {\n        const suggestionGroupSchema = {\n          matcher: {\n            char: '@|$|#', // A single char that should trigger a suggestion\n            allowSpaces: true || false,\n            startOfLine: true || false\n          },\n          suggestions: [{ id: 'a unique id', name: 'a string that should be displayed when inserting the suggestion' }]\n        }\n        return Array.isArray(value) && value.filter(suggestionGroup => {\n          let isValid = suggestionGroup.matcher && suggestionGroup.suggestions\n          isValid = isValid && typeof suggestionGroup.matcher.char === typeof suggestionGroupSchema.matcher.char\n          isValid = isValid && typeof suggestionGroup.matcher.allowSpaces === typeof suggestionGroupSchema.matcher.allowSpaces\n          isValid = isValid && typeof suggestionGroup.matcher.startOfLine === typeof suggestionGroupSchema.matcher.startOfLine\n          isValid = isValid && suggestionGroup.suggestions.filter(suggestion => {\n            return typeof suggestion.id === typeof suggestionGroupSchema.suggestions[0].id && typeof suggestion.name === typeof suggestionGroupSchema.suggestions[0].name\n          }).length === suggestionGroup.suggestions.length\n          return isValid\n        }).length === value.length\n      },\n      required: false,\n      default: () => ([])\n    },\n\n    value: {\n      type: String,\n      required: true\n    }\n  },\n\n  data () {\n    return {\n      currentValue: '',\n      diffMenu: {\n        isOpen: false,\n        buttons: []\n      },\n      editingImage: null,\n      editor: null,\n      editorHeight: '',\n      isDiffMenuOpen: false,\n      isFullscreen: false,\n      isTableMenuOpen: false,\n      linkUrl: '',\n      // We have to check if we have a hidden input and a form, then we have to update the field manually. For Api-requests its not neccessary\n      manuallyResetForm: true,\n      tableMenu: {\n        isOpen: false,\n        buttons: [\n          {\n            label: 'editor.table.create',\n            command: () => this.editor.commands.insertTable({ rowsCount: 3, colsCount: 3, withHeaderRow: false }),\n            name: 'createTable'\n          },\n          {\n            label: 'editor.table.delete',\n            command: () => this.editor.commands.deleteTable(),\n            name: 'deleteTable'\n          },\n          {\n            label: 'editor.table.addColumnBefore',\n            command: () => this.editor.commands.addColumnBefore(),\n            name: 'addColumnBefore'\n          },\n          {\n            label: 'editor.table.addColumnAfter',\n            command: () => this.editor.commands.addColumnAfter(),\n            name: 'addColumnAfter'\n\n          },\n          {\n            label: 'editor.table.deleteColumn',\n            command: () => this.editor.commands.deleteColumn(),\n            name: 'deleteColumn'\n          },\n          {\n            label: 'editor.table.addRowBefore',\n            command: () => this.editor.commands.addRowBefore(),\n            name: 'addRowBefore'\n          },\n          {\n            label: 'editor.table.addRowAfter',\n            command: () => this.editor.commands.addRowAfter(),\n            name: 'addRowAfter'\n          },\n          {\n            label: 'editor.table.deleteRow',\n            command: () => this.editor.commands.deleteRow(),\n            name: 'deleteRow'\n          },\n          {\n            label: 'editor.table.toggleCellMerge',\n            command: () => this.editor.commands.mergeOrSplit(),\n            name: 'toggleCellMerge'\n          }\n        ]\n      },\n      toolbar: Object.assign({\n        /**\n         * Array with numbers 1-6 defining which heading-buttons we want to show\n         */\n        headings: [],\n        /**\n         * If true, the button to add images will be shown and the initial text will be scanned for img placeholders which will be then replaced by actual images.\n         */\n        imageButton: false,\n        /**\n         * Enables menu buttons to mark text as deleted and inserted.\n         * The buttons will wrap the current text selection with a `del` or `ins` element,\n         * enabling users to indicate content changes in relation to a prior content version.\n         * This feature is currently only used for planning document paragraphs.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins\n         */\n        insertAndDelete: false,\n        fullscreenButton: true,\n        /**\n         * Define if a button to add links should be visible in menu\n         */\n        linkButton: false,\n        /**\n         * Define if a button to add ordered/unordered list should be visible in menu\n         */\n        listButtons: true,\n        /**\n         * Enables a menu button to highlight/mark text.\n         * This will wrap the current text selection with a `mark` element,\n         * enabling users to enrich content with a semantic element to highlight text.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark\n         */\n        mark: false,\n        obscure: this.obscure,\n        /**\n         * Enables a menu button to strike out text.\n         * This will wrap the current text selection with a `s` element, enabling users\n         * to enrich content with a semantic element to mark text as no longer relevant.\n         * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s\n         */\n        strikethrough: false,\n        /**\n         * Set to true if you want table-insert button\n         */\n        table: false,\n        textDecoration: true\n      }, this.toolbarItems),\n      translations: {\n        ...de.editor,\n        insertImage: de.image.insert,\n        obscureTitle: de.obscure.title\n      }\n    }\n  },\n\n  computed: {\n    counterText () {\n      return maxlengthHint(this.hiddenInputValue.length, this.maxlength)\n    },\n\n    hiddenInputValue () {\n      // The blank tiptap editor still contains an empty p element, which shall not be passed into hidden input.\n      return (this.currentValue.replace('<p></p>', '') === '') ? '' : this.currentValue\n    },\n\n    obscureEnabled () {\n      return this.toolbar.obscure\n    }\n  },\n\n  watch: {\n    value (newValue) {\n      if (!this.editor.focused && this.editor.getHTML() !== newValue) {\n        this.currentValue = newValue\n        this.editor.commands.setContent(newValue, false)\n      }\n    },\n\n    /**\n     * The readonly watcher provides the dynamic enabling/disabling of the editor.\n     * Also mentioned in the GitHub issue: https://github.com/ueberdosis/tiptap/issues/111\n     */\n    readonly () {\n      this.editor.setOptions({ editable: !this.readonly })\n    }\n  },\n\n  methods: {\n    addAltTextToImage (text) {\n      this.$root.$emit('update-image:' + this.editingImage, { alt: text })\n      this.resetEditingImage()\n      this.setValue()\n    },\n\n    appendText (text) {\n      let newText\n\n      // Check if any of the two texts is wrapped in a 'p' tag to avoid inserting too many newlines\n      const isAnyNodeBlock = this.startsWithTag(this.currentValue, 'p') || this.startsWithTag(text, 'p')\n\n      // If editor is empty, insert only text; if editor contains text, insert empty paragraph + text\n      if (this.currentValue === 'k.A.' || this.currentValue === '') {\n        newText = text\n      } else if (this.currentValue !== 'k.A' && this.currentValue !== '' && isAnyNodeBlock) {\n        newText = this.currentValue + text\n      } else if (this.currentValue !== 'k.A' && this.currentValue !== '') {\n        newText = this.currentValue + '<br>' + text\n      }\n\n      this.editor.commands.setContent(newText)\n      this.currentValue = newText\n      this.$emit('input', this.currentValue)\n    },\n\n    collectExtensions () {\n      const extensions = [\n        Document,\n        Paragraph,\n        Text,\n        History,\n        HardBreak,\n        Heading.configure({ levels: this.toolbar.headings })\n      ]\n\n      extensions.push(InsertAtCursorPos)\n\n      if (this.suggestions.length > 0) {\n        this.suggestions.forEach(suggestion => {\n          extensions.push(Mention.configure({\n            HTMLAttributes: {\n              class: 'suggestion__node'\n            },\n            renderLabel({ node }) {\n              return suggestion.matcher.char + node.attrs.label\n            },\n            suggestion: buildSuggestion(suggestion)\n          }))\n        })\n      }\n\n      if (this.toolbar.headings.length > 0) {\n        extensions.push(Heading.configure({ levels: this.toolbar.headings }))\n      }\n\n      if (this.toolbar.imageButton) {\n        extensions.push(CustomImage)\n      }\n\n      if (this.toolbar.linkButton) {\n        extensions.push(CustomLink.configure({ openOnClick: false }))\n      }\n\n      if (this.toolbar.obscure) {\n        extensions.push(Obscure)\n      }\n\n      if (this.toolbar.listButtons) {\n        extensions.push(BulletList)\n        extensions.push(OrderedList)\n        extensions.push(ListItem)\n      }\n\n      if (this.toolbar.table) {\n        extensions.push(Table.configure({\n          resizable: true\n        }))\n        extensions.push(TableHeader)\n        extensions.push(TableCell)\n        extensions.push(TableRow)\n      }\n\n      if (this.toolbar.insertAndDelete) {\n        extensions.push(CustomDelete)\n        extensions.push(CustomInsert)\n\n        this.diffMenu.buttons = [\n          {\n            label: 'editor.diff.insert',\n            command: () => this.editor.chain().focus().toggleInsert().run(),\n            name: 'insert'\n          },\n          {\n            label: 'editor.diff.delete',\n            command: () => this.editor.chain().focus().toggleDelete().run(),\n            name: 'delete'\n          }\n        ]\n      }\n\n      if (this.toolbar.mark) {\n        extensions.push(CustomMark)\n\n        this.diffMenu.buttons.unshift({\n          label: 'editor.mark',\n          command: () => this.editor.chain().focus().toggleMarkText().run(),\n          name: 'mark'\n        })\n      }\n\n      if (this.toolbar.textDecoration) {\n        extensions.push(Bold)\n        extensions.push(Italic)\n        extensions.push(Underline)\n      }\n\n      if (this.toolbar.strikethrough) {\n        extensions.push(Strike)\n      }\n\n      return extensions\n    },\n\n    async cut () {\n      const selection = window.getSelection()\n\n      if (navigator.clipboard) {\n        try {\n          await navigator.clipboard.writeText(selection.toString())\n          selection.deleteFromDocument()\n        } catch (err) {\n          console.error(err)\n        }\n      } else {\n        // If Browser don't support Clipboard API.\n        try {\n          document.execCommand('cut')\n          selection.deleteFromDocument()\n        } catch (err) {\n          console.error(err)\n        }\n      }\n    },\n\n    executeSubMenuButtonAction (button, menu, activateOne = false) {\n      // If only one button in submenu can be enabled, deactivate the rest\n      if (activateOne) {\n        this[menu].buttons.forEach(subMenuButton => {\n          if (this.editor.isActive(subMenuButton.name) || subMenuButton === button) {\n            subMenuButton.command(this.editor.commands)\n          }\n        })\n      } else {\n        // If we just want to activate the clicked button without deactivating the other buttons in the submenu\n        button.command(this.editor.commands)\n      }\n\n      this[menu].isOpen = false\n    },\n\n    fullscreen (e) {\n      const editor = e.target.parentElement.parentElement.parentElement.querySelector('.tiptap .editor__content')\n      if (this.isFullscreen === false && editor.hasAttribute('style')) {\n        this.editorHeight = editor.getAttribute('style')\n        editor.removeAttribute('style')\n      }\n\n      this.isFullscreen = !this.isFullscreen\n\n      if (this.isFullscreen === false && this.editorHeight !== '') {\n        editor.setAttribute('style', this.editorHeight)\n      }\n    },\n\n    getLinkMark (node) {\n      return node.marks && node.marks.find(mark => mark.type.name === 'customLink')\n    },\n\n    handleInsertText (text) {\n      text = text.replace(/\\n/g, '<br>')\n\n      // If user hasn't clicked into tiptap editor yet\n      if (this.editor.view.input.lastClick.x === 0 && this.editor.view.input.lastClick.y === 0) {\n        this.appendText(text)\n      } else { // If user has clicked into tiptap editor at some point, but editor may currently not have focus\n        this.insertTextAtCursorPos(text)\n      }\n    },\n\n    insertTextAtCursorPos (text) {\n      // Remove p tags so text is inserted without adding new paragraph\n      if (this.startsWithTag(text, 'p')) {\n        text = text.slice(3, -4)\n      }\n\n      this.editor.commands.insertContent(text)\n      this.currentValue = this.editor.getHTML()\n    },\n\n    insertImage (url, alt) {\n      this.editor.commands.insertImage({ src: url, alt: alt })\n    },\n\n    insertUrl (linkUrl, newTab, linkText) {\n      if (linkUrl === null || linkUrl === '') {\n        this.editor.commands.unsetCustomLink({ extendEmptyMarkRange: true })\n      } else  if (linkText !== '') {\n        const selection = this.editor.view.state.selection\n\n        this.editor.commands.insertContent({\n          type: selection.node ? selection.node.type.name : 'text',\n          text: linkText,\n          marks: [\n            {\n              type: 'customLink',\n              attrs: {\n                href: linkUrl,\n                target: newTab ? '_blank' : null\n              }\n            }\n          ]\n        })\n      }\n    },\n\n    openUploadModal (data) {\n      this.$refs.uploadModal.toggleModal(data)\n    },\n\n    prepareInitText () {\n      this.currentValue = this.replaceLinebreaks(this.currentValue)\n      this.currentValue = this.replacePlaceholdersWithImages(this.currentValue)\n    },\n\n    replaceLinebreaks (text) {\n      let returnText = text\n      returnText = returnText.replace(/<\\/p>[\\n\\r\\s\\\\n\\\\r]*?<p>/g, '</p><p>')\n      returnText = returnText.replace(/<ul>[\\n\\r\\s\\\\n\\\\r]*?<li>/g, '<ul><li>')\n      return returnText.replace(/<\\/li>[\\n\\r\\s\\\\n\\\\r]*?<li>/g, '</li><li>')\n    },\n\n    replacePlaceholdersWithImages (text = this.currentValue) {\n      const placeholder = de.image.placeholder\n      const placeholderText = placeholder.startsWith('[') && placeholder.endsWith(']') ? placeholder.slice(1, -1) : placeholder\n      const regex = new RegExp(`(\\\\[${placeholderText}\\\\].*?-->)`, 'gm')\n      try {\n        return text.replace(regex, (match, p1) => {\n          const altText = p1.match(/{([^}]*?)}/)[1] === de.image.alt.placeholder ? '' : p1.match(/{([^}]*?)}/)[1]\n          const placeholder = p1.match(/<!-- (.*?) -->/)[1]\n          const imageHash = placeholder.substr(7, 36)\n          const imageWidth = placeholder.match(/width=(\\d*?)&/)[1]\n          const imageHeight = placeholder.match(/height=(\\d*?)$/)[1]\n          return `<img src=\"${this.routes.getFileByHash(imageHash)}\" width=\"${imageWidth}\" height=\"${imageHeight}\" alt=\"${altText}\">`\n        })\n      } catch (e) {\n        return text\n      }\n    },\n\n    resetEditingImage () {\n      this.editingImage = null\n    },\n\n    resizeVertically (e) {\n      const editor = e.target.parentElement.querySelector('.tiptap .editor__content')\n\n      e.preventDefault()\n      const originalHeight = parseFloat(getComputedStyle(editor, null).getPropertyValue('height').replace('px', ''))\n      const originalMouseY = e.pageY\n      window.addEventListener('mousemove', resize)\n      window.addEventListener('mouseup', stopResize)\n\n      function resize (ev) {\n        const height = originalHeight + (ev.pageY - originalMouseY)\n        editor.style.height = height + 'px'\n      }\n\n      function stopResize () {\n        window.removeEventListener('mousemove', resize)\n      }\n    },\n\n    resetEditor () {\n      this.editor.commands.setContent('')\n    },\n\n    setSelectionByEditor (nodeBefore, nodeAfter, attrs) {\n      const tr = this.editor.view.state.tr\n\n      if (nodeBefore) {\n        const linkMark = this.getLinkMark(nodeBefore)\n        if (linkMark && linkMark.attrs.href === attrs.href) {\n          this.editor.commands.setTextSelection({ from: (tr.selection.anchor - tr.selection.$anchor.nodeBefore.nodeSize), to: tr.selection.anchor })\n        }\n      }\n\n      if (nodeAfter) {\n        const linkMark = this.getLinkMark(nodeAfter)\n        if (linkMark && linkMark.attrs.href === attrs.href) {\n          this.editor.commands.setTextSelection({ from: tr.selection.anchor, to: (tr.selection.anchor + tr.selection.$anchor.nodeAfter.nodeSize) })\n        }\n      }\n    },\n\n    setValue () {\n      this.currentValue = this.editor.getHTML()\n      const regex = new RegExp('<span class=\"' + this.prefixClass('u-obscure') + '\">(.*?)<\\\\/span>', 'g')\n      this.currentValue = this.currentValue.replace(regex, '<dp-obscure>$1</dp-obscure>')\n      const isEmpty = (this.currentValue.split('<p>').join('').split('</p>').join('').trim()) === ''\n      this.$emit('input', isEmpty ? '' : this.currentValue)\n    },\n\n    showLinkPrompt (_command, attrs) {\n      this.linkUrl = attrs.href ? attrs.href : ''\n      const selection = this.editor.view.state.tr.selection\n\n      if (attrs.href) {\n        // If only a part of existing link text is selected, we want to add the rest of the link to the selection so that the user edits the whole link and not only part of it. To do that we take node before and after selection and check if the href attribute of these nodes is the same as href of the user's selection.\n        const selectToLeft = selection.anchor > selection.head\n\n        const selectionBeginning = selectToLeft ? '$head' : '$anchor'\n        const selectionEnd = selectToLeft ? '$anchor' : '$head'\n\n        const nodeBefore = selection[selectionBeginning].nodeBefore\n        const nodeAfter = selection[selectionEnd].nodeAfter\n\n        this.setSelectionByEditor(nodeBefore, nodeAfter, attrs)\n      }\n      const selectionText = this.editor.state.doc.textBetween(this.editor.view.state.tr.selection.from, this.editor.view.state.tr.selection.to, ' ')\n      this.$refs.linkModal.toggleModal(this.linkUrl, selectionText, attrs.target)\n    },\n\n    startsWithTag (htmlString, tag) {\n      const el = document.createElement('div')\n      el.innerHTML = htmlString\n      const firstChild = el.firstChild && el.firstChild.nodeName\n      return firstChild === tag.toUpperCase()\n    },\n\n    toggleSubMenu (menu, isOpen) {\n      this[menu].isOpen = isOpen\n\n      if (isOpen === true) {\n        const menuToClose = menu === 'tableMenu' ? 'diffMenu' : 'tableMenu'\n        this[menuToClose].isOpen = false\n        const closeMenu = () => {\n          this[menu].isOpen = false\n          document.removeEventListener('click', closeMenu)\n        }\n        document.addEventListener('click', closeMenu)\n      }\n    }\n  },\n\n  created () {\n    this.currentValue = this.value\n    this.prepareInitText()\n  },\n\n  mounted () {\n    this.editor = new Editor({\n      id: uuid(),\n      editable: !this.readonly,\n      extensions: this.collectExtensions(),\n      content: this.currentValue,\n      disableInputRules: true,\n      disablePasteRules: true,\n      onUpdate: () => {\n        this.setValue()\n      },\n      editorProps: {\n        handleDrop: (_view, _event, _slice, moved) => {\n          if (!moved) {\n            return true\n          }\n        },\n\n        transformPastedHTML: (slice) => {\n          /*\n           * Due to the strange Html format from Word clipbord, lists would not be displayed properly,\n           * so we have to handle paste from word manually.\n           */\n          slice = handleWordPaste(slice)\n          // Handle obscure tags - to handle the paste of fully obscured strings we need to overwrite the default paste behaviour and before the content is pasted we replace the obscure-styles with 'u-obscure' class\n          const obscureClass = this.prefixClass('u-obscure')\n          const obscureColor = getColorFromCSS(obscureClass)\n          let returnContent = slice\n\n          if (slice.includes(`span style=\"color: ${obscureColor}`)) {\n            returnContent = slice.replace(/(?:<meta [^>]*>\\s*<span [^>]*>\\s*)([^<]*?)(?:\\s*<\\/span>)/g, '$1')\n            returnContent = '<span class=\"' + obscureClass + '\">' + returnContent + '</span>'\n          }\n\n          // Strip anchor tags if link functionality is not active\n          if (this.toolbar.linkButton === false) {\n            returnContent = returnContent.replace(/<a[^>]*>(.*?)<\\/a>/g, '$1')\n          }\n\n          // Strip img tags from pasted and dropped content\n          returnContent = returnContent.replace(/<img.*?>/g, '')\n\n          return returnContent\n        }\n      },\n\n      onInit: ({ view }) => {\n        view._props.handleScrollToSelection = customHandleScrollToSelection\n      }\n    })\n\n    this.$root.$on('open-image-alt-modal', ({ event, imgId, editorId }) => {\n      if (this.editor.options.id !== editorId) {\n        return\n      }\n\n      this.editingImage = imgId\n      this.openUploadModal({ editAltOnly: true, currentAlt: event.target.getAttribute('alt'), imgSrc: event.target.getAttribute('src') })\n    })\n    /*\n     * On form-reset the editor has to be cleared manually.\n     * the inputs doesn't fire events in this case.\n     * in the data methods its to early to get the elements\n     */\n    this.manuallyResetForm = (this.hiddenInput !== '' && this.$el.closest('form') !== null)\n    if (this.manuallyResetForm) {\n      this.$el.closest('form').addEventListener('reset', this.resetEditor)\n    }\n\n    if (this.toolbar.imageButton ^ !!this.tusEndpoint) {\n      console.warn(`DpEditor is called with only one of toolbar.imageButton or tusEndpoint set. Both must be used.`)\n    }\n  },\n\n  beforeDestroy () {\n    if (this.editor) {\n      this.editor.destroy()\n      if (this.manuallyResetForm) {\n        this.$el.closest('form').removeEventListener('reset', this.resetEditor)\n      }\n    }\n  }\n}\n\n// Custom handling of scrolling after paste\nfunction windowRect (win) {\n  return {\n    left: 0,\n    right: win.innerWidth,\n    top: 0,\n    bottom: win.innerHeight\n  }\n}\nfunction getSide (value, side) {\n  return typeof value === 'number' ? value : value[side]\n}\nconst parentNode = function (node) {\n  const parent = node.parentNode\n  return parent && parent.nodeType === 11 ? parent.host : parent\n}\n\nfunction customHandleScrollToSelection (view, rect = view.coordsAtPos(view.state.selection.head), startDOM = view.docView.dom) {\n  const scrollThreshold = view.someProp('scrollThreshold') || 0\n  const scrollMargin = view.someProp('scrollMargin') || 5\n  const doc = view.dom.ownerDocument\n  const win = doc.defaultView\n\n  for (let parent = startDOM || view.dom; ; parent = parentNode(parent)) {\n    if (!parent) break\n    if (parent.nodeType !== 1) continue\n\n    const parentStyle = window.getComputedStyle(parent, null)\n    const atTop = (parentStyle['overflow-y'] === 'auto' || parentStyle['overflow-y'] === 'scroll' || parent.nodeType !== 1)\n    const bounding = atTop ? windowRect(win) : parent.getBoundingClientRect()\n    let moveX = 0\n    let moveY = 0\n\n    if (rect.top < bounding.top + getSide(scrollThreshold, 'top')) {\n      moveY = -(bounding.top - rect.top + getSide(scrollMargin, 'top'))\n    } else if (rect.bottom > bounding.bottom - getSide(scrollThreshold, 'bottom')) {\n      moveY = rect.bottom - bounding.bottom + getSide(scrollMargin, 'bottom')\n    }\n\n    if (rect.left < bounding.left + getSide(scrollThreshold, 'left')) {\n      moveX = -(bounding.left - rect.left + getSide(scrollMargin, 'left'))\n    } else if (rect.right > bounding.right - getSide(scrollThreshold, 'right')) {\n      moveX = rect.right - bounding.right + getSide(scrollMargin, 'right')\n    }\n\n    if (moveY) parent.scrollTop += moveY\n    if (moveX) parent.scrollLeft += moveX\n\n    if (atTop) break\n  }\n}\n\n// The function below is used to get the font color of obscured elements to be able to change the HTML on copy/paste of fully-obscured strings (used above in transformPastedHTML)\nfunction getColorFromCSS (className) {\n  const body = document.getElementsByTagName('body')[0]\n  const div = document.createElement('div')\n  div.className = className\n  div.id = 'tmpIdToGetColor'\n  body.appendChild(div)\n  const tmpDiv = document.getElementById('tmpIdToGetColor')\n  const color = window.getComputedStyle(tmpDiv).getPropertyValue('color')\n\n  body.removeChild(tmpDiv)\n  return color\n}\n</script>\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/src/components/DpEditor/DpEditor.vue b/src/components/DpEditor/DpEditor.vue
+--- a/src/components/DpEditor/DpEditor.vue	(revision 2a541f6932e5489844ce13967a7be3c4a8124342)
++++ b/src/components/DpEditor/DpEditor.vue	(date 1722341634033)
+@@ -1049,7 +1049,6 @@
+ 
+   mounted () {
+     this.editor = new Editor({
+-      id: uuid(),
+       editable: !this.readonly,
+       extensions: this.collectExtensions(),
+       content: this.currentValue,
+Index: package.json
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.BaseRevisionTextPatchEP
+<+>{\n  \"name\": \"@demos-europe/demosplan-ui\",\n  \"version\": \"0.3.24\",\n  \"license\": \"MIT\",\n  \"description\": \"Vue components, Vue directives, Design Token and Scss files to build interfaces for demosPlan.\",\n  \"main\": \"./dist/demosplan-ui.umd.js\",\n  \"dependencies\": {\n    \"@braintree/sanitize-url\": \"^7.0.0\",\n    \"@floating-ui/dom\": \"^1.4.5\",\n    \"@tiptap/core\": \"^2.0.3\",\n    \"@tiptap/extension-bold\": \"^2.0.3\",\n    \"@tiptap/extension-bullet-list\": \"^2.0.3\",\n    \"@tiptap/extension-document\": \"^2.0.3\",\n    \"@tiptap/extension-hard-break\": \"^2.0.3\",\n    \"@tiptap/extension-heading\": \"^2.0.3\",\n    \"@tiptap/extension-history\": \"^2.0.3\",\n    \"@tiptap/extension-italic\": \"^2.0.3\",\n    \"@tiptap/extension-link\": \"^2.0.3\",\n    \"@tiptap/extension-list-item\": \"^2.0.3\",\n    \"@tiptap/extension-mention\": \"^2.0.3\",\n    \"@tiptap/extension-ordered-list\": \"^2.0.3\",\n    \"@tiptap/extension-paragraph\": \"^2.0.3\",\n    \"@tiptap/extension-strike\": \"^2.0.3\",\n    \"@tiptap/extension-table\": \"^2.0.3\",\n    \"@tiptap/extension-table-cell\": \"^2.0.3\",\n    \"@tiptap/extension-table-header\": \"^2.0.3\",\n    \"@tiptap/extension-table-row\": \"^2.0.3\",\n    \"@tiptap/extension-text\": \"^2.0.3\",\n    \"@tiptap/extension-underline\": \"^2.0.3\",\n    \"@tiptap/pm\": \"^2.0.3\",\n    \"@tiptap/suggestion\": \"^2.0.3\",\n    \"@tiptap/vue-2\": \"^2.0.3\",\n    \"@uppy/core\": \"^3.0.1\",\n    \"@uppy/drag-drop\": \"^3.0.0\",\n    \"@uppy/progress-bar\": \"^3.0.0\",\n    \"@uppy/tus\": \"^3.0.1\",\n    \"a11y-datepicker\": \" ^0.9.0\",\n    \"dayjs\": \"^1.11.5\",\n    \"dompurify\": \"^3.0.0\",\n    \"fscreen\": \"^1.2.0\",\n    \"ismobilejs\": \"^1.1.1\",\n    \"lscache\": \"^1.3.2\",\n    \"plyr\": \"^3.7.2\",\n    \"qs\": \"^6.11.0\",\n    \"tippy.js\": \"^6.3.7\",\n    \"uuid\": \"^10.0.0\",\n    \"v-tooltip\": \"2.1.3\",\n    \"vue-click-outside\": \"^1.1.0\",\n    \"vue-multiselect\": \"^2.1.6\",\n    \"vue-omnibox\": \"^0.3.7\",\n    \"vue-sliding-pagination\": \"^1.3.2\",\n    \"vuedraggable\": \"^2.24.3\",\n    \"vuex\": \"^3.6.2\"\n  },\n  \"devDependencies\": {\n    \"@babel/core\": \"^7.21.4\",\n    \"@babel/preset-env\": \"^7.21.4\",\n    \"@babel/preset-react\": \"^7.23.3\",\n    \"@babel/preset-typescript\": \"^7.21.4\",\n    \"@jest/globals\": \"^29.5.0\",\n    \"@jest/transform\": \"^29.5.0\",\n    \"@storybook/addon-actions\": \"7.6.17\",\n    \"@storybook/addon-docs\": \"7.6.17\",\n    \"@storybook/addon-essentials\": \"7.6.17\",\n    \"@storybook/addon-links\": \"7.6.17\",\n    \"@storybook/addon-styling-webpack\": \"^0.0.6\",\n    \"@storybook/blocks\": \"^7.0.27\",\n    \"@storybook/components\": \"^7.0.27\",\n    \"@storybook/core-events\": \"^7.0.27\",\n    \"@storybook/preview-api\": \"^7.0.27\",\n    \"@storybook/theming\": \"^7.0.27\",\n    \"@storybook/types\": \"^7.0.27\",\n    \"@storybook/vue-webpack5\": \"7.6.17\",\n    \"@storybook/vue3\": \"^7.0.27\",\n    \"@types/eslint\": \"^9\",\n    \"@types/jest\": \"^29.5.1\",\n    \"@types/qs\": \"^6.9.7\",\n    \"@typescript-eslint/eslint-plugin\": \"^5.4.0\",\n    \"@typescript-eslint/parser\": \"^5.4.0\",\n    \"@vue/cli-plugin-typescript\": \"~5.0.0\",\n    \"@vue/cli-service\": \"^5.0.8\",\n    \"@vue/eslint-config-typescript\": \"^12.0.0\",\n    \"@vue/test-utils\": \"^1.3.5\",\n    \"@vue/vue2-jest\": \"^29.2.4\",\n    \"@webpack-cli/generators\": \"^3.0.0\",\n    \"autoprefixer\": \"^10.4.14\",\n    \"babel-core\": \"^7.0.0-bridge.0\",\n    \"babel-helper-vue-jsx-merge-props\": \"^2.0.3\",\n    \"babel-jest\": \"^29.5.0\",\n    \"babel-loader\": \"^9.1.2\",\n    \"babel-plugin-syntax-jsx\": \"^6.18.0\",\n    \"babel-plugin-transform-vue-jsx\": \"^3.7.0\",\n    \"css-loader\": \"^7.0.0\",\n    \"eslint\": \"^8.57.0\",\n    \"eslint-plugin-vue\": \"^9.27.0\",\n    \"glob\": \"^10.3.1\",\n    \"jest\": \"^29.5.0\",\n    \"jest-environment-jsdom\": \"^29.3.1\",\n    \"jest-junit\": \"^16.0.0\",\n    \"jest-transform-stub\": \"^2.0.0\",\n    \"js-beautify\": \"^1.14.7\",\n    \"mini-css-extract-plugin\": \"^2.7.0\",\n    \"path\": \"^0.12.7\",\n    \"postcss\": \"^8.4.26\",\n    \"postcss-loader\": \"^8.0.0\",\n    \"prop-types\": \"^15.8.1\",\n    \"prosemirror-model\": \"^1.18.1\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"storybook\": \"7.6.17\",\n    \"storybook-addon-vue-slots\": \"^0.9.21\",\n    \"string-width\": \"7.2.0\",\n    \"style-dictionary\": \"^3.9.2\",\n    \"style-loader\": \"^4.0.0\",\n    \"tailwindcss\": \"^3.2.1\",\n    \"ts-jest\": \"^29.1.0\",\n    \"ts-loader\": \"^9.4.4\",\n    \"typescript\": \"~5.5.3\",\n    \"vue\": \"^2.7.15\",\n    \"vue-jest\": \"^3.0.7\",\n    \"vue-loader\": \"^15\",\n    \"vue-template-compiler\": \"^2.7.15\",\n    \"webpack\": \"^5.75.0\",\n    \"webpack-bundle-analyzer\": \"^4.7.0\",\n    \"webpack-cli\": \"^5.0.0\"\n  },\n  \"engines\": {\n    \"node\": \">= 18.19.0\"\n  },\n  \"peerDependencies\": {\n    \"prosemirror-history\": \"^1.3.0\",\n    \"prosemirror-model\": \"^1.18.1\",\n    \"prosemirror-schema-basic\": \"^1.2.0\",\n    \"prosemirror-schema-list\": \"^1.2.2\",\n    \"prosemirror-state\": \"^1.4.1\",\n    \"prosemirror-tables\": \"^1.3.0\",\n    \"prosemirror-utils\": \"^1.2.0\",\n    \"prosemirror-view\": \"^1.28.2\",\n    \"vue\": \"^2.7.15\"\n  },\n  \"peerDependenciesMeta\": {\n    \"prosemirror-history\": {\n      \"optional\": true\n    },\n    \"prosemirror-model\": {\n      \"optional\": true\n    },\n    \"prosemirror-schema-basic\": {\n      \"optional\": true\n    },\n    \"prosemirror-schema-list\": {\n      \"optional\": true\n    },\n    \"prosemirror-state\": {\n      \"optional\": true\n    },\n    \"prosemirror-tables\": {\n      \"optional\": true\n    },\n    \"prosemirror-utils\": {\n      \"optional\": true\n    },\n    \"prosemirror-view\": {\n      \"optional\": true\n    }\n  },\n  \"scripts\": {\n    \"build:storybook\": \"storybook build\",\n    \"build:tokens\": \"node scripts/buildTokens.js\",\n    \"prepack\": \"yarn build && yarn build:tokens\",\n    \"storybook\": \"storybook dev -p 6006\",\n    \"build\": \"yarn test && yarn build:prod\",\n    \"build:dev\": \"webpack --mode=development\",\n    \"build:prod\": \"webpack --mode=production --define-process-env-node-env=production\",\n    \"test\": \"jest\",\n    \"watch\": \"webpack --watch\"\n  },\n  \"packageManager\": \"yarn@4.2.2\"\n}\n
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/package.json b/package.json
+--- a/package.json	(revision 2a541f6932e5489844ce13967a7be3c4a8124342)
++++ b/package.json	(date 1722341370895)
+@@ -129,13 +129,13 @@
+   },
+   "peerDependencies": {
+     "prosemirror-history": "^1.3.0",
+-    "prosemirror-model": "^1.18.1",
+-    "prosemirror-schema-basic": "^1.2.0",
+-    "prosemirror-schema-list": "^1.2.2",
+-    "prosemirror-state": "^1.4.1",
+-    "prosemirror-tables": "^1.3.0",
+-    "prosemirror-utils": "^1.2.0",
+-    "prosemirror-view": "^1.28.2",
++    "prosemirror-model": "^1.19.4",
++    "prosemirror-schema-basic": "^1.2.2",
++    "prosemirror-schema-list": "^1.3.0",
++    "prosemirror-state": "^1.4.3",
++    "prosemirror-tables": "^1.3.5",
++    "prosemirror-utils": "^1.2.2",
++    "prosemirror-view": "^1.32.7",
+     "vue": "^2.7.15"
+   },
+   "peerDependenciesMeta": {
+Index: yarn.lock
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+diff --git a/yarn.lock b/yarn.lock
+--- a/yarn.lock	(revision 2a541f6932e5489844ce13967a7be3c4a8124342)
++++ b/yarn.lock	(date 1722341380823)
+@@ -1799,13 +1799,13 @@
+     webpack-cli: "npm:^5.0.0"
+   peerDependencies:
+     prosemirror-history: ^1.3.0
+-    prosemirror-model: ^1.18.1
+-    prosemirror-schema-basic: ^1.2.0
+-    prosemirror-schema-list: ^1.2.2
+-    prosemirror-state: ^1.4.1
+-    prosemirror-tables: ^1.3.0
+-    prosemirror-utils: ^1.2.0
+-    prosemirror-view: ^1.28.2
++    prosemirror-model: ^1.19.4
++    prosemirror-schema-basic: ^1.2.2
++    prosemirror-schema-list: ^1.3.0
++    prosemirror-state: ^1.4.3
++    prosemirror-tables: ^1.3.5
++    prosemirror-utils: ^1.2.2
++    prosemirror-view: ^1.32.7
+     vue: ^2.7.15
+   peerDependenciesMeta:
+     prosemirror-history:

package/.idea/shelf/Uncommitted_changes_before_Checkout_at_30_07_2024_14_34__Changes_.xml

@@ -0,0 +1,4 @@
+<changelist name="Uncommitted_changes_before_Checkout_at_30_07_2024_14_34_[Changes]" date="1722342859584" recycled="true" deleted="true">
+  <option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Checkout_at_30_07_2024_14_34_[Changes]/shelved.patch" />
+  <option name="DESCRIPTION" value="Uncommitted changes before Checkout at 30 07 2024 14:34 [Changes]" />
+</changelist>