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

package/packages/volto-slate/src/editor/config.jsx

@@ -1,344 +0,0 @@
-import React from 'react';
-import config from '@plone/volto/registry';
-
-import boldIcon from '@plone/volto/icons/bold.svg';
-import codeIcon from '@plone/volto/icons/code.svg';
-import formatClearIcon from '@plone/volto/icons/format-clear.svg';
-import headingIcon from '@plone/volto/icons/heading.svg';
-import italicIcon from '@plone/volto/icons/italic.svg';
-import listBulletIcon from '@plone/volto/icons/list-bullet.svg';
-import listNumberedIcon from '@plone/volto/icons/list-numbered.svg';
-import subheadingIcon from '@plone/volto/icons/subheading.svg';
-import subTextIcon from '@plone/volto/icons/subtext.svg';
-import underlineIcon from '@plone/volto/icons/underline.svg';
-import strikethroughIcon from '@plone/volto/icons/strikethrough.svg';
-import subindexIcon from '@plone/volto/icons/subindex.svg';
-import superindexIcon from '@plone/volto/icons/superindex.svg';
-
-import { createEmptyParagraph } from '@plone/volto-slate/utils';
-
-import {
-  MarkButton,
-  MarkElementButton,
-  BlockButton,
-  ClearFormattingButton,
-  Separator,
-  Expando,
-} from './ui';
-import { highlightSelection } from './decorate'; // highlightByType,
-import {
-  insertData,
-  isInline,
-  withDeleteSelectionOnEnter,
-  withDeserializers,
-  normalizeNode,
-  normalizeExternalData,
-} from './extensions';
-import {
-  // inlineTagDeserializer,
-  bodyTagDeserializer,
-  blockTagDeserializer,
-  preTagDeserializer,
-  spanTagDeserializer,
-  bTagDeserializer,
-  codeTagDeserializer,
-} from './deserialize';
-import { renderLinkElement } from './render';
-
-// Registry of available buttons
-export const buttons = {
-  bold: (props) => (
-    <MarkElementButton
-      title="Bold"
-      format="strong"
-      icon={boldIcon}
-      {...props}
-    />
-  ),
-  italic: (props) => (
-    <MarkElementButton
-      title="Italic"
-      format="em"
-      icon={italicIcon}
-      {...props}
-    />
-  ),
-  underline: (props) => (
-    <MarkElementButton
-      title="Underline"
-      format="u"
-      icon={underlineIcon}
-      {...props}
-    />
-  ),
-  strikethrough: (props) => (
-    <MarkElementButton
-      title="Strikethrough"
-      format="del"
-      icon={strikethroughIcon}
-      {...props}
-    />
-  ),
-  sub: (props) => (
-    <MarkElementButton
-      title="Subscript"
-      format="sub"
-      icon={subindexIcon}
-      {...props}
-    />
-  ),
-  sup: (props) => (
-    <MarkElementButton
-      title="Superscript"
-      format="sup"
-      icon={superindexIcon}
-      {...props}
-    />
-  ),
-  code: (props) => (
-    <MarkButton title="Code" format="code" icon={codeIcon} {...props} />
-  ),
-  'heading-two': (props) => (
-    <BlockButton
-      title="Title"
-      format="h2"
-      allowedChildren={config.settings.slate.allowedHeadlineElements}
-      icon={headingIcon}
-      {...props}
-    />
-  ),
-  'heading-three': (props) => (
-    <BlockButton
-      title="Subtitle"
-      format="h3"
-      allowedChildren={config.settings.slate.allowedHeadlineElements}
-      icon={subheadingIcon}
-      {...props}
-    />
-  ),
-  'heading-four': (props) => (
-    <BlockButton
-      title="Heading 4"
-      allowedChildren={config.settings.slate.allowedHeadlineElements}
-      format="h4"
-      icon={subTextIcon}
-      {...props}
-    />
-  ),
-  clearformatting: (props) => (
-    <ClearFormattingButton title="Clear formatting" icon={formatClearIcon} />
-  ),
-  'numbered-list': (props) => (
-    <BlockButton
-      title="Numbered list"
-      format="ol"
-      icon={listNumberedIcon}
-      {...props}
-    />
-  ),
-  'bulleted-list': (props) => (
-    <BlockButton title="Bulleted list" format="ul" icon={listBulletIcon} />
-  ),
-  separator: (props) => <Separator />,
-  expando: (props) => <Expando />,
-};
-
-export const defaultToolbarButtons = [
-  'bold',
-  'italic',
-  'underline',
-  'strikethrough',
-  'separator',
-  'heading-two',
-  'heading-three',
-  'heading-four',
-  'separator',
-  'clearformatting',
-  'separator',
-  'sub',
-  'sup',
-  'separator',
-  'bulleted-list',
-  'numbered-list',
-];
-
-export const toolbarButtons = [...defaultToolbarButtons];
-
-export const expandedToolbarButtons = [...defaultToolbarButtons];
-
-// These components are rendered in the toolbar on demand, as configured by
-// plugins.  They are rendered as "context" buttons, when there is no selection
-// Each one is a function (editor) => (<Component/> or null). It is important
-// to be able to tell if a plugin would return something because we don't want
-// to render the toolbar at all if there's no children (due to CSS reasons).
-export const contextToolbarButtons = [];
-
-// Each Element node type available in the editor can be configured to have
-// specific toolbar buttons shown above the element of that type when it
-// contains the selection. The Table plugin of SlateEditor uses this to put a
-// Delete table button above the currently selected table.
-export const elementToolbarButtons = {};
-
-// A set of components that are always rendered, unlike the button variety.
-// They make it possible to orchestrate form-based editing of components
-export const persistentHelpers = [];
-
-// The slate editor is "decorated" with the capabilities from this list.
-// While Slate calls them plugins, we use "extension" to avoid confusion.
-// A Volto Slate editor plugins adds more functionality: buttons, new elements,
-// etc.
-// Each extension is a simple mutator function with signature: `editor => editor`.
-// See https://docs.slatejs.org/concepts/07-plugins and
-// https://docs.slatejs.org/concepts/06-editor
-//
-// First here gets executed last, so if you want to override behavior, push new
-// extensions to the end of this list, to rely on default behavior implemented
-// here.
-export const extensions = [
-  withDeleteSelectionOnEnter,
-  withDeserializers,
-  insertData,
-  isInline,
-  normalizeNode,
-  normalizeExternalData,
-];
-
-// Default hotkeys and the format they trigger
-export const hotkeys = {
-  'mod+b': { format: 'strong', type: 'inline' },
-  'mod+i': { format: 'em', type: 'inline' },
-  'mod+u': { format: 'u', type: 'inline' },
-  'mod+s': { format: 'del', type: 'inline' },
-  // 'mod+`': { format: 'code', type: 'inline' },
-  // TODO: more hotkeys, including from plugins!
-};
-
-// Raw shortcut/keydown handlers
-export const keyDownHandlers = {};
-
-// Paragraphs (as default type of blocks) and lists need special handling
-export const listTypes = ['ul', 'ol'];
-export const listItemType = 'li';
-export const tableTypes = [
-  'table',
-  'tbody',
-  'thead',
-  'tfoot',
-  'tr',
-  'td',
-  'th',
-];
-export const defaultBlockType = 'p';
-
-// Default rendered elements
-// TODO: expose the IDs in constants.js, for uniformity
-export const elements = {
-  default: ({ attributes, children }) => <p {...attributes}>{children}</p>,
-
-  h1: renderLinkElement('h1'),
-  h2: renderLinkElement('h2'),
-  h3: renderLinkElement('h3'),
-  h4: renderLinkElement('h4'),
-
-  li: ({ attributes, children }) => <li {...attributes}>{children}</li>,
-  ol: ({ attributes, children }) => <ol {...attributes}>{children}</ol>,
-  ul: ({ attributes, children }) => {
-    return <ul {...attributes}>{children}</ul>;
-  },
-
-  div: ({ attributes, children }) => <div {...attributes}>{children}</div>,
-  p: ({ attributes, children, element }) => <p {...attributes}>{children}</p>,
-
-  // While usual slate editor consider these to be Leafs, we treat them as
-  // inline elements because they can sometimes contain elements (ex:
-  // <b><a/></b>
-  em: ({ children }) => <em>{children}</em>,
-  i: ({ children }) => <i>{children}</i>,
-  b: ({ children }) => {
-    return <b>{children}</b>;
-  },
-  strong: ({ children }) => {
-    return <strong>{children}</strong>;
-  },
-  u: ({ children }) => <u>{children}</u>,
-  s: ({ children }) => <del>{children}</del>,
-  del: ({ children }) => <del>{children}</del>,
-  sub: ({ children }) => <sub>{children}</sub>,
-  sup: ({ children }) => <sup>{children}</sup>,
-  code: ({ children }) => <code>{children}</code>,
-};
-
-export const inlineElements = [
-  'em',
-  'i',
-  'b',
-  'strong',
-  'u',
-  'del',
-  'sub',
-  'sup',
-  'code',
-];
-
-// Order of definition here is important (higher = inner element)
-export const leafs = {
-  // code: ({ children }) => {
-  //   return <code>{children}</code>;
-  // },
-};
-
-export const defaultValue = () => {
-  return [createEmptyParagraph()];
-};
-
-// HTML deserialization (html -> slate data conversion)
-// These are used in clipboard paste handling
-// Any tag that is not listed here (or added by a plugin) will be stripped
-// (its children will be rendered, though)
-export const htmlTagsToSlate = {
-  B: bTagDeserializer,
-  BODY: bodyTagDeserializer,
-  CODE: codeTagDeserializer,
-  PRE: preTagDeserializer,
-  SPAN: spanTagDeserializer,
-
-  BLOCKQUOTE: blockTagDeserializer('blockquote'),
-  DEL: blockTagDeserializer('del'),
-  EM: blockTagDeserializer('em'),
-  H1: blockTagDeserializer('h1'),
-  H2: blockTagDeserializer('h2'),
-  H3: blockTagDeserializer('h3'),
-  H4: blockTagDeserializer('h4'),
-  H5: blockTagDeserializer('h5'),
-  H6: blockTagDeserializer('h6'),
-  I: blockTagDeserializer('i'),
-  P: blockTagDeserializer('p'),
-  S: blockTagDeserializer('del'),
-  STRONG: blockTagDeserializer('strong'),
-  SUB: blockTagDeserializer('sub'),
-  SUP: blockTagDeserializer('sup'),
-  U: blockTagDeserializer('u'),
-
-  OL: blockTagDeserializer('ol'),
-  UL: blockTagDeserializer('ul'),
-  LI: blockTagDeserializer('li'),
-};
-
-// Adds "highlight" decoration in the editor. Used by `highlightByType`
-// See the Footnote plugin for an example.
-export const nodeTypesToHighlight = [];
-
-// "Runtime" decorator functions. These are transient decorations that are
-// applied in the editor. They are not persisted in the final value, so they
-// are useful for example to highlight search results or a certain type of node
-// Signature: ([node, path], ranges) => ranges
-export const runtimeDecorators = [highlightSelection]; // , highlightByType
-
-// Only these types of element nodes are allowed in the headlines
-export const allowedHeadlineElements = ['em', 'i'];
-
-// Scroll into view when typing
-export const scrollIntoView = true;
-
-// In inline toolbar only one tag should be active at a time.
-export const exclusiveElements = [['sup', 'sub']];

