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

package/src/components/manage/AnchorPlugin/components/LinkButton/index.jsx

@@ -1,126 +0,0 @@
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import EditorUtils from '../../utils/EditorUtils';
-import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
-import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
-import Icon from '@plone/volto/components/theme/Icon/Icon';
-
-import linkSVG from '@plone/volto/icons/link.svg';
-import unlinkSVG from '@plone/volto/icons/unlink.svg';
-
-// import unionClassNames from 'union-class-names';
-//import EditorUtils from 'draft-js-plugins-utils';
-
-/**
- * Add link form class.
- * @class LinkButton
- * @extends Component
- */
-class LinkButton extends Component {
-  static propTypes = {
-    placeholder: PropTypes.string,
-    theme: PropTypes.shape({}).isRequired,
-    ownTheme: PropTypes.shape({}).isRequired,
-    onRemoveLinkAtSelection: PropTypes.func.isRequired,
-    onOverrideContent: PropTypes.func.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.DraftEditorUtils = props.draftJsPluginsUtils.default;
-    this.EditorUtils = EditorUtils(props);
-  }
-
-  static defaultProps = {
-    placeholder: '',
-  };
-
-  onMouseDown = (event) => {
-    event.preventDefault();
-  };
-
-  onAddLinkClick = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    const { ownTheme, placeholder, onOverrideContent } = this.props;
-    const link = this.EditorUtils.getCurrentEntity(
-      this.props.getEditorState(),
-    )?.getData()?.url;
-
-    const content = (props) => (
-      <AddLinkForm
-        {...props}
-        placeholder={placeholder}
-        theme={ownTheme}
-        block="draft-js"
-        data={{ url: link || '' }}
-        onChangeBlock={() => {}}
-        onClear={() => {
-          this.props.setEditorState(
-            this.DraftEditorUtils.removeLinkAtSelection(
-              this.props.getEditorState(),
-            ),
-          );
-        }}
-        onChangeValue={(url) => {
-          this.props.setEditorState(
-            this.DraftEditorUtils.createLinkAtSelection(
-              this.props.getEditorState(),
-              url,
-            ),
-          );
-        }}
-      />
-    );
-    onOverrideContent(content);
-  };
-
-  /**
-   * Render method.
-   * @method render
-   * @returns {string} Markup for the component.
-   */
-  render() {
-    const { theme } = this.props;
-    const hasLinkSelected = this.EditorUtils.hasEntity(
-      this.props.getEditorState(),
-      'LINK',
-    );
-    const className = hasLinkSelected
-      ? cx(theme.button, theme.active)
-      : theme.button;
-
-    return (
-      <div
-        className={theme.buttonWrapper}
-        onMouseDown={this.onMouseDown}
-        role="presentation"
-      >
-        <button
-          className={className}
-          onClick={
-            this.onAddLinkClick
-            // hasLinkSelected
-            //   ? () =>
-            //       onRemoveLinkAtSelection(
-            //         this.props.setEditorState,
-            //         this.props.getEditorState,
-            //       )
-            //   : this.onAddLinkClick
-          }
-          type="button"
-        >
-          {!hasLinkSelected ? (
-            <Icon name={linkSVG} size="24px" />
-          ) : (
-            <Icon name={unlinkSVG} size="24px" />
-          )}
-        </button>
-      </div>
-    );
-  }
-}
-
-export default injectLazyLibs(['draftJs', 'draftJsPluginsUtils'])(LinkButton);

package/src/components/manage/AnchorPlugin/index.jsx

