How do I add multiple tabs functionality in the react Ace editor ? , Can somebody please provide a workaround, I am beginner in programming, If somebody could help me out it would be great

[ghost]

Problem

Detail the problem here, including any possible solutions.

Sample code to reproduce your issue

References

Progress on: #

[mikebarkmin]

This might help: https://gitlab.com/openpatch/web-frontend/-/blob/master/formats/code/index.js#L94

[ghost]

Thanks for the info.

[ghost]

But the above solution does not retain undo functionality .

[mikebarkmin]

This is because we use one editor for all tabs. Think we would need to implement something likes this
ajaxorg/ace#1452 (comment)

Store each session in state and then reapplying it when the tab is changed.

[ghost]

I will check it out .

[MatthewCaseres]

Having multiple editors and keeping some of them hidden seems like it will work for me, haven't tested extensively.

{tabs.map((tab, i) => (
        <AceEditor
          key={i}
          value={tab.content}
          mode="python"
          name={`CodeBlock_${i}`}
          fontSize="0.9rem"
          className="-mt-1 min-h-[4rem] overflow-clip rounded shadow-md"
          style={{ display: i === tabIndex ? 'block' : 'none' }}
          theme="idle_fingers"
          onChange={(newValue) =>
            dispatch({
              type: 'SET_TABS',
              payload: produce(tabs, (draft) => {
                draft[i].content = newValue
              }),
            })
          }
          width="100%"
          maxLines={Infinity}
          onLoad={editorOnLoad}
          editorProps={{ $blockScrolling: true }}
          setOptions={editorOptions}
        />
      ))}
      {showOutput && (
        <pre className=" overflow-auto text-left">
          <code>{stdout}</code>
          <code className="text-red-500">{stderr}</code>
        </pre>
      )}