yorkie-team / dashboard

Dashboard is an administrative tool that allows users to manage projects and documents with ease.
https://yorkie.dev/dashboard/
Apache License 2.0
20 stars 13 forks source link

Script error when accessing a document containing special characters in Tree data type #139

Closed chacha912 closed 3 months ago

chacha912 commented 3 months ago

Description:

When displaying documents with special characters such as double quotes " or new lines \n within the Tree data type, an error occurs on the dashboard when viewing the document.

image image

How to reproduce it (as minimally and precisely as possible):

  1. Run the provided HTML code with your apiKey included.
  2. View the document on the dashboard.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>test</div>

    <!-- include yorkie js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/yorkie-js-sdk/0.4.13/yorkie-js-sdk.js"></script>
    <script>
      globalThis.process = {
        env: { },
      };
      async function main() {
        const client = new yorkie.Client('https://api.yorkie.dev', {
          apiKey: '', // enter your apiKey
        });
        await client.activate();

        const doc = new yorkie.Document('docKey');
        await client.attach(doc);

        doc.update((root) => {
          root.t = new yorkie.Tree({
            type: 'doc',
            children: [
              {
                type: 'p',
                children: [{ type: 'text', value: 'hello"\n' }],
                attributes: { bold: true },
              },
            ],
          });
        });
      }
      main();
    </script>
  </body>
</html>