Skip to content

Commit 9abba72

Browse files
kemister85kemister85
authored
DOC-2627: Documentation Enhancements for: List Styles plugin and include new interactive demo. (#3857)
1 parent 1151d7b commit 9abba72

File tree

7 files changed

+124
-0
lines changed

7 files changed

+124
-0
lines changed

‎modules/ROOT/examples/live-demos/advlist/index.html‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<textarea id="advlist-demo">
2+
<h2>Advanced List Styles Demo</h2>
3+
4+
<h3>Basic Bulleted Lists</h3>
5+
<p>Try changing these bullet styles using the toolbar or highlighted text and change the list styles from the context toolbar:</p>
6+
<ul>
7+
<li>Default bullet style</li>
8+
<li>Another item with default style</li>
9+
<li>Third item to demonstrate</li>
10+
</ul>
11+
12+
<h3>Numbered Lists with Different Styles</h3>
13+
<p>Experiment with different numbering formats:</p>
14+
<ol>
15+
<li>First step in the process</li>
16+
<li>Second step with more details</li>
17+
<li>Third step to complete the sequence</li>
18+
</ol>
19+
20+
<h3>Nested Lists (Indentation)</h3>
21+
<p>Create nested lists by indenting items:</p>
22+
<ul>
23+
<li>Main category
24+
<ul>
25+
<li>Subcategory item 1</li>
26+
<li>Subcategory item 2</li>
27+
</ul>
28+
</li>
29+
<li>Another main category
30+
<ol>
31+
<li>Numbered sub-item 1</li>
32+
<li>Numbered sub-item 2</li>
33+
</ol>
34+
</li>
35+
</ul>
36+
37+
<h3>Mixed Content Lists</h3>
38+
<p>Lists can contain various content types:</p>
39+
<ul>
40+
<li><strong>Bold text</strong> in a list item</li>
41+
<li><em>Italic text</em> for emphasis</li>
42+
<li>Text with <a href="#">links</a> included</li>
43+
<li>Items with <code>inline code</code> snippets</li>
44+
</ul>
45+
46+
<h3>Project Planning Example</h3>
47+
<ol>
48+
<li>Project Setup
49+
<ul>
50+
<li>Initialize repository</li>
51+
<li>Install dependencies</li>
52+
<li>Configure build tools</li>
53+
</ul>
54+
</li>
55+
<li>Development Phase
56+
<ol>
57+
<li>Create wireframes</li>
58+
<li>Implement core features</li>
59+
<li>Add user interface elements</li>
60+
</ol>
61+
</li>
62+
<li>Testing & Deployment
63+
<ul>
64+
<li>Unit testing</li>
65+
<li>Integration testing</li>
66+
<li>Production deployment</li>
67+
</ul>
68+
</li>
69+
</ol>
70+
</textarea>

‎modules/ROOT/examples/live-demos/advlist/index.js‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
tinymce.init({
2+
selector: '#advlist-demo',
3+
plugins: [
4+
'advlist', 'anchor', 'autolink', 'charmap', 'code', 'fullscreen',
5+
'help', 'image', 'insertdatetime', 'link', 'lists', 'media',
6+
'preview', 'searchreplace', 'table', 'visualblocks', 'wordcount'
7+
],
8+
toolbar: 'undo redo | styles | bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | code | fullscreen | help',
9+
menubar: 'file edit view insert format tools table help',
10+
height: 600,
11+
12+
setup: (editor) => {
13+
editor.ui.registry.addContextToolbar('textselection', {
14+
predicate: () => !editor.selection.isCollapsed(),
15+
items: 'bullist numlist',
16+
position: 'selection', // 'selection' | 'node' | 'line'
17+
scope: 'node'
18+
});
19+
}
20+
});

‎modules/ROOT/pages/advlist.adoc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,10 @@ tinymce.init({
2222
});
2323
----
2424

25+
== Interactive demo
26+
27+
liveDemo::advlist[]
28+
2529
== Options
2630

2731
These settings affect the execution of the `+advlist+` plugin by providing more granular control of list styles.
@@ -30,6 +34,10 @@ include::partial$configuration/advlist_bullet_styles.adoc[leveloffset=+1]
3034

3135
include::partial$configuration/advlist_number_styles.adoc[leveloffset=+1]
3236

37+
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
38+
39+
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
40+
3341
== Commands
3442

3543
The {pluginname} plugin provides the following {productname} commands.

‎modules/ROOT/pages/available-menu-items.adoc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,11 @@ include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
3737
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
3838
:!altplugincode:
3939

40+
:plugincategory: opensource
41+
:pluginname: List Styles
42+
:plugincode: advlist
43+
include::partial$misc/plugin-menu-item-id-boilerplate.adoc[]
44+
4045
:plugincategory: premium
4146
:pluginname: Enhanced Tables
4247
:plugincode: advtable

‎modules/ROOT/pages/available-toolbar-buttons.adoc‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,11 @@ include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
4242
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
4343
:!altplugincode:
4444

45+
:plugincategory: opensource
46+
:pluginname: List Styles
47+
:plugincode: advlist
48+
include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[]
49+
4550
:plugincategory: premium
4651
:pluginname: Enhanced Tables
4752
:plugincode: advtable

‎modules/ROOT/partials/menu-item-ids/advlist-menu-items.adoc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[cols="1,1,2",options="header"]
2+
|===
3+
|Menu item identifier |xref:menus-configuration-options.adoc#example-the-tinymce-default-menu-items[Default Menu Location] |Description
4+
|`+bullist+` |Format |Formats the current selection as a bullet list with dropdown options for different bullet styles.
5+
|`+numlist+` |Format |Formats the current selection as a numbered list with dropdown options for different number styles.
6+
|===
7+
8+
NOTE: The {pluginname} plugin extends the core list menu items in the *Format* menu by adding dropdown functionality that allows users to select from different list styles. These menu items are provided by the core `+lists+` plugin, but the dropdown functionality is added by the {pluginname} plugin.

‎modules/ROOT/partials/toolbar-button-ids/advlist-toolbar-buttons.adoc‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
[cols="1,3",options="header"]
2+
|===
3+
|Toolbar button identifier |Description
4+
|`+bullist+` |Formats the current selection as a bullet list with dropdown options for different bullet styles (disc, circle, square).
5+
|`+numlist+` |Formats the current selection as a numbered list with dropdown options for different number styles (decimal, alpha, roman, greek).
6+
|===
7+
8+
NOTE: The {pluginname} plugin extends the core `+bullist+` and `+numlist+` toolbar buttons by adding dropdown arrows that allow users to select from different list styles. These buttons are provided by the core `+lists+` plugin, but the dropdown functionality is added by the {pluginname} plugin.

0 commit comments

Comments
 (0)