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

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

@@ -1,224 +0,0 @@
-import React from 'react';
-import { renderToStaticMarkup } from 'react-dom/server';
-import { useLocation } from 'react-router-dom';
-import { toast } from 'react-toastify';
-import { useIntl } from 'react-intl';
-import { useSelector } from 'react-redux';
-import { Node, Text } from 'slate';
-import cx from 'classnames';
-import { isEmpty, omit } from 'lodash';
-import { UniversalLink, Toast } from '@plone/volto/components';
-import { messages, addAppURL } from '@plone/volto/helpers';
-import useClipboard from '@plone/volto/hooks/clipboard/useClipboard';
-import config from '@plone/volto/registry';
-import linkSVG from '@plone/volto/icons/link.svg';
-
-import './less/slate.less';
-
-const OMITTED = ['editor', 'path'];
-
-// TODO: read, see if relevant
-// https://reactjs.org/docs/higher-order-components.html#dont-use-hocs-inside-the-render-method
-export const Element = ({ element, attributes = {}, extras, ...rest }) => {
-  const { slate } = config.settings;
-  const { elements } = slate;
-  const El = elements[element.type] || elements['default'];
-
-  const attrs = Object.assign(
-    element.styleName ? { className: element.styleName } : {},
-    ...Object.keys(attributes || {}).map((k) =>
-      !isEmpty(attributes[k]) ? { [k]: attributes[k] } : {},
-    ),
-  );
-  attrs.ref = attributes?.ref; // never remove the ref
-
-  return (
-    <El
-      element={element}
-      {...omit(rest, OMITTED)}
-      attributes={attrs}
-      extras={extras}
-    />
-  );
-};
-
-export const Leaf = ({ children, ...rest }) => {
-  const { attributes, leaf, mode } = rest;
-  let { leafs } = config.settings.slate;
-
-  children = Object.keys(leafs).reduce((acc, name) => {
-    return Object.keys(leaf).includes(name)
-      ? leafs[name]({ children: acc })
-      : acc;
-  }, children);
-
-  const classNames = {
-    [`highlight-${leaf.highlightType}`]: mode !== 'view' && leaf.highlightType,
-    'highlight-selection': mode !== 'view' && leaf.isSelection,
-  };
-
-  // stylemenu support
-  for (const prop in leaf) {
-    if (prop.startsWith('style-')) {
-      classNames[prop.substring(6)] = true;
-    }
-  }
-
-  const klass = cx(classNames);
-
-  return mode === 'view' ? (
-    typeof children === 'string' ? (
-      children.split('\n').map((t, i) => {
-        // Softbreak support. Should do a plugin?
-        return (
-          <React.Fragment key={`${i}`}>
-            {children.indexOf('\n') > -1 &&
-            children.split('\n').length - 1 > i ? (
-              <>
-                {klass ? <span className={klass}>{t}</span> : t}
-                <br />
-              </>
-            ) : klass ? (
-              <span className={klass}>{t}</span>
-            ) : (
-              t
-            )}
-          </React.Fragment>
-        );
-      })
-    ) : (
-      <span className={klass}>{children}</span>
-    )
-  ) : (
-    <span {...attributes} className={klass}>
-      {children}
-    </span>
-  );
-};
-
-const serializeData = (node) => {
-  return JSON.stringify({ type: node.type, data: node.data });
-};
-
-export const serializeNodes = (nodes, getAttributes, extras = {}) => {
-  const editor = { children: nodes || [] };
-
-  const _serializeNodes = (nodes) => {
-    return (nodes || []).map(([node, path], i) => {
-      return Text.isText(node) ? (
-        <Leaf path={path} leaf={node} text={node} mode="view" key={path}>
-          {node.text}
-        </Leaf>
-      ) : (
-        <Element
-          path={path}
-          element={node}
-          mode="view"
-          key={path}
-          data-slate-data={node.data ? serializeData(node) : null}
-          attributes={getAttributes ? getAttributes(node, path) : null}
-          extras={extras}
-        >
-          {_serializeNodes(Array.from(Node.children(editor, path)))}
-        </Element>
-      );
-    });
-  };
-
-  return _serializeNodes(Array.from(Node.children(editor, [])));
-};
-
-/**
- * Get the concatenated text string of a node's content.
- *
- * Note that this WILL include spaces between block node leafs in contrary to
- * the original slate method. This function joins text of nodes with
- * separating spaces to produce a string for indexing purposes.
- *
- */
-const ConcatenatedString = (node) => {
-  if (Text.isText(node)) {
-    return node.text.trim();
-  } else {
-    return node.children.map(ConcatenatedString).join(' ');
-  }
-};
-
-/**
- * @function serializeNodesToText
- *
- * @param {Array[Node]} nodes
- *
- * @returns {string}
- */
-export const serializeNodesToText = (nodes) => {
-  return nodes.map(ConcatenatedString).join('\n');
-};
-
-export const serializeNodesToHtml = (nodes) =>
-  renderToStaticMarkup(serializeNodes(nodes));
-
-export const renderLinkElement = (tagName) => {
-  function LinkElement({
-    attributes,
-    children,
-    mode = 'edit',
-    className = null,
-  }) {
-    const { slate = {} } = config.settings;
-    const Tag = tagName;
-    const slug = attributes.id || '';
-    const location = useLocation();
-    const token = useSelector((state) => state.userSession.token);
-    const appPathname = addAppURL(location.pathname);
-    // eslint-disable-next-line no-unused-vars
-    const [copied, copy, setCopied] = useClipboard(
-      appPathname.concat(`#${slug}`),
-    );
-    const intl = useIntl();
-    return !token || slate.useLinkedHeadings === false ? (
-      <Tag {...attributes} className={className} tabIndex={0}>
-        {children}
-      </Tag>
-    ) : (
-      <Tag {...attributes} className={className} tabIndex={0}>
-        {children}
-        {mode === 'view' && slug && (
-          <UniversalLink
-            className="anchor"
-            aria-hidden="true"
-            tabIndex={-1}
-            href={`#${slug}`}
-          >
-            <style>
-              {/* Prettify the unstyled flash of the link icon on development */}
-              {`
-              a.anchor svg {
-                height: var(--anchor-svg-height, 24px);
-              }
-              `}
-            </style>
-            <svg
-              {...linkSVG.attributes}
-              dangerouslySetInnerHTML={{ __html: linkSVG.content }}
-              height={null}
-              onClick={() => {
-                copy();
-
-                toast.info(
-                  <Toast
-                    info
-                    title={intl.formatMessage(messages.success)}
-                    content={intl.formatMessage(messages.urlClipboardCopy)}
-                  />,
-                );
-              }}
-            ></svg>
-          </UniversalLink>
-        )}
-      </Tag>
-    );
-  }
-  LinkElement.displayName = `${tagName}LinkElement`;
-  return LinkElement;
-};

