@fastkit/vui 0.12.9 → 0.12.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fastkit/vui",
-  "version": "0.12.9",
+  "version": "0.12.11",
   "description": "A simple, extensible UI kit for Vue applications.",
   "keywords": [
     "fastkit",
@@ -44,47 +44,25 @@
     "src"
   ],
   "dependencies": {
-    "@tiptap/core": "2.0.0-beta.220",
-    "@tiptap/extension-bold": "2.0.0-beta.220",
-    "@tiptap/extension-bullet-list": "2.0.0-beta.220",
-    "@tiptap/extension-history": "2.0.0-beta.220",
-    "@tiptap/extension-italic": "2.0.0-beta.220",
-    "@tiptap/extension-link": "2.0.0-beta.220",
-    "@tiptap/extension-ordered-list": "2.0.0-beta.220",
-    "@tiptap/extension-text-style": "2.0.0-beta.220",
-    "@tiptap/extension-underline": "2.0.0-beta.220",
-    "@tiptap/starter-kit": "2.0.0-beta.220",
-    "@tiptap/vue-3": "2.0.0-beta.220",
-    "prosemirror-commands": "^1.5.1",
-    "prosemirror-dropcursor": "^1.8.0",
-    "prosemirror-gapcursor": "^1.3.1",
-    "prosemirror-history": "^1.3.0",
-    "prosemirror-keymap": "^1.2.1",
-    "prosemirror-model": "^1.19.0",
-    "prosemirror-schema-list": "^1.2.2",
-    "prosemirror-state": "^1.4.2",
-    "prosemirror-transform": "^1.7.1",
-    "prosemirror-view": "^1.30.2",
-    "@fastkit/color-scheme": "0.12.9",
-    "@fastkit/icon-font": "0.12.9",
-    "@fastkit/color-scheme-gen": "0.12.9",
-    "@fastkit/helpers": "0.12.9",
-    "@fastkit/media-match": "0.12.9",
-    "@fastkit/media-match-gen": "0.12.9",
-    "@fastkit/rules": "0.12.9",
-    "@fastkit/stylebase": "0.12.9",
-    "@fastkit/tiny-logger": "0.12.9",
-    "@fastkit/vue-app-layout": "0.12.9",
-    "@fastkit/vue-color-scheme": "0.12.9",
-    "@fastkit/vue-form-control": "0.12.9",
-    "@fastkit/vue-loading": "0.12.9",
-    "@fastkit/vue-media-match": "0.12.9",
-    "@fastkit/vue-scroller": "0.12.9",
-    "@fastkit/vue-stack": "0.12.9",
-    "@fastkit/vue-utils": "0.12.9"
+    "@fastkit/color-scheme": "0.12.10",
+    "@fastkit/helpers": "0.12.10",
+    "@fastkit/icon-font": "0.12.10",
+    "@fastkit/media-match": "0.12.10",
+    "@fastkit/rules": "0.12.10",
+    "@fastkit/stylebase": "0.12.10",
+    "@fastkit/vue-app-layout": "0.12.11",
+    "@fastkit/vue-color-scheme": "0.12.10",
+    "@fastkit/vue-form-control": "0.12.10",
+    "@fastkit/color-scheme-gen": "0.12.10",
+    "@fastkit/vue-loading": "0.12.10",
+    "@fastkit/vue-media-match": "0.12.10",
+    "@fastkit/tiny-logger": "0.12.10",
+    "@fastkit/vue-scroller": "0.12.10",
+    "@fastkit/vue-stack": "0.12.10",
+    "@fastkit/media-match-gen": "0.12.10",
+    "@fastkit/vue-utils": "0.12.10"
   },
   "peerDependencies": {
-    "vite": "^4.0.4",
     "vue": "^3.2.0",
     "vue-router": "^4.1.0"
   },

package/src/components/index.ts

