goodteditor-ui 1.0.23 → 1.0.24

package/src/components/ui/WysiwygEditor.vue

@@ -1,271 +1,266 @@
-<template>
-    <grid class="editor" v-bind="$options.static.GridProps">
-        <template #editor-toolbar="{ style }">
-            <div :style="style" class="editor-toolbar">
-                <!--
-                @slot Toolbar slot
-                @binding {Tool[][]} toolGroups              2d matrix of using tools split into groups
-                @binding {Function} resolveGroupTitle       resolve group title function(index:number)
-                @binding {Function} buildToolBinds          build tool binds function(tool:Tool)
-                -->
-                <slot
-                    v-if="editor != null"
-                    name="toolbar"
-                    v-bind="{ toolGroups, resolveGroupTitle, buildToolBinds }">
-                    <div class="row row-gap-l1">
-                        <div
-                            v-for="(toolsGroup, groupIndex) of toolGroups"
-                            :key="groupIndex"
-                            class="col col-vmid col-auto">
-                            <div class="d-flex flex-col flex-v-center">
-                                <div class="group-header">
-                                    <!--
-                                    @slot Group header slot
-                                    @binding {number} groupIndex                index of the tools group
-                                    @binding {Function} resolveGroupTitle       resolve group title function(index:number)
-                                    -->
-                                    <slot name="group-header" v-bind="{ groupIndex, resolveGroupTitle }">
-                                        <div class="text-small text-center">{{ resolveGroupTitle(groupIndex) }}</div>
-                                    </slot>
-                                </div>
-                                <div>
-                                    <div
-                                        v-for="tool of toolsGroup"
-                                        :key="tool.name"
-                                        class="tool d-inline-block">
-                                        <!--
-                                        @slot Tool slot
-                                        @binding {Tool} tool         tool's already bound to editor context
-                                        -->
-                                        <slot name="tool" v-bind="buildToolBinds(tool)">
-                                            <component :is="tool.render" :tool="buildToolBinds(tool)" />
-                                        </slot>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </slot>
-            </div>
-        </template>
-        <template #editor-content="{ style }">
-            <div :style="style" class="editor-content pad-v-l1" >
-                <div class="h-100">
-                    <editor-content :editor="editor" class="h-100"/>
-                </div>
-            </div>
-        </template>
-    </grid>
-</template>
-
-<script>
-import { Editor, EditorContent } from '@tiptap/vue-2';
-
-import { debounce } from './utils/Helpers';
-import Grid from './Grid.vue';
-import * as Extensions from './WysiwygEditor/extensions';
-import { buildToolGroups, bindContext } from './WysiwygEditor/utils';
-import { DefaultTools, DefaultToolGroupsTitles } from './WysiwygEditor/constants';
-
-/**
- * @typedef {import('./WysiwygEditor/WysiwygEditor').ToolDef} Tool
- */
-
-export default {
-    components: {
-        Grid,
-        EditorContent
-    },
-    props: {
-        /**
-         * @model
-         */
-        value: {
-            type: String,
-            default: '',
-        },
-        /**
-         * 2d matrix of using tools
-         */
-        tools: {
-            type: Array,
-            default: () => [],
-            validator: (tools) => tools.flat().every((tool) =>
-                typeof tool === 'string' || (tool != null && typeof tool === 'object' && Array.isArray(tool) === false)
-            )
-        },
-        /**
-         * editor tool groups titles
-         */
-        groupsTitles: {
-            type: Array,
-            default: () => [],
-            validator: (titles) => titles.every((title) => typeof title === 'string')
-        },
-        /**
-         * @public
-         * func allows to receive image url from the environment
-         */
-        getImageUrl: {
-            type: Function,
-            default: async () => {}
-        }
-    },
-    data: () => ({
-        /** @type {Editor} */
-        editor: null,
-        /** @type {Tool[][]}  */
-        appliedTools: null,
-        /** @type {string[]}  */
-        appliedGroupsTitles: null,
-        /** @type {number}  */
-        caretPosition: 0
-    }),
-    computed: {
-        /**
-         * @return {string}
-         */
-        content() {
-            return this.editor?.getHTML() ?? '';
-        },
-        /**
-         * @return {Tool[][]}
-         */
-        toolGroups() {
-            return buildToolGroups(this.appliedTools);
-        }
-    },
-    static: {
-        GridProps: {
-            areas: [['editor-toolbar'], ['editor-content']],
-            rows: ['auto', '1fr'],
-            gap: ['0.5rem', 0]
-        }
-    },
-    watch: {
-        /**
-         * @param {string} value
-         */
-        value(value) {
-            const isSame = this.content === value;
-
-            if (isSame) {
-                return;
-            }
-
-            this.editor.commands.setContent(value, false);
-        },
-    },
-    created() {
-        this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
-        this.appliedTools = this.tools.length === 0 ? DefaultTools : this.tools;
-        this.appliedGroupsTitles = this.groupsTitles.length === 0 ? DefaultToolGroupsTitles : this.groupsTitles;
-
-        this.editor = new Editor({
-            content: this.value,
-            extensions: Object.values(Extensions),
-            autofocus: 'end',
-            editorProps: {
-                attributes: {
-                    class: 'pad-3 scroll-y',
-                    style: 'min-height: 100%; height: 0;'
-                }
-            },
-            onUpdate: () => {
-                this.onInput();
-                this.onChange();
-            },
-            onSelectionUpdate: this.onSelectionUpdateDebounced
-        });
-    },
-    activated() {
-        this.editor.commands.focus(this.caretPosition);
-    },
-    beforeDestroy() {
-        this.editor?.destroy();
-    },
-    methods: {
-        onInput() {
-            /**
-             * Input event
-             * @property {string} value
-             */
-            this.$emit('input', this.content);
-        },
-        onChange() {
-            /**
-             * change event
-             * @property {string} value
-             */
-            this.$emit('change', this.content);
-        },
-        /**
-         * @param {Transaction} transaction
-         */
-        onSelectionUpdate({ transaction }) {
-            this.caretPosition = transaction.curSelection.to;
-        },
-        /**
-         * @param {Tool} tool
-         * @return Tool
-         */
-        buildToolBinds(tool) {
-            const { editor, toolGroups } = this;
-
-            const context = Object.freeze({
-                get editor() {
-                    return editor;
-                },
-                get tool() {
-                    return tool;
-                },
-                get tools() {
-                  return toolGroups.flat();
-                },
-                change: this.change,
-                getImageUrl: this.getImageUrl
-            });
-
-            return bindContext(tool, context);
-        },
-        /**
-         * @param {number} groupIndex
-         * @return string
-         */
-        resolveGroupTitle(groupIndex) {
-            const title = this.appliedGroupsTitles[groupIndex];
-            return typeof title === 'string' ? title : `Group ${groupIndex + 1}`;
-        }
-    }
-}
-</script>
-<style lang="less" scoped>
-.editor {
-    &-toolbar {}
-
-    &-content {
-        min-height: 7.5rem;
-    }
-}
-
-.group-header {
-    min-height: calc(var(--line-height)*1rem)
-}
-
-.tool {
-    &:not(:last-child) {
-        margin-right: 0.25rem;
-    }
-}
-
-::v-deep .ProseMirror {
-    & .ProseMirror-selectednode {
-        outline: 2px solid var(--color-focus);
-    }
-
-    li > p {
-        display: inline-block;
-        margin: 0;
-    }
-}
-</style>
+<template>
+    <grid class="editor" v-bind="$options.static.GridProps">
+        <template #editor-toolbar="{ style }">
+            <div :style="style" class="editor-toolbar">
+                <!--
+                @slot Toolbar slot
+                @binding {Tool[][]} toolGroups              2d matrix of using tools split into groups
+                @binding {Function} resolveGroupTitle       resolve group title function(index:number)
+                @binding {Function} buildToolBinds          build tool binds function(tool:Tool)
+                -->
+                <slot
+                    v-if="editor != null"
+                    name="toolbar"
+                    v-bind="{ toolGroups, resolveGroupTitle, buildToolBinds }">
+                    <div class="row row-gap-l1">
+                        <div
+                            v-for="(toolsGroup, groupIndex) of toolGroups"
+                            :key="groupIndex"
+                            class="col col-vmid col-auto">
+                            <div class="d-flex flex-col flex-v-center">
+                                <div class="group-header">
+                                    <!--
+                                    @slot Group header slot
+                                    @binding {number} groupIndex                index of the tools group
+                                    @binding {Function} resolveGroupTitle       resolve group title function(index:number)
+                                    -->
+                                    <slot name="group-header" v-bind="{ groupIndex, resolveGroupTitle }">
+                                        <div class="text-small text-center">{{ resolveGroupTitle(groupIndex) }}</div>
+                                    </slot>
+                                </div>
+                                <div>
+                                    <div
+                                        v-for="tool of toolsGroup"
+                                        :key="tool.name"
+                                        class="tool d-inline-block">
+                                        <!--
+                                        @slot Tool slot
+                                        @binding {Tool} tool         tool's already bound to editor context
+                                        -->
+                                        <slot name="tool" v-bind="buildToolBinds(tool)">
+                                            <component :is="tool.render" :tool="buildToolBinds(tool)" />
+                                        </slot>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </slot>
+            </div>
+        </template>
+        <template #editor-content="{ style }">
+            <div :style="style" class="editor-content pad-v-l1" >
+                <div class="h-100">
+                    <editor-content :editor="editor" class="h-100"/>
+                </div>
+            </div>
+        </template>
+    </grid>
+</template>
+
+<script>
+import { Editor, EditorContent } from '@tiptap/vue-2';
+
+import { debounce } from './utils/Helpers';
+import Grid from './Grid.vue';
+import * as Extensions from './WysiwygEditor/extensions';
+import { buildToolGroups, bindContext } from './WysiwygEditor/utils';
+import { DefaultTools, DefaultToolGroupsTitles } from './WysiwygEditor/constants';
+
+/**
+ * @typedef {import('./WysiwygEditor/WysiwygEditor').ToolDef} Tool
+ */
+
+export default {
+    components: {
+        Grid,
+        EditorContent
+    },
+    props: {
+        /**
+         * @model
+         */
+        value: {
+            type: String,
+            default: '',
+        },
+        /**
+         * 2d matrix of using tools
+         */
+        tools: {
+            type: Array,
+            default: () => [],
+            validator: (tools) => tools.flat().every((tool) =>
+                typeof tool === 'string' || (tool != null && typeof tool === 'object' && Array.isArray(tool) === false)
+            )
+        },
+        /**
+         * editor tool groups titles
+         */
+        groupsTitles: {
+            type: Array,
+            default: () => [],
+            validator: (titles) => titles.every((title) => typeof title === 'string')
+        },
+        /**
+         * @public
+         * func allows to receive image url from the environment
+         */
+        getImageUrl: {
+            type: Function,
+            default: async () => {}
+        }
+    },
+    data: () => ({
+        /** @type {Editor} */
+        editor: null,
+        /** @type {Tool[][]}  */
+        appliedTools: null,
+        /** @type {string[]}  */
+        appliedGroupsTitles: null,
+        /** @type {number}  */
+        caretPosition: 0
+    }),
+    computed: {
+        /**
+         * @return {string}
+         */
+        content() {
+            return this.editor?.getHTML() ?? '';
+        },
+        /**
+         * @return {Tool[][]}
+         */
+        toolGroups() {
+            return buildToolGroups(this.appliedTools);
+        }
+    },
+    static: {
+        GridProps: {
+            areas: [['editor-toolbar'], ['editor-content']],
+            rows: ['auto', '1fr'],
+            gap: ['0.5rem', 0]
+        }
+    },
+    watch: {
+        /**
+         * @param {string} value
+         */
+        value(value) {
+            const isSame = this.content === value;
+
+            if (isSame) {
+                return;
+            }
+
+            this.editor.commands.setContent(value, false);
+        },
+    },
+    created() {
+        this.onSelectionUpdateDebounced = debounce(this.onSelectionUpdate, 300);
+        this.appliedTools = this.tools.length === 0 ? DefaultTools : this.tools;
+        this.appliedGroupsTitles = this.groupsTitles.length === 0 ? DefaultToolGroupsTitles : this.groupsTitles;
+
+        this.editor = new Editor({
+            content: this.value,
+            extensions: Object.values(Extensions),
+            autofocus: 'end',
+            editorProps: {
+                attributes: {
+                    class: 'pad-3 scroll-y',
+                    style: 'min-height: 100%; height: 0;'
+                }
+            },
+            onUpdate: () => {
+                this.onInput();
+                this.onChange();
+            },
+            onSelectionUpdate: this.onSelectionUpdateDebounced
+        });
+    },
+    activated() {
+        this.editor.commands.focus(this.caretPosition);
+    },
+    beforeDestroy() {
+        this.editor?.destroy();
+    },
+    methods: {
+        onInput() {
+            /**
+             * Input event
+             * @property {string} value
+             */
+            this.$emit('input', this.content);
+        },
+        onChange() {
+            /**
+             * change event
+             * @property {string} value
+             */
+            this.$emit('change', this.content);
+        },
+        /**
+         * @param {Transaction} transaction
+         */
+        onSelectionUpdate({ transaction }) {
+            this.caretPosition = transaction.curSelection.to;
+        },
+        /**
+         * @param {Tool} tool
+         * @return Tool
+         */
+        buildToolBinds(tool) {
+            const { editor, toolGroups } = this;
+
+            const context = Object.freeze({
+                get editor() {
+                    return editor;
+                },
+                get tool() {
+                    return tool;
+                },
+                get tools() {
+                  return toolGroups.flat();
+                },
+                change: this.change,
+                getImageUrl: this.getImageUrl
+            });
+
+            return bindContext(tool, context);
+        },
+        /**
+         * @param {number} groupIndex
+         * @return string
+         */
+        resolveGroupTitle(groupIndex) {
+            const title = this.appliedGroupsTitles[groupIndex];
+            return typeof title === 'string' ? title : `Group ${groupIndex + 1}`;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+.editor {
+    &-toolbar {}
+
+    &-content {
+        min-height: 7.5rem;
+    }
+}
+
+.group-header {
+    min-height: calc(var(--line-height)*1rem)
+}
+
+.tool {
+    &:not(:last-child) {
+        margin-right: 0.25rem;
+    }
+}
+
+::v-deep .ProseMirror {
+    & .ProseMirror-selectednode {
+        outline: 2px solid var(--color-focus);
+    }
+}
+</style>