goodteditor-ui 1.0.16 → 1.0.18

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

@@ -0,0 +1,31 @@
+export { Document } from '@tiptap/extension-document';
+export { Text } from '@tiptap/extension-text';
+export { History } from '@tiptap/extension-history';
+export { Dropcursor } from '@tiptap/extension-dropcursor';
+export { Gapcursor } from '@tiptap/extension-gapcursor';
+export { Color } from '@tiptap/extension-color';
+export { FontFamily } from '@tiptap/extension-font-family';
+
+export { Table } from './table';
+export { TableRow } from './table-row';
+export { TableCell } from './table-cell';
+export { TableHeader } from './table-header';
+export { Heading } from './heading';
+export { Code } from './code';
+export { CodeBlock } from './code-block';
+export { Link } from './link';
+export { TextAlign } from './text-align';
+export { FontSize } from './font-size';
+export { Paragraph } from './paragraph';
+export { Formatting } from './formatting';
+export { TextStyle } from './text-style';
+export { Blockquote } from './blockquote';
+export { Bold } from './bold';
+export { Italic } from './italic';
+export { Underline } from './underline';
+export { Strike } from './strike';
+export { OrderedList } from './ordered-list';
+export { BulletList } from './bullet-list';
+export { ListItem } from './list-item';
+export { Image } from './image';
+export { HorizontalRule } from './horizontal-rule';

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

@@ -0,0 +1,15 @@
+import { Italic as ItalicToExtend } from '@tiptap/extension-italic';
+
+export const Italic = ItalicToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

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

@@ -0,0 +1,16 @@
+import { Link as LinkToExtend } from '@tiptap/extension-link';
+
+export const Link = LinkToExtend.extend({
+        addAttributes() {
+            return {
+                ...this.parent?.(),
+                class: {
+                    default: 'color-link cursor-pointer'
+                },
+                style: {
+                    default: null
+                }
+            };
+        }
+    }
+);

package/src/components/ui/WysiwygEditor/extensions/list-item.js

@@ -0,0 +1,15 @@
+import { ListItem as ListItemToExtend } from '@tiptap/extension-list-item';
+
+export const ListItem = ListItemToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+});

package/src/components/ui/WysiwygEditor/extensions/ordered-list.js

@@ -0,0 +1,15 @@
+import { OrderedList as OrderedListToExtend } from '@tiptap/extension-ordered-list';
+
+export const OrderedList = OrderedListToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+});

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

@@ -0,0 +1,23 @@
+import { Paragraph as ParagraphToExtend } from '@tiptap/extension-paragraph';
+import { NodeType } from '../constants';
+
+export const Paragraph = ParagraphToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: 'p'
+            },
+            style: {
+                default: null
+            }
+        };
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            setParagraphClass: (className) => ({ commands }) =>
+                commands.updateAttributes(NodeType.PARAGRAPH, { class: className })
+        };
+    }
+});

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

@@ -0,0 +1,15 @@
+import { Strike as StrikeToExtend } from '@tiptap/extension-strike';
+
+export const Strike = StrikeToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

package/src/components/ui/WysiwygEditor/extensions/table-cell.js

@@ -0,0 +1,13 @@
+import { TableCell as TableCellToExtend } from '@tiptap/extension-table-cell';
+
+export const TableCell = TableCellToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: null
+        }
+    }
+})

package/src/components/ui/WysiwygEditor/extensions/table-header.js

@@ -0,0 +1,15 @@
+import { TableHeader as TableHeaderToExtend } from '@tiptap/extension-table-header';
+
+export const TableHeader = TableHeaderToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

package/src/components/ui/WysiwygEditor/extensions/table-row.js

@@ -0,0 +1,15 @@
+import { TableRow as TableRowToExtend } from '@tiptap/extension-table-row';
+
+export const TableRow = TableRowToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

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

