goodteditor-ui 1.0.23 → 1.0.24

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

@@ -1,29 +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 });
-            }
-        };
-    }
-});
+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

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

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

@@ -1,15 +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
-            }
-        }
-    }
-})
+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

@@ -1,15 +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
-            }
-        }
-    }
-})
+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

@@ -1,4 +1,4 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+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

@@ -1,4 +1,4 @@
-export { default as WysiwygEditor } from '../WysiwygEditor.vue';
-export * from './constants'
-export * from './utils'
-export * from './tools-and-commands';
+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

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

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

@@ -1,41 +1,41 @@
-<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.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>
+<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.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

@@ -1,34 +1,34 @@
-<template>
-    <div :title="title" class="autocomplete-tool">
-        <input-autocomplete
-            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
-            @input="onInput" />
-    </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: {
-        onInput(value) {
-            this.tool.exec(value);
-            this.emitExecuted();
-        }
-    }
-};
-</script>
-
-<style scoped>
-.autocomplete-tool {
-    width: 10rem;
-}
-</style>
+<template>
+    <div :title="title" class="autocomplete-tool">
+        <input-autocomplete
+            v-bind="{ value, options: tool.options, disabled: !isEnabled, size: 'small' }"
+            @input="onInput" />
+    </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: {
+        onInput(value) {
+            this.tool.exec(value);
+            this.emitExecuted();
+        }
+    }
+};
+</script>
+
+<style scoped>
+.autocomplete-tool {
+    width: 10rem;
+}
+</style>

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

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

@@ -1,38 +1,38 @@
-<template>
-    <div :title="title" class="input-units-tool">
-        <input-units
-            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
-            @change="onChange" />
-    </div>
-</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>
+<template>
+    <div :title="title" class="input-units-tool">
+        <input-units
+            v-bind="{ value, units, size: 'small', disabled: !isEnabled }"
+            @change="onChange" />
+    </div>
+</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>