Update TipTap to not use a beta version anymore

client/package.json

@@ -51,13 +51,13 @@
     "@rollup/plugin-graphql": "^1.1.0",
     "@sentry/vite-plugin": "^2.5.0",
     "@sentry/vue": "^7.60.1",
-    "@tiptap/core": "^2.0.0-beta.174",
+    "@tiptap/core": "^2.1.11",
-    "@tiptap/extension-bullet-list": "^2.0.0-beta.26",
+    "@tiptap/extension-bullet-list": "^2.1.11",
-    "@tiptap/extension-document": "^2.0.0-beta.15",
+    "@tiptap/extension-document": "^2.1.11",
-    "@tiptap/extension-list-item": "^2.0.0-beta.20",
+    "@tiptap/extension-list-item": "^2.1.11",
-    "@tiptap/extension-paragraph": "^2.0.0-beta.23",
+    "@tiptap/extension-paragraph": "^2.1.11",
-    "@tiptap/extension-text": "^2.0.0-beta.15",
+    "@tiptap/extension-text": "^2.1.11",
-    "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@tiptap/vue-3": "^2.1.11",
     "@typescript-eslint/eslint-plugin": "^5.10.0",
     "@typescript-eslint/parser": "^5.10.0",
     "@vitejs/plugin-vue": "^3.0.3",

client/src/components/content-forms/TipTap.vue

@@ -14,94 +14,58 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
-import { PropType, defineComponent } from 'vue';
-import { Editor, EditorContent } from '@tiptap/vue-3';
 import Document from '@tiptap/extension-document';
 import Paragraph from '@tiptap/extension-paragraph';
 import Text from '@tiptap/extension-text';
 import BulletList from '@tiptap/extension-bullet-list';
 import ListItem from '@tiptap/extension-list-item';
+import { EditorContent, useEditor } from '@tiptap/vue-3';
 import Toggle from '@/components/ui/Toggle.vue';
-
+import { computed, watch } from 'vue';
-interface Data {
+import log from 'loglevel';
-  editor: Editor | undefined;
-}
 interface Value {
   text: string;
 }
+interface Props {
+  value: Value;
+}
 
-export default defineComponent({
+const props = defineProps<Props>();
-  props: {
+const emits = defineEmits(['input', 'change-text']);
-    value: {
+const text = computed(() => props.value.text || '');
-      type: Object as PropType<Value>,
+
-      validator: (value: Value) => {
+const editor = useEditor({
-        return Object.prototype.hasOwnProperty.call(value, 'text');
+  editorProps: {
-      },
+    attributes: {
+      class: 'tip-tap__editor',
     },
   },
-
+  content: text.value,
-  components: {
+  extensions: [Document, Paragraph, Text, BulletList, ListItem],
-    Toggle,
+  onUpdate: ({ editor }) => {
-    EditorContent,
+    log.debug('editor:onUpdate');
-  },
+    const text = editor.getHTML();
-
+    // emits('input', text);
-  data(): Data {
+    emits('change-text', text);
-    return {
-      editor: undefined,
-    };
-  },
-
-  computed: {
-    isList(): boolean {
-      return this.editor?.isActive('bulletList') || false;
-    },
-    text(): string {
-      return this.value?.text || '';
-    },
-  },
-
-  watch: {
-    value({ text }: Value) {
-      const editor = this.editor as Editor; // editor is always initialized on mount, cast it
-      const isSame = editor.getHTML() === text;
-
-      if (isSame) {
-        return;
-      }
-
-      editor.commands.setContent(text, false);
-    },
-  },
-
-  mounted() {
-    this.editor = new Editor({
-      editorProps: {
-        attributes: {
-          class: 'tip-tap__editor',
-        },
-      },
-      content: this.text,
-      extensions: [Document, Paragraph, Text, BulletList, ListItem],
-      onUpdate: () => {
-        const text = (this.editor as Editor).getHTML();
-        this.$emit('input', text);
-        this.$emit('change-text', text);
-      },
-    });
-  },
-
-  beforeUnmount() {
-    this.editor?.destroy();
-  },
-
-  methods: {
-    toggleList() {
-      const editor = this.editor as Editor;
-      editor.chain().selectAll().toggleBulletList().run();
-    },
   },
 });
+
+watch(text, (newText: string, _oldText: string) => {
+  const isSame = editor.value?.getHTML() === newText;
+
+  if (isSame) {
+    return;
+  }
+
+  editor.value?.commands.setContent(newText, false);
+});
+
+const isList = computed(() => editor.value?.isActive('bulletList') || false);
+const toggleList = () => {
+  console.log('toggleList');
+  editor.value?.chain().selectAll().toggleBulletList().run();
+};
 </script>
 
 <style scoped lang="scss">