@eeacms/volto-cca-policy 0.1.1

package/src/components/manage/Blocks/ContextNavigation/schema.js

@@ -0,0 +1,81 @@
+export const EditSchema = () => {
+  return {
+    title: 'Navigation',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: [
+          'name',
+          'root_node',
+          'includeTop',
+          'currentFolderOnly',
+          'topLevel',
+          'bottomLevel',
+          'no_icons',
+          'thumb_scale',
+          'no_thumbs',
+        ],
+      },
+    ],
+    required: [],
+    properties: {
+      name: {
+        title: 'Title',
+        description: 'The title of the navigation tree',
+      },
+      root_node: {
+        title: 'Root node',
+        description:
+          'You may search for and choose a folder to act as the root of the navigation tree. Leave blank to use the Plone site root.',
+        widget: 'object_browser',
+        // TODO: these don't work. Why?
+        mode: 'link',
+        selectedItemAttrs: ['Title', 'Description'],
+      },
+      includeTop: {
+        title: 'Include top node',
+        description:
+          "Whether or not to show the top, or 'root', node in the navigation tree. This is affected by the 'Start level' setting.",
+        type: 'boolean',
+      },
+      currentFolderOnly: {
+        title: 'Only show the contents of the current folder',
+        description:
+          'If selected, the navigation tree will only show the current folder and its children at all times.',
+        type: 'boolean',
+      },
+
+      topLevel: {
+        title: 'Start level',
+        description:
+          'An integer value that specifies the number of folder levels below the site root that must be exceeded before the navigation tree will display. 0 means that the navigation tree should be displayed everywhere including pages in the root of the site. 1 means the tree only shows up inside folders located in the root and downwards, never showing at the top level.',
+        type: 'number',
+        default: 1,
+      },
+      bottomLevel: {
+        title: 'Navigation tree depth',
+        description:
+          'How many folders should be included before the navigation tree stops. 0 means no limit. 1 only includes the root folder.',
+        type: 'number',
+        default: 0,
+      },
+      no_icons: {
+        title: 'Supress icons',
+        description:
+          'If enabled, the portlet will not show document type icons.',
+        type: 'boolean',
+      },
+      thumb_scale: {
+        title: 'Override thumb scale',
+        description:
+          "Enter a valid scale name (see 'Image Handling' control panel) to override (e.g. icon, tile, thumb, mini, preview, ... ). Leave empty to use default (see 'Site' control panel).",
+      },
+      no_thumbs: {
+        title: 'Supress thumbs',
+        type: 'boolean',
+        description: 'If enabled, the portlet will not show thumbs.',
+      },
+    },
+  };
+};

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsEdit.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { EditSchema } from './schema';
+import { BlockDataForm, SidebarPortal } from '@plone/volto/components';
+import LayoutSettingsView from './LayoutSettingsView';
+import './edit.less';
+
+const LayoutSettingsEdit = (props) => {
+  const schema = EditSchema();
+  return (
+    <>
+      <h3>Page layout settings</h3>
+      <LayoutSettingsView {...props} />
+      <SidebarPortal selected={props.selected}>
+        {props.selected && (
+          <BlockDataForm
+            title={schema.title}
+            schema={schema}
+            formData={props.data}
+            onChangeField={(id, value) => {
+              props.onChangeBlock(props.block, {
+                ...props.data,
+                [id]: value,
+              });
+            }}
+          />
+        )}
+      </SidebarPortal>
+    </>
+  );
+};
+
+export default LayoutSettingsEdit;

package/src/components/manage/Blocks/LayoutSettings/LayoutSettingsView.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { BodyClass } from '@plone/volto/helpers';
+import { getVoltoStyles } from '../schema-utils';
+import cx from 'classnames';
+
+const LayoutSettingsView = (props) => {
+  const classNames = getVoltoStyles(props.data);
+  return <BodyClass className={cx(classNames)} />;
+};
+
+function propsAreEqual(prevProps, nextProps) {
+  return prevProps.data === nextProps.data;
+}
+
+export default React.memo(LayoutSettingsView, propsAreEqual);

package/src/components/manage/Blocks/LayoutSettings/edit.less

