@plone/volto 18.0.0-alpha.2 → 18.0.0-alpha.20

package/src/components/manage/Blocks/Table/Edit.test.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-
-import Edit from './Edit';
-
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
-
-const mockStore = configureStore();
-
-test('renders an edit table block component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-  const component = renderer.create(
-    <Provider store={store}>
-      <Edit
-        data={{ table: { rows: [] } }}
-        selected={false}
-        block="1234"
-        onAddBlock={() => {}}
-        onInsertBlock={() => {}}
-        onChangeBlock={() => {}}
-        onSelectBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onFocusPreviousBlock={() => {}}
-        onFocusNextBlock={() => {}}
-        handleKeyDown={() => {}}
-        onMutateBlock={() => {}}
-        index={1}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});

package/src/components/manage/Blocks/Table/Readme.md

@@ -1,5 +0,0 @@
-# Warning
-
-This is the older, draft-js based implementation of the Table block. For the
-Table block that's used, please take a look at the `packages/volto-slate`
-folder.

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

@@ -1,51 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Table } from 'semantic-ui-react';
-import { map } from 'lodash';
-import redraft from 'redraft';
-import config from '@plone/volto/registry';
-
-const View = ({ data }) =>
-  data &&
-  data.table && (
-    <Table
-      fixed={data.table.fixed}
-      compact={data.table.compact}
-      basic={data.table.basic ? 'very' : false}
-      celled={data.table.celled}
-      inverted={data.table.inverted}
-      striped={data.table.striped}
-    >
-      <Table.Body>
-        {map(data.table.rows, (row) => (
-          <Table.Row key={row.key}>
-            {map(row.cells, (cell) => (
-              <Table.Cell
-                key={cell.key}
-                as={cell.type === 'header' ? 'th' : 'td'}
-              >
-                {cell.value && cell.value.blocks && cell.value.blocks[0].text
-                  ? redraft(
-                      cell.value,
-                      config.settings.richtextViewSettings.ToHTMLRenderers,
-                      config.settings.richtextViewSettings.ToHTMLOptions,
-                    )
-                  : '\u00A0'}
-              </Table.Cell>
-            ))}
-          </Table.Row>
-        ))}
-      </Table.Body>
-    </Table>
-  );
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-View.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-};
-
-export default View;

