@fastkit/vui 0.12.8 → 0.12.10

package/src/components/VWysiwygEditor/VWysiwygEditor.scss

@@ -1,66 +0,0 @@
-@use '../../styles/core.scss';
-
-.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,
-  defineSlotsProps,
-} from '@fastkit/vue-kit';
-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';

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

@@ -1,140 +0,0 @@
-.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;
-    }
-  }
-}