goodteditor-ui 1.0.25 → 1.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.25",
+    "version": "1.0.26",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

package/src/components/ui/WysiwygEditor/WysiwygEditor.d.ts

@@ -1,4 +1,13 @@
-import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
+import {
+    Button,
+    Select,
+    InputUnits,
+    ColorPicker,
+    ToolbarPopover,
+    InputAuto,
+    Link,
+    Image
+} from './renders';
 
 export type Render = Readonly<{
     BUTTON: Button;
@@ -7,8 +16,8 @@ export type Render = Readonly<{
     SELECT: Select;
     TOOLBAR_POPOVER: ToolbarPopover;
     INPUT_AUTO: InputAuto;
-    INPUT_BROWSE: InputBrowse;
     LINK: Link;
+    IMAGE: Image;
 }>;
 
 export type CommandDef = {

package/src/components/ui/WysiwygEditor/constants.js

@@ -1,4 +1,13 @@
-import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
+import {
+    Button,
+    Select,
+    InputUnits,
+    ColorPicker,
+    ToolbarPopover,
+    InputAuto,
+    Link,
+    Image
+} from './renders';
 
 /**
  * @typedef {import('./WysiwygEditor').NodeType} NodeType
@@ -147,8 +156,8 @@ export const Render = Object.freeze({
     SELECT: Select,
     TOOLBAR_POPOVER: ToolbarPopover,
     INPUT_AUTO: InputAuto,
-    INPUT_BROWSE: InputBrowse,
-    LINK: Link
+    LINK: Link,
+    IMAGE: Image
 });
 
 /**
@@ -231,8 +240,8 @@ export const createInputAutoTool = ({ getValue = () => null, options = [], ...to
  * @param {Tool} tool
  * @return Tool
  */
-export const createInputBrowseTool = ({ getValue = () => null, ...toolOptions }) => ({
-    ...createBaseTool({ render: Render.INPUT_BROWSE, ...toolOptions }),
+export const createImageTool = ({ getValue = () => null, ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.IMAGE, ...toolOptions }),
     getValue
 });
 

package/src/components/ui/WysiwygEditor/extensions/font-size.js

@@ -24,7 +24,7 @@ export const FontSize = Extension.create({
     },
     addCommands() {
         return {
-            setFontSize: fontSize => ({ chain }) => chain().setMark(MarkType.TEXT_STYLE, { fontSize }).run(),
+            setFontSize: fontSize => ({ commands }) => commands.setMark(MarkType.TEXT_STYLE, { fontSize }),
             unsetFontSize: () => ({ chain }) => chain()
                 .setMark(MarkType.TEXT_STYLE, { fontSize: null })
                 .removeEmptyTextStyle()

package/src/components/ui/WysiwygEditor/extensions/image.js

@@ -1,4 +1,5 @@
 import { Image as ImageToExtend } from '@tiptap/extension-image';
+import { NodeType } from '../constants';
 
 export const Image = ImageToExtend
     .extend({
@@ -13,7 +14,20 @@ export const Image = ImageToExtend
                 },
             };
         },
+        addCommands() {
+            return {
+                ...this.parent?.(),
+                toggleResponsive: (value = false) => ({ commands }) => {
+                    value === true
+                        ? commands.updateAttributes(NodeType.IMAGE, { class: 'responsive' })
+                        : commands.updateAttributes(NodeType.IMAGE, { class: null });
+                },
+                setStyles: (styles) => ({ commands }) => {
+                    const styleObjToString = () => Object
+                        .entries(styles)
+                        .reduce((acc, [styleName, style]) => `${acc}${styleName}:${style};`, '');
+                    commands.updateAttributes(NodeType.IMAGE, { style: styleObjToString() });
+                }
+            };
+        }
     })
-    .configure({
-        inline: true,
-    });

package/src/components/ui/WysiwygEditor/extensions/text-style.js

@@ -6,9 +6,6 @@ export const TextStyle = TextStyleToExtend.extend({
             ...this.parent?.(),
             class: {
                 default: null
-            },
-            style: {
-                default: null
             }
         }
     }

package/src/components/ui/WysiwygEditor/renders/Image.vue

@@ -0,0 +1,162 @@
+<template>
+    <with-popover :show.sync="isPopoverShown" auto-width>
+        <template #button="{ togglePopover }">
+            <button :title="title" class="btn btn-small btn-outline btn-icon" @click="togglePopover">
+                <div class="icon">
+                    <i class="mdi" :class="icon"></i>
+                </div>
+            </button>
+        </template>
+        <div class="w-f2">
+            <div class="row row-hgap-3 mar-bot-l1">
+                <div class="col col-vmid text-truncate">
+                    <div class="form-label form-label-xsmall text-truncate">Url</div>
+                </div>
+                <div class="col col-vmid col-12-12">
+                    <div class="form-control form-control-icon-right w-12-12">
+                        <input-autocomplete v-model.trim.lazy="image.url" size="small" @change="onChange" />
+                        <div class="icon">
+                            <i class="mdi mdi-folder cursor-pointer color-grey" @click="browse" />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <div class="row row-hgap-3 mar-bot-l1">
+                <div class="col col-vmid text-truncate">
+                    <label for="resp" class="form-label form-label-small text-truncate">
+                        Отзывчивое изображение
+                    </label>
+                </div>
+                <div class="col col-vmid col-auto">
+                    <input
+                        id="resp"
+                        v-model="image.isResponsive"
+                        type="checkbox"
+                        class="switch switch-small pull-right">
+                </div>
+            </div>
+
+            <div class="row row-hgap-l1 mar-bot-l1">
+                <div class="col">
+                    <div class="row row-hgap-3">
+                        <div class="col col-vmid text-truncate">
+                            <div class="form-label form-label-xsmall text-truncate">Ширина</div>
+                        </div>
+                        <div class="col col-vmid col-12-12">
+                            <input-units
+                                v-model="image.width"
+                                :units="$options.static.SizeUnits"
+                                :disabled="image.isResponsive"
+                                size="small"
+                                @change="onChange">
+                            </input-units>
+                        </div>
+                    </div>
+                </div>
+                <div class="col">
+                    <div class="row row-hgap-3">
+                        <div class="col col-vmid text-truncate">
+                            <div class="form-label form-label-xsmall text-truncate">Высота</div>
+                        </div>
+                        <div class="col col-vmid col-12-12">
+                            <input-units
+                                v-model="image.height"
+                                :units="$options.static.SizeUnits"
+                                :disabled="image.isResponsive"
+                                size="small"
+                                @change="onChange">
+                            </input-units>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </with-popover>
+</template>
+
+<script>
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import InputUnits from '../../InputUnits.vue';
+import WithPopover from './components/WithPopover.vue';
+import { useRender } from './mixins';
+
+const SizeUnits = ["rem", "em", "%", "px", "vh", "vw"];
+
+const defaultImgSettings = {
+    url: '',
+    isResponsive: true,
+    height: '100%',
+    width: '100%'
+};
+
+const cssStrToObj = (str) => {
+    if (str == null) {
+        return {};
+    }
+    return str.split(';').reduce((obj, style) => {
+        const [name, val] = style.split(':').map((el) => el.trim());
+        if (name != null && val != null) {
+            obj[name] = val;
+        }
+        return obj;
+    }, {});
+}
+
+export default {
+    components: {
+        InputAutocomplete,
+        InputUnits,
+        WithPopover
+    },
+    mixins: [useRender()],
+    data: () => ({
+        isPopoverShown: false,
+        image: { ...defaultImgSettings }
+    }),
+    watch: {
+        isPopoverShown(isShown) {
+            if (isShown === false) {
+                this.image = { ...defaultImgSettings };
+                return;
+            }
+
+            this.setImageSettings();
+        }
+    },
+    static: {
+      SizeUnits
+    },
+    methods: {
+        setImageSettings() {
+            const attrs = this.tool.getValue();
+
+            if (JSON.stringify(attrs) === '{}') {
+                return;
+            }
+
+            const { src: url, class: className, style } = attrs;
+            const { width, height } = cssStrToObj(style);
+
+            this.image = {
+                ...defaultImgSettings,
+                url,
+                isResponsive: className?.includes?.('responsive') ?? false,
+                ...(width && { width }),
+                ...(height && { height })
+            };
+        },
+        async browse() {
+            await this.tool.exec(this.image);
+            const { src: url } = this.tool.getValue();
+
+            this.image = { ...this.image, url };
+            this.emitExecuted();
+        },
+        onChange() {
+            this.tool.exec(this.image);
+            this.emitExecuted();
+        }
+    }
+};
+</script>

package/src/components/ui/WysiwygEditor/renders/InputUnits.vue

@@ -8,7 +8,6 @@
 
 <script>
 import InputUnits from '../../InputUnits.vue';
-
 import { useRender } from './mixins';
 
 export default {

package/src/components/ui/WysiwygEditor/renders/Link.vue

@@ -1,63 +1,58 @@
 <template>
-    <div :data-popover="popoverTargetId" :title="title">
-        <button class="btn btn-small btn-outline btn-icon" @click="togglePopover">
-            <div class="icon">
-                <i class="mdi" :class="icon"></i>
-            </div>
-        </button>
-        <popover :show="popoverShow" v-bind="popoverOptions">
-            <div class="dropdown pad-l1 pad-top-l2">
-                <div class="close pos-abs pos-top-right mar-2" @click="togglePopover">
-                    <i class="mdi mdi-close color-grey" />
-                </div>
-                <div class="row row-hgap-3 mar-bot-l1">
-                    <div class="col col-vmid text-truncate">
-                        <div class="form-label form-label-xsmall text-truncate">Url</div>
-                    </div>
-                    <div class="col col-vmid col-12-12">
-                        <input-autocomplete v-model="url" class="w-100" size="small" />
-                    </div>
+    <with-popover :show.sync="isPopoverShown">
+        <template #button="{ togglePopover }">
+            <button :title="title" class="btn btn-small btn-outline btn-icon" @click="togglePopover">
+                <div class="icon">
+                    <i class="mdi" :class="icon"></i>
                 </div>
-                <div class="row row-hgap-3 mar-bot-l1">
-                    <div class="col col-vmid text-truncate">
-                        <div class="form-label form-label-xsmall text-truncate">Target</div>
-                    </div>
-                    <div class="col col-vmid col-12-12">
-                        <ui-select
-                            v-model="target"
-                            :options="$options.static.TargetTypeOptions"
-                            class="w-100"
-                            size="small" />
-                    </div>
-                </div>
-                <button class="btn btn-outline btn-small w-100" @click="execute">Применить</button>
+            </button>
+        </template>
+        <div class="row row-hgap-3 mar-bot-l1">
+            <div class="col col-vmid text-truncate">
+                <div class="form-label form-label-xsmall text-truncate">Url</div>
+            </div>
+            <div class="col col-vmid col-12-12">
+                <input-autocomplete v-model="url" class="w-100" size="small" />
             </div>
-        </popover>
-    </div>
+        </div>
+        <div class="row row-hgap-3 mar-bot-l1">
+            <div class="col col-vmid text-truncate">
+                <div class="form-label form-label-xsmall text-truncate">Target</div>
+            </div>
+            <div class="col col-vmid col-12-12">
+                <ui-select
+                    v-model="target"
+                    :options="$options.static.TargetTypeOptions"
+                    class="w-100"
+                    size="small" />
+            </div>
+        </div>
+        <button class="btn btn-outline btn-small w-100" @click="execute">Применить</button>
+    </with-popover>
 </template>
 
 <script>
-import Popover from '../../Popover.vue';
 import InputAutocomplete from '../../InputAutocomplete.vue';
 import UiSelect from '../../Select.vue';
-import WithPopover from '../../utils/WithPopover';
+import WithPopover from './components/WithPopover.vue';
 import { useRender } from './mixins';
 
 const TargetType = {
     BLANK: '_blank',
     SELF: '_self'
-}
+};
 
 export default {
     components: {
-        Popover,
+        WithPopover,
         InputAutocomplete,
         UiSelect
     },
-    mixins: [useRender(), WithPopover],
+    mixins: [useRender()],
     data: () => ({
         url: '',
-        target: null
+        target: null,
+        isPopoverShown: false
     }),
     static: {
         TargetTypeOptions: [
@@ -66,7 +61,7 @@ export default {
         ]
     },
     watch: {
-        popoverShow(isShown) {
+        isPopoverShown(isShown) {
             if (isShown) {
                 const { url = '', target = TargetType.BLANK } = this.tool.getValue();
                 this.url = url;
@@ -79,7 +74,7 @@ export default {
             const { tool, url, target } = this;
             tool.exec({ url, target });
 
-            this.popoverShow = false;
+            this.isPopoverShown = false;
             this.emitExecuted();
         }
     }

package/src/components/ui/WysiwygEditor/renders/components/WithPopover.vue

@@ -0,0 +1,35 @@
+<template>
+    <div :data-popover="popoverTargetId">
+        <slot name="button" v-bind="{ togglePopover }"></slot>
+
+        <popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <div class="dropdown pad-l1 pad-top-l2">
+                <div class="close pos-abs pos-top-right mar-2" @click="togglePopover">
+                    <i class="mdi mdi-close color-grey" />
+                </div>
+                <slot></slot>
+            </div>
+        </popover>
+    </div>
+</template>
+
+<script>
+import Popover from '../../../Popover.vue';
+import WithPopover from '../../../utils/WithPopover';
+
+export default {
+    components: { Popover },
+    mixins: [WithPopover],
+    props: {
+        show: {
+            type: Boolean,
+            default: false
+        }
+    },
+    watch: {
+        popoverShow(val) {
+            this.$nextTick(() => this.$emit('update:show', val));
+        }
+    }
+};
+</script>

package/src/components/ui/WysiwygEditor/renders/index.d.ts

@@ -4,5 +4,5 @@ export { default as InputUnits } from './InputUnits.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
 export { default as ToolbarPopover } from './ToolbarPopover.vue';
 export { default as InputAuto } from './InputAuto.vue';
-export { default as InputBrowse } from './InputBrowse.vue';
 export { default as Link } from './Link.vue';
+export { default as Image } from './Image.vue';

package/src/components/ui/WysiwygEditor/renders/index.js

@@ -4,5 +4,5 @@ export { default as InputUnits } from './InputUnits.vue';
 export { default as ColorPicker } from './ColorPicker.vue';
 export { default as ToolbarPopover } from './ToolbarPopover.vue';
 export { default as InputAuto } from './InputAuto.vue';
-export { default as InputBrowse } from './InputBrowse.vue';
 export { default as Link } from './Link.vue';
+export { default as Image } from './Image.vue';

package/src/components/ui/WysiwygEditor/tools-and-commands.js

@@ -10,8 +10,8 @@ import {
     createSelectTool,
     createToolbarPopoverTool,
     createInputAutoTool,
-    createInputBrowseTool,
-    createLinkTool
+    createLinkTool,
+    createImageTool,
 } from './constants';
 
 export const CommandMap = {
@@ -382,32 +382,6 @@ export const TableOptionsMap = {
     })
 };
 
-export const ImageOptionsMap = {
-    [ToolType.INSERT_IMAGE]: createInputBrowseTool({
-        name: ToolType.INSERT_IMAGE,
-        title: 'Вставить изображение',
-        async exec(fromInputUrl) {
-            const setImage = (url) => {
-                this.editor.chain().focus().setImage({ src: url }).run();
-            };
-        
-            if (fromInputUrl != null) {
-                setImage(fromInputUrl);
-                return;
-            }
-        
-            const imageUrl = await this.getImageUrl();
-        
-            if (imageUrl != null) {
-                setImage(imageUrl);
-            }
-        },
-        getValue() {
-            return this.editor.getAttributes(NodeType.IMAGE).src;
-        }
-    })
-};
-
 export const ToolsMap = {
     [ToolType.UNDO]: createButtonTool({
         name: ToolType.UNDO,
@@ -537,11 +511,35 @@ export const ToolsMap = {
             return this.editor.isActive(MarkType.CODE);
         }
     }),
-    [ToolType.IMAGE]: createToolbarPopoverTool({
+    [ToolType.IMAGE]: createImageTool({
         name: ToolType.IMAGE,
         icon: 'image-plus',
         title: 'Изображение',
-        options: Object.values(ImageOptionsMap)
+        async exec({ url = null, isResponsive, width, height }) {
+            const setImage = (src) => {
+                const editor = this.editor.chain().setImage({ src });
+            
+                if (isResponsive === false) {
+                    editor.setStyles({ width, height }).toggleResponsive().run();
+                    return;
+                }
+                editor.run();
+            };
+        
+            if ([null, ''].includes(url) === false) {
+                setImage(url);
+                return;
+            }
+        
+            const imageUrl = await this.getImageUrl();
+        
+            if (imageUrl != null) {
+                setImage(imageUrl);
+            }
+        },
+        getValue() {
+            return this.editor.getAttributes(NodeType.IMAGE);
+        }
     }),
     [ToolType.ORDERED_LIST]: createButtonTool({
         name: ToolType.ORDERED_LIST,

package/src/components/ui/WysiwygEditor/utils.js

@@ -69,4 +69,4 @@ export const bindContext = (value, context) => {
         
         return { ...acc, [propName]: propValue };
     }, {});
-}
+};

package/src/components/ui/WysiwygEditor/renders/InputBrowse.vue

@@ -1,35 +0,0 @@
-<template>
-    <div :title="title" class="form-control form-control-icon-right w-12-12">
-        <input-autocomplete
-            v-bind="{ value, disabled: !isEnabled, size: 'small' }"
-            @change="onChange" />
-        <div class="icon">
-            <i class="mdi mdi-folder cursor-pointer color-grey" @click="browse" />
-        </div>
-    </div>
-</template>
-
-<script>
-import InputAutocomplete from '../../InputAutocomplete.vue';
-import { useRender } from './mixins';
-
-export default {
-    components: { InputAutocomplete },
-    mixins: [useRender()],
-    computed: {
-        value() {
-            return this.tool.getValue();
-        }
-    },
-    methods: {
-        onChange(value) {
-            this.tool.exec(value);
-            this.emitExecuted();
-        },
-        async browse() {
-            await this.tool.exec();
-            this.emitExecuted();
-        }
-    }
-};
-</script>