Merge pull request #8 from kitconcept/helperAdditions

Helper additions

Makefile

@@ -105,6 +105,11 @@ backend-docker-start:	## Starts a Docker-based backend for development
 	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
 	docker run -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE)
 
+.PHONY: backend-docker-detached-start
+backend-docker-detached-start:	## Starts a Docker-based backend for development
+	@echo "$(GREEN)==> Start Docker-based Plone Backend$(RESET)"
+	docker run -d -it --rm --name=backend -p 8080:8080 -e SITE=Plone $(DOCKER_IMAGE)
+
 ## Storybook
 .PHONY: storybook-start
 storybook-start: ## Start Storybook server on port 6006

packages/volto-iframe-block/locales/de/LC_MESSAGES/volto.po

@@ -23,6 +23,7 @@ msgstr "Beschreibung"
 
 #. Default: "Error"
 #: components/Edit
+#: helpers/isValidUrl
 msgid "Error"
 msgstr "Fehler"
 
@@ -38,7 +39,7 @@ msgid "Iframe"
 msgstr "Iframe"
 
 #. Default: "Invalid url"
-#: components/Edit
+#: helpers/isValidUrl
 msgid "Invalid url"
 msgstr "Ungültige Url"
 
@@ -72,10 +73,10 @@ msgstr "Titel"
 msgid "Type a Iframe URL"
 msgstr "Geben Sie eine URL ein"
 
-#. Default: "Values are in Pixels"
+#. Default: "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 #: components/schema
-msgid "Values are in Pixels"
-msgstr "Werte werden in Pixeln angegeben"
+msgid "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
+msgstr "Die Werte werden in Pixeln (z.B. 100 oder 100px) oder Prozent (z.B. 100%) angegeben."
 
 #. Default: "Width"
 #: components/schema

packages/volto-iframe-block/locales/en/LC_MESSAGES/volto.po

@@ -23,6 +23,7 @@ msgstr ""
 
 #. Default: "Error"
 #: components/Edit
+#: helpers/isValidUrl
 msgid "Error"
 msgstr ""
 
@@ -38,7 +39,7 @@ msgid "Iframe"
 msgstr ""
 
 #. Default: "Invalid url"
-#: components/Edit
+#: helpers/isValidUrl
 msgid "Invalid url"
 msgstr ""
 
@@ -72,9 +73,9 @@ msgstr ""
 msgid "Type a Iframe URL"
 msgstr ""
 
-#. Default: "Values are in Pixels"
+#. Default: "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 #: components/schema
-msgid "Values are in Pixels"
+msgid "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 msgstr ""
 
 #. Default: "Width"

packages/volto-iframe-block/locales/es/LC_MESSAGES/volto.po

@@ -30,6 +30,7 @@ msgstr ""
 
 #. Default: "Error"
 #: components/Edit
+#: helpers/isValidUrl
 msgid "Error"
 msgstr ""
 
@@ -45,7 +46,7 @@ msgid "Iframe"
 msgstr ""
 
 #. Default: "Invalid url"
-#: components/Edit
+#: helpers/isValidUrl
 msgid "Invalid url"
 msgstr ""
 
@@ -79,9 +80,9 @@ msgstr ""
 msgid "Type a Iframe URL"
 msgstr ""
 
-#. Default: "Values are in Pixels"
+#. Default: "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 #: components/schema
-msgid "Values are in Pixels"
+msgid "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 msgstr ""
 
 #. Default: "Width"

packages/volto-iframe-block/locales/pt_BR/LC_MESSAGES/volto.po

@@ -28,6 +28,7 @@ msgstr ""
 
 #. Default: "Error"
 #: components/Edit
+#: helpers/isValidUrl
 msgid "Error"
 msgstr ""
 
@@ -43,7 +44,7 @@ msgid "Iframe"
 msgstr ""
 
 #. Default: "Invalid url"
-#: components/Edit
+#: helpers/isValidUrl
 msgid "Invalid url"
 msgstr ""
 
@@ -77,9 +78,9 @@ msgstr ""
 msgid "Type a Iframe URL"
 msgstr ""
 
-#. Default: "Values are in Pixels"
+#. Default: "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 #: components/schema
-msgid "Values are in Pixels"
+msgid "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 msgstr ""
 
 #. Default: "Width"

packages/volto-iframe-block/locales/volto.pot

@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2025-02-18T09:54:00.232Z\n"
+"POT-Creation-Date: 2025-02-25T10:06:06.493Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -25,6 +25,7 @@ msgstr ""
 
 #. Default: "Error"
 #: components/Edit
+#: helpers/isValidUrl
 msgid "Error"
 msgstr ""
 
@@ -40,7 +41,7 @@ msgid "Iframe"
 msgstr ""
 
 #. Default: "Invalid url"
-#: components/Edit
+#: helpers/isValidUrl
 msgid "Invalid url"
 msgstr ""
 
@@ -74,9 +75,9 @@ msgstr ""
 msgid "Type a Iframe URL"
 msgstr ""
 
-#. Default: "Values are in Pixels"
+#. Default: "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 #: components/schema
-msgid "Values are in Pixels"
+msgid "Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)"
 msgstr ""
 
 #. Default: "Width"

packages/volto-iframe-block/news/8.bugfix.1

