MAGEDOC-3434: Edit custom toolbar topic

Update toolbar topic and replaced svg with png

Author: bdenham

docs/create-basic-content-type/overview.md

@@ -28,7 +28,7 @@ After registering your module (`bin/magento setup:upgrade`) you will be ready to
 
 The steps for creating the Quote content type are illustrated and described below. The reality is not quite this linear, but these steps do represent the basic phases and flow for building new Page Builder content types.
 
-![Creating Custom Content Types](../images/content-type-overview.svg)
+![Creating Custom Content Types](../images/content-type-overview.png)
 
 1. **Add configuration**: Create an XML file to define your content type and reference the other files that control the appearance and behavior of your content type.  
 2. **Add templates**: Create HTML templates that define the appearance of your content types on the Admin stage (`preview.html`) and the storefront (`master.html`).

docs/how-to/how-to-add-custom-toolbar.md

@@ -10,15 +10,15 @@ Toolbars provide end-users with a quick way to change common properties of your
 
 The diagram below shows the basic steps for adding a toolbar to your content type. It also shows how the various parts connect and work together.
 
-![](../images/how-toolbars-work.png)
+![](../images/how-toolbars-work.png){:width="851px" height="auto"}
 
 
 
 ## Step 1: Add toolbar options
 
 Toolbar options are the clickable items in a toolbar that represent the property values of a form field. For example, the Heading content type adds toolbar options for the `text_align` field from `pagebuilder_base_form.xml`. The Heading adds the values of the `text_align` field (`left`, `center`, and `right`) as items on the toolbar, represented with the images provided by the icon CSS classes as shown here:
 
-```typescript
+```js
 {
     key: "text_align",
     type: "select",