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

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

@@ -1,159 +0,0 @@
-import { Editor, Text, Transforms } from 'slate';
-import { deserialize } from '@plone/volto-slate/editor/deserialize';
-import {
-  createBlock,
-  createDefaultBlock,
-  MIMETypeName,
-  normalizeExternalData,
-} from '@plone/volto-slate/utils';
-import { isBlockActive } from '../../utils/blocks';
-
-export const insertData = (editor) => {
-  editor.dataTransferHandlers = {
-    ...editor.dataTransferHandlers,
-    'application/x-slate-fragment': (dt, fullMime) => {
-      const decoded = decodeURIComponent(window.atob(dt));
-      const parsed = JSON.parse(decoded);
-      editor.beforeInsertFragment && editor.beforeInsertFragment(parsed);
-      editor.insertFragment(parsed);
-
-      return true;
-    },
-    'text/html': (dt, fullMime) => {
-      const parsed = new DOMParser().parseFromString(dt, 'text/html');
-
-      const body =
-        parsed.getElementsByTagName('google-sheets-html-origin').length > 0
-          ? parsed.querySelector('google-sheets-html-origin > table')
-          : parsed.body;
-
-      let fragment;
-
-      // eslint-disable-next-line no-console
-      console.debug('clipboard operation', {
-        clipboard: dt,
-        parsedBody: body,
-      });
-
-      const val = deserialize(editor, body);
-      fragment = Array.isArray(val) ? val : [val];
-      fragment = editor.normalizeExternalData(fragment);
-
-      editor.insertFragment(fragment);
-
-      // eslint-disable-next-line no-console
-      console.debug('result clipboard operation', {
-        clipboard: dt,
-        parsedBody: body,
-        deserializedValue: val,
-        normalizedFragment: fragment,
-        editorChildren: editor.children,
-      });
-
-      return true;
-    },
-    'text/plain': (dt, fullMime) => {
-      const text = dt;
-      if (!text) return;
-
-      const paras = text.split('\n');
-
-      // If just 1 line insert text
-      if (paras.length === 1) {
-        Transforms.insertText(editor, paras[0]);
-        return true;
-      }
-
-      // Check if inside a list
-      const fragment =
-        isBlockActive(editor, 'ul') || isBlockActive(editor, 'ol')
-          ? paras.map((p) => createBlock('li', [{ text: p }]))
-          : paras.map((p) => createDefaultBlock([{ text: p }]));
-
-      // check if fragment is p with text and insert as fragment if so
-      const fragmentContainsText = (f) => {
-        var trigger = false;
-        if (f && f[0]) {
-          f.forEach((frag) => {
-            if (frag.type === 'p') {
-              if (frag.children) {
-                frag.children.forEach((child) => {
-                  if (child.text) {
-                    trigger = true;
-                  }
-                });
-              }
-            }
-          });
-        }
-        return trigger;
-      };
-
-      // When there's already text in the editor, insert a fragment, not nodes
-      const containsText = fragmentContainsText(fragment);
-      if (fragment && containsText) {
-        Transforms.insertFragment(editor, fragment);
-      }
-
-      if (Editor.string(editor, [])) {
-        if (
-          Array.isArray(fragment) &&
-          fragment.findIndex((b) => Editor.isInline(b) || Text.isText(b)) > -1
-        ) {
-          // console.log('insert fragment', fragment);
-          // TODO: we want normalization also when dealing with fragments
-          Transforms.insertFragment(editor, fragment);
-          return true;
-        }
-      }
-
-      // always normalize when dealing with plain text
-      const nodes = normalizeExternalData(editor, fragment);
-      if (!containsText) {
-        Transforms.insertNodes(editor, nodes);
-      }
-
-      return true;
-    },
-  };
-
-  // TODO: use the rtf data to get the embedded images.
-  // const text = data.getData('text/rtf');
-
-  const { insertData } = editor;
-
-  // TODO: move this to extensions/insertData
-  // TODO: update and improve comments & docs related to
-  // `dataTransferFormatsOrder` and `dataTransferHandlers` features
-  editor.insertData = (data) => {
-    if (editor.beforeInsertData) {
-      editor.beforeInsertData(data);
-    }
-
-    for (let i = 0; i < editor.dataTransferFormatsOrder.length; ++i) {
-      const dt = editor.dataTransferFormatsOrder[i];
-      if (dt === 'files') {
-        const { files } = data;
-        if (files && files.length > 0) {
-          // or handled here
-          return editor.dataTransferHandlers['files'](files);
-        }
-        continue;
-      }
-      const satisfyingFormats = data.types.filter((y) =>
-        new MIMETypeName(dt).matches(new MIMETypeName(y)),
-      );
-      for (let j = 0; j < satisfyingFormats.length; ++j) {
-        const y = satisfyingFormats[j];
-        if (editor.dataTransferHandlers[dt](data.getData(y), y)) {
-          // handled here
-          return true;
-        }
-      }
-    }
-    // not handled until this point
-    return insertData(data);
-  };
-
-  return editor;
-};

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

