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

package/packages/volto-slate/src/editor/plugins/AdvancedLink/index.js

@@ -1,50 +0,0 @@
-import { defineMessages } from 'react-intl'; // , defineMessages
-import linkSVG from '@plone/volto/icons/link.svg';
-import { makeInlineElementPlugin } from '@plone/volto-slate/elementEditor';
-
-import { LINK } from '@plone/volto-slate/constants';
-import { LinkElement } from './render';
-import { withLink } from './extensions';
-import { linkDeserializer } from './deserialize';
-import LinkEditSchema from './schema';
-
-const messages = defineMessages({
-  edit: {
-    id: 'Edit link',
-    defaultMessage: 'Edit link',
-  },
-  delete: {
-    id: 'Remove link',
-    defaultMessage: 'Remove link',
-  },
-});
-
-export default (config) => {
-  const { slate } = config.settings;
-
-  slate.toolbarButtons = [...(slate.toolbarButtons || []), LINK];
-  slate.expandedToolbarButtons = [
-    ...(slate.expandedToolbarButtons || []),
-    LINK,
-  ];
-
-  slate.htmlTagsToSlate.A = linkDeserializer;
-
-  const opts = {
-    title: 'Link',
-    pluginId: LINK,
-    elementType: LINK,
-    element: LinkElement,
-    isInlineElement: true,
-    editSchema: LinkEditSchema,
-    extensions: [withLink],
-    hasValue: (formData) => !!formData.link,
-    toolbarButtonIcon: linkSVG,
-    messages,
-  };
-
-  const [installLinkEditor] = makeInlineElementPlugin(opts);
-  config = installLinkEditor(config);
-
-  return config;
-};

package/packages/volto-slate/src/editor/plugins/AdvancedLink/render.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { UniversalLink } from '@plone/volto/components';
-import './styles.less';
-
-export const LinkElement = ({ attributes, children, element, mode }) => {
-  // TODO: handle title on internal links
-  let url = element.url;
-  const { link } = element.data || {};
-
-  const internal_link = link?.internal?.internal_link?.[0]?.['@id'];
-  const external_link = link?.external?.external_link;
-  const email = link?.email;
-
-  const href = email
-    ? `mailto:${email.email_address}${
-        email.email_subject ? `?subject=${email.email_subject}` : ''
-      }`
-    : external_link || internal_link || url;
-
-  const { title } = element?.data || {};
-
-  return mode === 'view' ? (
-    <>
-      <UniversalLink
-        href={href || '#'}
-        openLinkInNewTab={link?.external?.target === '_blank'}
-        title={title}
-      >
-        {children}
-      </UniversalLink>
-    </>
-  ) : (
-    <span {...attributes} className="slate-editor-link">
-      {children}
-    </span>
-  );
-};

package/packages/volto-slate/src/editor/plugins/AdvancedLink/schema.js

@@ -1,114 +0,0 @@
-import externalSVG from '@plone/volto/icons/link.svg';
-import internalSVG from '@plone/volto/icons/nav.svg';
-import emailSVG from '@plone/volto/icons/email.svg';
-// import pageLinkSVG from '@plone/volto/icons/show-blocks.svg';
-
-export const EmailLinkSchema = {
-  title: 'Email address',
-  fieldsets: [
-    {
-      id: 'email',
-      title: 'Email',
-      fields: ['email_address', 'email_subject'],
-    },
-  ],
-  properties: {
-    email_address: {
-      title: 'Email address',
-    },
-    email_subject: {
-      title: 'Email subject',
-      description: 'Optional',
-    },
-  },
-  required: [],
-};
-
-export const InternalLinkSchema = {
-  title: 'Internal link',
-  fieldsets: [
-    {
-      id: 'internal',
-      title: 'Internal',
-      fields: ['internal_link'],
-    },
-  ],
-  properties: {
-    internal_link: {
-      widget: 'object_browser',
-      title: 'Internal link',
-      multiple: false,
-      mode: 'link',
-      selectedItemAttrs: [],
-    },
-  },
-  required: [],
-};
-
-export const ExternalLinkSchema = {
-  title: 'External link',
-  fieldsets: [
-    {
-      id: 'external',
-      title: 'External',
-      fields: ['external_link', 'target'],
-    },
-  ],
-  properties: {
-    external_link: {
-      title: 'External URL',
-      description:
-        'URL can be relative within this site or absolute if it starts with http:// or https://',
-    },
-    target: {
-      title: 'Target',
-      choices: [
-        ['_self', 'Open in this window / frame'],
-        ['_blank', 'Open in new window'],
-        ['_parent', 'Open in parent window / frame'],
-        ['_top', 'Open in top frame (replaces all frames)'],
-      ],
-    },
-  },
-  required: [],
-};
-
-const LinkEditSchema = {
-  title: 'Insert link',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Internal link',
-      fields: ['link', 'title'],
-    },
-  ],
-  properties: {
-    title: {
-      title: 'Link Title',
-    },
-    link: {
-      title: 'Link',
-      widget: 'object_by_type',
-      schemas: [
-        {
-          id: 'internal',
-          icon: internalSVG,
-          schema: InternalLinkSchema,
-        },
-        {
-          id: 'external',
-          icon: externalSVG,
-          schema: ExternalLinkSchema,
-        },
-        {
-          id: 'email',
-          icon: emailSVG,
-          schema: EmailLinkSchema,
-        },
-      ],
-    },
-  },
-  required: [],
-};
-
-export default LinkEditSchema;

