goodteditor-ui 1.0.17 → 1.0.19

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

@@ -0,0 +1,72 @@
+import { ToolsMap } from './tools-and-commands';
+
+/**
+ * @typedef {import('./WysiwygEditor').ToolDef} Tool
+ * @typedef {import('./WysiwygEditor').CommandDef} Command
+ */
+
+/**
+ * @param {Tool | string} tool
+ * @param {string} toolName
+ * @return boolean
+ */
+const findTool = (tool, toolName) => {
+    if (typeof tool === 'string') {
+        return toolName === tool;
+    }
+    
+    return tool?.name === toolName;
+};
+
+/**
+ * @param {Tool[][]} tools
+ * @return Tool[][]
+ */
+export const buildToolGroups = (tools) => {
+    const toolsFlatted = tools.flat();
+    
+    if (toolsFlatted.length === 0) {
+        return [Object.values(ToolsMap)];
+    }
+    
+    const availableTools = Object
+        .values(ToolsMap)
+        .filter(({ name }) => toolsFlatted.some((tool) => findTool(tool, name)));
+    
+    /**
+     * @param {Tool[]} toolsGroup
+     * @return Tool[]
+     */
+    const populateToolsGroup = (toolsGroup) =>
+        toolsGroup.reduce((acc, tool) => {
+            const { name: toolName = tool, ...rest } = typeof tool === 'string' ? {} : tool;
+            const foundTool = availableTools.find(({ name }) => findTool(tool, name));
+            
+            return [...acc, { ...foundTool, ...rest }];
+        }, []);
+    
+    return tools.reduce((acc, toolsGroup) => [...acc, populateToolsGroup(toolsGroup)], []);
+};
+
+/**
+ * @param {Tool|Command} value
+ * @param {Record<string, any>} context
+ * @return {Tool|Command}
+ */
+export const bindContext = (value, context) => {
+    if (value == null || typeof value !== 'object') {
+        return value;
+    }
+    
+    return Object.entries(value).reduce((acc, [propName, propValue]) => {
+        if (typeof propValue === 'function') {
+            return { ...acc, [propName]: propValue.bind(context) };
+        }
+        
+        if (Array.isArray(propValue)) {
+            return { ...acc, [propName]: propValue.map((childProp) => bindContext(childProp, context)) };
+        }
+        
+        return { ...acc, [propName]: propValue };
+    }, {});
+}

package/src/components/ui/WysiwygEditor.md

@@ -0,0 +1,18 @@
+```vue
+<template>
+    <div class="pad-l5">
+        <ui-wysiwyg-editor v-model="model"></ui-wysiwyg-editor>
+    </div>
+</template>
+<script>
+import UiWysiwygEditor from './WysiwygEditor.vue';
+export default {
+    components: { UiWysiwygEditor },
+    data: () => ({
+        model: `<p>This WYSIWYG is based on 
+        <a target="_blank" rel="noopener noreferrer nofollow" href="https://tiptap.dev/" class="color-link">tiptap</a> 
+        editor framework.</p>`
+    })
+};
+</script>
+```

package/src/components/ui/WysiwygEditor.vue

@@ -0,0 +1,260 @@
+<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 class="editor-content pad-v-l1" :style="style">
+                <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;
+    }
+}
+</style>