@plone/volto-slate 19.0.0-alpha.8 → 19.0.0

package/src/blocks/Table/TableBlockEdit.test.jsx

@@ -25,12 +25,6 @@ test('renders an edit table block component', () => {
         onAddBlock={() => {}}
         onChangeBlock={() => {}}
         onSelectBlock={() => {}}
-        onDeleteBlock={() => {}}
-        onInsertBlock={() => {}}
-        onFocusPreviousBlock={() => {}}
-        onFocusNextBlock={() => {}}
-        handleKeyDown={() => {}}
-        onMutateBlock={() => {}}
         index={1}
       />
     </Provider>,

package/src/blocks/Table/TableBlockView.jsx

@@ -85,70 +85,73 @@ const View = ({ data }) => {
   };
 
   return (
-    <>
-      {data && data.table && (
-        <Table
-          fixed={data.table.fixed}
-          compact={data.table.compact}
-          basic={data.table.basic ? 'very' : false}
-          celled={data.table.celled}
-          inverted={data.table.inverted}
-          striped={data.table.striped}
-          sortable={data.table.sortable}
-          className="slate-table-block"
-        >
-          {!data.table.hideHeaders ? (
-            <Table.Header>
-              <Table.Row>
-                {headers.map((cell, index) => (
-                  <Table.HeaderCell
-                    key={cell.key}
-                    textAlign="left"
-                    verticalAlign="middle"
-                    tabIndex={data.table.sortable ? '0' : '-1'}
-                    sorted={state.column === index ? state.direction : null}
-                    onClick={() => {
-                      handleSort(index);
-                    }}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
+    <div className="block slate-table">
+      <div className="block-inner-container">
+        {data && data.table && (
+          <Table
+            fixed={data.table.fixed}
+            compact={data.table.compact}
+            basic={data.table.basic ? 'very' : false}
+            celled={data.table.celled}
+            inverted={data.table.inverted}
+            striped={data.table.striped}
+            sortable={data.table.sortable}
+            className="slate-table-block"
+            unstackable
+          >
+            {!data.table.hideHeaders ? (
+              <Table.Header>
+                <Table.Row>
+                  {headers.map((cell, index) => (
+                    <Table.HeaderCell
+                      key={cell.key}
+                      textAlign="left"
+                      verticalAlign="middle"
+                      tabIndex={data.table.sortable ? '0' : '-1'}
+                      sorted={state.column === index ? state.direction : null}
+                      onClick={() => {
                         handleSort(index);
+                      }}
+                      onKeyDown={(e) => {
+                        if (e.key === 'Enter' || e.key === ' ') {
+                          e.preventDefault();
+                          handleSort(index);
+                        }
+                      }}
+                      aria-sort={
+                        state.column === index ? state.direction : 'none'
                       }
-                    }}
-                    aria-sort={
-                      state.column === index ? state.direction : 'none'
-                    }
-                  >
-                    {cell.value &&
-                    Node.string({ children: cell.value }).length > 0
-                      ? serializeNodes(cell.value)
-                      : '\u00A0'}
-                  </Table.HeaderCell>
-                ))}
-              </Table.Row>
-            </Table.Header>
-          ) : (
-            ''
-          )}
-          <Table.Body>
-            {map(sortedRows, (row) => (
-              <Table.Row key={row}>
-                {map(rows[row], (cell) => (
-                  <Table.Cell
-                    key={cell.key}
-                    textAlign="left"
-                    verticalAlign="middle"
-                  >
-                    {cell.value}
-                  </Table.Cell>
-                ))}
-              </Table.Row>
-            ))}
-          </Table.Body>
-        </Table>
-      )}
-    </>
+                    >
+                      {cell.value &&
+                      Node.string({ children: cell.value }).length > 0
+                        ? serializeNodes(cell.value)
+                        : '\u00A0'}
+                    </Table.HeaderCell>
+                  ))}
+                </Table.Row>
+              </Table.Header>
+            ) : (
+              ''
+            )}
+            <Table.Body>
+              {map(sortedRows, (row) => (
+                <Table.Row key={row}>
+                  {map(rows[row], (cell) => (
+                    <Table.Cell
+                      key={cell.key}
+                      textAlign="left"
+                      verticalAlign="middle"
+                    >
+                      {cell.value}
+                    </Table.Cell>
+                  ))}
+                </Table.Row>
+              ))}
+            </Table.Body>
+          </Table>
+        )}
+      </div>
+    </div>
   );
 };
 

