@zipify/wysiwyg 1.0.0-dev.9 → 1.0.0-dev.90

package/lib/components/base/dropdown/DropdownMenu.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script>
-import { provide } from '@vue/composition-api';
+import { provide } from 'vue';
 import ScrollView from '../ScrollView';
 import { InjectionTokens } from './injectionTokens';
 import DropdownGroup from './DropdownGroup';

package/lib/components/base/dropdown/DropdownOption.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { computed, inject, nextTick, onMounted, ref, toRef } from '@vue/composition-api';
+import { computed, inject, nextTick, onMounted, ref, toRef } from 'vue';
 import Button from '../Button';
 import { useScrollView } from '../composables';
 import { InjectionTokens } from './injectionTokens';

package/lib/components/base/dropdown/__tests__/DropdownActivator.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import DropdownActivator from '../DropdownActivator';
 import { InjectionTokens } from '../injectionTokens';
 import Button from '../../Button';

package/lib/components/base/dropdown/__tests__/DropdownMenu.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { InjectionTokens } from '../injectionTokens';
 import DropdownMenu from '../DropdownMenu';
 

package/lib/components/base/dropdown/__tests__/DropdownOption.test.js

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import DropdownOption from '../DropdownOption';
 import { InjectionTokens } from '../injectionTokens';
 import Button from '../../Button';

package/lib/components/base/dropdown/composables/__tests__/useActiveOptionManager.test.js