@@ -0,0 +1,29 @@
+import { Table as TableToExtend } from '@tiptap/extension-table';
+import { NodeType } from '../constants';
+
+export const Table = TableToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: 'table table-vtop table-borders table-zebra w-100'
+            },
+            style: null
+        };
+    },
+    addCommands() {
+        return {
+            ...this.parent?.(),
+            toggleTableAlignment: (className, tableClassNames) => ({ commands }) => {
+                const classNames = tableClassNames.replace(/table-v(top|bot|mid)\s?/, '');
+                return commands.updateAttributes(NodeType.TABLE, { class: `${classNames} ${className}` });
+            },
+            toggleTableClass: (className, tableClassNames) => ({ commands }) => {
+                const classNames = tableClassNames.includes(className)
+                    ? tableClassNames.split(' ').filter((name) => name !== className).join(' ')
+                    : `${tableClassNames} ${className}`;
+                return commands.updateAttributes(NodeType.TABLE, { class: classNames });
+            }
+        };
+    }
+});

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

@@ -0,0 +1,5 @@
+import { TextAlign as TextAlignToExtend } from '@tiptap/extension-text-align';
+
+export const TextAlign = TextAlignToExtend.configure({
+    types: ['heading', 'paragraph', 'link', 'codeBlock', 'blockquote']
+});

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

@@ -0,0 +1,15 @@
+import { TextStyle as TextStyleToExtend } from '@tiptap/extension-text-style';
+
+export const TextStyle = TextStyleToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

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

@@ -0,0 +1,15 @@
+import { Underline as UnderlineToExtend } from '@tiptap/extension-underline';
+
+export const Underline = UnderlineToExtend.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            class: {
+                default: null
+            },
+            style: {
+                default: null
+            }
+        }
+    }
+})

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

@@ -0,0 +1,4 @@
+export { default as WysiwygEditor } from '../WysiwygEditor.vue';
+export * from './constants'
+export * from './utils'
+export * from './tools-and-commands';

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

@@ -0,0 +1,4 @@
+export { default as WysiwygEditor } from '../WysiwygEditor.vue';
+export * from './constants'
+export * from './utils'
+export * from './tools-and-commands';

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

