@zipify/wysiwyg 1.0.0-dev.59 → 1.0.0-dev.61

package/lib/components/toolbar/ToolbarRow.vue

@@ -13,6 +13,7 @@ export default {
 <style scoped>
 .zw-toolbar__row {
     display: flex;
+    justify-content: space-between;
     column-gap: var(--zw-offset-xs);
     padding: var(--zw-offset-xxs) var(--zw-offset-xs);
 }

package/lib/components/toolbar/controls/ListControl.vue

@@ -1,31 +1,51 @@
 <template>
-    <Dropdown
-        :value="currentValue"
-        :options="$options.listTypes"
-        @change="apply"
-    >
-        <template #activator="{ open, isOpened }">
-            <Button
-                icon
-                skin="toolbar"
-                :active="isOpened || isList"
-                @click="open"
-                v-tooltip="'Bullet Styles'"
-            >
-                <Icon :name="currentIcon" size="28px" auto-color />
-            </Button>
-        </template>
-
-        <template #option="{ option }">
-            <DropdownOption class="zw-list-control__option" :option="option">
-                <Icon :name="option.icon" size="28px" auto-color />
-            </DropdownOption>
-        </template>
-    </Dropdown>
+    <div class="zpa-list-control">
+        <Button
+            icon
+            skin="toolbar"
+            :active="isCurrentListSelected"
+            @click="toggle"
+            v-tooltip="'Bullets'"
+        >
+            <Icon :name="currentIcon" size="28px" auto-color />
+        </Button>
+
+        <Dropdown
+            :value="currentValue"
+            :options="$options.listTypes"
+            @change="apply"
+        >
+            <template #activator="{ open, isOpened }">
+                <Button
+                    icon
+                    skin="toolbar"
+                    :active="isOpened"
+                    @click="open"
+                    v-tooltip="'Bullet Styles'"
+                >
+                    <Icon
+                        class="zw-list-control__activator"
+                        name="arrow"
+                        size="8px"
+                        auto-color
+                    />
+                </Button>
+            </template>
+
+            <template #option="{ option }">
+                <DropdownOption
+                    class="zw-list-control__option"
+                    :option="option"
+                >
+                    <Icon :name="option.icon" size="28px" auto-color />
+                </DropdownOption>
+            </template>
+        </Dropdown>
+    </div>
 </template>
 
 <script>
-import { computed, inject } from 'vue';
+import { computed, inject, ref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, DropdownOption, Button, Icon } from '../../base';
 import { ListTypes } from '../../../enums';
@@ -55,26 +75,44 @@ export default {
         const selectionValue = editor.commands.getListType();
         const isList = computed(() => !!selectionValue.value);
         const currentValue = computed(() => selectionValue.value || 'none');
+        const recentListType = ref(ListTypes.DISC);
+        const isCurrentListSelected = computed(() => selectionValue.value === recentListType.value);
 
-        const currentIcon = computed(() => {
-            const type = selectionValue.value || ListTypes.DISC;
+        const currentIcon = computed(() => `list-${recentListType.value}`);
 
-            return `list-${type}`;
-        });
+        const apply = (type) => {
+            recentListType.value = type;
+            editor.chain().focus().applyList(type).run();
+        };
 
-        const apply = (type) => editor.chain().focus().applyList(type).run();
+        const toggle = () => apply(recentListType.value || ListTypes.DISC);
 
         return {
             isList,
             currentValue,
             currentIcon,
-            apply
+            isCurrentListSelected,
+            apply,
+            toggle
         };
     }
 };
 </script>
 
 <style scoped>
+.zpa-list-control {
+    display: flex;
+}
+
+.zpa-list-control:hover {
+    color: rgb(var(--zw-color-white));
+    background-color: rgb(var(--zw-color-n5));
+}
+
+.zw-list-control__activator {
+    padding: 0 var(--zw-offset-xs);
+}
+
 .zw-list-control__option {
     padding: 0 var(--zw-offset-xs);
     display: flex;

package/lib/components/toolbar/controls/__tests__/ListControl.test.js

@@ -1,7 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from 'vue';
+import { h, ref, nextTick } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
-import { Dropdown, Icon } from '../../../base';
+import { Button, Dropdown, Icon } from '../../../base';
 import ListControl from '../ListControl';
 import { ListTypes } from '../../../../enums';
 
@@ -62,10 +62,15 @@ describe('selection value', () => {
         expect(iconWrapper.props('name')).toBe('list-disc');
     });
 
-    test('should render type icon', () => {
+    test('should render type icon', async () => {
         const editor = createEditor({ listType: ListTypes.DECIMAL });
         const wrapper = createComponent({ editor });
         const iconWrapper = wrapper.findComponent(Icon);
+        const dropdownWrapper = wrapper.findComponent(Dropdown);
+
+        dropdownWrapper.vm.$emit('change', ListTypes.DECIMAL);
+
+        await nextTick();
 
         expect(iconWrapper.props('name')).toBe('list-decimal');
     });
@@ -79,4 +84,14 @@ describe('selection value', () => {
 
         expect(editor.commands.applyList).toHaveBeenCalledWith(ListTypes.LATIN);
     });
+
+    test('should apply list with default type', () => {
+        const editor = createEditor();
+        const wrapper = createComponent({ editor });
+        const buttonWrapper = wrapper.findComponent(Button);
+
+        buttonWrapper.vm.$emit('click');
+
+        expect(editor.commands.applyList).toHaveBeenCalledWith(ListTypes.DISC);
+    });
 });

package/lib/extensions/Superscript.js

@@ -1,5 +1,9 @@
 import Base from '@tiptap/extension-superscript';
 
 export const Superscript = Base.extend({
-    addKeyboardShortcuts: null
+    addKeyboardShortcuts: null,
+
+    addOptions: () => ({
+        HTMLAttributes: { class: 'zw-superscript' }
+    })
 });

package/lib/styles/content.css

@@ -10,6 +10,14 @@
     pointer-events: none;
 }
 
+.zw-superscript {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: initial;
+    top: -0.5em;
+}
+
 .zw-style.zw-style.zw-style {
     font-weight: var(--zw-font-weight, var(--zw-preset-font-weight));
     font-family: var(--zw-font-family, var(--zw-preset-font-family));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zipify/wysiwyg",
-  "version": "1.0.0-dev.59",
+  "version": "1.0.0-dev.61",
   "description": "Zipify modification of TipTap text editor",
   "main": "dist/wysiwyg.mjs",
   "repository": {