@fastkit/vui 0.12.9 → 0.12.10

package/src/components/VWysiwygEditor/schemes.ts

@@ -1,251 +0,0 @@
-import { type VuiService } from '../../service';
-import {
-  type Editor,
-  type Extensions,
-  type Node,
-  type Extension,
-  type Mark,
-  type AnyExtension,
-  type EditorOptions,
-} from '@tiptap/vue-3';
-import { type IconName } from '../VIcon';
-import { VNodeChild } from 'vue';
-
-const EDITOR_EVENTS = [
-  'beforeCreate',
-  'create',
-  'update',
-  'selectionUpdate',
-  'transaction',
-  'focus',
-  'blur',
-  'destroy',
-] as const;
-
-type PrefixedEventName<S extends string> = `on${Capitalize<S>}`;
-
-const prefixedEventName = <S extends string>(
-  source: S,
-): PrefixedEventName<S> => {
-  return `on${source.charAt(0).toUpperCase()}${source.slice(1)}` as any;
-};
-
-export type WysiwygEditorEvent = (typeof EDITOR_EVENTS)[number];
-
-export type WysiwygEditorPrefixedEvent = PrefixedEventName<WysiwygEditorEvent>;
-
-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-export interface WysiwygEditorEventsOptions
-  extends Partial<Pick<EditorOptions, WysiwygEditorPrefixedEvent>> {}
-
-export type WysiwygEditorEventsBucket = {
-  [EV in WysiwygEditorEvent]: NonNullable<
-    WysiwygEditorEventsOptions[PrefixedEventName<EV>]
-  >[];
-};
-
-export class WysiwygEditorInitializeContext {
-  readonly listeners: WysiwygEditorEventsBucket = {} as any;
-  private readonly _vui: () => VuiService;
-
-  get vui() {
-    return this._vui();
-  }
-
-  constructor(
-    vuiGetter: () => VuiService,
-    opts: WysiwygEditorEventsOptions = {},
-  ) {
-    this._vui = vuiGetter;
-
-    EDITOR_EVENTS.forEach((event) => {
-      this.listeners[event] = [];
-      const prefixed = prefixedEventName(event);
-      const fn = opts[prefixed];
-      fn && this.listeners[event].push(fn as any);
-    });
-  }
-
-  on<EV extends WysiwygEditorEvent>(
-    ev: EV,
-    handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>,
-  ) {
-    this.listeners[ev].push(handler);
-    return () => this.off(ev, handler);
-  }
-
-  off<EV extends WysiwygEditorEvent>(
-    ev: EV,
-    handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>,
-  ) {
-    this.listeners[ev] = this.listeners[ev].filter(
-      (_handler) => _handler !== handler,
-    ) as any;
-  }
-
-  editorOptions() {
-    const opts: WysiwygEditorEventsOptions = {};
-
-    EDITOR_EVENTS.forEach((event) => {
-      const prefixed = prefixedEventName(event);
-      opts[prefixed] = (props) => {
-        const handlers = this.listeners[event];
-        handlers.forEach((handler) => {
-          handler(props as any);
-        });
-      };
-    });
-
-    return opts;
-  }
-}
-
-export interface WysiwygEditorContext {
-  editor: Editor;
-  vui: VuiService;
-}
-
-export type WysiwygExtensionFactory<Options = any, Storage = any> = (
-  ctx: WysiwygEditorInitializeContext,
-) =>
-  | Extension<Options, Storage>
-  | Node<Options, Storage>
-  | Mark<Options, Storage>;
-
-export interface CreatedWysiwygExtension<Options = any, Storage = any> {
-  __isCreatedWysiwygExtension: true;
-  _configs: Partial<Options>[];
-  configure(
-    options?: Partial<Options>,
-  ): CreatedWysiwygExtension<Options, Storage>;
-  raw: WysiwygExtensionSource<Options, Storage>;
-}
-
-export type WysiwygExtensionSource<Options = any, Storage = any> =
-  | Extension<Options, Storage>
-  | Node<Options, Storage>
-  | Mark<Options, Storage>
-  | WysiwygExtensionFactory<Options, Storage>;
-
-export type RawWysiwygExtension<Options = any, Storage = any> =
-  | WysiwygExtensionSource<Options, Storage>
-  | CreatedWysiwygExtension<Options, Storage>;
-
-// export function createWysiwygExtension<Options = any, Storage = any>(
-//   extension: Extension<Options, Storage>,
-// ): Extension<Options, Storage>;
-// export function createWysiwygExtension<Options = any, Storage = any>(
-//   node: Node<Options, Storage>,
-// ): Node<Options, Storage>;
-// export function createWysiwygExtension<Options = any, Storage = any>(
-//   mark: Mark<Options, Storage>,
-// ): Mark<Options, Storage>;
-// export function createWysiwygExtension<Options = any, Storage = any>(
-//   factory: WysiwygExtensionFactory<Options, Storage>,
-// ): WysiwygExtensionFactory<Options, Storage>;
-
-function isCreatedWysiwygExtension<Options = any, Storage = any>(
-  source: unknown,
-): source is CreatedWysiwygExtension<Options, Storage> {
-  return (
-    !!source &&
-    typeof source === 'object' &&
-    (source as CreatedWysiwygExtension).__isCreatedWysiwygExtension === true
-  );
-}
-
-export function createWysiwygExtension<Options = any, Storage = any>(
-  extension: WysiwygExtensionSource<Options, Storage>,
-) {
-  const ext: CreatedWysiwygExtension<Options, Storage> = {
-    __isCreatedWysiwygExtension: true,
-    _configs: [],
-    configure: (opts) => {
-      opts && ext._configs.push(opts);
-      return ext;
-    },
-    raw: extension,
-  };
-  return ext;
-}
-
-function resolveRawWysiwygExtension(
-  raw: RawWysiwygExtension,
-  ctx: WysiwygEditorInitializeContext,
-): AnyExtension {
-  if (isCreatedWysiwygExtension(raw)) {
-    const { raw: _raw, _configs } = raw;
-    let ext = typeof _raw === 'function' ? _raw(ctx) : _raw;
-    _configs.forEach((config) => {
-      ext = ext.configure(config);
-    });
-    return ext;
-  }
-  return typeof raw === 'function' ? raw(ctx) : raw;
-}
-
-export function resolveRawWysiwygExtensions(
-  raws: RawWysiwygExtension[],
-  ctx: WysiwygEditorInitializeContext,
-) {
-  return raws.map((raw) => resolveRawWysiwygExtension(raw, ctx));
-}
-
-export interface WysiwygEditorTool {
-  key: string;
-  icon:
-    | IconName
-    | ((ctx: WysiwygEditorContext) => IconName | (() => VNodeChild));
-  active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
-  disabled?: boolean | ((ctx: WysiwygEditorContext) => boolean);
-  onClick: (ctx: WysiwygEditorContext, ev: MouseEvent) => any;
-  floating?: boolean;
-  extensions?: Extensions;
-}
-
-export type WysiwygEditorToolFactory<Options = void> = (
-  vui: VuiService,
-  options?: Options,
-) => WysiwygEditorTool | WysiwygEditorTool[];
-
-export type RawWysiwygEditorTool =
-  | WysiwygEditorTool
-  | WysiwygEditorToolFactory<any>;
-
-function resolveRawWysiwygEditorTool(
-  raw: RawWysiwygEditorTool,
-  vui: VuiService,
-) {
-  return typeof raw === 'function' ? raw(vui) : raw;
-}
-
-export interface ResolvedWysiwygEditorSettings {
-  tools: WysiwygEditorTool[];
-  extensions: Extensions;
-}
-
-export function resolveRawWysiwygEditorTools(
-  rawTools: RawWysiwygEditorTool[],
-  vui: VuiService,
-): ResolvedWysiwygEditorSettings {
-  const tools: WysiwygEditorTool[] = [];
-  const extensions: Extensions = [];
-
-  rawTools.forEach((raw) => {
-    let resolved = resolveRawWysiwygEditorTool(raw, vui);
-    if (!Array.isArray(resolved)) {
-      resolved = [resolved];
-    }
-    resolved.forEach((tool) => {
-      tools.push(tool);
-      if (tool.extensions) {
-        extensions.push(...tool.extensions);
-      }
-    });
-  });
-
-  return {
-    tools,
-    extensions,
-  };
-}

