design-comuni-plone-theme 10.6.1 → 10.6.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 
 
+## [10.6.2](https://github.com/redturtle/design-comuni-plone-theme/compare/v10.6.1...v10.6.2) (2023-12-14)
+
+
+### Bug Fixes
+
+* custom inline styles rendering in wysiwygwidget ([17e1d10](https://github.com/redturtle/design-comuni-plone-theme/commit/17e1d10a2de1c8ba4d12a7364bc8858761b4b92e))
+
+
+### Documentation
+
+* aggiornamento lista dei comuni in publiccode.yml ([#158](https://github.com/redturtle/design-comuni-plone-theme/issues/158)) ([2abad9a](https://github.com/redturtle/design-comuni-plone-theme/commit/2abad9aecaa288ca87670183df13212bdb47fa66))
+* updated publiccode and release log ([38d8d00](https://github.com/redturtle/design-comuni-plone-theme/commit/38d8d00daf1b3c822d11a701ecc3a83657c865cb))
+
 ## [10.6.1](https://github.com/RedTurtle/design-comuni-plone-theme/compare/v10.6.0...v10.6.1) (2023-12-13)
 
 

package/RELEASE.md

@@ -41,11 +41,17 @@
 - ...
 -->
 
+## Versione 10.6.2 (14/12/2023)
+
+### Fix
+
+- Ora si vedono correttamente gli stili di allineamento del testo in alcuni editor di testo, ad esempio header e footer dei sottositi.
+
 ## Versione 10.6.1 (13/12/2023)
 
 ### Novità
 
-- I seguenti campi sono ora riordinabili liberamente: "Timeline tempi e scadenze" per il tipo di contenuto *Servizio* e "Valore punto di contatto" del tipo di contenuto *Punto di contatto*.
+- I seguenti campi sono ora riordinabili liberamente: "Timeline tempi e scadenze" per il tipo di contenuto _Servizio_ e "Valore punto di contatto" del tipo di contenuto _Punto di contatto_.
 
 ### Fix
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "design-comuni-plone-theme",
   "description": "Volto Theme for Italia design guidelines",
   "license": "GPL-v3",
-  "version": "10.6.1",
+  "version": "10.6.2",
   "main": "src/index.js",
   "keywords": [
     "volto-addon",

package/publiccode.yml

@@ -227,9 +227,9 @@ maintenance:
 name: io-Comune - Il sito AgID per Comuni ed Enti Pubblici
 platforms:
   - web
-releaseDate: '2023-12-13'
+releaseDate: '2023-12-14'
 softwareType: standalone/web
-softwareVersion: 10.6.1
+softwareVersion: 10.6.2
 url: 'https://github.com/italia/design-comuni-plone-theme'
 usedBy:
   - ASP Comuni Modenesi Area Nord
@@ -243,6 +243,7 @@ usedBy:
   - Biblioteche Pianura Est
   - Camera di Commercio dell'Umbria
   - Camera di Commercio di Reggio Emilia
+  - Comune della Spezia
   - Comune di Bibbiano
   - Comune di Camposanto
   - Comune di Cantagallo
@@ -266,6 +267,7 @@ usedBy:
   - Comune di San Possidonio
   - Comune di San Prospero
   - Comune di Santilario d'Enza
+  - Comune di Toscolano Maderno
   - Comune di Vaiano
   - Comune di Vernio
   - Comando Generale della Guardia di Finanza

package/src/config/RichTextEditor/config.js

@@ -136,33 +136,50 @@ const ItaliaFromHTMLCustomBlockFn = (element) => {
       ret = {
         type: 'buttons',
       };
-    } else if (element.className === 'draftjs-text-larger') {
+    } else if (element.className === 'text-center') {
       ret = {
-        type: 'TEXT_LARGER',
+        type: 'align-center',
+      };
+    } else if (element.className === 'text-end') {
+      ret = {
+        type: 'align-right',
+      };
+    } else if (element.className === 'text-justify') {
+      ret = {
+        type: 'align-justify',
       };
     }
   }
   return ret;
 };
 
+const ItaliaFromHTMLCustomInlineFn = (element, { Style }) => {
+  if (element.tagName === 'SPAN') {
+    if (element.className === 'draftjs-text-larger') {
+      return Style('TEXT_LARGER');
+    }
+  }
+};
+
 export default function applyConfig(config) {
   config.settings.richtextEditorSettings = (props) => {
     const { plugins /*, inlineToolbarButtons*/ } = Plugins(props); // volto plugins
-    const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } =
-      Blocks(props);
+    const { extendedBlockRenderMap, blockStyleFn, listBlockTypes } = Blocks(
+      props,
+    );
 
     const { immutableLib } = props;
     const { Map } = immutableLib;
 
     const blockRenderMap = Map({
       'align-center': {
-        element: 'p',
+        element: (props) => <p {...props} style={{ textAlign: 'center' }} />,
       },
       'align-right': {
-        element: 'p',
+        element: (props) => <p {...props} style={{ textAlign: 'right' }} />,
       },
       'align-justify': {
-        element: 'p',
+        element: (props) => <p {...props} style={{ textAlign: 'justify' }} />,
       },
       'callout-bg': {
         element: 'p',
@@ -179,9 +196,6 @@ export default function applyConfig(config) {
       r = r.length > 0 ? ' ' : r;
 
       const styles = {
-        'align-center': 'text-center',
-        'align-right': 'text-end',
-        'align-justify': 'text-justify',
         callout: 'callout',
         'callout-bg': 'callout-bg',
         buttons: 'draftjs-buttons',
@@ -203,9 +217,12 @@ export default function applyConfig(config) {
         ...plugins,
         ...ItaliaRichTextEditorPlugins(props),
       ],
-      richTextEditorInlineToolbarButtons:
-        ItaliaRichTextEditorInlineToolbarButtons(props, plugins), //[inlineToolbarButtons,...ItaliaRichTextEditorInlineToolbarButtons(props)]
-      FromHTMLCustomBlockFn: ItaliaFromHTMLCustomBlockFn, //FromHTMLCustomBlockFn
+      richTextEditorInlineToolbarButtons: ItaliaRichTextEditorInlineToolbarButtons(
+        props,
+        plugins,
+      ), //[inlineToolbarButtons,...ItaliaRichTextEditorInlineToolbarButtons(props)]
+      FromHTMLCustomBlockFn: ItaliaFromHTMLCustomBlockFn,
+      FromHTMLCustomInlineFn: ItaliaFromHTMLCustomInlineFn,
       customStyleMap: {
         TEXT_LARGER: { fontSize: '1.75rem' },
       },

package/src/customizations/volto/components/manage/Widgets/WysiwygWidget.jsx

@@ -0,0 +1,362 @@
+/**
+ * Customizations
+ * - add customInlineFn to stateFromHTML call (line 179)
+ */
+/**
+ * WysiwygWidget container.
+ * @module components/manage/WysiwygWidget/WysiwygWidget
+ */
+
+import React, { Component } from 'react';
+import ReactDOMServer from 'react-dom/server';
+import PropTypes from 'prop-types';
+import { connect, Provider } from 'react-redux';
+import { compose } from 'redux';
+import redraft from 'redraft';
+import { Form, Label, TextArea } from 'semantic-ui-react';
+import { map } from 'lodash';
+import { defineMessages, injectIntl } from 'react-intl';
+import configureStore from 'redux-mock-store';
+import { MemoryRouter } from 'react-router-dom';
+import config from '@plone/volto/registry';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+
+import loadable from '@loadable/component';
+import { injectLazyLibs } from '@plone/volto/helpers/Loadable/Loadable';
+
+const Editor = loadable(() => import('draft-js-plugins-editor'));
+
+const messages = defineMessages({
+  default: {
+    id: 'Default',
+    defaultMessage: 'Default',
+  },
+  idTitle: {
+    id: 'Short Name',
+    defaultMessage: 'Short Name',
+  },
+  idDescription: {
+    id: 'Used for programmatic access to the fieldset.',
+    defaultMessage: 'Used for programmatic access to the fieldset.',
+  },
+  title: {
+    id: 'Title',
+    defaultMessage: 'Title',
+  },
+  description: {
+    id: 'Description',
+    defaultMessage: 'Description',
+  },
+  required: {
+    id: 'Required',
+    defaultMessage: 'Required',
+  },
+  delete: {
+    id: 'Delete',
+    defaultMessage: 'Delete',
+  },
+});
+
+/**
+ * WysiwygWidget HTML richtext editing widget
+ *
+ * To use it, in schema properties, declare a field like:
+ *
+ * ```jsx
+ * {
+ *  title: "Rich text",
+ *  widget: 'richtext',
+ * }
+ * ```
+ *
+ */
+class WysiwygWidgetComponent extends Component {
+  /**
+   * Property types.
+   * @property {Object} propTypes Property types.
+   * @static
+   */
+  static propTypes = {
+    /**
+     * Id of the field
+     */
+    id: PropTypes.string.isRequired,
+    /**
+     * Title of the field
+     */
+    title: PropTypes.string.isRequired,
+    /**
+     * Description of the field
+     */
+    description: PropTypes.string,
+    /**
+     * True if field is required
+     */
+    required: PropTypes.bool,
+    /**
+     * Value of the field
+     */
+    value: PropTypes.shape({
+      /**
+       * Content type of the value
+       */
+      'content-type': PropTypes.string,
+      /**
+       * Data of the value
+       */
+      data: PropTypes.string,
+      /**
+       * Encoding of the value
+       */
+      encoding: PropTypes.string,
+    }),
+    /**
+     * Placeholder for the editor
+     */
+    placeholder: PropTypes.string,
+    /**
+     * List of error messages
+     */
+    error: PropTypes.arrayOf(PropTypes.string),
+    /**
+     * On change handler
+     */
+    onChange: PropTypes.func,
+    /**
+     * On delete handler
+     */
+    onDelete: PropTypes.func,
+    /**
+     * On edit handler
+     */
+    onEdit: PropTypes.func,
+    /**
+     * Wrapped form component
+     */
+    wrapped: PropTypes.bool,
+  };
+
+  /**
+   * Default properties
+   * @property {Object} defaultProps Default properties.
+   * @static
+   */
+  static defaultProps = {
+    description: null,
+    required: false,
+    value: {
+      'content-type': 'text/html',
+      data: '',
+      encoding: 'utf8',
+    },
+    error: [],
+    onEdit: null,
+    onDelete: null,
+    onChange: null,
+  };
+
+  /**
+   * Constructor
+   * @method constructor
+   * @param {Object} props Component properties
+   * @constructs WysiwygWidget
+   */
+  constructor(props) {
+    super(props);
+
+    const { stateFromHTML } = props.draftJsImportHtml;
+    const { EditorState } = props.draftJs;
+    const createInlineToolbarPlugin = props.draftJsInlineToolbarPlugin.default;
+
+    this.draftConfig = config.settings.richtextEditorSettings(props);
+
+    if (!__SERVER__) {
+      let editorState;
+      if (props.value && props.value.data) {
+        const contentState = stateFromHTML(props.value.data, {
+          customBlockFn: this.draftConfig.FromHTMLCustomBlockFn,
+          customInlineFn: this.draftConfig.FromHTMLCustomInlineFn,
+        });
+        editorState = EditorState.createWithContent(contentState);
+      } else {
+        editorState = EditorState.createEmpty();
+      }
+
+      const inlineToolbarPlugin = createInlineToolbarPlugin({
+        structure: this.draftConfig.richTextEditorInlineToolbarButtons,
+      });
+
+      this.state = { editorState, inlineToolbarPlugin };
+    }
+
+    this.schema = {
+      fieldsets: [
+        {
+          id: 'default',
+          title: props.intl.formatMessage(messages.default),
+          fields: ['title', 'id', 'description', 'required'],
+        },
+      ],
+      properties: {
+        id: {
+          type: 'string',
+          title: props.intl.formatMessage(messages.idTitle),
+          description: props.intl.formatMessage(messages.idDescription),
+        },
+        title: {
+          type: 'string',
+          title: props.intl.formatMessage(messages.title),
+        },
+        description: {
+          type: 'string',
+          widget: 'textarea',
+          title: props.intl.formatMessage(messages.description),
+        },
+        required: {
+          type: 'boolean',
+          title: props.intl.formatMessage(messages.required),
+        },
+      },
+      required: ['id', 'title'],
+    };
+
+    this.onChange = this.onChange.bind(this);
+  }
+
+  /**
+   * Change handler
+   * @method onChange
+   * @param {object} editorState Editor state.
+   * @returns {undefined}
+   */
+  onChange(editorState) {
+    const { convertToRaw } = this.props.draftJs;
+    this.setState({ editorState });
+    const mockStore = configureStore();
+
+    this.props.onChange(this.props.id, {
+      'content-type': this.props.value
+        ? this.props.value['content-type']
+        : 'text/html',
+      encoding: this.props.value ? this.props.value.encoding : 'utf8',
+      data: ReactDOMServer.renderToStaticMarkup(
+        <Provider
+          store={mockStore({
+            userSession: {
+              token: this.props.token,
+            },
+          })}
+        >
+          <MemoryRouter>
+            {redraft(
+              convertToRaw(editorState.getCurrentContent()),
+              config.settings.richtextViewSettings.ToHTMLRenderers,
+              config.settings.richtextViewSettings.ToHTMLOptions,
+            )}
+          </MemoryRouter>
+        </Provider>,
+      ),
+    });
+  }
+
+  /**
+   * Render method.
+   * @method render
+   * @returns {string} Markup for the component.
+   */
+  render() {
+    const {
+      id,
+      title,
+      description,
+      required,
+      value,
+      error,
+      fieldSet,
+    } = this.props;
+
+    if (__SERVER__) {
+      return (
+        <Form.Field
+          inline
+          required={required}
+          error={error.length > 0}
+          className={description ? 'help' : ''}
+          id={`${fieldSet || 'field'}-${id}`}
+        >
+          <div className="wrapper">
+            <label htmlFor={`field-${id}`}>{title}</label>
+            <TextArea id={id} name={id} value={value ? value.data : ''} />
+            {description && <p className="help">{description}</p>}
+            {map(error, (message) => (
+              <Label key={message} basic color="red" pointing>
+                {message}
+              </Label>
+            ))}
+          </div>
+        </Form.Field>
+      );
+    }
+    const { InlineToolbar } = this.state.inlineToolbarPlugin;
+
+    return (
+      <FormFieldWrapper {...this.props} className="wysiwyg">
+        <div style={{ boxSizing: 'initial' }}>
+          {this.props.onChange ? (
+            <>
+              <Editor
+                id={`field-${id}`}
+                readOnly={this.props.isDisabled}
+                onChange={this.onChange}
+                editorState={this.state.editorState}
+                plugins={[
+                  this.state.inlineToolbarPlugin,
+                  ...this.draftConfig.richTextEditorPlugins,
+                ]}
+                placeholder={this.props.placeholder}
+                blockRenderMap={this.draftConfig.extendedBlockRenderMap}
+                blockStyleFn={this.draftConfig.blockStyleFn}
+                customStyleMap={this.draftConfig.customStyleMap}
+              />
+              {this.props.onChange && <InlineToolbar />}
+            </>
+          ) : (
+            <div className="DraftEditor-root" />
+          )}
+        </div>
+      </FormFieldWrapper>
+    );
+  }
+}
+
+export const WysiwygWidget = compose(
+  injectIntl,
+  injectLazyLibs([
+    'draftJs',
+    'draftJsBlockBreakoutPlugin',
+    'draftJsCreateBlockStyleButton',
+    'draftJsCreateInlineStyleButton',
+    'draftJsFilters',
+    'draftJsImportHtml',
+    'draftJsInlineToolbarPlugin',
+    'draftJsLibIsSoftNewlineEvent',
+    'immutableLib',
+  ]),
+  connect(
+    (state, props) => ({
+      token: state.userSession.token,
+    }),
+    {},
+  ),
+)(WysiwygWidgetComponent);
+
+const Preloader = (props) => {
+  const [loaded, setLoaded] = React.useState(false);
+  React.useEffect(() => {
+    Editor.load().then(() => setLoaded(true));
+  }, []);
+  return loaded ? <WysiwygWidget {...props} /> : null;
+};
+
+export default Preloader;