design-comuni-plone-theme 11.10.2 → 12.0.0-alpha.1

package/src/config/Slate/handlers.js

@@ -0,0 +1,243 @@
+import { Node, Editor } from 'slate';
+import {
+  goDown,
+  goUp,
+  softBreak,
+  unwrapEmptyString,
+} from '@plone/volto-slate/blocks/Text/keyboard';
+
+import {
+  isCursorAtBlockStart,
+  isCursorAtBlockEnd,
+  getNextVoltoBlock,
+  getPreviousVoltoBlock,
+  createDefaultBlock,
+  getCurrentListItem,
+} from '@plone/volto-slate/utils';
+import config from '@plone/volto/registry';
+
+const focusPrev = (props) => {
+  const getBlockProps = props.editor.getBlockProps;
+  const {
+    focusPrevField,
+    showToolbar,
+    onFocusPreviousBlock,
+    block,
+    blockNode,
+    properties,
+    index,
+    saveSlateBlockSelection,
+  } = getBlockProps
+    ? getBlockProps()
+    : {
+        focusPrevField: null,
+        showToolbar: true,
+        onFocusPreviousBlock: null,
+        block: null,
+        blockNode: null,
+        properties: null,
+        index: null,
+        saveSlateBlockSelection: null,
+      };
+
+  let isAtStart = false;
+
+  if (showToolbar) {
+    isAtStart = isCursorAtBlockStart(props.editor);
+  } else {
+    let _range = document.getSelection().getRangeAt(0);
+    let range = _range.cloneRange();
+    range.selectNodeContents(props.event.target);
+    range.setEnd(_range.endContainer, _range.endOffset);
+    isAtStart = range.toString().length === 0;
+    //isAtStart = props.event.target.selectionStart === 0;
+  }
+
+  if (isAtStart) {
+    //move to prev field
+    if (focusPrevField) {
+      props.event.stopPropagation();
+      return focusPrevField();
+    }
+
+    //handle SimpleTextEditorWidget -> move to prev block
+    if (!showToolbar && onFocusPreviousBlock) {
+      const prev = getPreviousVoltoBlock(index, properties);
+      if (!prev || prev[0]?.['@type'] !== 'slate')
+        return onFocusPreviousBlock(block, blockNode.current);
+      const [slateBlock, id] = prev;
+      const pseudoEditor = {
+        children: slateBlock.value || [createDefaultBlock()],
+      };
+      const match = Node.last(pseudoEditor, []);
+      if (!match) return onFocusPreviousBlock(block, blockNode.current);
+
+      const [node, path] = match;
+      const point = { path, offset: (node?.text || '').length };
+      const selection = { anchor: point, focus: point };
+      saveSlateBlockSelection(id, selection);
+      return onFocusPreviousBlock(block, blockNode.current);
+    }
+  }
+
+  //handle SlateEditor arrow-up key
+  return goUp(props);
+};
+
+const goToNextVoltoBlock = (props) => {
+  const {
+    onFocusNextBlock,
+    block,
+    blockNode,
+    properties,
+    index,
+    saveSlateBlockSelection,
+  } = props.editor.getBlockProps();
+
+  const next = getNextVoltoBlock(index, properties);
+  if (!next || next[0]?.['@type'] !== 'slate')
+    return onFocusNextBlock(block, blockNode.current);
+
+  const [slateBlock, id] = next;
+  const pseudoEditor = {
+    children: slateBlock.value || [createDefaultBlock()],
+  };
+  const match = Node.last(pseudoEditor, []);
+  if (!match) return onFocusNextBlock(block, blockNode.current);
+
+  const path = match[1];
+  const point = { path, offset: 0 };
+  const selection = { anchor: point, focus: point };
+  saveSlateBlockSelection(id, selection);
+  return onFocusNextBlock(block, blockNode.current);
+};
+const focusNext = (props) => {
+  const getBlockProps = props.editor.getBlockProps;
+  const {
+    focusNextField,
+    showToolbar,
+    onFocusNextBlock,
+    onSelectBlock,
+    onAddBlock,
+    index,
+  } = getBlockProps
+    ? getBlockProps()
+    : {
+        showToolbar: true,
+        focusNextField: null,
+        onFocusNextBlock: null,
+        onSelectBlock: null,
+        onAddBlock: null,
+      };
+
+  if (showToolbar) {
+    const [listItem] = getCurrentListItem(props.editor);
+    if (listItem) {
+      //managed by breaklist extension
+      return true;
+    }
+  }
+
+  props.event.preventDefault();
+  props.event.stopPropagation();
+  let isAtEnd = false;
+
+  if (showToolbar) {
+    isAtEnd = isCursorAtBlockEnd(props.editor);
+  } else {
+    let selection = document.getSelection();
+
+    if (selection && selection.rangeCount > 0) {
+      const _range = selection.getRangeAt(0);
+      let range = _range.cloneRange();
+      range.selectNodeContents(props.event.target);
+      range.setEnd(_range.endContainer, _range.endOffset);
+      isAtEnd =
+        range.toString().length === props.event.target.innerText?.length;
+      // isAtEnd =
+      //   props.event.target.selectionEnd === props.event.target.value?.length;
+    }
+  }
+
+  //move to next field
+  if (focusNextField) {
+    focusNextField();
+    return false;
+  }
+
+  if (isAtEnd) {
+    if (props.event.key === 'Enter' || props.event.keyCode === 13) {
+      onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+      return false;
+    } else {
+      //arrow-down key
+      //handle SimpleTextEditorWidget -> move to next block
+      if (!showToolbar && onFocusNextBlock) {
+        return goToNextVoltoBlock(props);
+      }
+    }
+  }
+
+  //handle SlateEditor arrow-down key
+  return goDown(props);
+};
+
+const breakInSimpleTextEditor = (props) => {
+  //disable break and softBreak (props.event.shiftKey) in SimpleTextEditorWidget
+  const getBlockProps = props.editor.getBlockProps;
+  const { showToolbar, focusNextField } = getBlockProps
+    ? getBlockProps()
+    : { showToolbar: true };
+  if (props.event.key === 'Enter' && !showToolbar) {
+    props.event.preventDefault();
+    if (focusNextField) {
+      focusNextField();
+      return false;
+    }
+    goToNextVoltoBlock(props);
+    return false;
+  }
+
+  return true;
+};
+
+const handleBreak = (props) => {
+  const getBlockProps = props.editor.getBlockProps;
+  const { showToolbar } = getBlockProps
+    ? getBlockProps()
+    : { showToolbar: true };
+
+  if (!showToolbar) {
+    return breakInSimpleTextEditor(props);
+  } else {
+    let ret = softBreak(props);
+    if (!ret) {
+      const [listItem] = props.editor.selection
+        ? getCurrentListItem(props.editor)
+        : [];
+      if (listItem) {
+        //managed by breaklist extension
+      } else {
+        props.event.preventDefault();
+        props.event.stopPropagation();
+        Editor.insertNode(props.editor, {
+          type: 'paragraph',
+          children: [{ text: '' }],
+        });
+        ret = true;
+      }
+    }
+    return ret;
+  }
+};
+
+export default function install(config) {
+  config.settings.slate.textblockDetachedKeyboardHandlers = {
+    ...config.settings.slate.textblockDetachedKeyboardHandlers,
+    Enter: [unwrapEmptyString, handleBreak, focusNext],
+    ArrowUp: [focusPrev],
+    ArrowDown: [focusNext],
+  };
+
+  return config;
+}

