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

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

@@ -1,304 +0,0 @@
-import ReactDOM from 'react-dom';
-import React from 'react';
-import { readAsDataURL } from 'promise-file-reader';
-import Dropzone from 'react-dropzone';
-import { defineMessages, useIntl } from 'react-intl';
-import { useInView } from 'react-intersection-observer';
-import { Dimmer, Loader, Message, Segment } from 'semantic-ui-react';
-
-import {
-  flattenToAppURL,
-  getBaseUrl,
-  validateFileUploadSize,
-} from '@plone/volto/helpers';
-import config from '@plone/volto/registry';
-import {
-  BlockDataForm,
-  SidebarPortal,
-  BlockChooserButton,
-} from '@plone/volto/components';
-
-import { SlateEditor } from '@plone/volto-slate/editor';
-import { serializeNodesToText } from '@plone/volto-slate/editor/render';
-import {
-  createImageBlock,
-  parseDefaultSelection,
-  deconstructToVoltoBlocks,
-} from '@plone/volto-slate/utils';
-import { Transforms } from 'slate';
-
-import PersistentSlashMenu from './SlashMenu';
-import ShortcutListing from './ShortcutListing';
-import MarkdownIntroduction from './MarkdownIntroduction';
-import { handleKey } from './keyboard';
-import TextBlockSchema from './schema';
-
-import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
-
-import './css/editor.css';
-
-// TODO: refactor dropzone to separate component wrapper
-
-const messages = defineMessages({
-  text: {
-    id: 'Type text…',
-    defaultMessage: 'Type text…',
-  },
-});
-
-const DEBUG = false;
-
-export const DefaultTextBlockEditor = (props) => {
-  const {
-    block,
-    blocksConfig,
-    data,
-    detached = false,
-    index,
-    onChangeBlock,
-    onInsertBlock,
-    onMutateBlock,
-    onSelectBlock,
-    pathname,
-    properties,
-    selected,
-    uploadRequest,
-    uploadContent,
-    uploadedContent,
-    defaultSelection,
-    saveSlateBlockSelection,
-    allowedBlocks,
-    formTitle,
-    formDescription,
-  } = props;
-
-  const { slate } = config.settings;
-  const { textblockExtensions } = slate;
-  const { value } = data;
-  const intl = useIntl();
-
-  // const [addNewBlockOpened, setAddNewBlockOpened] = React.useState();
-  const [showDropzone, setShowDropzone] = React.useState(false);
-  const [uploading, setUploading] = React.useState(false);
-  const [newImageId, setNewImageId] = React.useState(null);
-
-  const prevReq = React.useRef(null);
-
-  const withBlockProperties = React.useCallback(
-    (editor) => {
-      editor.getBlockProps = () => props;
-      return editor;
-    },
-    [props],
-  );
-
-  const slateSettings = React.useMemo(
-    () => ({
-      ...config.settings.slate,
-      persistentHelpers: [
-        ...config.settings.slate.persistentHelpers,
-        PersistentSlashMenu,
-      ],
-    }),
-    [],
-  );
-
-  const onDrop = React.useCallback(
-    (files) => {
-      // TODO: need to fix setUploading, treat uploading indicator
-      // inteligently, show progress report on uploading files
-      setUploading(true);
-      files.forEach((file) => {
-        const [mime] = file.type.split('/');
-        if (mime !== 'image') return;
-        if (!validateFileUploadSize(file, intl.formatMessage)) return;
-
-        readAsDataURL(file).then((data) => {
-          const fields = data.match(/^data:(.*);(.*),(.*)$/);
-          uploadContent(
-            getBaseUrl(pathname),
-            {
-              '@type': 'Image',
-              title: file.name,
-              image: {
-                data: fields[3],
-                encoding: fields[2],
-                'content-type': fields[1],
-                filename: file.name,
-              },
-            },
-            block,
-          );
-        });
-      });
-      setShowDropzone(false);
-    },
-    [pathname, uploadContent, block, intl.formatMessage],
-  );
-
-  const { loaded, loading } = uploadRequest;
-  const imageId = uploadedContent['@id'];
-  const prevLoaded = prevReq.current;
-
-  React.useEffect(() => {
-    if (loaded && !loading && !prevLoaded && newImageId !== imageId) {
-      const url = flattenToAppURL(imageId);
-      setNewImageId(imageId);
-
-      createImageBlock(url, index, props);
-    }
-    prevReq.current = loaded;
-  }, [props, loaded, loading, prevLoaded, imageId, newImageId, index]);
-
-  const handleUpdate = React.useCallback(
-    (editor) => {
-      // defaultSelection is used for things such as "restoring" the selection
-      // when joining blocks or moving the selection to block start on block
-      // split
-      if (defaultSelection) {
-        const selection = parseDefaultSelection(editor, defaultSelection);
-        if (selection) {
-          Transforms.select(editor, selection);
-          saveSlateBlockSelection(block, null);
-        }
-      }
-    },
-    [defaultSelection, block, saveSlateBlockSelection],
-  );
-
-  const onEditorChange = (value, editor) => {
-    ReactDOM.unstable_batchedUpdates(() => {
-      onChangeBlock(block, {
-        ...data,
-        value,
-        plaintext: serializeNodesToText(value || []),
-        // TODO: also add html serialized value
-      });
-      deconstructToVoltoBlocks(editor);
-    });
-  };
-
-  // Get editing instructions from block settings or props
-  let instructions = data?.instructions?.data || data?.instructions;
-  if (!instructions || instructions === '<p><br/></p>') {
-    instructions = formDescription;
-  }
-
-  const placeholder =
-    data.placeholder || formTitle || intl.formatMessage(messages.text);
-  const schema = TextBlockSchema(data);
-
-  const disableNewBlocks = data?.disableNewBlocks || detached;
-  const { ref, inView } = useInView({
-    threshold: 0,
-    rootMargin: '0px 0px 200px 0px',
-  });
-
-  const handleFocus = React.useCallback(() => {
-    if (!selected) {
-      onSelectBlock(block);
-    }
-  }, [onSelectBlock, selected, block]);
-
-  return (
-    <div className="text-slate-editor-inner" ref={ref}>
-      <>
-        <Dropzone
-          disableClick
-          onDrop={onDrop}
-          className="dropzone"
-          onDragOver={() => setShowDropzone(true)}
-          onDragLeave={() => setShowDropzone(false)}
-        >
-          {({ getRootProps, getInputProps }) => {
-            return showDropzone ? (
-              <div className="drop-indicator">
-                {uploading ? (
-                  <Dimmer active>
-                    <Loader indeterminate>Uploading image</Loader>
-                  </Dimmer>
-                ) : (
-                  <Message>
-                    <center>
-                      <img src={imageBlockSVG} alt="" />
-                    </center>
-                  </Message>
-                )}
-              </div>
-            ) : (
-              <>
-                <SlateEditor
-                  index={index}
-                  readOnly={!inView}
-                  properties={properties}
-                  extensions={textblockExtensions}
-                  renderExtensions={[withBlockProperties]}
-                  value={value}
-                  block={block /* is this needed? */}
-                  defaultSelection={defaultSelection}
-                  onUpdate={handleUpdate}
-                  debug={DEBUG}
-                  onFocus={handleFocus}
-                  onChange={(value, editor) => onEditorChange(value, editor)}
-                  onKeyDown={handleKey}
-                  selected={selected}
-                  placeholder={placeholder}
-                  slateSettings={slateSettings}
-                  editableProps={{ 'aria-multiline': 'false' }}
-                />
-                {DEBUG ? <div>{block}</div> : ''}
-              </>
-            );
-          }}
-        </Dropzone>
-
-        {!config.experimental.addBlockButton.enabled &&
-          selected &&
-          !data.plaintext?.trim() &&
-          !disableNewBlocks && (
-            <BlockChooserButton
-              data={data}
-              block={block}
-              onInsertBlock={(id, value) => {
-                onSelectBlock(onInsertBlock(id, value));
-              }}
-              onMutateBlock={onMutateBlock}
-              allowedBlocks={allowedBlocks}
-              blocksConfig={blocksConfig}
-              size="24px"
-              properties={properties}
-            />
-          )}
-
-        <SidebarPortal selected={selected}>
-          <div id="slate-plugin-sidebar"></div>
-          {instructions ? (
-            <Segment attached>
-              <div dangerouslySetInnerHTML={{ __html: instructions }} />
-            </Segment>
-          ) : (
-            <>
-              <ShortcutListing />
-              <MarkdownIntroduction />
-              <BlockDataForm
-                block={block}
-                schema={schema}
-                title={schema.title}
-                onChangeBlock={onChangeBlock}
-                onChangeField={(id, value) => {
-                  onChangeBlock(block, {
-                    ...data,
-                    [id]: value,
-                  });
-                }}
-                formData={data}
-              />
-            </>
-          )}
-        </SidebarPortal>
-      </>
-    </div>
-  );
-};
-
-export default DefaultTextBlockEditor;

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

