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

package/packages/volto-slate/src/elementEditor/ToolbarButton.jsx

@@ -1,44 +0,0 @@
-/**
- * This is the main toolbar button.
- */
-import React from 'react';
-import { useSlate } from 'slate-react';
-import { useDispatch } from 'react-redux';
-import { omit } from 'lodash';
-
-import { ToolbarButton } from '@plone/volto-slate/editor/ui';
-import { hasRangeSelection } from '@plone/volto-slate/utils';
-import { setPluginOptions } from '@plone/volto-slate/actions';
-
-const ElementToolbarButton = (props) => {
-  const { isActiveElement, insertElement, pluginId, toolbarButtonIcon } = props;
-  const editor = useSlate();
-  const isElement = isActiveElement(editor);
-  const dispatch = useDispatch();
-  const pid = `${editor.uid}-${pluginId}`;
-
-  const omittedProps = [
-    'insertElement',
-    'pluginId',
-    'toolbarButtonIcon',
-    'isActiveElement',
-  ];
-
-  return (
-    <>
-      {hasRangeSelection(editor) && (
-        <ToolbarButton
-          {...omit(props, ...omittedProps)}
-          active={isElement}
-          onMouseDown={() => {
-            if (!isElement) insertElement(editor, {});
-            dispatch(setPluginOptions(pid, { show_sidebar_editor: true }));
-          }}
-          icon={toolbarButtonIcon}
-        />
-      )}
-    </>
-  );
-};
-
-export default ElementToolbarButton;

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

@@ -1,5 +0,0 @@
-export { makeInlineElementPlugin } from './makeInlineElementPlugin';
-
-export const makeBlockElementPlugin = (options) => {
-  return [(config) => config];
-};

package/packages/volto-slate/src/elementEditor/makeInlineElementPlugin.js

@@ -1,100 +0,0 @@
-import React from 'react';
-import SidebarEditor from './SidebarEditor';
-import makeContextButtons from './ContextButtons';
-import PluginEditor from './PluginEditor';
-import {
-  _insertElement,
-  _unwrapElement,
-  _isActiveElement,
-  _getActiveElement,
-} from './utils';
-import messages from './messages';
-import ToolbarButton from './ToolbarButton';
-import SchemaProvider from './SchemaProvider';
-import { omit } from 'lodash';
-
-import tagSVG from '@plone/volto/icons/tag.svg';
-
-export const makeInlineElementPlugin = (options) => {
-  const { elementType, isInlineElement, pluginId, title = 'Element' } = options;
-  const omittedProps = [
-    'pluginEditor',
-    'getActiveElement',
-    'unwrapElement',
-    'schemaProvider',
-    'hasValue',
-    'elementType',
-    'isInlineElement',
-    'editSchema',
-    'element',
-    'persistentHelper',
-  ];
-
-  const pluginOptions = {
-    pluginEditor: PluginEditor,
-    insertElement: _insertElement(elementType),
-    getActiveElement: _getActiveElement(elementType),
-    isActiveElement: _isActiveElement(elementType),
-    unwrapElement: _unwrapElement(elementType),
-    messages,
-    toolbarButtonIcon: tagSVG,
-    title,
-    extensions: [],
-
-    // a component that should provide a schema as a render prop
-    schemaProvider: SchemaProvider,
-    // schema that can be used to create the edit form for this component
-    // editSchema,
-
-    // A generic "validation" method, just finds that a "positive" value
-    // exists.  Plugin authors should overwrite it in options
-    // If it returns true, the value is saved in the editor, othwerwise the
-    // element type is removed from the editor
-    hasValue: (data) => Object.values(data).findIndex((v) => !!v) > -1,
-
-    ...options,
-  };
-
-  const PersistentHelper = (props) => (
-    <SidebarEditor {...props} {...pluginOptions} />
-  );
-  PersistentHelper.id = pluginId;
-
-  const ElementContextButtons = makeContextButtons(pluginOptions);
-  ElementContextButtons.id = pluginId;
-
-  const install = (config) => {
-    const { slate } = config.settings;
-    if (isInlineElement) {
-      slate.inlineElements[elementType] = true;
-    }
-
-    slate.buttons[pluginId] = (props) => (
-      <ToolbarButton
-        {...props}
-        title={title}
-        {...omit(pluginOptions, omittedProps)}
-      />
-    );
-    slate.contextToolbarButtons.push(ElementContextButtons);
-    slate.persistentHelpers.push(
-      options.persistentHelper
-        ? options.persistentHelper(pluginOptions)
-        : PersistentHelper,
-    );
-    slate.extensions = [
-      ...(slate.extensions || []),
-      ...pluginOptions.extensions,
-    ];
-    slate.elements[elementType] = options.element;
-    slate.nodeTypesToHighlight.push(elementType);
-
-    // The plugin authors should manually add the button to the relevant toolbars
-    // slate.toolbarButtons = [...(slate.toolbarButtons || []), pluginId];
-    // slate.expandedToolbarButtons = [...(slate.expandedToolbarButtons || []), pluginId];
-
-    return config;
-  };
-
-  return [install, ElementContextButtons, PersistentHelper, pluginOptions];
-};