package/packages/volto-slate/src/editor/plugins/AdvancedLink/styles.less

@@ -1,8 +0,0 @@
-@type: 'extra';
-@element: 'custom';
-
-@import (multiple, reference, optional) '../../theme.config';
-
-.slate-editor-link {
-  color: @linkColor;
-}

package/packages/volto-slate/src/editor/plugins/Blockquote/index.js

@@ -1,30 +0,0 @@
-import React from 'react';
-import { BlockButton } from '@plone/volto-slate/editor/ui';
-import quoteIcon from '@plone/volto/icons/quote.svg';
-
-// TODO: this needs to use constants for el type
-
-export const BlockquoteElement = ({ attributes, children }) => {
-  // the 'callout' class is defined in file 'blocks.less'
-  // TODO: move the style out of it into a `blockquote` tag name selector
-  return <blockquote {...attributes}>{children}</blockquote>;
-};
-
-export default function install(config) {
-  const { slate } = config.settings;
-
-  slate.buttons['blockquote'] = (props) => (
-    <BlockButton
-      format="blockquote"
-      icon={quoteIcon}
-      title="Blockquote"
-      {...props}
-    />
-  );
-  slate.elements['blockquote'] = BlockquoteElement;
-
-  slate.toolbarButtons.push('blockquote');
-  slate.expandedToolbarButtons.push('blockquote');
-
-  return config;
-}

package/packages/volto-slate/src/editor/plugins/Callout/index.js

@@ -1,34 +0,0 @@
-import React from 'react';
-import { BlockButton } from '@plone/volto-slate/editor/ui';
-import calloutSVG from '@plone/volto/icons/megaphone.svg';
-
-// TODO: this needs to use constants for el type
-
-export const CalloutElement = ({ attributes, children, element }) => {
-  // the 'callout' class is defined in file 'blocks.less'
-  // TODO: move the style out of it into a `blockquote` tag name selector
-  return (
-    <p {...attributes} className="callout">
-      {children}
-    </p>
-  );
-};
-
-export default function install(config) {
-  const { slate } = config.settings;
-
-  slate.buttons['callout'] = (props) => (
-    <BlockButton
-      format="callout"
-      icon={calloutSVG}
-      title="Callout"
-      {...props}
-    />
-  );
-  slate.elements['callout'] = CalloutElement;
-
-  slate.toolbarButtons.push('callout');
-  slate.expandedToolbarButtons.push('callout');
-
-  return config;
-}

package/packages/volto-slate/src/editor/plugins/Image/deconstruct.js

