Paragraph tags get classes stripped when widget is activated

[stuartromanek]

Applied styles save but when the editor fires up p tags get stripped

[boutell]

Could this be sanitize-html or is it definitely retaining this information until edit (i.e. you can see the classes after refresh, and before clicking to edit)?

On Mon, Jul 1, 2019 at 10:00 PM Stuart Romanek notifications@github.com wrote:

Applied styles save but when the editor fires up p tags get stripped

[image: q7gjrU7wOf] https://user-images.githubusercontent.com/1889830/60476977-a7034380-9c4b-11e9-9060-2794fee90479.gif

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe-tiptap-rich-text-widgets/issues/7?email_source=notifications&email_token=AAAH27NBXS2WBEJCHSWQUBTP5KZEVA5CNFSM4H4XJRCKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G4YSGWQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAH27N2E5KMZKPMFAFZPWTP5KZEVANCNFSM4H4XJRCA .

--

Thomas Boutell, Chief Software Architect P'unk Avenue | (215) 755-1330 | punkave.com

[boutell]

In any case sanitize-html support was rewritten for 3.x, either way it's my bug to dig into, thanks

On Wed, Jul 3, 2019 at 10:52 AM Tom Boutell tom@punkave.com wrote:

Could this be sanitize-html or is it definitely retaining this information until edit (i.e. you can see the classes after refresh, and before clicking to edit)?

On Mon, Jul 1, 2019 at 10:00 PM Stuart Romanek notifications@github.com wrote:

Applied styles save but when the editor fires up p tags get stripped

[image: q7gjrU7wOf] https://user-images.githubusercontent.com/1889830/60476977-a7034380-9c4b-11e9-9060-2794fee90479.gif

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe-tiptap-rich-text-widgets/issues/7?email_source=notifications&email_token=AAAH27NBXS2WBEJCHSWQUBTP5KZEVA5CNFSM4H4XJRCKYY3PNVWWK3TUL52HS4DFUVEXG43VMWVGG33NNVSW45C7NFSM4G4YSGWQ, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAH27N2E5KMZKPMFAFZPWTP5KZEVANCNFSM4H4XJRCA .

--

Thomas Boutell, Chief Software Architect P'unk Avenue | (215) 755-1330 | punkave.com

--

Thomas Boutell, Chief Software Architect P'unk Avenue | (215) 755-1330 | punkave.com

[stuartromanek]

I hadn't tested that but it shouldn't be santitize-html specific .. I mirrored the real styles/tags of Open Museum to prove this out ..

[hexitex]

This still seems to be happening, is there any solution?

[hexitex]

The problem is it seems to ignore anything in the sanitize override. I had spans!

So everything that is not in

options.sanitizeHtml.allowedTags = options.sanitizeHtml.allowedTags || []; options.sanitizeHtml.allowedTags = [...new Set([ ...options.sanitizeHtml.allowedTags, ...['h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'abbr', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'iframe'] ])];

above from index.js in this package is ignored

below is from my app.js

apostrophe-rich-text-widgets{
sanitizeHtml: {
    selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont',
    'input', 'link','meta'
  ],

     allowedClasses: {
'*':[
     'normal-text',
     'highlight',
     'section-headings',
     'subheading',
     'hero__title',
     'hero__title--1',
     'hero__subtitle',
     'hero__subtitle--1',
     'white-text',
   ]
    },
     allowedTags: ['span', 'h1', 'h2'],
   }
}

Also no permalinks

[boutell]

This module generates its own sanitize-html configuration based on what you allow in the editor. If you don't allow any specific classes via the "Styles" feature for paragraph tags in tiptap, then it will remove those. And so on. If it's not in the editor configuration it's not allowed, preventing surprises based on what people paste.

On Thu, Feb 11, 2021 at 1:41 AM hexitex notifications@github.com wrote:

The problem is it seems to ignore anything in the sanitize override. I had spans!

So everything that is not in

options.sanitizeHtml.allowedTags = options.sanitizeHtml.allowedTags || []; options.sanitizeHtml.allowedTags = [...new Set([ ...options.sanitizeHtml.allowedTags, ...['h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'abbr', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'iframe'] ])];

above from index.js in this package is ignored

below is from my app.js

apostrophe-rich-text-widgets{ sanitizeHtml: { selfClosing: ['img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link','meta' ],

 allowedClasses: {

'*':[ 'normal-text', 'highlight', 'section-headings', 'subheading', 'herotitle', 'herotitle--1', 'herosubtitle', 'herosubtitle--1', 'white-text', ] }, allowedTags: ['span', 'h1', 'h2'], } }

Also no permalinks

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/apostrophecms/apostrophe-tiptap-rich-text-widgets/issues/7#issuecomment-777234100, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAH27P467JZKYWQ554XFBLS6N32RANCNFSM4H4XJRCA .

--

THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[hexitex]

Yes, I understood that, read the docs very carefully and have configured the styles. They show and do what they are supposed to but it doesn't keep anything after a reload - everything returns to basic styling. H3 and anything that is pre-configured is fine, H1,H2 and my own styles just revert.

here is my toolbar config

`{{ apos.area(data, area,{widgets:{'apostrophe-rich-text': {

                toolbar: ['styles','Bold', 'Italic', 'Link', 'Table', 'BulletedList'],
                styles: [
                    {
                        tag: 'p',
                        label: 'Paragraph'
                      },
                      {   label: 'H1',
                        tag: 'h1'
                    },
                    {   label: 'H2',
                        tag: 'h2'
                    },
                    {   label: 'H3',
                        tag: 'h3'
                    },
                    {   label: 'H4',
                        tag: 'h4'
                    },
                    {   label: 'H5',
                        tag: 'h5'
                    },
                    {   label: 'H6',
                        tag: 'h6'
                    },
                    {   label: 'Normal',
                        tag: 'p',
                    'class': 'normal-text'
                    },
                    {   name: 'Highlight Paragraph',
                        tag: 'p',
                        'class': 'highlight'
                    },                   

                    {   label: 'Inline Span',
                        tag: 'p',
                        'class': 'normal-text'
                    },
                    {   label: 'Section Heading',
                        tag: 'p',
                        'class': 'section-headings'
                    },
                    {   label: 'Sub-Heading',
                        tag: 'p',
                        'class': 'subheading'
                    },
                    {   label: 'Hero Title',
                        tag: 'p',
                        class: 'hero__title'
                    },
                    {   label: 'Big Hero Title',
                        tag: 'span',
                        'class': 'hero__title--1'
                    },
                    {   label: 'Hero Sub-Title',
                        tag: 'span',
                        'class': 'hero__subtitle'
                    },
                    {   label: 'Hero Subtitle CAPS',
                        tag: 'span',
                        'class': 'hero__subtitle--1'
                    }

                ],

                controls: {
                    movable: true,
                    removable: true,
                    position: 'top-right'
                }
            },`

[hexitex]

it might be worth knowing that my toolbar is in a macro