@eeacms/volto-cca-policy 0.1.54 → 0.1.55

package/CHANGELOG.md

@@ -4,6 +4,8 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+### [0.1.55](https://github.com/eea/volto-cca-policy/compare/0.1.54...0.1.55) - 21 December 2023
+
 ### [0.1.54](https://github.com/eea/volto-cca-policy/compare/0.1.53...0.1.54) - 20 December 2023
 
 #### :rocket: New Features

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eeacms/volto-cca-policy",
-  "version": "0.1.54",
+  "version": "0.1.55",
   "description": "@eeacms/volto-cca-policy: Volto add-on",
   "main": "src/index.js",
   "author": "European Environment Agency: IDM2 A-Team",

package/src/customizations/@plone/volto-slate/widgets/HtmlSlateWidget.jsx

@@ -0,0 +1,143 @@
+/**
+ * HtmlSlateWidget, a slate widget variant that saves its data as HTML
+ */
+
+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 '@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', JSON.stringify(value));
+      // console.log('toHtml html', 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 });
+      if (data.length) {
+        data = normalizeExternalData(editor, data);
+      } else {
+        return [createEmptyParagraph()];
+      }
+
+      // 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(() => {
+    return fromHtml(value);
+  }, [value, fromHtml]);
+
+  const handleChange = React.useCallback(
+    (newValue) => {
+      onChange(id, toHtml(newValue));
+    },
+    [onChange, toHtml, id],
+  );
+
+  const handleClick = React.useCallback(() => {
+    setSelected(true);
+  }, []);
+
+  return (
+    <FormFieldWrapper {...props} draggable={false} className="slate_wysiwyg">
+      <div
+        className="slate_wysiwyg_box"
+        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}
+          />
+        </ErrorBoundary>
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default injectIntl(HtmlSlateWidget);

package/src/customizations/@plone/volto-slate/widgets/README.md

@@ -0,0 +1,9 @@
+Customized for this
+
+```
+      if (data.length) {
+        data = normalizeExternalData(editor, data);
+      } else {
+        return [createEmptyParagraph()];
+      }
+```