goodteditor-ui 1.0.19 → 1.0.21

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.19",
+    "version": "1.0.21",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -13,6 +13,22 @@
         "notify": "node ./ci/teams-notify.js",
         "publish": "npm run docs:build && npm run docs:deploy && npm run notify"
     },
+    "dependencies": {
+        "@popperjs/core": "2.11.2",
+        "@tiptap/extension-color": "^2.0.0-beta.207",
+        "@tiptap/extension-font-family": "^2.0.0-beta.207",
+        "@tiptap/extension-image": "^2.0.0-beta.27",
+        "@tiptap/extension-link": "^2.0.0-beta.36",
+        "@tiptap/extension-table": "2.0.0-beta.48",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.20",
+        "@tiptap/extension-table-header": "^2.0.0-beta.22",
+        "@tiptap/extension-table-row": "^2.0.0-beta.19",
+        "@tiptap/extension-text-align": "^2.0.0-beta.207",
+        "@tiptap/extension-text-style": "^2.0.0-beta.207",
+        "@tiptap/extension-underline": "^2.0.0-beta.207",
+        "@tiptap/starter-kit": "^2.0.0-beta.183",
+        "@tiptap/vue-2": "^2.0.0-beta.84"
+    },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
         "@vue/cli-plugin-babel": "^4.5.11",
@@ -27,20 +43,7 @@
         "less-loader": "^5.0.0",
         "netlify-cli": "^5.0.1",
         "vue-styleguidist": "4.35.0",
-        "vue-template-compiler": "^2.6.12",
-        "@tiptap/extension-color": "^2.0.0-beta.207",
-        "@tiptap/extension-font-family": "^2.0.0-beta.207",
-        "@tiptap/extension-image": "^2.0.0-beta.27",
-        "@tiptap/extension-link": "^2.0.0-beta.36",
-        "@tiptap/extension-table": "2.0.0-beta.48",
-        "@tiptap/extension-table-cell": "^2.0.0-beta.20",
-        "@tiptap/extension-table-header": "^2.0.0-beta.22",
-        "@tiptap/extension-table-row": "^2.0.0-beta.19",
-        "@tiptap/extension-text-align": "^2.0.0-beta.207",
-        "@tiptap/extension-text-style": "^2.0.0-beta.207",
-        "@tiptap/extension-underline": "^2.0.0-beta.207",
-        "@tiptap/starter-kit": "^2.0.0-beta.183",
-        "@tiptap/vue-2": "^2.0.0-beta.84"
+        "vue-template-compiler": "^2.6.12"
     },
     "peerDependencies": {
         "vue": "^2.6.12"
@@ -63,8 +66,5 @@
         "> 1%",
         "last 2 versions",
         "not dead"
-    ],
-    "dependencies": {
-        "@popperjs/core": "2.11.2"
-    }
+    ]
 }

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

@@ -1,4 +1,4 @@
-import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse } from './renders';
+import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
 
 export type Render = Readonly<{
     BUTTON: Button;
@@ -8,6 +8,7 @@ export type Render = Readonly<{
     TOOLBAR_POPOVER: ToolbarPopover;
     INPUT_AUTO: InputAuto;
     INPUT_BROWSE: InputBrowse;
+    LINK: Link;
 }>;
 
 export type CommandDef = {
@@ -23,10 +24,10 @@ export type ToolDef = {
     render: Render;
     title: String;
     icon: String;
-    exec: (value?: String) => void;
+    exec: (value?: String | Record<String, any>) => void;
     isActive: () => Boolean;
     isEnabled: () => Boolean;
-    getValue?: () => String;
+    getValue?: () => String | Record<String, any>;
     options?: Array<String | ToolDef | CommandDef>;
     units?: Array<String>
 };
@@ -114,6 +115,5 @@ export type ToolType = Readonly<{
     ALIGN_V_BOT: 'alignVBot',
     TOGGLE_BORDERS: 'toggleBorders',
     TOGGLE_ZEBRA: 'toggleZebra',
-    INSERT_IMAGE: 'insertImage',
-    INSERT_LINK: 'insertLink'
+    INSERT_IMAGE: 'insertImage'
 }>;

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

@@ -1,4 +1,4 @@
-import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse } from './renders';
+import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse, Link } from './renders';
 
 /**
  * @typedef {import('./WysiwygEditor').NodeType} NodeType
@@ -116,8 +116,7 @@ export const ToolType = Object.freeze({
     TOGGLE_BORDERS: 'toggleBorders',
     TOGGLE_ZEBRA: 'toggleZebra',
     /** image options */
