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

package/packages/volto-slate/src/blocks/Text/TextBlockEdit.jsx

@@ -1,38 +0,0 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-
-import {
-  uploadContent,
-  saveSlateBlockSelection,
-} from '@plone/volto-slate/actions';
-
-import DefaultTextBlockEditor from './DefaultTextBlockEditor';
-import DetachedTextBlockEditor from './DetachedTextBlockEditor';
-
-import './css/editor.css';
-
-const TextBlockEdit = (props) => {
-  return props.detached ? ( // || props.disableNewBlocks
-    <DetachedTextBlockEditor {...props} />
-  ) : (
-    <DefaultTextBlockEditor {...props} />
-  );
-};
-
-export default connect(
-  (state, props) => {
-    const blockId = props.block;
-    return {
-      defaultSelection: blockId
-        ? state.slate_block_selections?.[blockId]
-        : null,
-      uploadRequest: state.upload_content?.[props.block]?.upload || {},
-      uploadedContent: state.upload_content?.[props.block]?.data || {},
-    };
-  },
-  {
-    uploadContent,
-    saveSlateBlockSelection, // needed as editor blockProps
-  },
-)(TextBlockEdit);

package/packages/volto-slate/src/blocks/Text/TextBlockEdit.test.js

@@ -1,107 +0,0 @@
-import React from 'react';
-import configureStore from 'redux-mock-store';
-import { Provider } from 'react-intl-redux';
-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();
-
-window.getSelection = () => null;
-
-global.__SERVER__ = true; // eslint-disable-line no-underscore-dangle
-global.__CLIENT__ = false; // eslint-disable-line no-underscore-dangle
-
-beforeAll(() => {
-  config.widgets = {
-    id: {
-      default: () => <div />,
-    },
-    type: {
-      boolean: () => <div />,
-    },
-  };
-
-  config.settings = {
-    supportedLanguages: [],
-    slate: {
-      elements: {
-        default: ({ attributes, children }) => (
-          <p {...attributes}>{children}</p>
-        ),
-      },
-      leafs: {},
-      persistentHelpers: [],
-      contextToolbarButtons: [],
-      textblockExtensions: [],
-      extensions: [],
-      elementToolbarButtons: {},
-    },
-  };
-  config.blocks.blocksConfig.slate = {
-    id: 'slate',
-    title: 'Slate',
-    group: 'text',
-    edit: TextBlockEdit,
-    restricted: false,
-    mostUsed: false,
-    blockHasOwnFocusManagement: true,
-    sidebarTab: 1,
-    security: {
-      addPermission: [],
-      view: [],
-    },
-    blockHasValue: (data) => {
-      return !!data.plaintext;
-    },
-  };
-});
-
-describe('TextBlockEdit', () => {
-  it('renders w/o errors', async () => {
-    const store = mockStore({
-      intl: {
-        locale: 'en',
-        messages: {},
-      },
-    });
-
-    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}
-        />
-      </Provider>,
-    );
-
-    expect(asFragment()).toMatchSnapshot();
-  });
-});

package/packages/volto-slate/src/blocks/Text/TextBlockSchema.js

@@ -1,54 +0,0 @@
-const Schema = {
-  title: 'Text block settings',
-  fieldsets: [
-    {
-      id: 'default',
-      title: 'Default',
-      fields: [
-        'placeholder',
-        'instructions',
-        'required',
-        'fixed',
-        'disableNewBlocks',
-        'readOnly',
-      ],
-    },
-  ],
-  properties: {
-    placeholder: {
-      title: 'Helper text',
-      description:
-        'A short hint that describes the expected value within this block',
-      type: 'string',
-    },
-    instructions: {
-      title: 'Instructions',
-      description: 'Detailed expected value within this block',
-      type: 'string',
-      widget: 'richtext',
-    },
-    required: {
-      title: 'Required',
-      description: "Don't allow deletion of this block",
-      type: 'boolean',
-    },
-    fixed: {
-      title: 'Fixed position',
-      description: 'Disable drag & drop on this block',
-      type: 'boolean',
-    },
-    disableNewBlocks: {
-      title: 'Disable new blocks',
-      description: 'Disable creation of new blocks after this block',
-      type: 'boolean',
-    },
-    readOnly: {
-      title: 'Read-only',
-      description: 'Disable editing on this block',
-      type: 'boolean',
-    },
-  },
-  required: [],
-};
-
-export default Schema;

