@plone/volto 18.0.0-alpha.8 → 18.0.0

package/src/config/Widgets.jsx

@@ -1,40 +1,36 @@
-// The Widgets are forced to be imported not from the index but from its own
-// full path due to circular import issues
-
-import loadable from '@loadable/component';
-
-import AlignWidget from '@plone/volto/components/manage/Widgets/AlignWidget';
-import ButtonsWidget from '@plone/volto/components/manage/Widgets/ButtonsWidget';
-import ArrayWidget from '@plone/volto/components/manage/Widgets/ArrayWidget';
-import CheckboxWidget from '@plone/volto/components/manage/Widgets/CheckboxWidget';
-import FileWidget from '@plone/volto/components/manage/Widgets/FileWidget';
-import IdWidget from '@plone/volto/components/manage/Widgets/IdWidget';
-import PasswordWidget from '@plone/volto/components/manage/Widgets/PasswordWidget';
-import QueryWidget from '@plone/volto/components/manage/Widgets/QueryWidget';
-import QuerySortOnWidget from '@plone/volto/components/manage/Widgets/QuerySortOnWidget';
-import QuerystringWidget from '@plone/volto/components/manage/Widgets/QuerystringWidget';
-import SchemaWidget from '@plone/volto/components/manage/Widgets/SchemaWidget';
-import SelectWidget from '@plone/volto/components/manage/Widgets/SelectWidget';
-import TextareaWidget from '@plone/volto/components/manage/Widgets/TextareaWidget';
-import TextWidget from '@plone/volto/components/manage/Widgets/TextWidget';
-import TokenWidget from '@plone/volto/components/manage/Widgets/TokenWidget';
-import WysiwygWidget from '@plone/volto/components/manage/Widgets/WysiwygWidget';
-import UrlWidget from '@plone/volto/components/manage/Widgets/UrlWidget';
-import InternalUrlWidget from '@plone/volto/components/manage/Widgets/InternalUrlWidget';
-import EmailWidget from '@plone/volto/components/manage/Widgets/EmailWidget';
-import NumberWidget from '@plone/volto/components/manage/Widgets/NumberWidget';
-import ImageSizeWidget from '@plone/volto/components/manage/Widgets/ImageSizeWidget';
-import RegistryImageWidget from '@plone/volto/components/manage/Widgets/RegistryImageWidget';
-
-import ReferenceWidget from '@plone/volto/components/manage/Widgets/ReferenceWidget';
-import ObjectBrowserWidget from '@plone/volto/components/manage/Widgets/ObjectBrowserWidget';
-
-import ObjectWidget from '@plone/volto/components/manage/Widgets/ObjectWidget';
-import ObjectListWidget from '@plone/volto/components/manage/Widgets/ObjectListWidget';
-import VocabularyTermsWidget from '@plone/volto/components/manage/Widgets/VocabularyTermsWidget';
-import SelectMetadataWidget from '@plone/volto/components/manage/Blocks/Search/widgets/SelectMetadataField';
-import SelectAutoComplete from '@plone/volto/components/manage/Widgets/SelectAutoComplete';
-import ColorPickerWidget from '@plone/volto/components/manage/Widgets/ColorPickerWidget';
+import {
+  AlignWidget,
+  ButtonsWidget,
+  ArrayWidget,
+  CheckboxWidget,
+  FileWidget,
+  IdWidget,
+  PasswordWidget,
+  QueryWidget,
+  QuerySortOnWidget,
+  QuerystringWidget,
+  SchemaWidget,
+  SelectWidget,
+  TextareaWidget,
+  TextWidget,
+  TokenWidget,
+  UrlWidget,
+  InternalUrlWidget,
+  EmailWidget,
+  NumberWidget,
+  ImageSizeWidget,
+  RegistryImageWidget,
+  ReferenceWidget,
+  ObjectBrowserWidget,
+  ObjectWidget,
+  ObjectListWidget,
+  VocabularyTermsWidget,
+  SelectMetadataWidget,
+  SelectAutoComplete,
+  ColorPickerWidget,
+  DatetimeWidget,
+  RecurrenceWidget,
+} from '@plone/volto/components/manage/Widgets';
 
 import ArrayViewWidget from '@plone/volto/components/theme/Widgets/ArrayWidget';
 import BooleanViewWidget from '@plone/volto/components/theme/Widgets/BooleanWidget';
