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

package/packages/volto-slate/src/editor/plugins/StyleMenu/StyleMenu.jsx

@@ -1,153 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { Dropdown } from 'semantic-ui-react';
-import { useIntl, defineMessages } from 'react-intl';
-import cx from 'classnames';
-import { omit } from 'lodash';
-import { isBlockStyleActive, isInlineStyleActive, toggleStyle } from './utils';
-import config from '@plone/volto/registry';
-import { ToolbarButton } from '@plone/volto-slate/editor/ui';
-import paintSVG from '@plone/volto/icons/paint.svg';
-
-const messages = defineMessages({
-  inlineStyle: {
-    id: 'Inline Style',
-    defaultMessage: 'Inline Style',
-  },
-  paragraphStyle: {
-    id: 'Paragraph Style',
-    defaultMessage: 'Paragraph Style',
-  },
-  additionalStyles: {
-    id: 'Additional Styles',
-    defaultMessage: 'Additional Styles',
-  },
-});
-
-const StyleMenuButton = ({ icon, active, ...props }) => (
-  <ToolbarButton {...props} icon={icon} active={active} />
-);
-
-const MenuOpts = ({ editor, toSelect, option, type }) => {
-  const isActive = toSelect.includes(option);
-  return (
-    <Dropdown.Item
-      as="span"
-      active={isActive}
-      className={cx(`${type}-${option.value}`, { active: isActive })}
-      {...omit(option, ['isBlock'])}
-      data-isblock={option.isBlock}
-      onClick={(event, selItem) => {
-        toggleStyle(editor, {
-          cssClass: selItem.value,
-          isBlock: selItem.isBlock,
-        });
-      }}
-    />
-  );
-};
-
-const StylingsButton = (props) => {
-  const editor = useSlate();
-  const intl = useIntl();
-
-  // Converting the settings to a format that is required by dropdowns.
-  const inlineOpts = [
-    ...config.settings.slate.styleMenu.inlineStyles.map((def) => {
-      return {
-        value: def.cssClass,
-        text: def.label,
-        icon: def.icon,
-        isBlock: false,
-      };
-    }),
-  ];
-  const blockOpts = [
-    ...config.settings.slate.styleMenu.blockStyles.map((def) => {
-      return {
-        value: def.cssClass,
-        text: def.label,
-        icon: def.icon,
-        isBlock: true,
-      };
-    }),
-  ];
-
-  // Calculating the initial selection.
-  const toSelect = [];
-  // block styles
-  for (const val of blockOpts) {
-    const ia = isBlockStyleActive(editor, val.value);
-    if (ia) {
-      toSelect.push(val);
-    }
-  }
-  // inline styles
-  for (const val of inlineOpts) {
-    const ia = isInlineStyleActive(editor, val.value);
-    if (ia) {
-      toSelect.push(val);
-    }
-  }
-
-  const menuItemProps = {
-    toSelect,
-    editor,
-  };
-  const showMenu = inlineOpts.length || blockOpts.length;
-  return showMenu ? (
-    <Dropdown
-      id="style-menu"
-      pointing="top left"
-      multiple
-      value={toSelect}
-      disabled={config.settings.slate.styleMenu.disabled ?? false}
-      additionLabel={intl.formatMessage(messages.additionalStyles)}
-      trigger={
-        <StyleMenuButton
-          title={intl.formatMessage(messages.additionalStyles)}
-          icon={paintSVG}
-          active={toSelect.length > 0}
-        />
-      }
-    >
-      <Dropdown.Menu>
-        {inlineOpts.length && (
-          <>
-            <Dropdown.Header
-              content={intl.formatMessage(messages.inlineStyle)}
-            />
-            {inlineOpts.map((option, index) => (
-              <MenuOpts
-                {...menuItemProps}
-                type="inline-style"
-                option={option}
-                key={index}
-              />
-            ))}
-          </>
-        )}
-
-        {blockOpts.length && (
-          <>
-            <Dropdown.Header
-              content={intl.formatMessage(messages.paragraphStyle)}
-            />
-            {blockOpts.map((option, index) => (
-              <MenuOpts
-                {...menuItemProps}
-                type="block-style"
-                option={option}
-                key={index}
-              />
-            ))}
-          </>
-        )}
-      </Dropdown.Menu>
-    </Dropdown>
-  ) : (
-    ''
-  );
-};
-
-export default StylingsButton;

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import StyleMenu from './StyleMenu';
-import './style.less';
-
-export default function install(config) {
-  const { slate } = config.settings;
-
-  slate.buttons.styleMenu = (props) => <StyleMenu {...props} title="Styles" />;
-
-  slate.toolbarButtons.push('styleMenu');
-  slate.expandedToolbarButtons.push('styleMenu');
-
-  slate.styleMenu = {
-    inlineStyles: [],
-    blockStyles: [],
-  };
-
-  return config;
-}