package/src/components/VWysiwygEditor/tools/bullet-list.ts

@@ -1,18 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { BulletList, BulletListOptions } from '@tiptap/extension-bullet-list';
-
-export const WysiwygBulletListTool: WysiwygEditorToolFactory<
-  BulletListOptions
-> = (vui, options) => {
-  const tool: WysiwygEditorTool = {
-    key: 'bulletList',
-    icon: vui.icon('editorformatListBulleted'),
-    active: ({ editor }) => editor.isActive('bulletList'),
-    onClick: ({ editor }) => {
-      editor.chain().focus().toggleBulletList().run();
-    },
-    floating: true,
-    extensions: [BulletList.configure(options)],
-  };
-  return tool;
-};

package/src/components/VWysiwygEditor/tools/color.scss

@@ -1,134 +0,0 @@
-:root {
-  --v-wysiwyg-color-tool: 30px;
-}
-
-@layer vui {
-  .v-wysiwyg-color-tool {
-    &__button {
-      position: relative;
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      vertical-align: bottom;
-
-      &__bar {
-        position: absolute;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        display: block;
-        height: 2px;
-        background: currentColor;
-      }
-    }
-
-    &__menu {
-      .v-dialog__content {
-        min-width: 0;
-      }
-
-      .v-dialog__body {
-        padding: 2px;
-      }
-    }
-
-    &__items {
-      --item-size: var(--v-wysiwyg-color-tool);
-
-      display: inline-flex;
-      flex-wrap: wrap;
-      align-items: center;
-      max-width: calc(var(--item-size) * 5);
-      vertical-align: bottom;
-
-      &--with-label {
-        display: flex;
-        flex-direction: column;
-        // flex-wrap: nowrap;
-        align-items: flex-start;
-        max-width: none;
-        padding: 2px;
-      }
-    }
-
-    &__item {
-      --focus-offset: calc(var(--item-size) * 0.05);
-
-      position: relative;
-      display: flex;
-      flex-basis: var(--item-size);
-      align-items: center;
-      width: var(--item-size);
-      height: var(--item-size);
-      padding: 0;
-      margin: 0;
-      // margin: 2px;
-      cursor: pointer;
-      background: transparent;
-      border: 0;
-      border-radius: 0;
-      outline: 0;
-      appearance: none;
-
-      &__color {
-        position: relative;
-        flex: 0 0 var(--item-size);
-        width: var(--item-size);
-        height: var(--item-size);
-
-        &::before {
-          position: absolute;
-          inset: 0;
-          display: block;
-          content: '';
-          background: currentColor;
-          border: solid 1px transparent;
-          transition: all 0.15s;
-        }
-      }
-
-      &__name {
-        position: relative;
-        padding: 0 8px;
-        font-size: 12px;
-        white-space: nowrap;
-      }
-
-      &:hover &__color,
-      &:focus &__color {
-        &::before {
-          inset: var(--focus-offset) var(--focus-offset) var(--focus-offset)
-            var(--focus-offset);
-          border-color: rgba(0, 0, 0, 0.1);
-        }
-      }
-    }
-
-    &__items--with-label &__item {
-      flex-basis: auto;
-      width: auto;
-      width: 100%;
-
-      &::before {
-        position: absolute;
-        inset: 0;
-        display: block;
-        content: '';
-        background: currentColor;
-        opacity: 0;
-        transition: opacity 0.15s;
-      }
-
-      &:hover,
-      &:focus {
-        &::before {
-          opacity: 0.1;
-        }
-      }
-
-      & + .v-wysiwyg-color-tool__item {
-        margin-top: 2px;
-      }
-    }
-  }
-}