@@ -1,82 +0,0 @@
-import decorateComponentWithProps from 'decorate-component-with-props';
-
-import DefaultLink from './components/Link';
-import LinkButton from './components/LinkButton';
-import linkStrategy, { matchesEntityType } from './linkStrategy';
-
-function unboundRemoveEntity(editorState) {
-  const contentState = editorState.getCurrentContent();
-  const selectionState = editorState.getSelection();
-  const startKey = selectionState.getStartKey();
-  const contentBlock = contentState.getBlockForKey(startKey);
-  const startOffset = selectionState.getStartOffset();
-  const entity = contentBlock.getEntityAt(startOffset);
-
-  if (!entity) {
-    return editorState;
-  }
-
-  let entitySelection = null;
-
-  contentBlock.findEntityRanges(
-    (character) => character.getEntity() === entity,
-    (start, end) => {
-      entitySelection = selectionState.merge({
-        anchorOffset: start,
-        focusOffset: end,
-        isBackward: false,
-      });
-    },
-  );
-
-  const newContentState = this.Modifier.applyEntity(
-    contentState,
-    entitySelection,
-    null,
-  );
-
-  const newEditorState = this.EditorState.push(
-    editorState,
-    newContentState,
-    'apply-entity',
-  );
-
-  return newEditorState;
-}
-
-export default function AnchorPlugin(config = {}) {
-  // ToDo: Get rif of the remainings of having the original CSS modules
-  const defaultTheme = {};
-
-  const {
-    theme = defaultTheme,
-    placeholder,
-    Link,
-    linkTarget,
-    libraries,
-  } = config;
-
-  const removeEntity = unboundRemoveEntity.bind(libraries);
-
-  return {
-    decorators: [
-      {
-        strategy: linkStrategy,
-        matchesEntityType,
-        component:
-          Link ||
-          decorateComponentWithProps(DefaultLink, {
-            className: 'link-anchorlink-theme',
-            target: linkTarget,
-          }),
-      },
-    ],
-
-    LinkButton: decorateComponentWithProps(LinkButton, {
-      ownTheme: theme,
-      placeholder,
-      onRemoveLinkAtSelection: (setEditorState, getEditorState) =>
-        setEditorState(removeEntity(getEditorState())),
-    }),
-  };
-}

package/src/components/manage/AnchorPlugin/linkStrategy.js

@@ -1,21 +0,0 @@
-export const matchesEntityType = (type) => type === 'LINK';
-
-/**
- *
- *
- * @export strategy
- * @param {*} contentBlock contentBlock
- * @param {*} cb cb
- * @param {*} contentState contentState
- * @returns {*} string
- */
-export default function strategy(contentBlock, cb, contentState) {
-  if (!contentState) return;
-  contentBlock.findEntityRanges((character) => {
-    const entityKey = character.getEntity();
-    return (
-      entityKey !== null &&
-      matchesEntityType(contentState.getEntity(entityKey).getType())
-    );
-  }, cb);
-}

package/src/components/manage/AnchorPlugin/utils/EditorUtils.js

@@ -1,47 +0,0 @@
-const EditorUtils = ({ draftJs }) => ({
-  createLinkAtSelection(editorState, url) {
-    const contentState = editorState
-      .getCurrentContent()
-      .createEntity('LINK', 'MUTABLE', { url });
-    const entityKey = contentState.getLastCreatedEntityKey();
-    const withLink = draftJs.RichUtils.toggleLink(
-      editorState,
-      editorState.getSelection(),
-      entityKey,
-    );
-    return draftJs.EditorState.forceSelection(
-      withLink,
-      editorState.getSelection(),
-    );
-  },
-
-  removeLinkAtSelection(editorState) {
-    const selection = editorState.getSelection();
-    return draftJs.RichUtils.toggleLink(editorState, selection, null);
-  },
-
-  getCurrentEntityKey(editorState) {
-    const selection = editorState.getSelection();
-    const anchorKey = selection.getAnchorKey();
-    const contentState = editorState.getCurrentContent();
-    const anchorBlock = contentState.getBlockForKey(anchorKey);
-    const index = selection.isBackward
-      ? selection.focusOffset
-      : selection.anchorOffset;
-
-    return anchorBlock.getEntityAt(index);
-  },
-
-  getCurrentEntity(editorState) {
-    const contentState = editorState.getCurrentContent();
-    const entityKey = this.getCurrentEntityKey(editorState);
-    return entityKey ? contentState.getEntity(entityKey) : null;
-  },
-
-  hasEntity(editorState, entityType) {
-    const entity = this.getCurrentEntity(editorState);
-    return entity && entity.getType() === entityType;
-  },
-});
-
-export default EditorUtils;

package/src/components/manage/Blocks/HeroImageLeft/Data.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import schemaHero from './schema.js';
-import { BlockDataForm } from '@plone/volto/components';
-
-const HeroImageLeftBlockData = (props) => {
-  const { block, data, onChangeBlock, navRoot, contentType } = props;
-  const intl = useIntl();
-  const schema = schemaHero({ ...props, intl });
-  return (
-    <BlockDataForm
-      schema={schema}
-      title={schema.title}
-      onChangeField={(id, value) => {
-        onChangeBlock(block, {
-          ...data,
-          [id]: value,
-        });
-      }}
-      onChangeBlock={onChangeBlock}
-      formData={data}
-      block={block}
-      navRoot={navRoot}
-      contentType={contentType}
-    />
-  );
-};
-
-export default HeroImageLeftBlockData;