@@ -1,77 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { useInView } from 'react-intersection-observer';
-import { SlateEditor } from '@plone/volto-slate/editor';
-import { serializeNodesToText } from '@plone/volto-slate/editor/render';
-import { handleKeyDetached } from './keyboard';
-
-const DEBUG = false;
-
-const messages = defineMessages({
-  text: {
-    id: 'Type text…',
-    defaultMessage: 'Type text…',
-  },
-});
-
-export const DetachedTextBlockEditor = (props) => {
-  const {
-    data,
-    index,
-    properties,
-    onSelectBlock,
-    onChangeBlock,
-    block,
-    selected,
-    formTitle,
-    formDescription,
-  } = props;
-  const { value } = data;
-
-  const intl = useIntl();
-  const placeholder =
-    data.placeholder || formTitle || intl.formatMessage(messages.text);
-  let instructions = data?.instructions?.data || data?.instructions;
-  if (!instructions || instructions === '<p><br/></p>') {
-    instructions = formDescription;
-  }
-
-  const { ref, inView } = useInView({
-    threshold: 0,
-    rootMargin: '0px 0px 200px 0px',
-  });
-
-  return (
-    <div className="text-slate-editor-inner detached-slate-editor" ref={ref}>
-      <SlateEditor
-        index={index}
-        readOnly={!inView}
-        properties={properties}
-        renderExtensions={[]}
-        value={value}
-        block={block /* is this needed? */}
-        debug={DEBUG}
-        slateSettings={props.slateSettings}
-        onFocus={() => {
-          if (!selected) {
-            onSelectBlock(block);
-          }
-        }}
-        onChange={(value, selection, editor) => {
-          onChangeBlock(block, {
-            ...data,
-            value,
-            plaintext: serializeNodesToText(value || []),
-            // TODO: also add html serialized value
-          });
-        }}
-        selected={selected}
-        placeholder={placeholder}
-        onKeyDown={handleKeyDetached}
-        editableProps={{ 'aria-multiline': 'true' }}
-      />
-    </div>
-  );
-};
-
-export default DetachedTextBlockEditor;

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

