@plone/volto-slate 18.0.0-alpha.4

package/src/elementEditor/ToolbarButton.jsx

@@ -0,0 +1,44 @@
+/**
+ * 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/src/elementEditor/index.js

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

package/src/elementEditor/makeInlineElementPlugin.js

@@ -0,0 +1,100 @@
+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/src/elementEditor/messages.js

@@ -0,0 +1,14 @@
+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/src/elementEditor/utils.js

@@ -0,0 +1,227 @@
+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/src/hooks/index.js

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

package/src/hooks/useEditorContext.js

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

package/src/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,7 @@
+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/src/hooks/useSelectionPosition.js

@@ -0,0 +1,25 @@
+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/src/i18n.js

@@ -0,0 +1,180 @@
+/* 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/src/icons/hashlink.svg

@@ -0,0 +1,57 @@
+<?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>