WYSIWYG Elements to Bolt Components

Ideal CKEditor Config

Bolt needs to create an example of CKEditor that can map to web components, and all the related Bolt components need to become web components.

ClassicEditor .create( document.querySelector( '#editor' ), { heading: { options: [ { model: 'paragraph', view: 'bolt-text', title: 'Paragraph' }, { model: 'headline1', view: 'bolt-text', title: 'Headline xxxlarge h1', attributes: { headline: true, font-size: 'xxxlarge', tag: 'h1' } }, { model: 'headline2', view: 'bolt-text', title: 'Headline xxlarge h2', attributes: { headline: true, font-size: 'xxlarge', tag: 'h2' } }, { model: 'headline3', view: 'bolt-text', title: 'Headline xlarge h3', attributes: { headline: true, font-size: 'xlarge', tag: 'h3' } }, { model: 'headline4', view: 'bolt-text', title: 'Headline large h4', attributes: { headline: true, font-size: 'large', tag: 'h4' } }, { model: 'headline5', view: 'bolt-text', title: 'Headline small h5', attributes: { headline: true, font-size: 'small', tag: 'h5' } }, { model: 'headline6', view: 'bolt-text', title: 'Headline xsmall h6', attributes: { headline: true, font-size: 'xsmall', tag: 'h6' } }, { model: 'subheadline1', view: 'bolt-text', title: 'Subheadline xxlarge', attributes: { subheadline: true, font-size: 'xxlarge', tag: 'p' } }, { model: 'subheadline2', view: 'bolt-text', title: 'Subheadline xlarge', attributes: { subheadline: true, font-size: 'xlarge', tag: 'p' } }, { model: 'subheadline3', view: 'bolt-text', title: 'Subheadline large', attributes: { subheadline: true, font-size: 'large', tag: 'p' } }, { model: 'eyebrow', view: 'bolt-text', title: 'Eyebrow', attributes: { eyebrow: true, tag: 'p' } }, { model: 'link', view: 'bolt-text', title: 'Link', attributes: { eyebrow: true, tag: 'a' } }, { model: 'blockquote', view: 'bolt-blockquote', title: 'Blockquote' }, { model: 'ordered-list', view: 'bolt-ordered-list', title: 'Ordered list' }, { model: 'unordered-list', view: 'bolt-unordered-list', title: 'Unordered list' }, { model: 'code', view: 'bolt-code-snippet', title: 'Code snippet' }, ] } } ) .then( ... ) .catch( ... );

CKEditor Docs

The docs show that mapping each style option to a specific tag and class is possible, but we need to figure out if it can do attributes as well. Otherwise, we'd have to make sure our web components can work without any attributes.

https://github.com/ckeditor/ckeditor-dev/tree/major/plugins
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_config.html#cfg-protectedSource

Headlines

Headline 1 is XXLarge Headline

Headline 2 is XLarge Headline

Headline 3 is Large Headline

Text

Body text is medium sized text.

Italic text is emphasized.

Bold text is strong.

Superscript text is ^sup.

Subscript text is _sub.

Link

Link is link component with default settings.

Blockquote

Blockquote is blockquote component with default settings.

Ordered List

Ordered list is Ordered list component with default settings

Unordered List

Unordered list is Unordered list component with default settings

Code

Code text is the Code Snippet component with default settings.

Table

	Column 1	Column 2	Column 3
Row 1	Table is the Table component with default settings.	R1C2	R1C3
Row 2	R2C1	R2C2	R2C3
Row 3	R3C1	R3C2	R3C3
Footer	FC1	FC2	FC3

Missing in Bolt

Figure (Image and Video): the figure component needs to be styled. All existing components other than the code snippet are not yet web components