yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v13/dev' into v13/contrib

Browse Source
This commit is contained in:
Sebastiaan Janssen
2024-08-15 11:28:55 +02:00
parent 09f16c33d1 bb1c36f591
commit b41de5764b
9 changed files with 172 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/Umbraco.Web.UI.Client/src/common/services/blockeditormodelobject.service.js
View File

@@ -401,8 +401,9 @@
// If we are in the document type editor, we need to use -20 as the current page id.
// If we are in the content editor, we need to use the current page id or parent id if the current page is new.
// We can recognize a content editor context by checking if the current editor state has a contentTypeKey.
// If no current is represented, we will use null.
const currentEditorState = editorState.getCurrent();
const currentPageId = currentEditorState.contentTypeKey ? currentEditorState.id || currentEditorState.parentId || -20 : -20;
const currentPageId = currentEditorState ? currentEditorState.contentTypeKey ? currentEditorState.id || currentEditorState.parentId || -20 : -20 : null;
// Load all scaffolds for the block types.
// The currentPageId is used to determine the access level for the current user.

20
src/Umbraco.Web.UI.Client/src/common/services/tinymce.service.js
View File

@@ -1457,12 +1457,13 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
function syncContent() {
const content = args.editor.getContent()
const content = args.editor.getContent();
if (getPropertyValue() === content) {
return;
}
//stop watching before we update the value
stopWatch();
angularHelper.safeApply($rootScope, function () {
@@ -1493,8 +1494,9 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
const blockEls = args.editor.contentDocument.querySelectorAll('umb-rte-block, umb-rte-block-inline');
for (var blockEl of blockEls) {
if(!blockEl._isInitializedUmbBlock) {
// First time we initialize this block element
const blockContentUdi = blockEl.getAttribute('data-content-udi');
if(blockContentUdi && !blockEl.$block) {
if(blockContentUdi) {
const block = args.blockEditorApi.getBlockByContentUdi(blockContentUdi);
if(block) {
blockEl.removeAttribute('contenteditable');
@@ -1533,9 +1535,23 @@ function tinyMceService($rootScope, $q, imageHelper, $locale, $http, $timeout, s
} else {
args.editor.dom.remove(blockEl);
}
} else {
// Second time we initialize this block element, cause by a new Block Model Object has been initiated. (Mainly cause we re initiate all blocks when there is a value update)
const blockContentUdi = blockEl.getAttribute('data-content-udi');
const block = args.blockEditorApi.getBlockByContentUdi(blockContentUdi);
if(block) {
blockEl.$index = block.index;
blockEl.$block = block;
blockEl.update();
} else {
console.error('Could not find block with content udi: ' + blockContentUdi);
}
}
}
}
args.editor.on('updateBlocks', function () {
initBlocks();
});
// If we can not find the insert image/media toolbar button
// Then we need to add an event listener to the editor

95
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/blocks/umb-rte-block-clipboard.component.js Normal file
View File

@@ -0,0 +1,95 @@
/**
* @ngdoc service
* @name umbraco.services.rte-block-clipboard-service
*
* Handles clipboard resolvers for Block of RTE properties.
*
*/
(function () {
'use strict';
/**
* When performing a runtime copy of Block Editors entries, we copy the ElementType Data Model and inner IDs are kept identical, to ensure new IDs are changed on paste we need to provide a resolver for the ClipboardService.
*/
angular.module('umbraco').run(['clipboardService', 'udiService', function (clipboardService, udiService) {
function replaceUdi(obj, key, dataObject, markup) {
var udi = obj[key];
var newUdi = udiService.create("element");
obj[key] = newUdi;
dataObject.forEach((data) => {
if (data.udi === udi) {
data.udi = newUdi;
}
});
// make a attribute name of the key, by kebab casing it:
var attrName = key.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
// replace the udi in the markup as well.
var regex = new RegExp('data-'+attrName+'="'+udi+'"', "g");
markup = markup.replace(regex, 'data-'+attrName+'="'+newUdi+'"');
return markup;
}
function replaceUdisOfObject(obj, propValue, markup) {
for (var k in obj) {
if(k === "contentUdi") {
markup = replaceUdi(obj, k, propValue.contentData, markup);
} else if(k === "settingsUdi") {
markup = replaceUdi(obj, k, propValue.settingsData, markup);
} else {
// lets crawl through all properties of layout to make sure get captured all `contentUdi` and `settingsUdi` properties.
var propType = typeof obj[k];
if(propType != null && (propType === "object" || propType === "array")) {
markup = replaceUdisOfObject(obj[k], propValue, markup);
}
}
}
return markup
}
function rawRteBlockResolver(propertyValue, propPasteResolverMethod) {
if (propertyValue != null && typeof propertyValue === "object") {
// object property of 'blocks' holds the data for the Block Editor.
var value = propertyValue.blocks;
// we got an object, and it has these three props then we are most likely dealing with a Block Editor.
if ((value.layout !== undefined && value.contentData !== undefined && value.settingsData !== undefined)) {
// replaceUdisOfObject replaces udis of the value object(by instance reference), but also returns the updated markup (as we cant update the reference of a string).
propertyValue.markup = replaceUdisOfObject(value.layout, value, propertyValue.markup);
// run resolvers for inner properties of this Blocks content data.
if(value.contentData.length > 0) {
value.contentData.forEach((item) => {
for (var k in item) {
propPasteResolverMethod(item[k], clipboardService.TYPES.RAW);
}
});
}
// run resolvers for inner properties of this Blocks settings data.
if(value.settingsData.length > 0) {
value.settingsData.forEach((item) => {
for (var k in item) {
propPasteResolverMethod(item[k], clipboardService.TYPES.RAW);
}
});
}
}
}
}
function elementTypeBlockResolver(obj, propPasteResolverMethod) {
// we could filter for specific Property Editor Aliases, but as the Block Editor structure can be used by many Property Editor we do not in this code know a good way to detect that this is a Block Editor and will therefor leave it to the value structure to determin this.
rawRteBlockResolver(obj.value, propPasteResolverMethod);
}
clipboardService.registerPastePropertyResolver(elementTypeBlockResolver, clipboardService.TYPES.ELEMENT_TYPE);
clipboardService.registerPastePropertyResolver(rawRteBlockResolver, clipboardService.TYPES.RAW);
}]);
})();

10
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/blocks/umb-rte-block.component.js
View File

@@ -18,7 +18,8 @@
}
function onInit() {
$element[0]._isInitializedUmbBlock = true;
// We might call onInit multiple times(via the update method), so parsing the latest values is needed no matter if it has been initialized before.
$scope.block = $element[0].$block;
$scope.api = $element[0].$api;
$scope.index = $element[0].$index;
@@ -27,6 +28,13 @@
$scope.parentForm = $element[0].$parentForm;
$scope.valFormManager = $element[0].$valFormManager;
if($element[0]._isInitializedUmbBlock === true) {
return;
}
$element[0]._isInitializedUmbBlock = true;
$element[0].update = onInit;
const stylesheet = $scope.block.config.stylesheet;
var shadowRoot = $element[0].attachShadow({ mode: 'open' });

20
src/Umbraco.Web.UI.Client/src/views/propertyeditors/rte/rte.component.js
View File

@@ -264,7 +264,7 @@
},
culture: vm.umbProperty?.culture ?? null,
segment: vm.umbProperty?.segment ?? null,
blockEditorApi: vm.noBlocksMode ? undefined : vm.blockEditorApi,
blockEditorApi: vm.noBlocksMode ? undefined : vm.blockEditorApi,
parentForm: vm.propertyForm,
valFormManager: vm.valFormManager,
currentFormInput: $scope.rteForm.modelValue
@@ -341,10 +341,14 @@
// we need to deal with that here so that our model values are all in sync so we basically re-initialize.
function onServerValueChanged(newVal, oldVal) {
ensurePropertyValue(newVal);
// updating the modelObject with the new value cause a angular compile issue.
// But I'm not sure it's needed, as this does not trigger the RTE
if(modelObject) {
modelObject.update(vm.model.value.blocks, $scope);
vm.tinyMceEditor.fire('updateBlocks');
}
onLoaded();
}
@@ -944,7 +948,19 @@
return undefined;
}
return vm.layout[layoutIndex].$block;
var layoutEntry = vm.layout[layoutIndex];
if(layoutEntry.$block === undefined || layoutEntry.$block.config === undefined) {
// make block model
var blockObject = getBlockObject(layoutEntry);
if (blockObject === null) {
// Initialization of the Block Object didn't go well, therefor we will fail the paste action.
return false;
}
// set the BlockObject on our layout entry.
layoutEntry.$block = blockObject;
}
return layoutEntry.$block;
}
vm.blockEditorApi = {