@plone/volto-slate 18.0.0-alpha.4

package/src/editor/plugins/AdvancedLink/index.js

@@ -0,0 +1,50 @@
+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 function advancedLink(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/src/editor/plugins/AdvancedLink/render.jsx

@@ -0,0 +1,37 @@
+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/src/editor/plugins/AdvancedLink/schema.js

@@ -0,0 +1,114 @@
+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/src/editor/plugins/AdvancedLink/styles.less

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

package/src/editor/plugins/Blockquote/index.js

@@ -0,0 +1,30 @@
+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/src/editor/plugins/Callout/index.js

@@ -0,0 +1,34 @@
+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/src/editor/plugins/Image/deconstruct.js

@@ -0,0 +1,30 @@
+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/src/editor/plugins/Image/extensions.js

@@ -0,0 +1,51 @@
+// 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/src/editor/plugins/Image/index.js

@@ -0,0 +1,11 @@
+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/src/editor/plugins/Image/render.jsx

@@ -0,0 +1,22 @@
+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/src/editor/plugins/Link/extensions.js

@@ -0,0 +1,58 @@
+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/src/editor/plugins/Link/index.js

@@ -0,0 +1,159 @@
+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/src/editor/plugins/Link/render.jsx

@@ -0,0 +1,54 @@
+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>
+  );
+};