Skip to content

Commit

Permalink
Update: Refactor editor
Browse files Browse the repository at this point in the history
Bundle everything in one property
  • Loading branch information
jonnitto committed Oct 10, 2024
1 parent 88cd4a5 commit 67c199d
Show file tree
Hide file tree
Showing 13 changed files with 172 additions and 212 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ max_line_length = 300
indent_size = 2

# All kind of JS files
[*.js]
[*.{js,jsx}]
max_line_length = 120

[*.json]
Expand Down
4 changes: 2 additions & 2 deletions Configuration/Settings.Neos.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@ Neos:
mainStylesheet: Lite
additionalResources:
javaScripts:
- 'resource://Garagist.Mautic/Public/Scripts/Backend.js'
- 'resource://Garagist.Mautic/Public/Backend/Scripts.js'
styleSheets:
- 'resource://Garagist.Mautic/Public/Styles/Backend.css'
- 'resource://Garagist.Mautic/Public/Backend/Styles.css'
Ui:
resources:
javascript:
Expand Down
21 changes: 4 additions & 17 deletions NodeTypes/Mixin/Email.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,18 @@
icon: paper-plane
position: 20
properties:
mauticEmailModule:
mauticPreviewText:
type: string
ui:
label: i18n
help:
message: i18n
inspector:
editor: Garagist.Mautic/Inspector/Editors/EmailModule
group: mautic
position: 10
editor: Garagist.Mautic/Inspector/Editors/EmailModule
editorOptions:
icon: paper-plane
placeholder: 'ClientEval: node.properties.metaDescription'
src: >-
ClientEval:
"/neos/management/mautic/node?"
+ encodeURIComponent("moduleArguments[node]")
+ "=" + encodeURIComponent(node.contextPath.replace(/([^@]*)@([^;]*)/, '$1@live'))
mauticPreviewText:
type: string
ui:
label: i18n
help:
message: i18n
inspector:
group: mautic
position: 20
editor: Neos.Neos/Inspector/Editors/TextAreaEditor
editorOptions:
placeholder: 'ClientEval: node.properties.metaDescription'
126 changes: 95 additions & 31 deletions Resources/Private/Editor/EmailModuleEditor.jsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,103 @@
import React from "react";
import { Button, Icon, Label } from "@neos-project/react-ui-components";
import I18n from "@neos-project/neos-ui-i18n";
import { Button, Icon, TextArea } from "@neos-project/react-ui-components";
import { neos } from "@neos-project/neos-ui-decorators";
import Markdown from "markdown-to-jsx";

const neosifier = neos((globalRegistry) => ({
i18nRegistry: globalRegistry.get("i18n"),
}));

const defaultOptions = {
// General options
disabled: false,

// TextArea options
showTextarea: true,
maxlength: null,
readonly: false,
placeholder: "",
minRows: 2,
maxRows: 24,
expandedRows: 6,
help: "Garagist.Mautic:NodeTypes.Mixin.Email:properties.mauticPreviewText.options.help",

// This is for the Button and the iframe
// If src is null, the button will not show up
showButton: true,
src: null,
icon: "paper-plane",
name: "email-module",
moduleLabel: "Garagist.Mautic:NodeTypes.Mixin.Email:properties.mauticPreviewText.options.moduleLabel",

// Description text below everything
showDescription: true,
description: "Garagist.Mautic:NodeTypes.Mixin.Email:properties.mauticPreviewText.options.description",
};

const markdownStyle = (opacity = null) => ({
fontSize: "var(--fontSize-Small)",
lineHeight: 1.3,
opacity,
});

function EmailModuleEditor(props) {
const { label, className, identifier, options, renderHelpIcon, renderSecondaryInspector } = props;
const { src, icon, name, disabled} = options;
const { id, value, commit, className, identifier, options, renderSecondaryInspector, i18nRegistry } = props;
const CONFIG = { ...defaultOptions, ...options };
const { disabled, src, icon, help, description, moduleLabel, placeholder } = CONFIG;

return (
<div style={{display:"flex"}}>
<Label htmlFor={identifier}>
<Button
className={className}
disabled={disabled}
style="lighter"
onClick={() => {
renderSecondaryInspector("IFRAME", () => (
<iframe
style={{ height: "100%", width: "100%", border: 0 }}
name={name || "email-module"}
src={
src.startsWith("ClientEval:")
? (0, eval)(src.replace("ClientEval:", ""))
: src
}
/>
))
}}
>
{icon && <Icon icon={icon} padded="right" />}
<I18n id={label} />
</Button>
</Label>
{renderHelpIcon && renderHelpIcon()}
</div>
<>
{CONFIG.showTextarea && (
<>
<TextArea
id={id}
value={value === null ? "" : value}
className={className}
onChange={commit}
disabled={disabled}
maxLength={CONFIG.maxlength}
readOnly={CONFIG.readonly}
placeholder={placeholder && i18nRegistry.translate(unescape(placeholder))}
minRows={CONFIG.minRows}
maxRows={CONFIG.maxRows}
expandedRows={CONFIG.expandedRows}
/>
{help && <Markdown style={markdownStyle(0.8)} children={i18nRegistry.translate(help)} />}
</>
)}

{CONFIG.showButton && src && moduleLabel && (
<div style={{ margin: "2em 0" }}>
<Button
disabled={disabled}
style="lighter"
onClick={() => {
renderSecondaryInspector("IFRAME", () => (
<iframe
style={{
height: "100%",
width: "100%",
border: 0,
}}
name={CONFIG.name}
src={
src.startsWith("ClientEval:") ? (0, eval)(src.replace("ClientEval:", "")) : src
}
/>
));
}}
>
{icon && <Icon icon={icon} padded="right" />}
<span>{i18nRegistry.translate(moduleLabel)}</span>
</Button>
</div>
)}

{CONFIG.showDescription && description && (
<Markdown style={markdownStyle()} children={i18nRegistry.translate(description)} />
)}
</>
);
}

