Lexical: Added base table support and started resize handling

[bookstack] / resources / js / wysiwyg / ui / framework / forms.ts

diff --git a/resources/js/wysiwyg/ui/framework/forms.ts b/resources/js/wysiwyg/ui/framework/forms.ts
index 0fce73c125a4a4878a645a0f2ee9c53d37e7aca5..4fee787d35408f84f937d44417f34f35f3eed7ea 100644 (file)
--- a/resources/js/wysiwyg/ui/framework/forms.ts
+++ b/resources/js/wysiwyg/ui/framework/forms.ts
@@ -1,11 +1,10 @@
-import {EditorUiContext, EditorUiElement} from "./core";
-import {EditorContainerUiElement} from "./containers";
+import {EditorUiContext, EditorUiElement, EditorContainerUiElement} from "./core";
 import {el} from "../../helpers";
 
 export interface EditorFormFieldDefinition {
     label: string;
     name: string;
-    type: 'text' | 'select';
+    type: 'text' | 'select' | 'textarea';
 }
 
 export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefinition {
@@ -15,9 +14,7 @@ export interface EditorSelectFormFieldDefinition extends EditorFormFieldDefiniti
 
 export interface EditorFormDefinition {
     submitText: string;
-    cancelText: string;
     action: (formData: FormData, context: EditorUiContext) => boolean;
-    cancel: () => void;
     fields: EditorFormFieldDefinition[];
 }
 
@@ -29,6 +26,15 @@ export class EditorFormField extends EditorUiElement {
         this.definition = definition;
     }
 
+    setValue(value: string) {
+        const input = this.getDOMElement().querySelector('input,select,textarea') as HTMLInputElement;
+        input.value = value;
+    }
+
+    getName(): string {
+        return this.definition.name;
+    }
+
     protected buildDOM(): HTMLElement {
         const id = `editor-form-field-${this.definition.name}-${Date.now()}`;
         let input: HTMLElement;
@@ -38,6 +44,8 @@ export class EditorFormField extends EditorUiElement {
             const labels = Object.keys(options);
             const optionElems = labels.map(label => el('option', {value: options[label]}, [label]));
             input = el('select', {id, name: this.definition.name, class: 'editor-form-field-input'}, optionElems);
+        } else if (this.definition.type === 'textarea') {
+            input = el('textarea', {id, name: this.definition.name, class: 'editor-form-field-input'});
         } else {
             input = el('input', {id, name: this.definition.name, class: 'editor-form-field-input'});
         }
@@ -51,14 +59,38 @@ export class EditorFormField extends EditorUiElement {
 
 export class EditorForm extends EditorContainerUiElement {
     protected definition: EditorFormDefinition;
+    protected onCancel: null|(() => void) = null;
 
     constructor(definition: EditorFormDefinition) {
         super(definition.fields.map(fieldDefinition => new EditorFormField(fieldDefinition)));
         this.definition = definition;
     }
 
+    setValues(values: Record<string, string>) {
+        for (const name of Object.keys(values)) {
+            const field = this.getFieldByName(name);
+            if (field) {
+                field.setValue(values[name]);
+            }
+        }
+    }
+
+    setOnCancel(callback: () => void) {
+        this.onCancel = callback;
+    }
+
+    protected getFieldByName(name: string): EditorFormField|null {
+        for (const child of this.children as EditorFormField[]) {
+            if (child.getName() === name) {
+                return child;
+            }
+        }
+
+        return null;
+    }
+
     protected buildDOM(): HTMLElement {
-        const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans(this.definition.cancelText)]);
+        const cancelButton = el('button', {type: 'button', class: 'editor-form-action-secondary'}, [this.trans('Cancel')]);
         const form = el('form', {}, [
             ...this.children.map(child => child.getDOMElement()),
             el('div', {class: 'editor-form-actions'}, [
@@ -74,7 +106,9 @@ export class EditorForm extends EditorContainerUiElement {
         });
 
         cancelButton.addEventListener('click', (event) => {
-            this.definition.cancel();
+            if (this.onCancel) {
+                this.onCancel();
+            }
         });
 
         return form;