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

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

@@ -1,103 +0,0 @@
-import cx from 'classnames';
-import React, { useRef, useEffect } from 'react';
-import { Portal } from 'react-portal';
-import { useSlate } from 'slate-react';
-import Separator from './Separator';
-import BasicToolbar from './BasicToolbar';
-import { Editor, Node } from 'slate';
-import { ReactEditor } from 'slate-react';
-
-const Toolbar = ({
-  elementType,
-  enableExpando = false,
-  toggleButton,
-  className,
-  children,
-  show = true,
-}) => {
-  const ref = useRef();
-  const editor = useSlate();
-
-  useEffect(() => {
-    const domNode = ref.current;
-    let rect = { width: 1, top: 0, left: 0 };
-
-    if ((children || []).length === 0) {
-      domNode.removeAttribute('style');
-      return;
-    }
-
-    if (!show) {
-      domNode.removeAttribute('style');
-      return;
-    }
-
-    const { selection } = editor;
-    // const savedSelection = editor.getSavedSelection();
-    if (!selection) {
-      domNode.removeAttribute('style');
-      return;
-    }
-
-    if (editor.isSidebarOpen) {
-      domNode.removeAttribute('style');
-      return;
-    }
-
-    if (elementType) {
-      const [element] = Editor.nodes(editor, {
-        at: editor.selection || editor.getSavedSelection(),
-        match: (n) => n.type === elementType,
-      });
-
-      if (!element) {
-        domNode.removeAttribute('style');
-        return;
-      }
-
-      const [node] = element;
-      const domEl = ReactEditor.toDOMNode(editor, node);
-
-      rect = domEl.getBoundingClientRect();
-    } else {
-      // TODO: should we fallback to editor.getSelection()?
-      // TODO: test with third party plugins
-      const slateNode = Node.get(editor, selection.anchor.path);
-      try {
-        const domEl = ReactEditor.toDOMNode(editor, slateNode);
-        rect = domEl.getBoundingClientRect();
-      } catch {
-        // ignoring error here is safe, editor is out of sync and the selection
-        // is actually none, so no toolbar should be shown
-      }
-    }
-
-    domNode.style.opacity = 1;
-    domNode.style.top = `${
-      rect.top + window.pageYOffset - domNode.offsetHeight - 6
-    }px`;
-    domNode.style.left = `${Math.max(
-      rect.left + window.pageXOffset - domNode.offsetWidth / 2 + rect.width / 2,
-      0, // if the left edge of the toolbar should be otherwise offscreen
-    )}px`;
-  });
-
-  return (
-    <Portal>
-      <BasicToolbar
-        className={cx('slate-inline-toolbar', { [className]: className })}
-        ref={ref}
-      >
-        {children}
-        {enableExpando && toggleButton && (
-          <>
-            <Separator />
-            {toggleButton}
-          </>
-        )}
-      </BasicToolbar>
-    </Portal>
-  );
-};
-
-export default Toolbar;

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

@@ -1,33 +0,0 @@
-import cx from 'classnames';
-import React from 'react';
-import { Icon } from '@plone/volto/components';
-import { Button } from 'semantic-ui-react';
-import { useIntl } from 'react-intl';
-
-const ToolbarButton = React.forwardRef(
-  ({ className, active, reversed, icon, style, title = '', ...props }, ref) => {
-    const intl = useIntl();
-    const i18ntitle =
-      typeof title !== 'string' ? intl.formatMessage(title) : title;
-    return (
-      <div className="button-wrapper">
-        <Button
-          as="a"
-          {...props}
-          title={i18ntitle}
-          ref={ref}
-          style={style}
-          className={cx(className)}
-          active={active}
-          inverted={reversed}
-          compact
-          toggle
-          size="tiny"
-          icon={icon && <Icon name={icon} size="24px" />}
-        ></Button>
-      </div>
-    );
-  },
-);
-
-export default ToolbarButton;

package/packages/volto-slate/src/editor/ui/ToolbarButton.test.js