@@ -1,59 +0,0 @@
-import { Segment, List } from 'semantic-ui-react';
-import React from 'react';
-
-/**
- * A component to be shown in the sidebar as a introduction to the Markdown support in the Slate-based Text block. It renders a header and a list and has no state.
- * @param {object} props Can be an empty object (no props are used in this component).
- */
-const MarkdownIntroduction = (props) => {
-  return (
-    <div>
-      <header className="header">
-        <h2>Markdown shortcuts</h2>
-      </header>
-
-      <Segment secondary attached style={{ fontFamily: 'monospace' }}>
-        <List>
-          <List.Item key={1} style={{ fontSize: 'xx-large' }}>
-            # Title
-          </List.Item>
-          <List.Item key={2} style={{ fontSize: 'x-large' }}>
-            ## Subtitle
-          </List.Item>
-
-          <List.Item key={3} style={{ paddingTop: '1rem' }}>
-            * unordered list item
-          </List.Item>
-          <List.Item key={4}>+ unordered list item</List.Item>
-          <List.Item key={5}>- unordered list item</List.Item>
-
-          <List.Item key={6} style={{ paddingTop: '1rem' }}>
-            1. ordered list item
-          </List.Item>
-          <List.Item key={7}>1) ordered list item</List.Item>
-
-          <List.Item key={8} className="callout">
-            &gt; block quote
-          </List.Item>
-          <List.Item key={9} style={{ fontWeight: 'bold' }}>
-            **bold text**
-          </List.Item>
-          <List.Item key={10} style={{ fontWeight: 'bold' }}>
-            __bold text__
-          </List.Item>
-          <List.Item key={11} style={{ fontStyle: 'italic' }}>
-            *italic text*
-          </List.Item>
-          <List.Item key={12} style={{ fontStyle: 'italic' }}>
-            _italic text_
-          </List.Item>
-          <List.Item key={13} style={{ textDecoration: 'line-through' }}>
-            ~~strikethrough text~~
-          </List.Item>
-        </List>
-      </Segment>
-    </div>
-  );
-};
-
-export default MarkdownIntroduction;

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

