Hidden panels

How to implement a "hidden" side panel?

It is possible to implement a side panel that will not be visible in the list of panels. But still, you can open it based on some user actions.
Polotno itself has several such panels that are visible only on specific button click, for example "clip image".

To implement hidden panel you can do this:

// define the new custom section
const CustomSection = {
  name: 'custom-text',
  // use "empty" tab that will render nothing
  Tab: () => null,
  // we need observer to update component automatically on any store changes
  Panel: observer(({ store }) => {
    const text = store.selectedElements[0]?.text;
    return (
      <div>
        <InputGroup
          value={text}
          onChange={() => {
            store.selectedElements[0].set({ text: e.target.value });
          }}
        />
      </div>
    );
  }),
};

// add new section to side bar
const sections = [...DEFAULT_SECTIONS, CustomSection];

// use mobx reaction to react to selection changes
reaction(
  () => {
    const textSelected = store.selectedElements[0]?.type === 'text';
    return textSelected;
  },
  // we can use result returned from reaction
  (textSelected) => {
    if (textSelected) {
      store.openSidePanel('custom-text');
    }
  }
);

export const App = () => {
  return (
    <PolotnoContainer className="polotno-app-container">
      <SidePanelWrap>
        <SidePanel store={store} sections={sections} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} downloadButtonEnabled />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
};