package/src/components/VWysiwygEditor/tools/color.tsx

@@ -1,90 +0,0 @@
-import './color.scss';
-
-import { VNodeChild } from 'vue';
-import { WysiwygColorExtension } from '../extensions';
-import { type VuiService } from '../../../service';
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import TextStyle from '@tiptap/extension-text-style';
-import { VIcon } from '../../VIcon';
-
-export interface WysiwygColorItem {
-  key?: string | number;
-  name?: VNodeChild | ((vui: VuiService) => VNodeChild);
-  color: string | null;
-}
-
-export interface CreateWysiwygColorToolOptions {
-  items: WysiwygColorItem[];
-  withLabel?: boolean;
-}
-
-export function createWysiwygColorTool(opts: CreateWysiwygColorToolOptions) {
-  const WysiwygColorTool: WysiwygEditorToolFactory = (vui) => {
-    const tool: WysiwygEditorTool = {
-      key: 'textColor',
-      // active: ({ editor }) => editor.isActive('textStyle'),
-      icon:
-        ({ editor }) =>
-        () => {
-          const color: string | undefined =
-            editor.getAttributes('textStyle').color;
-          const style = { color };
-          return (
-            <span class="v-wysiwyg-color-tool__button">
-              <VIcon
-                class="v-wysiwyg-color-tool__button__icon"
-                name={vui.icon('editorTextColor')}
-              />
-              <span class="v-wysiwyg-color-tool__button__bar" style={style} />
-            </span>
-          );
-        },
-      onClick: (ctx, ev) => {
-        ctx.vui.menu({
-          class: 'v-wysiwyg-color-tool__menu',
-          activator: ev,
-          content: (stack) => (
-            <div
-              class={[
-                'v-wysiwyg-color-tool__items',
-                { 'v-wysiwyg-color-tool__items--with-label': opts.withLabel },
-              ]}>
-              {opts.items.map((item, index) => (
-                <button
-                  key={item.key == null ? index : item.key}
-                  class="v-wysiwyg-color-tool__item"
-                  type="button"
-                  onClick={() => {
-                    const { color } = item;
-                    let command = ctx.editor.chain().focus();
-                    if (color) {
-                      command = command.setColor(color);
-                    } else {
-                      command = command.unsetColor();
-                    }
-                    command.run();
-                    stack.close();
-                  }}>
-                  <span
-                    class="v-wysiwyg-color-tool__item__color"
-                    style={item.color ? { color: item.color } : {}}
-                  />
-                  {opts.withLabel && (
-                    <span class="v-wysiwyg-color-tool__item__name">
-                      {item.name}
-                    </span>
-                  )}
-                </button>
-              ))}
-            </div>
-          ),
-        });
-      },
-      floating: true,
-      extensions: [TextStyle, WysiwygColorExtension],
-    };
-    return tool;
-  };
-
-  return WysiwygColorTool;
-}