package/packages/volto-slate/src/elementEditor/messages.js

@@ -1,14 +0,0 @@
-import { defineMessages } from 'react-intl'; // , defineMessages
-
-const messages = defineMessages({
-  edit: {
-    id: 'Edit element',
-    defaultMessage: 'Edit element',
-  },
-  delete: {
-    id: 'Remove element',
-    defaultMessage: 'Remove element',
-  },
-});
-
-export default messages;

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

@@ -1,226 +0,0 @@
-import { Editor, Transforms, Node } from 'slate';
-
-/**
- * @description Creates or updates an existing $elementType. It also takes care
- * of the saved selection and uses PathRef.
- *
- * @param {Editor} editor The Slate editor for the context
- * @param {object} data Relevant data for this element
- *
- * @returns {boolean} true if an element was possibly inserted, false otherwise
- * (currently we do not check here if the element was already applied to the
- * editor)
- */
-export const _insertElement = (elementType) => (editor, data) => {
-  if (editor.getSavedSelection()) {
-    const selection = editor.selection || editor.getSavedSelection();
-
-    const rangeRef = Editor.rangeRef(editor, selection);
-
-    const res = Array.from(
-      Editor.nodes(editor, {
-        match: (n) => n.type === elementType,
-        mode: 'highest',
-        at: selection,
-      }),
-    );
-
-    if (res.length) {
-      const [, path] = res[0];
-      Transforms.setNodes(
-        editor,
-        { data },
-        {
-          at: path ? path : null,
-          match: path ? (n) => n.type === elementType : null,
-        },
-      );
-    } else {
-      Transforms.wrapNodes(
-        editor,
-        { type: elementType, data },
-        {
-          split: true,
-          at: selection,
-          match: (node) => {
-            return Node.string(node).length !== 0;
-          },
-        }, //,
-      );
-    }
-
-    const sel = JSON.parse(JSON.stringify(rangeRef.current));
-    Transforms.select(editor, sel);
-    editor.setSavedSelection(sel);
-
-    return true;
-  }
-
-  return false;
-};
-
-/**
- * Will unwrap a node that has as type the one received or one from an array.
- * It identifies the current target element and expands the selection to it, in
- * case the selection was just partial. This allows a "clear and reassign"
- * operation, for example for the Link plugin.
- *
- * @param {string|Object[]} elementType - this can be a string or an array of strings
- * @returns {Object|null} - current node
- */
-export const _unwrapElement = (elementType) => (editor) => {
-  const [link] = Editor.nodes(editor, {
-    at: editor.selection,
-    match: (node) => node?.type === elementType,
-  });
-  const [, path] = link;
-  const [start, end] = Editor.edges(editor, path);
-  const range = { anchor: start, focus: end };
-
-  const ref = Editor.rangeRef(editor, range);
-
-  Transforms.select(editor, range);
-  Transforms.unwrapNodes(editor, {
-    match: (n) =>
-      Array.isArray(elementType)
-        ? elementType.includes(n.type)
-        : n.type === elementType,
-    at: range,
-  });
-
-  const current = ref.current;
-  ref.unref();
-
-  return current;
-};
-
-export const _isActiveElement = (elementType) => (editor) => {
-  const selection = editor.selection || editor.getSavedSelection();
-  let found;
-  try {
-    found = Array.from(
-      Editor.nodes(editor, {
-        match: (n) => n.type === elementType,
-        at: selection,
-      }) || [],
-    );
-  } catch (e) {
-    // eslint-disable-next-line
-    // console.warn('Error in finding active element', e);
-    return false;
-  }
-  if (found.length) return true;
-
-  if (selection) {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
-
-    if (isAtStart) {
-      try {
-        found = Editor.previous(editor, {
-          at: path,
-          // match: (n) => n.type === MENTION,
-        });
-      } catch (ex) {
-        found = [];
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        return true;
-      }
-    }
-  }
-
-  return false;
-};
-
-/**
- * Will look for a node that has as type the one received or one from an array
- * @param {string|Object[]} elementType - this can be a string or an array of strings
- * @returns {Object|null} - found node
- */
-export const _getActiveElement = (elementType) => (
-  editor,
-  direction = 'any',
-) => {
-  const selection = editor.selection || editor.getSavedSelection();
-  let found = [];
-
-  try {
-    found = Array.from(
-      Editor.nodes(editor, {
-        match: (n) =>
-          Array.isArray(elementType)
-            ? elementType.includes(n.type)
-            : n.type === elementType,
-        at: selection,
-      }),
-    );
-  } catch (e) {
-    return null;
-  }
-
-  if (found.length) return found[0];
-
-  if (!selection) return null;
-
-  if (direction === 'any' || direction === 'backward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
-
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.previous(editor, {
-          at: path,
-        });
-      } catch (ex) {
-        // eslint-disable-next-line no-console
-        console.warn('Unable to find previous node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
-        }
-      } else {
-        return null;
-      }
-    }
-  }
-
-  if (direction === 'any' || direction === 'forward') {
-    const { path } = selection.anchor;
-    const isAtStart =
-      selection.anchor.offset === 0 && selection.focus.offset === 0;
-
-    if (isAtStart) {
-      let found;
-      try {
-        found = Editor.next(editor, {
-          at: path,
-        });
-      } catch (e) {
-        // eslint-disable-next-line
-        console.warn('Unable to find next node', editor, path);
-        return;
-      }
-      if (found && found[0] && found[0].type === elementType) {
-        if (
-          (Array.isArray(elementType) && elementType.includes(found[0].type)) ||
-          found[0].type === elementType
-        ) {
-          return found;
-        }
-      } else {
-        return null;
-      }
-    }
-  }
-
-  return null;
-};

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

