[Streamlit-Ace] Clearing out editor after making changes

🧩 Custom Components
1

Summary

Use case: I want a user to input data into one editor, that saves it to an already existing json. In a separate tab, I have an editor that shows the aforementioned json, where user can make changes to it. I want the first editor emptied out after any changes have been made to it.

Steps to reproduce

Code snippet:

#First editor that takes user's input (Tab 1)
user_input = st_ace(value="[]", language="json", theme="clouds_midnight")
if len(user_input) > 2:
    org_json['list_of_values'] += json.loads(user_input)

#Second editor that combines user_input and original json (Tab 2)
org_json = json.loads(st_ace(value=json.dumps(org_json, indent=2), language="json", theme="clouds_midnight"))

Actual behavior:
When I make a change in Tab 2, like deleting something, it doesn’t get deleted. Since Tab 1 still has the old output, it adds the Tab 1 output once again. This can be solved by clearing out Tab 1 editor once user has committed their changes.

If anyone can suggest a workaround that would be great. Thanks in advance!

2

Hi @Manas_Swami

Thanks for sharing the code snippet with the question. It seems that not enough info was provided to allow others in the community to understand the problem encountered. Could you share the full code of the app that reproduces this error.

Best regards,
Chanin

3

@Manas_Swami I used this answer as inspiration for my solution. I was already creating a hash ID for my SQL code:

# Creates a query hash ID
return hashlib.md5(self.sql.encode("utf-8", "ignore")).hexdigest()

I just used that hash ID in the key name:

st_ace(
  value=self._current_query_sql,
  language="sql",
  key=f"ace_view_{st.session_state.q_ace_editor_view_key}",
  height=1000,
  readonly=True,
  theme="tomorrow_night_eighties",
  font_size=st.session_state["q_ace_editor_font_size_default"],
  auto_update=False
)

I probably need to check for stale keys at somepoint when the app reboots.

regards