# Questions after posting unlayer demo

### How much control do we have over hiding current tools and the options of current tools?

It looks like when initializing the react component, you can add config for the existing tools. It looks like the only things you can do with the existing tools is enable/disable, adjust the position of the tool, and limit the usage. To disable a tool it looks like this:

Before:
https://imgur.com/a/ttFUhKD

Code changes:

<EmailEditor
  ref={emailEditorRef}
  onLoad={initializeEditor}
  tools={{
    html: {
      enabled: false,
    },
  }}
/>

After:
https://imgur.com/a/coTkIdu

To my current knowledge, there does not appear to be too much configuration with the standard provided tools. I haven't dove too deep in creating custom tools, which may be the answer to this. I will try to create a custom element that will be an "Image" tool, where within the tool you will have the option to "Upload from computer" and "Upload from library" (since in the demo these are seperate) within the same tool. There might be some overlap in this in being able to just customize the standard provided tool from the initialization.

### What is browser support like for the unlayer editor?

I'm gonna go ahead and guess at least all modern browsers. It looks like it just renders everything within an `iframe`. If we want to dig deeper into this I can setup https://github.com/webhintio/hint and figure out how to test this sort of this.

### Compatibility of html output in email clients?

All I have been able to find is [this](https://imgur.com/a/mo9nsm3). "Outlook 2003+" seems pretty reassuring to me.

### The component is entirely client-side, right? it doesn't make any network requests to third parties or anything?

In the demo I was able to work around any interaction with the my Unlayer account. That being said, you can create an account and I assume this is how you would hook up their "paid service". You can see [here](https://docs.unlayer.com/docs/custom-js-css) requires a ["projectId"](https://docs.unlayer.com/docs/getting-started) to be passed in. I think it might communicate with some sort of service to verify the "projectId", but I haven't been able to figure that out. [Here](https://gist.github.com/mpedersen2054/e3d641a85d0ea4e112de20ca9cb66523) is what I believe to be the script used to handle all of the Unlayer stuff. Good chance the answer is buried somewhere in there.

### Fixed header and footer?

This doesn't seem like a feature that Unlayer supports out of the box. One solution I can think of for this would be to alter the JSON returned after they are done editing the template. Looking at the JSON returned, it seems to be formatted as such:

{
  "body": {
    "rows": [
      {
        "columns": [...]
      },
      ...
    ]
  }
}

So looking at this, I think we can assume that we can insert a row at the beginning and at the end of "rows" that will contain the JSON info to construct the Elastic branded header/footer.

Here is an example of what the [first row](https://imgur.com/a/q5pTmNq) looks like for "Start Template" in the video demo:

"rows": [
  {
    "cells": [1],
    "columns": [{
        "contents": [{
            "type": "text",
            "values": {
                "containerPadding": "10px",
                "_meta": {
                    "htmlID": "u_content_text_1",
                    "htmlClassNames": "u_content_text"
                },
                "selectable": true,
                "draggable": true,
                "duplicatable": true,
                "deletable": true,
                "color": "#afb0c7",
                "textAlign": "center",
                "lineHeight": "170%",
                "linkStyle": {
                    "inherit": true,
                    "linkColor": "#0000ee",
                    "linkHoverColor": "#0000ee",
                    "linkUnderline": true,
                    "linkHoverUnderline": true
                },
                "hideDesktop": false,
                "hideMobile": false,
                "text": "<p style=\"font-size: 14px; line-height: 170%;\"><span style=\"font-size: 14px; line-height: 23.8px;\">View Email in Browser</span></p>"
            }
        }],
        "values": {
            "_meta": {
                "htmlID": "u_column_1",
                "htmlClassNames": "u_column"
            },
            "border": {},
            "padding": "0px",
            "backgroundColor": ""
        }
    },
    ...
],

After they edit, and before saving this template is when we would add the header/footer.

### Would unlayer support our need to feature product images and potentially other product information in the emails / If I select a custom catalog as the basis of the campaign - we want the user to be able to highlight a set of products in the email that is sent out without having to upload them form their desktop - using our product images

So in the demo, when I am using one of the given "Templates" ("Starter Template"/"Advanced Template") I went to upload an image, and when trying to do that I was given a modal with a Gallery of "Template Specific" images, which are specific to that given template. With the "Starter Template" being images of a beach, and the "Advanced Template" being images of a city. I believe this is demo'ing what you are asking. I still need to figure out how to support both "Upload from your computer" and "Upload from provided library" at the same time.