Script error when executing `tree.styleByPath`

chacha912 commented 1 year ago

Description:

While using yorkie.Tree, an error occurs only in the dashboard, not in the app, when trying to view document. The error message is left and right are not in the same list.

https://github.com/yorkie-team/dashboard/assets/81357083/659ce6e5-0fb1-4380-9a95-3f407269d5b9

How to reproduce:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>There are currently <span id="peersCount"></span> peers!</div>
    <button id="styleButton">styleByPath</button>
    <!-- include yorkie js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.4/yorkie-js-sdk.js"></script>
    <script>
      async function main() {
        const client = new yorkie.Client('https://api.yorkie.dev', {
          apiKey: '👉enter-your-key',
        });
        await client.activate();
        client.subscribe((event) => {
          if (event.type === 'peers-changed') {
            const peers = client.getPeersByDocKey(doc.getKey());
            document.querySelector('#peersCount').innerHTML = peers.length;
          }
        });
        const doc = new yorkie.Document('sample-tree');
        doc.update((root) => {
          root.tree = new yorkie.Tree({
            type: 'root',
            children: [
              {
                type: 'comp1',
                children: [
                  {
                    type: 'comp2',
                    children: [
                      {
                        type: 'comp3',
                        children: [
                          {
                            type: 'comp4',
                            children: [],
                          },
                        ],
                      },
                    ],
                  },
                ],
              },
              {
                type: 'comp1',
                children: [
                  {
                    type: 'comp3',
                    children: [
                      {
                        type: 'comp4',
                        children: [],
                      },
                    ],
                  },
                ],
              },
            ],
          });
          root.selection = {};
        });
        await client.attach(doc);

        doc.update((root) => {
          root.tree.editByPath([1, 0, 0, 0], [1, 0, 0, 0], { type: 'text', value: 'a' });
        });
        doc.update((root) => {
          root.tree.editByPath([1], [1], {
            type: 'comp1',
            children: [
              { type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
              { type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
              { type: 'tableRow', children: [{ type: 'tableCell' }, { type: 'tableCell' }, { type: 'tableCell' }] },
            ],
          });
        });

        document.querySelector('#styleButton').addEventListener('click', () => {
          // 🚨 error occurs
          doc.update((root) => {
            root.tree.styleByPath([1], { bold: true });
          });
        });
      }
      main();
    </script>
  </body>
</html>

Update the API key in the code and open the browser. (You can get the API key of the project on Dashboard.
Before clicking the button, the document displays correctly on the dashboard.
When clicking the button, the tree.styleByPath is executed, which results in an error on the dashboard.

Probable Cause: The issue occurs when retrieving documents in the dashboard using the admin API GetDocument. During the handling of the GetDocument request on the server, the document is built using BuildDocumentForServerSeq(go). However, in the app, the document is built using js-sdk. So, there seems to be a difference in behavior between Go and JS-SDK, leading to errors in the dashboard(Go) but not in the app(JS-SDK).

Environment:

Yorkie JS SDK version: v0.4.4

hackerwins commented 11 months ago

@chacha912 We have stabilized yorkie.Tree until the v0.4.7 release. Can you please confirm if this problem still occurs?

chacha912 commented 1 month ago

As this issue no longer seems to occur, I'll be closing it.

yorkie-team / dashboard

Script error when executing `tree.styleByPath` #134