tinymce · FarzadHayat · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024 · Dec 19, 2024
@@ -1,12 +1,6 @@
 [[<configuration_option>]]
 == `<configuration_option>`
 
-// Replace all instances of <configuration_option> with the
-// configuration option name then remove this comment.
-
-// Add explanatory material as per the comment block below then remove
-// the block and this comment.
-
 ////
 What does the option do?
 Why use it?
@@ -19,7 +13,7 @@ Are there risks?
   - For longer or more complicated scenarios, use the limitations section below.
 ////
 
-*Type:* `+String+`, `+Boolean+`, `+Number+`, `+Function+`, `+Object+`, `+Array+`, or `+Regexp+`
+*Type:* `+String+`, `+Boolean+`, `+Number+`, `+Function+`, `+Object+`, `+Array+`, `+RegExp+`, `+null+`, `+undefined+`
 
 // Remove the *Possible values* line if there is no discrete set of possible values.
 *Possible values:* `'string1'`, `'string2'`, `false`
@@ -32,14 +26,14 @@ Are there risks?
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   <configuration_option>: '<value>'
 });
 ----
 
 // Add a working and tested configuration (edit as required)
 // or remove if not applicable.
-=== Example: disabling the <feature>
+=== Example: disabling the `<configuration_option>` option
 
 To disable <feature>, set `<configuration_option>` to `false`.
 
@@ -53,17 +47,12 @@ tinymce.init({
 
 // Remove if not applicable.
 // Edit the sub-head to singular or plural as required.
-=== Limitation(s) of the `<configuration_option>` option
+=== Limitation<s> of the `<configuration_option>` option
 
-The `<configuration_option>` option has the following limitations.
-
-// Add explanatory material as per the comment block below then remove
-// the block and this comment.
+The `<configuration_option>` option has the following limitation<s>:
 
 ////
 Known limitations.
 Complicated scenarios.
 Anything that warrants a CAUTION or WARNING admonition.
-///
-
-// Remove all comment lines and comment blocks before publishing.
+////
@@ -13,7 +13,7 @@ Are there risks?
   - For longer or more complicated scenarios, use the limitations section below.
 ////
 
-*Type:* `+String+`, `+Boolean+`, `+Number+`, `+Function+`, `+Object+`, `+Array+`, or `+Regexp+`
+*Type:* `+String+`, `+Boolean+`, `+Number+`, `+Function+`, `+Object+`, `+Array+`, `+RegExp+`, `+null+`, `+undefined+`
 
 // Remove the *Possible values* line if there is no discrete set of possible values.
 *Possible values:* `'string1'`, `'string2'`, `false`
@@ -26,32 +26,33 @@ Are there risks?
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // Change this value according to your HTML
+  selector: 'textarea',  // change this value according to your HTML
   <configuration_option>: '<value>'
 });
 ----
 
 // Add a working and tested configuration (edit as required)
 // or remove if not applicable.
-=== Example: disabling the <feature>
+=== Example: disabling the `<configuration_option>` option
 
 To disable <feature>, set `<configuration_option>` to `false`.
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // Change this value according to your HTML
+  selector: 'textarea',  // change this value according to your HTML
   <configuration_option>: 'false'
 });
 ----
 
 // Remove if not applicable.
+// Edit the sub-head to singular or plural as required.
 === Limitation<s> of the `<configuration_option>` option
 
-The `<configuration_option>` option has the following limitations.
+The `<configuration_option>` option has the following limitation<s>:
 
 ////
 Known limitations.
 Complicated scenarios.
 Anything that warrants a CAUTION or WARNING admonition.
-////
+////
@@ -6,6 +6,7 @@ asciidoc:
     # anchor configuration (the @ allows it to be overridden if required)
     idprefix: '@'
     idseparator: '-@'
+    experimental: ''
     # generic variables
     companyurl: https://www.tiny.cloud
     cdnurl: https://cdn.tiny.cloud/1/no-api-key/tinymce/7/tinymce.min.js
@@ -27,6 +28,7 @@ asciidoc:
     productname: TinyMCE
     productmajorversion: 7
     productminorversion: '7.6'
+    branding: Build with TinyMCE
     ##### product name in codeblock
     prodnamecode: tinymce
     #### more names

@@ -21,7 +21,7 @@ The {pluginname} plugin rules are sourced from the https://github.com/typograf/t
 
 However, the {pluginname} plugin only uses a sub-set of all the rules available in this library.
 
-Of the library’s full https://github.com/typograf/typograf/blob/dev/docs/RULES.en-US.md[Rules of typograf] list, the {pluginname} plugin uses the following:
+Of the library's full https://github.com/typograf/typograf/blob/dev/docs/RULES.en-US.md[Rules of typograf] list, the {pluginname} plugin uses the following:
 
 * common/space/delBeforePunctuation
 * common/space/afterComma
