feature(Plugins/Premium/Fromat Painter -> PowerPaste): Update docs for premium plugins section from formatpainter to powerpaste (#2308)

* featue(Plugins/Premium/Fromat Painter -> PowerPaste): Update docs for premium plugins section from formatpainter to powerpaste

* Update modules/ROOT/partials/configuration/mentions_item_type.adoc

Co-authored-by: Lee Newson <[email protected]>

* Update modules/ROOT/partials/configuration/mentions_fetch.adoc

Co-authored-by: Lee Newson <[email protected]>

* Update modules/ROOT/partials/configuration/mentions_menu_hover.adoc

Co-authored-by: Lee Newson <[email protected]>

* Update modules/ROOT/partials/configuration/mentions_item_type.adoc

Co-authored-by: Lee Newson <[email protected]>

* Update modules/ROOT/partials/configuration/mentions_select.adoc

Co-authored-by: Lee Newson <[email protected]>

* feature(Plugins/Premium Plugins/Powerpaste): fix a ToC isue as suggested in review

Co-authored-by: Lee Newson <[email protected]>

Author: hamza0867

modules/ROOT/pages/plugins/premium/formatpainter.adoc

@@ -17,7 +17,7 @@ liveDemo::format-painter[]
 
 == Basic setup
 
-To add the {pluginname} plugin to the editor, add `+{plugincode}+` to the `plugins` option in the editor configuration.
+To add the {pluginname} plugin to the editor, add `{plugincode}` to the `plugins` option in the editor configuration.
 
 For example:
 
@@ -39,7 +39,7 @@ The format painter operates in two modes, one for retrieval and one for applicat
 *Usage with toolbar button*
 
 . Position the cursor at the source content to retrieve the formatting.
-. Enable the *Format Painter* button to copy the formatting. The *Format Painter* toolbar button background color changes to _grey_ image:{baseurl}/images/icons/format-painter.svg[the Format Painter toolbar button icon].
+. Enable the *Format Painter* button to copy the formatting. The *Format Painter* toolbar button background color changes to _grey_ image:icons/format-painter.svg[the Format Painter toolbar button icon].
 . Select the goal content to apply the formatting.
 
 *Result*: The formatting from the source content is applied to the goal content.
@@ -51,13 +51,11 @@ The format painter operates in two modes, one for retrieval and one for applicat
 . Select the goal content to apply the formatting.
 . Press the `Ctrl+Alt+V` keys to apply the formatting.
 
-____
-The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the `Ctrl+Alt+V` keyboard shortcut.
-____
+NOTE: The format painter retains the formatting after application making it possible to apply the same formatting multiple times by using the `Ctrl+Alt+V` keyboard shortcut.
 
 == Options
 
-The format painter acts upon all link:{baseurl}/configure/content-formatting/#formats[`formats`] registered in the editor. In addition to any standard formatting, it will treat *lists* as a block format whenever the link:{baseurl}/plugins/opensource/lists/[`lists plugin`] is made available.
+The format painter acts upon all xref:configure/content-formatting.adoc#formats[`formats`] registered in the editor. In addition to any standard formatting, it will treat *lists* as a block format whenever the xref:plugins/opensource/lists.adoc[`lists plugin`] is made available.
 
 include::partial$configuration/formatpainter_formats.adoc[]
 

modules/ROOT/pages/plugins/premium/linkchecker.adoc

@@ -11,7 +11,7 @@ The Link Checker plugin relies on HTTP response status codes to determine if a l
 
 == Cloud Instructions
 
-If you are using link:{baseurl}/cloud-deployment-guide/editor-and-features/[{cloudname}], simply add `"linkchecker"` to your plugins list, and the service will be automatically configured.
+If you are using xref:cloud-deployment-guide/editor-and-features.adoc[{cloudname}], simply add `"linkchecker"` to your plugins list, and the service will be automatically configured.
 
 === Basic setup using Tiny Cloud
 

modules/ROOT/pages/plugins/premium/pageembed.adoc

@@ -29,19 +29,19 @@ tinymce.init({
 });
 ----
 
-*Result*: The image:{baseurl}/images/icons/embed-page.svg[Page Embed](*Page Embed*) button appears in the toolbar menu.
+*Result*: The image:icons/embed-page.svg[Page Embed](*Page Embed*) button appears in the toolbar menu.
 
 == Using Page Embed
 
 Use the following procedure for embedding an iframe into the content:
 
-. Click on the image:{baseurl}/images/icons/embed-page.svg[Page Embed](*Page Embed*) toolbar button.
+. Click on the image:icons/embed-page.svg[Page Embed](*Page Embed*) toolbar button.
 . The *InsertEdit Iframe* dialog box appears.
-image:{baseurl}/images/insert-iframes.png[InsertEdit Iframe]
-. In the *General* tab, enter the url in the *Source* field, or click on the image:{baseurl}/images/icons/browse.svg[Source](*Source*) icon to upload a file.
+image:insert-iframes.png[InsertEdit Iframe]
+. In the *General* tab, enter the url in the *Source* field, or click on the image:icons/browse.svg[Source](*Source*) icon to upload a file.
 . For setting the iframe size, select the preferred option from the *Size* drop-down menu.
  ** *Inline Value* is used to insert an iframe within a line. To set the dimensions of an inline iframe, provide the values in pixels in the *Width* and *Height* input box.
-  *** The default values are *Width* `350px` and *Height* `260px`. Click the image:{baseurl}/images/icons/lock.svg[Constrain Proportions](*Constrain Proportions*) lock icon to change the default values.
+  *** The default values are *Width* `350px` and *Height* `260px`. Click the image:icons/lock.svg[Constrain Proportions](*Constrain Proportions*) lock icon to change the default values.
 
 +
 NOTE: The *Width* and *Height* fields are only available if the *Inline Value* value option is selected.
@@ -55,7 +55,7 @@ NOTE: The *Width* and *Height* fields are only available if the *Inline Value* v
 NOTE: The *Responsive* option has pre-defined width and height values. The *Width* and *Height* fields are not available if one of the *Responsive* values are selected.
 . In the *Advanced* tab, provide a name and title for the iframe in the *Name* and *Title* fields.
 . The *Long description URL* field can be used to describe an iframe by including text in a separate resource when a short text alternative does not adequately convey the function or information provided in the iframe.
- ** Click on the image:{baseurl}/images/icons/browse.svg[Source](*Long description URL*) icon to upload a description file.
+ ** Click on the image:icons/browse.svg[Source](*Long description URL*) icon to upload a description file.
 . Click on the *Show iframe border* radio button to display iframe borders.
 . Click on the *Scrollbar* radio button to add scrollbars to the iframe.
 . Click *Save* to save and exit or *Cancel* to dismiss and exit.
@@ -85,4 +85,4 @@ IMPORTANT: The following CSS script must be added to the webpage for the default
 include::partial$css-codeblock/pageembed-plugin-css.adoc[]
 ----
 
-For more information on configuring CSS, refer to the link:{baseurl}/configure/content-appearance/#content_css[content_css] section.
+For more information on configuring CSS, refer to the xref:configure/content-appearance.adoc#content_css[content_css] section.

modules/ROOT/pages/plugins/premium/permanentpen.adoc

@@ -29,7 +29,7 @@ underline: false,
 strikethrough: false
 ----
 
-For more information on {productname} formats, refer to the link:{baseurl}/configure/content-formatting/#formats[formats] section.
+For more information on {productname} formats, refer to the xref:configure/content-formatting.adoc#formats[formats] section.
 
 == Try our Permanent Pen demo
 
@@ -39,25 +39,25 @@ liveDemo::permanent-pen[]
 
 === To enable Permanent Pen
 
-. Click on the image:{baseurl}/images/icons/permanent-pen.svg[Permanent Pen](*Permanent Pen*) toolbar button to enable the Permanent Pen.
+. Click on the image:icons/permanent-pen.svg[Permanent Pen](*Permanent Pen*) toolbar button to enable the Permanent Pen.
 . Place the cursor in the desired text area and start typing.
 
 *Result*:
-The *Permanent Pen* toolbar button background color changes to _grey_ image:{baseurl}/images/icons/permanent-pen.svg[Permanent Pen] and the text is entered using the default settings.
+The *Permanent Pen* toolbar button background color changes to _grey_ image:icons/permanent-pen.svg[Permanent Pen] and the text is entered using the default settings.
 
 === To disable Permanent Pen
 
-To exit the Permanent Pen, click on the image:{baseurl}/images/icons/permanent-pen.svg[Permanent Pen](*Permanent Pen*) icon.
+To exit the Permanent Pen, click on the image:icons/permanent-pen.svg[Permanent Pen](*Permanent Pen*) icon.
 
-The *Permanent Pen* toolbar button background color changes to _white_ image:{baseurl}/images/icons/permanent-pen.svg[Permanent Pen].
+The *Permanent Pen* toolbar button background color changes to _white_ image:icons/permanent-pen.svg[Permanent Pen].
 
 === Accessing the Permanent Pen properties
 
 There are two ways to access the Permanent Pen properties:
 
 ==== From the menubar
 
-Add the Permanent pen properties option to the menu bar with the link:{baseurl}/configure/editor-appearance/#menu[menu] configuration.
+Add the Permanent pen properties option to the menu bar with the xref:configure/editor-appearance.adoc#menu[menu] configuration.
 
 [source, js]
 ----
@@ -77,7 +77,7 @@ tinymce.init({
 . Right-click anywhere from inside the text area.
 . Choose the *Permanent Pen* option.
 
-image::{baseurl}/images/right-click.png[Right-click]
+image::right-click.png[Right-click]
 
 *Result*:
 The *Permanent Pen Properties* dialog box appears.
@@ -89,7 +89,7 @@ NOTE: The Permanent Pen has to be enabled to access the *Permanent Pen Propertie
 === Using the UI
 
 . Open the *Permanent Pen Properties* dialog box using any of the above methods.
-image:{baseurl}/images/ppprop.png[Permanent pen properties]
+image:ppprop.png[Permanent pen properties]
 . Select the desired settings from the *Font* and *Size* drop-down menus.
 . To select the desired *Styles*, click on the radio button next to *Bold*, *Italic*, *Strikethrough*, or *Underline*.
 . Choose the desired *Text color*.

modules/ROOT/pages/plugins/premium/powerpaste.adoc

@@ -17,13 +17,13 @@ The *PowerPaste* plugin activates automatically when users paste content into th
 
 To paste clipboard content as plain text, users can click the "Paste As Text" toolbar button or menu item, then paste the content normally. The {productname} *PowerPaste* plugin will convert the HTML on the clipboard into plain text.
 
-If you configure *PowerPaste* to allow local images (see the <<powerpaste_allow_local_images,`powerpaste_allow_local_images`>> setting below), then images copied from Microsoft Word and other sources will appear in {productname} as Base64 encoded images. You can have {productname} automatically upload Base64 encoded images for reverting back to a standard image as described in the link:{baseurl}/advanced/handle-async-image-uploads/[image upload documentation].
+If you configure *PowerPaste* to allow local images (see the xref:powerpaste_allow_local_images[`powerpaste_allow_local_images`] setting below), then images copied from Microsoft Word and other sources will appear in {productname} as Base64 encoded images. You can have {productname} automatically upload Base64 encoded images for reverting back to a standard image as described in the xref:general-configuration-guide/upload-images.adoc[image upload documentation].
 
 NOTE: PowerPaste (when configured to allow local images) will import images from pasted Microsoft Word and Microsoft Excel content. When doing this, *PowerPaste* extracts Base64 encoded images from the clipboard.  Images larger than approximately 8.5MB may fail to import based on technical limitations of web browsers.
 
 == Cloud Installation
 
-To enable the {productname} *PowerPaste* plugin with link:{baseurl}/cloud-deployment-guide/editor-and-features/[{cloudname}]:
+To enable the {productname} *PowerPaste* plugin with xref:cloud-deployment-guide/editor-and-features.adoc[{cloudname}]:
 
 . If you are currently using the `paste` plugin provided with {productname}, disable it by removing it from the `plugins` list.
 . Add `powerpaste` to the `plugins` list.
@@ -121,7 +121,8 @@ The event listeners are passed the same data objects as their equivalent configu
 
 Example {productname} configuration:
 
-```js
+[source, js]
+----
 const yourCustomFilter = function(content) {
   // Implement your custom filtering and return the filtered content
   return content;
@@ -139,14 +140,17 @@ tinymce.init({
       data.content = newContent;
     });
 
- editor.on('PastePostProcess', function(data) {
-   console.log(data.node, data.mode, data.source);
-   // Apply custom filtering by mutating data.node
-   // For example:
-   const additionalNode = document.createElement('div');
-   additionalNode.innerHTML = '<p>This will go before the pasted content.</p>';
-   data.node.insertBefore(additionalNode, data.node.firstElementChild);
- });   } }); ```
+    editor.on('PastePostProcess', function(data) {
+      console.log(data.node, data.mode, data.source);
+      // Apply custom filtering by mutating data.node
+      // For example:
+      const additionalNode = document.createElement('div');
+      additionalNode.innerHTML = '<p>This will go before the pasted content.</p>';
+      data.node.insertBefore(additionalNode, data.node.firstElementChild);
+    });
+  }
+});
+----
 
 == Commands
 