package/src/components/VWysiwygEditor/tools/format-bold.ts

@@ -1,19 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { Bold, BoldOptions } from '@tiptap/extension-bold';
-
-export const WysiwygFormatBoldTool: WysiwygEditorToolFactory<BoldOptions> = (
-  vui,
-  options,
-) => {
-  const tool: WysiwygEditorTool = {
-    key: 'formatBold',
-    icon: vui.icon('editorformatBold'),
-    active: ({ editor }) => editor.isActive('bold'),
-    onClick: ({ editor }) => {
-      editor.chain().focus().toggleBold().run();
-    },
-    floating: true,
-    extensions: [Bold.configure(options)],
-  };
-  return tool;
-};

package/src/components/VWysiwygEditor/tools/format-italic.ts

@@ -1,18 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { Italic, ItalicOptions } from '@tiptap/extension-italic';
-
-export const WysiwygFormatItalicTool: WysiwygEditorToolFactory<
-  ItalicOptions
-> = (vui, options) => {
-  const tool: WysiwygEditorTool = {
-    key: 'formatItalic',
-    icon: vui.icon('editorformatItalic'),
-    active: ({ editor }) => editor.isActive('italic'),
-    onClick: ({ editor }) => {
-      editor.chain().focus().toggleItalic().run();
-    },
-    floating: true,
-    extensions: [Italic.configure(options)],
-  };
-  return tool;
-};

package/src/components/VWysiwygEditor/tools/format-underline.ts