package/packages/volto-slate/src/editor/decorate.js

@@ -1,68 +0,0 @@
-import { Node, Range } from 'slate';
-// import { ReactEditor } from 'slate-react';
-
-import config from '@plone/volto/registry';
-
-/**
- * highlightByType.
- *
- * @param {} editor
- * @param {} node, path
- * @param {} ranges
- */
-export const highlightByType = (editor, [node, path], ranges) => {
-  const { slate } = config.settings;
-  const { nodeTypesToHighlight } = slate;
-
-  if (nodeTypesToHighlight.includes(node.type)) {
-    const [found] = Node.texts(editor, { from: path, to: path });
-    const visualSelectionRanges = highlightSelection(editor, found, ranges);
-    const text = Node.string(node) || '';
-    const range = {
-      anchor: { path, offset: 0 },
-      focus: { path, offset: text.length },
-      // we need to differentiate between multiple highlight types, the active
-      // selection and the highlighted node
-      highlight: true,
-      highlightType: visualSelectionRanges.length === 0 ? node.type : null,
-      isSelection: visualSelectionRanges.length > 0,
-    };
-    return [range];
-  }
-
-  return ranges;
-};
-
-/**
- * @function highlightSelection
- *
- * @summary A runtime decorator that decorates the saved selection, when the editor is
- * is no longer active.
- *
- * @param {Editor} editor The editor on which to apply the decorator.
- * @param {Node} node
- * @param {Path} path
- * @param {Array} ranges
- */
-export function highlightSelection(editor, [node, path], ranges) {
-  let selected = editor.isSelected();
-  // const focused = ReactEditor.isFocused(editor);
-  // TODO: handle the case when the editor is not focused, then use the
-  // editor.getSavedSelection()
-
-  if (selected && editor.selection) {
-    const selection = editor.selection;
-    if (JSON.stringify(path) === JSON.stringify(selection.anchor.path)) {
-      const range = {
-        ...selection,
-        highlight: true,
-        highlightType: 'selection',
-        isSelection: true,
-      };
-      if (Range.isExpanded(range)) {
-        ranges.push(range);
-      }
-    }
-  }
-  return ranges;
-}

