Add text area

examples/yjs-widget-controls/notebooks/simple.ipynb

@@ -86,6 +86,38 @@
    "source": [
     "w.max = 200"
    ]
+  },
+  {
+   "cell_type": "code",
+   "id": "952ece55",
+   "source": "from ypywidgets import Reactive\nfrom ypywidgets.comm import CommWidget\n\n\nclass Textarea(CommWidget):\n    value = Reactive[str](\"\")\n    rows = Reactive[int](4)\n    disabled = Reactive[bool](False)\n    continuous_update = Reactive[bool](True)\n\n    @value.watch\n    def _watch_value(self, old, new):\n        # Watch the value of the textarea, and print the new value change\n        #\n        # From JupyterLab, show the log console with info level to see the print\n        # \"Ctrl + Shift + C\" then type \"Log Console\" to expand that panel\n        print(f\"value changed: '{old}'->'{new}'\")",
+   "metadata": {},
+   "execution_count": null,
+   "outputs": []
+  },
+  {
+   "cell_type": "code",
+   "id": "0e4022fe",
+   "source": "t = Textarea()\nt",
+   "metadata": {},
+   "execution_count": null,
+   "outputs": []
+  },
+  {
+   "cell_type": "code",
+   "id": "77c2eba3",
+   "source": "t.value = \"Hello, world!\"",
+   "metadata": {},
+   "execution_count": null,
+   "outputs": []
+  },
+  {
+   "cell_type": "code",
+   "id": "5b519c6b",
+   "source": "t.rows = 8",
+   "metadata": {},
+   "execution_count": null,
+   "outputs": []
   }
  ],
  "metadata": {
@@ -109,4 +141,4 @@
  },
  "nbformat": 4,
  "nbformat_minor": 5
-}
+}

examples/yjs-widget-controls/src/index.ts

@@ -46,12 +46,53 @@ class IntSlider {
   slider: HTMLInputElement;
 }
 
+class Textarea {
+  constructor(yModel: IJupyterYModel, node: HTMLElement) {
+    this.yModel = yModel;
+    this.node = node;
+
+    this.textarea = document.createElement('textarea');
+
+    this.yModel.sharedModel.attrsChanged.connect(this._stateChanged.bind(this));
+
+    this.textarea.value = this.yModel.sharedModel.getAttr('value');
+    this.textarea.rows = this.yModel.sharedModel.getAttr('rows');
+    this.textarea.disabled = this.yModel.sharedModel.getAttr('disabled');
+
+    this.textarea.onchange = this._textareaChanged.bind(this);
+    this.textarea.oninput = this._textareaInput.bind(this);
+
+    node.appendChild(this.textarea);
+  }
+
+  _stateChanged(_: IJupyterYDoc, change: MapChange): void {
+    for (const key of change.keys()) {
+      this.textarea[key] = this.yModel.sharedModel.getAttr(key);
+    }
+  }
+
+  _textareaChanged(): void {
+    this.yModel.sharedModel.setAttr('value', this.textarea.value ?? '');
+  }
+
+  _textareaInput(): void {
+    if (this.yModel.sharedModel.getAttr('continuous_update')) {
+      this.yModel.sharedModel.setAttr('value', this.textarea.value ?? '');
+    }
+  }
+
+  yModel: IJupyterYModel;
+  node: HTMLElement;
+  textarea: HTMLTextAreaElement;
+}
+
 const simple: JupyterFrontEndPlugin<void> = {
   id: 'example:simple',
   autoStart: true,
   requires: [IJupyterYWidgetManager],
   activate: (_: JupyterFrontEnd, wm: IJupyterYWidgetManager): void => {
     wm.registerWidget('IntSlider', JupyterYModel, IntSlider);
+    wm.registerWidget('Textarea', JupyterYModel, Textarea);
   }
 };