TINY-2907: Added examples for context forms

_data/nav.yml

@@ -464,6 +464,7 @@
     - url: "#Form"
     - url: "#Context form buttons"
     - url: "#Form API"
+    - url: "#Example configuration"
   - url: "toolbarbuttons"
   - url: "typesoftoolbarbuttons"
     pages:

_includes/codepens/context-form/index.html

@@ -0,0 +1,7 @@
+<textarea>
+  <p>Clicking on the example link below will show the newly configured context form.</p>
+
+  <a href="https://www.tiny.cloud/docs/">TinyMCE Documentation</a>
+
+  <p>Clicking on text should not invoke the context form.</p>
+</textarea>

_includes/codepens/context-form/index.js

@@ -0,0 +1,64 @@
+tinymce.init({
+  selector: 'textarea',
+  height: 300,
+  setup: function (editor) {
+    var isAnchorElement = function (node) {
+      return node.nodeName.toLowerCase() === 'a' && node.href;
+    };
+
+    var getAnchorElement = function () {
+      var node = editor.selection.getNode();
+      return isAnchorElement(node) ? node : null;
+    };
+
+    editor.ui.registry.addContextForm('link-form', {
+      launch: {
+        type: 'contextformtogglebutton',
+        icon: 'link'
+      },
+      label: 'Link',
+      predicate: isAnchorElement,
+      initValue: function () {
+        var elm = getAnchorElement();
+        return !!elm ? elm.href : '';
+      },
+      commands: [
+        {
+          type: 'contextformtogglebutton',
+          icon: 'link',
+          tooltip: 'Link',
+          primary: true,
+          onSetup: function (buttonApi) {
+            buttonApi.setActive(!!getAnchorElement());
+            var nodeChangeHandler = function () {
+              buttonApi.setActive(!editor.readonly && !!getAnchorElement());
+            };
+            editor.on('nodechange', nodeChangeHandler);
+            return function() {
+              editor.off('nodechange', nodeChangeHandler);
+            }
+          },
+          onAction: function (formApi) {
+            var value = formApi.getValue();
+            console.log('Save link clicked with value: ' + value);
+            formApi.hide();
+          }
+        },
+        {
+          type: 'contextformtogglebutton',
+            icon: 'unlink',
+          tooltip: 'Remove link',
+          active: false,
+          onSetup: function () {
+            return function () {
+            }
+          },
+          onAction: function (formApi) {
+            console.log('Remove link clicked');
+            formApi.hide();
+          }
+        }
+      ]
+    });
+  }
+});

_includes/codepens/context-toolbar/index.js

@@ -18,6 +18,6 @@ tinymce.init({
       items: 'bold italic | blockquote',
       position: 'selection',
       scope: 'node'
-    })
+    });
   }
 });

ui-components/contextform.md

@@ -111,3 +111,9 @@ Both `contextformbutton` and `contextformtogglebutton` are passed `formApi` in t
 | --------- | ----------- |
 |`hide` | This will hide the form. By default, no button hides the form. It is the responsibility of the developer to hide the form in the `onAction` handler of buttons that require that the ContextForm close after the action. |
 | `getValue` | This will retrieve the value current typed in the input field. |
+
+### Example Configuration
+
+This example shows how the link plugin adds the standard link context form. The context form will show whenever any content is selected.
+
+{% include codepen.html id="context-form" height="400" tab="js" %}

ui-components/contextmenu.md

@@ -85,5 +85,5 @@ tinymce.init({
 
 This example shows how the image plugin dynamically adds the standard image menu section to the context menu. The image context menu section is empty unless the selected element is an image.
 
-{% include codepen.html id="contextmenu-section" height="900" tab="js" %}
+{% include codepen.html id="contextmenu-section" height="600" tab="js" %}
 

ui-components/toolbarbuttons.md

@@ -49,5 +49,5 @@ tinymce.init({
 
 The following example creates different types of toolbar buttons.
 
-{% include codepen.html id="toolbar-button" height="900" %}
+{% include codepen.html id="toolbar-button" height="400" %}