@plone/volto 18.0.0-alpha.17 → 18.0.0-alpha.19

package/src/components/manage/LinkDetectionPlugin/link-detection-plugin.jsx

@@ -1,227 +0,0 @@
-import * as React from 'react';
-import { RichUtils, Modifier, EditorState, SelectionState } from 'draft-js';
-import {
-  isURL,
-  getUrlFromString,
-} from '@plone/volto/components/manage/LinkDetectionPlugin/utils';
-
-/*
-Returns editor state with a link entity created / updated to hold the link @data
-for the range specified by @selection
-*/
-
-export function editorStateSettingLink(editorState, selection, data) {
-  const contentState = editorState.getCurrentContent();
-  const entityKey = getCurrentLinkEntityKey(editorState);
-
-  let nextEditorState = editorState;
-
-  if (!entityKey) {
-    const contentStateWithEntity = contentState.createEntity(
-      'LINK',
-      'MUTABLE',
-      data,
-    );
-    const entityKey = contentStateWithEntity.getLastCreatedEntityKey();
-    nextEditorState = EditorState.set(editorState, {
-      currentContent: contentStateWithEntity,
-    });
-    nextEditorState = RichUtils.toggleLink(
-      nextEditorState,
-      selection,
-      entityKey,
-    );
-  } else {
-    nextEditorState = EditorState.set(editorState, {
-      currentContent: editorState
-        .getCurrentContent()
-        .replaceEntityData(entityKey, data),
-    });
-    nextEditorState = EditorState.forceSelection(
-      nextEditorState,
-      editorState.getSelection(),
-    );
-  }
-
-  return nextEditorState;
-}
-
-/*
-Returns the entityKey for the link entity the user is currently within.
-*/
-export function getCurrentLinkEntityKey(editorState) {
-  const contentState = editorState.getCurrentContent();
-  const startKey = editorState.getSelection().getStartKey();
-  const startOffset = editorState.getSelection().getStartOffset();
-  const block = contentState.getBlockForKey(startKey);
-
-  const linkKey = block.getEntityAt(
-    Math.min(block.getText().length - 1, startOffset),
-  );
-
-  if (linkKey) {
-    const linkInstance = contentState.getEntity(linkKey);
-    if (linkInstance.getType() === 'LINK') {
-      return linkKey;
-    }
-  }
-  return null;
-}
-
-/*
-Returns the URL for the link entity the user is currently within.
-*/
-export function getCurrentLink(editorState) {
-  const entityKey = getCurrentLinkEntityKey(editorState);
-  return (
-    entityKey &&
-    editorState.getCurrentContent().getEntity(entityKey).getData().url
-  );
-}
-
-/* LINK COMPONENT */
-const Link = (props) => {
-  const data = props.contentState.getEntity(props.entityKey).getData();
-  const { url } = data;
-  if (!url) {
-    return <span>{props.children}</span>;
-  }
-  return (
-    <a href={url} title={url}>
-      {props.children}
-    </a>
-  );
-};
-
-const findLinkEntities = (contentBlock, callback, contentState) => {
-  contentBlock.findEntityRanges((character) => {
-    const entityKey = character.getEntity();
-    if (!entityKey) return;
-    const entity = contentState.getEntity(entityKey);
-    return entity.getType() === 'LINK' && entity.getData().url;
-  }, callback);
-};
-
-const createLinkDetectionPlugin = () => {
-  return {
-    decorators: [
-      {
-        strategy: findLinkEntities,
-        component: Link,
-      },
-    ],
-    /* The method is always called when we change the data in the editor. */
-    onChange: (editorState) => {
-      // Returns the current contents of the editor.
-      const contentState = editorState.getCurrentContent();
-
-      // Returns the current cursor/selection state of the editor.
-      const selection = editorState.getSelection();
-
-      if (!selection || !selection.isCollapsed()) {
-        return editorState;
-      }
-
-      const cursorOffset = selection.getStartOffset();
-      const cursorBlockKey = selection.getStartKey();
-      const cursorBlock = contentState.getBlockForKey(cursorBlockKey);
-
-      if (cursorBlock.getType() !== 'unstyled') {
-        return editorState;
-      }
-
-      // Step 1: Get the word around the cursor by splitting the current block's text
-      const text = cursorBlock.getText();
-      const currentWordStart = text.lastIndexOf(' ', cursorOffset) + 1;
-      let currentWordEnd = text.indexOf(' ', cursorOffset);
-      if (currentWordEnd === -1) {
-        currentWordEnd = text.length;
-      }
-
-      const currentWord = text.substr(
-        currentWordStart,
-        currentWordEnd - currentWordStart,
-      );
-
-      const currentWordIsURL = isURL(currentWord);
-
-      // Step 2: Find the existing LINK entity under the user's cursor
-      let currentLinkEntityKey = cursorBlock.getEntityAt(
-        Math.min(text.length - 1, cursorOffset),
-      );
-      const inst =
-        currentLinkEntityKey && contentState.getEntity(currentLinkEntityKey);
-      if (inst && inst.getType() !== 'LINK') {
-        currentLinkEntityKey = '';
-      }
-
-      if (currentLinkEntityKey) {
-        // Note: we don't touch link values added / removed "explicitly" via the link
-        // toolbar button. This means you can make a link with text that doesn't match the link. Link touched by this plugin, have "autodetected" prop setted to true
-        const entityExistingData = contentState
-          .getEntity(currentLinkEntityKey)
-          .getData();
-        if (!entityExistingData.autodetected) {
-          return editorState;
-        }
-
-        if (currentWordIsURL) {
-          // We are modifying the URL - update the entity to reflect the current text
-          const contentState = editorState.getCurrentContent();
-          return EditorState.set(editorState, {
-            currentContent: contentState.replaceEntityData(
-              currentLinkEntityKey,
-              {
-                autodetected: true,
-                url: getUrlFromString(currentWord),
-              },
-            ),
-          });
-        } else {
-          // We are no longer in a URL but the entity is still present. Remove it from
-          // the current character so the linkifying "ends".
-          const entityRange = new SelectionState({
-            anchorOffset: currentWordStart - 1,
-            anchorKey: cursorBlockKey,
-            focusOffset: currentWordStart,
-            focusKey: cursorBlockKey,
-            isBackward: false,
-            hasFocus: true,
-          });
-          return EditorState.set(editorState, {
-            currentContent: Modifier.applyEntity(
-              editorState.getCurrentContent(),
-              entityRange,
-              null,
-            ),
-          });
-        }
-      }
-
-      // There is no entity beneath the current word, but it looks like a URL. Linkify it!
-      if (!currentLinkEntityKey && currentWordIsURL) {
-        const entityRange = new SelectionState({
-          anchorOffset: currentWordStart,
-          anchorKey: cursorBlockKey,
-          focusOffset: currentWordEnd,
-          focusKey: cursorBlockKey,
-          isBackward: false,
-          hasFocus: false,
-        });
-
-        let newEditorState = editorStateSettingLink(editorState, entityRange, {
-          autodetected: true,
-          url: getUrlFromString(currentWord),
-        });
-
-        // reset selection to the initial cursor to avoid selecting the entire links
-        newEditorState = EditorState.acceptSelection(newEditorState, selection);
-        return newEditorState;
-      }
-
-      return editorState;
-    },
-  };
-};
-
-export default createLinkDetectionPlugin;