@@ -15,6 +15,8 @@ export * from './VDrawerLayout';
 export * from './VHero';
 // export * from './VAccordion';
 export * from './VNavigation';
+export * from './VControlField';
+export * from './VTextCounter';
 export * from './VFormControl';
 export * from './VCheckbox';
 export * from './VCheckboxGroup';
@@ -28,7 +30,7 @@ export * from './VSelect';
 export * from './VTextField';
 export * from './VNumberField';
 export * from './VTextarea';
-export * from './VWysiwygEditor';
+// export * from './VWysiwygEditor';
 export * from './VForm';
 export * from './VTabs';
 export * from './VBreadcrumbs';

package/src/injections.ts

@@ -18,7 +18,7 @@ export const VuiColorProviderInjectionKey: InjectionKey<VuiColorProvider> =
 
 export const VUI_TEXT_FIELD_SYMBOL = 'vui-text-field';
 export const VUI_TEXTAREA_SYMBOL = 'vui-textarea';
-export const VUI_WYSIWYG_EDITOR_SYMBOL = 'vui-wysiwyg-editor';
+// export const VUI_WYSIWYG_EDITOR_SYMBOL = 'vui-wysiwyg-editor';
 export const VUI_SELECT_SYMBOL = 'vui-select';
 export const VUI_OPTION_SYMBOL = 'vui-option';
 export const VUI_CHECKBOX_GROUP_SYMBOL = 'vui-checkbox-group';

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -1,68 +0,0 @@
-@use '../../styles/core.scss';
-
-@layer vui {
-  .v-wysiwyg-editor {
-    &--sm {
-      --min-height: var(--wysiwyg-min-height-sm);
-      --max-height: var(--wysiwyg-max-height-sm);
-    }
-
-    &--md {
-      --min-height: var(--wysiwyg-min-height-md);
-      --max-height: var(--wysiwyg-max-height-md);
-    }
-
-    &--lg {
-      --min-height: var(--wysiwyg-min-height-lg);
-      --max-height: var(--wysiwyg-max-height-lg);
-    }
-
-    &__wrapper {
-      position: relative;
-    }
-
-    .v-control-field__body {
-      width: 100%;
-    }
-
-    &__floating-toolbar {
-      position: absolute;
-      right: 0;
-      bottom: 100%;
-      z-index: 1;
-    }
-
-    &__body {
-      position: relative;
-      width: 100%;
-      max-height: var(--max-height);
-      // max-height: 200px;
-      overflow: auto;
-    }
-
-    &__input {
-      cursor: text;
-
-      &__element {
-        width: 100%;
-        min-width: 0;
-        padding: 8px 0;
-        margin: 0;
-      }
-
-      &__prose {
-        width: 100%;
-        min-height: var(--min-height);
-        outline: none;
-      }
-    }
-
-    &--disabled-min-heihgt &__input__prose {
-      min-height: 0;
-    }
-
-    &--disabled-max-heihgt &__body {
-      max-height: none;
-    }
-  }
-}

package/src/components/VWysiwygEditor/VWysiwygEditor.tsx

