goodteditor-ui 1.0.16 → 1.0.18

package/index.js

@@ -22,6 +22,7 @@ import Select from './src/components/ui/Select.vue';
 import TimePicker from './src/components/ui/TimePicker.vue';
 import Tooltip from './src/components/ui/Tooltip.vue';
 import Grid from './src/components/ui/Grid.vue';
+import WysiwygEditor from './src/components/ui/WysiwygEditor.vue';
 
 export {
     Avatar,
@@ -48,4 +49,5 @@ export {
     TimePicker,
     Tooltip,
     Grid,
+    WysiwygEditor
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.16",
+    "version": "1.0.18",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {
@@ -27,7 +27,20 @@
         "less-loader": "^5.0.0",
         "netlify-cli": "^5.0.1",
         "vue-styleguidist": "4.35.0",
-        "vue-template-compiler": "^2.6.12"
+        "vue-template-compiler": "^2.6.12",
+        "@tiptap/extension-color": "^2.0.0-beta.207",
+        "@tiptap/extension-font-family": "^2.0.0-beta.207",
+        "@tiptap/extension-image": "^2.0.0-beta.27",
+        "@tiptap/extension-link": "^2.0.0-beta.36",
+        "@tiptap/extension-table": "2.0.0-beta.48",
+        "@tiptap/extension-table-cell": "^2.0.0-beta.20",
+        "@tiptap/extension-table-header": "^2.0.0-beta.22",
+        "@tiptap/extension-table-row": "^2.0.0-beta.19",
+        "@tiptap/extension-text-align": "^2.0.0-beta.207",
+        "@tiptap/extension-text-style": "^2.0.0-beta.207",
+        "@tiptap/extension-underline": "^2.0.0-beta.207",
+        "@tiptap/starter-kit": "^2.0.0-beta.183",
+        "@tiptap/vue-2": "^2.0.0-beta.84"
     },
     "peerDependencies": {
         "vue": "^2.6.12"

package/src/components/ui/Select.vue

@@ -10,7 +10,7 @@
         <div class="ui-select-label u-select-none">
             <template v-if="multiple">
                 <template v-if="optionsSelected.length">
-                    <!-- 
+                    <!--
                     @slot Label slot for multiple mode
                     @binding {Object} option                option
                     @binding {any} value                    option's value
@@ -41,7 +41,7 @@
                     </slot>
                 </template>
                 <div class="ui-select-placeholder events-none" v-else>
-                    <!-- 
+                    <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
@@ -51,7 +51,7 @@
             </template>
 
             <template v-else>
-                <!-- 
+                <!--
                 @slot Label slot for single mode
                 @binding {Object} option    option
                 @binding {any} value        option's value
@@ -69,7 +69,7 @@
                     {{ getOptionLabel(optionsSelected[0]) }}
                 </slot>
                 <div class="ui-select-placeholder events-none" v-else>
-                    <!-- 
+                    <!--
                     @slot Placeholder slot
                     -->
                     <slot name="placeholder">
@@ -78,7 +78,7 @@
                 </div>
             </template>
         </div>
-        <!-- 
+        <!--
         @slot Open state icon slot
         -->
         <slot name="icon-open" v-if="popoverShow">
@@ -86,7 +86,7 @@
                 <i class="mdi mdi-chevron-up"></i>
             </div>
         </slot>
-        <!-- 
+        <!--
         @slot Close state icon slot
         -->
         <slot name="icon-close" v-else>
@@ -105,13 +105,13 @@
                 ref="datalist"
             >
                 <template #header>
-                    <!-- 
+                    <!--
                     @slot Dropdown header slot
                     -->
                     <slot name="dropdown-header"></slot>
                 </template>
                 <template #option="{ option, index, cursorIndex }">
-                    <!-- 
+                    <!--
                     @slot Label slot for single mode
                     @binding {Object} option             option
                     @binding {any} value                 option's value
@@ -121,7 +121,7 @@
                     @binding {Number} cursorIndex        current cursor index
                     @binding {Function} selectOption     function that selects option
                     @binding {Function} deselectOption   function that deselects option
-                    @binding {Function} toggleOption     function that toggles option selection                
+                    @binding {Function} toggleOption     function that toggles option selection
                     @binding {Number} optionIndex           option's index
                     @binding {Boolean} isOptionSelected     option selection status
                     -->
@@ -148,6 +148,7 @@
                                 'bg-grey-lighter': index == cursorIndex,
                             }"
                             :key="index"
+                            :title="getOptionLabel(option)"
                             @click="toggleOption(option)"
                         >
                             <div class="row row-collapse" v-if="multiple">
@@ -174,7 +175,7 @@
                     </slot>
                 </template>
                 <template #footer>
-                    <!-- 
+                    <!--
                     @slot Dropdown footer slot
                     -->
                     <slot name="dropdown-footer"></slot>

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

@@ -0,0 +1,119 @@
+import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse } from './renders';
+
+export type Render = Readonly<{
+    BUTTON: Button;
+    COLOR_PICKER: ColorPicker;
+    INPUT_UNITS: InputUnits;
+    SELECT: Select;
+    TOOLBAR_POPOVER: ToolbarPopover;
+    INPUT_AUTO: InputAuto;
+    INPUT_BROWSE: InputBrowse;
+}>;
+
+export type CommandDef = {
+    name: String;
+    title: String;
+    exec: () => void;
+    isActive: () => Boolean;
+    isEnabled: () => Boolean;
+};
+
+export type ToolDef = {
+    name: String;
+    render: Render;
+    title: String;
+    icon: String;
+    exec: (value?: String) => void;
+    isActive: () => Boolean;
+    isEnabled: () => Boolean;
+    getValue?: () => unknown;
+    options?: Array<String | ToolDef | CommandDef>;
+    units?: Array<String>
+};
+
+export type NodeType = Readonly<{
+    BLOCKQUOTE: 'blockquote',
+    BULLET_LIST: 'bulletList',
+    CODE_BLOCK: 'codeBlock',
+    DOCUMENT: 'document',
+    HARD_BREAK: 'hardBreak',
+    HEADING: 'heading',
+    HORIZONTAL_RULE: 'horizontalRule',
+    IMAGE: 'image',
+    LIST_ITEM: 'listItem',
+    ORDERED_LIST: 'orderedList',
+    PARAGRAPH: 'paragraph',
+    TABLE: 'table',
+    TABLE_ROW: 'tableRow',
+    TABLE_CELL: 'tableCell',
+    TEXT: 'text'
+}>;
+
+export type MarkType = Readonly<{
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    LINK: 'link',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    TEXT_STYLE: 'textStyle'
+}>;
+
+export type CommandType = Readonly<{
+    PARAGRAPH: 'paragraph',
+    HEADING_1: 'heading1',
+    HEADING_2: 'heading2',
+    HEADING_3: 'heading3',
+    HEADING_4: 'heading4',
+    TEXT_SMALL: 'textSmall',
+    TEXT_XSMALL: 'textXsmall',
+    CODE_BLOCK: 'codeBlock',
+    SINK_LIST_ITEM: 'sinkListItem',
+    LIFT_LIST_ITEM: 'liftListItem'
+}>;
+
+export type ToolType = Readonly<{
+    PARAGRAPH_STYLE: 'paragraphStyle',
+    FONT_SIZE: 'fontSize',
+    FONT_FAMILY: 'fontFamily',
+    TEXT_COLOR: 'textColor',
+    BLOCKQUOTE: 'blockquote',
+    ORDERED_LIST: 'orderedList',
+    BULLET_LIST: 'bulletList',
+    TEXT_ALIGN_LEFT: 'textAlignLeft',
+    TEXT_ALIGN_RIGHT: 'textAlignRight',
+    TEXT_ALIGN_CENTER: 'textAlignCenter',
+    HORIZONTAL_RULE: 'horizontalRule',
+    LINK: 'link',
+    IMAGE: 'image',
+    TABLE: 'table',
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    UNDO: 'undo',
+    REDO: 'redo',
+    SAVE: 'save',
+    CLEAR_FORMATTING: 'clearFormatting',
+    HARD_BREAK: 'hardBreak',
+    INSERT_TABLE: 'insertTable',
+    DELETE_TABLE: 'deleteTable',
+    ADD_COLUMN_BEFORE: 'addColumnBefore',
+    ADD_COLUMN_AFTER: 'addColumnAfter',
+    DELETE_COLUMN: 'deleteColumn',
+    ADD_ROW_BEFORE: 'addRowBefore',
+    ADD_ROW_AFTER: 'addRowAfter',
+    DELETE_ROW: 'deleteRow',
+    MERGE_CELLS: 'mergeCells',
+    SPLIT_CELL: 'splitCell',
+    TOGGLE_HEADER_COLUMN: 'toggleHeaderColumn',
+    TOGGLE_HEADER_ROW: 'toggleHeaderRow',
+    ALIGN_V_TOP: 'alignVTop',
+    ALIGN_V_MID: 'alignVMid',
+    ALIGN_V_BOT: 'alignVBot',
+    TOGGLE_BORDERS: 'toggleBorders',
+    TOGGLE_ZEBRA: 'toggleZebra',
+    INSERT_IMAGE: 'insertImage',
+    INSERT_LINK: 'insertLink'
+}>;

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

@@ -0,0 +1,209 @@
+import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse } from './renders';
+
+/**
+ * @type {import('./WysiwygEditor').NodeType}
+ */
+export const NodeType = Object.freeze({
+    BLOCKQUOTE: 'blockquote',
+    BULLET_LIST: 'bulletList',
+    CODE_BLOCK: 'codeBlock',
+    DOCUMENT: 'document',
+    HARD_BREAK: 'hardBreak',
+    HEADING: 'heading',
+    HORIZONTAL_RULE: 'horizontalRule',
+    IMAGE: 'image',
+    LIST_ITEM: 'listItem',
+    ORDERED_LIST: 'orderedList',
+    PARAGRAPH: 'paragraph',
+    TABLE: 'table',
+    TABLE_ROW: 'tableRow',
+    TABLE_CELL: 'tableCell',
+    TEXT: 'text'
+});
+
+/**
+ * @type {import('./WysiwygEditor').MarkType}
+ */
+export const MarkType = Object.freeze({
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    LINK: 'link',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    TEXT_STYLE: 'textStyle'
+});
+
+/**
+ * @type {import('./WysiwygEditor').CommandType}
+ */
+export const CommandType = Object.freeze({
+    /* paragraph style */
+    PARAGRAPH: 'paragraph',
+    HEADING_1: `heading1`,
+    HEADING_2: `heading2`,
+    HEADING_3: `heading3`,
+    HEADING_4: `heading4`,
+    TEXT_SMALL: 'textSmall',
+    TEXT_XSMALL: 'textXsmall',
+    CODE_BLOCK: 'codeBlock',
+    /* list */
+    SINK_LIST_ITEM: 'sinkListItem',
+    LIFT_LIST_ITEM: 'liftListItem'
+});
+
+/**
+ * @type {import('./WysiwygEditor').ToolType}
+ */
+export const ToolType = Object.freeze({
+    /* typography */
+    PARAGRAPH_STYLE: 'paragraphStyle',
+    FONT_SIZE: 'fontSize',
+    FONT_FAMILY: 'fontFamily',
+    TEXT_COLOR: 'textColor',
+    BLOCKQUOTE: 'blockquote',
+    /* lists */
+    ORDERED_LIST: 'orderedList',
+    BULLET_LIST: 'bulletList',
+    /* alignment */
+    TEXT_ALIGN_LEFT: 'textAlignLeft',
+    TEXT_ALIGN_RIGHT: 'textAlignRight',
+    TEXT_ALIGN_CENTER: 'textAlignCenter',
+    /* insertion */
+    LINK: 'link',
+    IMAGE: 'image',
+    TABLE: 'table',
+    /* formatting */
+    BOLD: 'bold',
+    CODE: 'code',
+    ITALIC: 'italic',
+    STRIKE: 'strike',
+    UNDERLINE: 'underline',
+    /* history */
+    UNDO: 'undo',
+    REDO: 'redo',
+    SAVE: 'save',
+    /* other */
+    CLEAR_FORMATTING: 'clearFormatting',
+    HARD_BREAK: 'hardBreak',
+    HORIZONTAL_RULE: 'horizontalRule',
+    /** table options  */
+    INSERT_TABLE: 'insertTable',
+    DELETE_TABLE: 'deleteTable',
+    ADD_COLUMN_BEFORE: 'addColumnBefore',
+    ADD_COLUMN_AFTER: 'addColumnAfter',
+    DELETE_COLUMN: 'deleteColumn',
+    ADD_ROW_BEFORE: 'addRowBefore',
+    ADD_ROW_AFTER: 'addRowAfter',
+    DELETE_ROW: 'deleteRow',
+    MERGE_CELLS: 'mergeCells',
+    SPLIT_CELL: 'splitCell',
+    TOGGLE_HEADER_COLUMN: 'toggleHeaderColumn',
+    TOGGLE_HEADER_ROW: 'toggleHeaderRow',
+    ALIGN_V_TOP: 'alignVTop',
+    ALIGN_V_MID: 'alignVMid',
+    ALIGN_V_BOT: 'alignVBot',
+    TOGGLE_BORDERS: 'toggleBorders',
+    TOGGLE_ZEBRA: 'toggleZebra',
+    /** image options */
+    INSERT_IMAGE: 'insertImage',
+    INSERT_LINK: 'insertLink'
+});
+
+export const createCommand = ({
+                            name,
+                            title = 'Unknown command',
+                            exec = () => {},
+                            isActive = () => false,
+                            isEnabled = () => true
+                        }) => ({
+    name,
+    title,
+    exec,
+    isActive,
+    isEnabled
+});
+
+/**
+ * @type {import('./WysiwygEditor').Render}
+ */
+export const Render = Object.freeze({
+    BUTTON: Button,
+    COLOR_PICKER: ColorPicker,
+    INPUT_UNITS: InputUnits,
+    SELECT: Select,
+    TOOLBAR_POPOVER: ToolbarPopover,
+    INPUT_AUTO: InputAuto,
+    INPUT_BROWSE: InputBrowse
+});
+
+export const createBaseTool = ({
+                        name,
+                        render = Render.BUTTON,
+                        title = 'Unknown tool',
+                        icon = 'help-circle-outline',
+                        exec = () => {},
+                        isActive = () => false,
+                        isEnabled = () => true
+                    }) => ({
+    name,
+    render,
+    title,
+    icon,
+    exec,
+    isActive,
+    isEnabled
+});
+
+export const createButtonTool = (toolOptions) => createBaseTool(toolOptions);
+
+export const createSelectTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.SELECT, ...toolOptions }),
+    getValue,
+    options
+});
+
+export const createColorPickerTool = ({ getValue = () => null, ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.COLOR_PICKER, ...toolOptions }),
+    getValue
+});
+
+export const createInputUnitsTool = ({ getValue = () => null, units = [], ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.INPUT_UNITS, ...toolOptions }),
+    getValue,
+    units
+});
+
+export const createToolbarPopoverTool = ({ options = [], ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.TOOLBAR_POPOVER, ...toolOptions }),
+    options
+});
+
+export const createInputAutoTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.INPUT_AUTO, ...toolOptions }),
+    getValue,
+    options
+});
+
+export const createInputBrowseTool = ({ getValue = () => null, ...toolOptions }) => ({
+    ...createBaseTool({ render: Render.INPUT_BROWSE, ...toolOptions }),
+    getValue
+});
+
+export const DefaultTools = [
+    [ToolType.PARAGRAPH_STYLE, ToolType.TEXT_COLOR, ToolType.FONT_SIZE, ToolType.FONT_FAMILY, ToolType.BLOCKQUOTE],
+    [ToolType.BOLD, ToolType.ITALIC, ToolType.UNDERLINE, ToolType.STRIKE, ToolType.CODE],
+    [ToolType.TEXT_ALIGN_LEFT, ToolType.TEXT_ALIGN_CENTER, ToolType.TEXT_ALIGN_RIGHT],
+    [ToolType.ORDERED_LIST, ToolType.BULLET_LIST],
+    [ToolType.IMAGE, ToolType.LINK, ToolType.TABLE],
+    [ToolType.CLEAR_FORMATTING, ToolType.HARD_BREAK]
+];
+
+export const DefaultToolGroupsTitles = [
+    'Оформление',
+    'Форматирование',
+    'Выравнивание',
+    'Нумерация',
+    'Вставка',
+    ''
+];

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

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

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

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

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

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