@@ -1,3 +0,0 @@
-export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
-export { useEditorContext } from './useEditorContext';
-export { useSelectionPosition } from './useSelectionPosition';

package/packages/volto-slate/src/hooks/useEditorContext.js

@@ -1,6 +0,0 @@
-import React from 'react';
-import EditorContext from '@plone/volto-slate/editor/EditorContext';
-
-export const useEditorContext = () => {
-  return React.useContext(EditorContext);
-};

package/packages/volto-slate/src/hooks/useIsomorphicLayoutEffect.js

@@ -1,7 +0,0 @@
-import { useLayoutEffect, useEffect } from 'react';
-
-/**
- * Prevent warning on SSR by falling back to useEffect when window is not defined
- */
-export const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect;

package/packages/volto-slate/src/hooks/useSelectionPosition.js

@@ -1,25 +0,0 @@
-import { useSlate, ReactEditor, useSlateSelection } from 'slate-react';
-
-/**
- * Translates the slate selection (text) to window/screen coordinates
- *
- * TODO: we use the anchor as the base for the position. This could be improved
- */
-export const useSelectionPosition = () => {
-  let rect = {};
-
-  const editor = useSlate();
-
-  const selection = useSlateSelection();
-  if (selection && ReactEditor.isFocused(editor)) {
-    try {
-      const [textNode] = ReactEditor.toDOMPoint(editor, selection.anchor);
-      const parentNode = textNode.parentNode;
-      rect = parentNode.getBoundingClientRect();
-    } catch {
-      // This happens when the selection is outdated because the nodes have
-      // been modified? Seems like a bug in slate, then.
-    }
-  }
-  return rect;
-};

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