@@ -1,354 +0,0 @@
-import './VWysiwygEditor.scss';
-import {
-  defineComponent,
-  PropType,
-  computed,
-  ref,
-  watch,
-  onBeforeUnmount,
-  VNodeChild,
-} from 'vue';
-import {
-  createFormControlProps,
-  FormControlSlots,
-} from '@fastkit/vue-form-control';
-import { defineSlotsProps } from '@fastkit/vue-utils';
-import { VFormControl } from '../VFormControl';
-import {
-  VControlField,
-  createControlFieldProps,
-  InputBoxSlots,
-} from '../VControlField';
-import { IconName } from '../VIcon';
-import {
-  createTextableProps,
-  createTextableEmits,
-  TextableControl,
-} from '@fastkit/vue-form-control';
-import {
-  createControlProps,
-  useControl,
-  createControlFieldProviderProps,
-  useControlField,
-} from '../../composables';
-import { VTextCounter } from '../VTextCounter';
-import { VUI_WYSIWYG_EDITOR_SYMBOL, useVui } from '../../injections';
-import {
-  EditorContent,
-  useEditor,
-  BubbleMenu,
-  FocusPosition,
-} from '@tiptap/vue-3';
-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({
-  name: 'VWysiwygEditor',
-  props: {
-    // ...props,
-    ...createTextableProps(),
-    ...createFormControlProps(),
-    ...createControlFieldProps(),
-    ...createControlFieldProviderProps(),
-    ...createControlProps(),
-    ...defineSlotsProps<FormControlSlots & InputBoxSlots>(),
-    extensions: {
-      type: Array as PropType<RawWysiwygExtension[]>,
-      default: () => [],
-    },
-    tools: {
-      type: Array as PropType<RawWysiwygEditorTool[]>,
-      default: () => [],
-    },
-    floatingToolbar: Boolean,
-    disabledMinHeight: Boolean,
-    disabledMaxHeight: Boolean,
-  },
-  emits: {
-    ...createTextableEmits(),
-  },
-  setup(props, ctx) {
-    const vui = useVui();
-
-    const textRef = ref('');
-    const toolButtonActiveColor = vui.setting('primaryScope');
-
-    const wysiwygSettings = computed(() =>
-      resolveRawWysiwygEditorTools(props.tools, vui),
-    );
-
-    const control = useControl(props);
-    useControlField(props);
-
-    const inputControl = new TextableControl(props, ctx as any, {
-      nodeType: VUI_WYSIWYG_EDITOR_SYMBOL,
-      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,
-        bulletList: false,
-        orderedList: false,
-        history: false,
-        italic: false,
-      }),
-      // Linter.configure({
-      //   plugins: [BadWords(['abc', 'evidently']), Punctuation, HeadingLevel],
-      // }),
-      ...resolveRawWysiwygExtensions(props.extensions, initializeCtx),
-      ...wysiwygSettings.value.extensions,
-    ];
-
-    const updateEditable = () => {
-      if (!editor.value) return;
-      editor.value.setEditable(inputControl.canOperation);
-    };
-
-    watch(() => inputControl.canOperation, updateEditable);
-
-    watch(
-      () => props.modelValue,
-      (modelValue) => {
-        const $editor = editor.value;
-        if (!$editor || $editor.getHTML() === modelValue) return;
-
-        $editor.commands.setContent(
-          modelValue == null ? '' : modelValue,
-          false,
-        );
-        textRef.value = $editor.getText();
-      },
-    );
-
-    initializeCtx.on('create', ({ editor }) => {
-      textRef.value = editor.getText();
-      updateEditable();
-    });
-
-    const editor = useEditor({
-      ...initializeCtx.editorOptions(),
-      autofocus: props.autofocus,
-      content: props.modelValue,
-      extensions,
-      editorProps: {
-        attributes: {
-          class: 'v-wysiwyg-editor__input__prose',
-        },
-      },
-    });
-
-    // editor.value.state.doc.content
-
-    const focus = (
-      position?: FocusPosition,
-      options?: {
-        scrollIntoView?: boolean | undefined;
-      },
-    ) => {
-      if (!editor.value) return;
-      return editor.value.chain().focus(position, options);
-    };
-
-    const blur = () => {
-      if (!editor.value) return;
-      return editor.value.chain().blur();
-    };
-
-    const wysiwygContext = computed<WysiwygEditorContext>(() => {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      const _editor = editor.value!;
-      // if (!_editor) {
-      //   throw new Error('missing editor value');
-      // }
-      return {
-        vui,
-        editor: _editor,
-      };
-    });
-
-    const createTools = (bubbleMenu = false) => {
-      const { value: settings } = wysiwygSettings;
-      const { value: context } = wysiwygContext;
-      const tools = bubbleMenu
-        ? settings.tools.filter((t) => !!t.floating)
-        : settings.tools;
-      const _editor = editor.value;
-      const variant = vui.setting(
-        bubbleMenu ? 'containedVariant' : 'plainVariant',
-      );
-
-      return (
-        <VButtonGroup
-          class={[
-            'v-wysiwyg-editor__toolbar',
-            {
-              'v-wysiwyg-editor__floating-toolbar': props.floatingToolbar,
-            },
-          ]}
-          variant={variant}>
-          {tools.map(({ key, icon, onClick, disabled, active }) => {
-            const isActive =
-              !!_editor && resolveContextableValue(context, active);
-            const isDisabled =
-              !inputControl.canOperation ||
-              (!!_editor && resolveContextableValue(context, disabled));
-            let iconName: IconName | undefined;
-            let child: VNodeChild;
-
-            if (typeof icon === 'function') {
-              if (_editor) {
-                const _child = icon(context);
-                if (typeof _child === 'function') {
-                  child = _child();
-                } else {
-                  iconName = _child as any;
-                }
-              }
-            } else {
-              iconName = icon;
-            }
-
-            if (!iconName && child == null) return;
-
-            return (
-              <VButton
-                tabindex={-1}
-                key={key}
-                icon={iconName}
-                onClick={(ev) => onClick(context, ev)}
-                color={isActive ? toolButtonActiveColor : undefined}
-                disabled={isDisabled}>
-                {child}
-              </VButton>
-            );
-          })}
-        </VButtonGroup>
-      );
-    };
-
-    onBeforeUnmount(() => {
-      editor.value && editor.value.destroy();
-    });
-
-    return {
-      editor,
-      ...inputControl.expose(),
-      ...control,
-      focus,
-      blur,
-      createTools,
-    };
-  },
-  render() {
-    return (
-      <VFormControl
-        nodeControl={this.nodeControl}
-        focused={this.nodeControl.focused}
-        class={[
-          'v-wysiwyg-editor',
-          this.classes,
-          `v-wysiwyg-editor--${this.size}`,
-          {
-            'v-wysiwyg-editor--disabled-min-heihgt': this.disabledMinHeight,
-            'v-wysiwyg-editor--disabled-max-heihgt': this.disabledMaxHeight,
-          },
-        ]}
-        label={this.label}
-        hint={this.hint}
-        hinttip={this.hinttip}
-        hiddenInfo={this.hiddenInfo}
-        requiredChip={this.requiredChip}
-        onClickLabel={(ev) => {
-          this.focus('start', { scrollIntoView: true });
-        }}
-        v-slots={{
-          ...this.$slots,
-          default: () => {
-            const { editor } = this;
-
-            return (
-              <div class="v-wysiwyg-editor__wrapper">
-                {!this.isReadonly && this.createTools()}
-                <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',
-                            } as any)}
-                            editor={editor}
-                          />
-                          {!this.floatingToolbar &&
-                            !!editor &&
-                            !this.isReadonly && (
-                              <BubbleMenu
-                                {...({
-                                  class: 'v-wysiwyg-editor__bubble-menu',
-                                } as any)}
-                                editor={editor}>
-                                {this.createTools(true)}
-                              </BubbleMenu>
-                            )}
-                        </div>
-                      );
-                    },
-                  }}
-                />
-              </div>
-            );
-          },
-          infoAppends: () => {
-            const { counterResult } = this;
-            if (!counterResult) return;
-            return <VTextCounter {...counterResult} />;
-          },
-        }}
-      />
-    );
-  },
-});
-
-function resolveContextableValue(
-  ctx: WysiwygEditorContext,
-  source?: boolean | ((ctx: WysiwygEditorContext) => boolean),
-) {
-  return typeof source === 'function' ? source(ctx) : source;
-}

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

@@ -1,72 +0,0 @@
-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

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