@@ -1,25 +0,0 @@
-import React from 'react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-import { waitFor, render } from '@testing-library/react';
-
-import ToolbarButton from './ToolbarButton';
-
-const mockStore = configureStore();
-
-describe('ToolbarButton', () => {
-  it('renders a toolbar button', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-    const { asFragment } = render(
-      <Provider store={store}>
-        <ToolbarButton />
-      </Provider>,
-    );
-    await waitFor(() => expect(asFragment()).toMatchSnapshot());
-  });
-});

package/packages/volto-slate/src/editor/ui/index.js

@@ -1,15 +0,0 @@
-export { default as BasicToolbar } from './BasicToolbar';
-export { default as BlockButton } from './BlockButton';
-export { default as ClearFormattingButton } from './ClearFormattingButton';
-export { default as ExpandedToolbar } from './ExpandedToolbar';
-export { default as Expando } from './Expando';
-export { default as MarkButton } from './MarkButton';
-export { default as Menu } from './Menu';
-export { default as Separator } from './Separator';
-export { default as SlateContextToolbar } from './SlateContextToolbar';
-export { default as SlateToolbar } from './SlateToolbar';
-export { default as Toolbar } from './Toolbar';
-export { default as ToolbarButton } from './ToolbarButton';
-export { default as MarkElementButton } from './MarkElementButton';
-export { default as PositionedToolbar } from './PositionedToolbar';
-export { default as InlineToolbar } from './InlineToolbar';

package/packages/volto-slate/src/editor/utils.js