package/packages/volto-slate/src/blocks/Text/TextBlockView.jsx

@@ -1,31 +0,0 @@
-import {
-  serializeNodes,
-  serializeNodesToText,
-} from '@plone/volto-slate/editor/render';
-import config from '@plone/volto/registry';
-import { isEqual } from 'lodash';
-import Slugger from 'github-slugger';
-import { normalizeString } from '@plone/volto/helpers';
-
-const TextBlockView = (props) => {
-  const { id, data, styling = {} } = props;
-  const { value, override_toc } = data;
-  const metadata = props.metadata || props.properties;
-  const { topLevelTargetElements } = config.settings.slate;
-
-  const getAttributes = (node, path) => {
-    const res = { ...styling };
-    if (node.type && isEqual(path, [0])) {
-      if (topLevelTargetElements.includes(node.type) || override_toc) {
-        const text = serializeNodesToText(node?.children || []);
-        const slug = Slugger.slug(normalizeString(text));
-        res.id = slug || id;
-      }
-    }
-    return res;
-  };
-
-  return serializeNodes(value, getAttributes, { metadata: metadata });
-};
-
-export default TextBlockView;

package/packages/volto-slate/src/blocks/Text/css/editor.css

@@ -1,18 +0,0 @@
-.drop-indicator {
-  width: 100%;
-  min-height: 6rem;
-}
-
-.drop-indicator .ui.message {
-  /* padding: 0px; */
-}
-
-.drop-indicator .ui.message center {
-  height: 100%;
-  /* margin: 0 auto; */
-}
-
-.drop-indicator .ui.message center img {
-  width: 100%;
-  height: 100%;
-}

package/packages/volto-slate/src/blocks/Text/extensions/Readme.md

@@ -1,49 +0,0 @@
-```
-// Overrideable core actions.
-// See https://github.com/ianstormtaylor/slate/blob/master/packages/slate/src/interfaces/editor.ts
-
-apply: (operation: Operation) => void
-
-// Add a custom property to the leaf text nodes in the current selection.
-// If the selection is currently collapsed, the marks will be added to the
-// `editor.marks` property instead, and applied when text is inserted next.
-addMark: (key: string, value: any) => void
-
-removeMark: (key: string) => void
-
-// Delete content in the editor backward from the current selection.
-deleteBackward: (unit: 'character' | 'word' | 'line' | 'block') => void
-deleteForward: (unit: 'character' | 'word' | 'line' | 'block') => void
-
-// Insert a fragment at the current selection.
-insertFragment: (fragment: Node[]) => void
-
-// Delete the content in the current selection.
-deleteFragment: () => void
-
-getFragment: () => Descendant[]
-
-// Insert a block break at the current selection.
-// If the selection is currently expanded, it will be deleted first.
-insertBreak: () => void
-
-// Insert a node at the current selection.
-// If the selection is currently expanded, it will be deleted first.
-insertNode: (node: Node) => void
-
-// Insert text at the current selection.
-// If the selection is currently expanded, it will be deleted first.
-insertText: (text: string) => void
-
-transform:
-  op types:
-    insert_node
-    insert_text
-    merge_node
-    move_node
-    remove_node
-    remove_text
-    set_node
-    set_selection
-    split_node
-```

package/packages/volto-slate/src/blocks/Text/extensions/breakList.js