@@ -1,30 +0,0 @@
-import { v4 as uuid } from 'uuid';
-import { Editor, Transforms } from 'slate';
-import { IMAGE } from '@plone/volto-slate/constants';
-
-export function syncCreateImageBlock(url) {
-  const id = uuid();
-  const block = {
-    '@type': 'image',
-    url,
-  };
-  return [id, block];
-}
-
-// This function is used by deconstructToVoltoBlocks, so not directly by the
-// <SlateEditor>. File exists here because there's no "blocks/Image" folder
-export const extractImages = (editor, pathRef) => {
-  const imageNodes = Array.from(
-    Editor.nodes(editor, {
-      at: pathRef.current,
-      match: (node) => node.type === IMAGE,
-    }),
-  );
-  const images = imageNodes.map(([el, path]) => el);
-  Transforms.removeNodes(editor, {
-    at: pathRef.current,
-    match: (node) => node.type === IMAGE,
-  });
-
-  return images.map((el) => syncCreateImageBlock(el.url));
-};

package/packages/volto-slate/src/editor/plugins/Image/extensions.js

@@ -1,51 +0,0 @@
-// The default behavior is to allow images to be copy/pasted inside the editor
-// The TextBlockEdit extensions will come and then split the images into
-// separate dedicated Volto image blocks.
-
-import { IMAGE } from '@plone/volto-slate/constants';
-import { jsx } from 'slate-hyperscript';
-
-export const deserializeImageTag = (editor, el) => {
-  const attrs = { type: IMAGE };
-
-  // TODO: not all of these attributes should be stored in the DB
-  for (const name of el.getAttributeNames()) {
-    attrs[name] = el.getAttribute(name);
-  }
-
-  // TODO: recognize more unsupported protocols
-  if (typeof attrs.src === 'undefined' || attrs.src.startsWith('file:///')) {
-    return null;
-  }
-
-  attrs.url = attrs.src;
-  delete attrs.src;
-
-  return [jsx('element', attrs, [{ text: '' }])];
-};
-
-/**
- * Allows for pasting images from clipboard.
- * Not yet: dragging and dropping images, selecting them through a file system dialog.
- * @param typeImg
- */
-export const withImage = (editor) => {
-  const { isVoid, isInline } = editor;
-
-  editor.isVoid = (element) => {
-    return element.type === IMAGE ? true : isVoid(element);
-  };
-
-  // If it's not marked as inline, Slate will strip the {type:'img"} nodes when
-  // it finds them next to {text: ''} nodes
-  editor.isInline = (element) => {
-    return element && element.type === IMAGE ? true : isInline(element);
-  };
-
-  editor.htmlTagsToSlate = {
-    ...editor.htmlTagsToSlate,
-    IMG: deserializeImageTag,
-  };
-
-  return editor;
-};

package/packages/volto-slate/src/editor/plugins/Image/index.js

@@ -1,11 +0,0 @@
-import { withImage } from './extensions';
-import { ImageElement } from './render';
-
-export default function install(config) {
-  const { slate } = config.settings;
-
-  slate.extensions = [...(slate.extensions || []), withImage];
-  slate.elements.img = ImageElement;
-
-  return config;
-}

package/packages/volto-slate/src/editor/plugins/Image/render.jsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import { useSelected, useFocused } from 'slate-react';
-
-export const ImageElement = (props) => {
-  const { attributes, children, element } = props;
-  const selected = useSelected();
-  const focused = useFocused();
-
-  const style = {
-    display: 'block',
-    maxWidth: '100%',
-    maxHeight: '20em',
-    boxShadow: selected && focused ? '0 0 0 2px blue' : 'none',
-  };
-
-  return (
-    <span {...attributes} style={{ display: 'inline-block' }}>
-      {children}
-      <img alt="" src={element.url} style={style} />
-    </span>
-  );
-};

package/packages/volto-slate/src/editor/plugins/Link/extensions.js