package/packages/volto-slate/src/editor/plugins/StyleMenu/style.less

@@ -1,29 +0,0 @@
-#style-menu.ui.dropdown .menu {
-  .item {
-    display: flex;
-    user-select: none;
-
-    span.text {
-      margin-top: auto;
-      line-height: normal;
-      vertical-align: middle;
-    }
-  }
-
-  .header {
-    color: rgb(153, 153, 153);
-    font-size: 1rem;
-    font-weight: normal;
-  }
-
-  .active {
-    z-index: 1;
-    background: #68778d;
-    box-shadow: none;
-    color: #ffffff;
-    font-weight: 300;
-  }
-
-  overflow: auto;
-  max-height: 50vh;
-}

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

@@ -1,168 +0,0 @@
-/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
-import { Editor, Transforms } from 'slate';
-import { isBlockActive } from '@plone/volto-slate/utils';
-import config from '@plone/volto/registry';
-
-/**
- * Toggles a style (e.g. in the StyleMenu plugin).
- * @param {Editor} editor
- * @param {object} options
- * @param {boolean} options.isRequested Whether the given style is requested by
- * the user. The style is only applied if it is requested and only removed if it
- * is not requested.
- */
-export const toggleStyle = (editor, { cssClass, isBlock, isRequested }) => {
-  if (isBlock) {
-    toggleBlockStyle(editor, cssClass);
-  } else {
-    toggleInlineStyle(editor, cssClass);
-  }
-};
-
-export const toggleBlockStyle = (editor, style) => {
-  // We have 6 boolean variables which need to be accounted for.
-  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
-  const { slate } = config.settings;
-
-  const isListItem = isBlockActive(editor, slate.listItemType);
-  const isActive = isBlockStyleActive(editor, style);
-  const wantsList = false;
-
-  if (isListItem && !wantsList) {
-    toggleBlockStyleAsListItem(editor, style);
-  } else if (isListItem && wantsList && !isActive) {
-    // switchListType(editor, format); // this will deconstruct to Volto blocks
-  } else if (!isListItem && wantsList) {
-    // changeBlockToList(editor, format);
-  } else if (!isListItem && !wantsList) {
-    internalToggleBlockStyle(editor, style);
-  } else {
-    console.warn('toggleBlockStyle case not covered, please examine:', {
-      wantsList,
-      isActive,
-      isListItem,
-    });
-  }
-};
-
-export const toggleInlineStyle = (editor, style) => {
-  // We have 6 boolean variables which need to be accounted for.
-  // See https://docs.google.com/spreadsheets/d/1mVeMuqSTMABV2BhoHPrPAFjn7zUksbNgZ9AQK_dcd3U/edit?usp=sharing
-  const { slate } = config.settings;
-
-  const isListItem = isBlockActive(editor, slate.listItemType);
-  const isActive = isInlineStyleActive(editor, style);
-  const wantsList = false;
-
-  if (isListItem && !wantsList) {
-    toggleInlineStyleAsListItem(editor, style);
-  } else if (isListItem && wantsList && !isActive) {
-    // switchListType(editor, format); // this will deconstruct to Volto blocks
-  } else if (!isListItem && wantsList) {
-    // changeBlockToList(editor, format);
-  } else if (!isListItem && !wantsList) {
-    internalToggleInlineStyle(editor, style);
-  } else {
-    console.warn('toggleInlineStyle case not covered, please examine:', {
-      wantsList,
-      isActive,
-      isListItem,
-    });
-  }
-};
-
-export const isBlockStyleActive = (editor, style) => {
-  const keyName = `style-${style}`;
-  const sn = Array.from(
-    Editor.nodes(editor, {
-      match: (n) => {
-        const isStyle = typeof n.styleName === 'string' || n[keyName];
-        return !Editor.isEditor(n) && isStyle;
-      },
-      mode: 'all',
-    }),
-  );
-
-  for (const [n] of sn) {
-    if (typeof n.styleName === 'string') {
-      if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
-        return true;
-      }
-    } else if (
-      n[keyName] &&
-      keyName.split('-').filter((x) => x === style).length > 0
-    )
-      return true;
-  }
-  return false;
-};
-
-export const isInlineStyleActive = (editor, style) => {
-  const m = Editor.marks(editor);
-  const keyName = `style-${style}`;
-  if (m && m[keyName]) {
-    return true;
-  }
-  return false;
-};
-
-export const internalToggleBlockStyle = (editor, style) => {
-  toggleBlockStyleInSelection(editor, style);
-};
-
-export const internalToggleInlineStyle = (editor, style) => {
-  toggleInlineStyleInSelection(editor, style);
-};
-
-/*
- * Applies a block format unto a list item. Will split the list and deconstruct the
- * block
- */
-export const toggleBlockStyleAsListItem = (editor, style) => {
-  toggleBlockStyleInSelection(editor, style);
-};
-
-/*
- * Applies an inline style unto a list item.
- */
-export const toggleInlineStyleAsListItem = (editor, style) => {
-  toggleInlineStyleInSelection(editor, style);
-};
-
-function toggleInlineStyleInSelection(editor, style) {
-  const m = Editor.marks(editor);
-  const keyName = 'style-' + style;
-
-  if (m && m[keyName]) {
-    Editor.removeMark(editor, keyName);
-  } else {
-    Editor.addMark(editor, keyName, true);
-  }
-}
-
-function toggleBlockStyleInSelection(editor, style) {
-  const sn = Array.from(
-    Editor.nodes(editor, {
-      mode: 'highest',
-      match: (n) => {
-        return !Editor.isEditor(n);
-      },
-    }),
-  );
-
-  for (const [n, p] of sn) {
-    let cn = n.styleName;
-    if (typeof n.styleName !== 'string') {
-      cn = style;
-    } else if (n.styleName.split(' ').filter((x) => x === style).length > 0) {
-      cn = cn
-        .split(' ')
-        .filter((x) => x !== style)
-        .join(' ');
-    } else {
-      // the style is not set but other styles are set
-      cn = cn.split(' ').concat(style).join(' ');
-    }
-    Transforms.setNodes(editor, { styleName: cn }, { at: p });
-  }
-}

