Introducing an HTMLElement widget for more flexibility.

ipywidgets/widgets/__init__.py

@@ -18,7 +18,7 @@
 from .widget_output import Output
 from .widget_selection import RadioButtons, ToggleButtons, ToggleButtonsStyle, Dropdown, Select, SelectionSlider, SelectMultiple, SelectionRangeSlider
 from .widget_selectioncontainer import Tab, Accordion, Stacked
-from .widget_string import HTML, HTMLMath, Label, Text, Textarea, Password, Combobox
+from .widget_string import HTML, HTMLElement, HTMLMath, Label, Text, Textarea, Password, Combobox
 from .widget_controller import Controller
 from .interaction import interact, interactive, fixed, interact_manual, interactive_output
 from .widget_link import jslink, jsdlink

ipywidgets/widgets/widget_string.py

@@ -40,6 +40,19 @@ class HTML(_String):
     _view_name = Unicode('HTMLView').tag(sync=True)
     _model_name = Unicode('HTMLModel').tag(sync=True)
 
+
+@register
+class HTMLElement(_String):
+    """Renders the string `value` as HTML."""
+    _view_name = Unicode('HTMLElementView').tag(sync=True)
+    _model_name = Unicode('HTMLElementModel').tag(sync=True)
+    tagname = Unicode(None, allow_none=True, help="HTML tag name").tag(sync=True)
+
+    def __init__(self, tagname=None, **kwargs):
+        self.tagname = tagname
+        super().__init__(**kwargs)
+
+
 @register
 class HTMLMath(_String):
     """Renders the string `value` as HTML, and render mathematics."""

packages/controls/src/widget_string.ts

@@ -35,13 +35,6 @@ export class StringView extends DescriptionView {
     this.el.classList.add('widget-inline-hbox');
   }
 
-  /**
-   * Update the contents of this view
-   *
-   * Called when the model is changed.  The model may have been
-   * changed by another view or by a state update from the back-end.
-   */
-
   content: HTMLDivElement;
 }
 
@@ -92,6 +85,56 @@ export class HTMLView extends StringView {
   content: HTMLDivElement;
 }
 
