@plone/volto-slate 18.0.0-alpha.4

package/src/editor/extensions/insertData.js

@@ -0,0 +1,161 @@
+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(editor, 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/src/editor/extensions/isInline.js

@@ -0,0 +1,14 @@
+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/src/editor/extensions/normalizeExternalData.js

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

package/src/editor/extensions/normalizeNode.js

@@ -0,0 +1,48 @@
+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/src/editor/extensions/withDeserializers.js

@@ -0,0 +1,15 @@
+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/src/editor/extensions/withTestingFeatures.jsx

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

@@ -0,0 +1,14 @@
+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/src/editor/less/editor.less

@@ -0,0 +1,173 @@
+@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/src/editor/less/globals.less

@@ -0,0 +1,18 @@
+/* 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/src/editor/less/slate.less

@@ -0,0 +1,28 @@
+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/src/editor/plugins/AdvancedLink/deserialize.js

@@ -0,0 +1,90 @@
+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/src/editor/plugins/AdvancedLink/extensions.js

@@ -0,0 +1,32 @@
+// 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;
+};