package/src/config/Slate/utils.js

@@ -0,0 +1,73 @@
+import { makeEditor } from '@plone/volto-slate/utils';
+import deserialize from '@plone/volto-slate/editor/deserialize';
+import {
+  createEmptyParagraph,
+  normalizeExternalData,
+} from '@plone/volto-slate/utils';
+
+export const insertToolbarButtons = (buttons = [], insertAfter = '', slate) => {
+  const insertAtToolbarButtons = slate.toolbarButtons.indexOf(insertAfter) + 1;
+  slate.toolbarButtons = [
+    ...slate.toolbarButtons.slice(0, insertAtToolbarButtons),
+    ...buttons,
+    ...slate.toolbarButtons.slice(insertAtToolbarButtons),
+  ].filter((el, index, array) => {
+    if (index > 0) {
+      //rimuovo i separatori consecutivi nel caso se ne siano creati
+      if (el === 'separator' && array[index - 1] === 'separator') return false;
+    }
+    return true;
+  });
+
+  const insertAtExpandedToolbarButtons =
+    slate.toolbarButtons.indexOf(insertAfter) + 1;
+  slate.expandedToolbarButtons = [
+    ...slate.expandedToolbarButtons.slice(0, insertAtExpandedToolbarButtons),
+    ...buttons,
+    ...slate.expandedToolbarButtons.slice(insertAtExpandedToolbarButtons),
+  ].filter((el, index, array) => {
+    if (index > 0) {
+      //rimuovo i separatori consecutivi nel caso se ne siano creati
+      if (el === 'separator' && array[index - 1] === 'separator') return false;
+    }
+    return true;
+  });
+
+  //rimuovo doppi separator
+};
+
+export const getRichTextWidgetToolbarButtons = (config) => {
+  const EXCLUDE_TOOLBAR_BUTTONS = ['textLarger', 'headings'];
+
+  let toolbarButtons = (config.settings.slate?.toolbarButtons ?? [])
+    .filter((b) => EXCLUDE_TOOLBAR_BUTTONS.indexOf(b) < 0)
+    .filter(
+      (e, index, array) =>
+        !(
+          e === 'separator' &&
+          (index === 0 || array[index - 1] === 'separator')
+        ), //rimuovi i separatori consecutivi e il primo elemento se è un separatore
+    );
+
+  return toolbarButtons;
+};
+
+export const fromHtml = (value) => {
+  const editor = makeEditor();
+  const html = value?.data || '';
+
+  const parsed = new DOMParser().parseFromString(html, 'text/html');
+  const body =
+    parsed.getElementsByTagName('google-sheets-html-origin').length > 0
+      ? parsed.querySelector('google-sheets-html-origin > table')
+      : parsed.body;
+  let data = deserialize(editor, body, { collapseWhitespace: false });
+  data = normalizeExternalData(editor, data);
+
+  // editor.children = data;
+  // Editor.normalize(editor);
+  // TODO: need to add {text: ""} placeholders between elements
+  const res = data.length ? data : [createEmptyParagraph()];
+  // console.log('from html', { html: value?.data, res });
+  return res;
+};

