Macro editor (#87)

src/components/macro/macro-action-editor/index.ts

@@ -0,0 +1 @@
+export { MacroActionEditorComponent } from './macro-action-editor.component';

src/components/macro/macro-action-editor/macro-action-editor.component.html

@@ -0,0 +1,46 @@
+<div class="action--editor">
+    <div class="row">
+        <div class="col-xs-4 editor__tab-links">
+            <ul class="nav nav-pills nav-stacked">
+                <li #macroText [class.active]="activeTab === TabName.Text" (click)="selectTab(TabName.Text)">
+                    <a>
+                        <i class="fa fa-font"></i>
+                        <span>Type text</span>
+                    </a>
+                </li>
+                <li #macroKeypress [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
+                    <a>
+                        <i class="fa fa-keyboard-o"></i>
+                        <span>Key action</span>
+                    </a>
+                </li>
+                <li #macroMouse [class.active]="activeTab === TabName.Mouse" (click)="selectTab(TabName.Mouse)">
+                    <a>
+                        <i class="fa fa-mouse-pointer"></i>
+                        <span>Mouse action</span>
+                    </a>
+                </li>
+                <li #macroDelay [class.active]="activeTab === TabName.Delay" (click)="selectTab(TabName.Delay)">
+                    <a>
+                        <i class="fa fa-clock-o"></i>
+                        <span>Delay</span>
+                    </a>
+                </li>
+            </ul>
+        </div>
+        <div class="col-xs-8 editor__tabs" [ngSwitch]="activeTab">
+            <macro-text-tab #tab *ngSwitchCase="TabName.Text" [macroAction]="editableMacroAction"></macro-text-tab>
+            <macro-key-tab #tab *ngSwitchCase="TabName.Keypress" [macroAction]="editableMacroAction"></macro-key-tab>
+            <macro-mouse-tab #tab *ngSwitchCase="TabName.Mouse" [macroAction]="editableMacroAction"></macro-mouse-tab>
+            <macro-delay-tab #tab *ngSwitchCase="TabName.Delay" [macroAction]="editableMacroAction"></macro-delay-tab>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-12 flex-button-wrapper editor__actions-container">
+            <div class="editor__actions">
+                <button class="btn btn-sm btn-default flex-button" type="button" (click)="onCancelClick()"> Cancel </button>
+                <button class="btn btn-sm btn-primary flex-button" type="button" (click)="onSaveClick()"> Save </button>
+            </div>
+        </div>
+    </div>
+</div>

src/components/macro/macro-action-editor/macro-action-editor.component.scss

@@ -0,0 +1,80 @@
+.action--editor {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-radius: 0;
+    border: 0;
+}
+
+.nav {
+    padding-bottom: 1rem;
+
+    li {
+        a {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+
+            &.selected {
+                font-style: italic;
+            }
+
+            &:hover {
+                cursor: pointer;
+            }
+        }
+
+        &.active {
+            z-index: 2;
+
+            a {
+                &.selected {
+                    font-style: normal;
+                }
+
+                &:after {
+                    content: '';
+                    display: block;
+                    position: absolute;
+                    width: 0;
+                    height: 0;
+                    top: 0;
+                    right: -4rem;
+                    border-color: transparent transparent transparent #337ab7;
+                    border-style: solid;
+                    border-width: 2rem;
+                }
+            }
+        }
+    }
+}
+
+.editor {
+    &__tabs,
+    &__tab-links {
+        padding-top: 1rem;
+    }
+
+    &__tabs {
+        border-left: 1px solid #ddd;
+        margin-left: -1.6rem;
+        padding-left: 3rem;
+    }
+
+    &__actions {
+        float: right;
+
+        &-container {
+            background: #f5f5f5;
+            border-top: 1px solid #ddd;
+            padding: 1rem 1.5rem;
+        }
+    }
+}
+
+.flex-button-wrapper {
+    display: flex;
+    flex-direction: row-reverse;
+}
+
+.flex-button {
+    align-self: flex-end;
+}

src/components/macro/macro-action-editor/macro-action-editor.component.ts

@@ -0,0 +1,107 @@
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+
+import {
+    EditableMacroAction,
+    MacroAction,
+    TextMacroAction,
+    macroActionType
+} from '../../../config-serializer/config-items/macro-action';
+import { MacroKeyTabComponent } from './tab/macro-key';
+
+enum TabName {
+    Keypress,
+    Text,
+    Mouse,
+    Delay
+};
+
+@Component({
+    selector: 'macro-action-editor',
+    template: require('./macro-action-editor.component.html'),
+    styles: [require('./macro-action-editor.component.scss')],
+    host: { 'class': 'macro-action-editor' }
+})
+export class MacroActionEditorComponent implements OnInit {
+    @Input() macroAction: MacroAction;
+
+    @Output() save = new EventEmitter<MacroAction>();
+    @Output() cancel = new EventEmitter<void>();
+
+    @ViewChild('tab') selectedTab: any;
+
+    private editableMacroAction: EditableMacroAction;
+    private activeTab: TabName;
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    /* tslint:disable:no-unused-variable: It is used in the template. */
+    private TabName = TabName;
+    /* tslint:enable:no-unused-variable */
+    /* tslint:enable:variable-name */
+
+    ngOnInit() {
+        let macroAction: MacroAction = this.macroAction ? this.macroAction : new TextMacroAction();
+        this.editableMacroAction = new EditableMacroAction(macroAction.toJsObject());
+        let tab: TabName = this.getTabName(this.editableMacroAction);
+        this.activeTab = tab;
+    }
+
+    onCancelClick(): void {
+        this.cancel.emit();
+    }
+
+    onSaveClick(): void {
+        try {
+            const action = this.editableMacroAction;
+            if (action.isKeyAction()) {
+                // Could updating the saved keys be done in a better way?
+                const tab = this.selectedTab as MacroKeyTabComponent;
+                action.fromKeyAction(tab.getKeyAction());
+            }
+            this.save.emit(action.toClass());
+        } catch (e) {
+            // TODO: show error dialog
+            console.error(e);
+        }
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+        this.editableMacroAction.macroActionType = this.getTabMacroActionType(tab);
+    }
+
+    getTabName(action: EditableMacroAction): TabName {
+        switch (action.macroActionType) {
+            // Delay action
+            case macroActionType.DelayMacroAction:
+                return TabName.Delay;
+            // Text action
+            case macroActionType.TextMacroAction:
+                return TabName.Text;
+            // Keypress actions
+            case macroActionType.KeyMacroAction:
+                return TabName.Keypress;
+            // Mouse actions
+            case macroActionType.MouseButtonMacroAction:
+            case macroActionType.MoveMouseMacroAction:
+            case macroActionType.ScrollMouseMacroAction:
+                return TabName.Mouse;
+            default:
+                return TabName.Keypress;
+        }
+    }
+
+    getTabMacroActionType(tab: TabName): string {
+        switch (tab) {
+            case TabName.Delay:
+                return macroActionType.DelayMacroAction;
+            case TabName.Keypress:
+                return macroActionType.KeyMacroAction;
+            case TabName.Mouse:
+                return macroActionType.MouseButtonMacroAction;
+            case TabName.Text:
+                return macroActionType.TextMacroAction;
+            default:
+                throw new Error('Could not get macro action type');
+        }
+    }
+
+}

src/components/macro/macro-action-editor/tab/index.ts

@@ -0,0 +1,4 @@
+export { MacroDelayTabComponent } from './macro-delay';
+export { MacroKeyTabComponent } from './macro-key';
+export { MacroMouseTabComponent } from './macro-mouse';
+export { MacroTextTabComponent } from './macro-text';

src/components/macro/macro-action-editor/tab/macro-delay/index.ts

@@ -0,0 +1 @@
+export { MacroDelayTabComponent } from './macro-delay.component';

src/components/macro/macro-action-editor/tab/macro-delay/macro-delay.component.html

@@ -0,0 +1,26 @@
+<div class="macro-delay">
+    <div class="row">
+        <div class="col-xs-12">
+            <h4>Enter delay in seconds</h4>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-xs-4">
+          <input #macroDelayInput
+                 type="number" 
+                 min="0" 
+                 max="1000" 
+                 step="0.1" 
+                 placeholder="Delay amount" 
+                 class="form-control" 
+                 [(ngModel)]="delay" 
+                 (ngModelChange)="setDelay($event)">
+        </div>
+    </div>
+    <div class="row macro-delay__presets">
+        <div class="col-xs-12">
+          <h6>Choose a preset</h6>
+          <button *ngFor="let delay of presets" class="btn btn-sm btn-default"(click)="setDelay(delay)">{{delay}}s</button>
+        </div>
+    </div>
+</div>

src/components/macro/macro-action-editor/tab/macro-delay/macro-delay.component.scss

@@ -0,0 +1,16 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.macro-delay {
+    &__presets {
+        margin-top: 1rem;
+
+        button {
+            margin-right: 0.25rem;
+            margin-bottom: 0.25rem;
+        }
+    }
+}

src/components/macro/macro-action-editor/tab/macro-delay/macro-delay.component.ts

@@ -0,0 +1,35 @@
+import { AfterViewInit, Component, ElementRef, Input, OnInit, Renderer, ViewChild } from '@angular/core';
+
+import { EditableMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+
+const INITIAL_DELAY = 0.5; // In seconds
+
+@Component({
+    selector: 'macro-delay-tab',
+    template: require('./macro-delay.component.html'),
+    styles: [require('./macro-delay.component.scss')],
+    host: { 'class': 'macro__delay' }
+})
+export class MacroDelayTabComponent implements AfterViewInit, OnInit {
+    @Input() macroAction: EditableMacroAction;
+    @ViewChild('macroDelayInput') input: ElementRef;
+    private delay: number;
+    /* tslint:disable:no-unused-variable: It is used in the template. */
+    private presets: number[] = [0.3, 0.5, 0.8, 1, 2, 3, 4, 5];
+    /* tslint:enable:no-unused-variable */
+
+    constructor(private renderer: Renderer) { }
+
+    ngOnInit() {
+        this.delay = this.macroAction.delay > 0 ? this.macroAction.delay / 1000 : INITIAL_DELAY;
+    }
+
+    ngAfterViewInit() {
+        this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
+    }
+
+    setDelay(value: number): void {
+        this.delay = value;
+        this.macroAction.delay = this.delay * 1000;
+    }
+}

src/components/macro/macro-action-editor/tab/macro-key/index.ts

@@ -0,0 +1 @@
+export { MacroKeyTabComponent } from './macro-key.component';

src/components/macro/macro-action-editor/tab/macro-key/macro-key.component.html

@@ -0,0 +1,32 @@
+<div class="col-xs-12 macro-key__container">
+    <div class="col-xs-4 macro-key__types">
+        <ul class="nav nav-pills nav-stacked">
+            <li #keyMove [class.active]="activeTab === TabName.Keypress" (click)="selectTab(TabName.Keypress)">
+                <a>
+                    <i class="fa fa-hand-pointer-o"></i>
+                    <span>Press key</span>
+                </a>
+            </li>
+            <li #keyHold [class.active]="activeTab === TabName.Hold" (click)="selectTab(TabName.Hold)">
+                <a>
+                    <i class="fa fa-hand-rock-o"></i>
+                    <span>Hold key</span>
+                </a>
+            </li>
+            <li #keyRelease [class.active]="activeTab === TabName.Release" (click)="selectTab(TabName.Release)">
+                <a>
+                    <i class="fa fa-hand-paper-o"></i>
+                    <span>Release key</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="col-xs-8 macro-key__action-container">
+        <div class="macro-key__action">
+            <h4 *ngIf="activeTab === TabName.Keypress">Press key</h4>
+            <h4 *ngIf="activeTab === TabName.Hold">Hold key</h4>
+            <h4 *ngIf="activeTab === TabName.Release">Release key</h4>
+            <keypress-tab #keypressTab [defaultKeyAction]="defaultKeyAction" [longPressEnabled]="false"></keypress-tab>
+        </div>
+    </div>
+</div>

src/components/macro/macro-action-editor/tab/macro-key/macro-key.component.scss

@@ -0,0 +1,25 @@
+.macro-key {
+    &__container {
+        padding: 0;
+    }
+
+    &__types {
+        margin-left: 0;
+        padding: 0 0 1rem;
+    }
+
+    &__action {
+        &-container {
+            margin-top: -1rem;
+            padding-top: 1rem;
+            border-left: 1px solid #ddd;
+        }
+
+        padding-left: 3rem;
+        padding-bottom: 1rem;
+    }
+}
+
+.fa {
+    min-width: 14px;
+}

src/components/macro/macro-action-editor/tab/macro-key/macro-key.component.ts

@@ -0,0 +1,74 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+
+import { KeyAction } from '../../../../../config-serializer/config-items/key-action';
+import { EditableMacroAction, MacroSubAction } from '../../../../../config-serializer/config-items/macro-action';
+import { KeypressTabComponent } from '../../../../popover/tab';
+import { Tab } from '../../../../popover/tab';
+
+enum TabName {
+    Keypress,
+    Hold,
+    Release
+}
+
+@Component({
+    selector: 'macro-key-tab',
+    template: require('./macro-key.component.html'),
+    styles: [
+        require('../../macro-action-editor.component.scss'),
+        require('./macro-key.component.scss')
+    ],
+    host: { 'class': 'macro__mouse' }
+})
+export class MacroKeyTabComponent implements OnInit {
+    @Input() macroAction: EditableMacroAction;
+    @ViewChild('tab') selectedTab: Tab;
+    @ViewChild('keypressTab') keypressTab: KeypressTabComponent;
+
+    private defaultKeyAction: KeyAction;
+
+    private activeTab: TabName;
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    /* tslint:disable:no-unused-variable: It is used in the template. */
+    private TabName = TabName;
+    /* tslint:enable:no-unused-variable */
+    /* tslint:enable:variable-name */
+
+    ngOnInit() {
+        this.defaultKeyAction = this.macroAction.toKeystrokeAction();
+        this.selectTab(this.getTabName(this.macroAction));
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+        this.macroAction.action = this.getActionType(tab);
+    }
+
+    getTabName(action: EditableMacroAction): TabName {
+        if (!action.action || action.isOnlyPressAction()) {
+            return TabName.Keypress;
+        } else if (action.isOnlyHoldAction()) {
+            return TabName.Hold;
+        } else if (action.isOnlyReleaseAction()) {
+            return TabName.Release;
+        }
+    }
+
+    getActionType(tab: TabName): MacroSubAction {
+        switch (tab) {
+            case TabName.Keypress:
+                return MacroSubAction.press;
+            case TabName.Hold:
+                return MacroSubAction.hold;
+            case TabName.Release:
+                return MacroSubAction.release;
+            default:
+                throw new Error('Invalid tab type');
+        }
+    }
+
+    getKeyAction(): KeyAction {
+        return this.keypressTab.toKeyAction();
+    }
+
+}

src/components/macro/macro-action-editor/tab/macro-mouse/index.ts

@@ -0,0 +1 @@
+export { MacroMouseTabComponent } from './macro-mouse.component';

src/components/macro/macro-action-editor/tab/macro-mouse/macro-mouse.component.html

@@ -0,0 +1,77 @@
+<div class="col-xs-12 macro-mouse__container">
+    <div class="col-xs-4 macro-mouse__types">
+        <ul class="nav nav-pills nav-stacked">
+            <li #mouseMove [class.active]="activeTab === TabName.Move" (click)="selectTab(TabName.Move)">
+                <a>
+                    <i class="fa fa-arrows"></i>
+                    <span>Move pointer</span>
+                </a>
+            </li>
+            <li #mouseScroll [class.active]="activeTab === TabName.Scroll" (click)="selectTab(TabName.Scroll)">
+                <a>
+                    <i class="fa fa-arrows-v"></i>
+                    <span>Scroll</span>
+                </a>
+            </li>
+            <li #mouseClick [class.active]="activeTab === TabName.Click" (click)="selectTab(TabName.Click)">
+                <a>
+                    <i class="fa fa-mouse-pointer"></i>
+                    <span>Click button</span>
+                </a>
+            </li>
+            <li #mouseHold [class.active]="activeTab === TabName.Hold" (click)="selectTab(TabName.Hold)">
+                <a>
+                    <i class="fa fa-hand-rock-o"></i>
+                    <span>Hold button</span>
+                </a>
+            </li>
+            <li #mouseRelease [class.active]="activeTab === TabName.Release" (click)="selectTab(TabName.Release)">
+                <a>
+                    <i class="fa fa-hand-paper-o"></i>
+                    <span>Release button</span>
+                </a>
+            </li>
+        </ul>
+    </div>
+    <div class="col-xs-8 macro-mouse__actions" [ngSwitch]="activeTab">
+        <div #tab *ngSwitchCase="TabName.Move">
+            <h4>Move pointer</h4>
+            <p>Use negative values to move down or left from current position.</p>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label for="move-mouse-x">X</label>
+                    <input id="move-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction.moveX"> pixels
+                </div>
+                <div class="form-group">
+                    <label for="move-mouse-y">Y</label>
+                    <input id="move-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction.moveY"> pixels
+                </div>
+            </div>
+        </div>
+        <div #tab *ngSwitchCase="TabName.Scroll">
+            <h4>Scroll</h4>
+            <p>Use negative values to move down or left from current position.</p>
+            <div class="form-horizontal">
+                <div class="form-group">
+                    <label for="scroll-mouse-x">X</label>
+                    <input id="scroll-mouse-x" type="number" class="form-control" [(ngModel)]="macroAction.scrollX"> pixels
+                </div>
+                <div class="form-group">
+                    <label for="scroll-mouse-y">Y</label>
+                    <input id="scroll-mouse-y" type="number" class="form-control" [(ngModel)]="macroAction.scrollY"> pixels
+                </div>
+            </div>
+        </div>
+        <div #tab *ngIf="activeTab === TabName.Click || activeTab === TabName.Hold || activeTab === TabName.Release">
+            <h4 *ngIf="activeTab === TabName.Click">Click mouse button</h4>
+            <h4 *ngIf="activeTab === TabName.Hold">Hold mouse button</h4>
+            <h4 *ngIf="activeTab === TabName.Release">Release mouse button</h4>
+            <div class="btn-group macro-mouse__buttons">
+                <button *ngFor="let buttonLabel of buttonLabels; let buttonIndex = index"
+                        class="btn btn-default" 
+                        [class.btn-primary]="hasButton(buttonIndex)" 
+                        (click)="setMouseClick(buttonIndex)">{{buttonLabel}}</button>
+            </div>
+        </div>
+    </div>
+</div>

src/components/macro/macro-action-editor/tab/macro-mouse/macro-mouse.component.scss

@@ -0,0 +1,43 @@
+.macro-mouse {
+    &__container {
+        padding: 0;
+    }
+
+    &__types {
+        border-right: 1px solid #ddd;
+        border-left: 0;
+        margin-top: -1rem;
+        margin-left: 0;
+        padding: 1rem 0;
+    }
+
+    &__actions {
+        padding-left: 3rem;
+        padding-bottom: 1rem;
+    }
+
+    &__buttons {
+        margin-top: 3rem;
+        margin-bottom: 1rem;
+    }
+}
+
+.fa {
+    min-width: 14px;
+}
+
+.form-horizontal {
+    .form-group {
+        margin: 0 0 0.5rem;
+    }
+
+    label {
+        display: inline-block;
+        margin-right: 0.5rem;
+    }
+
+    .form-control {
+        display: inline-block;
+        width: 60%;
+    }
+}

src/components/macro/macro-action-editor/tab/macro-mouse/macro-mouse.component.ts

@@ -0,0 +1,107 @@
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
+
+import { EditableMacroAction, MacroSubAction, macroActionType } from '../../../../../config-serializer/config-items/macro-action';
+import { Tab } from '../../../../popover/tab';
+
+enum TabName {
+    Move,
+    Scroll,
+    Click,
+    Hold,
+    Release
+}
+
+@Component({
+    selector: 'macro-mouse-tab',
+    template: require('./macro-mouse.component.html'),
+    styles: [
+        require('../../macro-action-editor.component.scss'),
+        require('./macro-mouse.component.scss')
+    ],
+    host: { 'class': 'macro__mouse' }
+})
+export class MacroMouseTabComponent implements OnInit {
+    @Input() macroAction: EditableMacroAction;
+    @ViewChild('tab') selectedTab: Tab;
+
+    private activeTab: TabName;
+    private buttonLabels: string[];
+    private selectedButtons: boolean[];
+    /* tslint:disable:variable-name: It is an enum type. So it can start with uppercase. */
+    /* tslint:disable:no-unused-variable: It is used in the template. */
+    private TabName = TabName;
+    /* tslint:enable:no-unused-variable */
+    /* tslint:enable:variable-name */
+
+    constructor() {
+        this.buttonLabels = ['Left', 'Middle', 'Right'];
+        this.selectedButtons = Array(this.buttonLabels.length).fill(false);
+    }
+
+    ngOnInit() {
+        const tabName = this.getTabName(this.macroAction);
+        this.selectTab(tabName);
+        const buttonActions = [TabName.Click, TabName.Hold, TabName.Release];
+        if (buttonActions.includes(this.activeTab)) {
+            this.selectedButtons = this.macroAction.getMouseButtons();
+        }
+    }
+
+    selectTab(tab: TabName): void {
+        this.activeTab = tab;
+        this.macroAction.macroActionType = this.getMacroActionType(tab);
+        if (this.macroAction.macroActionType === macroActionType.MouseButtonMacroAction) {
+            this.macroAction.action = this.getAction(tab);
+        }
+    }
+
+    setMouseClick(index: number): void {
+        this.selectedButtons[index] = !this.selectedButtons[index];
+        this.macroAction.setMouseButtons(this.selectedButtons);
+    }
+
+    hasButton(index: number): boolean {
+        return this.selectedButtons[index];
+    }
+
+    getAction(tab: TabName): MacroSubAction {
+        switch (tab) {
+            case TabName.Click:
+                return MacroSubAction.press;
+            case TabName.Hold:
+                return MacroSubAction.hold;
+            case TabName.Release:
+                return MacroSubAction.release;
+            default:
+                throw new Error('Invalid tab name');
+        }
+    }
+
+    getTabName(action: EditableMacroAction): TabName {
+        if (action.macroActionType === macroActionType.MouseButtonMacroAction) {
+            if (!action.action || action.isOnlyPressAction()) {
+                return TabName.Click;
+            } else if (action.isOnlyPressAction()) {
+                return TabName.Hold;
+            } else if (action.isOnlyReleaseAction()) {
+                return TabName.Release;
+            }
+        } else if (action.macroActionType === macroActionType.MoveMouseMacroAction) {
+            return TabName.Move;
+        } else if (action.macroActionType === macroActionType.ScrollMouseMacroAction) {
+            return TabName.Scroll;
+        }
+        return TabName.Move;
+    }
+
+    getMacroActionType(tab: TabName): string {
+        if (tab === TabName.Click || tab === TabName.Hold || tab === TabName.Release) {
+            return macroActionType.MouseButtonMacroAction;
+        } else if (tab === TabName.Move) {
+            return macroActionType.MoveMouseMacroAction;
+        } else if (tab === TabName.Scroll) {
+            return macroActionType.ScrollMouseMacroAction;
+        }
+    }
+
+}

src/components/macro/macro-action-editor/tab/macro-text/index.ts

@@ -0,0 +1 @@
+export { MacroTextTabComponent } from './macro-text.component';

src/components/macro/macro-action-editor/tab/macro-text/macro-text.component.html

@@ -0,0 +1,5 @@
+<div>
+    <h4>Type text</h4>
+    <p>Input the text you want to type with this macro action.</p>
+    <textarea #macroTextInput name="macro-text" [(ngModel)]="macroAction.text" class="macro__text-input"></textarea>
+</div>

src/components/macro/macro-action-editor/tab/macro-text/macro-text.component.scss

@@ -0,0 +1,11 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    position: relative;
+}
+
+.macro__text-input {
+    width: 100%;
+    min-height: 10rem;
+    margin-bottom: 1rem;
+}

src/components/macro/macro-action-editor/tab/macro-text/macro-text.component.ts

@@ -0,0 +1,28 @@
+import {
+    AfterViewInit,
+    Component,
+    ElementRef,
+    Input,
+    Renderer,
+    ViewChild
+} from '@angular/core';
+
+import { EditableMacroAction } from '../../../../../config-serializer/config-items/macro-action';
+
+@Component({
+    selector: 'macro-text-tab',
+    template: require('./macro-text.component.html'),
+    styles: [require('./macro-text.component.scss')],
+    host: { 'class': 'macro__text' }
+})
+export class MacroTextTabComponent implements AfterViewInit {
+    @Input() macroAction: EditableMacroAction;
+    @ViewChild('macroTextInput') input: ElementRef;
+
+    constructor(private renderer: Renderer) {}
+
+    ngAfterViewInit() {
+        this.renderer.invokeElementMethod(this.input.nativeElement, 'focus');
+    }
+
+}