refactor: create generic list styles button

Author: chittolina

packages/super-editor/src/editors/v1/components/toolbar/NumberedStyleButtons.vue

@@ -1,24 +1,31 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 import { useHighContrastMode } from '../../composables/use-high-contrast-mode';
-import { toolbarIcons } from './toolbarIcons.js';
 
 const { isHighContrastMode } = useHighContrastMode();
 const emit = defineEmits(['select']);
 
 const props = defineProps({
+  buttons: {
+    type: Array,
+    required: true,
+  },
   selectedStyle: {
     type: String,
     default: null,
   },
+  iconSize: {
+    type: Number,
+    default: 25,
+  },
 });
 
 const buttonRefs = ref([]);
-const bulletButtons = [
-  { key: 'disc', icon: toolbarIcons.bulletListDisc, ariaLabel: 'Opaque circle' },
-  { key: 'circle', icon: toolbarIcons.bulletListCircle, ariaLabel: 'Outline circle' },
-  { key: 'square', icon: toolbarIcons.bulletListSquare, ariaLabel: 'Opaque square' },
-];
+
+const iconStyle = computed(() => ({
+  width: `${props.iconSize}px`,
+  height: `${props.iconSize}px`,
+}));
 
 const select = (key) => {
   emit('select', key);
@@ -51,7 +58,7 @@ const handleKeyDown = (e, index) => {
       moveToNextButton(index);
       break;
     case 'Enter':
-      select(bulletButtons[index].key);
+      select(props.buttons[index].key);
       break;
     default:
       break;
@@ -68,12 +75,13 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="bullet-style-buttons" :class="{ 'high-contrast': isHighContrastMode }">
+  <div class="style-buttons-list" :class="{ 'high-contrast': isHighContrastMode }">
     <div
-      v-for="(button, index) in bulletButtons"
+      v-for="(button, index) in props.buttons"
       :key="button.key"
       class="button-icon"
       :class="{ selected: props.selectedStyle === button.key }"
+      :style="iconStyle"
       @click="select(button.key)"
       v-html="button.icon"
       role="menuitem"
@@ -85,7 +93,7 @@ onMounted(() => {
 </template>
 
 <style scoped>
-.bullet-style-buttons {
+.style-buttons-list {
   display: flex;
   justify-content: space-between;
   width: 100%;
@@ -97,8 +105,6 @@ onMounted(() => {
     padding: 5px;
     font-size: var(--sd-ui-font-size-600, 16px);
     color: var(--sd-ui-dropdown-text, #47484a);
-    width: 25px;
-    height: 25px;
     border-radius: var(--sd-ui-dropdown-option-radius, 3px);
     display: flex;
     justify-content: center;

…omponents/toolbar/BulletStyleButtons.vue …/components/toolbar/StyleButtonsList.vuepackages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue renamed to packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue packages/super-editor/src/editors/v1/components/toolbar/BulletStyleButtons.vue renamed to packages/super-editor/src/editors/v1/components/toolbar/StyleButtonsList.vue

@@ -5,8 +5,8 @@ import { normalizeFontOption } from './helpers/font-options.js';
 import { useToolbarItem } from './use-toolbar-item';
 import AIWriter from './AIWriter.vue';
 import AlignmentButtons from './AlignmentButtons.vue';
-import BulletStyleButtons from './BulletStyleButtons.vue';
-import NumberedStyleButtons from './NumberedStyleButtons.vue';
+import StyleButtonsList from './StyleButtonsList.vue';
+import { bulletStyleButtons, numberedStyleButtons } from './list-style-buttons.js';
 import DocumentMode from './DocumentMode.vue';
 import LinkedStyle from './LinkedStyle.vue';
 import LinkInput from './LinkInput.vue';
@@ -655,7 +655,9 @@ export const makeDefaultItems = ({
             const item = { ...bulletedList, command: 'toggleBulletListStyle' };
             superToolbar.emitCommand({ item, argument: style });
           };
-          return h(BulletStyleButtons, {
+          return h(StyleButtonsList, {
+            buttons: bulletStyleButtons,
+            iconSize: 25,
             selectedStyle: bulletedList.selectedValue.value,
             onSelect: handleSelect,
           });
@@ -688,7 +690,9 @@ export const makeDefaultItems = ({
             const item = { ...numberedList, command: 'toggleOrderedListStyle' };
             superToolbar.emitCommand({ item, argument: style });
           };
-          return h(NumberedStyleButtons, {
+          return h(StyleButtonsList, {
+            buttons: numberedStyleButtons,
+            iconSize: 30,
             selectedStyle: numberedList.selectedValue.value,
             onSelect: handleSelect,
           });

packages/super-editor/src/editors/v1/components/toolbar/defaultItems.js

@@ -0,0 +1,18 @@
+import { toolbarIcons } from './toolbarIcons.js';
+
+export const bulletStyleButtons = [
+  { key: 'disc', icon: toolbarIcons.bulletListDisc, ariaLabel: 'Opaque circle' },
+  { key: 'circle', icon: toolbarIcons.bulletListCircle, ariaLabel: 'Outline circle' },
+  { key: 'square', icon: toolbarIcons.bulletListSquare, ariaLabel: 'Opaque square' },
+];
+
+export const numberedStyleButtons = [
+  { key: 'decimal', icon: toolbarIcons.numberedListDecimal, ariaLabel: '1. 2. 3.' },
+  { key: 'decimal-paren', icon: toolbarIcons.numberedListDecimalParen, ariaLabel: '1) 2) 3)' },
+  { key: 'upper-roman', icon: toolbarIcons.numberedListUpperRoman, ariaLabel: 'I. II. III.' },
+  { key: 'lower-roman', icon: toolbarIcons.numberedListLowerRoman, ariaLabel: 'i. ii. iii.' },
+  { key: 'upper-alpha', icon: toolbarIcons.numberedListUpperAlpha, ariaLabel: 'A. B. C.' },
+  { key: 'upper-alpha-paren', icon: toolbarIcons.numberedListUpperAlphaParen, ariaLabel: 'A) B) C)' },
+  { key: 'lower-alpha', icon: toolbarIcons.numberedListLowerAlpha, ariaLabel: 'a. b. c.' },
+  { key: 'lower-alpha-paren', icon: toolbarIcons.numberedListLowerAlphaParen, ariaLabel: 'a) b) c)' },
+];