@fastkit/vui 0.7.57 → 0.7.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.7.57",
+  "version": "0.7.64",
   "description": "@fastkit/vui",
   "buildOptions": {
     "name": "Vui",
@@ -32,13 +32,14 @@
     "vue": "^3.2.26"
   },
   "dependencies": {
-    "@fastkit/color-scheme": "0.7.57",
-    "@fastkit/icon-font": "0.7.57",
-    "@fastkit/tiny-logger": "0.7.57",
-    "@fastkit/vite-kit": "0.7.57",
-    "@fastkit/vue-kit": "0.7.57",
+    "@fastkit/color-scheme": "0.7.64",
+    "@fastkit/icon-font": "0.7.64",
+    "@fastkit/tiny-logger": "0.7.64",
+    "@fastkit/vite-kit": "0.7.64",
+    "@fastkit/vue-kit": "0.7.64",
     "@tiptap/extension-link": "^2.0.0-beta.36",
     "@tiptap/extension-underline": "^2.0.0-beta.23",
+    "@tiptap/extension-text-style": "^2.0.0-beta.23",
     "@tiptap/starter-kit": "^2.0.0-beta.183",
     "@tiptap/vue-3": "^2.0.0-beta.90",
     "eta": "^1.12.3",

package/src/components/VButton/VButtonGroup.scss

@@ -20,4 +20,8 @@
       z-index: 1;
     }
   }
+
+  // &--has-icon &__item {
+
+  // }
 }

package/src/components/VButton/VButtonGroup.tsx

