@plone/volto-slate 18.0.0-alpha.4

package/src/blocks/Text/DefaultTextBlockEditor.jsx

@@ -0,0 +1,304 @@
+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/src/blocks/Text/DetachedTextBlockEditor.jsx

@@ -0,0 +1,77 @@
+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/src/blocks/Text/MarkdownIntroduction.jsx

@@ -0,0 +1,59 @@
+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/src/blocks/Text/PluginSidebar.jsx

@@ -0,0 +1,18 @@
+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/src/blocks/Text/ShortcutListing.jsx

@@ -0,0 +1,28 @@
+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/src/blocks/Text/SlashMenu.jsx

@@ -0,0 +1,203 @@
+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;