diff --git a/package-lock.json b/package-lock.json index 9f7cc5101..4d1f15573 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10142,6 +10142,11 @@ "version": "1.4.1", "license": "MIT" }, + "node_modules/dompurify": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.8.tgz", + "integrity": "sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==" + }, "node_modules/dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -18296,13 +18301,6 @@ "url": "https://opencollective.com/preact" } }, - "node_modules/preact-markup": { - "version": "2.1.1", - "license": "MIT", - "peerDependencies": { - "preact": ">=10" - } - }, "node_modules/prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", @@ -22149,6 +22147,7 @@ "big.js": "^6.2.1", "classnames": "^2.3.1", "didi": "^10.0.1", + "dompurify": "^3.0.8", "feelers": "^1.2.0", "feelin": "^3.0.0", "flatpickr": "^4.6.13", @@ -22156,7 +22155,6 @@ "lodash": "^4.5.0", "min-dash": "^4.0.0", "preact": "^10.5.14", - "preact-markup": "^2.1.1", "showdown": "^2.1.0" } }, @@ -23722,6 +23720,7 @@ "big.js": "^6.2.1", "classnames": "^2.3.1", "didi": "^10.0.1", + "dompurify": "^3.0.8", "feelers": "^1.2.0", "feelin": "^3.0.0", "flatpickr": "^4.6.13", @@ -23729,7 +23728,6 @@ "lodash": "^4.5.0", "min-dash": "^4.0.0", "preact": "^10.5.14", - "preact-markup": "^2.1.1", "showdown": "^2.1.0" }, "dependencies": { @@ -29347,6 +29345,11 @@ "domify": { "version": "1.4.1" }, + "dompurify": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.8.tgz", + "integrity": "sha512-b7uwreMYL2eZhrSCRC4ahLTeZcPZxSmYfmcQGXGkXiZSNW1X85v+SDM5KsWcpivIiUBH47Ji7NtyUdpLeF5JZQ==" + }, "dot-case": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", @@ -34965,10 +34968,6 @@ "preact": { "version": "10.5.14" }, - "preact-markup": { - "version": "2.1.1", - "requires": {} - }, "prelude-ls": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz", diff --git a/packages/form-js-carbon-styles/src/carbon-styles.scss b/packages/form-js-carbon-styles/src/carbon-styles.scss index bbfcf8adf..af8b39a08 100644 --- a/packages/form-js-carbon-styles/src/carbon-styles.scss +++ b/packages/form-js-carbon-styles/src/carbon-styles.scss @@ -165,7 +165,7 @@ // Markdown styles ///////////// -.fjs-container .fjs-form-field.fjs-form-field-text .markup { +.fjs-container .fjs-form-field.fjs-form-field-text { font-size: var(--cds-body-long-01-font-size); font-weight: var(--cds-body-long-01-font-weight); line-height: var(--cds-body-long-01-line-height); diff --git a/packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js b/packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js new file mode 100644 index 000000000..ce545c92d --- /dev/null +++ b/packages/form-js-editor/src/features/properties-panel/entries/HtmlEntry.js @@ -0,0 +1,77 @@ +import { get } from 'min-dash'; + +import { useService, useVariables } from '../hooks'; + +import { FeelTemplatingEntry, isFeelEntryEdited } from '@bpmn-io/properties-panel'; + +import { useMemo } from 'preact/hooks'; + + +export function HtmlEntry(props) { + const { + editField, + field + } = props; + + const entries = [ + { + id: 'content', + component: Content, + editField: editField, + field: field, + isEdited: isFeelEntryEdited, + isDefaultVisible: (field) => field.type === 'html' + } + ]; + + return entries; +} + +function Content(props) { + const { + editField, + field, + id + } = props; + + const debounce = useService('debounce'); + + const variables = useVariables().map(name => ({ name })); + + const path = [ 'content' ]; + + const getValue = () => { + return get(field, path, ''); + }; + + const setValue = (value) => { + return editField(field, path, value || ''); + }; + + const validate = (value) => { + + // allow empty state + if (value === undefined || value === null || value === '') { return null; } + + // allow expressions + if (value.startsWith('=')) { return null; } + + // disallow style tags + if (value.includes(' +