@zipify/wysiwyg 1.0.0-dev.58 → 1.0.0-dev.60

package/example/tooltip/Tooltip.js

@@ -25,7 +25,7 @@ export class Tooltip {
     static get popperStyles() {
         return {
             willChange: 'transform',
-            zIndex: 10001
+            zIndex: 999999
         };
     }
 

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/services/ContentNormalizer.js

@@ -1,6 +1,7 @@
 import { ContextWindow } from './ContextWidnow';
 
 export class ContentNormalizer {
+    static PARSER = new DOMParser();
     static BLOCK_STYLES = ['text-align', 'line-height'];
     static BLOCK_NODE_NAMES = ['P', 'H1', 'H2', 'H3', 'H4'];
 
@@ -20,11 +21,17 @@ export class ContentNormalizer {
     ];
 
     static normalize(content) {
-        return new ContentNormalizer(content).normalize();
+        const options = {
+            content,
+            parser: ContentNormalizer.PARSER
+        };
+
+        return new ContentNormalizer(options).normalize();
     }
 
-    constructor(content) {
+    constructor({ content, parser }) {
         this._content = content;
+        this._parser = parser;
         this._dom = null;
     }
 
@@ -36,7 +43,7 @@ export class ContentNormalizer {
     }
 
     _normalizeTextContent() {
-        this._dom = new DOMParser().parseFromString(this._content, 'text/html');
+        this._dom = this._parser.parseFromString(this._content, 'text/html');
 
         this._iterateNodes(this._removeEmptyNodes, this._isBlockNode);
         this._iterateNodes(this._normalizeListItems, (node) => node.tagName === 'LI');
@@ -59,7 +66,7 @@ export class ContentNormalizer {
     }
 
     _removeEmptyNodes(node) {
-        if (node.childNodes.length === 0) {
+        if (!node.innerHTML.replace(/\n/g, '').trim()) {
             node.remove();
         }
     }
@@ -74,6 +81,8 @@ export class ContentNormalizer {
             fragment.append(node);
         };
 
+        this._assignElementProperties(itemEl, itemEl.parentElement, ContentNormalizer.BLOCK_STYLES);
+
         for (const node of children) {
             if (node.tagName === 'P') {
                 append(node);

package/lib/services/__tests__/ContentNormalizer.test.js

@@ -79,6 +79,20 @@ describe('normalize text content', () => {
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
 
+    test('should ignore space only nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p> </p><p>lorem ipsum 2</p>';
+        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
+    test('should ignore newline chapters only nodes', () => {
+        const input = '<p>lorem ipsum 1</p><p>\n</p><p>lorem ipsum 2</p>';
+        const output = '<p>lorem ipsum 1</p><p>lorem ipsum 2</p>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
+
     test('should not ignore setting', () => {
         const input = '<p style="text-decoration-line: underline;">lorem ipsum</p>';
         const output = '<p><span style="text-decoration-line: underline;">lorem ipsum</span></p>';
@@ -106,4 +120,11 @@ describe('normalize text content', () => {
 
         expect(ContentNormalizer.normalize(input)).toBe(output);
     });
+
+    test('should assign block styles from list to paragraph', () => {
+        const input = '<ul style="line-height: 2;"><li>lorem ipsum</li></ul>';
+        const output = '<ul style="line-height: 2;"><li><p style="line-height: 2;">lorem ipsum</p></li></ul>';
+
+        expect(ContentNormalizer.normalize(input)).toBe(output);
+    });
 });

package/package.json

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