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

package/packages/volto-slate/src/index.js

@@ -1,61 +0,0 @@
-import * as slateReducers from './reducers';
-
-import installSlate from './editor';
-import installTextBlock from './blocks/Text';
-import installTableBlock from './blocks/Table';
-import RichTextWidget from './widgets/RichTextWidget';
-import RichTextWidgetView from './widgets/RichTextWidgetView';
-import HtmlSlateWidget from './widgets/HtmlSlateWidget';
-import ObjectByTypeWidget from './widgets/ObjectByTypeWidget';
-
-export default function applyConfig(config) {
-  config = [installSlate, installTextBlock, installTableBlock].reduce(
-    (acc, apply) => apply(acc),
-    config,
-  );
-
-  config.settings.defaultBlockType = 'slate';
-
-  config.settings.slate.toolbarButtons = [
-    'bold',
-    'italic',
-    'strikethrough',
-    'link',
-    'separator',
-    'heading-two',
-    'heading-three',
-    'separator',
-    'sub',
-    'sup',
-    'separator',
-    'numbered-list',
-    'bulleted-list',
-    'blockquote',
-    'styleMenu',
-  ];
-
-  config.settings.slate.scrollIntoView = false;
-
-  config.addonReducers = {
-    ...config.addonReducers,
-    ...slateReducers,
-  };
-
-  config.views = {
-    ...config.views,
-  };
-
-  config.widgets.widget.slate = RichTextWidget;
-  config.widgets.widget.slate_richtext = RichTextWidget;
-  config.widgets.widget.slate_html = HtmlSlateWidget;
-  config.widgets.widget.richtext = HtmlSlateWidget;
-  config.widgets.widget.object_by_type = ObjectByTypeWidget;
-
-  // volto-widgets-view
-  if (config.widgets.views?.widget) {
-    config.widgets.views.widget.slate = RichTextWidgetView;
-    config.widgets.views.widget.slate_richtext = RichTextWidgetView;
-  }
-
-  return config;
-}

package/packages/volto-slate/src/reducers/content.js

@@ -1,74 +0,0 @@
-/**
- * Upload reducer.
- * @module reducers/content
- *
- * Customized copy of Volto's content reducer
- */
-
-import config from '@plone/volto/registry';
-
-import { UPLOAD_CONTENT } from '@plone/volto-slate/constants';
-
-const initialState = {};
-
-/**
- * Content reducer.
- * @function content
- * @param {Object} state Current state.
- * @param {Object} action Action to be handled.
- * @returns {Object} New state.
- */
-export default function upload_content(state = initialState, action = {}) {
-  let { result, origin } = action;
-  switch (action.type) {
-    case `${UPLOAD_CONTENT}_PENDING`:
-      return {
-        ...state,
-        [origin]: {
-          ...state[origin],
-          upload: {
-            loading: true,
-            loaded: false,
-            error: null,
-          },
-        },
-      };
-    case `${UPLOAD_CONTENT}_SUCCESS`:
-      return {
-        ...state,
-        [origin]: {
-          ...state[origin],
-          data: {
-            ...result,
-            items:
-              action.result &&
-              action.result.items &&
-              action.result.items.map((item) => ({
-                ...item,
-                url: item['@id'].replace(config.settings.apiPath, ''),
-              })),
-          },
-          upload: {
-            loading: false,
-            loaded: true,
-            error: null,
-          },
-        },
-      };
-    case `${UPLOAD_CONTENT}_FAIL`:
-      return {
-        ...state,
-        [origin]: {
-          ...state[origin],
-          data: null,
-          upload: {
-            loading: false,
-            loaded: false,
-            error: action.error,
-          },
-        },
-      };
-    default:
-      return state;
-  }
-}

package/packages/volto-slate/src/reducers/index.js

@@ -1,3 +0,0 @@
-export { default as slate_block_selections } from './selection';
-export { default as upload_content } from './content';
-export { default as slate_plugins } from './plugins';

package/packages/volto-slate/src/reducers/plugins.js