package/packages/volto-slate/src/editor/ui/BasicToolbar.jsx

@@ -1,11 +0,0 @@
-import cx from 'classnames';
-import React from 'react';
-import Menu from './Menu';
-
-const BasicToolbar = React.forwardRef(({ className, ...props }, ref) => {
-  return (
-    <Menu {...props} ref={ref} className={cx(className, 'slate-toolbar')} />
-  );
-});
-
-export default BasicToolbar;

package/packages/volto-slate/src/editor/ui/BlockButton.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { isBlockActive, toggleBlock } from '@plone/volto-slate/utils';
-
-import ToolbarButton from './ToolbarButton';
-
-const BlockButton = ({ format, icon, allowedChildren, ...props }) => {
-  const editor = useSlate();
-
-  const isActive = isBlockActive(editor, format);
-
-  const handleMouseDown = React.useCallback(
-    (event) => {
-      event.preventDefault();
-      toggleBlock(editor, format, allowedChildren);
-      // console.log('toggled', format, editor);
-    },
-    [editor, format, allowedChildren], // , isActive
-  );
-
-  return (
-    <ToolbarButton
-      {...props}
-      active={isActive}
-      onMouseDown={handleMouseDown}
-      icon={icon}
-    />
-  );
-};
-
-export default BlockButton;

package/packages/volto-slate/src/editor/ui/ClearFormattingButton.jsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { clearFormatting } from '@plone/volto-slate/utils';
-
-import ToolbarButton from './ToolbarButton';
-
-const ClearFormattingButton = ({ icon, ...props }) => {
-  const editor = useSlate();
-
-  const handleMouseDown = React.useCallback(
-    (event) => {
-      event.preventDefault();
-      clearFormatting(editor);
-    },
-    [editor],
-  );
-
-  return <ToolbarButton {...props} onMouseDown={handleMouseDown} icon={icon} />;
-};
-
-export default ClearFormattingButton;

package/packages/volto-slate/src/editor/ui/ExpandedToolbar.jsx