@@ -1,248 +0,0 @@
-import { INLINE_ELEMENTS, TEXT_NODE } from '../constants';
-
-// Original at https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
-/**
- * Throughout, whitespace is defined as one of the characters
- *  "\t" TAB \u0009
- *  "\n" LF  \u000A
- *  "\r" CR  \u000D
- *  " "  SPC \u0020
- *
- * This does not use JavaScript's "\s" because that includes non-breaking
- * spaces (and also some other characters).
- */
-
-/**
- * Determine whether a node's text content is entirely whitespace.
- *
- * @param nod  A node implementing the |CharacterData| interface (i.e.,
- *             a |Text|, |Comment|, or |CDATASection| node
- * @return     True if all of the text content of |nod| is whitespace,
- *             otherwise false.
- */
-export function is_all_ws(text) {
-  return !/[^\t\n\r ]/.test(text);
-}
-
-/**
- * Version of |data| that doesn't include whitespace at the beginning
- * and end and normalizes all whitespace to a single space. (Normally
- * |data| is a property of text nodes that gives the text of the node.)
- *
- * @param txt  The text node whose data should be returned
- * @return     A string giving the contents of the text node with
- *             whitespace collapsed.
- */
-export function data_of(txt) {
-  let data = txt.textContent;
-  data = data.replace(/[\t\n\r ]+/g, ' ');
-  if (data[0] === ' ') {
-    data = data.substring(1, data.length);
-  }
-  if (data[data.length - 1] === ' ') {
-    data = data.substring(0, data.length - 1);
-  }
-  return data;
-}
-
-/**
- * Determine if a node should be ignored by the iterator functions.
- *
- * @param nod  An object implementing the DOM1 |Node| interface.
- * @return     true if the node is:
- *                1) A |Text| node that is all whitespace
- *                2) A |Comment| node
- *             and otherwise false.
- */
-
-export function is_ignorable(nod) {
-  return (
-    nod.nodeType === 8 || // A comment node
-    (nod.nodeType === 3 && is_all_ws(nod.textContent))
-  ); // a text node, all ws
-}
-
-/**
- * Version of |previousSibling| that skips nodes that are entirely
- * whitespace or comments. (Normally |previousSibling| is a property
- * of all DOM nodes that gives the sibling node, the node that is
- * a child of the same parent, that occurs immediately before the
- * reference node.)
- *
- * @param sib  The reference node.
- * @return     Either:
- *               1) The closest previous sibling to |sib| that is not
- *                  ignorable according to |is_ignorable|, or
- *               2) null if no such node exists.
- */
-export function node_before(sib) {
-  while ((sib = sib.previousSibling)) {
-    if (!is_ignorable(sib)) {
-      return sib;
-    }
-  }
-  return null;
-}
-
-/**
- * Version of |nextSibling| that skips nodes that are entirely
- * whitespace or comments.
- *
- * @param sib  The reference node.
- * @return     Either:
- *               1) The closest next sibling to |sib| that is not
- *                  ignorable according to |is_ignorable|, or
- *               2) null if no such node exists.
- */
-export function node_after(sib) {
-  while ((sib = sib.nextSibling)) {
-    if (!is_ignorable(sib)) {
-      return sib;
-    }
-  }
-  return null;
-}
-
-/**
- * Version of |lastChild| that skips nodes that are entirely
- * whitespace or comments. (Normally |lastChild| is a property
- * of all DOM nodes that gives the last of the nodes contained
- * directly in the reference node.)
- *
- * @param sib  The reference node.
- * @return     Either:
- *               1) The last child of |sib| that is not
- *                  ignorable according to |is_ignorable|, or
- *               2) null if no such node exists.
- */
-export function last_child(par) {
-  let res = par.lastChild;
-  while (res) {
-    if (!is_ignorable(res)) {
-      return res;
-    }
-    res = res.previousSibling;
-  }
-  return null;
-}
-
-/**
- * Version of |firstChild| that skips nodes that are entirely
- * whitespace and comments.
- *
- * @param sib  The reference node.
- * @return     Either:
- *               1) The first child of |sib| that is not
- *                  ignorable according to |is_ignorable|, or
- *               2) null if no such node exists.
- */
-export function first_child(par) {
-  let res = par.firstChild;
-  while (res) {
-    if (!is_ignorable(res)) {
-      return res;
-    }
-    res = res.nextSibling;
-  }
-  return null;
-}
-
-export const removeSpaceBeforeAfterEndLine = (text) => {
-  text = text.replace(/\s+\n/gm, '\n'); // space before endline
-  text = text.replace(/\n\s+/gm, '\n'); // space after endline
-  return text;
-};
-
-export const convertTabsToSpaces = (text) => text.replace(/\t/gm, ' ');
-export const convertLineBreaksToSpaces = (text) => text.replace(/\n/gm, ' ');
-
-export const isInline = (node) =>
-  node &&
-  (node.nodeType === TEXT_NODE || INLINE_ELEMENTS.includes(node.nodeName));
-
-export const removeSpaceFollowSpace = (text, node) => {
-  // Any space immediately following another space (even across two separate
-  // inline elements) is ignored (rule 4)
-  text = text.replace(/ ( +)/gm, ' ');
-  if (!text.startsWith(' ')) return text;
-
-  if (node.previousSibling) {
-    if (node.previousSibling.nodeType === TEXT_NODE) {
-      if (node.previousSibling.textContent.endsWith(' ')) {
-        return text.replace(/^ /, '');
-      }
-    } else if (isInline(node.previousSibling)) {
-      const prevText = collapseInlineSpace(node.previousSibling);
-      if (prevText.endsWith(' ')) {
-        return text.replace(/^ /, '');
-      }
-    }
-  } else {
-    const parent = node.parentNode;
-    if (parent.previousSibling) {
-      //  && isInline(parent.previousSibling)
-      const prevText = collapseInlineSpace(parent.previousSibling);
-      if (prevText && prevText.endsWith(' ')) {
-        return text.replace(/^ /, '');
-      }
-    }
-  }
-
-  return text;
-};
-
-export const removeElementEdges = (text, node) => {
-  if (
-    !isInline(node.parentNode) &&
-    !node.previousSibling &&
-    text.match(/^\s/)
-  ) {
-    text = text.replace(/^\s+/, '');
-  }
-
-  if (text.match(/\s$/) && !node.nextSibling && !isInline(node.parentNode)) {
-    text = text.replace(/\s$/, '');
-  }
-
-  return text;
-};
-
-export const collapseInlineSpace = (node) => {
-  let text = node.textContent;
-
-  // See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
-
-  // 1. all spaces and tabs immediately before and after a line break are ignored
-
-  text = removeSpaceBeforeAfterEndLine(text);
-
-  // 2. Next, all tab characters are handled as space characters
-  text = convertTabsToSpaces(text);
-
-  // 3. Convert all line breaks to spaces
-  text = convertLineBreaksToSpaces(text);
-
-  // 4. Any space immediately following another space
-  // (even across two separate inline elements) is ignored
-  text = removeSpaceFollowSpace(text, node);
-
-  // 5. Sequences of spaces at the beginning and end of an element are removed
-  text = removeElementEdges(text, node);
-
-  // (volto) Return null if the element is not adjacent to an inline node
-  // This will cause the element to be ignored in the deserialization
-  // TODO: use the node traverse functions defined here
-  if (
-    is_all_ws(text) &&
-    !(
-      isInline(node.previousSibling) ||
-      isInline(node.nextSibling) ||
-      isInline(node.parentNode.nextSibling) ||
-      isInline(node.parentNode.previousSibling)
-    )
-  ) {
-    return null;
-  }
-
-  return text;
-};

