goodteditor-ui 1.0.52 → 1.0.54

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.52",
+    "version": "1.0.54",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
-        "serve": "npx vue-styleguidist server",
-        "build": "npx vue-styleguidist build",
+        "serve": "vue-cli-service styleguidist",
+        "build": "vue-cli-service styleguidist:build",
         "dev": "vue-cli-service serve",
         "docs:build": "set NODE_ENV=development && npm run build",
         "docs:deploy": "npx netlify deploy --dir=docs --prod"
@@ -29,18 +29,20 @@
     },
     "devDependencies": {
         "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-        "@vue/cli-plugin-babel": "^4.5.11",
-        "@vue/cli-plugin-eslint": "^4.5.11",
-        "@vue/cli-service": "^4.5.11",
-        "axios": "^0.24.0",
+        "@vue/cli-plugin-babel": "^5.0.8",
+        "@vue/cli-plugin-eslint": "^5.0.8",
+        "@vue/cli-service": "^5.0.8",
+        "axios": "^1.0.0",
         "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-vue": "^6.2.2",
+        "eslint": "^7.5.0",
+        "eslint-plugin-vue": "^9.25.0",
         "less": "^3.13.1",
-        "less-loader": "^5.0.0",
+        "less-loader": "^7.0.0",
         "netlify-cli": "^5.0.1",
-        "vue-styleguidist": "4.35.0",
-        "vue-template-compiler": "^2.6.12"
+        "vue-cli-plugin-styleguidist": "~4.72.4",
+        "vue-styleguidist": "^4.72.4",
+        "vue-template-compiler": "^2.6.12",
+        "webpack": "^5.91.0"
     },
     "peerDependencies": {
         "vue": "^2.6.12",

package/src/components/ui/WysiwygEditor/WysiwygEditor.md

@@ -2,7 +2,7 @@ Simple example
 ```vue
 <template>
     <div class="pad-l5">
-        <ui-wysiwyg-editor v-model="model"></ui-wysiwyg-editor>
+        <ui-wysiwyg-editor v-model="model" :autofocus="false"></ui-wysiwyg-editor>
     </div>
 </template>
 <script>
@@ -28,6 +28,7 @@ Advanced example. Using custom tool groups, bubble menu and 'change' event inste
                 value: model,
                 tools,
                 focusVisible: false,
+                autoFocus: false,
                 bubbleMenu: { isEnabled: true}
             }"
             @change="onChange"></ui-wysiwyg-editor>

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

@@ -15,7 +15,7 @@
                         <div
                             v-for="({ title, group }, groupIndex) of toolGroups"
                             :key="groupIndex"
-                            class="col col-vmid col-auto">
+                            class="col col-vbot col-auto">
                             <div class="d-flex flex-col flex-v-center">
                                 <div v-if="resolveGroupTitle(title, groupIndex) !== ''" class="group-header">
                                     <!--
@@ -64,7 +64,7 @@ import { debounce } from '../utils/Helpers';
 import Grid from '../Grid.vue';
 import { resolveExtensions } from './extensions';
 import { buildToolGroups, bindContext } from './utils';
-import { DefaultTools } from './constants';
+import { DefaultTools, WysiwygAutofocus } from './constants';
 
 /**
  * @typedef {Omit<import('@tiptap/extension-bubble-menu').BubbleMenuOptions, 'element'>} BubbleMenuOptions
@@ -119,6 +119,13 @@ export default {
         focusVisible: {
             type: Boolean,
             default: true
+        },
+        /**
+         * whether to force the cursor to jump in the editor on initialization
+         */
+        autofocus: {
+            type: [Boolean, String, Number],
+            default: WysiwygAutofocus.END
         }
     },
     data: () => ({
@@ -174,20 +181,21 @@ export default {
         this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
     },
     mounted() {
-        const { isEnabled: isBubbleMenuEnabled, ...bubbleMenuOptions } = this.bubbleMenu;
+        const { $refs, value, bubbleMenu, autofocus, editorClass, onSelectionUpdateDebounced } = this;
+        const { isEnabled: isBubbleMenuEnabled, ...bubbleMenuOptions } = bubbleMenu;
 
         this.editor = new Editor({
-            content: this.value,
+            content: value,
             extensions: resolveExtensions({
                 bubbleMenu: {
-                    element: isBubbleMenuEnabled ? this.$refs.menu : null,
+                    element: isBubbleMenuEnabled ? $refs.menu : null,
                     ...bubbleMenuOptions
                 }
             }),
-            autofocus: 'end',
+            autofocus,
             editorProps: {
                 attributes: {
-                    class: this.editorClass,
+                    class: editorClass,
                     style: 'min-height: 100%; height: 0;'
                 }
             },
@@ -197,7 +205,7 @@ export default {
             onBlur: () => {
                 this.onChange();
             },
-            onSelectionUpdate: this.onSelectionUpdateDebounced
+            onSelectionUpdate: onSelectionUpdateDebounced
         });
     },
     activated() {

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

@@ -9,7 +9,7 @@ import {
     Image
 } from './renders';
 
-export type Render = Readonly<{
+export type WysiwygRender = Readonly<{
     BUTTON: Button;
     COLOR_PICKER: ColorPicker;
     INPUT_UNITS: InputUnits;
@@ -127,6 +127,14 @@ export type ToolType = Readonly<{
     INSERT_IMAGE: 'insertImage'
 }>;
 
+export type WysiwygAutofocus = Readonly<{
+    START: 'start',
+    END: 'end',
+    ALL: 'all',
+    ENABLED: true,
+    DISABLED: false
+}>;
+
 export type DefaultTools = Array<{
    title: string,
    group: Array<string|ITool>

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

@@ -14,7 +14,8 @@ import {
  * @typedef {import('./constants').MarkType} MarkType
  * @typedef {import('./constants').CommandType} CommandType
  * @typedef {import('./constants').ToolType} ToolType
- * @typedef {import('./constants').Render} Render
+ * @typedef {import('./constants').WysiwygRender} WysiwygRender
+ * @typedef {import('./constants').WysiwygAutofocus} WysiwygAutofocus
  * @typedef {import('./constants').ICommand} ICommand
  * @typedef {import('./constants').ITool} ITool
  */
@@ -147,9 +148,9 @@ export const createCommand = ({
 });
 
 /**
- * @type Render
+ * @type WysiwygRender
  */
-export const Render = Object.freeze({
+export const WysiwygRender = Object.freeze({
     BUTTON: Button,
     COLOR_PICKER: ColorPicker,
     INPUT_UNITS: InputUnits,
@@ -166,7 +167,7 @@ export const Render = Object.freeze({
  */
 export const createTool = ({
     name = '',
-    render = Render.BUTTON,
+    render = WysiwygRender.BUTTON,
     title = 'Unknown tool',
     icon = 'help-circle-outline',
     exec = () => {},
@@ -184,6 +185,15 @@ export const createTool = ({
     ...optionalRest
 });
 
+/** @type WysiwygAutofocus */
+export const WysiwygAutofocus = Object.freeze({
+    START: 'start',
+    END: 'end',
+    ALL: 'all',
+    ENABLED: true,
+    DISABLED: false
+});
+
 export const DefaultTools = [
     {
         title: 'Оформление',

package/src/components/ui/WysiwygEditor/renders/mixins/RenderMixin.js

@@ -44,3 +44,5 @@ export const useRender = () => ({
         }
     }
 });
+
+export const RenderMixinTypes = undefined;

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

@@ -3,7 +3,7 @@ import {
     MarkType,
     CommandType,
     ToolType,
-    Render,
+    WysiwygRender,
     createTool,
     createCommand,
 } from './constants';
@@ -409,7 +409,7 @@ export const ToolsMap = {
     }),
     [ToolType.PARAGRAPH_STYLE]: createTool({
         name: ToolType.PARAGRAPH_STYLE,
-        render: Render.SELECT,
+        render: WysiwygRender.SELECT,
         title: 'Стиль параграфа',
         exec(command) {
             if (command.name in CommandMap && command.isEnabled()) {
@@ -432,7 +432,7 @@ export const ToolsMap = {
     }),
     [ToolType.FONT_SIZE]: createTool({
         name: ToolType.FONT_SIZE,
-        render: Render.INPUT_UNITS,
+        render: WysiwygRender.INPUT_UNITS,
         title: 'Размер шрифта',
         exec(value) {
             this.editor.commands.setFontSize(value);
@@ -453,7 +453,7 @@ export const ToolsMap = {
     }),
     [ToolType.TEXT_COLOR]: createTool({
         name: ToolType.TEXT_COLOR,
-        render: Render.COLOR_PICKER,
+        render: WysiwygRender.COLOR_PICKER,
         icon: 'format-color-fill',
         title: 'Цвет',
         exec(value) {
@@ -465,7 +465,7 @@ export const ToolsMap = {
     }),
     [ToolType.FONT_FAMILY]: createTool({
         name: ToolType.FONT_FAMILY,
-        render: Render.INPUT_AUTO,
+        render: WysiwygRender.INPUT_AUTO,
         title: 'Семейство шрифта',
         exec(value) {
             this.editor.commands.setFontFamily(value);
@@ -511,7 +511,7 @@ export const ToolsMap = {
     }),
     [ToolType.IMAGE]: createTool({
         name: ToolType.IMAGE,
-        render: Render.IMAGE,
+        render: WysiwygRender.IMAGE,
         icon: 'image-plus',
         title: 'Изображение',
         async exec({ url = null, isResponsive, align, width, height }) {
@@ -615,7 +615,7 @@ export const ToolsMap = {
     }),
     [ToolType.LINK]: createTool({
         name: ToolType.LINK,
-        render: Render.LINK,
+        render: WysiwygRender.LINK,
         icon: 'link-plus',
         title: 'Ссылка',
         getValue() {
@@ -694,7 +694,7 @@ export const ToolsMap = {
     }),
     [ToolType.TABLE]: createTool({
         name: ToolType.TABLE,
-        render: Render.TOOLBAR_POPOVER,
+        render: WysiwygRender.TOOLBAR_POPOVER,
         icon: 'table-plus',
         title: 'таблица',
         options: Object.values(TableOptionsMap)

package/vue.config.js

@@ -4,5 +4,5 @@ module.exports = {
         port: 3000
     },
     filenameHashing: true,
-    lintOnSave: true
+    lintOnSave: false
 };