@plone/volto-slate 18.0.0-alpha.4

package/src/editor/plugins/StyleMenu/StyleMenu.jsx

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

@@ -0,0 +1,19 @@
+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/src/editor/plugins/StyleMenu/style.less

@@ -0,0 +1,29 @@
+#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/src/editor/plugins/StyleMenu/utils.js

@@ -0,0 +1,168 @@
+/* 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/src/editor/plugins/Table/TableButton.jsx

@@ -0,0 +1,142 @@
+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/src/editor/plugins/Table/TableCell.jsx

@@ -0,0 +1,44 @@
+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/src/editor/plugins/Table/TableContainer.jsx

@@ -0,0 +1,37 @@
+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/src/editor/plugins/Table/TableSizePicker.jsx

@@ -0,0 +1,83 @@
+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;