@@ -0,0 +1,4 @@
+#page-edit .block-editor-layoutSettings,
+#page-add .block-editor-layoutSettings {
+  display: none;
+}

package/src/components/manage/Blocks/LayoutSettings/index.js

@@ -0,0 +1,24 @@
+import codeSVG from '@plone/volto/icons/code.svg';
+import LayoutSettingsView from './LayoutSettingsView';
+import LayoutSettingsEdit from './LayoutSettingsEdit';
+import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
+
+export default (config) => {
+  config.blocks.blocksConfig.layoutSettings = {
+    id: 'layoutSettings',
+    title: 'Layout settings',
+    icon: codeSVG,
+    group: 'common',
+    view: LayoutSettingsView,
+    edit: LayoutSettingsEdit,
+    schema: BlockSettingsSchema,
+    restricted: ({ properties }) => {
+      return !!properties['@type'];
+    },
+    mostUsed: true,
+    blockHasOwnFocusManagement: true,
+    sidebarTab: 1,
+  };
+
+  return config;
+};

package/src/components/manage/Blocks/LayoutSettings/schema.js

@@ -0,0 +1,32 @@
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+
+import imageNarrowSVG from '@eeacms/volto-cca-policy/icons/image-narrow.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_view: [imageNarrowSVG, 'Narrow width'],
+  container_view: [imageFitSVG, 'Container width'],
+  wide_view: [imageWideSVG, 'Wide width'],
+};
+
+export const EditSchema = () => {
+  return {
+    title: 'Page layout settings',
+    fieldsets: [
+      {
+        id: 'default',
+        title: 'Default',
+        fields: ['layout_size'],
+      },
+    ],
+    required: [],
+    properties: {
+      layout_size: {
+        widget: 'style_align',
+        title: 'Layout size',
+        actions: Object.keys(ALIGN_INFO_MAP),
+        actionsInfoMap: ALIGN_INFO_MAP,
+      },
+    },
+  };
+};

package/src/components/manage/Blocks/Title/Edit.jsx

