feat(editor): add code input component and editor-bare, replace dees-editor usage, and add modal contentPadding

ts_web/elements/dees-modal/dees-modal.ts

@@ -45,6 +45,7 @@ export class DeesModal extends DeesElement {
     showHelpButton?: boolean;
     onHelp?: () => void | Promise<void>;
     mobileFullscreen?: boolean;
+    contentPadding?: number;
   }) {
     const body = document.body;
     const modal = new DeesModal();
@@ -58,6 +59,7 @@ export class DeesModal extends DeesElement {
     if (optionsArg.showHelpButton !== undefined) modal.showHelpButton = optionsArg.showHelpButton;
     if (optionsArg.onHelp) modal.onHelp = optionsArg.onHelp;
     if (optionsArg.mobileFullscreen !== undefined) modal.mobileFullscreen = optionsArg.mobileFullscreen;
+    if (optionsArg.contentPadding !== undefined) modal.contentPadding = optionsArg.contentPadding;
     modal.windowLayer = await DeesWindowLayer.createAndShow({
       blur: true,
     });
@@ -108,6 +110,9 @@ export class DeesModal extends DeesElement {
   @property({ type: Boolean })
   accessor mobileFullscreen: boolean = false;
 
+  @property({ type: Number })
+  accessor contentPadding: number = 16;
+
   @state()
   accessor modalZIndex: number = 1000;
 
@@ -272,7 +277,6 @@ export class DeesModal extends DeesElement {
       }
 
       .modal .content {
-        padding: 16px;
         flex: 1;
         overflow-y: auto;
         overflow-x: hidden;
@@ -361,7 +365,7 @@ export class DeesModal extends DeesElement {
               ` : ''}
             </div>
           </div>
-          <div class="content">${this.content}</div>
+          <div class="content" style="padding: ${this.contentPadding}px;">${this.content}</div>
           ${this.menuOptions.length > 0 ? html`
             <div class="bottomButtons">
               ${this.menuOptions.map(