@@ -1,18 +0,0 @@
-import React from 'react';
-import { Portal } from 'react-portal';
-
-const PluginSidebar = ({ children, selected }) => {
-  return (
-    <>
-      {selected && (
-        <Portal
-          node={__CLIENT__ && document.getElementById('slate-plugin-sidebar')}
-        >
-          {children}
-        </Portal>
-      )}
-    </>
-  );
-};
-
-export default PluginSidebar;

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

@@ -1,28 +0,0 @@
-import { Segment, List } from 'semantic-ui-react';
-import config from '@plone/volto/registry';
-import React from 'react';
-
-const ShortcutListing = (props) => {
-  const hotkeys = config.settings?.slate?.hotkeys;
-  return (
-    <div>
-      <header className="header">
-        <h2>Editor shortcuts</h2>
-      </header>
-
-      <Segment secondary attached>
-        <List>
-          <List.Item>
-            Type a slash (<em>/</em>) to change block type
-          </List.Item>
-          {Object.entries(hotkeys || {}).map(([shortcut, { format, type }]) => (
-            <List.Item key={shortcut}>{`${shortcut}: ${format}`}</List.Item>
-          ))}
-        </List>
-        <div>On Windows, the MOD key is Ctrl, on Mac OS X it's Cmd.</div>
-      </Segment>
-    </div>
-  );
-};
-
-export default ShortcutListing;

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