@@ -54,20 +50,11 @@ import TextViewWidget from '@plone/volto/components/theme/Widgets/TextWidget';
 import TitleViewWidget from '@plone/volto/components/theme/Widgets/TitleWidget';
 import TokenViewWidget from '@plone/volto/components/theme/Widgets/TokenWidget';
 import UrlViewWidget from '@plone/volto/components/theme/Widgets/UrlWidget';
-
-export const DatetimeWidget = loadable(() =>
-  import('@plone/volto/components/manage/Widgets/DatetimeWidget'),
-);
-export const RecurrenceWidget = loadable(() =>
-  import(
-    '@plone/volto/components/manage/Widgets/RecurrenceWidget/RecurrenceWidget'
-  ),
-);
+import ImageWidget from '@plone/volto/components/manage/Widgets/ImageWidget';
 
 // Widgets mapping
 export const widgetMapping = {
   id: {
-    schema: SchemaWidget,
     subjects: TokenWidget,
     query: QuerystringWidget,
     recurrence: RecurrenceWidget,
@@ -76,12 +63,12 @@ export const widgetMapping = {
     site_logo: RegistryImageWidget,
   },
   widget: {
-    richtext: WysiwygWidget,
     textarea: TextareaWidget,
     datetime: DatetimeWidget,
     date: DatetimeWidget,
     password: PasswordWidget,
     file: FileWidget,
+    image: ImageWidget,
     align: AlignWidget,
     buttons: ButtonsWidget,
     url: UrlWidget,
@@ -101,6 +88,7 @@ export const widgetMapping = {
     autocomplete: SelectAutoComplete,
     color_picker: ColorPickerWidget,
     select: SelectWidget,
+    schema: SchemaWidget,
   },
   vocabulary: {
     'plone.app.vocabularies.Catalog': ObjectBrowserWidget,

package/src/config/config.test.js

@@ -0,0 +1,233 @@
+import config from '@plone/volto/registry';
+
+const navigation_controlpanel = {
+  '@id': '/@controlpanels/navigation',
+  data: {
+    displayed_types: [
+      {
+        title: 'Link',
+        token: 'Link',
+      },
+      {
+        title: 'News Item',
+        token: 'News Item',
+      },
+      {
+        title: 'Folder',
+        token: 'Folder',
+      },
+      {
+        title: 'Page',
+        token: 'Document',
+      },
+      {
+        title: 'Event',
+        token: 'Event',
+      },
+      {
+        title: 'Collection',
+        token: 'Collection',
+      },
+    ],
+    filter_on_workflow: false,
+    generate_tabs: true,
+    navigation_depth: 3,
+    nonfolderish_tabs: true,
+    parent_types_not_to_query: ['TempFolder'],
+    root: '/',
+    show_excluded_items: false,
+    sitemap_depth: 3,
+    sort_tabs_on: {
+      title: 'Position in Parent',
+      token: 'getObjPositionInParent',
+    },
+    sort_tabs_reversed: false,
+    workflow_states_to_show: [],
+  },
+  group: 'General',
+  schema: {
+    fieldsets: [
+      {
+        behavior: 'plone',
+        fields: [
+          'navigation_depth',
+          'generate_tabs',
+          'nonfolderish_tabs',
+          'sort_tabs_on',
+          'sort_tabs_reversed',
+          'displayed_types',
+          'filter_on_workflow',
+          'workflow_states_to_show',
+          'show_excluded_items',
+          'root',
+          'sitemap_depth',
+          'parent_types_not_to_query',
+        ],
+        id: 'default',
+        title: 'Default',
+      },
+    ],
+    properties: {
+      displayed_types: {
+        additionalItems: true,
+        default: [
+          'Link',
+          'News Item',
+          'Folder',
+          'Document',
+          'Event',
+          'Collection',
+        ],
+        description:
+          'The content types that should be shown in the navigation and site map.',
+        factory: 'Tuple',
+        items: {
+          description: '',
+          factory: 'Choice',
+          title: '',
+          type: 'string',
+          vocabulary: {
+            '@id':
+              'http://localhost:3000/@vocabularies/plone.app.vocabularies.ReallyUserFriendlyTypes',
+          },
+        },
+        title: 'Displayed content types',
+        type: 'array',
+        uniqueItems: true,
+      },
+      filter_on_workflow: {
+        default: false,
+        description:
+          'The workflow states that should be shown in the navigation and the site map.',
+        factory: 'Yes/No',
+        title: 'Filter on workflow state',
+        type: 'boolean',
+      },
+      generate_tabs: {
+        default: true,
+        description:
+          'By default, all items created at the root level will appear as tabs. You can turn this off if you prefer manually constructing this part of the navigation.',
+        factory: 'Yes/No',
+        title: 'Automatically generate tabs',
+        type: 'boolean',
+      },
+      navigation_depth: {
+        default: 3,
+        description: 'Number of folder levels to show in the navigation.',
+        factory: 'Integer',
+        title: 'Navigation depth',
+        type: 'integer',
+      },
+      nonfolderish_tabs: {
+        default: true,
+        description:
+          "By default, any content item in the root of the portal will appear as a tab. If you turn this option off, only folders will be shown. This only has an effect if 'automatically generate tabs' is enabled.",
+        factory: 'Yes/No',
+        title: 'Generate tabs for items other than folders.',
+        type: 'boolean',
+      },
+      parent_types_not_to_query: {
+        additionalItems: true,
+        default: ['TempFolder'],
+        description: 'Hide content inside the following types in Navigation.',
+        factory: 'List',
+        items: {
+          description: '',
+          factory: 'Text line (String)',
+          title: '',
+          type: 'string',
+        },
+        title: 'Hide children of these types',
+        type: 'array',
+        uniqueItems: false,
+      },
+      root: {
+        default: '/',
+        description:
+          "Path to be used as navigation root, relative to Plone site root.Starts with '/'",
+        factory: 'Text line (String)',
+        title: 'Root',
+        type: 'string',
+      },
+      show_excluded_items: {
+        default: false,
+        description:
+          'If an item has been excluded from navigation should it be shown in navigation when viewing content contained within it or within a subfolder.',
+        factory: 'Yes/No',
+        title:
+          'Show items normally excluded from navigation if viewing their children.',
+        type: 'boolean',
+      },
+      sitemap_depth: {
+        default: 3,
+        description: 'Number of folder levels to show in the site map.',
+        factory: 'Integer',
+        title: 'Sitemap depth',
+        type: 'integer',
+      },
+      sort_tabs_on: {
+        choices: [
+          ['getObjPositionInParent', 'Position in Parent'],
+          ['sortable_title', 'Title'],
+          ['getId', 'Short Name (ID)'],
+        ],
+        default: 'getObjPositionInParent',
+        description: 'Index used to sort the tabs',
+        enum: ['getObjPositionInParent', 'sortable_title', 'getId'],
+        enumNames: ['Position in Parent', 'Title', 'Short Name (ID)'],
+        factory: 'Choice',
+        title: 'Sort tabs on',
+        type: 'string',
+        vocabulary: {
+          '@id': 'http://localhost:3000/@sources/sort_tabs_on',
+        },
+      },
+      sort_tabs_reversed: {
+        default: false,
+        description: 'Sort tabs in descending.',
+        factory: 'Yes/No',
+        title: 'Reversed sort order for tabs.',
+        type: 'boolean',
+      },
+      workflow_states_to_show: {
+        additionalItems: true,
+        default: [],
+        description: '',
+        factory: 'Tuple',
+        items: {
+          description: '',
+          factory: 'Choice',
+          title: '',
+          type: 'string',
+          vocabulary: {
+            '@id':
+              'http://localhost:3000/@vocabularies/plone.app.vocabularies.WorkflowStates',
+          },
+        },
+        title: '',
+        type: 'array',
+        uniqueItems: true,
+      },
+    },
+    required: ['navigation_depth', 'sort_tabs_on', 'root', 'sitemap_depth'],
+    type: 'object',
+  },
+  title: 'Navigation',
+};
+
+test('test navigation controlpanel fields', () => {
+  const { filterControlPanelsSchema } = config.settings;
+  const result = filterControlPanelsSchema(navigation_controlpanel);
+  const not_in_navigation = [
+    'generate_tabs',
+    'navigation_depth',
+    'nonfolderish_tabs',
+    'sort_tabs_on',
+    'sort_tabs_reversed',
+    'sitemap_depth',
+  ];
+  const hasField = result['fieldsets'][0]['fields'].some((field) =>
+    not_in_navigation.includes(field),
+  );
+  expect(hasField).toBe(false);
+});

package/src/config/index.js

@@ -8,6 +8,7 @@ import {
   layoutViewsNamesMapping,
 } from './Views';
 import { nonContentRoutes } from './NonContentRoutes';
+import { nonContentRoutesPublic } from './NonContentRoutesPublic';
 import {
   groupBlocksOrder,
   requiredBlocks,
@@ -18,6 +19,7 @@ import {
 import { components } from './Components';
 import { loadables } from './Loadables';
 import { workflowMapping } from './Workflows';
+import slots from './slots';
 
 import { contentIcons } from './ContentIcons';
 import { styleClassNameConverters, styleClassNameExtenders } from './Style';
@@ -25,15 +27,15 @@ import {
   controlPanelsIcons,
   filterControlPanels,
   filterControlPanelsSchema,
+  unwantedControlPanelsFields,
 } from './ControlPanels';
 
-import { richtextEditorSettings, richtextViewSettings } from './RichTextEditor';
-
 import applyAddonConfiguration, { addonsInfo } from 'load-volto-addons';
 
 import ConfigRegistry from '@plone/volto/registry';
 
 import { getSiteAsyncPropExtender } from '@plone/volto/helpers';
+import { registerValidators } from './validation';
 
 const host = process.env.HOST || 'localhost';
 const port = process.env.PORT || '3000';
@@ -75,7 +77,7 @@ let config = {
     okRoute: '/ok',
     apiPath,
     apiExpanders: [
-      // Added here for documentation purposes, addded at the end because it
+      // Added here for documentation purposes, added at the end because it
       // depends on a value of this object.
       // Add the following expanders for only issuing a single request.
       // https://6.docs.plone.org/volto/configuration/settings-reference.html#term-apiExpanders
@@ -99,7 +101,7 @@ let config = {
       process.env.RAZZLE_INTERNAL_API_PATH ||
       process.env.RAZZLE_API_PATH ||
       'http://localhost:8080/Plone', // Set it to '' for disabling the proxy
-    // proxyRewriteTarget Set it for set a custom target for the proxy or overide the internal VHM rewrite
+    // proxyRewriteTarget Set it for set a custom target for the proxy or override the internal VHM rewrite
     // proxyRewriteTarget: '/VirtualHostBase/http/localhost:8080/Plone/VirtualHostRoot/_vh_api'
     // proxyRewriteTarget: 'https://myvoltositeinproduction.com'
     proxyRewriteTarget: process.env.RAZZLE_PROXY_REWRITE_TARGET || undefined,
@@ -112,8 +114,7 @@ let config = {
     legacyTraverse: process.env.RAZZLE_LEGACY_TRAVERSE || false,
     cookieExpires: 15552000, //in seconds. Default is 6 month (15552000)
     nonContentRoutes,
-    richtextEditorSettings, // Part of draftjs support, to be removed
-    richtextViewSettings, // Part of draftjs support, to be removed
+    nonContentRoutesPublic,
     imageObjects: ['Image'],
     reservedIds: ['login', 'layout', 'plone', 'zip', 'properties'],
     downloadableObjects: ['File'], //list of content-types for which the direct download of the file will be carried out if the user is not authenticated
@@ -145,15 +146,6 @@ let config = {
         'reactBeautifulDnd',
         // 'diffLib',
       ],
-      draftEditor: [
-        'immutableLib',
-        'draftJs',
-        'draftJsLibIsSoftNewlineEvent',
-        'draftJsFilters',
-        'draftJsInlineToolbarPlugin',
-        'draftJsImportHtml',
-        'draftJsBlockBreakoutPlugin',
-      ],
     },
     appExtras: [],
     maxResponseSize: 2000000000, // This is superagent default (200 mb)
@@ -165,6 +157,7 @@ let config = {
     controlPanelsIcons,
     filterControlPanels,
     filterControlPanelsSchema,
+    unwantedControlPanelsFields,
     externalRoutes: [
       // URL to be considered as external
       // {
@@ -180,6 +173,7 @@ let config = {
     ],
     showSelfRegistration: false,
     contentMetadataTagsImageField: 'image',
+    contentPropertiesSchemaEnhancer: null,
     hasWorkingCopySupport: false,
     maxUndoLevels: 200, // undo history size for the main form
     addonsInfo: addonsInfo,
@@ -191,7 +185,6 @@ let config = {
     querystringSearchGet: false,
     blockSettingsTabFieldsetsInitialStateOpen: true,
     excludeLinksAndReferencesMenuItem: false,
-    containerBlockTypes: ['gridBlock'],
     siteTitleFormat: {
       includeSiteTitle: false,
       titleAndSiteTitleSeparator: '-',
@@ -224,6 +217,8 @@ let config = {
   addonRoutes: [],
   addonReducers: {},
   components,
+  slots: {},
+  utilities: {},
 };
 
 // The apiExpanders depends on a config of the object, so it's done here
@@ -250,5 +245,21 @@ ConfigRegistry.widgets = config.widgets;
 ConfigRegistry.addonRoutes = config.addonRoutes;
 ConfigRegistry.addonReducers = config.addonReducers;
 ConfigRegistry.components = config.components;
+ConfigRegistry.slots = config.slots;
+ConfigRegistry.utilities = config.utilities;
+
+// Register slots
+Object.entries(slots).forEach(([slotName, components]) => {
+  components.forEach(({ name, component, predicates = [] }) => {
+    ConfigRegistry.registerSlotComponent({
+      slot: slotName,
+      name,
+      component,
+      predicates,
+    });
+  });
+});
+
+registerValidators(ConfigRegistry);
 
 applyAddonConfiguration(ConfigRegistry);

package/src/config/server.js

@@ -18,7 +18,6 @@ const settings = {
   ],
   criticalCssPath: 'public/critical.css',
   readCriticalCss: null, // so it will be defaultReadCriticalCss
-  extractScripts: { errorPages: false },
   staticFiles: [
     {
       id: 'root_static',

package/src/config/slots.js

@@ -0,0 +1,12 @@
+import { Tags } from '@plone/volto/components';
+
+const slots = {
+  belowContent: [
+    {
+      name: 'tags',
+      component: Tags,
+    },
+  ],
+};
+
+export default slots;

package/src/config/validation.ts

@@ -0,0 +1,155 @@
+import { ConfigType } from '@plone/registry';
+
+import {
+  minLengthValidator,
+  maxLengthValidator,
+  urlValidator,
+  emailValidator,
+  isNumberValidator,
+  maximumValidator,
+  minimumValidator,
+  isIntegerValidator,
+  maxItemsValidator,
+  minItemsValidator,
+  hasUniqueItemsValidator,
+  startEventDateRangeValidator,
+  endEventDateRangeValidator,
+  patternValidator,
+} from '@plone/volto/helpers/FormValidation/validators';
+
+const registerValidators = (config: ConfigType) => {
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'string' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'minLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: minLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxLength',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: maxLengthValidator,
+  });
+
+  config.registerUtility({
+    name: 'pattern',
+    type: 'validator',
+    dependencies: { fieldType: 'password' },
+    method: patternValidator,
+  });
+
+  config.registerUtility({
+    name: 'email',
+    type: 'validator',
+    dependencies: { widget: 'email' },
+    method: emailValidator,
+  });
+
+  config.registerUtility({
+    name: 'url',
+    type: 'validator',
+    dependencies: { widget: 'url' },
+    method: urlValidator,
+  });
+
+  config.registerUtility({
+    name: 'number',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: isNumberValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'number' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'integer',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: isIntegerValidator,
+  });
+
+  config.registerUtility({
+    name: 'minimum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: minimumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maximum',
+    type: 'validator',
+    dependencies: { fieldType: 'integer' },
+    method: maximumValidator,
+  });
+
+  config.registerUtility({
+    name: 'maxItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: maxItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'minItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: minItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'uniqueItems',
+    type: 'validator',
+    dependencies: { fieldType: 'array' },
+    method: hasUniqueItemsValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'start' },
+    method: startEventDateRangeValidator,
+  });
+
+  config.registerUtility({
+    name: 'dateRangeValidator',
+    type: 'validator',
+    dependencies: { behaviorName: 'plone.eventbasic', fieldName: 'end' },
+    method: endEventDateRangeValidator,
+  });
+};
+
+export { registerValidators };

package/src/constants/ActionTypes.js

@@ -82,6 +82,9 @@ export const REVERT_HISTORY = 'REVERT_HISTORY';
 export const REVERT_TRANSACTIONS = 'REVERT_TRANSACTIONS';
 export const SEARCH_CONTENT = 'SEARCH_CONTENT';
 export const SET_SIDEBAR_TAB = 'SET_SIDEBAR_TAB';
+export const SET_METADATA_FIELDSETS = 'SET_METADATA_FIELDSETS';
+export const SET_METADATA_FOCUS = 'SET_METADATA_FOCUS';
+export const RESET_METADATA_FOCUS = 'RESET_METADATA_FOCUS';
 export const TRANSITION_WORKFLOW = 'TRANSITION_WORKFLOW';
 export const UNINSTALL_ADDON = 'UNINSTALL_ADDON';
 export const UPDATE_CONTENT = 'UPDATE_CONTENT';
@@ -135,9 +138,13 @@ export const MOVE_CONTENT_RULE = 'MOVE_CONTENT_RULE';
 export const GET_ALIASES = 'GET_ALIASES';
 export const ADD_ALIASES = 'ADD_ALIASES';
 export const REMOVE_ALIASES = 'REMOVE_ALIASES';
+export const UPLOAD_ALIASES = 'UPLOAD_ALIASES';
 export const GET_USERSCHEMA = 'GET_USERSCHEMA';
 export const GET_UPGRADE = 'GET_UPGRADE';
 export const POST_UPGRADE = 'POST_UPGRADE';
 export const RESET_LOGIN_REQUEST = 'RESET_LOGIN_REQUEST';
 export const GET_SITE = 'GET_SITE';
 export const GET_NAVROOT = 'GET_NAVROOT';
+export const SET_FORM_DATA = 'SET_FORM_DATA';
+export const SET_UI_STATE = 'SET_UI_STATE';
+export const UPDATE_UPLOADED_FILES = 'UPDATE_UPLOADED_FILES';