@@ -1,18 +0,0 @@
-import React from 'react';
-
-import BasicToolbar from './BasicToolbar';
-import Expando from './Expando';
-
-const ExpandedToolbar = React.forwardRef(
-  ({ className, toggleButton, children, ...props }, ref) => {
-    return (
-      <BasicToolbar {...props} className={className} ref={ref}>
-        {children}
-        <Expando />
-        {toggleButton}
-      </BasicToolbar>
-    );
-  },
-);
-
-export default ExpandedToolbar;

package/packages/volto-slate/src/editor/ui/Expando.jsx

@@ -1,5 +0,0 @@
-import React from 'react';
-
-const Expando = (props) => <div className="expando"> </div>;
-
-export default Expando;

package/packages/volto-slate/src/editor/ui/InlineToolbar.jsx

@@ -1,73 +0,0 @@
-import React from 'react'; // , useState
-import SlateToolbar from './SlateToolbar';
-import SlateContextToolbar from './SlateContextToolbar';
-import config from '@plone/volto/registry';
-import { hasRangeSelection } from '@plone/volto-slate/utils';
-import { ReactEditor } from 'slate-react';
-import cx from 'classnames';
-
-/**
- * The main Slate toolbar. All the others are just wrappers, UI or used here
- */
-const InlineToolbar = (props) => {
-  const {
-    editor,
-    className,
-    showExpandedToolbar,
-    setShowExpandedToolbar,
-  } = props;
-
-  const slate = props.slateSettings || config.settings.slate;
-
-  const [showMainToolbar, setShowMainToolbar] = React.useState(
-    !!(editor.selection && hasRangeSelection(editor)),
-  );
-
-  React.useEffect(() => {
-    let el;
-    try {
-      el = ReactEditor.toDOMNode(editor, editor);
-    } catch {
-      return;
-    }
-    const toggleToolbar = () => {
-      const selection = window.getSelection();
-      const { activeElement } = window.document;
-      if (activeElement !== el) return;
-      if (!selection.isCollapsed && !showMainToolbar) {
-        setShowMainToolbar(true);
-      } else if (selection.isCollapsed && showMainToolbar) {
-        setShowMainToolbar(false);
-      }
-    };
-    window.document.addEventListener('selectionchange', toggleToolbar);
-    return () => document.removeEventListener('selectionchange', toggleToolbar);
-  }, [editor, showMainToolbar]);
-
-  const showContextToolbar =
-    slate.contextToolbarButtons.map((plug) => plug(editor)).filter((c) => !!c)
-      .length > 0;
-
-  return (
-    <>
-      <SlateToolbar
-        className={cx(className, {
-          upper: showContextToolbar,
-        })}
-        selected={true}
-        enableExpando={slate.enableExpandedToolbar}
-        showExpandedToolbar={showExpandedToolbar}
-        setShowExpandedToolbar={setShowExpandedToolbar}
-        show={showMainToolbar}
-        slateSettings={slate}
-      />
-      <SlateContextToolbar
-        editor={editor}
-        plugins={slate.contextToolbarButtons}
-        show={showContextToolbar}
-      />
-    </>
-  );
-};
-
-export default InlineToolbar;

package/packages/volto-slate/src/editor/ui/MarkButton.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-
-import { isMarkActive, toggleMark } from '@plone/volto-slate/utils';
-import ToolbarButton from './ToolbarButton';
-
-const MarkButton = ({ format, icon, ...props }) => {
-  const editor = useSlate();
-
-  return (
-    <ToolbarButton
-      {...props}
-      active={isMarkActive(editor, format)}
-      onMouseDown={(event) => {
-        event.preventDefault();
-        toggleMark(editor, format);
-      }}
-      icon={icon}
-    />
-  );
-};
-
-export default MarkButton;

package/packages/volto-slate/src/editor/ui/MarkElementButton.jsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { isBlockActive, toggleInlineFormat } from '@plone/volto-slate/utils';
-
-import ToolbarButton from './ToolbarButton';
-
-const MarkElementButton = ({ format, icon, ...props }) => {
-  const editor = useSlate();
-
-  const isActive = isBlockActive(editor, format);
-
-  const handleMouseDown = React.useCallback(
-    (event) => {
-      event.preventDefault();
-      toggleInlineFormat(editor, format);
-    },
-    [editor, format], // , isActive
-  );
-
-  return (
-    <ToolbarButton
-      {...props}
-      active={isActive}
-      onMouseDown={handleMouseDown}
-      icon={icon}
-    />
-  );
-};
-
-export default MarkElementButton;

package/packages/volto-slate/src/editor/ui/Menu.jsx