+export class HTMLElementModel extends StringModel {
+  defaults(): Backbone.ObjectHash {
+    return _.extend(super.defaults(), {
+      _view_name: 'HTMLElementView',
+      _model_name: 'HTMLElementModel',
+      tagname: null
+    });
+  }
+}
+
+export class HTMLElementView extends DescriptionView {
+  /**
+   * Called when view is rendered.
+   */
+  render(): void {
+    super.render();
+    this.el.classList.add('jupyter-widgets');
+    this.el.classList.add('widget-inline-hbox');
+    this.el.classList.add('widget-html');
+    this.content = document.createElement('span');
+    this.content.classList.add('widget-html-content');
+    this.el.appendChild(this.content);
+    this.update(); // Set defaults.
+  }
+
+  /**
+   * Update the contents of this view
+   *
+   * Called when the model is changed.  The model may have been
+   * changed by another view or by a state update from the back-end.
+   */
+  update(): void {
+    this.content.outerHTML = this.model.get('value');
+    return super.update();
+  }
+
+  /**
+   * Handle message sent to the front end.
+   */
+  handle_message(content: any): void {
+    if (content.do === 'focus') {
+      this.content.focus();
+    } else if (content.do === 'blur') {
+      this.content.blur();
+    }
+  }
+
+  content: HTMLElement;
+}
+
 export class HTMLMathModel extends StringModel {
   defaults(): Backbone.ObjectHash {
     return _.extend(super.defaults(), {

packages/schema/jupyterwidgetmodels.latest.json

@@ -3227,6 +3227,118 @@
       "version": "1.5.0"
     }
   },
+  {
+    "attributes": [
+      {
+        "default": [],
+        "help": "CSS classes applied to widget DOM element",
+        "items": {
+          "type": "string"
+        },
+        "name": "_dom_classes",
+        "type": "array"
+      },
+      {
+        "default": "@jupyter-widgets/controls",
+        "help": "",
+        "name": "_model_module",
+        "type": "string"
+      },
+      {
+        "default": "1.5.0",
+        "help": "",
+        "name": "_model_module_version",
+        "type": "string"
+      },
+      {
+        "default": "HTMLElementModel",
+        "help": "",
+        "name": "_model_name",
+        "type": "string"
+      },
+      {
+        "default": "@jupyter-widgets/controls",
+        "help": "",
+        "name": "_view_module",
+        "type": "string"
+      },
+      {
+        "default": "1.5.0",
+        "help": "",
+        "name": "_view_module_version",
+        "type": "string"
+      },
+      {
+        "default": "HTMLElementView",
+        "help": "",
+        "name": "_view_name",
+        "type": "string"
+      },
+      {
+        "default": "",
+        "help": "Description of the control.",
+        "name": "description",
+        "type": "string"
+      },
+      {
+        "default": "reference to new instance",
+        "help": "",
+        "name": "layout",
+        "type": "reference",
+        "widget": "Layout"
+      },
+      {
+        "default": "\u200b",
+        "help": "Placeholder text to display when nothing has been typed",
+        "name": "placeholder",
+        "type": "string"
+      },
+      {
+        "default": "reference to new instance",
+        "help": "Styling customizations",
+        "name": "style",
+        "type": "reference",
+        "widget": "DescriptionStyle"
+      },
+      {
+        "allow_none": true,
+        "default": null,
+        "help": "Is widget tabbable?",
+        "name": "tabbable",
+        "type": "bool"
+      },
+      {
+        "allow_none": true,
+        "default": null,
+        "help": "HTML tag name",
+        "name": "tagname",
+        "type": "string"
+      },
+      {
+        "allow_none": true,
+        "default": null,
+        "help": "A tooltip caption.",
+        "name": "tooltip",
+        "type": "string"
+      },
+      {
+        "default": "",
+        "help": "String value",
+        "name": "value",
+        "type": "string"
+      }
+    ],
+    "model": {
+      "module": "@jupyter-widgets/controls",
+      "name": "HTMLElementModel",
+      "version": "1.5.0"
+    },
+    "view": {
+      "module": "@jupyter-widgets/controls",
+      "name": "HTMLElementView",
+      "version": "1.5.0"
+    }
+  },
   {
     "attributes": [
       {

packages/schema/jupyterwidgetmodels.latest.md

@@ -576,6 +576,26 @@ Attribute        | Type             | Default          | Help
 `tabbable`       | `null` or boolean | `null`           | Is widget tabbable?
 `tooltip`        | `null` or string | `null`           | A tooltip caption.
 
+### HTMLElementModel (@jupyter-widgets/controls, 1.5.0); HTMLElementView (@jupyter-widgets/controls, 1.5.0)
+
+Attribute        | Type             | Default          | Help
+-----------------|------------------|------------------|----
+`_dom_classes`   | array of string  | `[]`             | CSS classes applied to widget DOM element
+`_model_module`  | string           | `'@jupyter-widgets/controls'` | 
+`_model_module_version` | string           | `'1.5.0'`        | 
+`_model_name`    | string           | `'HTMLElementModel'` | 
+`_view_module`   | string           | `'@jupyter-widgets/controls'` | 
+`_view_module_version` | string           | `'1.5.0'`        | 
+`_view_name`     | string           | `'HTMLElementView'` | 
+`description`    | string           | `''`             | Description of the control.
+`layout`         | reference to Layout widget | reference to new instance | 
+`placeholder`    | string           | `'\u200b'`       | Placeholder text to display when nothing has been typed
+`style`          | reference to DescriptionStyle widget | reference to new instance | Styling customizations
+`tabbable`       | `null` or boolean | `null`           | Is widget tabbable?
+`tagname`        | `null` or string | `null`           | HTML tag name
+`tooltip`        | `null` or string | `null`           | A tooltip caption.
+`value`          | string           | `''`             | String value
+
 ### HTMLMathModel (@jupyter-widgets/controls, 1.5.0); HTMLMathView (@jupyter-widgets/controls, 1.5.0)
 
 Attribute        | Type             | Default          | Help

tests/test_imagemap.ipynb

@@ -10,6 +10,19 @@
     "from ipyevents import Event"
    ]
   },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "e = HTMLElement('p')\n",
+    "e.value = \"<p>ok</p>\"\n",
+    "e.layout.border = \"1px solid red\"\n",
+    "e.__dict__\n",
+    "e"
+   ]
+  },
   {
    "cell_type": "code",
    "execution_count": null,
@@ -21,7 +34,7 @@
     "b1 = Button(description=\"Button\")\n",
     "h2 = HTML('Event info')\n",
     "i = Image()\n",
-    "i.value=open(\"flocon.png\", 'rb').read()\n",
+    "i.value=open(\"magician-penguin-hi.png\", 'rb').read()\n",
     "evt1 = Event(source=l1, watched_events=['click'])\n",
     "evt2 = Event(source=b1, watched_events=['click'])\n",
     "def handle_evt(e):\n",