@@ -1,18 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { Underline, UnderlineOptions } from '@tiptap/extension-underline';
-
-export const WysiwygFormatUnderlineTool: WysiwygEditorToolFactory<
-  UnderlineOptions
-> = (vui, options) => {
-  const tool: WysiwygEditorTool = {
-    key: 'formatUnderline',
-    icon: vui.icon('editorformatUnderline'),
-    active: ({ editor }) => editor.isActive('underline'),
-    onClick: ({ editor }) => {
-      editor.chain().focus().toggleUnderline().run();
-    },
-    floating: true,
-    extensions: [Underline.configure(options)],
-  };
-  return tool;
-};

package/src/components/VWysiwygEditor/tools/history.ts

@@ -1,26 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { History, HistoryOptions } from '@tiptap/extension-history';
-
-export const WysiwygHistoryTool: WysiwygEditorToolFactory<HistoryOptions> = (
-  vui,
-  options,
-) => {
-  const undo: WysiwygEditorTool = {
-    key: 'history-undo',
-    icon: vui.icon('editorUndo'),
-    disabled: ({ editor }) => !editor.can().undo(),
-    onClick: ({ editor }) => {
-      editor.chain().focus().undo().run();
-    },
-    extensions: [History.configure(options)],
-  };
-  const redo: WysiwygEditorTool = {
-    key: 'history-redo',
-    icon: vui.icon('editorRedo'),
-    disabled: ({ editor }) => !editor.can().redo(),
-    onClick: ({ editor }) => {
-      editor.chain().focus().redo().run();
-    },
-  };
-  return [undo, redo];
-};

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

@@ -1,8 +0,0 @@
-export * from './bullet-list';
-export * from './format-bold';
-export * from './format-italic';
-export * from './format-underline';
-export * from './history';
-export * from './link';
-export * from './ordered-list';
-export * from './color';

package/src/components/VWysiwygEditor/tools/link.ts

@@ -1,57 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import { Link, LinkOptions } from '@tiptap/extension-link';
-import { validateIf, url } from '@fastkit/rules';
-
-export const WysiwygLinkTool: WysiwygEditorToolFactory<LinkOptions> = (
-  vui,
-  options,
-) => {
-  const tool: WysiwygEditorTool = {
-    key: 'link',
-    // icon: ({ editor }) => {
-    //   return vui.icon(editor.isActive('link') ? 'editorLinkOff' : 'editorLink');
-    // },
-    icon: vui.icon('editorLink'),
-    active: ({ editor }) => editor.isActive('link'),
-    // disabled: ({ editor }) => {
-    //   const { $from, $to } = editor.view.state.selection;
-    //   return $to.pos - $from.pos === 0;
-    // },
-    onClick: async ({ vui, editor }) => {
-      const { href = '' } = editor.getAttributes('link');
-      const result = await vui.prompt({
-        input: {
-          label: 'Link URL',
-          rules: [validateIf, url],
-          initialValue: href,
-          size: 'sm',
-          autofocus: true,
-        },
-      });
-
-      if (result === undefined || result === false) {
-        return;
-      }
-
-      const range = editor.chain().focus().extendMarkRange('link');
-
-      if (!result) {
-        range.unsetLink().run();
-      } else {
-        range
-          .setLink({
-            href: result,
-          })
-          .run();
-      }
-    },
-    floating: true,
-    extensions: [
-      Link.configure({
-        openOnClick: false,
-        ...options,
-      }),
-    ],
-  };
-  return tool;
-};

package/src/components/VWysiwygEditor/tools/ordered-list.ts

@@ -1,21 +0,0 @@
-import { WysiwygEditorToolFactory, WysiwygEditorTool } from '../schemes';
-import {
-  OrderedList,
-  OrderedListOptions,
-} from '@tiptap/extension-ordered-list';
-
-export const WysiwygOrderedListTool: WysiwygEditorToolFactory<
-  OrderedListOptions
-> = (vui, options) => {
-  const tool: WysiwygEditorTool = {
-    key: 'orderedList',
-    icon: vui.icon('editorformatListNumbered'),
-    active: ({ editor }) => editor.isActive('orderedList'),
-    onClick: ({ editor }) => {
-      editor.chain().focus().toggleOrderedList().run();
-    },
-    floating: true,
-    extensions: [OrderedList.configure(options)],
-  };
-  return tool;
-};