@@ -1,13 +0,0 @@
-import cx from 'classnames';
-import React from 'react';
-import { Button } from 'semantic-ui-react';
-
-const Menu = React.forwardRef(({ className, ...props }, ref) => {
-  return (
-    <div className={cx(className, 'slate-menu')} ref={ref}>
-      <Button.Group {...props} />
-    </div>
-  );
-});
-
-export default Menu;

package/packages/volto-slate/src/editor/ui/PositionedToolbar.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { Portal } from 'react-portal';
-
-import BasicToolbar from './BasicToolbar';
-
-const PositionedToolbar = ({ toggleButton, className, children, position }) => {
-  // TODO: "position" is actually an object like `{ style: {} }`
-  // To be renamed as "attributes" or "attrs"
-  const ref = React.useRef();
-
-  React.useEffect(() => {
-    const el = ref.current;
-
-    const { style } = position || {};
-    const left = `${Math.max(style.left - el.offsetWidth / 2, 0)}px`;
-    const top = `${style.top - el.offsetHeight}px`;
-
-    el.style.opacity = style.opacity;
-    el.style.top = top;
-    el.style.left = left;
-  });
-
-  return (
-    <Portal>
-      <BasicToolbar className={`slate-inline-toolbar ${className}`} ref={ref}>
-        {children}
-      </BasicToolbar>
-    </Portal>
-  );
-};
-
-export default PositionedToolbar;

package/packages/volto-slate/src/editor/ui/Separator.jsx

@@ -1,7 +0,0 @@
-import React from 'react';
-
-const Separator = () => {
-  return <div className="toolbar-separator" />;
-};
-
-export default Separator;

package/packages/volto-slate/src/editor/ui/SlateContextToolbar.jsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import Toolbar from './Toolbar';
-
-// A toolbar that conditionally renders itself based on the presense of
-// children
-export default function SlateContextToolbar({ editor, plugins, show }) {
-  if (!show) {
-    return null;
-  }
-
-  const components = plugins.map((plug) => plug(editor)).filter((c) => !!c);
-  return components.length ? <Toolbar>{components}</Toolbar> : '';
-}

package/packages/volto-slate/src/editor/ui/SlateToolbar.jsx

@@ -1,96 +0,0 @@
-/**
- * This is the main toolbar, which:
- *
- * - appears only when a range selection exists
- * - can be toggled between expanded and hovering state
- *
- */
-
-import React from 'react';
-import cx from 'classnames';
-
-import toggleIcon from '@plone/volto/icons/more.svg';
-
-import Toolbar from './Toolbar';
-import ExpandedToolbar from './ExpandedToolbar';
-import ToolbarButton from './ToolbarButton';
-
-import config from '@plone/volto/registry';
-
-const SlateToolbar = (props) => {
-  const {
-    selected,
-    showExpandedToolbar,
-    setShowExpandedToolbar,
-    className,
-    enableExpando = false,
-    show,
-  } = props;
-
-  const slate = props.slateSettings || config.settings.slate;
-
-  const { toolbarButtons, expandedToolbarButtons, buttons } = slate;
-
-  function renderButton(name, index) {
-    const Btn = buttons[name];
-    if (!Btn) {
-      // eslint-disable-next-line
-      console.warn('Button not found:', name);
-      return null;
-    }
-    // using also name because some buttons can be like "Separator"
-    return <Btn key={`${name}-${index}`} />;
-  }
-
-  return (
-    <>
-      {!showExpandedToolbar && (
-        <Toolbar
-          show={show}
-          toggleButton={
-            enableExpando && (
-              <ToolbarButton
-                title="More..."
-                onMouseDown={(event) => {
-                  setShowExpandedToolbar(!showExpandedToolbar);
-                  event.preventDefault();
-                }}
-                icon={toggleIcon}
-                active={showExpandedToolbar}
-              />
-            )
-          }
-          className={className}
-        >
-          {toolbarButtons?.map(renderButton)}
-        </Toolbar>
-      )}
-      <div
-        className={cx('toolbar-wrapper', {
-          active: showExpandedToolbar && selected,
-        })}
-      >
-        {selected && showExpandedToolbar && (
-          <ExpandedToolbar
-            show={show}
-            toggleButton={
-              <ToolbarButton
-                title="Less..."
-                onMouseDown={(event) => {
-                  setShowExpandedToolbar(!showExpandedToolbar);
-                  event.preventDefault();
-                }}
-                icon={toggleIcon}
-                active={showExpandedToolbar}
-              />
-            }
-          >
-            {expandedToolbarButtons?.map(renderButton)}
-          </ExpandedToolbar>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default SlateToolbar;