@@ -1,14 +0,0 @@
-import config from '@plone/volto/registry';
-
-export const isInline = (editor) => {
-  const { isInline } = editor;
-  const { slate } = config.settings;
-
-  editor.isInline = (element) => {
-    return element && slate.inlineElements.includes(element.type)
-      ? true
-      : isInline(element);
-  };
-
-  return editor;
-};

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

@@ -1,8 +0,0 @@
-import { normalizeExternalData as normalize } from '@plone/volto-slate/utils';
-
-export function normalizeExternalData(editor) {
-  editor.normalizeExternalData = (fragment) => {
-    return normalize(fragment);
-  };
-  return editor;
-}

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

@@ -1,48 +0,0 @@
-import { Text, Transforms, Element, Node } from 'slate'; // Editor,
-import config from '@plone/volto/registry';
-
-export const normalizeNode = (editor) => {
-  // enforce list rules (no block elements, only ol/ul/li as possible children
-  const { normalizeNode } = editor;
-  const { slate } = config.settings;
-
-  const validListElements = [...slate.listTypes, slate.listItemType];
-
-  editor.normalizeNode = (entry) => {
-    const [node, path] = entry;
-
-    const isTextNode = Text.isText(node);
-    const isInlineNode = editor.isInline(node);
-    const isElementNode = Element.isElement(node);
-    const isListTypeNode = slate.listTypes.includes(node.type);
-
-    // delete childless ul/ol nodes
-    if (!isTextNode && isElementNode && !isInlineNode && isListTypeNode) {
-      if ((node.children || []).length === 0) {
-        Transforms.removeNodes(editor, { at: path });
-        return;
-      }
-    }
-
-    if (isElementNode && 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 });
-
-          // Alternate strategy, need to investigate
-          // const newParent = { type: slate.defaultBlockType, children: [] };
-          // Transforms.wrapNodes(editor, newParent, { at: childPath });
-          return;
-        }
-      }
-    }
-
-    normalizeNode(entry);
-  };
-
-  return editor;
-};

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

@@ -1,15 +0,0 @@
-import config from '@plone/volto/registry';
-
-export const withDeserializers = (editor) => {
-  // Saving a copy of these deserializers in the editor makes possible to have
-  // different deserializers per editor
-  //
-  // For example, for the TextBlock deserializer we exclude h1,h4,h5,h6 tags
-  // and handle lists very differently
-
-  const { slate } = config.settings;
-
-  editor.htmlTagsToSlate = slate.htmlTagsToSlate;
-
-  return editor;
-};

package/packages/volto-slate/src/editor/extensions/withTestingFeatures.jsx