@@ -1,58 +0,0 @@
-import { Text, Transforms, Element } from 'slate'; // Editor,
-import { SIMPLELINK } from '@plone/volto-slate/constants';
-import { jsx } from 'slate-hyperscript';
-import { deserialize } from '@plone/volto-slate/editor/deserialize';
-
-const nodeToText = (node) => {
-  if (Text.isText(node)) {
-    return node.text.trim();
-  } else {
-    return node.children.map(nodeToText).join('');
-  }
-};
-
-export const withSimpleLink = (editor) => {
-  const { isInline, normalizeNode } = editor;
-
-  editor.isInline = (element) => {
-    return element && element.type === SIMPLELINK ? true : isInline(element);
-  };
-
-  editor.normalizeNode = (entry) => {
-    const [node, path] = entry;
-    const isTextNode = Text.isText(node);
-    const isElementNode = Element.isElement(node);
-    const isLinkTypeNode = node.type === SIMPLELINK;
-
-    // delete childless link nodes
-    if (!isTextNode && isElementNode && isLinkTypeNode && !nodeToText(node)) {
-      Transforms.removeNodes(editor, { at: path });
-      return;
-    }
-
-    return normalizeNode(entry);
-  };
-
-  return editor;
-};
-
-export const simpleLinkDeserializer = (editor, el) => {
-  let parent = el;
-
-  let children = Array.from(parent.childNodes)
-    .map((el) => deserialize(editor, el))
-    .flat();
-
-  if (!children.length) children = [{ text: '' }];
-
-  const attrs = {
-    type: SIMPLELINK,
-    data: {
-      url: el.getAttribute('href'),
-    },
-  };
-
-  return jsx('element', attrs, children);
-};
-
-simpleLinkDeserializer.id = 'simpleLinkDeserializer';

package/packages/volto-slate/src/editor/plugins/Link/index.js

@@ -1,164 +0,0 @@
-import React from 'react';
-import { defineMessages } from 'react-intl'; // , defineMessages
-import { ReactEditor, useSlate } from 'slate-react';
-import { useSelector, useDispatch } from 'react-redux';
-import AddLinkForm from '@plone/volto/components/manage/AnchorPlugin/components/LinkButton/AddLinkForm';
-import {
-  _insertElement,
-  _unwrapElement,
-  _isActiveElement,
-  _getActiveElement,
-} from '@plone/volto-slate/elementEditor/utils';
-import { SIMPLELINK, LINK } from '@plone/volto-slate/constants';
-import { LinkElement } from './render';
-import { simpleLinkDeserializer, withSimpleLink } from './extensions';
-import { setPluginOptions } from '@plone/volto-slate/actions';
-import {
-  ToolbarButton as UIToolbarButton,
-  PositionedToolbar,
-} from '@plone/volto-slate/editor/ui';
-import { useSelectionPosition } from '@plone/volto-slate/hooks';
-
-import linkSVG from '@plone/volto/icons/link.svg';
-import unlinkSVG from '@plone/volto/icons/unlink.svg';
-
-const messages = defineMessages({
-  add: {
-    id: 'Add link',
-    defaultMessage: 'Add link',
-  },
-  edit: {
-    id: 'Edit link',
-    defaultMessage: 'Edit link',
-  },
-});
-
-function getPositionStyle(rect) {
-  return {
-    style: {
-      opacity: 1,
-      top: rect.top + window.pageYOffset - 6,
-      left: rect.left + window.pageXOffset + rect.width / 2,
-    },
-  };
-}
-
-const LinkEditor = (props) => {
-  const {
-    editor,
-    pluginId,
-    getActiveElement,
-    unwrapElement,
-    insertElement,
-  } = props;
-  const pid = `${editor.uid}-${pluginId}`;
-  const showEditor = useSelector((state) => {
-    return state['slate_plugins']?.[pid]?.show_sidebar_editor;
-  });
-  const savedPosition = React.useRef();
-  const rect = useSelectionPosition();
-
-  const dispatch = useDispatch();
-
-  const active = getActiveElement(editor);
-  // console.log('active', active);
-  const [node] = active || [];
-
-  if (showEditor && !savedPosition.current) {
-    savedPosition.current = getPositionStyle(rect);
-  }
-
-  return showEditor ? (
-    <PositionedToolbar className="add-link" position={savedPosition.current}>
-      <AddLinkForm
-        block="draft-js"
-        placeholder={'Add link'}
-        data={{ url: node?.data?.url || '' }}
-        theme={{}}
-        onChangeValue={(url) => {
-          if (!active) {
-            if (!editor.selection) editor.selection = editor.savedSelection;
-            insertElement(editor, { url });
-          } else {
-            const selection = unwrapElement(editor);
-            editor.selection = selection;
-            insertElement(editor, { url });
-          }
-          ReactEditor.focus(editor);
-          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
-          savedPosition.current = null;
-        }}
-        onClear={() => {
-          // clear button was pressed in the link edit popup
-          const newSelection = JSON.parse(
-            JSON.stringify(unwrapElement(editor)),
-          );
-          editor.selection = newSelection;
-          editor.savedSelection = newSelection;
-        }}
-        onOverrideContent={(c) => {
-          dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
-          savedPosition.current = null;
-        }}
-      />
-    </PositionedToolbar>
-  ) : null;
-};
-
-const applyConfig = (config) => {
-  const { slate } = config.settings;
-
-  const PLUGINID = SIMPLELINK;
-
-  const linkBtnIndex = slate.toolbarButtons.findIndex((b) => b === LINK);
-  slate.expandedToolbarButtons = slate.expandedToolbarButtons.filter(
-    (b) => b !== LINK,
-  );
-
-  const insertElement = _insertElement(PLUGINID);
-  const getActiveElement = _getActiveElement(PLUGINID);
-  const isActiveElement = _isActiveElement(PLUGINID);
-  const unwrapElement = _unwrapElement(PLUGINID);
-
-  const ToolbarButton = (props) => {
-    const dispatch = useDispatch();
-    const editor = useSlate();
-    const isElement = isActiveElement(editor);
-
-    return (
-      <UIToolbarButton
-        title={isElement ? messages.edit : messages.add}
-        icon={isElement ? unlinkSVG : linkSVG}
-        active={isElement}
-        onMouseDown={(e) => {
-          e.stopPropagation();
-          e.preventDefault();
-          const pid = `${editor.uid}-${PLUGINID}`;
-          editor.savedSelection = JSON.parse(JSON.stringify(editor.selection));
-          dispatch(setPluginOptions(pid, { show_sidebar_editor: true }));
-        }}
-      />
-    );
-  };
-
-  const pluginOptions = {
-    insertElement,
-    getActiveElement,
-    isActiveElement,
-    unwrapElement,
-  };
-
-  slate.buttons[PLUGINID] = ToolbarButton;
-  slate.toolbarButtons[linkBtnIndex] = PLUGINID;
-  slate.htmlTagsToSlate.A = simpleLinkDeserializer;
-  slate.extensions.push(withSimpleLink);
-  slate.elements[PLUGINID] = LinkElement;
-  slate.nodeTypesToHighlight.push(PLUGINID);
-  slate.persistentHelpers.push((props) => (
-    <LinkEditor {...props} pluginId={PLUGINID} {...pluginOptions} />
-  ));
-
-  return config;
-};
-
-export default applyConfig;

