feature widget description (#483)

Add description to widget title popup and right panel

app/client/ui/DescriptionConfig.ts

@@ -1,18 +1,21 @@
 import {CursorPos} from 'app/client/components/Cursor';
 import {makeT} from 'app/client/lib/localization';
-import {ColumnRec} from 'app/client/models/DocModel';
+import { KoSaveableObservable } from 'app/client/models/modelUtil';
 import {autoGrow} from 'app/client/ui/forms';
 import {textarea} from 'app/client/ui/inputs';
 import {cssLabel, cssRow} from 'app/client/ui/RightPanelStyles';
 import {testId, theme} from 'app/client/ui2018/cssVars';
 import {dom, fromKo, MultiHolder, styled} from 'grainjs';
 
-const t = makeT('FieldConfig');
+const t = makeT('DescriptionConfig');
 
 export function buildDescriptionConfig(
     owner: MultiHolder,
-    origColumn: ColumnRec,
-    cursor: ko.Computed<CursorPos>,
+    description: KoSaveableObservable<string>,
+    options: {
+      cursor: ko.Computed<CursorPos>,
+      testPrefix: string,
+    },
   ) {
 
     // We will listen to cursor position and force a blur event on
@@ -22,7 +25,7 @@ export function buildDescriptionConfig(
     // update a different column.
     let editor: HTMLTextAreaElement | undefined;
     owner.autoDispose(
-      cursor.subscribe(() => {
+      options.cursor.subscribe(() => {
         editor?.blur();
       })
     );
@@ -30,14 +33,14 @@ export function buildDescriptionConfig(
     return [
       cssLabel(t("DESCRIPTION")),
       cssRow(
-        editor = cssTextArea(fromKo(origColumn.description),
+        editor = cssTextArea(fromKo(description),
           { onInput: false },
           { rows: '3' },
           dom.on('blur', async (e, elem) => {
-            await origColumn.description.setAndSave(elem.value.trim());
+            await description.saveOnly(elem.value);
           }),
-          testId('column-description'),
-          autoGrow(fromKo(origColumn.description))
+          testId(`${options.testPrefix}-description`),
+          autoGrow(fromKo(description))
         )
       ),
     ];