package/src/blocks/Table/__snapshots__/Cell.test.jsx.snap

@@ -0,0 +1,3 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders a cell component 1`] = `null`;

package/src/blocks/Table/__snapshots__/{TableBlockEdit.test.js.snap → TableBlockEdit.test.jsx.snap}

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`renders an edit table block component 1`] = `
 <div
   className="block table"
 >
   <table
-    className="ui table slate-table-block"
+    className="ui unstackable table slate-table-block"
   >
     <thead
       className=""

package/src/blocks/Table/__snapshots__/TableBlockView.test.jsx.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`renders a view table component 1`] = `
+<div
+  className="block slate-table"
+>
+  <div
+    className="block-inner-container"
+  >
+    <table
+      className="ui unstackable table slate-table-block"
+    >
+      <thead
+        className=""
+      >
+        <tr
+          className=""
+        >
+          <th
+            aria-sort="none"
+            className="left aligned middle aligned"
+            onClick={[Function]}
+            onKeyDown={[Function]}
+            tabIndex="-1"
+          >
+            <h2>
+              My header
+            </h2>
+          </th>
+        </tr>
+      </thead>
+      <tbody
+        className=""
+      />
+    </table>
+  </div>
+</div>
+`;

package/src/blocks/Table/deconstruct.js

