@fastkit/vui 0.7.56 → 0.7.61

package/src/components/VWysiwygEditor/index.ts

@@ -1,3 +1,4 @@
 export * from './VWysiwygEditor';
+export * from './extensions';
 export * from './tools';
 export * from './schemes';

package/src/components/VWysiwygEditor/schemes.ts

@@ -1,12 +1,116 @@
 import { type VuiService } from '../../service';
-import { type Editor, type Extensions } from '@tiptap/vue-3';
+import {
+  type Editor,
+  type Extensions,
+  type AnyExtension,
+  type EditorOptions,
+} from '@tiptap/vue-3';
 import { type IconName } from '../VIcon';
 
+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;
+
+  constructor(opts: WysiwygEditorEventsOptions = {}) {
+    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 = (
+  ctx: WysiwygEditorInitializeContext,
+) => AnyExtension;
+
+export type RawWysiwygExtension = AnyExtension | WysiwygExtensionFactory;
+
+function resolveRawWysiwygExtension(
+  raw: RawWysiwygExtension,
+  ctx: WysiwygEditorInitializeContext,
+): AnyExtension {
+  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);
@@ -39,13 +143,13 @@ export interface ResolvedWysiwygEditorSettings {
 }
 
 export function resolveRawWysiwygEditorTools(
-  raws: RawWysiwygEditorTool[],
+  rawTools: RawWysiwygEditorTool[],
   vui: VuiService,
 ): ResolvedWysiwygEditorSettings {
   const tools: WysiwygEditorTool[] = [];
   const extensions: Extensions = [];
 
-  raws.forEach((raw) => {
+  rawTools.forEach((raw) => {
     let resolved = resolveRawWysiwygEditorTool(raw, vui);
     if (!Array.isArray(resolved)) {
       resolved = [resolved];