Repository: supabase/supabase
File: apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx (TypeScript)

Code before:
      onHasSelection(!noSelection)
    })

    if (autoFocus) {
      if (editor.getValue().length === 1) editor.setPosition({ lineNumber: 1, column: 2 })
      editor.focus()
    }

    onMount?.(editor)
  }

  function handleEditorChange(value: string | undefined) {
    tabsSnap.makeActiveTabPermanent()
    if (id && value) {
      if (!!snippet) {
        setValue(value)
      } else if (ref && profile !== undefined && project !== undefined) {
        const snippet = createSqlSnippetSkeletonV2({
          idOverride: id,
          name: snippetName,
          sql: value,
          owner_id: profile?.id,
          project_id: project?.id,
        })
        snapV2.addSnippet({ projectRef: ref, snippet })
        snapV2.addNeedsSaving(snippet.id)
        router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
      }
    }
  }

  useEffect(() => {
    if (debouncedValue.length > 0 && snippet) {
      snapV2.setSql(id, value)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedValue])

  // if an SQL query is passed by the content parameter, set the editor value to its content. This
  // is usually used for sending the user to SQL editor from other pages with SQL.
  useEffect(() => {
    if (content && content.length > 0) handleEditorChange(content)
  }, [])

  return (
    <>
      {disableEdit && (
        <Admonition
          type="default"
          className="rounded-none border-0 border-b"
          title="Read-only snippet"

Review comment (refactor):
hmm just to check if this one's needed? cause i think the `useEffect` below [here](https://github.com/supabase/supabase/blob/master/apps/studio/components/interfaces/SQLEditor/MonacoEditor.tsx#L208) will also trigger the save for the snippet, so it feels like a duplicate action

can confirm the following: lets say im writing a new snippet and im typing fast, we'll be sending a PUT content request when the snippet gets created, and after i stop typing, we'll send another PUT request after the debounce duration

it's a nit really, but am thinking we can remove this to save us one API call

Code after:
      onHasSelection(!noSelection)
    })

    if (autoFocus) {
      if (editor.getValue().length === 1) editor.setPosition({ lineNumber: 1, column: 2 })
      editor.focus()
    }

    onMount?.(editor)
  }

  function handleEditorChange(value: string | undefined) {
    tabsSnap.makeActiveTabPermanent()
    if (id && value) {
      if (ref && profile !== undefined && project !== undefined) {
        const snippet = createSqlSnippetSkeletonV2({
          idOverride: id,
          name: snippetName,
          sql: value,
          owner_id: profile?.id,
          project_id: project?.id,
        })
        snapV2.addSnippet({ projectRef: ref, snippet })
        router.push(`/project/${ref}/sql/${snippet.id}`, undefined, { shallow: true })
      }
      setValue(value)
    }
  }

  useEffect(() => {
    if (debouncedValue.length > 0 && snippet) {
      snapV2.setSql(id, value)
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [debouncedValue])

  // if an SQL query is passed by the content parameter, set the editor value to its content. This
  // is usually used for sending the user to SQL editor from other pages with SQL.
  useEffect(() => {
    if (content && content.length > 0) handleEditorChange(content)
  }, [])

  return (
    <>
      {disableEdit && (
        <Admonition
          type="default"
          className="rounded-none border-0 border-b"
          title="Read-only snippet"
          description="This snippet has been shared to the project and is only editable by the owner who created this snippet. You may duplicate this snippet into a personal copy by right clicking on the snippet and selecting “Duplicate query”."
        />