Feature/5/TINY-8595: UI components (#2333)

Author: hamza0867

modules/ROOT/pages/advanced/keyboard-shortcuts.adoc

@@ -205,6 +205,7 @@ NOTE: Browsers and Screen Readers provide additional shortcuts within the editor
 
 include::partial$misc/advcode-shortcuts.adoc[]
 
+[[addcustomshortcutstotinymce]]
 == Add custom shortcuts to TinyMCE
 
 IMPORTANT: Adding a custom shortcut with a keyboard combination that conflicts with an existing {productname} or browser shortcut will override the existing shortcut.

modules/ROOT/pages/ui-components/autocompleter.adoc

@@ -61,20 +61,21 @@ The two arguments this method take are:
 | highlight
 | array
 | Optional
-| When using <<cardmenuitem,CardMenuItems>>, use the highlight option to specify which <<cardtext,CardText>> items to highlight the matched text pattern on.
+| When using xref:cardmenuitem[CardMenuItems], use the highlight option to specify which xref:cardtext[CardText] items to highlight the matched text pattern on.
 |===
 
 NOTE: If two or more autocompleters use the same trigger character, then the fetched results will be merged together before being displayed.
 
 === Usage of fetch
 
-The `fetch` function is called when the trigger `char` is pressed and the `matches` predicate returns `true`. The `fetch` function is passed the matched text pattern and returns a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise[Promise] containing matching results, specified as either <<autocompleteitem,AutocompleteItems>> or <<cardmenuitem,CardMenuItems>>. This allows for asynchronous fetching of the items. The `fetchOptions` parameter passed to the `fetch` function is by default an empty object, however using the <<api,reload>> API, additional options can be passed to fetch a different set of results.
+The `fetch` function is called when the trigger `char` is pressed and the `matches` predicate returns `true`. The `fetch` function is passed the matched text pattern and returns a https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise[Promise] containing matching results, specified as either xref:autocompleteitem[AutocompleteItems] or xref:cardmenuitem[CardMenuItems]. This allows for asynchronous fetching of the items. The `fetchOptions` parameter passed to the `fetch` function is by default an empty object, however using the xref:api[reload] API, additional options can be passed to fetch a different set of results.
 
 There are two types of items:
 
-* <<autocompleteitem,AutocompleteItem>>
-* <<cardmenuitem,CardMenuItem>>
+* xref:autocompleteitem[AutocompleteItem]
+* xref:cardmenuitem[CardMenuItem]
 
+[[autocompleteitem]]
 ==== AutocompleteItem
 
 This is the standard item for the autocompleter. If no type is specified, autocompleter items are assumed to be of type `AutocompleteItem`.
@@ -95,7 +96,7 @@ This is the standard item for the autocompleter. If no type is specified, autoco
 | icon
 | string
 | optional
-| Name of the icon to be displayed. Must be a either single unicode character or an icon from: the link:{baseurl}/advanced/editor-icon-identifiers/[icon pack], a link:{baseurl}/advanced/creating-an-icon-pack/[custom icon pack], or an icon added using the xref:apis/tinymce.editor.ui.registry.adoc#addIcon[`addIcon` API].
+| Name of the icon to be displayed. Must be a either single unicode character or an icon from: the xref:advanced/editor-icon-identifiers.adoc[icon pack], a xref:advanced/creating-an-icon-pack.adoc[custom icon pack], or an icon added using the xref:apis/tinymce.editor.ui.registry.adoc#addIcon[`addIcon` API].
 |===
 
 [source, js]
@@ -121,7 +122,7 @@ The `CardMenuItem` allows customization of layout and content. This is done by c
 | items
 | array
 | required
-| An array of <<carditems,CardItems>>
+| An array of xref:carditems[CardItems]
 
 | value
 | string
@@ -144,15 +145,18 @@ The `CardMenuItem` allows customization of layout and content. This is done by c
 }
 ----
 
+[[carditems]]
 ==== CardItems
 
 `CardItems` are subcomponents for the `CardMenuItem`. Use these to construct your custom item and display relevant information to the user.
 
 There are three types of card items:
-* <<cardcontainer,CardContainer>>
-* <<cardtext,CardText>>
-* <<cardimage,CardImage>>
 
+* xref:cardcontainer[CardContainer]
+* xref:cardtext[CardText]
+* xref:cardimage[CardImage]
+
+[[cardcontainer]]
 ===== CardContainer
 
 A `CardContainer` is a layout component used to apply a layout to an array of card items.
@@ -163,7 +167,7 @@ A `CardContainer` is a layout component used to apply a layout to an array of ca
 | items
 | array
 | required
