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

package/src/components/ItaliaTheme/View/__tests__/TrasparenzaView.test.jsx

@@ -62,7 +62,18 @@ const mock_allfields = {
       '@type': 'title',
     },
     'fbd627d2-46a1-4d32-b610-6aed2a142b36': {
-      '@type': 'text',
+      '@type': 'slate',
+      plaintext: '',
+      value: [
+        {
+          children: [
+            {
+              text: '',
+            },
+          ],
+          type: 'p',
+        },
+      ],
     },
   },
   blocks_layout: {

package/src/components/ItaliaTheme/manage/Widgets/ColorListWidget.jsx

@@ -44,8 +44,16 @@ class ColorListWidget extends Component {
    * @returns {string} Markup for the component.
    */
   render() {
-    const { id, title, required, value, onChange, intl, colors, className } =
-      this.props;
+    const {
+      id,
+      title,
+      required,
+      value,
+      onChange,
+      intl,
+      colors,
+      className,
+    } = this.props;
     return colors.length > 0 ? (
       <Form.Field
         inline
@@ -78,6 +86,7 @@ class ColorListWidget extends Component {
                     active={value === color.name}
                     circular
                     aria-label={color.label}
+                    title={color.label}
                   />
                 );
               })}

package/src/components/ItaliaTheme/manage/Widgets/HtmlSlateWidget.jsx

@@ -0,0 +1,154 @@
+/**
+ * HtmlSlateWidget, a slate widget variant that saves its data as HTML
+ * CUSTOMIZATIONS:
+ *  - rimossi i bottoni di allinemento, textlarger e blockquote perchè non funzionano nel widget e non servono in questi campi
+ *  - aggiunta la classe public-ui
+ */
+
+import React from 'react';
+import ReactDOMServer from 'react-dom/server';
+import configureStore from 'redux-mock-store';
+import { MemoryRouter } from 'react-router-dom';
+import { Provider, useSelector } from 'react-redux';
+import { defineMessages, injectIntl } from 'react-intl';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+import { serializeNodes } from '@plone/volto-slate/editor/render';
+import { makeEditor } from '@plone/volto-slate/utils';
+import deserialize from '@plone/volto-slate/editor/deserialize';
+
+import {
+  createEmptyParagraph,
+  normalizeExternalData,
+} from '@plone/volto-slate/utils';
+import { ErrorBoundary } from '@plone/volto-slate/widgets/ErrorBoundary';
+import config from '@plone/volto/registry';
+
+import { getRichTextWidgetToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+
+import '@plone/volto-slate/widgets/style.css';
+
+const messages = defineMessages({
+  error: {
+    id:
+      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+    defaultMessage:
+      'An error has occurred while editing "{name}" field. We have been notified and we are looking into it. Please save your work and retry. If the issue persists please contact the site administrator.',
+  },
+});
+
+const HtmlSlateWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    focus,
+    className,
+    block,
+    placeholder,
+    properties,
+    intl,
+  } = props;
+
+  const [selected, setSelected] = React.useState(focus);
+
+  const editor = React.useMemo(() => makeEditor(), []);
+
+  const token = useSelector((state) => state.userSession.token);
+
+  const toHtml = React.useCallback(
+    (value) => {
+      const mockStore = configureStore();
+      const html = ReactDOMServer.renderToStaticMarkup(
+        <Provider store={mockStore({ userSession: { token } })}>
+          <MemoryRouter>{serializeNodes(value || [])}</MemoryRouter>
+        </Provider>,
+      );
+      //console.log('toHtml', value, ' ----> ', html);
+
+      return {
+        'content-type': value ? value['content-type'] : 'text/html',
+        encoding: value ? value.encoding : 'utf8',
+        data: html,
+      };
+    },
+    [token],
+  );
+
+  const fromHtml = React.useCallback(
+    (value) => {
+      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;
+    },
+    [editor],
+  );
+
+  const valueFromHtml = React.useMemo(() => {
+    //console.log('fromhtml', value, '--->', fromHtml(value));
+    return fromHtml(value);
+  }, [value, fromHtml]);
+
+  const handleChange = React.useCallback(
+    (newValue) => {
+      onChange(id, toHtml(newValue));
+    },
+    [onChange, toHtml, id],
+  );
+
+  const handleClick = React.useCallback(() => {
+    setSelected(true);
+  }, []);
+
+  let toolbarButtons = getRichTextWidgetToolbarButtons(config);
+
+  const slateSettings = {
+    ...config.settings.slate,
+    toolbarButtons: toolbarButtons,
+  };
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box public-ui"
+        role="textbox"
+        tabIndex="-1"
+        style={{ boxSizing: 'initial' }}
+        onClick={handleClick}
+        onKeyDown={() => {}}
+      >
+        <ErrorBoundary name={intl.formatMessage(messages.error, { name: id })}>
+          <SlateEditor
+            className={className}
+            id={id}
+            name={id}
+            value={valueFromHtml}
+            onChange={handleChange}
+            block={block}
+            selected={selected}
+            properties={properties}
+            placeholder={placeholder}
+            slateSettings={slateSettings}
+          />
+        </ErrorBoundary>
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default injectIntl(HtmlSlateWidget);

package/src/components/ItaliaTheme/manage/Widgets/RichTextWidget.jsx

@@ -0,0 +1,88 @@
+/**
+ * A Slate widget that uses internal JSON representation as its value
+ * CUSTOMIZATIONS:
+ *  - rimossi i bottoni di allinemento, textlarger e blockquote perchè non funzionano nel widget e non servono in questi campi
+ *  - aggiunta la classe public-ui
+ */
+
+import React from 'react';
+import isUndefined from 'lodash/isUndefined';
+import isString from 'lodash/isString';
+import { FormFieldWrapper } from '@plone/volto/components';
+import SlateEditor from '@plone/volto-slate/editor/SlateEditor';
+
+import {
+  createEmptyParagraph,
+  createParagraph,
+} from '@plone/volto-slate/utils/blocks';
+
+import '@plone/volto-slate/widgets/style.css';
+import { getRichTextWidgetToolbarButtons } from 'design-comuni-plone-theme/config/Slate/utils';
+
+import config from '@plone/volto/registry';
+
+const getValue = (value) => {
+  if (isUndefined(value) || !isUndefined(value?.data)) {
+    return [createEmptyParagraph()];
+  }
+  // Previously this was a text field
+  if (isString(value)) {
+    return [createParagraph(value)];
+  }
+  return value;
+};
+
+const SlateRichTextWidget = (props) => {
+  const {
+    id,
+    onChange,
+    value,
+    focus,
+    className,
+    block,
+    placeholder,
+    properties,
+    readOnly = false,
+  } = props;
+  const [selected, setSelected] = React.useState(focus);
+
+  let toolbarButtons = getRichTextWidgetToolbarButtons(config);
+
+  const slateSettings = {
+    ...config.settings.slate,
+    toolbarButtons: toolbarButtons,
+  };
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box public-ui"
+        role="textbox"
+        tabIndex="-1"
+        style={{ boxSizing: 'initial' }}
+        onClick={() => {
+          setSelected(true);
+        }}
+        onKeyDown={() => {}}
+      >
+        <SlateEditor
+          className={className}
+          readOnly={readOnly}
+          id={id}
+          name={id}
+          value={getValue(value)}
+          onChange={(newValue) => {
+            onChange(id, newValue);
+          }}
+          block={block}
+          selected={selected}
+          properties={properties}
+          placeholder={placeholder}
+          slateSettings={slateSettings}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default SlateRichTextWidget;

package/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx

@@ -0,0 +1,158 @@
+/**
+ * Edit simple text block.
+ * @module components/Widgets/SimpleTextEditorWidget/SimpleTextEditorWidget
+ *
+ * E' un editor di testo da mettere nei blocchi, senza formattazione.
+ */
+
+import React, { useRef, useEffect } from 'react';
+
+import PropTypes from 'prop-types';
+import { defineMessages, useIntl } from 'react-intl';
+import { useInView } from 'react-intersection-observer';
+
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  text: {
+    id: 'Type text…',
+    defaultMessage: 'Type text…',
+  },
+});
+
+const SimpleTextEditorWidget = (props) => {
+  const intl = useIntl();
+  const {
+    data,
+    setSelected,
+    onSelectBlock,
+    onChangeBlock,
+    fieldName,
+    block,
+    value,
+    selected,
+    placeholder,
+  } = props;
+  const { ref, inView } = useInView({
+    threshold: 0,
+    rootMargin: '0px 0px 200px 0px',
+  });
+
+  const fieldRef = useRef();
+
+  const handleKey = (event) => {
+    const { slate } = config.settings;
+
+    const handlers = slate.textblockDetachedKeyboardHandlers[event.key];
+
+    if (handlers) {
+      // a handler can return `true` to signify it has handled the event in this
+      // case, the execution flow is stopped
+      const handlerProps = {
+        getBlockProps: () => {
+          return { ...props };
+        },
+        getSavedSelection: () => null,
+      };
+      return handlers.find((handler) =>
+        handler({ editor: handlerProps, event }),
+      );
+    }
+  };
+
+  useEffect(() => {
+    if (selected) {
+      fieldRef.current.focus();
+    }
+  }, [selected]);
+
+  useEffect(() => {
+    //inizializzazione del valore nel campo
+    const _value = value ?? data[fieldName];
+    if (fieldRef.current && _value?.length > 0) {
+      fieldRef.current.innerText = _value;
+    }
+  }, []);
+
+  const selectThis = () => {
+    if (setSelected) {
+      setSelected(fieldName ?? true);
+    } else if (onSelectBlock) {
+      onSelectBlock(block);
+    }
+  };
+
+  const pasteAsTextPlain = (e) => {
+    e.preventDefault();
+    var text = '';
+    if (e.clipboardData || e.originalEvent.clipboardData) {
+      text = (e.originalEvent || e).clipboardData.getData('text/plain');
+    } else if (window.clipboardData) {
+      text = window.clipboardData.getData('Text');
+    }
+
+    text = text.replaceAll('\n', ' ');
+
+    if (document.queryCommandSupported('insertText')) {
+      document.execCommand('insertText', false, text);
+    } else {
+      document.execCommand('paste', false, text);
+    }
+  };
+
+  return (
+    <div className="simple-text-editor-widget" ref={ref}>
+      <span
+        className="simple-text-input"
+        contentEditable={inView} //se è in view è editabile, altrimenti è readOnly
+        dir="ltr"
+        suppressContentEditableWarning={true}
+        role="textbox"
+        tabIndex={0}
+        placeholder={placeholder || intl.formatMessage(messages.text)}
+        onInput={(e) => {
+          let retVal = {
+            value: e.target.textContent,
+          };
+          if (fieldName) {
+            retVal = { [fieldName]: e.target.textContent };
+          }
+
+          onChangeBlock(block, { ...data, ...retVal });
+        }}
+        onFocus={(e) => {
+          if (!selected) {
+            selectThis();
+          }
+        }}
+        onBlur={(e) => {
+          setSelected(fieldName ? null : false);
+        }}
+        onPaste={(e) => {
+          pasteAsTextPlain(e);
+        }}
+        onKeyDown={handleKey}
+        ref={fieldRef}
+      />
+    </div>
+  );
+};
+
+SimpleTextEditorWidget.propTypes = {
+  data: PropTypes.objectOf(PropTypes.any).isRequired,
+  setSelected: PropTypes.func.isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
+  onChangeBlock: PropTypes.func.isRequired,
+  block: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  selected: PropTypes.bool.isRequired,
+  placeholder: PropTypes.string.isRequired,
+  focusPrevField: PropTypes.func,
+  focusNextField: PropTypes.func,
+  //from block props:
+  properties: PropTypes.objectOf(PropTypes.any).isRequired,
+  onFocusPreviousBlock: PropTypes.func.isRequired,
+  onFocusNextBlock: PropTypes.func.isRequired,
+};
+
+export default SimpleTextEditorWidget;