@@ -1,17 +0,0 @@
-const initialState = {};
-
-export default function slate_plugins(state = initialState, action = {}) {
-  const { type, pluginId, ...rest } = action;
-  switch (type) {
-    case 'SLATE_PLUGINS':
-      return {
-        ...state,
-        [pluginId]: {
-          ...state[pluginId],
-          ...rest,
-        },
-      };
-    default:
-      return state;
-  }
-}

package/packages/volto-slate/src/reducers/selection.js

@@ -1,16 +0,0 @@
-const initialState = {};
-
-export default function slate_block_selections(
-  state = initialState,
-  action = {},
-) {
-  switch (action.type) {
-    case 'SAVE_SLATE_BLOCK_SELECTION':
-      return {
-        ...state,
-        [action.blockid]: action.selection,
-      };
-    default:
-      return state;
-  }
-}

package/packages/volto-slate/src/utils/blocks.js

@@ -1,375 +0,0 @@
-/* eslint no-console: ["error", { allow: ["error", "warn"] }] */
-import { Editor, Transforms, Text } from 'slate'; // Range, RangeRef
-import config from '@plone/volto/registry';
-import {
-  getBlocksFieldname,
-  getBlocksLayoutFieldname,
-} from '@plone/volto/helpers';
-import _ from 'lodash';
-import { makeEditor } from './editor';
-
-// case sensitive; first in an inner array is the default and preffered format
-// in that array of formats
-const formatAliases = [
-  ['strong', 'b'],
-  ['em', 'i'],
-  ['del', 's'],
-];
-
-/**
- * Excerpt from Slate documentation, kept here for posterity:
- * See https://docs.slatejs.org/concepts/11-normalizing#built-in-constraints
-
-## Built-in Constraints
-
-Slate editors come with a few built-in constraints out of the box. These
-constraints are there to make working with content much more predictable than
-standard contenteditable. All of the built-in logic in Slate depends on these
-constraints, so unfortunately you cannot omit them. They are...
-
-- All Element nodes must contain at least one Text descendant. If an element node
-does not contain any children, an empty text node will be added as its only
-child. This constraint exists to ensure that the selection's anchor and focus
-points (which rely on referencing text nodes) can always be placed inside any
-node. With this, empty elements (or void elements) wouldn't be selectable.
-
-- Two adjacent texts with the same custom properties will be merged. If two
-adjacent text nodes have the same formatting, they're merged into a single text
-node with a combined text string of the two. This exists to prevent the text
-nodes from only ever expanding in count in the document, since both adding and
-removing formatting results in splitting text nodes.
-
-- Block nodes can only contain other blocks, or inline and text nodes. For
-example, a paragraph block cannot have another paragraph block element and
-a link inline element as children at the same time. The type of children
-allowed is determined by the first child, and any other non-conforming children
-are removed. This ensures that common richtext behaviors like "splitting
-a block in two" function consistently.
-
-- Inline nodes cannot be the first or last child of a parent block, nor can it
-be next to another inline node in the children array. If this is the case, an
-empty text node will be added to correct this to be in compliance with the
-constraint.
-
-- The top-level editor node can only contain block nodes. If any of the
-top-level children are inline or text nodes they will be removed. This ensures
-that there are always block nodes in the editor so that behaviors like
-"splitting a block in two" work as expected.
-
-- These default constraints are all mandated because they make working with
-Slate documents much more predictable.
-
-Although these constraints are the best we've come up with now, we're always
-looking for ways to have Slate's built-in constraints be less constraining if
-possible—as long as it keeps standard behaviors easy to reason about. If you
-come up with a way to reduce or remove a built-in constraint with a different
-approach, we're all ears!
- *
- */
-
-export const normalizeExternalData = (editor, nodes) => {
-  let fakeEditor = makeEditor({ extensions: editor._installedPlugins });
-  fakeEditor.children = nodes;
-  // put all the non-blocks (e.g. images which are inline Elements) inside p-s
-  Editor.withoutNormalizing(fakeEditor, () => {
-    //for htmlSlateWidget compatibility
-    if (nodes && !Editor.isBlock(fakeEditor, nodes[0]))
-      Transforms.wrapNodes(
-        fakeEditor,
-        { type: 'p' },
-        {
-          at: [],
-          match: (node, path) =>
-            (!Editor.isEditor(node) && !Editor.isBlock(fakeEditor, node)) ||
-            fakeEditor.isInline(node),
-          mode: 'highest',
-        },
-      );
-  });
-
-  Editor.normalize(fakeEditor, { force: true });
-
-  return fakeEditor.children;
-};
-
-/**
- * Is it text? Is it whitespace (space, newlines, tabs) ?
- *
- */
-export const isWhitespace = (c) => {
-  return (
-    typeof c === 'string' &&
-    c.replace(/\s/g, '').replace(/\t/g, '').replace(/\n/g, '').length === 0
-  );
-};
-
-export function createDefaultBlock(children) {
-  return {
-    type: config.settings.slate.defaultBlockType,
-    children: children || [{ text: '' }],
-  };
-}
-
-export function createBlock(type, children) {
-  return {
-    type,
-    children: children || [{ text: '' }],
-  };
-}
-
-export function createEmptyParagraph() {
-  // TODO: rename to createEmptyBlock
-  return {
-    type: config.settings.slate.defaultBlockType,
-    children: [{ text: '' }],
-  };
-}
-
-export function createParagraph(text) {
-  return {
-    type: config.settings.slate.defaultBlockType,
-    children: [{ text }],
-  };
-}
-
-export const isSingleBlockTypeActive = (editor, format) => {
-  const [match] = Editor.nodes(editor, {
-    match: (n) => n.type === format,
-  });
-
-  return !!match;
-};
-
-export const isBlockActive = (editor, format) => {
-  const aliasList = _.find(formatAliases, (x) => _.includes(x, format));
-
-  if (aliasList) {
-    const aliasFound = _.some(aliasList, (y) => {
-      return isSingleBlockTypeActive(editor, y);
-    });
-
-    if (aliasFound) {
-      return true;
-    }
-  }
-
-  return isSingleBlockTypeActive(editor, format);
-};
-
-export const getBlockTypeContextData = (editor, format) => {
-  let isActive, defaultFormat, matcher;
-
-  const aliasList = _.find(formatAliases, (x) => _.includes(x, format));
-
-  if (aliasList) {
-    const aliasFound = _.some(aliasList, (y) => {
-      return isSingleBlockTypeActive(editor, y);
-    });
-
-    if (aliasFound) {
-      isActive = true;
-      defaultFormat = _.first(aliasList);
-      matcher = (n) => _.includes(aliasList, n.type);
-
-      return { isActive, defaultFormat, matcher };
-    }
-  }
-
-  isActive = isBlockActive(editor, format);
-  defaultFormat = format;
-  matcher = (n) => n.type === format;
-
-  return { isActive, defaultFormat, matcher };
-};
-
-export const toggleInlineFormat = (editor, format) => {
-  const { isActive, defaultFormat, matcher } = getBlockTypeContextData(
-    editor,
-    format,
-  );
-
-  if (isActive) {
-    const rangeRef = Editor.rangeRef(editor, editor.selection);
-
-    Transforms.unwrapNodes(editor, {
-      match: matcher,
-      split: false,
-    });
-
-    const newSel = JSON.parse(JSON.stringify(rangeRef.current));
-
-    Transforms.select(editor, newSel);
-    editor.setSavedSelection(newSel);
-    // editor.savedSelection = newSel;
-    return;
-  }
-
-  const exclusiveElements = config.settings.slate.exclusiveElements;
-  const matchedElements = exclusiveTags(exclusiveElements, format);
-  let alreadyOneIsActive =
-    !!matchedElements &&
-    (matchedElements.indexOf(format) === 0
-      ? isBlockActive(editor, matchedElements[1])
-      : isBlockActive(editor, matchedElements[0]));
-
-  if (alreadyOneIsActive) {
-    Transforms.unwrapNodes(editor, {
-      match: (n) => matchedElements.includes(n.type),
-      split: false,
-    });
-
-    const block = { type: format, children: [] };
-    Transforms.wrapNodes(editor, block, { split: true });
-    return;
-  }
-
-  // `children` property is added automatically as an empty array then
-  // normalized
-  const block = { type: defaultFormat };
-  Transforms.wrapNodes(editor, block, { split: true });
-};
-
-const exclusiveTags = (exclusiveElements, format) => {
-  let elements = null;
-  for (const item of exclusiveElements) {
-    if (item.includes(format)) {
-      elements = item;
-      break;
-    }
-  }
-
-  return elements;
-};
-
-export const toggleBlock = (editor, format, allowedChildren) => {
-  // 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 { listTypes } = slate;
-
-  const isListItem = isBlockActive(editor, slate.listItemType);
-  const isActive = isBlockActive(editor, format);
-  const wantsList = listTypes.includes(format);
-
-  if (isListItem && !wantsList) {
-    toggleFormatAsListItem(editor, format);
-  } else if (isListItem && wantsList && !isActive) {
-    switchListType(editor, format);
-  } else if (!isListItem && wantsList) {
-    changeBlockToList(editor, format);
-  } else if (!isListItem && !wantsList) {
-    toggleFormat(editor, format, allowedChildren);
-  } else if (isListItem && wantsList && isActive) {
-    clearFormatting(editor);
-  } else {
-    console.warn('toggleBlock case not covered, please examine:', {
-      wantsList,
-      isActive,
-      isListItem,
-    });
-  }
-};
-
-/*
- * Applies a block format to a list item. Will split the list
- */
-export const toggleFormatAsListItem = (editor, format) => {
-  Transforms.setNodes(editor, {
-    type: format,
-  });
-
-  Editor.normalize(editor);
-};
-
-/*
- * Toggles between list types by exploding the block
- */
-export const switchListType = (editor, format) => {
-  const { slate } = config.settings;
-  Transforms.unwrapNodes(editor, {
-    match: (n) => slate.listTypes.includes(n.type),
-    split: true,
-  });
-  const block = { type: format, children: [] };
-  Transforms.wrapNodes(editor, block);
-};
-
-export const changeBlockToList = (editor, format) => {
-  const { slate } = config.settings;
-  const [match] = Editor.nodes(editor, {
-    match: (n) => n.type === slate.listItemType,
-  });
-
-  if (!match) {
-    Transforms.setNodes(editor, {
-      type: slate.listItemType,
-      // id: nanoid(8),
-    });
-  }
-
-  // `children` property is added automatically as an empty array then
-  // normalized
-  const block = { type: format };
-  Transforms.wrapNodes(editor, block);
-};
-
-export const toggleFormat = (editor, format, allowedChildren) => {
-  const { slate } = config.settings;
-  const isActive = isBlockActive(editor, format);
-  const type = isActive ? slate.defaultBlockType : format;
-  Transforms.setNodes(editor, {
-    type,
-  });
-  allowedChildren?.length &&
-    Transforms.unwrapNodes(editor, {
-      mode: 'all',
-      at: [0],
-      match: (n, path) => {
-        const isMatch =
-          path.length > 1 && // we don't deal with the parent nodes
-          !(Text.isText(n) || allowedChildren.includes(n?.type));
-        return isMatch;
-      },
-    });
-};
-
-/**
- * @param {object} properties A prop received by the View component
- *  which is read by the `getBlocksFieldname` and
- * `getBlocksLayoutFieldname` Volto helpers to produce the return value.
- * @returns {Array} All the blocks data taken from the Volto form.
- */
-export const getAllBlocks = (properties, blocks) => {
-  const blocksFieldName = getBlocksFieldname(properties);
-  const blocksLayoutFieldname = getBlocksLayoutFieldname(properties);
-
-  for (const n of properties?.[blocksLayoutFieldname]?.items || []) {
-    const block = properties[blocksFieldName][n];
-    // TODO Make this configurable via block config getBlocks
-    if (
-      block?.data?.[blocksLayoutFieldname] &&
-      block?.data?.[blocksFieldName]
-    ) {
-      getAllBlocks(block.data, blocks);
-    } else if (block?.[blocksLayoutFieldname] && block?.[blocksFieldName]) {
-      getAllBlocks(block, blocks);
-    }
-    blocks.push({
-      id: n,
-      ...block,
-    });
-  }
-  return blocks;
-};
-
-export const clearFormatting = (editor) => {
-  const { slate } = config.settings;
-  Transforms.setNodes(editor, {
-    type: slate.defaultBlockType,
-  });
-  Transforms.unwrapNodes(editor, {
-    match: (n) => n.type && n.type !== slate.defaultBlockType,
-    mode: 'all',
-    split: false,
-  });
-};