export default EmailModuleEditor;
export default neosifier(EmailModuleEditor);
1 change: 0 additions & 1 deletion Resources/Private/Editor/manifest.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,5 @@ manifest("Garagist.Mautic:EmailModuleEditor", {}, (globalRegistry) => {

editorsRegistry.set("Garagist.Mautic/Inspector/Editors/EmailModule", {
component: EmailModuleEditor,
hasOwnLabel: true,
});
});
20 changes: 10 additions & 10 deletions Resources/Private/Translations/de/NodeTypes/Mixin/Email.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,19 @@
xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file original="" product-name="Garagist.Mautic" source-language="en" target-language="de" datatype="plaintext">
<body>
<trans-unit id="properties.mauticEmailModule" xml:space="preserve">
<trans-unit id="properties.mauticPreviewText" xml:space="preserve">
<source>Preview text</source>
<target>Vorschautext</target>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.options.help" xml:space="preserve">
<source>Here you can set the preview that will be displayed in the recipient's inbox.</source>
<target>Hier können Sie die Vorschau eingeben, die im Posteingang des Empfängers angezeigt wird.</target>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.options.moduleLabel" xml:space="preserve">
<source>Show emails</source>
<target>Zeige E-Mails</target>
</trans-unit>
<trans-unit id="properties.mauticEmailModule.ui.help.message" xml:space="preserve">
<trans-unit id="properties.mauticPreviewText.options.description" xml:space="preserve">
<source>It is possible to send personalized emails. To use this, simply apply the following markup in the text on your page:

**{#ifNewsletter}** Hello #FIRSTNAME# #Lastname#, this is your newsletter **{:else}** Fallback for Webview **{/if}**
Expand All @@ -21,14 +29,6 @@ Availble fields are every field from **contactfield**, surounded by an **#** on
Verfügbare Felder sind alle Felder von **contactfield**, umgeben von einem **#** auf beiden Seiten. (Groß- und Kleinschreibung wird nicht berücksichtigt)
</target>
</trans-unit>
<trans-unit id="properties.mauticPreviewText" xml:space="preserve">
<source>Preview text</source>
<target>Vorschautext</target>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.ui.help.message" xml:space="preserve">
<source>Here you can set the preview that will be displayed in the recipient's inbox.</source>
<target>Hier können Sie die Vorschau eingeben, die im Posteingang des Empfängers angezeigt wird.</target>
</trans-unit>
</body>
</file>
</xliff>
16 changes: 8 additions & 8 deletions Resources/Private/Translations/en/NodeTypes/Mixin/Email.xlf
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@
xmlns="urn:oasis:names:tc:xliff:document:1.2">
<file original="" product-name="Garagist.Mautic" source-language="en" datatype="plaintext">
<body>
<trans-unit id="properties.mauticEmailModule" xml:space="preserve">
<trans-unit id="properties.mauticPreviewText" xml:space="preserve">
<source>Preview text</source>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.options.help" xml:space="preserve">
<source>Here you can set the preview that will be displayed in the recipient's inbox.</source>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.options.moduleLabel" xml:space="preserve">
<source>Show emails</source>
</trans-unit>
<trans-unit id="properties.mauticEmailModule.ui.help.message" xml:space="preserve">
<trans-unit id="properties.mauticPreviewText.options.description" xml:space="preserve">
<source>It is possible to send personalized emails. To use this, simply apply the following markup in the text on your page:

**{#ifNewsletter}** Hello #FIRSTNAME# #Lastname#, this is your newsletter **{:else}** Fallback for Webview **{/if}**

Availble fields are every field from **contactfield**, surounded by an **#** on both sides. (case insensitive)
</source>
</trans-unit>
<trans-unit id="properties.mauticPreviewText" xml:space="preserve">
<source>Preview text</source>
</trans-unit>
<trans-unit id="properties.mauticPreviewText.ui.help.message" xml:space="preserve">
<source>Here you can set the preview that will be displayed in the recipient's inbox.</source>
</trans-unit>
</body>
</file>
</xliff>
File renamed without changes.
File renamed without changes.
Loading

0 comments on commit 67c199d

Please sign in to comment.