@@ -1,180 +0,0 @@
-/* eslint no-console: 0 */
-/**
- * i18n script.
- * @module scripts/i18n
- */
-
-const { find, keys, map, concat, reduce } = require('lodash');
-const glob = require('glob').sync;
-const fs = require('fs');
-const Pofile = require('pofile');
-const babel = require('@babel/core');
-
-/**
- * Extract messages into separate JSON files
- * @function extractMessages
- * @return {undefined}
- */
-function extractMessages() {
-  map(glob('src/**/*.js?(x)'), (filename) => {
-    babel.transformFileSync(filename, {}, (err) => {
-      if (err) {
-        console.log(err);
-      }
-    });
-  });
-}
-
-/**
- * Get messages from separate JSON files
- * @function getMessages
- * @return {Object} Object with messages
- */
-function getMessages() {
-  return reduce(
-    concat(
-      {},
-      ...map(
-        // We ignore the existing customized shadowed components ones, since most
-        // probably we won't be overriding them
-        // If so, we should do it in the config object or somewhere else
-        glob('build/messages/src/**/*.json', {
-          ignore: 'build/messages/src/customizations/**',
-        }),
-        (filename) =>
-          map(JSON.parse(fs.readFileSync(filename, 'utf8')), (message) => ({
-            ...message,
-            filename: filename.match(/build\/messages\/src\/(.*).json$/)[1],
-          })),
-      ),
-    ),
-    (current, value) => {
-      let result = current;
-      if (current.id) {
-        result = {
-          [current.id]: {
-            defaultMessage: current.defaultMessage,
-            filenames: [current.filename],
-          },
-        };
-      }
-
-      if (result[value.id]) {
-        result[value.id].filenames.push(value.filename);
-      } else {
-        result[value.id] = {
-          defaultMessage: value.defaultMessage,
-          filenames: [value.filename],
-        };
-      }
-      return result;
-    },
-  );
-}
-
-/**
- * Convert messages to pot format
- * @function messagesToPot
- * @param {Object} messages Messages
- * @return {string} Formatted pot string
- */
-function messagesToPot(messages) {
-  return map(keys(messages).sort(), (key) =>
-    [
-      ...map(messages[key].filenames, (filename) => `#: ${filename}`),
-      `# defaultMessage: ${messages[key].defaultMessage}`,
-      `msgid "${key}"`,
-      'msgstr ""',
-    ].join('\n'),
-  ).join('\n\n');
-}
-
-/**
- * Pot header
- * @function potHeader
- * @return {string} Formatted pot header
- */
-function potHeader() {
-  return `msgid ""
-msgstr ""
-"Project-Id-Version: Plone\\n"
-"POT-Creation-Date: ${new Date().toISOString()}\\n"
-"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\\n"
-"MIME-Version: 1.0\\n"
-"Content-Type: text/plain; charset=utf-8\\n"
-"Content-Transfer-Encoding: 8bit\\n"
-"Plural-Forms: nplurals=1; plural=0;\\n"
-"Language-Code: en\\n"
-"Language-Name: English\\n"
-"Preferred-Encodings: utf-8\\n"
-"Domain: volto\\n"
-
-`;
-}
-
-/**
- * Format header
- * @function formatHeader
- * @param {Array} comments Array of comments
- * @param {Object} headers Object of header items
- * @return {string} Formatted header
- */
-function formatHeader(comments, headers) {
-  return [
-    ...map(comments, (comment) => `# ${comment}`),
-    'msgid ""',
-    'msgstr ""',
-    ...map(keys(headers), (key) => `"${key}: ${headers[key]}\\n"`),
-    '',
-  ].join('\n');
-}
-
-/**
- * Sync po by the pot file
- * @function syncPoByPot
- * @return {undefined}
- */
-function syncPoByPot() {
-  const pot = Pofile.parse(fs.readFileSync('locales/volto.pot', 'utf8'));
-
-  map(glob('locales/**/*.po'), (filename) => {
-    const po = Pofile.parse(fs.readFileSync(filename, 'utf8'));
-
-    fs.writeFileSync(
-      filename,
-      `${formatHeader(po.comments, po.headers)}
-${map(pot.items, (item) => {
-  const poItem = find(po.items, { msgid: item.msgid });
-  return [
-    `${map(item.references, (ref) => `#: ${ref}`).join('\n')}`,
-    `msgid "${item.msgid}"`,
-    `msgstr "${poItem ? poItem.msgstr : ''}"`,
-  ].join('\n');
-}).join('\n\n')}\n`,
-    );
-  });
-}
-
-// Main tasks
-console.log('Extracting messages from source files...');
-extractMessages();
-console.log('Synchronizing messages to pot file...');
-// We only write the pot file if it's really different
-const newPot = `${potHeader()}${messagesToPot(getMessages())}\n`.replace(
-  /"POT-Creation-Date:(.*)\\n"/,
-  '',
-);
-const oldPot = fs
-  .readFileSync('locales/volto.pot', 'utf8')
-  .replace(/"POT-Creation-Date:(.*)\\n"/, '');
-
-if (newPot !== oldPot) {
-  fs.writeFileSync(
-    'locales/volto.pot',
-    `${potHeader()}${messagesToPot(getMessages())}\n`,
-  );
-}
-console.log('Synchronizing messages to po files...');
-syncPoByPot();
-console.log('done!');

