dashboard Script error when executing `tree.styleByPath`

Script error when executing `tree.styleByPath`

Open chacha912 opened this issue 11 months ago • 1 comments

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

Jul 27 '23 11:07 chacha912

dashboard dashboard copied to clipboard

Script error when executing `tree.styleByPath`

dashboard
dashboard copied to clipboard