How to use the scrivito.provideEditingConfig function in scrivito

import * as Scrivito from 'scrivito';
import vimeoVideoWidgetIcon from '../../assets/images/vimeo_video_widget.svg';

Scrivito.provideEditingConfig('VimeoVideoWidget', {
  title: 'Vimeo Video',
  thumbnail: vimeoVideoWidgetIcon,
  attributes: {
    vimeoVideoId: {
      title: 'Vimeo video ID',
      description:
        'Every video at Vimeo has a unique identifier that consists of a series' +
        ' of digits. In the video URL, the ID usually is the value at the end,' +
        ' e.g. 15069551 in https://vimeo.com/15069551.',
    },
    aspectRatio: {
      title: 'Aspect ratio',
      description: 'Default: HD TV (16:9)',
      values: [
        { value: '21:9', title: 'CinemaScope (21:9)' },
        { value: '16:9', title: 'HD TV (16:9)' },

import * as Scrivito from "scrivito";
import PageObjIcon from "../../assets/images/page_obj.svg";
import {
  defaultPageEditingConfigAttributes,
  defaultPageInitialContent,
  defaultPageProperties,
} from "../_defaultPageEditingConfig";
import {
  metadataEditingConfigAttributes,
  metadataInitialContent,
  metadataPropertiesGroup,
  socialCardsPropertiesGroup,
} from "../_metadataEditingConfig";

Scrivito.provideEditingConfig("Page", {
  title: "Page",
  thumbnail: PageObjIcon,
  attributes: {
    ...defaultPageEditingConfigAttributes,
    ...metadataEditingConfigAttributes,
  },
  properties: [...defaultPageProperties],
  propertiesGroups: [socialCardsPropertiesGroup, metadataPropertiesGroup],
  initialContent: {
    ...defaultPageInitialContent,
    ...metadataInitialContent,
  },
});

import * as Scrivito from "scrivito";
import eventOverviewWidgetIcon from "../../assets/images/event_overview_widget.svg";

Scrivito.provideEditingConfig("EventOverviewWidget", {
  title: "Event Overview",
  thumbnail: eventOverviewWidgetIcon,
  attributes: {
    maxItems: {
      title: "Maximum number of events",
      description: "Set to 0 to show all events.",
    },
    tags: {
      title: "Filter by tags",
      description:
        "Only show events, that have one of the given tags." +
        " Leave empty to not filter by tags.",
    },
    showTags: {
      title: "Show list of tags?",
      description: "Default: No",

import * as Scrivito from 'scrivito';
import videoWidgetIcon from '../../assets/images/video_widget.svg';

Scrivito.provideEditingConfig('VideoWidget', {
  title: 'Video',
  thumbnail: videoWidgetIcon,
  attributes: {
    source: {
      title: 'Video',
      description: 'Click to select or upload video. This should be of type video/mp4.',
    },
    poster: {
      title: 'Poster image (optional)',
      description:
        'This poster image is shown, until the video is loaded.' +
        ' Without an poster image, the browser may show the first frame of the video.',
    },
  },
  properties: ['source', 'poster'],
});

import * as Scrivito from 'scrivito';
import textWidgetIcon from '../../assets/images/text_widget.svg';

Scrivito.provideEditingConfig('TextWidget', {
  title: 'Text',
  thumbnail: textWidgetIcon,
  attributes: {
    alignment: {
      title: 'Alignment',
      description: 'Default: Left',
      values: [
        { value: 'left', title: 'Left' },
        { value: 'center', title: 'Center' },
        { value: 'right', title: 'Right' },
      ],
    },
    text: {
      title: 'Text',
      description: 'The actual source code of this text',
    },

import * as Scrivito from "scrivito";
import thumbnailGalleryWidgetIcon from "../../assets/images/thumbnail_gallery_widget.svg";

Scrivito.provideEditingConfig("ThumbnailGalleryWidget", {
  title: "Thumbnail Gallery",
  thumbnail: thumbnailGalleryWidgetIcon,
  attributes: {
    images: {
      title: "Images",
    },
    showTags: {
      title: "Show list of tags?",
      description: "Default: No",
      values: [
        { value: "yes", title: "Yes" },
        { value: "no", title: "No" },
      ],
    },
  },
  properties: ["images", "showTags"],

import * as Scrivito from "scrivito";
import blogObjIcon from "../../assets/images/blog_obj.svg";
import SectionWidget from "../../Widgets/SectionWidget/SectionWidgetClass";
import {
  metadataEditingConfigAttributes,
  metadataInitialContent,
  metadataPropertiesGroup,
  socialCardsPropertiesGroup,
} from "../_metadataEditingConfig";

Scrivito.provideEditingConfig("Blog", {
  title: "Blog",
  thumbnail: blogObjIcon,
  hideInSelectionDialogs: true,
  attributes: {
    ...metadataEditingConfigAttributes,
    title: {
      title: "Title",
      description: "Limit to 55 characters.",
    },
    navigationBackgroundImage: {
      title: "Header image",
      description: "The background image of the header.",
    },
  },
  properties: ["title", "navigationBackgroundImage"],
  propertiesGroups: [socialCardsPropertiesGroup, metadataPropertiesGroup],

import * as Scrivito from "scrivito";

Scrivito.provideEditingConfig("ColumnWidget", {
  title: "Column",
});

import * as Scrivito from "scrivito";

Scrivito.provideEditingConfig("<%= nameUpper %>", {
  title: "<%= nameUpper %>",
  attributes: {
    title: {
      title: "Name",
      description: "description"
    }
  },
  properties: ["title"]
});

import * as Scrivito from "scrivito";
import landingPageObjIcon from "../../assets/images/landing_page_obj.svg";
import {
  defaultPageEditingConfigAttributes,
  defaultPageInitialContent,
  defaultPageProperties,
} from "../_defaultPageEditingConfig";
import {
  metadataEditingConfigAttributes,
  metadataInitialContent,
  metadataPropertiesGroup,
  socialCardsPropertiesGroup,
} from "../_metadataEditingConfig";

Scrivito.provideEditingConfig("LandingPage", {
  title: "Landing Page",
  thumbnail: landingPageObjIcon,
  attributes: {
    ...defaultPageEditingConfigAttributes,
    ...metadataEditingConfigAttributes,
  },
  properties: [...defaultPageProperties],
  propertiesGroups: [socialCardsPropertiesGroup, metadataPropertiesGroup],
  initialContent: {
    ...defaultPageInitialContent,
    ...metadataInitialContent,
  },
});