package/src/components/manage/Blocks/Table/View.test.jsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import View from './View';
-
-test('renders a view table component', () => {
-  const component = renderer.create(
-    <View
-      data={{
-        table: {
-          rows: [
-            {
-              key: 'a',
-              cells: [
-                {
-                  type: 'data',
-                  key: 'b',
-                  value: {
-                    blocks: [
-                      {
-                        data: {},
-                        depth: 0,
-                        entityRanges: [],
-                        inlineStyleRanges: [],
-                        key: 'fgm98',
-                        text: 'My header',
-                        type: 'header-two',
-                      },
-                    ],
-                    entityMap: {},
-                  },
-                },
-              ],
-            },
-          ],
-        },
-      }}
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});

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

@@ -1,372 +0,0 @@
-/**
- * Edit text block.
- * @module components/manage/Blocks/Title/Edit
- */
-
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { compose } from 'redux';
-
-import { defineMessages, injectIntl } from 'react-intl';
-import { includes, isEqual } from 'lodash';
-import config from '@plone/volto/registry';
-
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import { BlockChooserButton } from '@plone/volto/components';
-
-import loadable from '@loadable/component';
-
-const Editor = loadable(() => import('draft-js-plugins-editor'));
-
-const messages = defineMessages({
-  text: {
-    id: 'Type text…',
-    defaultMessage: 'Type text…',
-  },
-});
-
-/**
- * Edit text block class.
- * @class Edit
- * @extends Component
- */
-export class EditComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    detached: PropTypes.bool,
-    index: PropTypes.number.isRequired,
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    onAddBlock: PropTypes.func.isRequired,
-    onInsertBlock: PropTypes.func.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onMutateBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    editable: PropTypes.bool,
-    allowedBlocks: PropTypes.arrayOf(PropTypes.string),
-    showRestricted: PropTypes.bool,
-    formTitle: PropTypes.string,
-    formDescription: PropTypes.string,
-    blocksConfig: PropTypes.objectOf(PropTypes.any),
-    properties: PropTypes.objectOf(PropTypes.any),
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    detached: false,
-    editable: true,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygEditor
-   */
-  constructor(props) {
-    super(props);
-
-    const { settings } = config;
-
-    this.draftConfig = settings.richtextEditorSettings(props);
-
-    const { EditorState, convertFromRaw } = props.draftJs;
-    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
-
-    if (!__SERVER__) {
-      let editorState;
-      if (props.data && props.data.text) {
-        editorState = EditorState.createWithContent(
-          convertFromRaw(props.data.text),
-        );
-      } else {
-        editorState = EditorState.createEmpty();
-      }
-
-      const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
-      });
-
-      this.state = {
-        editorState,
-        inlineToolbarPlugin,
-      };
-    }
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * Component will receive props
-   * @method componentDidMount
-   * @returns {undefined}
-   */
-  componentDidMount() {
-    if (this.props.selected) {
-      // See https://github.com/draft-js-plugins/draft-js-plugins/issues/800
-      setTimeout(this.node.focus, 0);
-    }
-  }
-
-  /**
-   * Component will receive props
-   * @method componentWillReceiveProps
-   * @param {Object} nextProps Next properties
-   * @returns {undefined}
-   */
-  UNSAFE_componentWillReceiveProps(nextProps) {
-    if (!this.props.selected && nextProps.selected) {
-      const selectionState = this.state.editorState.getSelection();
-
-      if (selectionState.getStartOffset() < selectionState.getEndOffset()) {
-        //keep selection
-      } else {
-        //nothing is selected, move focus to end
-        // See https://github.com/draft-js-plugins/draft-js-plugins/issues/800
-        setTimeout(this.node.focus, 0);
-        const { EditorState } = this.props.draftJs;
-
-        this.setState({
-          editorState: EditorState.moveFocusToEnd(this.state.editorState),
-        });
-      }
-    }
-  }
-
-  componentDidUpdate(prevProps) {
-    const { convertToRaw, EditorState, convertFromRaw } = this.props.draftJs;
-    if (
-      !isEqual(this.props.data, prevProps.data) &&
-      !isEqual(
-        convertToRaw(this.state.editorState.getCurrentContent()),
-        this.props.data.text,
-      )
-    ) {
-      const editorState =
-        this.props.data && this.props.data.text
-          ? EditorState.createWithContent(convertFromRaw(this.props.data.text))
-          : EditorState.createEmpty();
-
-      this.setState({
-        editorState: editorState,
-      });
-    }
-  }
-
-  /**
-   * @param {*} nextProps
-   * @param {*} nextState
-   * @returns {boolean}
-   * @memberof Edit
-   */
-  shouldComponentUpdate(nextProps, nextState) {
-    return (
-      this.props.selected ||
-      !isEqual(this.props.data, nextProps.data) ||
-      !isEqual(this.state.editorState, nextState.editorState)
-    );
-  }
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(editorState) {
-    const shouldFilterPaste =
-      editorState.getLastChangeType() === 'insert-fragment';
-
-    const { convertToRaw } = this.props.draftJs;
-    const { filterEditorState } = this.props.draftJsFilters;
-
-    if (
-      !isEqual(
-        convertToRaw(editorState.getCurrentContent()),
-        convertToRaw(this.state.editorState.getCurrentContent()),
-      )
-    ) {
-      if (shouldFilterPaste) {
-        let filteredState = editorState;
-        filteredState = filterEditorState(
-          {
-            blocks: ['unordered-list-item', 'ordered-list-item'],
-            styles: ['BOLD', 'ITALIC'],
-            entities: [
-              {
-                type: 'LINK',
-                attributes: ['url'],
-              },
-            ],
-            whitespacedCharacters: [],
-          },
-          filteredState,
-        );
-        editorState = filteredState;
-      }
-      this.props.onChangeBlock(this.props.block, {
-        ...this.props.data,
-        text: convertToRaw(editorState.getCurrentContent()),
-      });
-    }
-    this.setState({ editorState });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    // console.log('draft config', this.draftConfig);
-
-    if (__SERVER__) {
-      return <div />;
-    }
-
-    const placeholder =
-      this.props.data.placeholder ||
-      this.props.formTitle ||
-      this.props.intl.formatMessage(messages.text);
-
-    const disableNewBlocks =
-      this.props.data?.disableNewBlocks || this.props.detached;
-    const { InlineToolbar } = this.state.inlineToolbarPlugin;
-    // const { settings } = config;
-
-    const isSoftNewlineEvent = this.props.draftJsLibIsSoftNewlineEvent.default;
-    const { RichUtils } = this.props.draftJs;
-
-    return (
-      <>
-        <Editor
-          readOnly={!this.props.editable}
-          onChange={this.onChange}
-          editorState={this.state.editorState}
-          plugins={[
-            this.state.inlineToolbarPlugin,
-            // ...settings.richTextEditorPlugins,
-            ...this.draftConfig.richTextEditorPlugins,
-          ]}
-          blockRenderMap={this.draftConfig.extendedBlockRenderMap}
-          blockStyleFn={this.draftConfig.blockStyleFn}
-          customStyleMap={this.draftConfig.customStyleMap}
-          placeholder={placeholder}
-          handleReturn={(e) => {
-            if (isSoftNewlineEvent(e)) {
-              this.onChange(
-                RichUtils.insertSoftNewline(this.state.editorState),
-              );
-              return 'handled';
-            }
-            if (!disableNewBlocks) {
-              const selectionState = this.state.editorState.getSelection();
-              const anchorKey = selectionState.getAnchorKey();
-              const currentContent = this.state.editorState.getCurrentContent();
-              const currentContentBlock =
-                currentContent.getBlockForKey(anchorKey);
-              const blockType = currentContentBlock.getType();
-              if (!includes(this.draftConfig.listBlockTypes, blockType)) {
-                this.props.onSelectBlock(
-                  this.props.onAddBlock(
-                    config.settings.defaultBlockType,
-                    this.props.index + 1,
-                  ),
-                );
-                return 'handled';
-              }
-              return 'un-handled';
-            }
-            return {};
-          }}
-          handleKeyCommand={(command, editorState) => {
-            if (this.props.data.required) {
-              return;
-            }
-            if (
-              command === 'backspace' &&
-              editorState.getCurrentContent().getPlainText().length === 0
-            ) {
-              this.props.onDeleteBlock(this.props.block, true);
-            }
-          }}
-          onUpArrow={() => {
-            const selectionState = this.state.editorState.getSelection();
-            const currentCursorPosition = selectionState.getStartOffset();
-
-            if (currentCursorPosition === 0) {
-              this.props.onFocusPreviousBlock(this.props.block, this.node);
-            }
-          }}
-          onDownArrow={() => {
-            const selectionState = this.state.editorState.getSelection();
-            const { editorState } = this.state;
-            const currentCursorPosition = selectionState.getStartOffset();
-            const blockLength = editorState
-              .getCurrentContent()
-              .getFirstBlock()
-              .getLength();
-
-            if (currentCursorPosition === blockLength) {
-              this.props.onFocusNextBlock(this.props.block, this.node);
-            }
-          }}
-          ref={(node) => {
-            this.node = node;
-          }}
-        />
-        <InlineToolbar />
-        {!config.experimental.addBlockButton.enabled && this.props.selected && (
-          <BlockChooserButton
-            data={this.props.data}
-            block={this.props.block}
-            onInsertBlock={(id, value) => {
-              this.props.onSelectBlock(this.props.onInsertBlock(id, value));
-            }}
-            allowedBlocks={this.props.allowedBlocks}
-            blocksConfig={this.props.blocksConfig}
-            size="24px"
-            properties={this.props.properties}
-          />
-        )}
-      </>
-    );
-  }
-}
-
-export const Edit = compose(
-  injectIntl,
-  injectLazyLibs([
-    'draftJs',
-    'draftJsLibIsSoftNewlineEvent',
-    'draftJsFilters',
-    'draftJsInlineToolbarPlugin',
-    'draftJsBlockBreakoutPlugin',
-    'draftJsCreateInlineStyleButton',
-    'draftJsCreateBlockStyleButton',
-    'immutableLib',
-    // TODO: add all plugin dependencies, also in Wysiwyg and Cell
-  ]),
-)(EditComponent);
-
-const Preloader = (props) => {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    Editor.load().then(() => setLoaded(true));
-  }, []);
-  return loaded ? <Edit {...props} /> : null;
-};
-
-export default Preloader;