package/packages/volto-slate/src/editor/plugins/Link/render.jsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { UniversalLink } from '@plone/volto/components';
-import config from '@plone/volto/registry';
-import { isInternalURL, flattenToAppURL } from '@plone/volto/helpers';
-
-const ViewLink = ({ url, target, download, children }) => {
-  const { openExternalLinkInNewTab } = config.settings;
-  return (
-    <UniversalLink
-      href={url}
-      openLinkInNewTab={
-        (openExternalLinkInNewTab && !isInternalURL(url)) || target === '_blank'
-      }
-      download={download}
-    >
-      {children}
-    </UniversalLink>
-  );
-};
-
-export const LinkElement = (props) => {
-  const { attributes, children, element, mode = 'edit' } = props;
-  const isInternalUrl = isInternalURL(element.data?.url);
-  const linkUrl = element.data?.url;
-
-  return mode === 'view' ? (
-    <ViewLink {...(element.data || {})}>{children}</ViewLink>
-  ) : (
-    <a
-      {...attributes}
-      className={cx('slate-editor-link', { external: !isInternalUrl })}
-      href={isInternalUrl ? flattenToAppURL(linkUrl) : linkUrl}
-      onClick={(e) => e.preventDefault()}
-    >
-      {Array.isArray(children)
-        ? children.map((child, i) => {
-            if (child?.props?.decorations) {
-              const isSelection =
-                child.props.decorations.findIndex((deco) => deco.isSelection) >
-                -1;
-              if (isSelection)
-                return (
-                  <span className="highlight-selection" key={`${i}-sel`}>
-                    {child}
-                  </span>
-                );
-            }
-            return child;
-          })
-        : children}
-    </a>
-  );
-};