@@ -0,0 +1,226 @@
+/**
+ * Edit title block.
+ * @module volto-slate/blocks/Title/TitleBlockEdit
+ */
+
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { Editor, createEditor, Transforms, Node, Range } from 'slate';
+import { ReactEditor, Editable, Slate, withReact } from 'slate-react';
+import config from '@plone/volto/registry';
+import { SidebarPortal } from '@plone/volto/components';
+import InlineForm from '@plone/volto/components/manage/Form/InlineForm';
+import { BannerView } from '@eeacms/volto-cca-policy/components';
+import schema from './schema';
+
+const messages = defineMessages({
+  title: {
+    id: 'Type the title…',
+    defaultMessage: 'Type the title…',
+  },
+});
+
+function usePrevious(value) {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+}
+
+const Title = React.forwardRef(({ children, ...rest }, ref) => (
+  <h1 {...rest} ref={ref}>
+    {children}
+  </h1>
+));
+
+/**
+ * Edit title block component.
+ * @class TitleBlockEdit
+ * @extends Component
+ */
+export const TitleBlockEdit = (props) => {
+  const {
+    selected,
+    index,
+    onChangeField,
+    onSelectBlock,
+    onAddBlock,
+    onFocusPreviousBlock,
+    onFocusNextBlock,
+    block,
+    blockNode,
+    data,
+    detached,
+    editable,
+  } = props;
+  const metadata = props.metadata || props.properties;
+
+  const editor = useMemo(() => withReact(createEditor()), []);
+  const intl = useIntl();
+
+  const disableNewBlocks = data.disableNewBlocks || detached;
+
+  const text = metadata?.['title'] || '';
+
+  const handleChange = useCallback(
+    (value) => {
+      const newText = Node.string(editor);
+      if (newText !== text) {
+        onChangeField('title', newText);
+      }
+    },
+    [editor, onChangeField, text],
+  );
+
+  const prevSelected = usePrevious(selected);
+
+  useEffect(() => {
+    if (!prevSelected && selected) {
+      if (editor.selection && Range.isCollapsed(editor.selection)) {
+        // keep selection
+        setTimeout(() => {
+          try {
+            ReactEditor.focus(editor);
+          } catch {}
+        });
+      } else {
+        // nothing is selected, move focus to end
+        // with this setTimeout uncommented, the focusing of other Volto-Slate
+        // blocks breaks, not sure what was its initial role, but maybe we can
+        // delete it one day
+        setTimeout(() => {
+          ReactEditor.focus(editor);
+          Transforms.select(editor, Editor.end(editor, []));
+        });
+      }
+    }
+  }, [prevSelected, selected, editor]);
+
+  const handleKeyDown = useCallback(
+    (ev) => {
+      if (ev.key === 'Return' || ev.key === 'Enter') {
+        ev.preventDefault();
+        if (!disableNewBlocks) {
+          onSelectBlock(
+            onAddBlock(config.settings.defaultBlockType, index + 1),
+          );
+        }
+      } else if (ev.key === 'ArrowUp') {
+        ev.preventDefault();
+        onFocusPreviousBlock(block, blockNode.current);
+      } else if (ev.key === 'ArrowDown') {
+        ev.preventDefault();
+        onFocusNextBlock(block, blockNode.current);
+      }
+    },
+    [
+      index,
+      blockNode,
+      disableNewBlocks,
+      onSelectBlock,
+      onAddBlock,
+      onFocusPreviousBlock,
+      onFocusNextBlock,
+      block,
+    ],
+  );
+
+  const val = useMemo(() => {
+    return [
+      {
+        type: 'p',
+        children: [{ text }],
+      },
+    ];
+  }, [text]);
+
+  const handleFocus = useCallback(() => {
+    onSelectBlock(block);
+  }, [block, onSelectBlock]);
+
+  const renderElement = useCallback(
+    ({ attributes, children, element }) => {
+      return (
+        <Title {...attributes} className="documentFirstHeading">
+          {children}
+        </Title>
+      );
+    },
+    [], // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
+  editor.children = val;
+
+  if (typeof window.__SERVER__ !== 'undefined' || __SERVER__) {
+    return <div />;
+  }
+
+  const placeholder = data.placeholder || intl.formatMessage(messages['title']);
+
+  return (
+    <React.Fragment>
+      <BannerView
+        {...props}
+        banner={{
+          title: {
+            view: (
+              <Slate editor={editor} onChange={handleChange} value={val}>
+                <Editable
+                  readOnly={!editable}
+                  onKeyDown={handleKeyDown}
+                  placeholder={placeholder}
+                  renderElement={renderElement}
+                  onFocus={handleFocus}
+                ></Editable>
+              </Slate>
+            ),
+          },
+        }}
+        fluid
+      />
+      <SidebarPortal selected={props.selected}>
+        <InlineForm
+          schema={schema}
+          title={schema.title}
+          onChangeField={(id, value) => {
+            props.onChangeBlock(props.block, {
+              ...props.data,
+              [id]: value,
+            });
+          }}
+          formData={props.data}
+        />
+      </SidebarPortal>
+    </React.Fragment>
+  );
+};
+
+TitleBlockEdit.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  selected: PropTypes.bool.isRequired,
+  block: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  onChangeField: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onDeleteBlock: PropTypes.func.isRequired,
+  onAddBlock: PropTypes.func.isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  editable: PropTypes.bool,
+  detached: PropTypes.bool,
+  blockNode: PropTypes.any,
+  className: PropTypes.string,
+  formFieldName: PropTypes.string,
+};
+
+TitleBlockEdit.defaultProps = {
+  detached: false,
+  editable: true,
+};
+
+export default TitleBlockEdit;

package/src/components/manage/Blocks/Title/View.jsx

