isInPlaceEditingActive()

Indicates whether in-place editing is enabled or not.

Copy
if (Scrivito.isInPlaceEditingActive()) {
  return <span>In-place editing is active.</span>;
}

Params

none

Returns

Boolean – true if the in-place editing controls are visible, otherwise false.

Remarks

Needs to be called inside a Scrivito.load or Scrivito.connect code block because a Content Not Yet Loaded Error might occur otherwise.

This method can be used, for example, to display a hint in editing mode. In the example below, an icon widget informs the editor of how to select an icon.

Copy
Scrivito.provideWidgetClass('IconWidget', {
  attributes: {
    icon: ['enum', { values: ['arrow-left', 'arrow-right', 'checkmark'] }],
  },
});

Scrivito.provideEditingConfig('IconWidget', {
  title: 'Icon',
  description: 'A widget displaying an icon',

  attributes: {
    icon: {
      title: 'Icon',
      description: 'Select an icon',
      values: [
        { value: 'arrow-left', title: 'Right arrow' },
        { value: 'arrow-right', title: 'Left arrow' },
        { value: 'checkmark', title: 'Checkmark' },
      ]
    },
  },

  properties: [
    'icon',
  ],
});

Scrivito.provideComponent('IconWidget', ({ widget }) => {
  const icon = widget.get('icon');

  if (!icon) {
    if (Scrivito.isInPlaceEditingActive()) {
      return <span>Select an icon in the widget properties.</span>;
    }

    return <span />;
  }

  return <span className={ `icon ${icon}` } />;
});