TipTap Collaboration 在 Next.js 上不起作用？

Question

问题： 我有两个会话加载了相同的

id

和

token

传入；但是，相同的文档尚未加载。会话协作所需的只是那些匹配的属性，对吗？？

使用的框架/技术：Next.js

UI/屏幕截图： 正如你们在下面看到的，我在 UI 上记录了令牌和 ID 的最后四位数字，因此你们可以看到两个会话正在加载完全相同的相同的令牌和 ID...

我在 UI 上记录了令牌和 ID 的最后四位数字，因此你们可以看到两个会话正在加载完全相同的令牌和 ID...

代码片段：

export default function TextEditor() {
  const CustomDocument = Document.extend({
    content: 'heading block*',
  });
  const getURLTokenAndID = () => {
    const urlParams = new URLSearchParams(window.location.search);
    return { URL_ID: urlParams.get('id'), URL_TOKEN: urlParams.get('token') };
  };
  const { URL_ID, URL_TOKEN } = getURLTokenAndID();
  const doc = new Y.Doc();
  const [token, setToken] = useState<string>(URL_TOKEN || '');
  const [loading, setLoading] = useState(true);
  const [documentID, setDocumentID] = useState<string>(URL_ID || uniqueID);

 // Redacted the ActionButton implementation

  useEffect(() => {
    // Function to fetch token and set loading to false
    const fetchToken = async () => {
      // Fetch token
      try {
        const response = await fetch('http://localhost:8888/getCollabToken');
        if (!response.ok) {
          throw new Error('Failed to fetch token');
        }
        const data = await response.json();
        setToken(data.token);
        setLoading(false);
      } catch (error) {
        // setError(error.message);
        setLoading(false);
      }
    };
    // Fetch token if URL_TOKEN is not provided
    if (!URL_TOKEN) {
      fetchToken();
    } else {
      // Set collabToken if URL_TOKEN is provided
      setToken(URL_TOKEN);
      if (URL_ID) {
        setDocumentID(URL_ID);
      }
      setLoading(false);
    }
  }, [URL_TOKEN, URL_ID]);

  // TODO: Cleanup usages of 3 useEffects
  useEffect(() => {
    if (!URL_TOKEN) setToken(token || '');
    const provider = new TiptapCollabProvider({
      name: documentID, // any identifier - all connections sharing the same identifier will be synced
      appId: 'rm8441ko',
      token: token,
      document: doc,
    });
    return () => {
      provider.destroy();
    };
  }, []);

  const editor = useEditor({
    extensions: [
      CustomDocument,
      StarterKit.configure({
        document: false,
        history: false,
      }),
      Placeholder.configure({
        placeholder: ({ node }) => {
          return node.type.name === 'heading' &&
            node.attrs &&
            node.attrs.levels === 1
            ? 'What’s the song title?'
            : '';
        },
      }),
      Underline,
      Collaboration.configure({
        document: doc,
      }),
    ],
  });

  useEffect(() => {
    editor?.commands.setContent(
      '<h1>Content</h1>`
    );
  }, [editor]);

  return loading ? (
    <AiOutlineLoading className={styles.spinner} />
  ) : (
    <>
      <h2>Collab Token: {token.slice(-4)}</h2>
      <h2>DocumentID: {documentID.slice(-4)}</h2>
      <EditorContent editor={editor} className={styles.editorContent} />
    </>
  );
}

我尝试过的：几乎完全遵循TipTap协作指南演练（减去变量名称和API路由的灵活性）。

Answer 1

在我这边效果很好。我的代码中唯一的变化是我没有在 Provider 中使用令牌。