@@ -77,7 +77,7 @@ tinymce.init({
   selector: 'textarea',  // change this value according to your HTML
   plugins: '{plugincode}',
   toolbar: '{plugincode}',
-  typography_default_lang: [ "en-US" ], // Required to set specific typography language rules.
+  typography_default_lang: 'en-US', // Required to set specific typography language rules.
 });
 ----
 

@@ -18,42 +18,30 @@ When a new sidebar is registered, a corresponding toolbar button for toggling th
 
 === Specification object
 
-[[tooltip]]
-==== `+tooltip+`
+[cols="1,1,4", options="header"]
+|===
+| Property | Type | Description
 
-The `+tooltip+` specifies a tooltip to be displayed when hovering over the sidebar toggle button.
+| `+tooltip+`
+| `+String+`
+| Specifies a tooltip to be displayed when hovering over the sidebar toggle button.
 
-*Type:* `+String+`
+| `+icon+`
+| `+String+`
+| Specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the {productname} skin or a xref:apis/tinymce.editor.ui.registry.adoc#addIcon[custom icon].
 
-[[icon]]
-==== `+icon+`
+| `+onSetup+`
+| `+Function+`
+| Specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is `+(api) => (api) => {}+`. This function runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore, the returned function is essentially an `+onTeardown+` handler, and can be used to unbind events and callbacks.
 
-The `+icon+` specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the {productname} skin or a xref:apis/tinymce.editor.ui.registry.adoc#addIcon[custom icon].
+| `+onShow+`
+| `+Function+`
+| Specifies a function to be called when the panel is displayed. It passes in an API object.
 
-*Type:* `+String+`
-
-[[onSetup]]
-==== `+onSetup+`
-
-The `+onSetup+` specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is `+(api) => (api) => {}+`.
-
-`+onSetup+` is a complex property. It requires a function that takes the sidebar’s API and should return a callback that takes the sidebar's API and returns nothing. This occurs because `+onSetup+` runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore the returned function is essentially an `+onTeardown+` handler, and can be used to unbind events and callbacks.
-
-*Type:* `+Function+`
-
-[[onShow]]
-==== `+onShow+`
-
-The `+onShow+` specifies a function to be called when the panel displayed. It passes in an API object.
-
-*Type:* `+Function+`
-
-[[onHide]]
-==== `+onHide+`
-
-The `+onHide+` specifies a function to be called when the panel is hidden. It passes in an API object.
-
-*Type:* `+Function+`
+| `+onHide+`
+| `+Function+`
+| Specifies a function to be called when the panel is hidden. It passes in an API object.
+|===
 
 === API Object
 