@@ -0,0 +1,35 @@
+/**
+ * View title block.
+ * @module components/manage/Blocks/Title/View
+ */
+
+import React from 'react';
+import { Portal } from 'react-portal';
+import PropTypes from 'prop-types';
+
+import { BannerView } from '@eeacms/volto-cca-policy/components';
+
+/**
+ * View title block class.
+ * @class View
+ * @extends Component
+ */
+const View = (props) => {
+  if (__SERVER__) return <BannerView {...props} />;
+  return (
+    <Portal node={document.getElementById('page-header')}>
+      <BannerView {...props} />
+    </Portal>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+View.propTypes = {
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+};
+
+export default View;

package/src/components/manage/Blocks/Title/index.js

@@ -0,0 +1,13 @@
+import Edit from './Edit';
+import View from './View';
+
+export default (config) => {
+  config.blocks.blocksConfig.title = {
+    ...config.blocks.blocksConfig.title,
+    edit: Edit,
+    view: View,
+    sidebarTab: 1,
+  };
+
+  return config;
+};

package/src/components/manage/Blocks/Title/schema.js

@@ -0,0 +1,80 @@
+const infoSchema = {
+  title: 'Info',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: ['description'],
+    },
+  ],
+  properties: {
+    description: {
+      title: 'Description',
+      widget: 'textarea',
+    },
+  },
+  required: [],
+};
+
+export default {
+  title: 'Page header',
+  fieldsets: [
+    {
+      id: 'default',
+      title: 'Default',
+      fields: [
+        'hideContentType',
+        'hideCreationDate',
+        'hidePublishingDate',
+        'hideModificationDate',
+        'info',
+      ],
+    },
+    {
+      id: 'actions',
+      title: 'Actions',
+      fields: ['hideShareButton', 'hideDownloadButton'],
+    },
+    // {
+    //   id: 'advanced',
+    //   title: 'Advanced options',
+    //   fields: ['contentType'],
+    // },
+  ],
+  properties: {
+    hideContentType: {
+      title: 'Hide content type',
+      type: 'boolean',
+    },
+    hideCreationDate: {
+      title: 'Hide creation date',
+      type: 'boolean',
+    },
+    hidePublishingDate: {
+      title: 'Hide publishing date',
+      type: 'boolean',
+    },
+    hideModificationDate: {
+      title: 'Hide modification date',
+      type: 'boolean',
+    },
+    hideShareButton: {
+      title: 'Hide share button',
+      type: 'boolean',
+    },
+    hideDownloadButton: {
+      title: 'Hide download button',
+      type: 'boolean',
+    },
+    info: {
+      title: 'Extra info',
+      widget: 'object_list',
+      schema: infoSchema,
+    },
+    // contentType: {
+    //   title: 'Type',
+    //   description: "Custom content-type's name",
+    // },
+  },
+  required: [],
+};

package/src/components/manage/Blocks/schema-utils.js

@@ -0,0 +1,16 @@
+export const getVoltoStyles = (props) => {
+  // return an object with same key and value for cx class setting
+  const styles = props ? props : {};
+  const output = {};
+  for (const [key, value] of Object.entries(styles)) {
+    if (key === '@type') {
+      continue;
+    }
+    if (styles[key] === true) {
+      output[key] = key;
+    } else {
+      output[value] = value;
+    }
+  }
+  return output;
+};

package/src/components/manage/Blocks/schema.js

@@ -0,0 +1,52 @@
+import { cloneDeep } from 'lodash';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageWideSVG from '@plone/volto/icons/image-wide.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+import imageNarrowSVG from '@eeacms/volto-cca-policy/icons/image-narrow.svg';
+
+export const ALIGN_INFO_MAP = {
+  narrow_width: [imageNarrowSVG, 'Narrow width'],
+  container_width: [imageFitSVG, 'Container width'],
+  wide_width: [imageWideSVG, 'Wide width'],
+  full: [imageFullSVG, 'Full width'],
+};
+
+export const addStylingFieldsetSchemaEnhancer = ({ schema }) => {
+  const applied = schema?.properties?.styles;
+
+  if (!applied) {
+    const resSchema = cloneDeep(schema);
+
+    resSchema.fieldsets.push({
+      id: 'styling',
+      fields: ['styles'],
+      title: 'Styling',
+    });
+    resSchema.properties.styles = {
+      widget: 'object',
+      title: 'Styling',
+      schema: {
+        fieldsets: [
+          {
+            id: 'default',
+            title: 'Default',
+            fields: ['size'],
+          },
+        ],
+        properties: {
+          size: {
+            widget: 'style_align',
+            title: 'Section size',
+            actions: Object.keys(ALIGN_INFO_MAP),
+            actionsInfoMap: ALIGN_INFO_MAP,
+          },
+        },
+        required: [],
+      },
+    };
+    return resSchema;
+  }
+
+  return schema;
+};