@@ -0,0 +1,26 @@
+<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>
+</template>
+
+<script>
+import { useRender } from './mixins';
+
+export default {
+    mixins: [useRender()],
+    methods: {
+        onClick() {
+            this.tool.exec();
+            this.emitExecuted();
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+    <div :data-popover="popoverTargetId">
+        <button
+            :title="title"
+            class="btn btn-small btn-outline btn-icon"
+            @click="togglePopover">
+            <div class="icon">
+                <i class="mdi" :class="icon"></i>
+            </div>
+        </button>
+        <popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <color-picker class="pull-left" v-bind="{ value, showSubmit: true }" @submit="onSubmit" />
+        </popover>
+    </div>
+</template>
+
+<script>
+import ColorPicker from '../../ColorPicker.vue';
+import Popover from '../../Popover.vue';
+import WithPopover from '../../utils/WithPopover';
+import { useRender } from './mixins';
+
+export default {
+    components: { ColorPicker, Popover },
+    mixins: [useRender(), WithPopover],
+    computed: {
+        value() {
+            return this.tool.getValue();
+        }
+    },
+    methods: {
+        onSubmit({ rgba }) {
+            const { r: red, g: green, b: blue, a: alpha } = rgba;
+            const color = `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+
+            this.tool.exec(color);
+            this.popoverShow = false;
+            this.emitExecuted();
+        }
+    }
+};
+</script>

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

@@ -0,0 +1,33 @@
+<template>
+    <input-autocomplete
+        v-bind="{ value, options: tool.options, title, disabled: !isEnabled, size: 'small' }"
+        class="autocomplete-tool"
+        @input="onInput" />
+</template>
+
+<script>
+import InputAutocomplete from '../../InputAutocomplete.vue';
+import { useRender } from './mixins';
+
+export default {
+    components: { InputAutocomplete },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue() ?? '';
+        }
+    },
+    methods: {
+        onInput(value) {
+            this.tool.exec(value);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.autocomplete-tool {
+    width: 10rem;
+}
+</style>

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

@@ -0,0 +1,35 @@
+<template>
+    <div class="form-control form-control-icon-right w-12-12">
+        <input-autocomplete
+            v-bind="{ value, title, 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>

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

@@ -0,0 +1,37 @@
+<template>
+    <input-units
+        v-bind="{ value, units, title, size: 'small', disabled: !isEnabled }"
+        class="input-units-tool"
+        @change="onChange" />
+</template>
+
+<script>
+import InputUnits from '../../InputUnits.vue';
+
+import { useRender } from './mixins';
+
+export default {
+    components: { InputUnits },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue();
+        },
+        units() {
+            return this.tool?.units ?? [];
+        }
+    },
+    methods: {
+        onChange(value) {
+            this.tool.exec(value);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.input-units-tool {
+    width: 4rem;
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+    <ui-select
+        v-bind="{ value, options, valueObjects, title, disabled: !isEnabled, size: 'small' }"
+        class="select-tool"
+        @change="onChange" />
+</template>
+
+<script>
+import UiSelect from '../../Select.vue';
+import { useRender } from './mixins';
+
+export default {
+    components: { UiSelect },
+    mixins: [useRender()],
+    computed: {
+        value() {
+            return this.tool.getValue(this.options);
+        },
+        options() {
+            const { options = [] } = this.tool;
+
+            return options.map((option) => typeof option === 'string'
+                ? { value: option, label: option }
+                : { value: option, label: option.title }
+            );
+        },
+        valueObjects() {
+            const [option] = this.options;
+            return typeof option.value === 'object';
+        }
+    },
+    methods: {
+        onChange(option) {
+            this.tool.exec(this.valueObjects ? option.value : option);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.select-tool {
+    width: 7.5rem;
+}
+</style>

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

@@ -0,0 +1,50 @@
+<template>
+    <div :data-popover="popoverTargetId">
+        <button
+            :title="title"
+            class="btn btn-small btn-outline btn-icon"
+            @click="togglePopover">
+            <div class="icon">
+                <i class="mdi" :class="icon"></i>
+            </div>
+        </button>
+        <popover :show.sync="popoverShow" v-bind="popoverOptions">
+            <ui-datalist
+                class="w-100 pull-left"
+                v-bind="{ size: 'small', options: tool.options }"
+                @click.native.stop>
+                <template #option="{ option, index }">
+                    <li :key="index" class="list-item" >
+                        <component :is="option.render" :tool="option" @command-executed="onCommandExecuted" />
+                    </li>
+                </template>
+            </ui-datalist>
+        </popover>
+    </div>
+</template>
+
+<script>
+import Popover from '../../Popover.vue';
+import UiDatalist from '../../Datalist.vue';
+import WithPopover from '../../utils/WithPopover';
+import { useRender } from './mixins';
+
+export default {
+    components: { Popover, UiDatalist },
+    mixins: [useRender(), WithPopover],
+    methods: {
+        onCommandExecuted() {
+            this.popoverShow = false;
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style>
+.list-item {
+    display: inline-block !important;
+    padding: 0.25rem !important;
+    min-height: calc(var(--line-height)*1rem);
+}
+</style>

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

@@ -0,0 +1,7 @@
+export { default as Button } from './Button.vue';
+export { default as Select } from './Select.vue';
+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';

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

@@ -0,0 +1,7 @@
+export { default as Button } from './Button.vue';
+export { default as Select } from './Select.vue';
+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';

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

@@ -0,0 +1,39 @@
+export const useRender = () => ({
+    props: {
+        tool: {
+            type: Object,
+            default: null
+        }
+    },
+    computed: {
+        icon() {
+            const { tool } = this;
+            
+            if (tool == null) {
+                return 'mdi-help-box';
+            }
+    
+            return [null, undefined, ''].includes(tool.icon) ? 'mdi-help-box' : `mdi-${tool.icon}`;
+        },
+        title() {
+            const { tool } = this;
+    
+            if (tool == null) {
+                return 'Unknown tool';
+            }
+            
+            return tool.title ?? tool.name ?? 'Unknown tool';
+        },
+        isActive() {
+            return this.tool.isActive();
+        },
+        isEnabled() {
+            return this.tool.isEnabled();
+        }
+    },
+    methods: {
+        emitExecuted() {
+            this.$emit('command-executed');
+        }
+    }
+})

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

@@ -0,0 +1 @@
+export { useRender } from './RenderMixin';