package/src/config/Widgets/widgets.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CharCounterTextareaWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CharCounterTextareaWidget';
 import CharCounterTextWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/CharCounterTextWidget';
 import { DatetimeWidget } from '@plone/volto/config/Widgets';
-import { ArrayWidget, WysiwygWidget } from '@plone/volto/components';
+import { ArrayWidget } from '@plone/volto/components';
 import { MultilingualWidget } from 'volto-multilingual-widget';
 import IconWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/IconWidget';
 import SubsiteSocialLinksWidget from 'design-comuni-plone-theme/components/ItaliaTheme/manage/Widgets/SubsiteSocialLinksWidget';
@@ -83,7 +83,6 @@ const getItaliaWidgets = (config) => {
     },
     widget: {
       ...config.widgets.widget,
-      richtext: WysiwygWidget,
       color_list: ColorListWidget,
       path_filters: PathFiltersWidget,
       location_filter: LocationFiltersWidget,

package/src/config/italiaConfig.js

@@ -34,7 +34,6 @@ import HandleAnchor from 'design-comuni-plone-theme/components/ItaliaTheme/AppEx
 import GenericAppExtras from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/GenericAppExtras';
 import PageLoader from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/PageLoader';
 import TrackFocus from 'design-comuni-plone-theme/components/ItaliaTheme/AppExtras/TrackFocus';
-import redraft from 'redraft';
 import { loadables as ItaliaLoadables } from 'design-comuni-plone-theme/config/loadables';
 
 // CTs icons
@@ -58,16 +57,14 @@ import faQuestionSVG from 'design-comuni-plone-theme/icons/question-solid.svg';
 import bandoSVG from 'design-comuni-plone-theme/icons/bando.svg';
 import logSVG from 'design-comuni-plone-theme/icons/log.svg';
 
-import applyRichTextConfig from 'design-comuni-plone-theme/config/RichTextEditor/config';
-
-import gdprPrivacyPanelConfig from 'design-comuni-plone-theme/config/volto-gdpr-privacy-defaultPanelConfig.js';
+import applyItaliaSlateConfig from 'design-comuni-plone-theme/config/Slate/config';
 
 import { schemaListing } from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/Listing/schema.js';
 
 import reducers from 'design-comuni-plone-theme/reducers';
 
-const ReleaseLog = loadable(() =>
-  import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
+const ReleaseLog = loadable(
+  () => import('design-comuni-plone-theme/components/ReleaseLog/ReleaseLog'),
 );
 
 const messages = defineMessages({
@@ -78,7 +75,7 @@ const messages = defineMessages({
 });
 
 export default function applyConfig(voltoConfig) {
-  let config = applyRichTextConfig(voltoConfig);
+  let config = applyItaliaSlateConfig(voltoConfig);
 
   /******************************************************************************
    * SETTINGS
@@ -191,7 +188,7 @@ export default function applyConfig(voltoConfig) {
       'social-settings': shareSVG,
       'release-log': logSVG,
     },
-    defaultBlockType: 'text',
+    //defaultBlockType: 'text',
     defaultExcludedFromSearch: {
       portalTypes: ['Image', 'File'],
     },
@@ -308,6 +305,7 @@ export default function applyConfig(voltoConfig) {
         'break',
         'testo_riquadro_semplice',
         'testo_riquadro_immagine',
+        'callout_block',
         'rssBlock',
         //se si aggiunge un nuovo blocco, verificare che in edit non ci siano bottoni che provocano il submit della form. Se succede, gestirli con e.prevenDefault() e.stopPropagation().
       ],
@@ -315,11 +313,6 @@ export default function applyConfig(voltoConfig) {
       showRestricted: false,
     },
 
-    'volto-gdpr-privacy': {
-      ...config.settings['volto-gdpr-privacy'],
-      defaultPanelConfig: gdprPrivacyPanelConfig,
-    },
-
     'volto-editablefooter': {
       ...config.settings['volto-editablefooter'],
       options: { socials: true, newsletterSubscribe: true },
@@ -410,6 +403,7 @@ export default function applyConfig(voltoConfig) {
     },
     hero: {
       ...config.blocks.blocksConfig.hero,
+      hasOwnFocusManagement: true,
       sidebarTab: 1,
     },
     html: {
@@ -417,22 +411,6 @@ export default function applyConfig(voltoConfig) {
       sidebarTab: 1,
     },
     rssBlock,
-    text: {
-      ...config.blocks.blocksConfig.text,
-      restricted: false,
-    },
-    slate: {
-      ...config.blocks.blocksConfig.slate,
-      restricted: true,
-    },
-    table: {
-      ...config.blocks.blocksConfig.table,
-      restricted: false,
-    },
-    slateTable: {
-      ...config.blocks.blocksConfig.slateTable,
-      restricted: true,
-    },
     maps: {
       ...config.blocks.blocksConfig.maps,
       restricted: true,
@@ -480,31 +458,6 @@ export default function applyConfig(voltoConfig) {
   // comment out the following line and add the leadimage behavior in Document.xml file
   delete config.blocks.blocksConfig['leadimage'];
 
-  // TOC block anchors not working, customizing tocEntry
-  // to also return draftJS block id
-  config.settings.slate = {
-    ...(config.settings.slate ?? {}),
-    topLevelTargetElements: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-  };
-  config.blocks.blocksConfig.text = {
-    ...config.blocks.blocksConfig.text,
-    tocEntry: (block = {}) => {
-      const draft = redraft(
-        block.text,
-        config.settings.richtextViewSettings.ToHTMLRenderers,
-        config.settings.richtextViewSettings.ToHTMLOptions,
-      );
-      const type = draft?.[0]?.[0]?.type;
-
-      return config.settings.slate.topLevelTargetElements.includes(type)
-        ? [
-            parseInt(type.slice(1)),
-            block.text.blocks[0].text,
-            block.text.blocks[0].key,
-          ]
-        : null;
-    },
-  };
   // Remove Horizontal Menu variation of TOC Block
   config.blocks.blocksConfig.toc.variations =
     config.blocks.blocksConfig.toc.variations.filter(