modules/ROOT/partials/configuration/formatpainter_formats.adoc

@@ -1,8 +1,8 @@
 === `formats`
 
-The format painter plugin will register many formats upon initialization. To override these formats, use the link:{baseurl}/configure/content-formatting/#exampleofusageoftheformatsoption[`formats`] option.
+The format painter plugin will register many formats upon initialization. To override these formats, use the xref:configure/content-formatting.adoc#exampleofusageoftheformatsoption[`formats`] option.
 
-The example below showcases the formats registered automatically by the plugin upon initialization. The `formatpainter_removeformat` is used to clear any existing formats before applying the new ones. It is similar to the link:{baseurl}/configure/content-formatting/#removingaformat[`removeformat`] format.
+The example below showcases the formats registered automatically by the plugin upon initialization. The `formatpainter_removeformat` is used to clear any existing formats before applying the new ones. It is similar to the xref:configure/content-formatting.adoc#removingaformat[`removeformat`] format.
 
 *Type:* `Object`
 

modules/ROOT/partials/configuration/formats.adoc

@@ -393,6 +393,7 @@ tinymce.init({
 });
 ----
 
+[[exampleofusageoftheformatsoption]]
 === Example of usage of the formats option
 
 This example overrides some of the built-in formats and tells {productname} to apply classes instead of inline styles. It also includes a custom format that produced `h1` elements with a title attribute and a `red` CSS style.