@@ -1,203 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { filter, isEmpty } from 'lodash';
-import { Menu } from 'semantic-ui-react';
-import { useIntl, FormattedMessage } from 'react-intl';
-import { Icon } from '@plone/volto/components';
-
-const emptySlateBlock = () => ({
-  value: [
-    {
-      children: [
-        {
-          text: '',
-        },
-      ],
-      type: 'p',
-    },
-  ],
-  plaintext: '',
-});
-
-const useIsMounted = () => {
-  const ref = React.useRef();
-  React.useEffect(() => {
-    ref.current = true;
-    return () => (ref.current = false);
-  }, []);
-  return ref.current;
-};
-
-const SlashMenu = ({
-  currentBlock,
-  onMutateBlock,
-  selected,
-  availableBlocks,
-}) => {
-  const intl = useIntl();
-
-  return (
-    <div className="power-user-menu">
-      <Menu vertical fluid borderless>
-        {availableBlocks.map((block, index) => (
-          <Menu.Item
-            key={block.id}
-            className={block.id}
-            active={index === selected}
-            onClick={(e) => {
-              // onInsertBlock(currentBlock, { '@type': block.id });
-              onMutateBlock(currentBlock, { '@type': block.id });
-              e.stopPropagation();
-            }}
-          >
-            <Icon name={block.icon} size="24px" />
-            {intl.formatMessage({
-              id: block.title,
-              defaultMessage: block.title,
-            })}
-          </Menu.Item>
-        ))}
-        {availableBlocks.length === 0 && (
-          <Menu.Item>
-            <FormattedMessage
-              id="No matching blocks"
-              defaultMessage="No matching blocks"
-            />
-          </Menu.Item>
-        )}
-      </Menu>
-    </div>
-  );
-};
-
-SlashMenu.propTypes = {
-  currentBlock: PropTypes.string.isRequired,
-  onInsertBlock: PropTypes.func,
-  selected: PropTypes.number,
-  blocksConfig: PropTypes.arrayOf(PropTypes.any),
-};
-
-const translateBlockTitle = (block, intl) =>
-  intl.formatMessage({
-    id: block.title,
-    defaultMessage: block.title,
-  });
-const scoreBlock = (block, slashCommand, intl) => {
-  if (!slashCommand) return 0;
-  const title = translateBlockTitle(block, intl).toLowerCase();
-  // prefer initial title matches, then title substring matches
-  if (title.indexOf(slashCommand[1]) === 0) return 2;
-  if (title.indexOf(slashCommand[1]) !== -1) return 1;
-};
-
-/**
- * A SlashMenu wrapper implemented as a volto-slate PersistentHelper.
- */
-const PersistentSlashMenu = ({ editor }) => {
-  const props = editor.getBlockProps();
-  const intl = useIntl();
-  const {
-    block,
-    blocksConfig,
-    data,
-    onMutateBlock,
-    properties,
-    selected,
-    allowedBlocks,
-    detached,
-  } = props;
-  const disableNewBlocks = data?.disableNewBlocks || detached;
-
-  const [slashMenuSelected, setSlashMenuSelected] = React.useState(0);
-
-  const hasAllowedBlocks = !isEmpty(allowedBlocks);
-  const slashCommand = data.plaintext
-    ?.toLowerCase()
-    .trim()
-    .match(/^\/([a-z]*)$/);
-
-  const availableBlocks = React.useMemo(
-    () =>
-      filter(blocksConfig, (item) =>
-        hasAllowedBlocks
-          ? allowedBlocks.includes(item.id)
-          : typeof item.restricted === 'function'
-          ? !item.restricted({ properties, block: item })
-          : !item.restricted,
-      )
-        .filter((block) => Boolean(block.title && block.id))
-        .filter((block) => {
-          // typed text is a substring of the title or id
-          const title = translateBlockTitle(block, intl).toLowerCase();
-          return (
-            block.id !== 'slate' &&
-            slashCommand &&
-            title.indexOf(slashCommand[1]) !== -1
-          );
-        })
-        .sort((a, b) => {
-          const scoreDiff =
-            scoreBlock(b, slashCommand, intl) -
-            scoreBlock(a, slashCommand, intl);
-          if (scoreDiff) return scoreDiff;
-          // sort equally scored blocks by title
-          return translateBlockTitle(a, intl).localeCompare(
-            translateBlockTitle(b, intl),
-          );
-        }),
-    [
-      allowedBlocks,
-      blocksConfig,
-      intl,
-      properties,
-      slashCommand,
-      hasAllowedBlocks,
-    ],
-  );
-
-  const slashMenuSize = availableBlocks.length;
-  const show = selected && slashCommand && !disableNewBlocks;
-
-  const isMounted = useIsMounted();
-
-  React.useEffect(() => {
-    if (isMounted && show && slashMenuSelected > slashMenuSize - 1) {
-      setSlashMenuSelected(slashMenuSize - 1);
-    }
-  }, [show, slashMenuSelected, isMounted, slashMenuSize]);
-
-  editor.showSlashMenu = show;
-
-  editor.slashEnter = () =>
-    slashMenuSize > 0 &&
-    onMutateBlock(
-      block,
-      {
-        '@type': availableBlocks[slashMenuSelected].id,
-      },
-      emptySlateBlock(),
-    );
-
-  editor.slashArrowUp = () =>
-    setSlashMenuSelected(
-      slashMenuSelected === 0 ? slashMenuSize - 1 : slashMenuSelected - 1,
-    );
-
-  editor.slashArrowDown = () =>
-    setSlashMenuSelected(
-      slashMenuSelected >= slashMenuSize - 1 ? 0 : slashMenuSelected + 1,
-    );
-
-  return show ? (
-    <SlashMenu
-      currentBlock={block}
-      onMutateBlock={onMutateBlock}
-      availableBlocks={availableBlocks}
-      selected={slashMenuSelected}
-    />
-  ) : (
-    ''
-  );
-};
-
-export default PersistentSlashMenu;