goodteditor-ui 1.0.18 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "goodteditor-ui",
-    "version": "1.0.18",
+    "version": "1.0.19",
     "main": "index.js",
     "homepage": "https://goodt-ui.netlify.app/",
     "scripts": {

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

@@ -26,7 +26,7 @@ export type ToolDef = {
     exec: (value?: String) => void;
     isActive: () => Boolean;
     isEnabled: () => Boolean;
-    getValue?: () => unknown;
+    getValue?: () => String;
     options?: Array<String | ToolDef | CommandDef>;
     units?: Array<String>
 };

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

@@ -1,7 +1,17 @@
 import { Button, Select, InputUnits, ColorPicker, ToolbarPopover, InputAuto, InputBrowse } from './renders';
 
 /**
- * @type {import('./WysiwygEditor').NodeType}
+ * @typedef {import('./WysiwygEditor').NodeType} NodeType
+ * @typedef {import('./WysiwygEditor').MarkType} MarkType
+ * @typedef {import('./WysiwygEditor').CommandType} CommandType
+ * @typedef {import('./WysiwygEditor').ToolType} ToolType
+ * @typedef {import('./WysiwygEditor').Render} Render
+ * @typedef {import('./WysiwygEditor').CommandDef} Command
+ * @typedef {import('./WysiwygEditor').ToolDef} Tool
+ */
+
+/**
+ * @type NodeType
  */
 export const NodeType = Object.freeze({
     BLOCKQUOTE: 'blockquote',
@@ -22,7 +32,7 @@ export const NodeType = Object.freeze({
 });
 
 /**
- * @type {import('./WysiwygEditor').MarkType}
+ * @type MarkType
  */
 export const MarkType = Object.freeze({
     BOLD: 'bold',
@@ -35,7 +45,7 @@ export const MarkType = Object.freeze({
 });
 
 /**
- * @type {import('./WysiwygEditor').CommandType}
+ * @type CommandType
  */
 export const CommandType = Object.freeze({
     /* paragraph style */
@@ -53,7 +63,7 @@ export const CommandType = Object.freeze({
 });
 
 /**
- * @type {import('./WysiwygEditor').ToolType}
+ * @type ToolType
  */
 export const ToolType = Object.freeze({
     /* typography */
@@ -110,6 +120,10 @@ export const ToolType = Object.freeze({
     INSERT_LINK: 'insertLink'
 });
 
+/**
+ * @param {Command} command
+ * @return Command
+ */
 export const createCommand = ({
                             name,
                             title = 'Unknown command',
@@ -125,7 +139,7 @@ export const createCommand = ({
 });
 
 /**
- * @type {import('./WysiwygEditor').Render}
+ * @type Render
  */
 export const Render = Object.freeze({
     BUTTON: Button,
@@ -137,6 +151,10 @@ export const Render = Object.freeze({
     INPUT_BROWSE: InputBrowse
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createBaseTool = ({
                         name,
                         render = Render.BUTTON,
@@ -155,36 +173,64 @@ export const createBaseTool = ({
     isEnabled
 });
 
+/**
+ * @param {Tool} toolOptions
+ * @return Tool
+ */
 export const createButtonTool = (toolOptions) => createBaseTool(toolOptions);
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createSelectTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
     ...createBaseTool({ render: Render.SELECT, ...toolOptions }),
     getValue,
     options
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createColorPickerTool = ({ getValue = () => null, ...toolOptions }) => ({
     ...createBaseTool({ render: Render.COLOR_PICKER, ...toolOptions }),
     getValue
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createInputUnitsTool = ({ getValue = () => null, units = [], ...toolOptions }) => ({
     ...createBaseTool({ render: Render.INPUT_UNITS, ...toolOptions }),
     getValue,
     units
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createToolbarPopoverTool = ({ options = [], ...toolOptions }) => ({
     ...createBaseTool({ render: Render.TOOLBAR_POPOVER, ...toolOptions }),
     options
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createInputAutoTool = ({ getValue = () => null, options = [], ...toolOptions }) => ({
     ...createBaseTool({ render: Render.INPUT_AUTO, ...toolOptions }),
     getValue,
     options
 });
 
+/**
+ * @param {Tool} tool
+ * @return Tool
+ */
 export const createInputBrowseTool = ({ getValue = () => null, ...toolOptions }) => ({
     ...createBaseTool({ render: Render.INPUT_BROWSE, ...toolOptions }),
     getValue

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

@@ -5,6 +5,7 @@ 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';

package/src/components/ui/WysiwygEditor.vue

@@ -2,6 +2,12 @@
     <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"
@@ -13,6 +19,11 @@
                             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>
@@ -22,6 +33,10 @@
                                         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>
@@ -89,6 +104,7 @@ export default {
         },
         /**
          * @public
+         * func allows to receive image url from the environment
          */
         getImageUrl: {
             type: Function,
@@ -170,9 +186,17 @@ export default {
     },
     methods: {
         onInput() {
+            /**
+             * Input event
+             * @property {string} value
+             */
             this.$emit('input', this.content);
         },
         onChange() {
+            /**
+             * change event
+             * @property {string} value
+             */
             this.$emit('change', this.content);
         },
         /**