@@ -1,4 +1,4 @@
-import { nextTick, ref } from '@vue/composition-api';
+import { nextTick, ref } from 'vue';
 import { useActiveOptionManager } from '../useActiveOptionManager';
 
 describe('manage active option', () => {

package/lib/components/base/dropdown/composables/__tests__/useDropdownEntityTitle.test.js

@@ -1,4 +1,4 @@
-import { ref } from '@vue/composition-api';
+import { ref } from 'vue';
 import { useDropdownEntityTitle } from '../useDropdownEntityTitle';
 
 describe('resolve title', () => {

package/lib/components/base/dropdown/composables/useActiveOptionManager.js

@@ -1,4 +1,4 @@
-import { ref, watch } from '@vue/composition-api';
+import { ref, watch } from 'vue';
 
 export function useActiveOptionManager({ optionsRef, inputRef, stateless, onChange }) {
     const activeOption = ref(null);

package/lib/components/base/dropdown/composables/useDropdownEntityTitle.js

@@ -1,4 +1,4 @@
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 
 export function useDropdownEntityTitle(entityRef) {
     return computed(() => entityRef.value?.title || entityRef.value?.id || '');

package/lib/components/base/index.js

@@ -6,6 +6,8 @@ export { default as FieldLabel } from './FieldLabel';
 export { default as Range } from './Range';
 export { default as NumberField } from './NumberField';
 export { default as Modal } from './Modal';
-export { useModalToggler } from './composables';
+export { default as TextField } from './TextField';
+export { default as Checkbox } from './Checkbox';
+export { useModalToggler, useElementRef } from './composables';
 export * from './dropdown';
 export * from './colorPicker';

package/lib/components/toolbar/Toolbar.vue

@@ -1,13 +1,15 @@
 <template>
-    <Transition name="zw-toolbar-" :duration="800">
-        <div class="zw-toolbar">
-            <component :is="toolbarComponent" />
-        </div>
-    </Transition>
+    <keep-alive>
+        <transition name="zw-toolbar-" duration="150">
+            <div class="zw-toolbar" :style="toolbarStyles" ref="toolbarRef" v-if="isVisible">
+                <component :is="toolbarComponent" />
+            </div>
+        </transition>
+    </keep-alive>
 </template>
 
 <script>
-import { computed } from '@vue/composition-api';
+import { computed, ref, watch } from 'vue';
 import { Devices } from '../../enums';
 import ToolbarFull from './ToolbarFull';
 import ToolbarDevice from './ToolbarDevice';
@@ -19,6 +21,11 @@ export default {
         device: {
             type: String,
             required: true
+        },
+
+        toolbar: {
+            type: Object,
+            required: true
         }
     },
 
@@ -26,8 +33,23 @@ export default {
         const toolbarComponent = computed(() => {
             return props.device === Devices.DESKTOP ? ToolbarFull : ToolbarDevice;
         });
+        const isVisible = computed(() => props.toolbar.isActiveRef.value);
+        const toolbarRef = ref(null);
+
+        watch(toolbarRef, (toolbarEl) => {
+            toolbarEl && props.toolbar.mount(toolbarEl);
+        });
+
+        const toolbarStyles = computed(() => ({
+            '--zw-toolbar-offset-y': `${props.toolbar.offsets[1]}px`
+        }));
 
-        return { toolbarComponent };
+        return {
+            toolbarComponent,
+            isVisible,
+            toolbarRef,
+            toolbarStyles
+        };
     }
 };
 </script>
@@ -37,12 +59,32 @@ export default {
     border-radius: 2px;
     background-color: rgb(var(--zw-color-n15));
     color: rgb(var(--zw-color-n70));
-    z-index: 999;
+    z-index: 999999;
+    text-align: left;
+    position: absolute;
+}
+
+.zw-toolbar::before,
+.zw-toolbar::after {
+    content: "";
+    display: block;
+    width: 100%;
+    height: calc(var(--zw-toolbar-offset-y) + 4px);
+    position: absolute;
+    --zw-toolbar-safe-zone: calc(-1 * var(--zw-toolbar-offset-y));
+}
+
+.zw-toolbar::before {
+    top: var(--zw-toolbar-safe-zone);
+}
+
+.zw-toolbar::after {
+    bottom: var(--zw-toolbar-safe-zone);
 }
 
 .zw-toolbar--enter-active,
 .zw-toolbar--leave-active {
-    transition: opacity 0.15s ease-out;
+    transition: opacity 150ms ease-out;
 }
 
 .zw-toolbar--leave-active {

package/lib/components/toolbar/ToolbarDivider.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import { computed } from '@vue/composition-api';
+import { computed } from 'vue';
 
 export default {
     name: 'ToolbarDivider',

package/lib/components/toolbar/ToolbarFull.vue

@@ -14,31 +14,52 @@
                 <FontColorControl />
                 <BackgroundColorControl />
             </ToolbarGroup>
+
+            <template v-if="isPopupMode">
+                <ToolbarDivider vertical />
+
+                <ToolbarGroup>
+                    <ItalicControl />
+                    <UnderlineControl />
+                    <StrikeThroughControl />
+                    <SuperscriptControl />
+                    <CaseStyleControl />
+                </ToolbarGroup>
+            </template>
         </ToolbarRow>
 
         <ToolbarDivider horizontal />
 
         <ToolbarRow>
-            <ToolbarGroup>
-                <ItalicControl />
-                <UnderlineControl />
-                <StrikeThroughControl />
-                <SuperscriptControl />
-                <CaseStyleControl />
-            </ToolbarGroup>
+            <template v-if="!isPopupMode">
+                <ToolbarGroup>
+                    <ItalicControl />
+                    <UnderlineControl />
+                    <StrikeThroughControl />
+                    <SuperscriptControl />
+                    <CaseStyleControl />
+                </ToolbarGroup>
+
+                <ToolbarDivider vertical />
+            </template>
 
-            <ToolbarDivider vertical />
             <AlignmentControl />
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
                 <LineHeightControl />
+            </ToolbarGroup>
+
+            <ToolbarDivider vertical />
+
+            <ToolbarGroup>
                 <ListControl />
             </ToolbarGroup>
 
             <ToolbarDivider vertical />
 
             <ToolbarGroup>
+                <LinkControl />
                 <RemoveFormatControl />
             </ToolbarGroup>
         </ToolbarRow>
@@ -46,6 +67,8 @@
 </template>
 
 <script>
+import { inject } from 'vue';
+import { InjectionTokens } from '../../injectionTokens';
 import ToolbarDivider from './ToolbarDivider';
 import ToolbarRow from './ToolbarRow';
 import ToolbarGroup from './ToolbarGroup';
@@ -64,7 +87,8 @@ import {
     SuperscriptControl,
     UnderlineControl,
     ListControl,
-    RemoveFormatControl
+    RemoveFormatControl,
+    LinkControl
 } from './controls';
 
 export default {
@@ -88,7 +112,14 @@ export default {
         AlignmentControl,
         LineHeightControl,
         ListControl,
-        RemoveFormatControl
+        RemoveFormatControl,
+        LinkControl
+    },
+
+    setup() {
+        const isPopupMode = inject(InjectionTokens.POPUP_MODE);
+
+        return { isPopupMode };
     }
 };
 </script>

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/__tests__/Toolbar.test.js

@@ -1,4 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
+import { ref } from 'vue';
 import { Devices } from '../../../enums';
 import Toolbar from '../Toolbar';
 import ToolbarFull from '../ToolbarFull';
@@ -7,6 +8,11 @@ import ToolbarDevice from '../ToolbarDevice';
 function createComponent({ device }) {
     return shallowMount(Toolbar, {
         propsData: {
+            toolbar: {
+                mount: jest.fn(),
+                isActiveRef: ref({ value: true }),
+                offsets: [0, 8]
+            },
             device: device ?? Devices.DESKTOP
         }
     });

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

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Alignments } from '../../../enums';
 import { ButtonToggle, Button, Icon } from '../../base';

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

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { inject, ref } from '@vue/composition-api';
+import { inject, ref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Button, Icon, Modal, useModalToggler } from '../../base';
 import { tooltip } from '../../../directives';

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

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { CaseStyles } from '../../../enums';
 import { Dropdown, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';

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

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { ColorPicker, Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
 import { Dropdown, DropdownOption } from '../../base';

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

@@ -1,5 +1,6 @@
 <template>
     <Dropdown
+        class="zw-font-size-control"
         :options="options"
         :value="currentValue"
         @change="apply"
@@ -8,7 +9,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { Dropdown } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -43,3 +44,9 @@ export default {
     }
 };
 </script>
+
+<style scoped>
+.zw-font-size-control {
+    width: 64px;
+}
+</style>

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

@@ -8,7 +8,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown } from '../../base';
 import { tooltip } from '../../../directives';

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

@@ -12,7 +12,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import { inject, ref } from '@vue/composition-api';
+import { inject, ref } from 'vue';
 import { Button, Icon, Modal, Range, NumberField, FieldLabel, useModalToggler } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -1,35 +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"
-                v-tooltip="option.tooltip"
-            >
-                <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/composition-api';
+import { computed, inject, ref } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, DropdownOption, Button, Icon } from '../../base';
 import { ListTypes } from '../../../enums';
@@ -59,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/RemoveFormatControl.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -21,10 +21,13 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { InjectionTokens } from '../../../injectionTokens';
 import { Dropdown, Button, Icon } from '../../base';
 import { tooltip } from '../../../directives';
+import { TextSettings } from '../../../enums';
+
+const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
 
 export default {
     name: 'StylePresetControl',
@@ -59,7 +62,17 @@ export default {
             }));
         });
 
-        const apply = (value) => editor.chain().focus().applyPreset(value).run();
+        const apply = (value) => {
+            editor.chain()
+                .focus()
+                .applyPreset(value)
+                .storeSelection()
+                .expandSelectionToBlock()
+                .unsetMarks(CLEAR_MARKS)
+                .restoreSelection()
+                .run();
+        };
+
         const removeCustomization = () => editor.chain().focus().removePresetCustomization().run();
 
         return {

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { computed, inject } from '@vue/composition-api';
+import { computed, inject } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';

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

@@ -11,7 +11,7 @@
 </template>
 
 <script>
-import { inject } from '@vue/composition-api';
+import { inject, computed } from 'vue';
 import { Button, Icon } from '../../base';
 import { InjectionTokens } from '../../../injectionTokens';
 import { tooltip } from '../../../directives';
@@ -31,7 +31,7 @@ export default {
     setup() {
         const editor = inject(InjectionTokens.EDITOR);
 
-        const currentValue = editor.commands.isUnderline();
+        const currentValue = computed(() => editor.commands.isUnderline().value);
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { h, ref } from '@vue/composition-api';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Alignments } from '../../../../enums';
 import { ButtonToggle } from '../../../base';