@@ -25,6 +25,7 @@ export const VButtonGroup = defineComponent({
   },
   setup(props, ctx) {
     return () => {
+      let hasIcon = false;
       let buttonLength = 0;
 
       let tmp = renderSlotOrEmpty(ctx.slots) || [];
@@ -43,6 +44,10 @@ export const VButtonGroup = defineComponent({
 
         buttonLength++;
 
+        if (!hasIcon && node.props && !!node.props.icon) {
+          hasIcon = true;
+        }
+
         return {
           isButton: true,
           node,
@@ -67,6 +72,7 @@ export const VButtonGroup = defineComponent({
             class: [
               'v-button-group__item',
               {
+                'v-button--icon': hasIcon,
                 'v-button-group__item--has-left': hasLeft,
                 'v-button-group__item--has-right': hasRight,
               },
@@ -75,7 +81,12 @@ export const VButtonGroup = defineComponent({
         }
         return child.node;
       });
-      return <div class="v-button-group">{$children}</div>;
+      return (
+        <div
+          class={['v-button-group', { 'v-button-group--has-icon': hasIcon }]}>
+          {$children}
+        </div>
+      );
     };
   },
 });

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -20,6 +20,10 @@
     position: relative;
   }
 
+  .v-control-field__body {
+    width: 100%;
+  }
+
   &__floating-toolbar {
     position: absolute;
     right: 0;
@@ -29,6 +33,7 @@
 
   &__body {
     position: relative;
+    width: 100%;
     max-height: var(--max-height);
     // max-height: 200px;
     overflow: auto;
@@ -45,6 +50,7 @@
     }
 
     &__prose {
+      width: 100%;
       min-height: var(--min-height);
       outline: none;
     }

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -1,5 +1,13 @@
 import './VWysiwygEditor.scss';
-import { defineComponent, Fragment, PropType, computed, ref, watch } from 'vue';
+import {
+  defineComponent,
+  PropType,
+  computed,
+  ref,
+  watch,
+  onBeforeUnmount,
+  VNodeChild,
+} from 'vue';
 import {
   createFormControlProps,
   FormControlSlots,
@@ -34,9 +42,13 @@ import {
 import StarterKit from '@tiptap/starter-kit';
 import { VButton, VButtonGroup } from '../VButton';
 import {
+  RawWysiwygExtension,
+  resolveRawWysiwygExtensions,
   RawWysiwygEditorTool,
   resolveRawWysiwygEditorTools,
   WysiwygEditorContext,
+  // EditorEventsOptions,
+  WysiwygEditorInitializeContext,
 } from './schemes';
 
 export const VWysiwygEditor = defineComponent({
@@ -49,6 +61,10 @@ export const VWysiwygEditor = defineComponent({
     ...createControlFieldProviderProps(),
     ...createControlProps(),
     ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
+    extensions: {
+      type: Array as PropType<RawWysiwygExtension[]>,
+      default: () => [],
+    },
     tools: {
       type: Array as PropType<RawWysiwygEditorTool[]>,
       default: () => [],
@@ -78,6 +94,23 @@ export const VWysiwygEditor = defineComponent({
       validationValue: () => textRef.value,
     });
 
+    const initializeCtx = new WysiwygEditorInitializeContext(() => vui, {
+      onCreate: ({ editor }) => {
+        textRef.value = editor.getText();
+        updateEditable();
+      },
+      onFocus: ({ event }) => {
+        inputControl.focusHandler(event);
+      },
+      onBlur: ({ event }) => {
+        inputControl.blurHandler(event);
+      },
+      onUpdate: ({ editor }) => {
+        inputControl.value = editor.getHTML();
+        textRef.value = editor.getText();
+      },
+    });
+
     const extensions = [
       StarterKit.configure({
         bold: false,
@@ -86,6 +119,10 @@ export const VWysiwygEditor = defineComponent({
         history: false,
         italic: false,
       }),
+      // Linter.configure({
+      //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
+      // }),
+      ...resolveRawWysiwygExtensions(props.extensions, initializeCtx),
       ...wysiwygSettings.value.extensions,
     ];
 
@@ -110,21 +147,13 @@ export const VWysiwygEditor = defineComponent({
       },
     );
 
+    initializeCtx.on('create', ({ editor }) => {
+      textRef.value = editor.getText();
+      updateEditable();
+    });
+
     const editor = useEditor({
-      onCreate: ({ editor }) => {
-        textRef.value = editor.getText();
-        updateEditable();
-      },
-      onFocus: (ctx) => {
-        inputControl.focusHandler(ctx.event);
-      },
-      onBlur: (ctx) => {
-        inputControl.blurHandler(ctx.event);
-      },
-      onUpdate: (ev) => {
-        inputControl.value = ev.editor.getHTML();
-        textRef.value = ev.editor.getText();
-      },
+      ...initializeCtx.editorOptions(),
       autofocus: props.autofocus,
       content: props.modelValue,
       extensions,
@@ -177,9 +206,12 @@ export const VWysiwygEditor = defineComponent({
 
       return (
         <VButtonGroup
-          class={{
-            'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
-          }}
+          class={[
+            'v-wysiwyg-editor__toolbar',
+            {
+              'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
+            },
+          ]}
           variant={variant}>
           {tools.map(({ key, icon, onClick, disabled, active }) => {
             const isActive =
@@ -188,16 +220,22 @@ export const VWysiwygEditor = defineComponent({
               !inputControl.canOperation ||
               (!!_editor && resolveContextableValue(context, disabled));
             let iconName: IconName | undefined;
+            let child: VNodeChild;
 
             if (typeof icon === 'function') {
               if (_editor) {
-                iconName = icon(context);
+                const _child = icon(context);
+                if (typeof _child === 'function') {
+                  child = _child();
+                } else {
+                  iconName = child as any;
+                }
               }
             } else {
               iconName = icon;
             }
 
-            if (!iconName) return;
+            if (!iconName && child == null) return;
 
             return (
               <VButton
@@ -206,14 +244,19 @@ export const VWysiwygEditor = defineComponent({
                 icon={iconName}
                 onClick={(ev) => onClick(context, ev)}
                 color={isActive ? toolButtonActiveColor : undefined}
-                disabled={isDisabled}
-              />
+                disabled={isDisabled}>
+                {child}
+              </VButton>
             );
           })}
         </VButtonGroup>
       );
     };
 
+    onBeforeUnmount(() => {
+      editor.value && editor.value.destroy();
+    });
+
     return {
       editor,
       ...inputControl.expose(),
@@ -253,40 +296,38 @@ export const VWysiwygEditor = defineComponent({
             return (
               <div class="v-wysiwyg-editor__wrapper">
                 {!this.isReadonly && this.createTools()}
-                <div class="v-wysiwyg-editor__body">
-                  <VControlField
-                    class="v-wysiwyg-editor__input"
-                    autoHeight
-                    startAdornment={this.startAdornment}
-                    endAdornment={this.endAdornment}
-                    size={this.size}
-                    // onClickHost={(ev) => {
-                    //   this.focus();
-                    // }}
-                    v-slots={{
-                      ...this.$slots,
-                      default: () => {
-                        return (
-                          <Fragment>
-                            <EditorContent
-                              class="v-wysiwyg-editor__input__element wysiwyg"
-                              editor={editor}
-                            />
-                            {!this.floatingToolbar &&
-                              !!editor &&
-                              !this.isReadonly && (
-                                <BubbleMenu
-                                  class="v-wysiwyg-editor__bubble-menu"
-                                  editor={editor}>
-                                  {this.createTools(true)}
-                                </BubbleMenu>
-                              )}
-                          </Fragment>
-                        );
-                      },
-                    }}
-                  />
-                </div>
+                <VControlField
+                  class="v-wysiwyg-editor__input"
+                  autoHeight
+                  startAdornment={this.startAdornment}
+                  endAdornment={this.endAdornment}
+                  size={this.size}
+                  // onClickHost={(ev) => {
+                  //   this.focus();
+                  // }}
+                  v-slots={{
+                    ...this.$slots,
+                    default: () => {
+                      return (
+                        <div class="v-wysiwyg-editor__body">
+                          <EditorContent
+                            class="v-wysiwyg-editor__input__element wysiwyg"
+                            editor={editor}
+                          />
+                          {!this.floatingToolbar &&
+                            !!editor &&
+                            !this.isReadonly && (
+                              <BubbleMenu
+                                class="v-wysiwyg-editor__bubble-menu"
+                                editor={editor}>
+                                {this.createTools(true)}
+                              </BubbleMenu>
+                            )}
+                        </div>
+                      );
+                    },
+                  }}
+                />
               </div>
             );
           },

package/src/components/VWysiwygEditor/extensions/color.ts

@@ -0,0 +1,72 @@
+import { Extension } from '@tiptap/core';
+import '@tiptap/extension-text-style';
+
+export type WysiwygColorOptions = {
+  types: string[];
+};
+
+declare module '@tiptap/core' {
+  interface Commands<ReturnType> {
+    color: {
+      /**
+       * Set the text color
+       */
+      setColor: (color: string) => ReturnType;
+      /**
+       * Unset the text color
+       */
+      unsetColor: () => ReturnType;
+    };
+  }
+}
+
+export const WysiwygColorExtension = Extension.create<WysiwygColorOptions>({
+  name: 'color',
+
+  addOptions() {
+    return {
+      types: ['textStyle'],
+    };
+  },
+
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          color: {
+            default: null,
+            parseHTML: (element) => element.style.color.replace(/['"]+/g, ''),
+            renderHTML: (attributes) => {
+              if (!attributes.color) {
+                return {};
+              }
+
+              return {
+                style: `color: ${attributes.color}`,
+              };
+            },
+          },
+        },
+      },
+    ];
+  },
+
+  addCommands() {
+    return {
+      setColor:
+        (color) =>
+        ({ chain }) => {
+          return chain().setMark('textStyle', { color }).run();
+        },
+      unsetColor:
+        () =>
+        ({ chain }) => {
+          return chain()
+            .setMark('textStyle', { color: null })
+            .removeEmptyTextStyle()
+            .run();
+        },
+    };
+  },
+});

package/src/components/VWysiwygEditor/extensions/index.ts

@@ -0,0 +1,2 @@
+export * from './linter';
+export * from './color';

package/src/components/VWysiwygEditor/extensions/linter/Linter.scss

@@ -0,0 +1,140 @@
+.v-linter {
+  &__problem {
+    margin-bottom: -1px;
+    cursor: help;
+    background: var(--deep-color);
+    border-bottom: 1px solid var(--main-color);
+  }
+
+  &__issue-icon {
+    position: absolute;
+    right: 2px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.2em;
+    height: 1.2em;
+    margin-top: 0.2em;
+    // padding-left: 0.5px;
+    font-family: times, georgia, serif;
+    font-size: 15px;
+    font-weight: 700;
+    line-height: 1;
+    color: var(--text-color);
+    text-align: center;
+    cursor: pointer;
+    background: var(--main-color);
+    border-radius: 100px;
+
+    &::before {
+      content: '!';
+    }
+  }
+
+  &__issue-menu-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 0px;
+    height: 1em;
+    overflow: visible;
+  }
+
+  &__issue-menu {
+    font-size: 87.5%;
+    // font-size: 12px;
+    line-height: 1.5;
+
+    .v-dialog__body {
+      padding: 0;
+      font-size: inherit;
+    }
+
+    &__message {
+      padding: 8px;
+    }
+
+    &__fixers {
+      position: relative;
+      padding: 4px 0;
+      // padding: 8px;
+      // border-top: solid 1px var(--divider-color);
+      &::before {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 0;
+        display: block;
+        height: 1px;
+        content: '';
+        background: currentColor;
+        opacity: 0.5;
+      }
+    }
+
+    &__fixer {
+      &__button {
+        position: relative;
+        display: block;
+        width: 100%;
+        padding: 8px;
+        font: inherit;
+        font-size: 12px;
+        // margin-top: 8px;
+        // color: var(--palette-link);
+        text-align: left;
+        // text-decoration: underline;
+        cursor: pointer;
+        background: transparent;
+        border: 0;
+        outline: 0;
+        appearance: none;
+
+        &::before {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          display: block;
+          content: '';
+          background: currentColor;
+          opacity: 0;
+          transition: 0.15s;
+        }
+
+        &:hover,
+        &:focus {
+          &::before {
+            opacity: 0.1;
+          }
+        }
+
+        &__message {
+          position: relative;
+        }
+      }
+    }
+    // pointer-events: none;
+    // background: #fff;
+    // border-radius: 4px;
+    // opacity: 0;
+    // transition: opacity 0.15s;
+
+    // &--active {
+    //   pointer-events: auto;
+    //   opacity: 1;
+    // }
+
+    &__fix {
+      display: inline;
+      margin-top: 8px;
+      color: var(--palette-link);
+      text-decoration: underline;
+      cursor: pointer;
+      background: transparent;
+      border: 0;
+      outline: 0;
+      appearance: none;
+    }
+  }
+}