@@ -448,6 +449,7 @@ tinymce.activeEditor.formatter.register('custom_format', { inline: 'span', style
 tinymce.activeEditor.formatter.apply('custom_format', { value: 'red' });
 ----
 
+[[removingaformat]]
 === Removing a format
 
 Use the `removeformat` option to specify how the `clear formatting` feature should work in the editor.

modules/ROOT/partials/configuration/image_file_types.adoc

@@ -1,6 +1,6 @@
 === `image_file_types`
 
-This option configures which image file formats will be recognized and placed in an `img` element by the <<smart_paste,`smart_paste`>> functionality when content is pasted into the editor.
+This option configures which image file formats will be recognized and placed in an `img` element by the xref:smart_paste[`smart_paste`] functionality when content is pasted into the editor.
 
 *Type:* `String`
 
@@ -10,7 +10,7 @@ This option configures which image file formats will be recognized and placed in
 
 ==== Example: Using `image_file_types`
 
-[source, js]
+[source, js, subs="attributes+"]
 ----
 tinymce.init({
   selector: 'textarea',  // change this value according to your HTML

modules/ROOT/partials/configuration/linkchecker_content_css.adoc

@@ -2,7 +2,8 @@
 
 After a link is checked for validity, a result of the validation is added to it via `data-mce-linkchecker-status` attribute. There are three possible outcomes of the validation: `valid`, `invalid` and `unknown`. Link Checker visually reflects `invalid` outcome by injecting the following CSS styles into the editor:
 
-```css
+[source, css]
+----
 a[data-mce-linkchecker-status="invalid"] {
     outline-color: rgba(231, 76, 60, 0.25);
     background-color: rgba(231, 76, 60, 0.25)
@@ -11,7 +12,7 @@ a[data-mce-linkchecker-status="invalid"] {
 a[data-mce-linkchecker-focus="true"] {
     outline: 1px solid rgba(231, 76, 60, 0.75)
 }
-```
+----
 
 `data-mce-linkchecker-focus` attribute is set to _true_ every time a dedicated context menu is shown on a link. This only happens for `invalid` links.
 

modules/ROOT/partials/configuration/mentions_fetch.adoc

@@ -1,6 +1,7 @@
+[[mentions_fetch]]
 === `mentions_fetch`
 
-This option lets you request a list of users from your server that match a search query. The callback gets passed two parameters: one is the search query object, the other is the success callback to execute with the results. The query object has a term property that contains what the user has typed after the "@" sign. The success call should contain an array of users. For information on the user properties to pass the success callback for the available mentions item types (`mentions_item_type`), see: <<userproperties,User properties>>.
+This option lets you request a list of users from your server that match a search query. The callback gets passed two parameters: one is the search query object, the other is the success callback to execute with the results. The query object has a term property that contains what the user has typed after the "@" sign. The success call should contain an array of users. For information on the user properties to pass the success callback for the available mentions item types (`mentions_item_type`), see: xref:plugins/premium/mentions.adoc#userproperties[User properties].
 
 *Type:* `Function`