@@ -72,7 +60,8 @@ include::partial$configuration/sidebar_show.adoc[leveloffset=+1]
 [source,js]
 ----
 tinymce.init({
-  ...
+  selector: 'textarea', // change this value according to your HTML
+  sidebar_show: 'mysidebar',
   toolbar: 'mysidebar',
   setup: (editor) => {
     editor.ui.registry.addSidebar('mysidebar', {

@@ -20,11 +20,11 @@ If `xref:a11ychecker.adoc#a11ychecker_allow_decorative_images[a11ychecker_allow_
 
 *Type:* `+Boolean+`
 
-*Default value:* `+false+`
-
 *Possible values:* `+true+`, `+false+`
 
-=== Example: using `+a11y_advanced_options+`
+*Default value:* `+false+`
+
+.Example: using `+a11y_advanced_options+`
 
 ifeval::["{includedSection}" == "uploadcarePlugin"]
 

@@ -32,11 +32,11 @@ If `+a11ychecker_allow_decorative_images+` is not explicitly set, the value defi
 
 *Type:* `+Boolean+`
 
-*Default value:* `+false+`
-
 *Possible values:* `+true+`, `+false+`
 
-=== Example: using `+a11ychecker_allow_decorative_images+`
+*Default value:* `+false+`
+
+.Example: using `+a11ychecker_allow_decorative_images+`
 
 [source,js]
 ----

@@ -13,14 +13,14 @@ The callback function will be passed xref:a11ychecker.adoc#issue[`issue` objects
 (issue) => true;
 ----
 
-=== Example: using `+a11ychecker_filter_issue+` to filter out the Accessibility Checker T1 rule
+The callback function in the following example will return `+false+` if the issue `id` value is `'T1'`, filtering `'T1'` issues from the Accessibility Checker report.
 
-The callback function in the following example will return `false` if the issue `id` value is `'T1'`, filtering `'T1'` issues from the Accessibility Checker report.
+.Example: using `+a11ychecker_filter_issue+` to filter out the Accessibility Checker T1 rule
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   plugins: 'a11ychecker',
   toolbar: 'a11ycheck',
   a11ychecker_filter_issue: (issue) => {
@@ -29,14 +29,14 @@ tinymce.init({
 });
 ----
 
-=== Example: using `+a11ychecker_filter_issue+` to filter out all Accessibility Checker table rules and rules less than `+'error'+` level
-
 The callback function in the following example will only return `+false+` if the issue `+element+` is a `+'table'+` and the `+'severity'+` level is not `+'error'+`, filtering all low-severity and `+table+` element-related issues from the Accessibility Checker report.
 
+.Example: using `+a11ychecker_filter_issue+` to filter out all Accessibility Checker table rules and rules less than `+'error'+` level
+
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   plugins: 'a11ychecker',
   toolbar: 'a11ycheck',
   a11ychecker_filter_issue: (issue) => {
@@ -45,14 +45,14 @@ tinymce.init({
 });
 ----
 
-=== Example: using `+a11ychecker_filter_issue+` to filter images with empty alternative text from the Accessibility Checker I1 rule
+The callback function in the following example will only return `+false+` for any issues with `'I1'` as the `+'id'+` image elements with an empty `+'alt+'` attribute, otherwise the issue won't be filtered out. This implementation can be useful as allowing images to have empty alternative text can be another method of applying the `+role="presentation"+` attribute to mark an image as `+decorative+`.
 
-The callback function in the following example will only return `false` for any issues with `'I1'` as the `+'id'+` image elements with an empty `+'alt+'` attribute, otherwise the issue won’t be filtered out. This implementation can be useful as allowing images to have empty alternative text can be another method of applying the `+role="presentation"+` attribute to mark an image as `+decorative+`.
+.Example: using `+a11ychecker_filter_issue+` to filter images with empty alternative text from the Accessibility Checker I1 rule
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   plugins: 'a11ychecker',
   toolbar: 'a11ycheck',
   a11ychecker_filter_issue: (issue) => {

@@ -7,11 +7,11 @@ For example: Setting the version to HTML 4 will enable the rule "Complex tables
 
 *Type:* `+String+`
 
-*Default value:* `+html5+`
-
 *Possible values:* `+html4+`, `+html5+`
 
-=== Example: using `+a11ychecker_html_version+`
+*Default value:* `+html5+`
+
+.Example: using `+a11ychecker_html_version+`
 
 [source,js]
 ----

@@ -3,24 +3,24 @@
 
 The `+a11ychecker_ignored_rules+` option prevents specific Accessibility Checker rules from being checked. This feature allows developers to skip rules that they do not wish to check. For example: To skip rules that flag known content issues or custom HTML that should not be checked.
 
-*Type:* A comma-separated string.
-
-*Default value:* `+''+`
+*Type:* A comma-separated `+String+` of rule IDs.
 
 *Possible values:* `+'D1'+`, `+'D2'+`, `+'D3'+`, `+'D4O'+`, `+'D4U'+`, `+'D5A'+`, `+'D5B'+`, `+'D5C'+`, `+'H93'+`, `+'I1'+`, `+'I2'+`, `+'T1'+`, `+'T2'+`, `+'T3'+`, `+'T4A'+`, `+'T4B'+`, `+'T4C'+`
 
-=== Example: using `+a11ychecker_ignored_rules+`
+*Default value:* `+''+`
 
-This examples shows how to ignore the following checks (rules):
+This examples shows how to ignore the following rules:
 
 * D2 - Sequential headings
 * I2 - Image `+alt+` text is not the image filename
 * T4B - Table headers
 
+.Example: using `+a11ychecker_ignored_rules+`
+
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   plugins: 'a11ychecker',
   toolbar: 'a11ycheck',
   a11ychecker_ignored_rules: 'D2, I2, T4B'

@@ -11,14 +11,14 @@ The `+a11ychecker_issue_url_callback+` option is used to change the target URL f
 (ruleId) => `https://www.tiny.cloud/docs/tinymce/6/a11ychecker/#${ruleId}`
 ----
 
-=== Example: using `+a11ychecker_issue_url_callback+`
-
 This example shows how to change the link for the "Click for more info" button (image:icons/help.svg[help icon - a question mark inside a circle]) on the Accessibility Checker dialog to point to anchors at `+www.example.com/tinymce/a11ychecker/more_info+`.
 
+.Example: using `+a11ychecker_issue_url_callback+`
+
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your html
+  selector: 'textarea',  // change this value according to your HTML
   plugins: 'a11ychecker',
   toolbar: 'a11ycheck',
   a11ychecker_issue_url_callback: (ruleId) =>

@@ -10,11 +10,11 @@ For example, the "Text must have a contrast ratio of at least ..." rule:
 
 *Type:* `+String+`
 
-*Default value:* `+aa+`
-
 *Possible values:* `+a+`, `+aa+`, `+aaa+`
 
-=== Example: using `+a11ychecker_level+`
+*Default value:* `+aa+`
+
+.Example: using `+a11ychecker_level+`
 
 [source,js]
 ----