Add Icon and Media Support to List - Resolves #906 and #2272 #2316

SPWwj · 2023-06-28T20:46:27Z

What is the purpose of this pull request?

Overview of changes:

This PR resolves issue #906 by adding support for custom icons in lists, and also addresses #2272 for additional icon support.

Anything you'd like to highlight/discuss:

Kindly note, for emojis, please avoid the :: symbol, due to our markdown decode pipeline's internal design. Whether we'll rectify this in future is a topic for separate consideration.
markdown-it-icons.ts has been refactored for better maintainability and can be reused by this Unordered Icon list to improve code consistency. However, all its functionalities remain unchanged.
The suggestion of multi-icon settings, {icons=":thumbs_up: :light_bulb:"}, discussed in issue Support custom icons for lists #2272, is worth considering. Nonetheless, I believe excessive abstraction in markdown might not be optimal. We can delve deeper into this subject in PR Introducing Custom Markdown Syntax Pipeline and QR Code Component #2315. This feature could be potentially addressed in a minor patch.

To create a tightly nested list, you can use the following method:

* Item 1 <br>
  Item 1 line 2{icon="/images/deer.jpg" i-width="60px" height="17px" class="rounded"}
* Item 2
  Item 2 Continue
  * Item 2.1 {icon="fas-question-circle" i-class="badge rounded-pill mb-1 bg-success text-white"}
  * Item 2.2 {i-class="badge rounded-pill mb-1 bg-danger text-white"}
  * Item 2.3 
    * Item 2.3.1 {icon="fas-question-circle" i-class="badge rounded mb-1 bg-danger text-white"}
* Item 3
  * Item 3.1 
  * Item 3.2 {i-class="badge rounded-pill mb-1 bg-primary text-white"}
  * Item 3.3 {icon="fas-compass" i-class="badge rounded-pill mb-1 bg-warning text-white}
  * Item 3.4
* Item 4
  * Item 4.1
    * Item 4.1.1
  * Item 4.2

Testing instructions:

Confirm that you have the correct branch for this pull request checked out on your local environment.
Establish a new MarkBind project using the markbind init command.
Experiment with the list using the provided syntax from above.

Checklist: ☑️

Updated the documentation for feature additions and enhancements
Added tests for bug fixes or features
Linked all related issues
No unrelated changes

yucheng11122017 · 2023-06-29T06:58:18Z

Hi @SPWwj it looks p cute!
Jic you forgot, don't forget to document this feature and add tests! Will make it a lot easier to review

SPWwj · 2023-06-29T07:01:06Z

Hi @SPWwj it looks p cute!

Jic you forgot, don't forget to document this feature and add tests! Will make it a lot easier to review

Roger🫡will do it tmr😁

damithc · 2023-06-29T07:03:03Z

Jic you forgot, don't forget to document this feature and add tests! Will make it a lot easier to review

@SPWwj Yup, in fact I would like to see the documentation first, so that I can evaluate the PR from the user POV. Perhaps the tests can be put on hold until we have firmed up the feature behavior.

SPWwj · 2023-06-30T20:27:39Z

Jic you forgot, don't forget to document this feature and add tests! Will make it a lot easier to review

@SPWwj Yup, in fact I would like to see the documentation first, so that I can evaluate the PR from the user POV. Perhaps the tests can be put on hold until we have firmed up the feature behavior.

The documentation has been updated, potentially revealing two new bugs.😂

damithc

Just some quick comments, just for the UG only.

docs/userGuide/syntax/lists.md

yucheng11122017 · 2023-07-01T14:50:17Z

Hi @SPWwj, thanks for the changes!
Please do correct all the linting errors though makes it a lot easier to see what is changed :) Thanks!

docs/userGuide/syntax/lists.md

damithc · 2023-07-02T07:13:01Z

@SPWwj While implementing this feature, keep in mind the possibility of a new feature for customizing ordered lists: number style (e.g., A,B,C i, ii, iii etc.) and presentation (font weight, color etc.). It is ideal if that feature can be similar to this (both from user POV and dev POV).

SPWwj · 2023-07-02T13:28:35Z

Hi @SPWwj, thanks for the changes! Please do correct all the linting errors though makes it a lot easier to see what is changed :) Thanks!

Fixed 👍

