1
1
import type { UmbInputTinyMceElement } from '../../components/input-tiny-mce/input-tiny-mce.element.js' ;
2
2
import { customElement , html } from '@umbraco-cms/backoffice/external/lit' ;
3
- import { UmbPropertyEditorUiRteElementBase , UMB_BLOCK_RTE_DATA_CONTENT_KEY } from '@umbraco-cms/backoffice/rte' ;
3
+ import { UmbPropertyEditorUiRteElementBase } from '@umbraco-cms/backoffice/rte' ;
4
4
5
5
import '../../components/input-tiny-mce/input-tiny-mce.element.js' ;
6
6
@@ -10,37 +10,32 @@ import '../../components/input-tiny-mce/input-tiny-mce.element.js';
10
10
@customElement ( 'umb-property-editor-ui-tiny-mce' )
11
11
export class UmbPropertyEditorUITinyMceElement extends UmbPropertyEditorUiRteElementBase {
12
12
#onChange( event : CustomEvent & { target : UmbInputTinyMceElement } ) {
13
- const value = typeof event . target . value === 'string' ? event . target . value : '' ;
13
+ const markup = typeof event . target . value === 'string' ? event . target . value : '' ;
14
14
15
15
// If we don't get any markup clear the property editor value.
16
- if ( value === '' ) {
16
+ if ( markup === '' ) {
17
17
this . value = undefined ;
18
18
this . _fireChangeEvent ( ) ;
19
19
return ;
20
20
}
21
21
22
- // Clone the DOM, to remove the classes and attributes on the original:
23
- const div = document . createElement ( 'div' ) ;
24
- div . innerHTML = value ;
25
-
26
- // Loop through used, to remove the classes on these.
27
- const blockEls = div . querySelectorAll ( `umb-rte-block, umb-rte-block-inline` ) ;
28
- blockEls . forEach ( ( blockEl ) => {
29
- blockEl . removeAttribute ( 'contenteditable' ) ;
30
- blockEl . removeAttribute ( 'class' ) ;
31
- } ) ;
32
-
33
- const markup = div . innerHTML ;
34
-
35
22
// Remove unused Blocks of Blocks Layout. Leaving only the Blocks that are present in Markup.
36
- //const blockElements = editor.dom.select(`umb-rte-block, umb-rte-block-inline`);
37
- const usedContentKeys = Array . from ( blockEls ) . map ( ( blockElement ) =>
38
- blockElement . getAttribute ( UMB_BLOCK_RTE_DATA_CONTENT_KEY ) ,
23
+ const usedContentKeys : string [ ] = [ ] ;
24
+
25
+ // Regex matching all block elements in the markup, and extracting the content key. It's the same as the one used on the backend.
26
+ const regex = new RegExp (
27
+ / < u m b - r t e - b l o c k (?: - i n l i n e ) ? (?: c l a s s = " (?: .[ ^ " ] * ) " ) ? d a t a - c o n t e n t - k e y = " (?< key > .[ ^ " ] * ) " > (?: < ! - - U m b r a c o - B l o c k - - > ) ? < \/ u m b - r t e - b l o c k (?: - i n l i n e ) ? > / gi,
39
28
) ;
29
+ let blockElement : RegExpExecArray | null ;
30
+ while ( ( blockElement = regex . exec ( markup ) ) !== null ) {
31
+ if ( blockElement . groups ?. key ) {
32
+ usedContentKeys . push ( blockElement . groups . key ) ;
33
+ }
34
+ }
40
35
41
- if ( super . value ) {
42
- super . value = {
43
- ...super . value ,
36
+ if ( this . value ) {
37
+ this . value = {
38
+ ...this . value ,
44
39
markup : markup ,
45
40
} ;
46
41
} else {
0 commit comments