package/packages/volto-slate/src/editor/plugins/Table/TableButton.jsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { Dropdown } from 'semantic-ui-react';
-import { ToolbarButton } from '@plone/volto-slate/editor/ui';
-
-import tableSVG from '@plone/volto/icons/table.svg';
-import TableContainer from './TableContainer';
-import './less/table.less';
-import { Editor, Transforms } from 'slate';
-
-const TableButton = ({ ...props }) => {
-  const editor = useSlate();
-
-  const [dropdownOpen, setDropdownOpen] = React.useState(false);
-
-  const [activeRow, setActiveRow] = React.useState(1);
-  const [activeColumn, setActiveColumn] = React.useState(1);
-
-  const defaultRowCount = 5;
-  const defaultColumnCount = 5;
-
-  const [rowCount, setRowCount] = React.useState(defaultRowCount);
-  const [columnCount, setColumnCount] = React.useState(defaultColumnCount);
-
-  const resetState = React.useCallback(() => {
-    setRowCount(defaultRowCount);
-    setColumnCount(defaultColumnCount);
-    setActiveRow(1);
-    setActiveColumn(1);
-  }, []);
-
-  const createEmptyCell = React.useCallback((formatAsColumnHeaders = false) => {
-    return {
-      type: formatAsColumnHeaders ? 'th' : 'td',
-      children: [{ type: 'p', children: [{ text: '' }] }],
-    };
-  }, []);
-
-  const createEmptyRow = React.useCallback(
-    (cellCount, formatAsColumnHeaders = false) => {
-      // should contain at least one <td> or it is not valid that children is empty
-      const row = { type: 'tr', children: [] };
-
-      for (let i = 0; i < cellCount; ++i) {
-        row.children.push(createEmptyCell(formatAsColumnHeaders));
-      }
-
-      return row;
-    },
-    [createEmptyCell],
-  );
-
-  /**
-   * @param {number} row Number of rows for the new empty table.
-   * @param {number} column Number of columns for the new empty table.
-   */
-  const insertEmptyTable = React.useCallback(
-    ({ row, column }) => {
-      const rows = [createEmptyRow(column, true)];
-      for (let i = 0; i < row - 1; ++i) {
-        rows.push(createEmptyRow(column));
-      }
-
-      const table = {
-        type: 'table',
-        children: [
-          {
-            type: 'tbody',
-            children: rows,
-          },
-        ],
-      };
-
-      Transforms.insertNodes(editor, [table], {
-        at: Editor.end(editor, []),
-      });
-    },
-    [createEmptyRow, editor],
-  );
-
-  return (
-    <>
-      <Dropdown
-        open={dropdownOpen}
-        onClose={() => {
-          resetState();
-          setDropdownOpen(false);
-        }}
-        trigger={
-          <ToolbarButton
-            {...props}
-            className="slate-table-dropdown-button"
-            onClick={() => {
-              if (dropdownOpen) {
-                resetState();
-              }
-
-              setDropdownOpen(!dropdownOpen);
-            }}
-            icon={tableSVG}
-          ></ToolbarButton>
-        }
-      >
-        <Dropdown.Menu className="slate-table-dropdown-menu">
-          <TableContainer
-            rowCount={rowCount}
-            columnCount={columnCount}
-            activeColumn={activeColumn}
-            activeRow={activeRow}
-            onCellMouseEnter={({ row, column }) => {
-              if (row > rowCount - 1) {
-                setRowCount(row + 1);
-              } else if (row < rowCount - 1) {
-                setRowCount(defaultRowCount);
-              }
-
-              if (column > columnCount - 1) {
-                setColumnCount(column + 1);
-              } else if (column < columnCount - 1) {
-                setColumnCount(defaultColumnCount);
-              }
-
-              if (row !== activeRow) {
-                setActiveRow(row);
-              }
-              if (column !== activeColumn) {
-                setActiveColumn(column);
-              }
-            }}
-            onCellMouseLeave={({ row, column }) => {}}
-            // `row` and `column` below are 1-based indices
-            onCellClick={({ row, column }) => {
-              insertEmptyTable({ row, column });
-            }}
-          />
-        </Dropdown.Menu>
-      </Dropdown>
-    </>
-  );
-};
-
-export default TableButton;