SPWwj · 2023-07-02T13:33:19Z

@SPWwj While implementing this feature, keep in mind the possibility of a new feature for customizing ordered lists: number style (e.g., A,B,C i, ii, iii etc.) and presentation (font weight, color etc.). It is ideal if that feature can be similar to this (both from user POV and dev POV).

I realized that I can transform a list into any form as needed.😂

docs/userGuide/syntax/lists.md

packages/core/src/html/UlNodeProcessor.ts

… branch-media

ang-zeyu

Just documentation nits, don't have anything else to add on the implementation:

docs/userGuide/syntax/lists.md

ang-zeyu · 2023-08-04T16:00:14Z

docs/userGuide/syntax/lists.md

+
+   * ##### Heading 3.1: Final Thoughts
+
+     Content 3.1: This is a place for final reflections, recommendations, or a look towards future developments or trends.


similarly, this example could be more concise for the reader. (e.g. heading 1.1, 3, 3.1 seems unnecessary)

this was added back in your revert commit

docs/userGuide/syntax/lists.md

… branch-media

ang-zeyu · 2023-08-05T11:08:57Z

I've added a commit message, but try to practice writing them. There is a link in the PR template to a guide. Concise messages go a long way in documenting changes.

Github has issue closing keywords you can use to automatically close issues too, link in the template.

In case I forget, self reminder to raise a follow up for automatically scale horizontal spacing between icon and content.

damithc · 2023-09-01T16:20:03Z

This feature in action https://nus-cs2103-ay2324s1.github.io/website/admin/appendixD-help.html

Thanks again to @SPWwj for authoring, and @ang-zeyu for guiding, this massive and long-running PR.

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Added "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implemented logic to check whether the user has defined the i-spacing attribute or not. - Updated createIconSpan function to incorporate i-spacing attribute. - Updated getIconAttributes function to retrieve i-spacing attribute. - This consolidation of attributes maintains code consistency and cleanliness. And it ensures that NodeProcessor.ts can easily access and utilize these attributes without additional complexity. - Refer issue: MarkBind#2352, MarkBind#2316.

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Add "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implement logic to check whether the user has defined the i-spacing attribute or not. - Update createIconSpan function to incorporate i-spacing attribute. - Update getIconAttributes function to retrieve i-spacing attribute. - It maintains code consistency and cleanliness. - Refer issue: MarkBind#2352, MarkBind#2316.

- Allow users to modify icon's size, width, height, and class for customizing icon attributes while also providing the option to adjust spacing between the icon and text for enhanced user experience. - Add "i-spacing" attribute to ICON_ATTRIBUTES and interface IconAttributes in CustomListIconProcessor.ts. - Implement logic to check whether the user has defined the i-spacing attribute or not. - Update createIconSpan function to incorporate i-spacing attribute. - Update getIconAttributes function to retrieve i-spacing attribute. - This consolidation of attributes maintains code consistency and cleanliness. - Refer issues: MarkBind#2352, MarkBind#2316.

SPWwj added 3 commits June 28, 2023 23:07

Add support for fontawesome

e485b3d

Complete list level config

3572978

Add element level config

3b6f63e

SPWwj added 5 commits June 30, 2023 23:29

Icon List Usage Documentation Update

fb80534

Update image for icon list doc

f72b476

Add demo for medial list

afba2c1

Add demo size config

262dd6f

Update list doc to by pass include render bug

10b7a0e

damithc requested changes Jul 1, 2023

View reviewed changes

damithc reviewed Jul 2, 2023

View reviewed changes

docs/userGuide/syntax/lists.md Outdated Show resolved Hide resolved

Improve the UG section on lists.

ce43e24

SPWwj added 2 commits July 2, 2023 20:39

Update image icon to use padding

cd0a69e

Fix lint errors

21dd1a4

ang-zeyu reviewed Jul 4, 2023

View reviewed changes

docs/userGuide/syntax/lists.md Outdated Show resolved Hide resolved

docs/userGuide/syntax/lists.md Outdated Show resolved Hide resolved

docs/userGuide/syntax/lists.md Outdated Show resolved Hide resolved

ang-zeyu reviewed Jul 4, 2023

View reviewed changes

packages/core/src/html/UlNodeProcessor.ts Outdated Show resolved Hide resolved

