@eeacms/volto-cca-policy 0.1.13 → 0.1.14

package/src/customizations/@plone/volto-slate/editor/config.jsx

@@ -0,0 +1,346 @@
+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 '@plone/volto-slate/editor/ui';
+import { highlightSelection } from '@plone/volto-slate/editor/decorate'; // highlightByType,
+import {
+  insertData,
+  isInline,
+  withDeleteSelectionOnEnter,
+  withDeserializers,
+  normalizeNode,
+  normalizeExternalData,
+} from '@plone/volto-slate/editor/extensions';
+import {
+  // inlineTagDeserializer,
+  bTagDeserializer,
+  blockTagDeserializer,
+  bodyTagDeserializer,
+  codeTagDeserializer,
+  preTagDeserializer,
+  removeTagDeserializer,
+  spanTagDeserializer,
+} from './deserialize';
+
+// 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: ({ attributes, children }) => <h1 {...attributes}>{children}</h1>,
+  h2: ({ attributes, children }) => <h2 {...attributes}>{children}</h2>,
+  h3: ({ attributes, children }) => <h3 {...attributes}>{children}</h3>,
+  h4: ({ attributes, children }) => <h4 {...attributes}>{children}</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'),
+
+  COLGROUP: removeTagDeserializer,
+};
+
+// 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/src/customizations/@plone/volto-slate/editor/deserialize.js

@@ -0,0 +1,195 @@
+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 '@plone/volto-slate/constants';
+
+import { collapseInlineSpace } from '@plone/volto-slate/editor/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 const removeTagDeserializer = (editor, el, options) => {
+  return null;
+};
+
+export default deserialize;

package/src/customizations/@plone/volto-slate/editor/extensions/normalizeNode.js

@@ -0,0 +1,93 @@
+import { Text, Transforms, Element, Node, Path } from 'slate'; // Editor,
+import config from '@plone/volto/registry';
+import { isEqual } from 'lodash';
+
+const hasNoText = (node) => {
+  const texts = Array.from(Node.texts(node));
+  const text = texts.reduce((acc, [child]) => `${acc}${child?.text || ''}`, '');
+  return text === '';
+};
+
+export const normalizeNode = (editor) => {
+  const { normalizeNode } = editor;
+  const { slate } = config.settings;
+
+  // slate.listTypes is 'ol', 'ul'
+  const validListElements = [...slate.listTypes, slate.listItemType];
+
+  editor.normalizeNode = (entry) => {
+    const [node, path] = entry;
+
+    const isInlineNode = Text.isText(node) || editor.isInline(node);
+    const isListTypeNode =
+      !isInlineNode &&
+      Element.isElement(node) &&
+      slate.listTypes.includes(node.type);
+
+    // delete childless ul/ol nodes
+    if (isListTypeNode) {
+      if ((node.children || []).length === 0) {
+        Transforms.removeNodes(editor, { at: path });
+        return;
+      }
+    }
+
+    if (node.type === slate.listItemType) {
+      // if we have inline text nodes, we lift any found <ul/ol> as sibling
+      if (
+        node.children?.length &&
+        (Text.isText(node.children[0]) || editor.isInline(node.children[0]))
+      ) {
+        const toLift = Array.from(Node.elements(node))
+          .filter(([childNode, childRelPath]) => {
+            return (
+              childRelPath.length === 1 &&
+              slate.listTypes.includes(childNode?.type)
+            );
+          })
+          .map(([n, p]) => [...path, ...p]);
+        if (toLift.length) {
+          Transforms.liftNodes(editor, {
+            at: path,
+            split: true,
+            match: (childNode, childPath) =>
+              Path.isChild(childPath, path) &&
+              toLift.findIndex((f) => isEqual(f, childPath)) > -1,
+          });
+          return;
+        }
+      }
+
+      // after we hit enter in a list item, remove any leftover duplicated
+      // elements. Slate splits the elements (and copies it to the next line
+      const emptyEntries = Array.from(Node.elements(node))
+        .filter(([childNode, childRelPath]) => childRelPath.length === 1)
+        .filter(([childNode, childRelPath]) => hasNoText(childNode));
+
+      const [toRemove] = emptyEntries;
+      if (toRemove) {
+        const [, childRelPath] = toRemove;
+        const at = [...path, ...childRelPath];
+        Transforms.removeNodes(editor, { at });
+        return;
+      }
+    }
+
+    if (isListTypeNode) {
+      // lift all child nodes of ul/ol that are not ul/ol/li
+      for (const [child, childPath] of Node.children(editor, path)) {
+        if (
+          !validListElements.includes(child.type) &&
+          !validListElements.includes(node.type)
+        ) {
+          Transforms.liftNodes(editor, { at: childPath, split: true });
+          return;
+        }
+      }
+    }
+
+    normalizeNode(entry);
+  };
+
+  return editor;
+};

package/src/customizations/@plone/volto-slate/editor/plugins/Image/deconstruct.js

@@ -0,0 +1,32 @@
+import { v4 as uuid } from 'uuid';
+import { Editor, Transforms } from 'slate';
+import { IMAGE } from '@plone/volto-slate/constants';
+
+export function syncCreateImageBlock(url) {
+  const id = uuid();
+  const block = {
+    '@type': 'image',
+    url,
+  };
+  return [id, block];
+}
+
+// This function is used by deconstructToVoltoBlocks, so not directly by the
+// <SlateEditor>. File exists here because there's no "blocks/Image" folder
+export const extractImages = (editor, pathRef) => {
+  const imageNodes = Array.from(
+    Editor.nodes(editor, {
+      at: pathRef.current,
+      match: (node) => node.type === IMAGE,
+    }),
+  );
+  const images = imageNodes.map(([el, path]) => el);
+  Transforms.removeNodes(editor, {
+    at: pathRef.current,
+    match: (node) => node.type === IMAGE,
+  });
+
+  return images.map((el) => syncCreateImageBlock(el.url));
+};
+
+extractImages.id = 'extractImages';

package/src/customizations/@plone/volto-slate/editor/plugins/Image/index.js

@@ -0,0 +1,16 @@
+import { withImage } from '@plone/volto-slate/editor/plugins/Image/extensions';
+import { ImageElement } from '@plone/volto-slate/editor/plugins/Image/render';
+import { extractImages } from './deconstruct';
+
+export default function install(config) {
+  const { slate } = config.settings;
+
+  slate.extensions = [...(slate.extensions || []), withImage];
+  slate.elements.img = ImageElement;
+  slate.voltoBlockEmiters = [
+    ...(config.settings.slate.voltoBlockEmiters || []),
+    extractImages,
+  ];
+
+  return config;
+}