@@ -1,100 +0,0 @@
-import { Editor, Range, Transforms } from 'slate';
-import config from '@plone/volto/registry';
-import {
-  isCursorAtBlockEnd,
-  splitEditorInTwoFragments,
-  setEditorContent,
-  createAndSelectNewBlockAfter,
-  getCurrentListItem,
-  createEmptyParagraph,
-} from '@plone/volto-slate/utils';
-
-/**
- * Handles `Enter` key on empty and non-empty list items.
- *
- * @param {Editor} editor The editor which should be modified by this extension
- * with a new version of the `insertBreak` method of the Slate editor.
- *
- * @description If the selection does not exist or is expanded, handle with the
- * default behavior. If the selection is inside a LI and it starts at a non-0
- * offset, split the LI. If the selection anchor is not in a LI or it is not at
- * offset 0, handle with the default behavior. Else delete the line before the
- * text cursor and then split the editor in two fragments, and convert them to
- * separate Slate Text blocks, based on the selection.
- */
-export const breakList = (editor) => {
-  const { insertBreak } = editor;
-
-  editor.insertBreak = () => {
-    // If the selection does not exist or is expanded, handle with the default
-    // behavior.
-    if (!(editor.selection && Range.isCollapsed(editor.selection))) {
-      insertBreak();
-      return false;
-    }
-
-    const { slate } = config.settings;
-    const { anchor } = editor.selection;
-
-    const ref = Editor.rangeRef(editor, editor.selection, {
-      affinity: 'inward',
-    });
-
-    // If the selection is inside a LI and it starts at a non-0 offset, split
-    // the LI. (if one of the parents is a list item, break that list item)
-    const [listItem, listItemPath] = getCurrentListItem(editor);
-    if (listItem) {
-      // if there is text in the selection
-      if (Editor.string(editor, listItemPath)) {
-        Transforms.splitNodes(editor, {
-          at: editor.selection,
-          match: (node) => node.type === slate.listItemType,
-          always: true, // in case cursor is at end of line
-        });
-
-        return true;
-      }
-    }
-
-    // If the selection anchor is not in a LI or it is not at offset 0, handle
-    // with the default behavior.
-    const [parent] = Editor.parent(editor, anchor.path); // , parentPath
-
-    if (parent.type !== slate.listItemType || anchor.offset > 0) {
-      insertBreak();
-      return; // applies default behaviour, as defined in insertBreak.js extension
-    }
-
-    if (parent) {
-      const blockProps = editor.getBlockProps();
-      const { data } = blockProps;
-      // Don't add new block if not allowed
-      if (data?.disableNewBlocks) {
-        return insertBreak();
-      }
-    }
-
-    Editor.deleteBackward(editor, { unit: 'line' });
-    // also account for empty nodes [{text: ''}]
-    if (Editor.isEmpty(editor, parent)) {
-      Transforms.removeNodes(editor, { at: ref.current });
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
-      return true;
-    }
-
-    Transforms.removeNodes(editor, { at: ref.current });
-
-    if (isCursorAtBlockEnd(editor)) {
-      createAndSelectNewBlockAfter(editor, [createEmptyParagraph()]);
-      return true;
-    }
-
-    const [top, bottom] = splitEditorInTwoFragments(editor, ref.current);
-    setEditorContent(editor, top);
-    createAndSelectNewBlockAfter(editor, bottom);
-
-    return true;
-  };
-
-  return editor;
-};

package/packages/volto-slate/src/blocks/Text/extensions/index.js

@@ -1,6 +0,0 @@
-export * from './insertBreak';
-export * from './withDeserializers';
-export * from './breakList';
-export * from './withLists';
-export * from './isSelected';
-export * from './normalizeExternalData';

package/packages/volto-slate/src/blocks/Text/extensions/insertBreak.js

@@ -1,57 +0,0 @@
-import ReactDOM from 'react-dom';
-import { Editor } from 'slate';
-// import { ReactEditor } from 'slate-react';
-import {
-  splitEditorInTwoFragments,
-  setEditorContent,
-  createAndSelectNewBlockAfter,
-  rangeIsInSplittableNode,
-  // deconstructToVoltoBlocks,
-} from '@plone/volto-slate/utils';
-
-/**
- * @param {Editor} editor The Slate editor object to extend.
- * @description If the selection exists and touches with one of its edges a
- * closest-to-root `Text` node (`Path` with length `2`)
- *
- *   - if the parent node of the selection exists, split editor into two
- *     fragments put inside separate Volto Slate Text blocks;
- *   - if the parent node of the selection does not exist, do nothing;
- *
- * and if the selection does not exist or does not touch with one of its edges a
- * closest-to-root `Text` node, call the default behavior.
- */
-export const withSplitBlocksOnBreak = (editor) => {
-  const { insertBreak } = editor;
-
-  editor.insertBreak = () => {
-    // if selection is expanded, delete it
-    if (rangeIsInSplittableNode(editor, editor.selection)) {
-      const block = Editor.parent(editor, editor.selection);
-
-      if (block) {
-        const blockProps = editor.getBlockProps();
-        const { data } = blockProps;
-
-        // Don't add new block if not allowed
-        if (data?.disableNewBlocks) {
-          return insertBreak();
-        }
-
-        // TODO: another method would be to simply insert a break and call
-        // deconstructToVoltoBlocks
-        ReactDOM.unstable_batchedUpdates(() => {
-          const [top, bottom] = splitEditorInTwoFragments(editor);
-          setEditorContent(editor, top);
-          // ReactEditor.blur(editor);
-          createAndSelectNewBlockAfter(editor, bottom);
-        });
-      }
-      return;
-    }
-
-    return insertBreak();
-  };
-
-  return editor;
-};