package/src/components/ui/WysiwygEditor/extensions/code-block.js

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

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

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

package/src/components/ui/WysiwygEditor/extensions/font-size.js

@@ -0,0 +1,34 @@
+import { Extension } from '@tiptap/vue-2';
+import { MarkType } from '../constants';
+
+export const FontSize = Extension.create({
+    name: 'fontSize',
+    addOptions() {
+        return {
+            types: [MarkType.TEXT_STYLE]
+        };
+    },
+    addGlobalAttributes() {
+        return [
+            {
+                types: this.options.types,
+                attributes: {
+                    fontSize: {
+                        default: null,
+                        parseHTML: ({ style }) => style.fontSize?.replace(/['"]+/g, ''),
+                        renderHTML: ({ fontSize }) => ({ ...(fontSize && { style: `font-size: ${fontSize}` }) })
+                    }
+                }
+            }
+        ];
+    },
+    addCommands() {
+        return {
+            setFontSize: fontSize => ({ chain }) => chain().setMark(MarkType.TEXT_STYLE, { fontSize }).run(),
+            unsetFontSize: () => ({ chain }) => chain()
+                .setMark(MarkType.TEXT_STYLE, { fontSize: null })
+                .removeEmptyTextStyle()
+                .run()
+        };
+    }
+});

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

@@ -0,0 +1,14 @@
+import { Extension } from '@tiptap/vue-2';
+
+export const Formatting = Extension.create({
+    name: 'formatting',
+    addCommands() {
+        return {
+            clearFormatting: () => ({ chain }) =>
+                chain()
+                    .clearNodes()
+                    .unsetAllMarks()
+                    .run()
+        }
+    }
+})

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

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

package/src/components/ui/WysiwygEditor/extensions/horizontal-rule.js

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

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

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

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

@@ -0,0 +1,32 @@
+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 { HardBreak } from '@tiptap/extension-hard-break';
+
+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';