@@ -1,84 +0,0 @@
-import React, { useMemo } from 'react';
-import { ReactEditor } from 'slate-react';
-import { omit } from 'lodash';
-
-const withTestingFeatures = (WrappedComponent) => {
-  return (props) => {
-    let ref = React.useRef();
-
-    // Source: https://stackoverflow.com/a/53623568/258462
-    const onTestSelectWord = (val) => {
-      let slateEditor =
-        val.detail.parentElement.parentElement.parentElement.parentElement;
-
-      // Events are special, can't use spread or Object.keys
-      let selectEvent = {};
-      for (let key in val) {
-        if (key === 'currentTarget') {
-          selectEvent['currentTarget'] = slateEditor;
-        } else if (key === 'type') {
-          selectEvent['type'] = 'select';
-        } else {
-          selectEvent[key] = val[key];
-        }
-      }
-
-      // Make selection
-      let selection = window.getSelection();
-      let range = document.createRange();
-      range.selectNodeContents(val.detail);
-      selection.removeAllRanges();
-      selection.addRange(range);
-
-      // Slate monitors DOM selection changes automatically
-    };
-
-    const onTestSelectRange = (val) => {
-      const newDomRange =
-        val && ReactEditor.toDOMRange(window.focusedSlateEditor, val.detail);
-
-      let selection = window.getSelection();
-      selection.removeAllRanges();
-      selection.addRange(newDomRange);
-    };
-
-    React.useEffect(() => {
-      document.addEventListener('Test_SelectWord', onTestSelectWord);
-      document.addEventListener('Test_SelectRange', onTestSelectRange);
-      return () => {
-        document.removeEventListener('Test_SelectWord', onTestSelectWord);
-        document.removeEventListener('Test_SelectRange', onTestSelectRange);
-      };
-    });
-
-    const handleFocus = React.useCallback(() => {
-      window.focusedSlateEditor = ref?.current;
-      if (props.onFocus) {
-        props.onFocus();
-      }
-    }, [props]);
-
-    const managedProps = useMemo(() => {
-      return omit(props, 'onFocus');
-    }, [props]);
-
-    return (
-      <WrappedComponent
-        debug
-        debug-values={{
-          'data-slate-value': JSON.stringify(props.value, null, 2),
-          'data-slate-selection': JSON.stringify(
-            ref?.current?.selection,
-            null,
-            2,
-          ),
-        }}
-        testingEditorRef={ref}
-        onFocus={handleFocus}
-        {...managedProps}
-      />
-    );
-  };
-};
-
-export default withTestingFeatures;

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

@@ -1,14 +0,0 @@
-import * as slateConfig from './config';
-import installDefaultPlugins from './plugins';
-export { default as SlateEditor } from './SlateEditor';
-export { default as EditorReference } from './EditorReference';
-
-export default function applyConfig(config) {
-  config.settings.slate = {
-    ...slateConfig,
-    // showExpandedToolbar: false,
-    enableExpandedToolbar: false,
-  };
-  config = installDefaultPlugins(config);
-  return config;
-}

package/packages/volto-slate/src/editor/less/editor.less

