@zipify/wysiwyg 3.5.4-ai-prototype → 3.6.0-0

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

@@ -1,5 +1,6 @@
 <template>
     <Button
+        class="zw-position--relative"
         skin="toolbar"
         icon
         :active="currentValue"
@@ -7,6 +8,13 @@
         v-tooltip="{ text: 'Underline', hotkey: 'Mod U' }"
     >
         <Icon name="underline" size="28px" auto-color />
+
+        <span
+            v-if="isCustomized"
+            class="zw-button__customized-indicator"
+            data-test-selector="customizedIndicator"
+            v-tooltip.xs="'Style differs from Page Styles'"
+        />
     </Button>
 </template>
 
@@ -32,11 +40,13 @@ export default {
         const editor = inject(InjectionTokens.EDITOR);
 
         const currentValue = editor.commands.isUnderline();
+        const isCustomized = editor.commands.isUnderlineCustomized();
 
         const apply = () => editor.chain().focus().toggleUnderline().run();
 
         return {
             currentValue,
+            isCustomized,
             apply
         };
     }

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

@@ -5,9 +5,14 @@ import { Alignments } from '../../../../enums';
 import { ButtonToggle } from '../../../base';
 import AlignmentControl from '../AlignmentControl';
 
-const createEditor = ({ alignment } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ alignment, isSettingCustomized } = {}) => ({
     commands: {
         getAlignment: () => ref(alignment),
+        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyAlignment: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -74,3 +79,40 @@ describe('selection value', () => {
         expect(editor.commands.applyAlignment).toHaveBeenCalledWith(Alignments.CENTER);
     });
 });
+
+describe('render indicator of customized styles', () => {
+    test('should render indicator', () => {
+        const editor = createEditor({
+            alignment: Alignments.LEFT,
+            isSettingCustomized: true
+        });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.LEFT,
+                    tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
+                },
+                isActive: true
+            }
+        });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator', () => {
+        const editor = createEditor({ alignment: Alignments.LEFT });
+        const wrapper = createComponent({
+            editor,
+            slotParams: {
+                option: {
+                    id: Alignments.LEFT,
+                    tooltip: { text: 'Align Left', hotkey: 'Mod Shift L' }
+                },
+                isActive: true
+            }
+        });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
+});

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

@@ -4,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { ColorPicker } from '../../../base';
 import FontColorControl from '../FontColorControl';
 
