@plone/volto 18.0.0-alpha.3 → 18.0.0-alpha.30

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/Multilingual/CreateTranslation.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 { MemoryRouter } from 'react-router-dom';
-import config from '@plone/volto/registry';
-
-import CreateTranslation from './CreateTranslation';
-
-beforeAll(() => {
-  config.settings.isMultilingual = true;
-  config.settings.supportedLanguages = ['de', 'es'];
-});
-
-const mockStore = configureStore();
-
-describe('CreateTranslation', () => {
-  it('renders a CreateTranslation component', () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-      translations: {
-        translationLocation: '/es',
-      },
-    });
-    const component = renderer.create(
-      <Provider store={store}>
-        <MemoryRouter>
-          <CreateTranslation
-            location={{
-              pathname: '/blog-post',
-              state: {
-                language: 'es',
-                translationOf: '/en/page-en',
-              },
-            }}
-          />
-        </MemoryRouter>
-      </Provider>,
-    );
-    const json = component.toJSON();
-    expect(json).toMatchSnapshot();
-  });
-});

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

@@ -1,30 +0,0 @@
-import React from 'react';
-import ColorPickerWidget from './ColorPickerWidget';
-import WidgetStory from './story';
-
-export const Default = WidgetStory.bind({
-  widget: ColorPickerWidget,
-});
-
-Default.args = {
-  id: 'favoriteColor',
-  title: 'Favorite Color',
-  colors: [
-    { name: 'red', label: 'red' },
-    { name: 'yellow', label: 'yellow' },
-    { name: 'green', label: 'green' },
-  ],
-};
-
-export default {
-  title: 'Edit Widgets/ColorPicker',
-  component: Default,
-  decorators: [
-    (Story) => (
-      <div className="ui segment form attached" style={{ width: '400px' }}>
-        <Story />
-      </div>
-    ),
-  ],
-  argTypes: {},
-};

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/components/theme/Avatar/Avatar.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import Avatar from './Avatar';
-
-<Meta
-  title="Avatar"
-  argTypes={{
-    title: { control: 'text' },
-  }}
-/>
-
-# Avatar
-
-```jsx static
-<Avatar title="Plone" color="#007eb6" size={60} />
-```
-
-export const UserAvatar = (args) => <Avatar {...args} />;
-
-<Story name="Avatar" args={{ title: 'Plone', color: '#007eb6', size: 60 }}>
-  {UserAvatar.bind({})}
-</Story>
-
-## Props
-
-<ArgsTable of={Avatar} />

package/src/components/theme/Title/Title.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import TitleComponent from './Title';
-
-<Meta
-  title="Title"
-  argTypes={{
-    title: { control: 'text' },
-  }}
-/>
-
-# Title
-
-```jsx static
-<Title title="Plone" />
-```
-
-export const Title = (args) => <TitleComponent {...args} />;
-
-<Story name="Title" args={{ title: 'Welcome to Plone' }}>
-  {Title.bind({})}
-</Story>
-
-## Props
-
-<ArgsTable of={TitleComponent} />

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;
-}

package/src/config/RichTextEditor/Plugins.jsx

@@ -1,59 +0,0 @@
-import createLinkPlugin from '@plone/volto/components/manage/AnchorPlugin';
-
-import Styles from './Styles';
-
-const breakOutOptions = {
-  doubleBreakoutBlocks: [
-    'unordered-list-item',
-    'ordered-list-item',
-    'code-block',
-  ],
-  breakoutBlocks: [
-    'header-one',
-    'header-two',
-    'header-three',
-    'highlight',
-    'blockquote',
-    'callout',
-  ],
-};
-
-//const linkDetectionPlugin = createLinkDetectionPlugin();
-
-const plugins = (props) => {
-  const { draftJsInlineToolbarPlugin, draftJsBlockBreakoutPlugin } = props;
-  const { Separator } = draftJsInlineToolbarPlugin;
-  const blockBreakoutPlugin =
-    draftJsBlockBreakoutPlugin.default(breakOutOptions);
-
-  const linkPlugin = createLinkPlugin({ libraries: props });
-
-  const buttons = Styles(props);
-  const {
-    BoldButton,
-    ItalicButton,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    UnorderedListButton,
-    OrderedListButton,
-    BlockquoteButton,
-    CalloutButton,
-  } = buttons;
-
-  const inlineToolbarButtons = [
-    BoldButton,
-    ItalicButton,
-    linkPlugin.LinkButton,
-    Separator,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    UnorderedListButton,
-    OrderedListButton,
-    BlockquoteButton,
-    CalloutButton,
-  ];
-
-  return { inlineToolbarButtons, plugins: [linkPlugin, blockBreakoutPlugin] }; //linkDetectionPlugin
-};
-
-export default plugins;

package/src/config/RichTextEditor/Styles.jsx

@@ -1,69 +0,0 @@
-import React from 'react';
-// import createInlineStyleButton from 'draft-js-buttons/lib/utils/createInlineStyleButton';
-// import createBlockStyleButton from 'draft-js-buttons/lib/utils/createBlockStyleButton';
-
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-
-import boldSVG from '@plone/volto/icons/bold.svg';
-import italicSVG from '@plone/volto/icons/italic.svg';
-import textSVG from '@plone/volto/icons/text.svg';
-import subtextSVG from '@plone/volto/icons/subtext.svg';
-import unorderedListSVG from '@plone/volto/icons/list-bullet.svg';
-import orderedListSVG from '@plone/volto/icons/list-numbered.svg';
-import blockquoteSVG from '@plone/volto/icons/quote.svg';
-import calloutSVG from '@plone/volto/icons/megaphone.svg';
-
-export default function Styles(props) {
-  const createInlineStyleButton = props.draftJsCreateInlineStyleButton.default;
-  const createBlockStyleButton = props.draftJsCreateBlockStyleButton.default;
-
-  const BoldButton = createInlineStyleButton({
-    style: 'BOLD',
-    children: <Icon name={boldSVG} size="24px" />,
-  });
-
-  const ItalicButton = createInlineStyleButton({
-    style: 'ITALIC',
-    children: <Icon name={italicSVG} size="24px" />,
-  });
-
-  const HeadlineTwoButton = createBlockStyleButton({
-    blockType: 'header-two',
-    children: <Icon name={textSVG} size="24px" />,
-  });
-
-  const HeadlineThreeButton = createBlockStyleButton({
-    blockType: 'header-three',
-    children: <Icon name={subtextSVG} size="24px" />,
-  });
-
-  const UnorderedListButton = createBlockStyleButton({
-    blockType: 'unordered-list-item',
-    children: <Icon name={unorderedListSVG} size="24px" />,
-  });
-
-  const OrderedListButton = createBlockStyleButton({
-    blockType: 'ordered-list-item',
-    children: <Icon name={orderedListSVG} size="24px" />,
-  });
-
-  const BlockquoteButton = createBlockStyleButton({
-    blockType: 'blockquote',
-    children: <Icon name={blockquoteSVG} size="24px" />,
-  });
-
-  const CalloutButton = createBlockStyleButton({
-    blockType: 'callout',
-    children: <Icon name={calloutSVG} size="24px" />,
-  });
-  return {
-    BlockquoteButton,
-    BoldButton,
-    CalloutButton,
-    ItalicButton,
-    HeadlineTwoButton,
-    HeadlineThreeButton,
-    OrderedListButton,
-    UnorderedListButton,
-  };
-}