@pie-element/complex-rubric 4.0.0 → 5.0.1-esmbeta.0

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/table/index.jsx

@@ -0,0 +1,427 @@
+import React from 'react';
+import { Block } from 'slate';
+import debug from 'debug';
+import GridOn from '@material-ui/icons/GridOn';
+import TableToolbar from './table-toolbar';
+import PropTypes from 'prop-types';
+import SlatePropTypes from 'slate-prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import convert from 'react-attr-converter';
+import { object as toStyleObject } from 'to-style';
+import CustomTablePlugin from './CustomTablePlugin';
+
+const log = debug('@pie-lib:editable-html:plugins:table');
+
+const Table = withStyles(() => ({
+  table: {},
+}))((props) => {
+  const nodeAttributes = dataToAttributes(props.node.data);
+
+  return (
+    <table
+      className={props.classes.table}
+      {...props.attributes}
+      {...nodeAttributes}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      <tbody>{props.children}</tbody>
+    </table>
+  );
+});
+
+Table.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  node: SlatePropTypes.node,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const TableRow = (props) => <tr {...props.attributes}>{props.children}</tr>;
+
+TableRow.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const TableCell = withStyles(() => ({
+  td: {
+    minWidth: '25px',
+  },
+}))((props) => {
+  const Tag = props.node.data.get('header') ? 'th' : 'td';
+
+  const nodeAttributes = dataToAttributes(props.node.data);
+  delete nodeAttributes.header;
+
+  return (
+    <Tag
+      {...props.attributes}
+      {...nodeAttributes}
+      colSpan={props.node.data.get('colspan')}
+      className={props.classes[Tag]}
+      onFocus={props.onFocus}
+      onBlur={props.onBlur}
+    >
+      {props.children}
+    </Tag>
+  );
+});
+
+TableCell.propTypes = {
+  attributes: PropTypes.object,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+export const moveFocusToBeginningOfTable = (change) => {
+  const addedTable = change.value.document.findDescendant((d) => !!d.data && !!d.data.get('newTable'));
+
+  if (!addedTable) {
+    return;
+  }
+
+  change.collapseToStartOf(addedTable);
+
+  const update = addedTable.data.remove('newTable');
+
+  change.setNodeByKey(addedTable.key, { data: update });
+};
+
+export default (opts, toolbarPlugins /* :  {toolbar: {}}[] */) => {
+  const core = CustomTablePlugin(opts);
+
+  // fix outdated schema
+
+  if (core.schema && core.schema.blocks) {
+    Object.keys(core.schema.blocks).forEach((key) => {
+      const block = core.schema.blocks[key];
+
+      if (block.parent) {
+        if (block.nodes[0].types) {
+          block.nodes[0] = {
+            type: block.nodes[0].types[0],
+          };
+        }
+
+        if (block.nodes[0].objects) {
+          block.nodes[0] = {
+            object: block.nodes[0].objects[0],
+          };
+        }
+
+        block.parent = {
+          type: block.parent.types[0],
+        };
+      } else {
+        block.nodes[0] = { type: block.nodes[0].types[0] };
+      }
+    });
+  }
+
+  core.utils.getTableBlock = (containerNode, key) => {
+    const node = containerNode.getDescendant(key);
+    const ancestors = containerNode.getAncestors(key).push(node);
+    return ancestors.findLast((p) => p.type === 'table');
+  };
+
+  core.utils.createTableWithOptions = (row, columns, extra) => {
+    const createdTable = core.utils.createTable(row, columns);
+    const newTable = Block.create({
+      ...createdTable.toJSON(),
+      ...extra,
+    });
+
+    return newTable;
+  };
+
+  core.toolbar = {
+    type: 'table',
+    icon: <GridOn />,
+    ariaLabel: 'Insert Table',
+    onClick: (value, onChange) => {
+      log('insert table');
+      const change = value.change();
+      const newTable = core.utils.createTableWithOptions(2, 2, {
+        data: {
+          border: '1',
+          newTable: true,
+        },
+      });
+
+      change.insertBlock(newTable);
+
+      moveFocusToBeginningOfTable(change);
+      onChange(change);
+    },
+    supports: (node, value) => node && node.object === 'block' && core.utils.isSelectionInTable(value),
+    /**
+     * Note - the node may not be a table node - it may be a node inside a table.
+     */
+    customToolbar: (node, value, onToolbarDone, getFocusedValue) => {
+      log('[customToolbar] node.data: ', node.data);
+
+      const tableBlock = core.utils.getTableBlock(value.document, node?.key);
+      log('[customToolbar] tableBlock: ', tableBlock);
+
+      const hasBorder = () => tableBlock.data.get('border') && tableBlock.data.get('border') !== '0';
+      const addRow = () => {
+        const change = core.changes.insertRow(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const addColumn = () => {
+        const change = core.changes.insertColumn(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeRow = () => {
+        const change = core.changes.removeRow(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeColumn = () => {
+        const change = core.changes.removeColumn(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const removeTable = () => {
+        const change = core.changes.removeTable(value.change());
+        onToolbarDone(change, false);
+      };
+
+      const toggleBorder = () => {
+        const { data } = tableBlock;
+        const update = data.set('border', hasBorder() ? '0' : '1');
+        log('[toggleBorder] update: ', update);
+        const change = value.change().setNodeByKey(tableBlock.key, { data: update });
+        onToolbarDone(change, false);
+      };
+
+      const onDone = () => {
+        log('[onDone] call onToolbarDone...');
+        onToolbarDone(null, true);
+      };
+
+      const Tb = () => (
+        <TableToolbar
+          getFocusedValue={getFocusedValue}
+          plugins={toolbarPlugins}
+          onChange={(c) => onToolbarDone(c, false)}
+          value={value}
+          onAddRow={addRow}
+          onRemoveRow={removeRow}
+          onAddColumn={addColumn}
+          onRemoveColumn={removeColumn}
+          onRemoveTable={removeTable}
+          hasBorder={hasBorder()}
+          onToggleBorder={toggleBorder}
+          onDone={onDone}
+        />
+      );
+
+      return Tb;
+    },
+  };
+
+  const Node = (props) => {
+    switch (props.node.type) {
+      case 'table':
+        return <Table {...props} onFocus={opts.onFocus} onBlur={opts.onBlur} />;
+      case 'table_row':
+        return <TableRow {...props} />;
+      case 'table_cell':
+        return <TableCell {...props} onFocus={opts.onFocus} onBlur={opts.onBlur} />;
+      default:
+        return null;
+    }
+  };
+  Node.propTypes = {
+    node: PropTypes.object,
+  };
+
+  core.normalizeNode = (node) => {
+    const addNodeBeforeArray = [];
+
+    if (node.object !== 'document') return;
+
+    node.findDescendant((d) => {
+      if (d.type === 'table') {
+        const tablePath = node.getPath(d.key);
+        const prevNode = node.getPreviousNode(tablePath);
+        const nextNode = node.getNextNode(tablePath);
+
+        if (!prevNode || !nextNode) {
+          addNodeBeforeArray.push({
+            node: d,
+            prevNode,
+            nextNode,
+          });
+        }
+      }
+    });
+
+    if (!addNodeBeforeArray.length) {
+      return;
+    }
+
+    return (change) => {
+      const newBlock = {
+        object: 'block',
+        type: 'div',
+      };
+
+      addNodeBeforeArray.forEach((n) => {
+        const tablePath = change.value.document.getPath(n.node.key).toJSON();
+        // removing tableIndex
+        let indexToAdd = tablePath.splice(-1)[0];
+
+        if (!n.prevNode) {
+          // inserting block key before table
+          change.insertNodeByPath(tablePath, indexToAdd, newBlock);
+          // this will trigger another normalization, which will figure out if there's not
+          // a block after the table and add it, so we exit for now
+          return;
+        }
+
+        if (!n.nextNode) {
+          // inserting block key after table
+          change.insertNodeByPath(tablePath, indexToAdd + 1, newBlock);
+        }
+      });
+    };
+  };
+
+  core.renderNode = Node;
+  core.name = 'table';
+
+  return core;
+};
+
+export const parseStyleString = (s) => {
+  const regex = /([\w-]*)\s*:\s*([^;]*)/g;
+  let match;
+  const result = {};
+  while ((match = regex.exec(s))) {
+    result[match[1]] = match[2].trim();
+  }
+  return result;
+};
+
+export const reactAttributes = (o) => toStyleObject(o, { camelize: true, addUnits: false });
+
+const attributesToMap = (el) => (acc, attribute) => {
+  const value = el.getAttribute(attribute);
+  if (value) {
+    if (attribute === 'style') {
+      const styleString = el.getAttribute(attribute);
+      const reactStyleObject = reactAttributes(parseStyleString(styleString));
+      acc['style'] = reactStyleObject;
+    } else {
+      acc[attribute] = el.getAttribute(attribute);
+    }
+  }
+  return acc;
+};
+
+const dataToAttributes = (data) => {
+  if (!data || !data.get) {
+    return {};
+  }
+
+  return data.reduce((acc, v, name) => {
+    if (v) {
+      acc[convert(name)] = v;
+    }
+    return acc;
+  }, {});
+};
+
+const attributes = ['border', 'cellpadding', 'cellspacing', 'class', 'style'];
+
+const cellAttributes = ['colspan', 'rowspan', 'class', 'style'];
+
+export const serialization = {
+  deserialize(el, next) {
+    const tag = el.tagName.toLowerCase();
+
+    switch (tag) {
+      case 'table': {
+        const children =
+          el.children.length === 1 && el.children[0].tagName.toLowerCase() === 'tbody'
+            ? el.children[0].children
+            : el.children;
+        const c = Array.from(children);
+
+        return {
+          object: 'block',
+          type: 'table',
+          nodes: next(c),
+          data: attributes.reduce(attributesToMap(el), {}),
+        };
+      }
+
+      case 'th': {
+        return {
+          object: 'block',
+          type: 'table_cell',
+          nodes: next(el.childNodes),
+          data: cellAttributes.reduce(attributesToMap(el), { header: true }),
+        };
+      }
+
+      case 'tr': {
+        return {
+          object: 'block',
+          type: 'table_row',
+          nodes: next(Array.from(el.children)),
+        };
+      }
+
+      case 'td': {
+        return {
+          object: 'block',
+          type: 'table_cell',
+          nodes: next(Array.from(el.childNodes)),
+          data: cellAttributes.reduce(attributesToMap(el), { header: false }),
+        };
+      }
+    }
+  },
+  serialize(object, children) {
+    if (object.object !== 'block') {
+      return;
+    }
+
+    switch (object.type) {
+      case 'table': {
+        const attributes = dataToAttributes(object.data);
+
+        return (
+          <table {...attributes}>
+            <tbody>{children}</tbody>
+          </table>
+        );
+      }
+
+      case 'table_row': {
+        return <tr>{children}</tr>;
+      }
+
+      case 'table_cell': {
+        const attributes = dataToAttributes(object.data);
+        delete attributes.header;
+
+        if (object.data.get('header')) {
+          return <th {...attributes}>{children}</th>;
+        } else {
+          return <td {...attributes}>{children}</td>;
+        }
+      }
+    }
+  },
+};

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/table/table-toolbar.jsx

@@ -0,0 +1,136 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import { Button } from '../toolbar/toolbar-buttons';
+import { DoneButton } from '../toolbar/done-button';
+import BorderAll from '@material-ui/icons/BorderAll';
+import { ToolbarButton } from '../toolbar/default-toolbar';
+
+import { AddRow, AddColumn, RemoveColumn, RemoveRow, RemoveTable } from './icons';
+import PropTypes from 'prop-types';
+import debug from 'debug';
+
+const log = debug('@pie-lib:editable-html:plugins:table-toolbar');
+
+export class TableToolbar extends React.Component {
+  static propTypes = {
+    plugins: PropTypes.array.isRequired,
+    value: PropTypes.object.isRequired,
+    onChange: PropTypes.func.isRequired,
+    onAddRow: PropTypes.func.isRequired,
+    onRemoveRow: PropTypes.func.isRequired,
+    onAddColumn: PropTypes.func.isRequired,
+    onRemoveColumn: PropTypes.func.isRequired,
+    onRemoveTable: PropTypes.func.isRequired,
+    onToggleBorder: PropTypes.func.isRequired,
+    hasBorder: PropTypes.bool,
+    onDone: PropTypes.func.isRequired,
+    classes: PropTypes.object.isRequired,
+  };
+
+  static defaultProps = {
+    plugins: [],
+    value: {},
+    onChange: () => {},
+  };
+
+  onDone = (e) => {
+    const { onDone } = this.props;
+    e.preventDefault();
+    onDone();
+  };
+
+  render() {
+    const {
+      getFocusedValue,
+      plugins,
+      value,
+      onChange,
+      onAddRow,
+      onRemoveRow,
+      onAddColumn,
+      onRemoveColumn,
+      onRemoveTable,
+      onToggleBorder,
+      hasBorder,
+      classes,
+    } = this.props;
+    log('[render] hasBorder:', hasBorder);
+
+    // we're separating the response area plugin because we want to display it next to the done button
+    const filteredPlugins = (plugins || []).reduce(
+      (acc, plugin) => {
+        if (plugin.name === 'response_area') {
+          return {
+            ...acc,
+            respAreaPlugin: plugin,
+          };
+        }
+
+        return {
+          ...acc,
+          otherPlugins: [...acc.otherPlugins, plugin],
+        };
+      },
+      {
+        respAreaPlugin: null,
+        otherPlugins: [],
+      },
+    );
+
+    return (
+      <div className={classes.tableToolbar}>
+        <div className={classes.toolbarButtons}>
+          <Button onClick={onAddRow}>
+            <AddRow />
+          </Button>
+          <Button onClick={onRemoveRow}>
+            <RemoveRow />
+          </Button>
+          <Button onClick={onAddColumn}>
+            <AddColumn />
+          </Button>
+          <Button onClick={onRemoveColumn}>
+            <RemoveColumn />
+          </Button>
+          <Button onClick={onRemoveTable}>
+            <RemoveTable />
+          </Button>
+          {(filteredPlugins.otherPlugins || []).map((p, index) => (
+            <ToolbarButton
+              key={`plugin-${index}`}
+              {...p.toolbar}
+              value={value}
+              onChange={onChange}
+              getFocusedValue={getFocusedValue}
+            />
+          ))}
+          <Button onClick={onToggleBorder} active={hasBorder}>
+            <BorderAll />
+          </Button>
+        </div>
+        {filteredPlugins.respAreaPlugin && (
+          <ToolbarButton
+            key={'plugin-response-area'}
+            {...filteredPlugins.respAreaPlugin.toolbar}
+            value={value}
+            onChange={onChange}
+            getFocusedValue={getFocusedValue}
+          />
+        )}
+        <DoneButton onClick={this.onDone} />
+      </div>
+    );
+  }
+}
+
+const styles = () => ({
+  tableToolbar: {
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+  },
+  toolbarButtons: {
+    display: 'flex',
+  },
+});
+export default withStyles(styles)(TableToolbar);

package/configure/node_modules/@pie-element/rubric/configure/node_modules/@pie-lib/editable-html/src/plugins/textAlign/icons/index.jsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import Collapse from '@material-ui/core/Collapse';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+
+export const AlignLeft = () => (
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M42.1875 4.75C42.1875 7.38672 39.9902 9.4375 37.5 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H37.5C39.9902 0.0625 42.1875 2.25977 42.1875 4.75ZM42.1875 42.25C42.1875 44.8867 39.9902 46.9375 37.5 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H37.5C39.9902 37.5625 42.1875 39.7598 42.1875 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const AlignRight = () => (
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H28.125C25.4883 9.4375 23.4375 7.38672 23.4375 4.75C23.4375 2.25977 25.4883 0.0625 28.125 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H28.125C25.4883 46.9375 23.4375 44.8867 23.4375 42.25C23.4375 39.7598 25.4883 37.5625 28.125 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const AlignCenter = () => (
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M51.5625 4.75C51.5625 7.38672 49.3652 9.4375 46.875 9.4375H18.75C16.1133 9.4375 14.0625 7.38672 14.0625 4.75C14.0625 2.25977 16.1133 0.0625 18.75 0.0625H46.875C49.3652 0.0625 51.5625 2.25977 51.5625 4.75ZM65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5ZM0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61ZM51.5625 42.25C51.5625 44.8867 49.3652 46.9375 46.875 46.9375H18.75C16.1133 46.9375 14.0625 44.8867 14.0625 42.25C14.0625 39.7598 16.1133 37.5625 18.75 37.5625H46.875C49.3652 37.5625 51.5625 39.7598 51.5625 42.25Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export const AlignJustify = () => (
+  <svg width="20" height="20" viewBox="0 0 66 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M65.625 4.75C65.625 7.38672 63.4277 9.4375 60.9375 9.4375H4.6875C2.05078 9.4375 0 7.38672 0 4.75C0 2.25977 2.05078 0.0625 4.6875 0.0625H60.9375C63.4277 0.0625 65.625 2.25977 65.625 4.75ZM65.625 42.25C65.625 44.8867 63.4277 46.9375 60.9375 46.9375H4.6875C2.05078 46.9375 0 44.8867 0 42.25C0 39.7598 2.05078 37.5625 4.6875 37.5625H60.9375C63.4277 37.5625 65.625 39.7598 65.625 42.25ZM0 23.5C0 21.0098 2.05078 18.8125 4.6875 18.8125H60.9375C63.4277 18.8125 65.625 21.0098 65.625 23.5C65.625 26.1367 63.4277 28.1875 60.9375 28.1875H4.6875C2.05078 28.1875 0 26.1367 0 23.5ZM65.625 61C65.625 63.6367 63.4277 65.6875 60.9375 65.6875H4.6875C2.05078 65.6875 0 63.6367 0 61C0 58.5098 2.05078 56.3125 4.6875 56.3125H60.9375C63.4277 56.3125 65.625 58.5098 65.625 61Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+export default ({ getValue, onChange }) => {
+  const [open, setOpen] = useState(false);
+  const value = getValue();
+  const text = value.texts.get(0);
+
+  let type;
+
+  if (text) {
+    const blockParent = value.document.getParent(text.key);
+    const data = blockParent.data.toJSON();
+
+    if (data?.attributes?.align) {
+      type = data?.attributes?.align;
+    }
+  }
+
+  let icon;
+
+  switch (type) {
+    case 'right':
+      icon = <AlignRight />;
+      break;
+    case 'center':
+      icon = <AlignCenter />;
+      break;
+    case 'justify':
+      icon = <AlignJustify />;
+      break;
+    default:
+      icon = <AlignLeft />;
+      break;
+  }
+
+  const applyAlignment = (event) => {
+    if (value.texts.size) {
+      const alignType = event.target?.closest('div')?.getAttribute('value');
+
+      if (alignType) {
+        let c = value.change();
+
+        value.texts.forEach((text) => {
+          const blockParent = value.document.getParent(text.key);
+
+          c = c.setNodeByKey(blockParent.key, {
+            data: { ...blockParent.data, attributes: { ...blockParent.data?.attributes, align: alignType } },
+          });
+        });
+
+        onChange(c);
+      }
+    }
+
+    setOpen(false);
+  };
+
+  const onMouseDown = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setOpen(!open);
+  };
+
+  return (
+    <div>
+      <div style={{ display: 'flex', alignItems: 'center' }} onClick={onMouseDown}>
+        {icon}
+        <span style={{ marginLeft: '5px', fontSize: '8px' }}>&#9660;</span>
+      </div>
+      <Collapse in={open} timeout="auto" unmountOnExit style={{ position: 'absolute' }}>
+        <List
+          component="div"
+          disablePadding
+          style={{
+            background: '#fff',
+            display: 'flex',
+            flexDirection: 'row',
+            padding: 0,
+          }}
+        >
+          <ListItem button type="submit" value="left" aria-label="Align text left" onClick={applyAlignment}>
+            <AlignLeft />
+          </ListItem>
+
+          <ListItem button type="submit" value="center" aria-label="Align text center" onClick={applyAlignment}>
+            <AlignCenter />
+          </ListItem>
+
+          <ListItem button type="submit" value="right" aria-label="Align text right" onClick={applyAlignment}>
+            <AlignRight />
+          </ListItem>
+
+          <ListItem button type="submit" value="justify" aria-label="Justify text" onClick={applyAlignment}>
+            <AlignJustify />
+          </ListItem>
+        </List>
+      </Collapse>
+    </div>
+  );
+};