package/src/components/manage/Blocks/Text/Edit.test.jsx

@@ -1,46 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-
-import { Edit } from './Edit';
-
-const mockStore = configureStore();
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
-
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
-
-test('renders an edit text block component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-  });
-  const component = renderer.create(
-    <Provider store={store}>
-      <Edit
-        data={{ text: '<p>body text</p>' }}
-        selected={false}
-        block="1234"
-        onAddBlock={() => {}}
-        onInsertBlock={() => {}}
-        onChangeBlock={() => {}}
-        onSelectBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onFocusPreviousBlock={() => {}}
-        onFocusNextBlock={() => {}}
-        handleKeyDown={() => {}}
-        onMutateBlock={() => {}}
-        index={1}
-      />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});

package/src/components/manage/Blocks/Text/Readme.md

@@ -1,5 +0,0 @@
-# Warning
-
-This is the older, draft-js based implementation of the Text block. For the
-Text block that's used, please take a look at the `packages/volto-slate`
-folder.

package/src/components/manage/Blocks/Text/Schema.jsx

@@ -1,31 +0,0 @@
-import BlockSettingsSchema from '@plone/volto/components/manage/Blocks/Block/Schema';
-
-const Schema = {
-  ...BlockSettingsSchema,
-  fieldsets: [
-    {
-      ...BlockSettingsSchema.fieldsets[0],
-      // fields: [
-      //   ...BlockSettingsSchema.fieldsets[0].fields,
-      //   'minLength',
-      //   'maxLength',
-      // ],
-    },
-  ],
-  properties: {
-    ...BlockSettingsSchema.properties,
-    /* TODO Enable when we have block validation inplace */
-    // minLength: {
-    //   title: 'Min length',
-    //   description: 'Minimum number of characters',
-    //   type: 'integer',
-    // },
-    // maxLength: {
-    //   title: 'Max length',
-    //   description: 'Maximum number of characters',
-    //   type: 'integer',
-    // },
-  },
-};
-
-export default Schema;

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

@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types';
-import redraft from 'redraft';
-import React from 'react';
-import config from '@plone/volto/registry';
-
-const View = ({ data }) =>
-  data.text ? (
-    redraft(
-      data.text,
-      config.settings.richtextViewSettings.ToHTMLRenderers,
-      config.settings.richtextViewSettings.ToHTMLOptions,
-    )
-  ) : (
-    <br />
-  );
-
-/**
- * Property types.
- * @property {Object} propTypes Property types.
- * @static
- */
-View.propTypes = {
-  data: PropTypes.objectOf(PropTypes.any).isRequired,
-};
-
-export default View;

package/src/components/manage/Blocks/Text/View.test.jsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import renderer from 'react-test-renderer';
-import View from './View';
-
-test('renders a view text component', () => {
-  const component = renderer.create(
-    <View
-      data={{
-        text: {
-          blocks: [
-            {
-              data: {},
-              depth: 0,
-              entityRanges: [],
-              inlineStyleRanges: [],
-              key: 'fgm98',
-              text: 'My header',
-              type: 'header-two',
-            },
-          ],
-          entityMap: {},
-        },
-      }}
-    />,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});