Merge pull request #3258 from apostrophecms/PRO-1807-alignment

Pro 1807 alignment

CHANGELOG.md

@@ -5,6 +5,9 @@
 ### Fixes
 
 * Apostrophe loads modules from npm if they exist there and are configured in the `modules` section of `app.js`. This was always intended only as a way to load direct, intentional dependencies of your project. However, since npm "flattens" the dependency tree, dependencies of dependencies that happen to have the same name as a project-level Apostrophe module could be loaded by default, crashing the site or causing unexpected behavior. So beginning with this release, Apostrophe scans `package.json` to verify an npm module is actually a dependency of the project itself before attempting to load it as an Apostrophe module.
+* Fixes the reference to sanitize-html defaults in the rich text widget.
+* Fixes the `toolbarToAllowedStyles` method in the rich text widget, which was not returning any configuration.
+* Fixes the broken text alignment in rich text widgets.
 
 ## 3.1.3 - 2021-07-16
 

modules/@apostrophecms/rich-text-widget/index.js

@@ -213,7 +213,7 @@ module.exports = {
 
       optionsToSanitizeHtml(options) {
         return {
-          ...sanitizeHtml.defaultOptions,
+          ...sanitizeHtml.defaults,
           allowedTags: self.toolbarToAllowedTags(options),
           allowedAttributes: self.toolbarToAllowedAttributes(options),
           allowedClasses: self.toolbarToAllowedClasses(options),
@@ -345,10 +345,14 @@ module.exports = {
               if (!allowedStyles[simple[item].selector][property]) {
                 allowedStyles[simple[item].selector][property] = [];
               }
-              allowedStyles[simple[item].selector][property].push(...simple[item].properties[property]);
+
+              allowedStyles[simple[item].selector][property]
+                .push(...simple[item].properties[property]);
             }
           }
         }
+
+        return allowedStyles;
       },
 
       toolbarToAllowedClasses(options) {
@@ -392,14 +396,16 @@ module.exports = {
   },
   extendMethods(self) {
     return {
-      async sanitize(_super, req, input, saniOptions) {
+      async sanitize(_super, req, input, options) {
         const rteOptions = {
           ...self.options.defaultOptions,
-          ...saniOptions
+          ...options
         };
 
         const output = await _super(req, input, rteOptions);
-        output.content = sanitizeHtml(input.content, self.optionsToSanitizeHtml(rteOptions));
+        const finalOptions = self.optionsToSanitizeHtml(rteOptions);
+
+        output.content = sanitizeHtml(input.content, finalOptions);
         return output;
       },
       // Add on the core default options to use, if needed.

modules/@apostrophecms/rich-text-widget/ui/apos/components/AposRichTextWidgetEditor.vue

@@ -153,7 +153,9 @@ export default {
       onUpdate: this.editorUpdate,
       extensions: [
         StarterKit,
-        TextAlign,
+        TextAlign.configure({
+          types: [ 'heading', 'paragraph' ]
+        }),
         Highlight,
         TextStyle
       ].concat(this.aposTiptapExtensions)