@@ -19,7 +19,7 @@ import {
 export function syncCreateTableBlock(rows) {
   const id = uuid();
   const block = {
-    '@type': 'table',
+    '@type': 'slateTable',
     table: {
       rows,
     },

package/src/blocks/Table/deconstruct.test.js

@@ -0,0 +1,24 @@
+import { syncCreateTableBlock } from './deconstruct';
+
+describe('syncCreateTableBlock', () => {
+  it('creates a slateTable block with the given rows', () => {
+    const rows = [
+      {
+        key: 'row1',
+        cells: [
+          {
+            key: 'cell1',
+            type: 'data',
+            value: [{ children: [{ text: '1' }] }],
+          },
+        ],
+      },
+    ];
+
+    const [id, block] = syncCreateTableBlock(rows);
+
+    expect(id).toBeDefined();
+    expect(block['@type']).toBe('slateTable');
+    expect(block.table.rows).toEqual(rows);
+  });
+});

package/src/blocks/Text/SlashMenu.jsx

@@ -120,7 +120,7 @@ const PersistentSlashMenu = ({ editor }) => {
   const slashCommand = data.plaintext
     ?.toLowerCase()
     .trim()
-    .match(/^\/([a-z]*)$/);
+    .match(/^\/([\p{L}]*)$/u);
 
   const availableBlocks = React.useMemo(
     () =>
@@ -141,10 +141,12 @@ const PersistentSlashMenu = ({ editor }) => {
         .filter((block) => {
           // typed text is a substring of the title or id
           const title = translateBlockTitle(block, intl).toLowerCase();
+          const originalTitle = block.title.toLowerCase();
           return (
             block.id !== 'slate' &&
             slashCommand &&
-            title.indexOf(slashCommand[1]) !== -1
+            (title.includes(slashCommand[1]) ||
+              originalTitle.includes(slashCommand[1]))
           );
         })
         .sort((a, b) => {

package/src/blocks/Text/TextBlockEdit.test.jsx

@@ -1,17 +1,22 @@
 import React from 'react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
+import { createStore } from 'redux';
+import { Provider } from 'react-redux';
+import { IntlProvider } from 'react-intl';
 import { render } from '@testing-library/react';
 import config from '@plone/volto/registry';
 import TextBlockEdit from './TextBlockEdit';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 
-const mockStore = configureStore();
+// Create a proper Redux store with initial state
+const createMockStore = (initialState) => {
+  const rootReducer = (state = initialState) => state;
+  return createStore(rootReducer, initialState);
+};
 
 window.getSelection = () => null;
 
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
-global.__CLIENT__ = false; // eslint-disable-line no-underscore-dangle
+global.__SERVER__ = true;
+global.__CLIENT__ = false;
 
 beforeAll(() => {
   config.widgets = {
@@ -60,7 +65,18 @@ beforeAll(() => {
 
 describe('TextBlockEdit', () => {
   it('renders w/o errors', async () => {
-    const store = mockStore({
+    const store = createMockStore({
+      userSession: {
+        token: null,
+      },
+      users: {
+        user: {},
+        get: {
+          loading: false,
+          loaded: false,
+          error: null,
+        },
+      },
       intl: {
         locale: 'en',
         messages: {},
@@ -69,36 +85,37 @@ describe('TextBlockEdit', () => {
 
     mockAllIsIntersecting(true);
 
-    // TODO: also test for the initial contents: My first paragraph.
     const { asFragment } = render(
       <Provider store={store}>
-        <TextBlockEdit
-          block="478923"
-          blockNode={{ current: {} }}
-          detached={false}
-          index={2}
-          onAddBlock={() => {}}
-          onChangeBlock={() => {}}
-          onDeleteBlock={() => {}}
-          onFocusNextBlock={() => {}}
-          onFocusPreviousBlock={() => {}}
-          onInsertBlock={() => {}}
-          onMutateBlock={() => {}}
-          onSelectBlock={() => {}}
-          properties={{}}
-          setSlateBlockSelection={() => {}}
-          data={{
-            '@type': 'slate',
-            plaintext: '',
-            value: [
-              {
-                type: 'p',
-                children: [{ text: '' /* My first paragraph. */ }],
-              },
-            ],
-          }}
-          selected={true}
-        />
+        <IntlProvider locale="en" messages={{}}>
+          <TextBlockEdit
+            block="478923"
+            blockNode={{ current: {} }}
+            detached={false}
+            index={2}
+            onAddBlock={() => {}}
+            onChangeBlock={() => {}}
+            onDeleteBlock={() => {}}
+            onFocusNextBlock={() => {}}
+            onFocusPreviousBlock={() => {}}
+            onInsertBlock={() => {}}
+            onMutateBlock={() => {}}
+            onSelectBlock={() => {}}
+            properties={{}}
+            setSlateBlockSelection={() => {}}
+            data={{
+              '@type': 'slate',
+              plaintext: '',
+              value: [
+                {
+                  type: 'p',
+                  children: [{ text: '' }],
+                },
+              ],
+            }}
+            selected={true}
+          />
+        </IntlProvider>
       </Provider>,
     );
 

package/src/blocks/Text/__snapshots__/{TextBlockEdit.test.js.snap → TextBlockEdit.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`TextBlockEdit renders w/o errors 1`] = `
+exports[`TextBlockEdit > renders w/o errors 1`] = `
 <DocumentFragment>
   <div
     class="text-slate-editor-inner"
@@ -13,6 +13,7 @@ exports[`TextBlockEdit renders w/o errors 1`] = `
         class="toolbar-wrapper"
       />
       <div
+        aria-labelledby="field-undefined"
         aria-multiline="false"
         autocapitalize="false"
         autocorrect="false"
@@ -49,13 +50,25 @@ exports[`TextBlockEdit renders w/o errors 1`] = `
     <button
       class="ui basic icon button block-add-button"
       title="Add block"
+      type="button"
     >
       <svg
         class="icon block-add-button"
-        style="height: 24px; width: auto; fill: currentColor;"
-        viewBox=""
-        xmlns=""
-      />
+        style="height: 24px; width: auto; fill: currentcolor;"
+        viewBox="0 0 36 36"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g
+          fill-rule="evenodd"
+        >
+          <path
+            d="M19 9 17 9 17 17 9 17 9 19 17 19 17 27 19 27 19 19 27 19 27 17 19 17z"
+          />
+          <path
+            d="M18,31 C10.832,31 5,25.168 5,18 C5,10.832 10.832,5 18,5 C25.168,5 31,10.832 31,18 C31,25.168 25.168,31 18,31 M18,3 C9.729,3 3,9.729 3,18 C3,26.271 9.729,33 18,33 C26.271,33 33,26.271 33,18 C33,9.729 26.271,3 18,3"
+          />
+        </g>
+      </svg>
     </button>
   </div>
 </DocumentFragment>

package/src/editor/config.jsx

@@ -207,7 +207,7 @@ export const hotkeys = {
   'mod+b': { format: 'strong', type: 'inline' },
   'mod+i': { format: 'em', type: 'inline' },
   'mod+u': { format: 'u', type: 'inline' },
-  'mod+s': { format: 'del', type: 'inline' },
+  'mod+shift+x': { format: 'del', type: 'inline' },
   // 'mod+`': { format: 'code', type: 'inline' },
   // TODO: more hotkeys, including from plugins!
 };

package/src/editor/plugins/Link/index.jsx

@@ -91,7 +91,6 @@ const LinkEditor = (props) => {
         }}
         onOverrideContent={(c) => {
           dispatch(setPluginOptions(pid, { show_sidebar_editor: false }));
-          savedPosition.current = null;
         }}
       />
     </PositionedToolbar>

package/src/editor/plugins/Table/less/public.less

@@ -27,3 +27,7 @@ table.slate-table-block.sortable {
     display: inline-block;
   }
 }
+
+.block.slate-table .block-inner-container {
+  overflow-x: auto;
+}

package/src/editor/ui/__snapshots__/{ToolbarButton.test.js.snap → ToolbarButton.test.jsx.snap}

@@ -1,6 +1,6 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ToolbarButton renders a toolbar button 1`] = `
+exports[`ToolbarButton > renders a toolbar button 1`] = `
 <DocumentFragment>
   <div
     class="button-wrapper"

package/src/widgets/HtmlSlateWidget.jsx

@@ -7,7 +7,7 @@ import ReactDOMServer from 'react-dom/server';
 import configureStore from 'redux-mock-store';
 import { MemoryRouter } from 'react-router-dom';
 import { Provider, useSelector } from 'react-redux';
-import { defineMessages, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl, IntlProvider } from 'react-intl';
 
 import { FormFieldWrapper } from '@plone/volto/components/manage/Widgets';
 import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
@@ -61,7 +61,13 @@ const HtmlSlateWidget = (props) => {
       const mockStore = configureStore();
       const html = ReactDOMServer.renderToStaticMarkup(
         <Provider store={mockStore({ userSession: { token } })}>
-          <MemoryRouter>{serializeNodes(value || [])}</MemoryRouter>
+          <IntlProvider
+            locale={intl.locale}
+            messages={intl.messages}
+            defaultLocale={intl.defaultLocale ?? 'en'}
+          >
+            <MemoryRouter>{serializeNodes(value || [])}</MemoryRouter>
+          </IntlProvider>
         </Provider>,
       );
       // console.log('toHtml value', JSON.stringify(value));
@@ -73,7 +79,7 @@ const HtmlSlateWidget = (props) => {
         data: html,
       };
     },
-    [token],
+    [token, intl],
   );
 
   const fromHtml = React.useCallback(

package/src/blocks/Table/__snapshots__/Cell.test.js.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders a cell component 1`] = `null`;

package/src/blocks/Table/__snapshots__/TableBlockView.test.js.snap

@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders a view table component 1`] = `
-<table
-  className="ui table slate-table-block"
->
-  <thead
-    className=""
-  >
-    <tr
-      className=""
-    >
-      <th
-        className="left aligned middle aligned"
-        onClick={[Function]}
-      >
-        <h2>
-          My header
-        </h2>
-      </th>
-    </tr>
-  </thead>
-  <tbody
-    className=""
-  />
-</table>
-`;