@plone/volto-slate 18.0.0-alpha.4

package/src/editor/render.jsx

@@ -0,0 +1,224 @@
+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/src/editor/ui/BasicToolbar.jsx

@@ -0,0 +1,11 @@
+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/src/editor/ui/BlockButton.jsx

@@ -0,0 +1,31 @@
+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/src/editor/ui/ClearFormattingButton.jsx

@@ -0,0 +1,21 @@
+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/src/editor/ui/ExpandedToolbar.jsx

@@ -0,0 +1,18 @@
+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/src/editor/ui/Expando.jsx

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

package/src/editor/ui/InlineToolbar.jsx

@@ -0,0 +1,69 @@
+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/src/editor/ui/MarkButton.jsx

@@ -0,0 +1,23 @@
+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/src/editor/ui/MarkElementButton.jsx

@@ -0,0 +1,30 @@
+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/src/editor/ui/Menu.jsx

@@ -0,0 +1,13 @@
+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/src/editor/ui/PositionedToolbar.jsx

@@ -0,0 +1,32 @@
+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/src/editor/ui/Separator.jsx

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

package/src/editor/ui/SlateContextToolbar.jsx

@@ -0,0 +1,13 @@
+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/src/editor/ui/SlateToolbar.jsx

@@ -0,0 +1,96 @@
+/**
+ * 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;