tiptap tiptap-track-change-extension

Question

"dependencies": {
    "@tiptap/core": "^2.0.0-beta.220",
    "@tiptap/pm": "^2.0.0-beta.220",

    "core-js": "^3.8.3",
    "element-tiptap-vue3-fixed": "^1.2.3",
    "vue": "^3.2.13"
  },

<template>
  <div>
    <!-- 切换修订模式的按钮 -->
    <span @click="toggleTrackChange" size="small">
      {{ myTrackChangeEnabled ? "关闭修订" : "开启修订" }}
    </span>
    {{ content }}
    <element-tiptap
      v-model:content="content"
      :extensions="extensions"
      ref="editorRef"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import {
  // necessary extensions
  Doc,
  Text,
  Paragraph,
  Table,
  //________________________
  Heading,
  Bold,
  Underline,
  Italic,
  Strike,
  BulletList,
  OrderedList,
  ElementTiptap,
} from "element-tiptap-vue3-fixed";

// editor extensions
import "element-tiptap-vue3-fixed/lib/style.css";
// they will be added to menubar and bubble menu by the order you declare.
import TrackChangeExtension from "./track-change-extension";

const myTrackChangeEnabled = ref(true);
const editorRef = ref(null);

const userId = "user-007"; // set the op userId
const userNickname = "James Bond"; // set the op user nickname

const extensions = [
  Doc,
  Text,
  Paragraph,
  Table,
  Heading.configure({ level: 5 }),
  TrackChangeExtension.configure({
    enabled: true,
    dataOpUserId: userId, // set the op userId
    dataOpUserNickname: userNickname, // set the op user nickname
    onStatusChange(status) {
      myTrackChangeEnabled.value = status;
    },
  }),
  Bold.configure({ bubble: true }), // render command-button in bubble menu.
  Underline.configure({ bubble: true, menubar: false }), // render command-button in bubble menu but not in menubar.
  Italic,
  Strike,
  BulletList,
  OrderedList,
];

// editor's content
const content = ref(`
  <h1>Heading</h1>
  <p>This Editor is awesome!</p>
`);

// 切换修订模式
const toggleTrackChange = () => {
  if (editorRef.value && editorRef.value.editor) {
    editorRef.value.editor.commands.toggleTrackChangeStatus();
  }
};

// 可选：在组件挂载后获取当前修订状态
onMounted(() => {
  if (editorRef.value && editorRef.value.editor) {
    myTrackChangeEnabled.value =
      editorRef.value.editor.commands.getTrackChangeStatus();
  }
});
</script>

<style>
/* TipTap Editor Custom Styles */
insert {
  color: green !important;
  text-decoration: underline;
}

delete {
  color: red !important;
  text-decoration: line-through;
}
</style>

./track-change-extension文件就是
这里引入的是 https://github.com/chenyuncai/tiptap-track-change-extension/blob/master/src/index.ts 这个文件
你好 打扰了 为什么 开启修订模式后删除的时候删不掉 官方的文件中有bug？还是依赖版本问题

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题理解

你正在使用 Tiptap 富文本编辑器，并且使用了 tiptap-track-change-extension 扩展。然而，你遇到了一个问题，可能与依赖版本有关。

问题分析

从你的问题描述中，我可以看出，你使用了 Tiptap 的 core 和 pm 依赖，版本都是 ^2.0.0-beta.220。但是，你没有指定 tiptap-track-change-extension 的版本。

解决方案

为了解决这个问题，你可以尝试以下几步：

1. 确保你已经安装了 tiptap-track-change-extension 扩展，使用 npm install 或 yarn add 命令安装。
2. 检查 package.json 文件中的依赖版本，确保 tiptap-track-change-extension 的版本与 @tiptap/core 和 @tiptap/pm 的版本匹配。
3. 如果以上步骤无法解决问题，请尝试更新 tiptap-track-change-extension 的版本，或者使用最新的稳定版本。

核心代码

npm install @tiptap/extension-track-change

或者

yarn add @tiptap/extension-track-change

请注意，以上代码仅供参考，具体解决方案可能需要根据你的项目具体情况进行调整。