package/packages/volto-slate/src/editor/deserialize.js

@@ -1,185 +0,0 @@
-import { jsx } from 'slate-hyperscript';
-import { Text } from 'slate';
-// import { isWhitespace } from '@plone/volto-slate/utils';
-import { TD, TH, COMMENT, ELEMENT_NODE, TEXT_NODE } from '../constants';
-
-import { collapseInlineSpace } from './utils';
-
-/**
- * Deserialize to a Slate Node, an Array of Slate Nodes or null
- *
- * One particularity of this function is that it tries to do
- * a "perception-based" conversion. For example, in html, multiple whitespaces
- * display as a single space. A new line character in text is actually rendered
- * as a space, etc. So we try to meet user's expectations that when they
- * copy/paste content, we'll preserve the aspect of their text.
- *
- * See https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace
- */
-export const deserialize = (
-  editor,
-  el,
-  options = { collapseWhitespace: true },
-) => {
-  const { htmlTagsToSlate } = editor;
-
-  if (el.nodeType === COMMENT) {
-    return null;
-  } else if (el.nodeType === TEXT_NODE) {
-    const text = options.collapseWhitespace
-      ? collapseInlineSpace(el)
-      : el.textContent;
-    return text
-      ? {
-          text,
-        }
-      : null;
-  } else if (el.nodeType !== ELEMENT_NODE) {
-    return null;
-  } else if (el.nodeName === 'BR') {
-    // gets merged with sibling text nodes by Slate normalization in insertData
-    return { text: '\n' };
-  }
-
-  if (el.getAttribute('data-slate-data')) {
-    return typeDeserialize(editor, el, options);
-  }
-
-  const { nodeName } = el;
-
-  if (htmlTagsToSlate[nodeName]) {
-    return htmlTagsToSlate[nodeName](editor, el, options);
-  }
-
-  // fallback deserializer, all unknown elements are "stripped"
-  return deserializeChildren(el, editor, options);
-};
-
-export const typeDeserialize = (editor, el, options) => {
-  const jsData = el.getAttribute('data-slate-data');
-  const { type, data } = JSON.parse(jsData);
-  return jsx(
-    'element',
-    { type, data },
-    deserializeChildren(el, editor, options),
-  );
-};
-
-export const deserializeChildren = (parent, editor, options) =>
-  Array.from(parent.childNodes)
-    .map((el) => deserialize(editor, el, options))
-    .flat();
-
-export const blockTagDeserializer = (tagname) => (editor, el, options) => {
-  // if (tagname === 'h2') debugger;
-  let children = deserializeChildren(el, editor, options).filter(
-    (n) => n !== null,
-  );
-
-  if (
-    [TD, TH].includes(tagname) &&
-    children.length > 0 &&
-    typeof children[0] === 'string'
-  ) {
-    // TODO: should here be handled the cases when there are more strings in
-    // `children` or when there are besides strings other types of nodes too?
-    const p = { type: 'div', children: [{ text: '' }] };
-    p.children[0].text = children[0];
-    children = [p];
-  }
-
-  // normalizes block elements so that they're never empty
-  // Avoids a hard crash from the Slate editor
-  const hasValidChildren = children.length && children.find((c) => !!c);
-  if (!hasValidChildren) {
-    children = [{ text: '' }];
-  }
-
-  return jsx('element', { type: tagname }, children);
-};
-
-export const bodyTagDeserializer = (editor, el, options) => {
-  return jsx('fragment', {}, deserializeChildren(el, editor, options));
-};
-
-export const inlineTagDeserializer = (attrs) => (editor, el, options) => {
-  return deserializeChildren(el, editor, options).map((child) => {
-    const res =
-      Text.isText(child) || typeof child === 'string'
-        ? jsx('text', attrs, child)
-        : {
-            ...child,
-            attrs, // pass the inline attrs as separate object
-          };
-    return res;
-  });
-};
-
-export const spanTagDeserializer = (editor, el, options) => {
-  const style = el.getAttribute('style') || '';
-  let children = el.childNodes;
-
-  if (
-    // handle formatting from OpenOffice
-    children.length === 1 &&
-    children[0].nodeType === TEXT_NODE &&
-    children[0].textContent === '\n'
-  ) {
-    return jsx('text', {}, ' ');
-  }
-  children = deserializeChildren(el, editor, options);
-
-  // whitespace is replaced by deserialize() with null;
-  children = children.map((c) => (c === null ? '' : c));
-
-  // TODO: handle sub/sup as <sub> and <sup>
-  // Handle Google Docs' <sub> formatting
-  if (style.replace(/\s/g, '').indexOf('vertical-align:sub') > -1) {
-    const attrs = { sub: true };
-    return children.map((child) => {
-      return jsx('text', attrs, child);
-    });
-  }
-
-  // Handle Google Docs' <sup> formatting
-  if (style.replace(/\s/g, '').indexOf('vertical-align:super') > -1) {
-    const attrs = { sup: true };
-    return children.map((child) => {
-      return jsx('text', attrs, child);
-    });
-  }
-
-  const res = children.find((c) => typeof c !== 'string')
-    ? children
-    : jsx('text', {}, children);
-
-  return res;
-};
-
-export const bTagDeserializer = (editor, el, options) => {
-  // Google Docs does weird things with <b> tag
-  return (el.getAttribute('id') || '').indexOf('docs-internal-guid') > -1
-    ? deserializeChildren(el, editor, options)
-    : jsx('element', { type: 'b' }, deserializeChildren(el, editor, options));
-};
-
-export const codeTagDeserializer = (editor, el, options) => {
-  return jsx('element', { type: 'code' }, el.textContent);
-};
-
-export const preTagDeserializer = (editor, el, options) => {
-  // Based on Slate example implementation. Replaces <pre> tags with <code>.
-  // Comment: I don't know how good of an idea is this. I'd rather have two
-  // separate formats: "preserve whitespace" and "code". This feels like a hack
-  const { nodeName } = el;
-  let parent = el;
-
-  if (el.childNodes[0] && el.childNodes[0].nodeName === 'CODE') {
-    parent = el.childNodes[0];
-    return codeTagDeserializer(editor, parent, options);
-  }
-
-  return blockTagDeserializer(nodeName)(editor, parent, options);
-};
-
-export default deserialize;

package/packages/volto-slate/src/editor/extensions/index.js

@@ -1,6 +0,0 @@
-export * from './insertBreak';
-export * from './insertData';
-export * from './isInline';
-export * from './withDeserializers';
-export * from './normalizeNode';
-export * from './normalizeExternalData';

package/packages/volto-slate/src/editor/extensions/insertBreak.js

@@ -1,15 +0,0 @@
-import { Transforms, Range } from 'slate';
-
-export const withDeleteSelectionOnEnter = (editor) => {
-  const { insertBreak } = editor;
-
-  editor.insertBreak = () => {
-    // if selection is expanded, delete it
-    if (editor?.selection && Range.isExpanded(editor.selection)) {
-      Transforms.delete(editor);
-    }
-    return insertBreak();
-  };
-
-  return editor;
-};