package/src/components/manage/LinkDetectionPlugin/utils.js

@@ -1,12 +0,0 @@
-import linkifyIt from 'linkify-it';
-
-const linkify = linkifyIt();
-
-export const getUrlFromString = (text) => {
-  const matchLinkList = linkify.match(text);
-  return matchLinkList && matchLinkList[0].url;
-};
-
-export const isURL = (text) => {
-  return !!linkify.match(text);
-};

package/src/components/manage/Widgets/WysiwygWidget.jsx

@@ -1,350 +0,0 @@
-/**
- * WysiwygWidget container.
- * @module components/manage/WysiwygWidget/WysiwygWidget
- */
-
-import React, { Component } from 'react';
-import ReactDOMServer from 'react-dom/server';
-import PropTypes from 'prop-types';
-import { connect, Provider } from 'react-redux';
-import { compose } from 'redux';
-import redraft from 'redraft';
-import { Form, Label, TextArea } from 'semantic-ui-react';
-import { map } from 'lodash';
-import { defineMessages, injectIntl } from 'react-intl';
-import configureStore from 'redux-mock-store';
-import { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
-
-import { FormFieldWrapper } from '@plone/volto/components';
-
-import loadable from '@loadable/component';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-
-const Editor = loadable(() => import('draft-js-plugins-editor'));
-
-const messages = defineMessages({
-  default: {
-    id: 'Default',
-    defaultMessage: 'Default',
-  },
-  idTitle: {
-    id: 'Short Name',
-    defaultMessage: 'Short Name',
-  },
-  idDescription: {
-    id: 'Used for programmatic access to the fieldset.',
-    defaultMessage: 'Used for programmatic access to the fieldset.',
-  },
-  title: {
-    id: 'Title',
-    defaultMessage: 'Title',
-  },
-  description: {
-    id: 'Description',
-    defaultMessage: 'Description',
-  },
-  required: {
-    id: 'Required',
-    defaultMessage: 'Required',
-  },
-  delete: {
-    id: 'Delete',
-    defaultMessage: 'Delete',
-  },
-});
-
-/**
- * WysiwygWidget HTML richtext editing widget
- *
- * To use it, in schema properties, declare a field like:
- *
- * ```jsx
- * {
- *  title: "Rich text",
- *  widget: 'richtext',
- * }
- * ```
- *
- */
-class WysiwygWidgetComponent extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    /**
-     * Id of the field
-     */
-    id: PropTypes.string.isRequired,
-    /**
-     * Title of the field
-     */
-    title: PropTypes.string.isRequired,
-    /**
-     * Description of the field
-     */
-    description: PropTypes.string,
-    /**
-     * True if field is required
-     */
-    required: PropTypes.bool,
-    /**
-     * Value of the field
-     */
-    value: PropTypes.shape({
-      /**
-       * Content type of the value
-       */
-      'content-type': PropTypes.string,
-      /**
-       * Data of the value
-       */
-      data: PropTypes.string,
-      /**
-       * Encoding of the value
-       */
-      encoding: PropTypes.string,
-    }),
-    /**
-     * Placeholder for the editor
-     */
-    placeholder: PropTypes.string,
-    /**
-     * List of error messages
-     */
-    error: PropTypes.arrayOf(PropTypes.string),
-    /**
-     * On change handler
-     */
-    onChange: PropTypes.func,
-    /**
-     * On delete handler
-     */
-    onDelete: PropTypes.func,
-    /**
-     * On edit handler
-     */
-    onEdit: PropTypes.func,
-    /**
-     * Wrapped form component
-     */
-    wrapped: PropTypes.bool,
-  };
-
-  /**
-   * Default properties
-   * @property {Object} defaultProps Default properties.
-   * @static
-   */
-  static defaultProps = {
-    description: null,
-    required: false,
-    value: {
-      'content-type': 'text/html',
-      data: '',
-      encoding: 'utf8',
-    },
-    error: [],
-    onEdit: null,
-    onDelete: null,
-    onChange: null,
-  };
-
-  /**
-   * Constructor
-   * @method constructor
-   * @param {Object} props Component properties
-   * @constructs WysiwygWidget
-   */
-  constructor(props) {
-    super(props);
-
-    const { stateFromHTML } = props.draftJsImportHtml;
-    const { EditorState } = props.draftJs;
-    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
-
-    this.draftConfig = config.settings.richtextEditorSettings(props);
-
-    if (!__SERVER__) {
-      let editorState;
-      if (props.value && props.value.data) {
-        const contentState = stateFromHTML(props.value.data, {
-          customBlockFn: this.draftConfig.FromHTMLCustomBlockFn,
-        });
-        editorState = EditorState.createWithContent(contentState);
-      } else {
-        editorState = EditorState.createEmpty();
-      }
-
-      const inlineToolbarPlugin = createInlineToolbarPlugin({
-        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
-      });
-
-      this.state = { editorState, inlineToolbarPlugin };
-    }
-
-    this.schema = {
-      fieldsets: [
-        {
-          id: 'default',
-          title: props.intl.formatMessage(messages.default),
-          fields: ['title', 'id', 'description', 'required'],
-        },
-      ],
-      properties: {
-        id: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.idTitle),
-          description: props.intl.formatMessage(messages.idDescription),
-        },
-        title: {
-          type: 'string',
-          title: props.intl.formatMessage(messages.title),
-        },
-        description: {
-          type: 'string',
-          widget: 'textarea',
-          title: props.intl.formatMessage(messages.description),
-        },
-        required: {
-          type: 'boolean',
-          title: props.intl.formatMessage(messages.required),
-        },
-      },
-      required: ['id', 'title'],
-    };
-
-    this.onChange = this.onChange.bind(this);
-  }
-
-  /**
-   * Change handler
-   * @method onChange
-   * @param {object} editorState Editor state.
-   * @returns {undefined}
-   */
-  onChange(editorState) {
-    const { convertToRaw } = this.props.draftJs;
-    this.setState({ editorState });
-    const mockStore = configureStore();
-
-    this.props.onChange(this.props.id, {
-      'content-type': this.props.value
-        ? this.props.value['content-type']
-        : 'text/html',
-      encoding: this.props.value ? this.props.value.encoding : 'utf8',
-      data: ReactDOMServer.renderToStaticMarkup(
-        <Provider
-          store={mockStore({
-            userSession: {
-              token: this.props.token,
-            },
-          })}
-        >
-          <MemoryRouter>
-            {redraft(
-              convertToRaw(editorState.getCurrentContent()),
-              config.settings.richtextViewSettings.ToHTMLRenderers,
-              config.settings.richtextViewSettings.ToHTMLOptions,
-            )}
-          </MemoryRouter>
-        </Provider>,
-      ),
-    });
-  }
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { id, title, description, required, value, error, fieldSet } =
-      this.props;
-
-    if (__SERVER__) {
-      return (
-        <Form.Field
-          inline
-          required={required}
-          error={error.length > 0}
-          className={description ? 'help' : ''}
-          id={`${fieldSet || 'field'}-${id}`}
-        >
-          <div className="wrapper">
-            <label htmlFor={`field-${id}`}>{title}</label>
-            <TextArea id={id} name={id} value={value ? value.data : ''} />
-            {description && <p className="help">{description}</p>}
-            {map(error, (message) => (
-              <Label key={message} basic color="red" pointing>
-                {message}
-              </Label>
-            ))}
-          </div>
-        </Form.Field>
-      );
-    }
-    const { InlineToolbar } = this.state.inlineToolbarPlugin;
-
-    return (
-      <FormFieldWrapper {...this.props} className="wysiwyg">
-        <div style={{ boxSizing: 'initial' }}>
-          {this.props.onChange ? (
-            <>
-              <Editor
-                id={`field-${id}`}
-                readOnly={this.props.isDisabled}
-                onChange={this.onChange}
-                editorState={this.state.editorState}
-                plugins={[
-                  this.state.inlineToolbarPlugin,
-                  ...this.draftConfig.richTextEditorPlugins,
-                ]}
-                placeholder={this.props.placeholder}
-                blockRenderMap={this.draftConfig.extendedBlockRenderMap}
-                blockStyleFn={this.draftConfig.blockStyleFn}
-                customStyleMap={this.draftConfig.customStyleMap}
-              />
-              {this.props.onChange && <InlineToolbar />}
-            </>
-          ) : (
-            <div className="DraftEditor-root" />
-          )}
-        </div>
-      </FormFieldWrapper>
-    );
-  }
-}
-
-export const WysiwygWidget = compose(
-  injectIntl,
-  injectLazyLibs([
-    'draftJs',
-    'draftJsBlockBreakoutPlugin',
-    'draftJsCreateBlockStyleButton',
-    'draftJsCreateInlineStyleButton',
-    'draftJsFilters',
-    'draftJsImportHtml',
-    'draftJsInlineToolbarPlugin',
-    'draftJsLibIsSoftNewlineEvent',
-    'immutableLib',
-  ]),
-  connect(
-    (state, props) => ({
-      token: state.userSession.token,
-    }),
-    {},
-  ),
-)(WysiwygWidgetComponent);
-
-const Preloader = (props) => {
-  const [loaded, setLoaded] = React.useState(false);
-  React.useEffect(() => {
-    Editor.load().then(() => setLoaded(true));
-  }, []);
-  return loaded ? <WysiwygWidget {...props} /> : null;
-};
-
-export default Preloader;