@@ -0,0 +1 @@
+We now only show the whole `figure` if a url is set & valid [@jnptk]

packages/volto-iframe-block/news/8.bugfix.2

@@ -0,0 +1 @@
+Moved the `width` to the `figure` element to ensure that title, description etc. are the same width as the `iframe` [@jnptk]

packages/volto-iframe-block/news/8.feature.1

@@ -0,0 +1 @@
+Move toast error messages to isValidUrl.js file so that if you want to shadow the `isValidUrl` function you can change the error message as well [@jnptk]

packages/volto-iframe-block/news/8.feature.2

@@ -0,0 +1 @@
+Changed the `height` field to use a `text` input field for pixel and percentage value support (e.g. 100px, 50%) [@jnptk]

packages/volto-iframe-block/news/8.internal.1

@@ -0,0 +1 @@
+Add `backend-docker-detached-start` make command to start backend in daemon mode [@jnptk]

packages/volto-iframe-block/src/components/Edit.jsx

@@ -8,7 +8,10 @@ import React, { useState } from 'react';
 import { defineMessages } from 'react-intl';
 import { toast } from 'react-toastify';
 
-import { isValidUrl } from '@kitconcept/volto-iframe-block/helpers/isValidUrl';
+import {
+  isValidUrl,
+  toastError,
+} from '@kitconcept/volto-iframe-block/helpers/isValidUrl';
 import IframeSidebar from '@kitconcept/volto-iframe-block/components/Data';
 import IframeView from '@kitconcept/volto-iframe-block/components/View';
 
@@ -17,10 +20,6 @@ const messages = defineMessages({
     id: 'Type a Iframe URL',
     defaultMessage: 'Type a Iframe URL',
   },
-  IncorrectUrl: {
-    id: 'Invalid url',
-    defaultMessage: 'Invalid url',
-  },
   Error: {
     id: 'Error',
     defaultMessage: 'Error',
@@ -51,8 +50,8 @@ const IframeEdit = (props) => {
     toast.error(
       <Toast
         error
-        title={intl.formatMessage(messages.Error)}
-        content={intl.formatMessage(messages.IncorrectUrl)}
+        title={intl.formatMessage(toastError.Title)}
+        content={intl.formatMessage(toastError.Content)}
       />,
     );
   };

packages/volto-iframe-block/src/components/View.jsx

@@ -15,28 +15,23 @@ const IframeView = (props) => {
   return (
     <div className={cx('block iframe align', data.align, className)}>
       <div className="block-container">
-        <figure>
-          {data.src && isValidUrl(data.src) && (
-            <iframe
-              src={data.src}
-              title={data.title}
-              width={width}
-              height={data.height}
-            />
-          )}
-          <figcaption>
-            {data.title && <div className="title">{data.title}</div>}
-            {data.description && (
-              <div className="description">{data.description}</div>
-            )}
-            {data.credit && (
-              <div className="credit">
-                Credit:{' '}
-                <div dangerouslySetInnerHTML={{ __html: data.credit.data }} />
-              </div>
-            )}
-          </figcaption>
-        </figure>
+        {data.src && isValidUrl(data.src) && (
+          <figure style={{ width: width }}>
+            <iframe src={data.src} title={data.title} height={data.height} />
+            <figcaption>
+              {data.title && <div className="title">{data.title}</div>}
+              {data.description && (
+                <div className="description">{data.description}</div>
+              )}
+              {data.credit && (
+                <div className="credit">
+                  Credit:{' '}
+                  <div dangerouslySetInnerHTML={{ __html: data.credit.data }} />
+                </div>
+              )}
+            </figcaption>
+          </figure>
+        )}
       </div>
     </div>
   );

packages/volto-iframe-block/src/components/schema.jsx

@@ -43,8 +43,9 @@ const messages = defineMessages({
     defaultMessage: 'Open in a new tab',
   },
   TextHintPixels: {
-    id: 'Values are in Pixels',
-    defaultMessage: 'Values are in Pixels',
+    id: 'Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)',
+    defaultMessage:
+      'Values are in Pixels (e.g. 100 or 100px) or Percent (e.g. 100%)',
   },
 });
 
@@ -97,7 +98,7 @@ export const IframeBlockSchema = (props) => ({
     },
     height: {
       title: props.intl.formatMessage(messages.Height),
-      type: 'number',
+      widget: 'text',
       description: props.intl.formatMessage(messages.TextHintPixels),
     },
   },

packages/volto-iframe-block/src/helpers/isValidUrl.js

@@ -1,5 +1,21 @@
 import config from '@plone/volto/registry';
 import { isEmpty } from 'lodash';
+import { defineMessages } from 'react-intl';
+
+/**
+ * Error messages for displaying toast notifications when an invalid URL
+ * is submitted.
+ */
+export const toastError = defineMessages({
+  Title: {
+    id: 'Error',
+    defaultMessage: 'Error',
+  },
+  Content: {
+    id: 'Invalid url',
+    defaultMessage: 'Invalid url',
+  },
+});
 
 export function isValidUrl(url) {
   const patterns = config.blocks.blocksConfig.iframe.validUrls;

packages/volto-iframe-block/src/theme/main.scss

@@ -31,3 +31,7 @@
     }
   }
 }
+
+.block.iframe iframe {
+  width: 100%;
+}