package/packages/volto-slate/src/editor/plugins/Table/TableCell.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-
-export const TableCell = ({
-  active,
-  row,
-  column,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-}) => {
-  const handleClick = React.useCallback(
-    (ev) => {
-      onClick({ row, column });
-    },
-    [column, onClick, row],
-  );
-
-  const handleMouseEnter = React.useCallback(
-    (ev) => {
-      onMouseEnter({ row, column });
-    },
-    [column, onMouseEnter, row],
-  );
-
-  const handleMouseLeave = React.useCallback(
-    (ev) => {
-      onMouseLeave({ row, column });
-    },
-    [column, onMouseLeave, row],
-  );
-
-  return (
-    <td
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      className={cx({ active })}
-    >
-      <button onClick={handleClick}></button>
-    </td>
-  );
-};
-
-export default TableCell;

package/packages/volto-slate/src/editor/plugins/Table/TableContainer.jsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import TableSizePicker from './TableSizePicker';
-
-export const TableContainer = ({
-  rowCount,
-  columnCount,
-  activeRow,
-  activeColumn,
-  onCellClick,
-  onCellMouseEnter,
-  onCellMouseLeave,
-}) => {
-  return (
-    <div style={{ padding: '1rem' }}>
-      <TableSizePicker
-        activeRow={activeRow}
-        activeColumn={activeColumn}
-        rowCount={rowCount}
-        columnCount={columnCount}
-        onCellClick={onCellClick}
-        onCellMouseEnter={({ row, column }) => {
-          onCellMouseEnter({ row, column });
-        }}
-        onCellMouseLeave={onCellMouseLeave}
-      />
-      <p
-        style={{
-          textAlign: 'center',
-        }}
-      >
-        {activeColumn || 1} &times; {activeRow || 1}
-      </p>
-    </div>
-  );
-};
-
-export default TableContainer;