package/packages/volto-slate/src/blocks/Text/extensions/isSelected.js

@@ -1,7 +0,0 @@
-export const withIsSelected = (editor) => {
-  editor.isSelected = () => {
-    const blockProps = editor.getBlockProps();
-    return blockProps.selected;
-  };
-  return editor;
-};

package/packages/volto-slate/src/blocks/Text/extensions/normalizeExternalData.js

@@ -1,7 +0,0 @@
-export function normalizeExternalData(editor) {
-  editor.normalizeExternalData = (fragment) => {
-    return fragment; // don't normalize in text block
-  };
-
-  return editor;
-}

package/packages/volto-slate/src/blocks/Text/extensions/withDeserializers.js

@@ -1,87 +0,0 @@
-import isUrl from 'is-url';
-import imageExtensions from 'image-extensions';
-import { blockTagDeserializer } from '@plone/volto-slate/editor/deserialize';
-import { getBaseUrl, validateFileUploadSize } from '@plone/volto/helpers';
-import { v4 as uuid } from 'uuid';
-import { Transforms } from 'slate';
-
-import { IMAGE } from '@plone/volto-slate/constants';
-
-export const insertImage = (editor, url, { typeImg = IMAGE } = {}) => {
-  const image = { type: typeImg, url, children: [{ text: '' }] };
-  Transforms.insertNodes(editor, image);
-};
-
-export const isImageUrl = (url) => {
-  if (!isUrl(url)) return false;
-
-  const ext = new URL(url).pathname.split('.').pop();
-
-  return imageExtensions.includes(ext);
-};
-
-export const onImageLoad = (editor, reader) => () => {
-  const data = reader.result;
-
-  // if (url) insertImage(editor, url);
-  const fields = data.match(/^data:(.*);(.*),(.*)$/);
-  const blockProps = editor.getBlockProps();
-  const { block, uploadContent, pathname } = blockProps;
-
-  // TODO: we need a way to get the uploaded image URL
-  // This would be easier if we would have block transformers-based image
-  // blocks
-  const url = getBaseUrl(pathname);
-  const uploadId = uuid();
-  const uploadFileName = `clipboard-${uploadId}`;
-  const uploadTitle = `Clipboard image`;
-  const content = {
-    '@type': 'Image',
-    title: uploadTitle,
-    image: {
-      data: fields[3],
-      encoding: fields[2],
-      'content-type': fields[1],
-      filename: uploadFileName,
-    },
-  };
-
-  uploadContent(url, content, block).then((data) => {
-    const dlUrl = data.image.download;
-    insertImage(editor, dlUrl);
-  });
-};
-
-export const withDeserializers = (editor) => {
-  editor.htmlTagsToSlate = {
-    ...editor.htmlTagsToSlate,
-
-    // We don't want H1 tags when pasting, we rewrite them as H2
-    H1: blockTagDeserializer('h2'),
-  };
-
-  const handleFiles = editor.dataTransferHandlers?.files || (() => true);
-
-  editor.dataTransferHandlers = {
-    ...editor.dataTransferHandlers,
-    files: (files) => {
-      const unprocessed = [];
-      const { intl } = editor.getBlockProps();
-      for (const file of files) {
-        if (!validateFileUploadSize(file, intl.formatMessage)) return;
-        const reader = new FileReader();
-        const [mime] = file.type.split('/');
-        if (mime === 'image') {
-          reader.addEventListener('load', onImageLoad(editor, reader));
-          reader.readAsDataURL(file);
-        } else {
-          unprocessed.push(file);
-        }
-      }
-
-      return handleFiles(unprocessed);
-    },
-  };
-
-  return editor;
-};

package/packages/volto-slate/src/blocks/Text/extensions/withLists.js

@@ -1,5 +0,0 @@
-export const withLists = (editor) => {
-  // The code that used to be here was moved to the basic SlateEditor normalizeNode
-  // In the future, custom behavior for normalizeNode should be added here
-  return editor;
-};