package/packages/volto-slate/src/utils/blocks.test.js

@@ -1,138 +0,0 @@
-import { getAllBlocks } from './blocks';
-
-describe('Blocks utils', () => {
-  describe('Get all blocks', () => {
-    it('Basic empty test', () => {
-      const metadata = {};
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([]);
-    });
-
-    it('Empty blocks', () => {
-      const metadata = {
-        blocks: {},
-        blocks_layout: {},
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([]);
-    });
-
-    it('Empty blocks with items', () => {
-      const metadata = {
-        blocks: {},
-        blocks_layout: { items: [] },
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([]);
-    });
-
-    it('One level of blocks', () => {
-      const metadata = {
-        blocks: { a: {} },
-        blocks_layout: { items: ['a'] },
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([{ id: 'a' }]);
-    });
-
-    it('Two level of blocks w/o data', () => {
-      const metadata = {
-        blocks: {
-          a: {
-            blocks: {
-              b: { type: 'text' },
-            },
-            blocks_layout: {
-              items: ['b'],
-            },
-          },
-        },
-        blocks_layout: {
-          items: ['a'],
-        },
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([
-        { id: 'b', ...metadata.blocks.a.blocks.b },
-        { id: 'a', ...metadata.blocks.a },
-      ]);
-    });
-
-    it('Two level of blocks w/ data', () => {
-      const metadata = {
-        blocks: {
-          a: {
-            data: {
-              blocks: {
-                b: { type: 'text' },
-              },
-              blocks_layout: {
-                items: ['b'],
-              },
-            },
-          },
-        },
-        blocks_layout: {
-          items: ['a'],
-        },
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([
-        { id: 'b', ...metadata.blocks.a.data.blocks.b },
-        { id: 'a', ...metadata.blocks.a },
-      ]);
-    });
-
-    it('Three level of blocks', () => {
-      const metadata = {
-        blocks: {
-          a: {
-            data: {
-              blocks: {
-                a1: { type: 'text' },
-                a2: {
-                  type: 'text',
-                  blocks: {
-                    a21: { type: 'image' },
-                    a22: { type: 'image' },
-                  },
-                  blocks_layout: {
-                    items: ['a21', 'a22'],
-                  },
-                },
-              },
-              blocks_layout: {
-                items: ['a1', 'a2'],
-              },
-            },
-          },
-          b: {
-            data: {
-              blocks: {
-                b1: { type: 'text' },
-                b2: { type: 'text' },
-              },
-              blocks_layout: {
-                items: ['b1', 'b2'],
-              },
-            },
-          },
-        },
-        blocks_layout: {
-          items: ['a', 'b'],
-        },
-      };
-      const blocks = getAllBlocks(metadata, []);
-      expect(blocks).toEqual([
-        { id: 'a1', ...metadata.blocks.a.data.blocks.a1 },
-        { id: 'a21', ...metadata.blocks.a.data.blocks.a2.blocks.a21 },
-        { id: 'a22', ...metadata.blocks.a.data.blocks.a2.blocks.a22 },
-        { id: 'a2', ...metadata.blocks.a.data.blocks.a2 },
-        { id: 'a', ...metadata.blocks.a },
-        { id: 'b1', ...metadata.blocks.b.data.blocks.b1 },
-        { id: 'b2', ...metadata.blocks.b.data.blocks.b2 },
-        { id: 'b', ...metadata.blocks.b },
-      ]);
-    });
-  });
-});