add documentation for addView API

modules/ROOT/examples/live-demos/custom-view/index.html

@@ -0,0 +1,19 @@
+<textarea id="custom-view">
+  {{logofordemoshtml}}
+  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
+  <p>Select the "Show Code View" toolbar button to open the custom view. This will enable you to modify the source code of the editor content.</p>
+
+  <h2>Got questions or need help?</h2>
+  <ul>
+    <li>Our <a href="{{site-url}}/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
+    <li>Have a specific question? Try the <a href="{{communitysupporturl}}" target="_blank" rel="noopener"><code>{{prodnamecode}}</code> tag at Stack Overflow</a>.</li>
+    <li>We also offer enterprise grade support as part of <a href="{{pricingpage}}">TinyMCE premium plans</a>.</li>
+  </ul>
+
+  <h2>Found a bug?</h2>
+  <p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
+
+  <h2>Finally ...</h2>
+  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br/>
+    All the best from the TinyMCE team.</p>
+</textarea>

modules/ROOT/examples/live-demos/custom-view/index.js

@@ -0,0 +1,53 @@
+tinymce.init({
+  selector: "textarea#custom-view",
+  toolbar: "showCodeView",
+  height: 600,
+  setup: (ed) => {
+    ed.ui.registry.addView('code', {
+      buttons: [
+        {
+          type: 'button',
+          text: 'Cancel',
+          buttonType: 'secondary',
+          onAction: () => {
+            ed.execCommand('ToggleView', false, 'code');
+            console.log('close');
+          }
+        },
+        {
+          type: 'button',
+          text: 'Save code',
+          buttonType: 'primary',
+          onAction: () => {
+            const codeContent = document.querySelector('.tox-view__pane_panel').value;
+            ed.setContent(codeContent);
+            ed.execCommand('ToggleView', false, 'code');
+            console.log('save');
+          }
+        },
+      ],
+      onShow: (api) => {
+        const editorContent = ed.getContent();
+        api.getContainer().innerHTML = `
+          <div style="height: 100%">
+            <textarea class="tox-view__pane_panel" style="width: 100%; height: 100%; resize: none; padding: 0.5em">
+              ${editorContent}
+            </textarea>
+          </div>`;
+      },
+      onHide: (api) => {
+        console.log('Deactivate code', api.getContainer());
+      }
+    });
+
+    ed.ui.registry.addButton('showCodeView', {
+      icon: 'sourcecode',
+      text: 'Show Code View',
+      onAction: (_api) => {
+        console.log('source code editor');
+        ed.execCommand('ToggleView', false, 'code');
+      }
+    });
+  },
+  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
+});

modules/ROOT/nav.adoc

@@ -177,6 +177,7 @@
 *** xref:autocompleter.adoc[Autocompleter]
 *** xref:creating-custom-notifications.adoc[Notifications]
 *** xref:customsidebar.adoc[Sidebars]
+*** xref:custom-view.adoc[Views]
 *** xref:contextform.adoc[Context forms]
 *** xref:contextmenu.adoc[Context menus]
 *** xref:contexttoolbar.adoc[Context toolbar]

modules/ROOT/pages/custom-view.adoc

@@ -0,0 +1,81 @@
+= Custom View
+:navtitle: Custom View
+:description: How to create a custom view in TinyMCE.
+:keywords: view, UI, addView
+
+{productname} allows developers to create custom views and attach them to the main editor view. This feature enables the creation of additional UI components that can be toggled on or off. When toggled on, the custom view replaces the editor, providing a distinct visual space for specialized functionality.
+
+include::partial$misc/admon-iframe-only.adoc[]
+
+== Editor View API
+
+The `addView` API in the editor's UI registry allows developers to register new view containers. These containers are initially hidden (off) and attached next to the main view. The visibility of these custom views can be toggled using the `ToggleView` command. The state of the custom view can be queried using the `queryCommandValue` method.
+
+This is the syntax for the `addView` function: `+editor.ui.registry.addView(name: String, obj: View.ViewSpec)+`
+
+=== Parameters
+
+[[name]]
+==== `+name+`
+
+The `+name+` parameter is a unique identifier for the new view.
+
+*Type:* `+String+`
+
+[[obj]]
+==== `+obj+`
+
+The `+obj+` parameter is the view specification object.
+
+*Type:* `+View.ViewSpec+`
+
+=== View Specification Object
+
+The view specification object can have various properties:
+
+[[buttons]]
+==== `+buttons+`
+
+The `+buttons+` property specifies an array of buttons to be displayed in the top right corner of the view.
+
+*Type:* `+Array+`
+
+[[onShow]]
+==== `+onShow+`
+
+The `+onShow+` property specifies a function to be called when the view is displayed. It receives an API object.
+
+*Type:* `+Function+`
+
+[[onHide]]
+==== `+onHide+`
+
+The `+onHide+` property specifies a function to be called when the view is hidden. It receives an API object.
+
+*Type:* `+Function+`
+
+=== Toggling the Custom View
+
+To toggle the custom view, you can use the `+ToggleView+` command. Here is an example of how to use it:
+
+[source,js]
+----
+// Assuming 'myCustomView' is the name of your custom view
+editor.execCommand('ToggleView', false, 'myCustomView');
+----
+
+=== Querying the State of the Custom View
+
+To query the state of the custom view (whether it is currently visible or hidden), you can use the `+queryCommandValue+` method:
+
+[source,js]
+----
+// Assuming 'myCustomView' is the name of your custom view
+editor.queryCommandValue('ToggleView') == 'myCustomView';
+----
+
+== Interactive example
+
+This example shows how to integrate a custom view using the `addView` API.
+
+liveDemo::custom-view[]