package/packages/volto-slate/src/elementEditor/ContextButtons.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { useIntl } from 'react-intl'; // , defineMessages
-
-import clearSVG from '@plone/volto/icons/delete.svg';
-
-import { ToolbarButton } from '@plone/volto-slate/editor/ui';
-import { setPluginOptions } from '@plone/volto-slate/actions';
-
-/*
- * Note: this is a weirder component, it should be called as a native function
- */
-export default (options) => (editor) => {
-  const {
-    isActiveElement,
-    unwrapElement,
-    pluginId,
-    messages,
-    toolbarButtonIcon,
-  } = options;
-  const intl = useIntl();
-  const dispatch = useDispatch();
-  const pid = `${editor.uid}-${pluginId}`;
-  const showEditor = useSelector(
-    (state) => state['slate_plugins']?.[pid]?.show_sidebar_editor,
-  );
-
-  return isActiveElement(editor) ? (
-    <React.Fragment key={pluginId}>
-      <ToolbarButton
-        title={intl.formatMessage(messages.edit)}
-        icon={toolbarButtonIcon}
-        active={showEditor}
-        aria-label={intl.formatMessage(messages.edit)}
-        onMouseDown={() => {
-          dispatch(
-            setPluginOptions(pid, {
-              show_sidebar_editor: true,
-            }),
-          );
-        }}
-      />
-      <ToolbarButton
-        title={intl.formatMessage(messages.delete)}
-        icon={clearSVG}
-        aria-label={intl.formatMessage(messages.delete)}
-        alt={intl.formatMessage(messages.delete)}
-        onMouseDown={() => {
-          unwrapElement(editor);
-        }}
-      />
-    </React.Fragment>
-  ) : (
-    ''
-  );
-};

package/packages/volto-slate/src/elementEditor/PluginEditor.jsx