SPWwj added 7 commits July 7, 2023 18:16

Adhere support to markbind icons

3588747

Migrate markdown-it-emoji-fixed to ts

81183d0

Fix not support for fa icon

59caa54

Convert size to width and height

ef18aa1

Update icon list from first default to waterfall

4fc6ff7

Fix lint error

4d107b9

Fix markdown-it-emoji typing

a14d35a

SPWwj added 6 commits July 31, 2023 03:06

Merge branch 'master' into branch-media

2ba867e

Add flex-shrink to span node

71b66d0

Merge branch 'branch-media' of https://github.com/SPWwj/markbind into…

9f65971

… branch-media

Update test case

dd979b5

Update comment

137b52b

Fix lint error

45e4236

SPWwj requested a review from ang-zeyu August 1, 2023 06:52

ang-zeyu reviewed Aug 4, 2023

View reviewed changes

Improve doc for customize list

fad29bb

SPWwj requested a review from ang-zeyu August 4, 2023 21:07

SPWwj and others added 7 commits August 5, 2023 05:10

Remove unused image

b005fc3

Fix list doc nits

46081cc

Rename to CustomListIconProcessor

0273b03

Merge branch 'MarkBind:master' into branch-media

607b70d

Update doc

df32b5f

Merge branch 'branch-media' of https://github.com/SPWwj/markbind into…

9e0e616

… branch-media

Update list icon paragraph description

5f8d782

ang-zeyu approved these changes Aug 5, 2023

View reviewed changes

ang-zeyu merged commit d6ad99d into MarkBind:master Aug 5, 2023
6 checks passed

This was referenced Aug 5, 2023

I wonder if we can provide a way to use text instead of an icon. e.g., #2350

Closed

Use text as icon for lists #2351

Closed

Add horizontal spacing between the icon and text in the custom icon list #2352

Closed

Ashleeey1224 mentioned this pull request Oct 28, 2023

Add horizontal spacing between the icon and text in the custom icon list #2352 #2375

Merged

11 tasks

EltonGohJH mentioned this pull request Mar 9, 2024

Add text for icon #2444

Merged

14 tasks

KevinEyo1 mentioned this pull request Mar 10, 2024

First item no customization in List prevents proper processing of icons #2449

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Icon and Media Support to List - Resolves #906 and #2272 #2316

Add Icon and Media Support to List - Resolves #906 and #2272 #2316

SPWwj commented Jun 28, 2023 •

edited

yucheng11122017 commented Jun 29, 2023

SPWwj commented Jun 29, 2023

damithc commented Jun 29, 2023

SPWwj commented Jun 30, 2023

damithc left a comment

yucheng11122017 commented Jul 1, 2023

damithc commented Jul 2, 2023

SPWwj commented Jul 2, 2023 •

edited

SPWwj commented Jul 2, 2023

ang-zeyu left a comment

ang-zeyu Aug 4, 2023

ang-zeyu Aug 5, 2023

ang-zeyu commented Aug 5, 2023

damithc commented Sep 1, 2023


		* ##### Heading 3.1: Final Thoughts

		Content 3.1: This is a place for final reflections, recommendations, or a look towards future developments or trends.

Add Icon and Media Support to List - Resolves #906 and #2272 #2316

Add Icon and Media Support to List - Resolves #906 and #2272 #2316

Conversation

SPWwj commented Jun 28, 2023 • edited

yucheng11122017 commented Jun 29, 2023

SPWwj commented Jun 29, 2023

damithc commented Jun 29, 2023

SPWwj commented Jun 30, 2023

damithc left a comment

Choose a reason for hiding this comment

yucheng11122017 commented Jul 1, 2023

damithc commented Jul 2, 2023

SPWwj commented Jul 2, 2023 • edited

SPWwj commented Jul 2, 2023

ang-zeyu left a comment

Choose a reason for hiding this comment

ang-zeyu Aug 4, 2023

Choose a reason for hiding this comment

ang-zeyu Aug 5, 2023

Choose a reason for hiding this comment

ang-zeyu commented Aug 5, 2023

damithc commented Sep 1, 2023

SPWwj commented Jun 28, 2023 •

edited

SPWwj commented Jul 2, 2023 •

edited