package/packages/volto-slate/src/editor/plugins/Table/TableSizePicker.jsx

@@ -1,83 +0,0 @@
-import React from 'react';
-import TableCell from './TableCell';
-
-export const TableSizePicker = ({
-  rowCount,
-  columnCount,
-  activeRow,
-  activeColumn,
-  onCellClick,
-  onCellMouseEnter,
-  onCellMouseLeave,
-}) => {
-  const handleClick = React.useCallback(
-    (...rest) => {
-      onCellClick(...rest);
-    },
-    [onCellClick],
-  );
-
-  const handleMouseEnter = React.useCallback(
-    (...rest) => {
-      onCellMouseEnter(...rest);
-    },
-    [onCellMouseEnter],
-  );
-
-  const handleMouseLeave = React.useCallback(
-    (...rest) => {
-      onCellMouseLeave(...rest);
-    },
-    [onCellMouseLeave],
-  );
-
-  const createRow = React.useCallback(
-    (rowIndex) => {
-      const arr = [];
-      for (let i = 0; i < columnCount; ++i) {
-        const columnIndex = i + 1;
-
-        arr.push(
-          <TableCell
-            key={columnIndex}
-            row={rowIndex + 1}
-            column={columnIndex}
-            active={rowIndex + 1 <= activeRow && i + 1 <= activeColumn}
-            onClick={handleClick}
-            onMouseEnter={handleMouseEnter}
-            onMouseLeave={handleMouseLeave}
-          ></TableCell>,
-        );
-      }
-      return <tr key={rowIndex}>{arr}</tr>;
-    },
-    [
-      activeColumn,
-      activeRow,
-      columnCount,
-      handleClick,
-      handleMouseEnter,
-      handleMouseLeave,
-    ],
-  );
-
-  const rows = [];
-  for (let i = 0; i < rowCount; ++i) {
-    rows.push(createRow(i));
-  }
-
-  const zoomFactor = 1;
-
-  return (
-    <table
-      style={{
-        width: `${columnCount * zoomFactor}rem`,
-        height: `${rowCount * zoomFactor}rem`,
-      }}
-    >
-      <tbody>{rows}</tbody>
-    </table>
-  );
-};
-
-export default TableSizePicker;