package/packages/volto-slate/src/icons/hashlink.svg

@@ -1,57 +0,0 @@
-<?xml version="1.0" encoding="iso-8859-1"?>
-<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 490.667 490.667" style="enable-background:new 0 0 490.667 490.667;" xml:space="preserve">
-<g>
-	<path style="fill:#455A64;" d="M480,181.44H53.333c-5.891,0-10.667-4.776-10.667-10.667c0-5.891,4.776-10.667,10.667-10.667H480
-		c5.891,0,10.667,4.776,10.667,10.667C490.667,176.664,485.891,181.44,480,181.44z"/>
-	<path style="fill:#455A64;" d="M437.333,330.773H10.667C4.776,330.773,0,325.998,0,320.106c0-5.891,4.776-10.667,10.667-10.667
-		h426.667c5.891,0,10.667,4.776,10.667,10.667C448,325.998,443.224,330.773,437.333,330.773z"/>
-	<path style="fill:#455A64;" d="M245.333,458.773c-5.891-0.001-10.666-4.778-10.664-10.669c0-1.259,0.223-2.507,0.659-3.688
-		L384.661,39.082c1.922-5.569,7.995-8.524,13.563-6.602c5.569,1.922,8.524,7.995,6.602,13.563c-0.049,0.141-0.1,0.281-0.155,0.42
-		L255.339,451.797C253.793,455.988,249.8,458.772,245.333,458.773z"/>
-	<path style="fill:#455A64;" d="M96,458.773c-5.891-0.001-10.666-4.778-10.664-10.669c0-1.259,0.223-2.507,0.659-3.688
-		L235.328,39.082c1.922-5.569,7.995-8.524,13.563-6.602c5.569,1.922,8.524,7.995,6.602,13.563c-0.049,0.141-0.1,0.281-0.155,0.42
-		L106.005,451.797C104.46,455.988,100.467,458.772,96,458.773z"/>
-</g>
-<path d="M480,181.44H53.333c-5.891,0-10.667-4.776-10.667-10.667c0-5.891,4.776-10.667,10.667-10.667H480
-	c5.891,0,10.667,4.776,10.667,10.667C490.667,176.664,485.891,181.44,480,181.44z"/>
-<path d="M437.333,330.773H10.667C4.776,330.773,0,325.998,0,320.106c0-5.891,4.776-10.667,10.667-10.667h426.667
-	c5.891,0,10.667,4.776,10.667,10.667C448,325.998,443.224,330.773,437.333,330.773z"/>
-<path d="M245.333,458.773c-5.891-0.001-10.666-4.778-10.664-10.669c0-1.259,0.223-2.507,0.659-3.688L384.661,39.082
-	c1.922-5.569,7.995-8.524,13.563-6.602c5.569,1.922,8.524,7.995,6.602,13.563c-0.049,0.141-0.1,0.281-0.155,0.42L255.339,451.797
-	C253.793,455.988,249.8,458.772,245.333,458.773z"/>
-<path d="M96,458.773c-5.891-0.001-10.666-4.778-10.664-10.669c0-1.259,0.223-2.507,0.659-3.688L235.328,39.082
-	c1.922-5.569,7.995-8.524,13.563-6.602c5.569,1.922,8.524,7.995,6.602,13.563c-0.049,0.141-0.1,0.281-0.155,0.42L106.005,451.797
-	C104.46,455.988,100.467,458.772,96,458.773z"/>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-<g>
-</g>
-</svg>