-| An array of <<carditem,CardItems>>
+| An array of xref:carditems[CardItems]
 
 | direction
 | `'vertical'` or `'horizontal'`
@@ -192,6 +196,7 @@ A `CardContainer` is a layout component used to apply a layout to an array of ca
 }
 ----
 
+[[cardtext]]
 ===== CardText
 
 `CardText` is a component for displaying text.
@@ -225,6 +230,7 @@ A `CardContainer` is a layout component used to apply a layout to an array of ca
 }
 ----
 
+[[cardimage]]
 ===== CardImage
 
 `CardImage` is a component for displaying an image.
@@ -258,6 +264,7 @@ A `CardContainer` is a layout component used to apply a layout to an array of ca
 }
 ----
 
+[[api]]
 == API
 
 |===
@@ -284,6 +291,6 @@ liveDemo::autocompleter-autocompleteitem[height="300" tab="js" ]
 
 === Example: Using `CardMenuItems` in the Autocompleter
 
-This example uses <<cardmenuitem,CardMenuItems>> and will show when a user types a hyphen (`-`) character and at least one additional character.
+This example uses xref:cardmenuitem[CardMenuItems] and will show when a user types a hyphen (`-`) character and at least one additional character.
 
 liveDemo::autocompleter-cardmenuitem[height="300" tab="js" ]

modules/ROOT/pages/ui-components/contextmenu.adoc

@@ -3,7 +3,7 @@
 :keywords: contextmenu context menu contextmenuapi
 :title_nav: Context menu
 
-The context menu is a configurable component that appears when the user right clicks in the editable area. By default it does not disable the operating system's native context menu, if there are no items to display at the cursor position the native context menu will be shown.
+The context menu is a configurable component that appears when the user right clicks in the editable area. By default, it does not disable the operating system's native context menu, if there are no items to display at the cursor position the native context menu will be shown.
 
 The context menu supports both individual menu items and dynamic context menu sections.
 
@@ -73,19 +73,20 @@ When creating a dynamic menu, the structure `type` properties are used in order
 * type `separator` ignores all other properties.
 
 ////
-- ## Example Usage
+=== Example Usage
 
 This example creates a menu with a mixture of dynamic and static menu items. While `link` is the name of both a context menu section and a menu item, context menu sections take preference (the link context menu is dynamic based on the cursor position).
 
 The other item names are all menu items and will appear on the context menu regardless of cursor position. A separator is used to distinguish the table edit features from the table insert feature. As `link` is a context menu section, a separator will automatically be inserted after it so it is not necessary to specify one in the configuration.
 
-```js
+[source, js]
+----
 tinymce.init({
   selector: 'textarea',
   contextmenu: 'link bold italic inserttable | cell row column deletetable'
 });
-```
--
+----
+
 ////
 
 == Defining a context menu section

modules/ROOT/pages/ui-components/contexttoolbar.adoc

@@ -3,7 +3,7 @@
 :keywords: contexttoolbar context toolbar contexttoolbarapi
 :title_nav: Context toolbar
 
-A context toolbar can only contain either buttons that are defined for a normal toolbar, or buttons specifically registered for launching a link:{baseurl}/ui-components/contextform/[ContextForm]. The buttons comes as a list of strings, where each string is a registered name of a button.
+A context toolbar can only contain either buttons that are defined for a normal toolbar, or buttons specifically registered for launching a xref:ui-components/contextform.adoc[ContextForm]. The buttons come as a list of strings, where each string is a registered name of a button.
 
 == Registering a context toolbar
 

modules/ROOT/pages/ui-components/customsidebar.adoc

@@ -12,7 +12,7 @@ The sidebar API allows developers to add sidebars on editor instances in a simil
 
 This is the syntax for the addSidebar function: `editor.ui.registry.addSidebar(name:String, spec:Object)`
 
-When a new sidebar is registered, a corresponding toolbar button for toggling the sidebar open and close is also created using the same name. This button can then be included in the toolbar by adding the sidebar name to the link:{baseurl}/configure/editor-appearance/#toolbar/[`toolbar`] option.
+When a new sidebar is registered, a corresponding toolbar button for toggling the sidebar open and close is also created using the same name. This button can then be included in the toolbar by adding the sidebar name to the xref:configure/editor-appearance.adoc#toolbar[`toolbar`] option.
 
 === Specification object
 
@@ -24,7 +24,7 @@ The `tooltip` specifies a tooltip to be displayed when hovering over the sidebar
 
 ==== `icon`
 
-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].
+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].
 
 *Type*: `String`