@@ -1,173 +0,0 @@
-@import 'globals.less';
-
-@addon: '@plone/volto-slate';
-@addontype: 'editor';
-@addonelement: 'slate';
-
-.loadAddonVariables();
-
-// TODO: move these to less variables
-
-& {
-  .slate-inline-toolbar {
-    position: absolute;
-
-    /* should be above admin panes (100), and below the Link modal form (1000) */
-    z-index: 1500;
-
-    top: -10000px;
-    left: -10000px;
-
-    max-width: 100vw;
-    opacity: 0;
-    // transition: opacity 0.5s;
-
-    &.upper {
-      transform: translateY(-100%);
-    }
-  }
-
-  .toolbar-wrapper.active {
-    margin-bottom: 0.6em;
-  }
-
-  .slate-editor p {
-    /* In editor the <p> are wrapped in weird markup */
-    margin-bottom: 0 !important;
-  }
-
-  .slate-toolbar {
-    display: flex;
-    box-sizing: border-box;
-    padding: 3px;
-    border: none;
-    background: #fff;
-    border-radius: 2px;
-    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    font-family: 'Poppins', 'Helvetica Neue', Arial, Helvetica, sans-serif;
-    font-size: 1rem;
-    font-weight: normal;
-
-    .expando {
-      flex-grow: 1;
-      background-color: #fff;
-    }
-
-    .toolbar-separator {
-      display: inline-block;
-      height: 32px;
-      border-right: 1px solid #ddd;
-      margin: 0 0.5rem;
-    }
-
-    .toolbar-separator + .button-wrapper {
-      margin-left: 0px;
-    }
-
-    .button-wrapper {
-      display: inline-block;
-      margin-left: 3px;
-
-      .ui.tiny.compact.icon.toggle.button {
-        width: 32px;
-        height: 32px;
-        box-sizing: border-box;
-        padding: 4px !important;
-        border: 0;
-        background: rgba(255, 255, 255, 0.975);
-        border-radius: 1px;
-        color: @brown;
-        font-size: 18px;
-        vertical-align: bottom;
-
-        & > svg {
-          fill: #888;
-        }
-
-        &:hover,
-        &:focus {
-          background: #f3f3f3;
-          outline: 0; /* reset for :focus */
-        }
-
-        &.active {
-          // TODO: stop using !important, use smth better
-          background: #efefef !important;
-          border-radius: 3px;
-          box-shadow: inset 0 0 0 1px @blue !important;
-          color: @blue !important;
-
-          & > svg {
-            fill: #444;
-          }
-        }
-      }
-    }
-
-    .ui.buttons {
-      width: 100%;
-    }
-
-    .ui.button:not(.icon) > .icon:not(.button):not(.dropdown) {
-      // TODO: is it possible to not use !important here and override button.less?
-      margin: auto auto auto auto !important;
-    }
-
-    .ui.button:last-child {
-      // TODO: is it possible to not use !important here and override button.less?
-      margin-right: 0 !important;
-    }
-  }
-
-  .highlight-selection {
-    background-color: #8080803d;
-    // color: white;
-  }
-
-  .ui.input.editor-link input {
-    padding: 0;
-    border: none;
-  }
-}
-
-.sidebar-container {
-  .slate-editor {
-    ul {
-      li {
-        display: list-item;
-        padding: 0;
-
-        span {
-          display: initial;
-        }
-      }
-    }
-  }
-}
-
-.power-user-menu {
-  position: absolute;
-  z-index: 10;
-  top: 29px;
-  left: -9px;
-  width: 210px;
-  background-color: rgba(255, 255, 255, 0.975);
-  border-radius: 2px;
-  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
-
-  .ui.menu {
-    border: 0;
-    border-radius: 2px;
-
-    .icon {
-      margin-right: 12px;
-      vertical-align: middle;
-    }
-
-    .item.active {
-      background: #efefef !important;
-    }
-  }
-}
-
-.loadAddonOverrides();

package/packages/volto-slate/src/editor/less/globals.less

@@ -1,18 +0,0 @@
-/* Needed by semantic.less */
-@type: 'extra';
-@element: 'custom';
-
-@import (multiple, reference, optional) '../../theme.config';
-
-/* Enables customization of addons */
-.loadAddonOverrides() {
-  @import (optional)
-    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.overrides';
-}
-
-/* Helper to load variables */
-.loadAddonVariables() {
-  @import (optional) '@{addonelement}.variables';
-  @import (optional)
-    '@{siteFolder}/../addons/@{addon}/@{addontype}s/@{addonelement}.variables';
-}

package/packages/volto-slate/src/editor/less/slate.less

@@ -1,28 +0,0 @@
-h1,
-h2,
-h3,
-h4 {
-  &:hover {
-    a.anchor {
-      svg {
-        opacity: 1;
-        transform: rotate(15deg);
-      }
-    }
-  }
-
-  a.anchor {
-    position: absolute;
-    display: inline-block;
-    margin-left: 5px;
-    vertical-align: middle;
-
-    svg {
-      width: 1.6ch;
-      fill: #42526e;
-      opacity: 0;
-      transform: rotate(15deg) translate(-8px, 2px);
-      transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
-    }
-  }
-}

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