package/src/components/manage/Widgets/WysiwygWidget.stories.jsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import WysiwygWidget from './WysiwygWidget';
-import WidgetStory from './story';
-
-export const Wysiwyg = WidgetStory.bind({
-  props: { id: 'text', title: 'Rich text' },
-  widget: WysiwygWidget,
-});
-
-export default {
-  title: 'Edit Widgets/Wysiwyg',
-  component: WysiwygWidget,
-  decorators: [
-    (Story) => (
-      <div
-        className="ui segment form attached"
-        style={{ width: '400px', marginTop: '40px' }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {},
-};

package/src/components/manage/Widgets/WysiwygWidget.test.jsx

@@ -1,37 +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 { WysiwygWidget } from './WysiwygWidget';
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
-
-const mockStore = configureStore();
-
-jest.mock('@plone/volto/helpers/Loadable/Loadable');
-beforeAll(
-  async () =>
-    await require('@plone/volto/helpers/Loadable/Loadable').__setLoadables(),
-);
-
-test('renders a wysiwyg widget component', () => {
-  const store = mockStore({
-    intl: {
-      locale: 'en',
-      messages: {},
-    },
-    userSession: {
-      token:
-        'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJhZG1pbiIsImV4cCI6MTU4MjM0MzcyNSwiZnVsbG5hbWUiOm51bGx9.BxCvhI8qrtSYUbuTCJCe5TYo1jw8LXZC3gwd726O0UI',
-    },
-  });
-
-  const component = renderer.create(
-    <Provider store={store}>
-      <WysiwygWidget id="my-field" title="My field" onChange={() => {}} />
-    </Provider>,
-  );
-  const json = component.toJSON();
-  expect(json).toMatchSnapshot();
-});

package/src/config/RichTextEditor/Blocks.jsx

@@ -1,29 +0,0 @@
-export default function Blocks(props) {
-  const { draftJs, immutableLib } = props;
-  const { DefaultDraftBlockRenderMap } = draftJs;
-  const { Map } = immutableLib;
-
-  const blockRenderMap = Map({
-    callout: {
-      element: 'p',
-    },
-    unstyled: {
-      element: 'div',
-    },
-  });
-
-  const extendedBlockRenderMap =
-    DefaultDraftBlockRenderMap.merge(blockRenderMap);
-
-  const blockStyleFn = (contentBlock) => {
-    const type = contentBlock.getType();
-    if (type === 'callout') {
-      return 'callout';
-    }
-    return null;
-  };
-
-  const listBlockTypes = ['unordered-list-item', 'ordered-list-item'];
-
-  return { extendedBlockRenderMap, blockStyleFn, listBlockTypes };
-}

package/src/config/RichTextEditor/FromHTML.jsx

@@ -1,8 +0,0 @@
-export default function FromHTMLCustomBlockFn(element) {
-  if (element.className === 'callout') {
-    return {
-      type: 'callout',
-    };
-  }
-  return null;
-}