-    INSERT_IMAGE: 'insertImage',
-    INSERT_LINK: 'insertLink'
+    INSERT_IMAGE: 'insertImage'
 });
 
 /**
@@ -148,7 +147,8 @@ export const Render = Object.freeze({
     SELECT: Select,
     TOOLBAR_POPOVER: ToolbarPopover,
     INPUT_AUTO: InputAuto,
-    INPUT_BROWSE: InputBrowse
+    INPUT_BROWSE: InputBrowse,
+    LINK: Link
 });
 
 /**
@@ -236,6 +236,15 @@ export const createInputBrowseTool = ({ getValue = () => null, ...toolOptions })
     getValue
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
+export const createLinkTool = ({ getValue = () => null, ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.LINK, ...toolOptions }),
+    getValue
+});
+
 export const DefaultTools = [
     [ToolType.PARAGRAPH_STYLE, ToolType.TEXT_COLOR, ToolType.FONT_SIZE, ToolType.FONT_FAMILY, ToolType.BLOCKQUOTE],
     [ToolType.BOLD, ToolType.ITALIC, ToolType.UNDERLINE, ToolType.STRIKE, ToolType.CODE],

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

@@ -1,15 +1,19 @@
 import { Image as ImageToExtend } from '@tiptap/extension-image';
 
-export const Image = ImageToExtend.extend({
-    addAttributes() {
-        return {
-            ...this.parent?.(),
-            class: {
-                default: 'responsive'
-            },
-            style: {
-                default: null
-            }
-        }
-    }
-})
+export const Image = ImageToExtend
+    .extend({
+        addAttributes() {
+            return {
+                ...this.parent?.(),
+                class: {
+                    default: 'responsive',
+                },
+                style: {
+                    default: null,
+                },
+            };
+        },
+    })
+    .configure({
+        inline: true,
+    });

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

@@ -1,5 +1,6 @@
 import { TextAlign as TextAlignToExtend } from '@tiptap/extension-text-align';
+import { NodeType, MarkType } from '../constants';
 
 export const TextAlign = TextAlignToExtend.configure({
-    types: ['heading', 'paragraph', 'link', 'codeBlock', 'blockquote']
+    types: [NodeType.HEADING, NodeType.PARAGRAPH, MarkType.LINK, NodeType.CODE_BLOCK, NodeType.BLOCKQUOTE]
 });

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

@@ -1,14 +1,16 @@
 <template>
-    <button
-        :class="{ 'btn-outline': !isActive, 'btn-primary': isActive }"
-        :title="title"
-        :disabled="!isEnabled"
-        class="btn btn-small btn-icon"
-        @click.stop="onClick">
-        <div class="icon">
-            <i :class="icon" class="mdi"></i>
-        </div>
-    </button>
+    <div :title="title">
+        <button
+            :class="{ 'btn-outline': !isActive, 'btn-primary': isActive }"
+            :disabled="!isEnabled"
+            class="btn btn-small btn-icon"
+            @click.stop="onClick">
+            <div class="icon">
+                <i :class="icon" class="mdi"></i>
+            </div>
+        </button>
+    </div>
+
 </template>
 
 <script>

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

@@ -1,7 +1,6 @@
 <template>
-    <div :data-popover="popoverTargetId">
+    <div :data-popover="popoverTargetId" :title="title">
         <button
-            :title="title"
             class="btn btn-small btn-outline btn-icon"
             @click="togglePopover">
             <div class="icon">

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

@@ -1,8 +1,9 @@
 <template>
-    <input-autocomplete
-        v-bind="{ value, options: tool.options, title, disabled: !isEnabled, size: 'small' }"
-        class="autocomplete-tool"
-        @input="onInput" />
+    <div :title="title" class="autocomplete-tool">
+        <input-autocomplete
+            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
+            @input="onInput" />
+    </div>
 </template>
 
 <script>

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

@@ -1,7 +1,7 @@
 <template>
-    <div class="form-control form-control-icon-right w-12-12">
+    <div :title="title" class="form-control form-control-icon-right w-12-12">
         <input-autocomplete
-            v-bind="{ value, title, disabled: !isEnabled, size: 'small' }"
+            v-bind="{ value, disabled: !isEnabled, size: 'small' }"
             @change="onChange" />
         <div class="icon">
             <i class="mdi mdi-folder cursor-pointer color-grey" @click="browse" />

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

@@ -1,8 +1,9 @@
 <template>
-    <input-units
-        v-bind="{ value, units, title, size: 'small', disabled: !isEnabled }"
-        class="input-units-tool"
-        @change="onChange" />
+    <div :title="title" class="input-units-tool">
+        <input-units
+            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
+            @change="onChange" />
+    </div>
 </template>
 
 <script>

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

@@ -0,0 +1,87 @@
+<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>
+                </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>
+            </div>
+        </popover>
+    </div>
+</template>
+
+<script>
+import Popover from '../../Popover.vue';
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import UiSelect from '../../Select.vue';
+import WithPopover from '../../utils/WithPopover';
+import { useRender } from './mixins';
+
+const TargetType = {
+    BLANK: '_blank',
+    SELF: '_self'
+}
+
+export default {
+    components: {
+        Popover,
+        InputAutocomplete,
+        UiSelect
+    },
+    mixins: [useRender(), WithPopover],
+    data: () => ({
+        url: '',
+        target: null
+    }),
+    static: {
+        TargetTypeOptions: [
+            { label: 'blank', value: TargetType.BLANK },
+            { label: 'self', value: TargetType.SELF }
+        ]
+    },
+    watch: {
+        popoverShow(isShown) {
+            if (isShown) {
+                const { url = '', target = TargetType.BLANK } = this.tool.getValue();
+                this.url = url;
+                this.target = target;
+            }
+        }
+    },
+    methods: {
+        execute() {
+            const { tool, url, target } = this;
+            tool.exec({ url, target });
+
+            this.popoverShow = false;
+            this.emitExecuted();
+        }
+    }
+};
+</script>

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

@@ -1,8 +1,10 @@
 <template>
-    <ui-select
-        v-bind="{ value, options, valueObjects, title, disabled: !isEnabled, size: 'small' }"
-        class="select-tool"
-        @change="onChange" />
+    <div :title="title" class="select-tool">
+        <ui-select
+            v-bind="{ value, options, valueObjects, disabled: !isEnabled, size: 'small' }"
+            class="w-100"
+            @change="onChange" />
+    </div>
 </template>
 
 <script>

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

@@ -1,7 +1,6 @@
 <template>
-    <div :data-popover="popoverTargetId">
+    <div :data-popover="popoverTargetId" :title="title">
         <button
-            :title="title"
             class="btn btn-small btn-outline btn-icon"
             @click="togglePopover">
             <div class="icon">

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

@@ -5,3 +5,4 @@ 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';

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

@@ -5,3 +5,4 @@ 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';

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

@@ -10,7 +10,8 @@ import {
     createSelectTool,
     createToolbarPopoverTool,
     createInputAutoTool,
-    createInputBrowseTool
+    createInputBrowseTool,
+    createLinkTool
 } from './constants';
 
 export const CommandMap = {
@@ -32,7 +33,7 @@ export const CommandMap = {
     }),
     [CommandType.HEADING_1]: createCommand({
         name: CommandType.HEADING_1,
-        title: 'Заголовок 1',
+        title: 'Заголовок 1 (h1)',
         exec() {
             this.editor
                 .chain()
@@ -47,7 +48,7 @@ export const CommandMap = {
     }),
     [CommandType.HEADING_2]: createCommand({
         name: CommandType.HEADING_2,
-        title: 'Заголовок 2',
+        title: 'Заголовок 2 (h2)',
         exec() {
             this.editor
                 .chain()
@@ -62,7 +63,7 @@ export const CommandMap = {
     }),
     [CommandType.HEADING_3]: createCommand({
         name: CommandType.HEADING_3,
-        title: 'Заголовок 3',
+        title: 'Заголовок 3 (h3)',
         exec() {
             this.editor
                 .chain()
@@ -77,7 +78,7 @@ export const CommandMap = {
     }),
     [CommandType.HEADING_4]: createCommand({
         name: CommandType.HEADING_4,
-        title: 'Заголовок 4',
+        title: 'Заголовок 4 (h4)',
         exec() {
             this.editor
                 .chain()
@@ -407,40 +408,6 @@ export const ImageOptionsMap = {
     })
 };
 
-export const LinkOptionsMap = {
-    [ToolType.INSERT_LINK]: createInputAutoTool({
-        name: ToolType.INSERT_LINK,
-        title: 'Вставить ссылку',
-        exec(url) {
-            const { editor } = this;
-            
-            if (url === '') {
-                editor
-                    .chain()
-                    .focus()
-                    .extendMarkRange(MarkType.LINK)
-                    .unsetLink()
-                    .run();
-        
-                return;
-            }
-    
-            editor
-                .chain()
-                .focus()
-                .extendMarkRange(MarkType.LINK)
-                .setLink({ href: url })
-                .run();
-        },
-        getValue() {
-            return this.editor.getAttributes(MarkType.LINK).href;
-        },
-        isEnabled() {
-            return this.editor.can().setLink();
-        },
-    })
-}
-
 export const ToolsMap = {
     [ToolType.UNDO]: createButtonTool({
         name: ToolType.UNDO,
@@ -642,11 +609,39 @@ export const ToolsMap = {
             return this.editor.can().setHorizontalRule();
         }
     }),
-    [ToolType.LINK]: createToolbarPopoverTool({
+    [ToolType.LINK]: createLinkTool({
         name: ToolType.LINK,
         icon: 'link-plus',
         title: 'Ссылка',
-        options: Object.values(LinkOptionsMap)
+        getValue() {
+            const linkAttrs = this.editor.getAttributes(MarkType.LINK);
+            const { href: url, target } = linkAttrs;
+            return { url, target };
+        },
+        isEnabled() {
+            return this.editor.can().setLink();
+        },
+        exec({ url, target }) {
+            const { editor } = this;
+        
+            if (url === '') {
+                editor
+                    .chain()
+                    .focus()
+                    .extendMarkRange(MarkType.LINK)
+                    .unsetLink()
+                    .run();
+            
+                return;
+            }
+        
+            editor
+                .chain()
+                .focus()
+                .extendMarkRange(MarkType.LINK)
+                .setLink({ href: url, ...(target && { target }) })
+                .run();
+        }
     }),
     [ToolType.BOLD]: createButtonTool({
         name: ToolType.BOLD,

package/src/components/ui/WysiwygEditor.vue

@@ -49,7 +49,7 @@
             </div>
         </template>
         <template #editor-content="{ style }">
-            <div class="editor-content pad-v-l1" :style="style">
+            <div :style="style" class="editor-content pad-v-l1" >
                 <div class="h-100">
                     <editor-content :editor="editor" class="h-100"/>
                 </div>
@@ -257,4 +257,15 @@ export default {
         margin-right: 0.25rem;
     }
 }
+
+::v-deep .ProseMirror {
+    & .ProseMirror-selectednode {
+        outline: 2px solid var(--color-focus);
+    }
+
+    li > p {
+        display: inline-block;
+        margin: 0;
+    }
+}
 </style>