@@ -1,90 +0,0 @@
-import { jsx } from 'slate-hyperscript';
-import { LINK } from '@plone/volto-slate/constants';
-import { deserialize } from '@plone/volto-slate/editor/deserialize';
-import { isEmpty } from 'lodash';
-// import { Editor } from 'slate';
-
-/**
- * @param {HTMLAnchorElement} aEl
- */
-const hasValidTarget = (aEl) => {
-  return (
-    aEl.hasAttribute('target') &&
-    ['_blank', '_self', '_parent', '_top'].includes(aEl.getAttribute('target'))
-  );
-};
-
-/**
- * This is almost the inverse function of LinkElement render function at
- * src/editor/plugins/Link/render.jsx
- * @param {Editor} editor
- * @param {HTMLElement} el
- */
-export const linkDeserializer = (editor, el) => {
-  let parent = el;
-
-  let children = Array.from(parent.childNodes)
-    .map((el) => deserialize(editor, el))
-    .flat();
-
-  if (isEmpty(children)) {
-    //nodes must contain at least one Text descendant
-    children = [{ text: '' }];
-  }
-
-  const attrs = {
-    type: LINK,
-    url: el.getAttribute('href'),
-    data: {},
-  };
-
-  if (el.hasAttribute('title')) attrs.data.title = el.getAttribute('title');
-
-  const targetSet = hasValidTarget(el);
-
-  // We don't use this isExternalLink because links can come w/o a target from
-  // outside of Volto Slate blocks and still be external.
-  // let isExternalLink;
-  if (targetSet) {
-    attrs.data = attrs.data || {};
-    attrs.data.link = attrs.data.link || {};
-    attrs.data.link.external = { target: el.getAttribute('target') };
-    // isExternalLink = true;
-  } else {
-    // isExternalLink = false;
-  }
-
-  if (attrs.url?.startsWith('mailto:')) {
-    // TODO: improve security because we are using regex-es
-    attrs.data = attrs.data || {};
-    attrs.data.link = attrs.data.link || {};
-    attrs.data.link.email = {
-      email_address: attrs.url
-        .replace(/^mailto:/g, '')
-        .replace(/\?subject=.+$/g, ''),
-    };
-
-    const subject = attrs.url.match(/\?subject=(.*)$/);
-    if (subject && subject[1]) {
-      attrs.data.link.email.email_subject = subject[1];
-    }
-  } else if (/* !isExternalLink &&  */ attrs.url?.startsWith('/')) {
-    // TODO: improve this condition if it is not very good
-    attrs.data = attrs.data || {};
-    attrs.data.link = attrs.data.link || {};
-    attrs.data.link.internal = { internal_link: [{ '@id': attrs.url }] };
-  } else {
-    // the general condition: if it is external link
-    attrs.data = attrs.data || {};
-    attrs.data.link = attrs.data.link || {};
-    attrs.data.link.external = attrs.data.link.external || {};
-    attrs.data.link.external.external_link = attrs.url;
-    if (!targetSet) {
-      attrs.data.link.external.target = '_self';
-    }
-  }
-
-  return jsx('element', attrs, children);
-};
-
-linkDeserializer.id = 'linkDeserializer';

package/packages/volto-slate/src/editor/plugins/AdvancedLink/extensions.js

@@ -1,32 +0,0 @@
-// import isUrl from 'is-url';
-// import { wrapLink } from './utils';
-import { LINK } from '@plone/volto-slate/constants';
-
-export const withLink = (editor) => {
-  // const { insertData, insertText, isInline } = editor;
-
-  const { isInline } = editor;
-
-  editor.isInline = (element) => {
-    return element && element.type === LINK ? true : isInline(element);
-  };
-
-  // editor.insertText = (text) => {
-  //   if (text && isUrl(text)) {
-  //     wrapLink(editor, text);
-  //   } else {
-  //     insertText(text);
-  //   }
-  // };
-  //
-  // editor.insertData = (data) => {
-  //   const text = data.getData('text/plain');
-  //
-  //   if (text && isUrl(text)) {
-  //     wrapLink(editor, text);
-  //   } else {
-  //     insertData(data);
-  //   }
-  // };
-  return editor;
-};