Studio lags and cuts characters from typing as it autosaves

[aidanm1999]

Describe the bug

When adding nested content into one document's portable text editor, the studio becomes laggy and unusable, causing some of the characters to be removed whilst typing, especially in tooltips. See video below in Screenshots.

To Reproduce

Steps to reproduce the behaviour:

NB: If you want to skip the set-up process and install a minimal reproducible example, fork aidanm1999/sanity-test, run cd studio && npx sanity init to configure as your own account and continue to step 6

1. Create a new site from the Portfolio with Gatsby template
2. Clone and cd into repo
3. Add an object to the schema called columns in studio/schemas/documents/columns.js :

import React from "react";
import simplePortableText from "./simplePortableText";

export default {
    name: "columns",
    type: "object",
    title: "Columns",
    fields: [
        {
            ...simplePortableText,
            title: undefined,
            name: "left",
        },
        {
            ...simplePortableText,
            title: undefined,
            name: "right",
        },
    ],
    options: {
        editModal: "fullscreen",
        columns: 2,
    },
    preview: {
        component: () => (
            <div>
                <b>Columns</b>
                <p>Double click to open</p>
            </div>
        ),
    },
};

1. Edit the main schema in studio/schemas/schema.js by importing columns.js and adding it to the types array:

// First, we must import the schema creator
import createSchema from 'part:@sanity/base/schema-creator'

// Then import schema types from any plugins that might expose them
import schemaTypes from 'all:part:@sanity/base/schema-type'

// Document types
import category from './documents/category'
import person from './documents/person'
import sampleProject from './documents/sampleProject'
import siteSettings from './documents/siteSettings'

// Object types
import bioPortableText from './objects/bioPortableText'
import figure from './objects/figure'
import projectMember from './objects/projectMember'
import projectPortableText from './objects/projectPortableText'
import simplePortableText from './objects/simplePortableText'
import columns from './objects/columns'

// Then we give our schema to the builder and provide the result to Sanity
export default createSchema({
  // We name our schema
  name: 'portfolio',
  // Then proceed to concatenate our our document type
  // to the ones provided by any plugins that are installed
  types: schemaTypes.concat([
    // When added to this list, object types can be used as
    // { type: 'typename' } in other document schemas
    bioPortableText,
    figure,
    projectMember,
    projectPortableText,
    simplePortableText,
    columns,
    // The following are document types which will appear
    // in the studio.
    category,
    person,
    sampleProject,
    siteSettings
  ])
})

1. Edit the schema of simplePortableText in studio/schemas/objects/simplePortableText.js . Below we are adding the columns type in the array and adding an external url object in the annotations :

/**
 * This is the schema definition for the rich text fields used for
 * for this blog studio. When you import it in schemas.js it can be
 * reused in other parts of the studio with:
 *  {
 *    name: 'someName',
 *    title: 'Some title',
 *    type: 'simplePortableText'
 *  }
 */
export default {
  title: 'Portable Text',
  name: 'simplePortableText',
  type: 'array',
  of: [
    {
      title: 'Block',
      type: 'block',
      // Styles let you set what your user can mark up blocks with. These
      // corrensponds with HTML tags, but you can set any title or value
      // you want and decide how you want to deal with it where you want to
      // use your content.
      styles: [{title: 'Normal', value: 'normal'}],
      lists: [],
      // Marks let you mark up inline text in the block editor.
      marks: {
        // Decorators usually describe a single property – e.g. a typographic
        // preference or highlighting by editors.
        decorators: [
          {title: 'Strong', value: 'strong'},
          {title: 'Emphasis', value: 'em'},
          {title: 'Code', value: 'code'}
        ],
        // Annotations can be any object structure – e.g. a link or a footnote.
        annotations: [
          {
              name: "link",
              type: "object",
              title: "External link",
              fields: [
                  {
                      name: "href",
                      type: "url",
                      title: "URL",
                      validation: (Rule) =>
                          Rule.uri({
                              scheme: ["https", "mailto", "tel"],
                          }),
                  },
              ],
          },
        ]
      }
    },
    {
      type: 'columns'
    }
  ]
}

1. Run the studio npm i && cd studio && npm run dev and open in the browser

2. Navigate to Desk > Sample projects > [A project] > Excerpt

3. Repeat this process 3 times:

   1. In the portable text editor add 5 paragraphs of lorem ipsum

   2. Then add a column

   3. Double click into the column

   4. Open of the portable text editors

      NB: The lorem ipsum is used to simulate real content & is used to increase the data size of the document (increasing lag)

4. You should now be 3 portable texts deep. Add an external link by adding some text, highlighting it and clicking the link icon.

5. Open the tooltip and start typing a valid url. E.g. https://www.sanity.io/docs/sanity-studio

6. You should see the url being chopped around as the studio auto-saves. See video below for actual behaviour.

Expected behaviour

The text entered should not be deleted as the editor types.

Screenshots

During this recording, the following was typed: https://www.google.com/search? and nothing was deleted manually.

https://user-images.githubusercontent.com/36016925/157262570-c49dee27-774b-4b1e-b286-8179ce92f1af.mov

Which versions of Sanity are you using?

@sanity/cli             2.27.3 (up to date)
@sanity/base            2.27.2 (up to date)
@sanity/cli             2.27.3 (up to date)
@sanity/components      2.14.0 (up to date)
@sanity/core            2.27.0 (up to date)
@sanity/dashboard       2.27.2 (up to date)
@sanity/default-layout  2.27.2 (up to date)
@sanity/default-login   2.27.0 (up to date)
@sanity/desk-tool       2.27.3 (up to date)
@sanity/structure       2.27.0 (up to date)
@sanity/studio-hints    2.24.1 (up to date)

What operating system are you using?

MacOS 12.3

Which versions of Node.js / npm are you running?

npm 7.20.6 node v14.17.4

[mlent]

Did you find a solution for this? I have the same issue anytime there are too many blocks in the content.

[aidanm1999]

No luck @mlent, we might try the developer preview of Sanity which might fix the issue

[AlejandroGarciaMaya]

Hey @aidanm1999 or @mlent did you find a final solution for this? Same issue here.

[bjoerge]

If you're still on v2 we did a series of performance fixes back in v2.34.0, so running sanity upgrade will likely improve things a lot for you all.

[aidanm1999]

Thanks @bjoerge, I upgraded packages to 2.35.0 and it has slightly improved. Less cursor jumping but I can still trigger easily (typed: https://www.google.,com with accidental comma)

https://user-images.githubusercontent.com/36016925/200354301-cc66c2b8-5628-448a-9de7-7f1662294f6d.mov

[kmelve]

Hi!

We are currently working on improving our workflows and follow-up on our open GitHub repository. In that work, we have decided to close most issues older than the release of Sanity Studio v3.

We value your feedback, so if this issue is still important to you and relevant for Sanity Studio v3, please search for relevant open issues. If you can’t find any, open a new one and link to relevant comments in this thread. For questions about how to do something, please post them in the slack community.

[ifeltsweet]

This should be reopened as it was solved only for portable editor, but not for string and text field inputs.