Preview issue with rich-text-widgets in pieces modal

Expected behavior:

1. Applying styles (bold, italic, custom) to content in a rich-text-widgets editor show in preview

Actual behavior:

1. No matter what styles are applied, content appears plain text thereby making it hard for users to see what the end result will be (See screenshot below). Note that if I include the rich-text-widgets on a page, then bold and italic and link previews will work but custom styles and bulletedlist don’t.

Pieces screenshot:

Pages screenshot:

Relevant code: In the piece definition (/lib/modules/articles/index.js), I have the following field definition:

{ name: 'content', label: 'Content', type: 'singleton', widgetType: 'apostrophe-rich-text', options: { toolbar: [ 'Bold', 'Italic', 'Styles', 'BulletedList', 'Link', 'Unlink' ], styles: [ { name: 'Heading 1', element: 'h1' }, { name: 'Heading 2', element: 'h2' }, { name: 'Heading 3', element: 'h3' }, ] } }

/lib/modules/apostrophe-rich-text-widgets/index.js

module.exports = { // The standard list copied from the module, plus sup and sub sanitizeHtml: { allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul', 'ol', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre', 'sup', 'sub' ], allowedAttributes: { a: [ 'href', 'name', 'target' ], // We don't currently allow img itself by default, but this // would make sense if we did img: [ 'src' ] }, // Lots of these won't come up by default because we don't allow them selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont', 'input', 'link', 'meta' ], // URL schemes we permit allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ], allowedSchemesByTag: {} } };

/lib/modules/apostrophe-pages/views/pages/articlepage.html

` {% extends “layout.html” %}

{% block main %}

<div class="main-content"> {{ apos.singleton(data.page, 'textBlock', 'apostrophe-rich-text', { toolbar: [ 'Bold', 'Italic', 'Styles', 'BulletedList', 'Link', 'Unlink' ], styles: [ { name: 'Heading 1', element: 'h1' }, { name: 'Heading 2', element: 'h2' }, { name: 'Heading 3', element: 'h3' } ] }) }} </div> {% endblock %} `

[houmark]

Alright, I’ll get a PR in soon for at least the most common styles isolated to the dialog modal rich text editor.

[shauravg]

Hey @houmark sorry for the delay in response. I tried it out and it works!

Quick question however. If I put the rich-text-widget.less file under my project root/lib/modules/apostrophe-rich-text-widgets/public/css/components/ , it has no effect. Is there a appropriate way to introduce custom styles without overriding the file under node_modules?