Script error when executing `tree.styleByPath` #134

chacha912 · 2023-07-27T11:57:33Z

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.

tree-error.mov

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

The text was updated successfully, but these errors were encountered:

hackerwins · 2023-10-26T02:46:07Z

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

hackerwins added the bug 🐞 Something isn't working label Jul 27, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Script error when executing `tree.styleByPath` #134

Script error when executing `tree.styleByPath` #134

chacha912 commented Jul 27, 2023

hackerwins commented Oct 26, 2023 •

edited

Script error when executing tree.styleByPath #134

Script error when executing tree.styleByPath #134

Comments

chacha912 commented Jul 27, 2023

hackerwins commented Oct 26, 2023 • edited

Script error when executing `tree.styleByPath` #134

Script error when executing `tree.styleByPath` #134

hackerwins commented Oct 26, 2023 •

edited