@@ -1,124 +0,0 @@
-/* eslint no-console: ["error", { allow: ["error"] }] */
-import { isEqual } from 'lodash';
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import { ReactEditor } from 'slate-react';
-import { Icon as VoltoIcon, BlockDataForm } from '@plone/volto/components';
-import { setPluginOptions } from '@plone/volto-slate/actions';
-import BaseSchemaProvider from './SchemaProvider';
-
-import briefcaseSVG from '@plone/volto/icons/briefcase.svg';
-import checkSVG from '@plone/volto/icons/check.svg';
-import clearSVG from '@plone/volto/icons/clear.svg';
-
-const PluginEditor = (props) => {
-  const {
-    editor,
-    schemaProvider,
-    pluginId,
-    getActiveElement,
-    isActiveElement,
-    insertElement,
-    unwrapElement,
-    hasValue,
-    onChangeValues,
-  } = props;
-
-  const dispatch = useDispatch();
-  const [formData, setFormData] = React.useState({});
-
-  const active = getActiveElement(editor);
-
-  if (!active) {
-    console.error('Active element not found, this will crash');
-  }
-  const [elementNode] = active;
-  const isElement = isActiveElement(editor);
-
-  // Update the form data based on the current element
-  const elRef = React.useRef(null);
-
-  if (isElement && !isEqual(elementNode, elRef.current)) {
-    elRef.current = elementNode;
-    setFormData(elementNode.data || {});
-  } else if (!isElement) {
-    elRef.current = null;
-  }
-
-  const saveDataToEditor = React.useCallback(
-    (formData) => {
-      if (hasValue(formData)) {
-        // hasValue(formData) = !!formData.footnote
-        insertElement(editor, formData);
-      } else {
-        unwrapElement(editor);
-      }
-    },
-    [editor, insertElement, unwrapElement, hasValue],
-  );
-
-  const checkForCancel = () => {
-    if (!hasValue(elementNode.data)) {
-      unwrapElement(editor);
-    }
-  };
-
-  const SchemaProvider = schemaProvider ? schemaProvider : BaseSchemaProvider;
-
-  const pid = `${editor.uid}-${pluginId}`;
-  return (
-    <SchemaProvider {...props} data={formData}>
-      {(schema) => (
-        <BlockDataForm
-          schema={schema}
-          title={schema.title}
-          icon={<VoltoIcon size="24px" name={briefcaseSVG} />}
-          onChangeField={(id, value) => {
-            if (!onChangeValues) {
-              return setFormData({
-                ...formData,
-                [id]: value,
-              });
-            }
-            return onChangeValues(id, value, formData, setFormData);
-          }}
-          onChangeFormData={setFormData}
-          formData={formData}
-          headerActions={
-            <>
-              <button
-                onClick={() => {
-                  saveDataToEditor(formData);
-                  dispatch(
-                    setPluginOptions(pid, {
-                      show_sidebar_editor: false,
-                    }),
-                  );
-                  ReactEditor.focus(editor);
-                }}
-              >
-                <VoltoIcon size="24px" name={checkSVG} />
-              </button>
-              <button
-                onClick={() => {
-                  checkForCancel();
-                  dispatch(
-                    setPluginOptions(pid, {
-                      show_sidebar_editor: false,
-                    }),
-                  );
-                  setFormData({});
-                  ReactEditor.focus(editor);
-                }}
-              >
-                <VoltoIcon size="24px" name={clearSVG} />
-              </button>
-            </>
-          }
-        />
-      )}
-    </SchemaProvider>
-  );
-};
-
-export default PluginEditor;

package/packages/volto-slate/src/elementEditor/Readme.md

@@ -1,6 +0,0 @@
-A generic plugin that can be used to create other editor interactions that
-follow the following pattern:
-
-- the plugin needs a button that toggles a format (an inline element)
-- the plugin needs a separate edit form for advanced customization of the data
-  attached to the element

package/packages/volto-slate/src/elementEditor/SchemaProvider.jsx

@@ -1,3 +0,0 @@
-export default ({ editSchema, children }) => {
-  return children(editSchema);
-};

package/packages/volto-slate/src/elementEditor/SidebarEditor.jsx

@@ -1,46 +0,0 @@
-/**
- * A small wrapper around PluginEditor. Its purpose it to allow for clearer
- * code, otherwise it would mix too many hooks and it's not possible to render
- * a variable number of hooks in a component
- */
-import React from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { SidebarPopup } from '@plone/volto/components';
-import { setPluginOptions } from '@plone/volto-slate/actions';
-
-const SidebarEditor = (props) => {
-  const { editor, pluginId, getActiveElement, pluginEditor } = props;
-  const pid = `${editor.uid}-${pluginId}`;
-  const PluginEditor = pluginEditor;
-  const showEditor = useSelector((state) => {
-    return state['slate_plugins']?.[pid]?.show_sidebar_editor;
-  });
-
-  const dispatch = useDispatch();
-
-  let active;
-  try {
-    active = getActiveElement(editor);
-  } catch (error) {
-    // eslint-disable-next-line
-    console.warn('Error in getting active element', error);
-  }
-
-  // Hide the editor when switching to another text element
-  React.useEffect(() => {
-    if (!active)
-      dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
-  }, [active, dispatch, pluginId, pid]);
-
-  editor.isSidebarOpen = showEditor && active;
-
-  return editor.isSidebarOpen ? (
-    <SidebarPopup open={true}>
-      <PluginEditor {...props} />
-    </SidebarPopup>
-  ) : (
-    ''
-  );
-};
-
-export default SidebarEditor;