diff --git a/apps/console/src/components/PolicyEditor.css b/apps/console/src/components/PolicyEditor.css index 788f0c182..93a0114d5 100644 --- a/apps/console/src/components/PolicyEditor.css +++ b/apps/console/src/components/PolicyEditor.css @@ -137,15 +137,69 @@ .editor-list-ol { padding: 0; margin: 0 0 0 16px; + list-style-type: decimal; + display: block; + counter-reset: li; } .editor-list-ul { padding: 0; margin: 0 0 0 16px; + list-style-type: disc; + display: block; } .editor-listitem { margin: 8px 0 0 0; + display: list-item; + position: relative; + padding-left: 8px; +} + +/* Ensure list items display consistently across browsers */ +li.editor-listitem::marker { + font-weight: normal; + color: inherit; +} + +/* Specifically for ordered lists */ +ol.editor-list-ol > .editor-listitem { + list-style-type: decimal; + list-style-position: outside; +} + +/* For nested ordered lists */ +ol.editor-list-ol ol.editor-list-ol > .editor-listitem { + list-style-type: lower-alpha; +} + +.editor-listitem--checked, +.editor-listitem--unchecked { + position: relative; + margin-left: 0; + padding-left: 24px; + list-style-type: none; +} + +.editor-listitem--checked:before, +.editor-listitem--unchecked:before { + content: ''; + width: 16px; + height: 16px; + position: absolute; + left: 0; + top: 2px; + background-size: 16px; + background-position: center; + background-repeat: no-repeat; +} + +.editor-listitem--checked:before { + background-image: url('data:image/svg+xml;utf8,'); +} + +.editor-listitem--unchecked:before { + background-image: url('data:image/svg+xml;utf8,'); } .editor-nested-listitem { diff --git a/apps/console/src/components/PolicyEditor.tsx b/apps/console/src/components/PolicyEditor.tsx index 68ee97128..40215e609 100644 --- a/apps/console/src/components/PolicyEditor.tsx +++ b/apps/console/src/components/PolicyEditor.tsx @@ -127,6 +127,8 @@ const theme = { ol: "editor-list-ol", ul: "editor-list-ul", listitem: "editor-listitem", + listitemChecked: "editor-listitem--checked", + listitemUnchecked: "editor-listitem--unchecked", }, image: "editor-image", link: "editor-link", diff --git a/apps/console/test_output/sample_list.html b/apps/console/test_output/sample_list.html new file mode 100644 index 000000000..119d4cfbe --- /dev/null +++ b/apps/console/test_output/sample_list.html @@ -0,0 +1 @@ +
  1. First item
  2. Second item