-const createEditor = ({ fontColor } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ fontColor, isSettingCustomized } = {}) => ({
     commands: {
         getFontColor: () => ref(fontColor),
+        isSettingCustomized: () => ref( isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         applyFontColor: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -57,3 +62,19 @@ describe('selection value', () => {
         expect(editor.commands.applyFontColor).toHaveBeenCalledWith('green');
     });
 });
+
+describe('render indicator of customized styles', () => {
+    test('should render indicator', () => {
+        const editor = createEditor({ fontColor: 'red', isSettingCustomized: true });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator', () => {
+        const editor = createEditor({ fontColor: 'red' });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
+});

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

@@ -7,6 +7,8 @@ import FontFamilyControl from '../FontFamilyControl';
 const createEditor = ({ fontFamily } = {}) => ({
     commands: {
         getFont: () => ref({ name: fontFamily }),
+        getDefaultFontFamily: () => ref(fontFamily ?? 'Lato'),
+        isSettingCustomized: () => ref(false),
         focus: jest.fn().mockReturnThis(),
         applyFontFamily: jest.fn().mockReturnThis(),
         run: jest.fn()

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontSizeControl from '../FontSizeControl';
@@ -7,6 +7,8 @@ import FontSizeControl from '../FontSizeControl';
 const createEditor = ({ fontSize } = {}) => ({
     commands: {
         getFontSize: () => ref(fontSize),
+        getDefaultFontSize: () => ref(fontSize ?? '18'),
+        isSettingCustomized: () => ref(false),
         focus: jest.fn().mockReturnThis(),
         applyFontSize: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -19,6 +21,12 @@ const createEditor = ({ fontSize } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontSizeControl, {
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
         provide: {
             [InjectionTokens.EDITOR]: editor,
             [InjectionTokens.FONT_SIZES]: ['12', '23']

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

@@ -1,5 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
-import { ref } from 'vue';
+import { h, ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Dropdown } from '../../../base';
 import FontWeightControl from '../FontWeightControl';
@@ -7,6 +7,8 @@ import FontWeightControl from '../FontWeightControl';
 const createEditor = ({ fontWeight, fontWeightList } = {}) => ({
     commands: {
         getFontWeight: () => ref(fontWeight ?? '400'),
+        getDefaultFontWeight: () => ref(fontWeight ?? '400'),
+        isSettingCustomized: () => ref(false),
         getFont: () => ref({ weights: fontWeightList ?? ['400', '700'] }),
         focus: jest.fn().mockReturnThis(),
         applyFontWeight: jest.fn().mockReturnThis(),
@@ -20,6 +22,12 @@ const createEditor = ({ fontWeight, fontWeightList } = {}) => ({
 
 function createComponent({ editor }) {
     return shallowMount(FontWeightControl, {
+        stubs: {
+            Dropdown: {
+                render: () => h('div'),
+                props: ['value']
+            }
+        },
         provide: { [InjectionTokens.EDITOR]: editor }
     });
 }

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

@@ -4,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import ItalicControl from '../ItalicControl';
 
-const createEditor = ({ isItalic, isItalicAvailable } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ isItalic, isItalicAvailable, isSettingCustomized } = {}) => ({
     commands: {
         isItalic: () => ref(isItalic),
+        isSettingCustomized: () => ref(isSettingCustomized ?? false),
         isItalicAvailable: () => ref(isItalicAvailable ?? true),
         focus: jest.fn().mockReturnThis(),
         toggleItalic: jest.fn().mockReturnThis(),
@@ -40,6 +45,23 @@ describe('rendering', () => {
 
         expect(buttonWrapper.props('disabled')).toBe(true);
     });
+
+    test('should render indicator of customized styles', () => {
+        const editor = createEditor({
+            isItalic: true,
+            isSettingCustomized: true
+        });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator of customized styles', () => {
+        const editor = createEditor({ isItalic: false });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
 });
 
 describe('selection value', () => {

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

@@ -4,12 +4,17 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Modal, NumberField, Range } from '../../../base';
 import LineHeightControl from '../LineHeightControl';
 
-const createEditor = ({ height } = {}) => {
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ height, isSettingCustomized } = {}) => {
     const heightRef = ref(height ?? '1.2');
 
     return {
         commands: {
             getLineHeight: () => heightRef,
+            isSettingCustomized: () => ref(isSettingCustomized ?? false),
             applyLineHeight: jest.fn(function (value) {
                 heightRef.value = value;
                 return this;
@@ -117,4 +122,21 @@ describe('rendering', () => {
         expect(buttonWrapper.props('active')).toBe(true);
         expect(modalWrapper.props('toggler').isOpened.value).toBe(true);
     });
+
+    test('should render indicator of customized styles', () => {
+        const editor = createEditor({
+            height: '1.8',
+            isSettingCustomized: true
+        });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator of customized styles', () => {
+        const editor = createEditor({ height: '1.2' });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
 });

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

@@ -2,7 +2,7 @@ import { shallowMount } from '@vue/test-utils';
 import { ref } from 'vue';
 import { InjectionTokens } from '../../../../injectionTokens';
 import { Button, Dropdown } from '../../../base';
-import StylePresetControl from '../StylePresetControl';
+import { StylePresetControl } from '../stylePreset';
 import { TextSettings } from '../../../../enums';
 
 const createEditor = ({ presets, preset, customization } = {}) => ({
@@ -31,27 +31,45 @@ function createComponent({ editor }) {
     });
 }
 
+function createPreset({ id, name } = {}) {
+    return {
+        id: id ?? 'regular-1',
+        name: name ?? 'Regular 1',
+        common: {
+            color: '#262626',
+            font_weight: 400,
+            font_family: 'Lato',
+            font_style: 'italic'
+        },
+        desktop: { font_size: 18 }
+    };
+}
+
 describe('rendering', () => {
     test('should render dropdown options', () => {
-        const editor = createEditor({
-            presets: [
-                { id: 'h1', name: 'H1' },
-                { id: 'regular-1', name: 'Regular 1' }
-            ]
-        });
+        const presets = [createPreset()];
+        const editor = createEditor({ presets });
         const wrapper = createComponent({ editor });
         const dropdownWrapper = wrapper.findComponent(Dropdown);
 
-        expect(dropdownWrapper.props('options')).toEqual([
-            { id: 'h1', title: 'H1' },
-            { id: 'regular-1', title: 'Regular 1' }
-        ]);
+        expect(dropdownWrapper.props('options')).toEqual([{
+            id: 'regular-1',
+            title: 'Regular 1',
+            properties: {
+                color: '#262626',
+                fontFamily: 'Lato',
+                fontSize: 18,
+                fontStyle: 'italic',
+                fontWeight: 400
+            }
+        }]);
     });
 
     test('should render preset from selection', () => {
+        const presets = [createPreset()];
         const editor = createEditor({
-            presets: [{ id: 'regular-1', name: 'Regular 1' }],
-            preset: { id: 'regular-1' }
+            presets,
+            preset: createPreset()
         });
         const wrapper = createComponent({ editor });
         const dropdownWrapper = wrapper.findComponent(Dropdown);

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

@@ -4,9 +4,14 @@ import { InjectionTokens } from '../../../../injectionTokens';
 import { Button } from '../../../base';
 import UnderlineControl from '../UnderlineControl';
 
-const createEditor = ({ isUnderline } = {}) => ({
+const SELECTORS = {
+    INDICATOR: '[data-test-selector="customizedIndicator"]'
+};
+
+const createEditor = ({ isUnderline, isSettingCustomized } = {}) => ({
     commands: {
         isUnderline: () => ref(isUnderline),
+        isUnderlineCustomized: () => ref(isSettingCustomized ?? false),
         focus: jest.fn().mockReturnThis(),
         toggleUnderline: jest.fn().mockReturnThis(),
         run: jest.fn()
@@ -46,3 +51,23 @@ describe('selection value', () => {
         expect(editor.commands.toggleUnderline).toHaveBeenCalled();
     });
 });
+
+
+describe('render indicator of customized styles', () => {
+    test('should render indicator', () => {
+        const editor = createEditor({
+            isUnderline: true,
+            isSettingCustomized: true
+        });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).toVueContainComponent(SELECTORS.INDICATOR);
+    });
+
+    test('should not render indicator', () => {
+        const editor = createEditor({ isUnderline: false });
+        const wrapper = createComponent({ editor });
+
+        expect(wrapper).not.toVueContainComponent(SELECTORS.INDICATOR);
+    });
+});

package/lib/components/toolbar/controls/index.js

@@ -1,4 +1,3 @@
-export { default as StylePresetControl } from './StylePresetControl';
 export { default as FontFamilyControl } from './FontFamilyControl';
 export { default as FontWeightControl } from './FontWeightControl';
 export { default as FontSizeControl } from './FontSizeControl';
@@ -13,5 +12,5 @@ export { default as AlignmentControl } from './AlignmentControl';
 export { default as LineHeightControl } from './LineHeightControl';
 export { default as ListControl } from './ListControl';
 export { default as RemoveFormatControl } from './RemoveFormatControl';
-export { default as AiControl } from './aiComponent/AiControl';
 export { LinkControl } from './link';
+export { StylePresetControl } from './stylePreset';

package/lib/components/toolbar/controls/{StylePresetControl.vue → stylePreset/StylePresetControl.vue}

@@ -2,11 +2,16 @@
     <div class="zw-style-preset-control">
         <Dropdown
             class="zw-style-preset-control__dropdown"
+            :max-width="170"
             :value="preset.id"
             :options="options"
             @change="apply"
             v-tooltip="'Text Type'"
-        />
+        >
+            <template #option="{ option }">
+                <StylePresetOption :option="option" />
+            </template>
+        </Dropdown>
 
         <Button
             class="zw-style-preset-control__reset"
@@ -22,10 +27,11 @@
 
 <script>
 import { computed, inject, unref } from 'vue';
-import { InjectionTokens } from '../../../injectionTokens';
-import { Dropdown, Button, Icon } from '../../base';
-import { tooltip } from '../../../directives';
-import { TextSettings } from '../../../enums';
+import { InjectionTokens } from '../../../../injectionTokens';
+import { Dropdown, Button, Icon } from '../../../base';
+import { tooltip } from '../../../../directives';
+import { Devices, TextSettings } from '../../../../enums';
+import StylePresetOption from './StylePresetOption';
 
 const CLEAR_MARKS = [TextSettings.FONT_SIZE, TextSettings.FONT_WEIGHT];
 
@@ -33,9 +39,10 @@ export default {
     name: 'StylePresetControl',
 
     components: {
-        Icon,
+        StylePresetOption,
+        Dropdown,
         Button,
-        Dropdown
+        Icon
     },
 
     directives: {
@@ -58,7 +65,15 @@ export default {
         const options = computed(() => {
             return unref(presets).map((preset) => ({
                 id: preset.id,
-                title: preset.name
+                title: preset.name,
+                properties: {
+                    color: preset.common.color,
+                    fontWeight: preset.common.font_weight,
+                    fontFamily: preset.common.font_family,
+                    fontStyle: preset.common.font_style,
+                    textDecoration: preset.common.text_decoration,
+                    fontSize: preset[Devices.DESKTOP].font_size
+                }
             }));
         });
 

package/lib/components/toolbar/controls/stylePreset/StylePresetOption.vue

@@ -0,0 +1,87 @@
+<template>
+    <DropdownOption
+        class="zw-style-preset-control__option"
+        :style="renderOptionStyles(option)"
+        :option="option"
+        v-tooltip="option.id"
+    >
+        <span class="zw-style-preset-control__color" />
+        <span class="zw-style-preset-control__title">{{ optionTitle }}</span>
+        <span class="zw-style-preset-control__size">{{ fontSizeTitle }}</span>
+    </DropdownOption>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { DropdownOption } from '../../../base';
+import { tooltip } from '../../../../directives';
+
+export default {
+    name: 'StylePresetOption',
+
+    components: {
+        DropdownOption
+    },
+
+    directives: {
+        tooltip
+    },
+
+    props: {
+        option: {
+            type: Object,
+            required: true
+        }
+    },
+
+    setup(props) {
+        const optionTitle = computed(() => props.option.title);
+        const fontSizeTitle = computed(() => props.option.properties.fontSize);
+        const renderOptionStyles = (option) => ({
+            '--zw-color-option': option.properties.color,
+            '--zw-font-style-option': option.properties.fontStyle,
+            '--zw-font-family-option': `"${option.properties.fontFamily}"`,
+            '--zw-font-weight-option': option.properties.fontWeight,
+            '--zw-text-decoration-option': option.properties.textDecoration
+        });
+
+        return {
+            optionTitle,
+            fontSizeTitle,
+            renderOptionStyles
+        };
+    }
+};
+</script>
+
+<style scoped>
+.zw-style-preset-control__option {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.zw-style-preset-control__color {
+    width: 10px;
+    height: 10px;
+    border: 1px solid rgba(var(--zw-color-black), 0.15);
+    border-radius: 14.71%;
+    background-color: var(--zw-color-option);
+}
+
+.zw-style-preset-control__size {
+    font-size: 10px;
+    color: rgb(var(--zw-color-n70));
+    margin-left: var(--zw-offset-sm);
+}
+
+.zw-style-preset-control__title {
+    width: 82px;
+    margin-left: var(--zw-offset-xs);
+    font-size: var(--zw-font-size-xxs);
+    font-family: var(--zw-font-family-option);
+    font-style: var(--zw-font-style-option);
+    font-weight: var(--zw-font-weight-option);
+    text-decoration: var(--zw-text-decoration-option);
+}
+</style>

package/lib/components/toolbar/controls/stylePreset/index.js

@@ -0,0 +1 @@
+export { default as StylePresetControl } from './StylePresetControl';

package/lib/components/toolbar/layouts/ToolbarDesktop.vue

@@ -1,7 +1,10 @@
 <template>
     <div>
         <ToolbarRow>
-            <AiControl />
+            <template v-if="aiComponent">
+                <component :is="aiComponent" />
+                <ToolbarDivider vertical />
+            </template>
             <StylePresetControl />
             <ToolbarDivider vertical />
             <FontFamilyControl />
@@ -65,8 +68,7 @@ import {
     UnderlineControl,
     ListControl,
     RemoveFormatControl,
-    LinkControl,
-    AiControl
+    LinkControl
 } from '../controls';
 
 export default {
@@ -91,8 +93,15 @@ export default {
         LineHeightControl,
         ListControl,
         RemoveFormatControl,
-        LinkControl,
-        AiControl
+        LinkControl
+    },
+
+    props: {
+        aiComponent: {
+            type: Object,
+            required: false,
+            default: null
+        }
     }
 };
 </script>

package/lib/components/toolbar/layouts/ToolbarPopup.vue

@@ -1,6 +1,10 @@
 <template>
     <div>
         <ToolbarRow>
+            <template v-if="aiComponent">
+                <component :is="aiComponent" />
+                <ToolbarDivider vertical />
+            </template>
             <StylePresetControl />
             <ToolbarDivider vertical />
             <FontFamilyControl />
@@ -90,6 +94,14 @@ export default {
         ListControl,
         RemoveFormatControl,
         LinkControl
+    },
+
+    props: {
+        aiComponent: {
+            type: Object,
+            required: false,
+            default: null
+        }
     }
 };
 </script>

package/lib/entryLib.js

@@ -2,3 +2,5 @@ export { default as Wysiwyg } from './Wysiwyg';
 export { NodeFactory, HtmlToJsonParser } from './services';
 export { NodeTypes, TextSettings, Alignments } from './enums';
 export { isWysiwygContent, unmarkWysiwygContent, markWysiwygContent } from './utils';
+export * from './components/base';
+export { InjectionTokens } from './injectionTokens';

package/lib/extensions/index.js

@@ -1,5 +1,4 @@
 import { reactive, toRef, watch } from 'vue';
-import FloatingMenu from '@tiptap/extension-floating-menu';
 import { StylePresetRenderer } from '../services';
 import { buildCoreExtensions } from './core';
 import { FontFamily } from './FontFamily';
@@ -18,7 +17,6 @@ import { List } from './list';
 import { Link } from './Link';
 import { Superscript } from './Superscript';
 import { Margin } from './Margin';
-import { AiComponent } from './AiComponent';
 
 export function buildExtensions(options) {
     const getPresetById = (id) => options.presetsRef.value.find((preset) => preset.id === id);
@@ -39,9 +37,6 @@ export function buildExtensions(options) {
                 linkPresetId: options.linkPresetId
             })
         }),
-        AiComponent.configure({
-            aiComponent: options.aiComponent
-        }),
         List.configure({
             baseClass: options.baseListClass,
             presetClass: options.basePresetClass + options.defaultPresetId

package/lib/extensions/proseMirror/PastePlugin.js

@@ -46,12 +46,10 @@ export class PastePlugin extends ProseMirrorPlugin {
         return true;
     }
 
-    _insertPastedContent({ state, input }, slice) {
-        if (!this._isFullBlockSelected(state)) {
-            return state.tr.replaceSelection(slice);
-        }
-
-        return state.tr.replaceSelectionWith(slice.content, input.shiftKey);
+    _insertPastedContent({ state }, slice) {
+        return this._isFullBlockSelected(state)
+            ? state.tr.replaceSelectionWith(slice.content, false)
+            : state.tr.replaceSelection(slice);
     }
 
     _isFullBlockSelected(state) {

package/lib/styles/dropdown.css

@@ -0,0 +1,7 @@
+.zw-dropdown__default-option {
+    font-size: var(--zw-font-size-xxs);
+    color: rgb(var(--zw-color-n70));
+    font-family: "Lato", sans-serif;
+    font-style: italic;
+    margin-left: var(--zw-offset-xxs);
+}