@fastkit/vui 0.7.59 → 0.7.65

package/dist/vui.css

@@ -2118,6 +2118,9 @@ thead th {
 .v-wysiwyg-editor__wrapper {
   position: relative;
 }
+.v-wysiwyg-editor .v-control-field__body {
+  width: 100%;
+}
 .v-wysiwyg-editor__floating-toolbar {
   position: absolute;
   right: 0;
@@ -2150,6 +2153,222 @@ thead th {
 .v-wysiwyg-editor--disabled-max-heihgt .v-wysiwyg-editor__body {
   max-height: none;
 }
+.v-linter__problem {
+  margin-bottom: -1px;
+  cursor: help;
+  background: var(--deep-color);
+  border-bottom: 1px solid var(--main-color);
+}
+.v-linter__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;
+  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;
+}
+.v-linter__issue-icon::before {
+  content: "!";
+}
+.v-linter__issue-menu-wrapper {
+  position: relative;
+  display: inline-block;
+  width: 0px;
+  height: 1em;
+  overflow: visible;
+}
+.v-linter__issue-menu {
+  font-size: 87.5%;
+  line-height: 1.5;
+}
+.v-linter__issue-menu .v-dialog__body {
+  padding: 0;
+  font-size: inherit;
+}
+.v-linter__issue-menu__message {
+  padding: 8px;
+}
+.v-linter__issue-menu__fixers {
+  position: relative;
+  padding: 4px 0;
+}
+.v-linter__issue-menu__fixers::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: block;
+  height: 1px;
+  content: "";
+  background: currentColor;
+  opacity: 0.5;
+}
+.v-linter__issue-menu__fixer__button {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding: 8px;
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-linter__issue-menu__fixer__button::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
+  opacity: 0;
+  transition: 0.15s;
+}
+.v-linter__issue-menu__fixer__button:hover::before, .v-linter__issue-menu__fixer__button:focus::before {
+  opacity: 0.1;
+}
+.v-linter__issue-menu__fixer__button__message {
+  position: relative;
+}
+.v-linter__issue-menu__fix {
+  display: inline;
+  margin-top: 8px;
+  color: var(--palette-link);
+  text-decoration: underline;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  outline: 0;
+  appearance: none;
+}
+:root {
+  --v-wysiwyg-color-tool: 30px;
+}
+
+.v-wysiwyg-color-tool__button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  vertical-align: bottom;
+}
+.v-wysiwyg-color-tool__button__bar {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  height: 2px;
+  background: currentColor;
+}
+.v-wysiwyg-color-tool__menu .v-dialog__content {
+  min-width: 0;
+}
+.v-wysiwyg-color-tool__menu .v-dialog__body {
+  padding: 2px;
+}
+.v-wysiwyg-color-tool__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;
+}
+.v-wysiwyg-color-tool__items--with-label {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  max-width: none;
+  padding: 2px;
+}
+.v-wysiwyg-color-tool__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;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 0;
+  outline: 0;
+  appearance: none;
+}
+.v-wysiwyg-color-tool__item__color {
+  position: relative;
+  flex: 0 0 var(--item-size);
+  width: var(--item-size);
+  height: var(--item-size);
+}
+.v-wysiwyg-color-tool__item__color::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
+  border: solid 1px transparent;
+  transition: all 0.15s;
+}
+.v-wysiwyg-color-tool__item__name {
+  position: relative;
+  padding: 0 8px;
+  font-size: 12px;
+  white-space: nowrap;
+}
+.v-wysiwyg-color-tool__item:hover .v-wysiwyg-color-tool__item__color::before, .v-wysiwyg-color-tool__item:focus .v-wysiwyg-color-tool__item__color::before {
+  top: var(--focus-offset);
+  right: var(--focus-offset);
+  bottom: var(--focus-offset);
+  left: var(--focus-offset);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item {
+  flex-basis: auto;
+  width: auto;
+  width: 100%;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item::before {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: block;
+  content: "";
+  background: currentColor;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item:hover::before, .v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item:focus::before {
+  opacity: 0.1;
+}
+.v-wysiwyg-color-tool__items--with-label .v-wysiwyg-color-tool__item + .v-wysiwyg-color-tool__item {
+  margin-top: 2px;
+}
 .v-tabs {
   position: relative;
   width: 100%;

package/dist/vui.d.ts

@@ -1,4 +1,5 @@
 import { AllowedComponentProps } from 'vue';
+import { AnyExtension } from '@tiptap/vue-3';
 import { App } from 'vue';
 import { BoldOptions } from '@tiptap/extension-bold';
 import { BulletListOptions } from '@tiptap/extension-bullet-list';
@@ -10,8 +11,12 @@ import { ComputedRef } from 'vue';
 import { CSSProperties } from 'vue';
 import { DefineComponent } from 'vue';
 import { Editor } from '@tiptap/vue-3';
+import { EditorOptions } from '@tiptap/vue-3';
+import { EditorView } from 'prosemirror-view';
 import { EmitsOptions } from 'vue';
 import { EV } from '@fastkit/ev';
+import { Extension } from '@tiptap/vue-3';
+import { Extension as Extension_2 } from '@tiptap/core';
 import { Extensions } from '@tiptap/vue-3';
 import { ExtractPropInput } from '@fastkit/vue-utils';
 import { ExtractPropTypes } from 'vue';
@@ -40,9 +45,12 @@ import { InjectionKey } from 'vue';
 import { ItalicOptions } from '@tiptap/extension-italic';
 import { LinkOptions } from '@tiptap/extension-link';
 import { LocationService } from '@fastkit/vue-utils';
+import { Mark } from '@tiptap/vue-3';
 import { MediaMatchKey } from '@fastkit/media-match';
 import { NavigationableInheritProps } from '@fastkit/vue-utils';
 import { NavigationFailure } from 'vue-router';
+import { Node as Node_2 } from '@tiptap/vue-3';
+import { Node as Node_3 } from 'prosemirror-model';
 import { Numberish } from '@fastkit/vue-kit';
 import { OrderedListOptions } from '@tiptap/extension-ordered-list';
 import { Prop } from 'vue';
@@ -469,6 +477,13 @@ export declare function createControlProps(): {
     loading: BooleanConstructor;
 };
 
+export declare interface CreatedWysiwygExtension<Options = any, Storage = any> {
+    __isCreatedWysiwygExtension: true;
+    _configs: Partial<Options>[];
+    configure(options?: Partial<Options>): CreatedWysiwygExtension<Options, Storage>;
+    raw: WysiwygExtensionSource<Options, Storage>;
+}
+
 export declare function createElevationProps(): {
     elevation: PropType<VuiElevationValue>;
 };
@@ -1043,6 +1058,15 @@ export declare function createVFormProps(): {
     errorMessages: PropType<string | string[]>;
 };
 
+export declare function createWysiwygColorTool(opts: CreateWysiwygColorToolOptions): WysiwygEditorToolFactory<void>;
+
+export declare interface CreateWysiwygColorToolOptions {
+    items: WysiwygColorItem[];
+    withLabel?: boolean;
+}
+
+export declare function createWysiwygExtension<Options = any, Storage = any>(extension: WysiwygExtensionSource<Options, Storage>): CreatedWysiwygExtension<Options, Storage>;
+
 declare const DATA_TABLE_DEFAULTS: {
     itemKey: string;
     pageQuery: string;
@@ -1348,6 +1372,8 @@ declare const easings: {
 
 declare type EasingValues = [number, number, number, number];
 
+declare const EDITOR_EVENTS: readonly ["beforeCreate", "create", "update", "selectionUpdate", "transaction", "focus", "blur", "destroy"];
+
 export declare type ElevationProps = ExtractPropTypes<ReturnType<typeof createElevationProps>>;
 
 declare type EmptyIconSymbol = '$empty';
@@ -1456,6 +1482,8 @@ export declare function paginationProps(): {
     color: PropType<ScopeName>;
 };
 
+declare type PrefixedEventName<S extends string> = `on${Capitalize<S>}`;
+
 export declare type RawBreadcrumbsItem = string | BreadcrumbsItem;
 
 declare type RawGridValue<T extends number | string = number | string> = T | Partial<Record<MediaMatchKey, T>> | undefined;
@@ -1466,6 +1494,12 @@ export declare type RawIconProp = IconName | EmptyIconSymbol | ToggleableIconHoo
 
 export declare function rawIconProp(): PropType<RawIconProp>;
 
+declare interface RawLinterResult extends Omit<WysiwygLinterResult, 'level' | 'fix' | 'id' | 'icon'> {
+    level?: WysiwygLinterResultLevel;
+    icon?: boolean;
+    fix?: WysiwygLinterFixer | WysiwygLinterFixer[];
+}
+
 export declare type RawVButtonIcon = IconName | VButtonIcon;
 
 export declare type RawVButtonSpacer = boolean | VButtonSpacer;
@@ -1489,6 +1523,8 @@ export declare type RawVuiServiceUISettings = Partial<VuiServiceUISettings>;
 
 export declare type RawWysiwygEditorTool = WysiwygEditorTool | WysiwygEditorToolFactory<any>;
 
+export declare type RawWysiwygExtension<Options = any, Storage = any> = WysiwygExtensionSource<Options, Storage> | CreatedWysiwygExtension<Options, Storage>;
+
 declare type RecursiveArray<T> = T | RecursiveArray<T>[];
 
 export declare function renderNavigationItemInput(input: NavigationItemInput, extraProps?: Record<string, unknown> & VNodeProps): JSX.Element;
@@ -1505,7 +1541,9 @@ export declare function resolveNavigationItemInput(input: NavigationItemInput):
 
 export declare function resolveRawIconProp(payload: boolean, prop?: RawIconProp, extraProps?: Record<string, unknown> & VNodeProps): VNodeChild;
 
-export declare function resolveRawWysiwygEditorTools(raws: RawWysiwygEditorTool[], vui: VuiService): ResolvedWysiwygEditorSettings;
+export declare function resolveRawWysiwygEditorTools(rawTools: RawWysiwygEditorTool[], vui: VuiService): ResolvedWysiwygEditorSettings;
+
+export declare function resolveRawWysiwygExtensions(raws: RawWysiwygExtension[], ctx: WysiwygEditorInitializeContext): AnyExtension[];
 
 declare interface Rule<C extends any = any> {
     <EC extends C = C>(constraints: Partial<EC>, overRides?: string | Partial<RuleSettings<EC>>): Rule<EC>;
@@ -9530,6 +9568,7 @@ export declare class VuiService {
     alert(...args: Parameters<VueStackService['alert']>): Promise<any>;
     confirm(...args: Parameters<VueStackService['confirm']>): Promise<any>;
     snackbar(...args: Parameters<VueStackService['snackbar']>): Promise<any>;
+    menu(...args: Parameters<VueStackService['menu']>): Promise<any>;
     formPrompt<T extends {
         [key: string]: any;
     } = {
@@ -9578,6 +9617,7 @@ export declare interface VuiServiceUISettings {
     primaryScope: ScopeName;
     plainVariant: ColorVariant;
     containedVariant: ColorVariant;
+    warningScope: ScopeName;
     errorScope: ScopeName;
     buttonDefault: {
         color: ScopeName;
@@ -9608,6 +9648,10 @@ export declare interface VuiServiceUISettings {
 export declare type VuiVNodeResolver = () => VNodeChild;
 
 export declare const VWysiwygEditor: DefineComponent<{
+    extensions: {
+        type: PropType<RawWysiwygExtension<any, any>[]>;
+        default: () => never[];
+    };
     tools: {
         type: PropType<RawWysiwygEditorTool[]>;
         default: () => never[];
@@ -9735,6 +9779,10 @@ export declare const VWysiwygEditor: DefineComponent<{
     focus: (ev: FocusEvent) => boolean;
     blur: (ev: FocusEvent) => boolean;
 }, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    extensions: {
+        type: PropType<RawWysiwygExtension<any, any>[]>;
+        default: () => never[];
+    };
     tools: {
         type: PropType<RawWysiwygEditorTool[]>;
         default: () => never[];
@@ -9839,6 +9887,7 @@ export declare const VWysiwygEditor: DefineComponent<{
     hiddenInfo: boolean;
     errors: FormNodeError[];
     loading: boolean;
+    extensions: RawWysiwygExtension<any, any>[];
     tools: RawWysiwygEditorTool[];
     floatingToolbar: boolean;
     disabledMinHeight: boolean;
@@ -9847,14 +9896,47 @@ export declare const VWysiwygEditor: DefineComponent<{
 
 export declare const WysiwygBulletListTool: WysiwygEditorToolFactory<BulletListOptions>;
 
+export declare const WysiwygColorExtension: Extension_2<WysiwygColorOptions, any>;
+
+export declare interface WysiwygColorItem {
+    key?: string | number;
+    name?: VNodeChild | ((vui: VuiService) => VNodeChild);
+    color: string | null;
+}
+
+export declare type WysiwygColorOptions = {
+    types: string[];
+};
+
 export declare interface WysiwygEditorContext {
     editor: Editor;
     vui: VuiService;
 }
 
+export declare type WysiwygEditorEvent = typeof EDITOR_EVENTS[number];
+
+export declare type WysiwygEditorEventsBucket = {
+    [EV in WysiwygEditorEvent]: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>[];
+};
+
+export declare interface WysiwygEditorEventsOptions extends Partial<Pick<EditorOptions, WysiwygEditorPrefixedEvent>> {
+}
+
+export declare class WysiwygEditorInitializeContext {
+    readonly listeners: WysiwygEditorEventsBucket;
+    private readonly _vui;
+    get vui(): VuiService;
+    constructor(vuiGetter: () => VuiService, opts?: WysiwygEditorEventsOptions);
+    on<EV extends WysiwygEditorEvent>(ev: EV, handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>): () => void;
+    off<EV extends WysiwygEditorEvent>(ev: EV, handler: NonNullable<WysiwygEditorEventsOptions[PrefixedEventName<EV>]>): void;
+    editorOptions(): WysiwygEditorEventsOptions;
+}
+
+export declare type WysiwygEditorPrefixedEvent = PrefixedEventName<WysiwygEditorEvent>;
+
 export declare interface WysiwygEditorTool {
     key: string;
-    icon: IconName | ((ctx: WysiwygEditorContext) => IconName);
+    icon: IconName | ((ctx: WysiwygEditorContext) => IconName | (() => VNodeChild));
     active?: boolean | ((ctx: WysiwygEditorContext) => boolean);
     disabled?: boolean | ((ctx: WysiwygEditorContext) => boolean);
     onClick: (ctx: WysiwygEditorContext, ev: MouseEvent) => any;
@@ -9864,6 +9946,10 @@ export declare interface WysiwygEditorTool {
 
 export declare type WysiwygEditorToolFactory<Options = void> = (vui: VuiService, options?: Options) => WysiwygEditorTool | WysiwygEditorTool[];
 
+export declare type WysiwygExtensionFactory<Options = any, Storage = any> = (ctx: WysiwygEditorInitializeContext) => Extension<Options, Storage> | Node_2<Options, Storage> | Mark<Options, Storage>;
+
+export declare type WysiwygExtensionSource<Options = any, Storage = any> = Extension<Options, Storage> | Node_2<Options, Storage> | Mark<Options, Storage> | WysiwygExtensionFactory<Options, Storage>;
+
 export declare const WysiwygFormatBoldTool: WysiwygEditorToolFactory<BoldOptions>;
 
 export declare const WysiwygFormatItalicTool: WysiwygEditorToolFactory<ItalicOptions>;
@@ -9874,9 +9960,60 @@ export declare const WysiwygHistoryTool: WysiwygEditorToolFactory<HistoryOptions
 
 export declare const WysiwygLinkTool: WysiwygEditorToolFactory<LinkOptions>;
 
-export declare const WysiwygOrderedListTool: WysiwygEditorToolFactory<OrderedListOptions>;
+export declare const WysiwygLinter: CreatedWysiwygExtension<WysiwygLinterOptions, WysiwygLinterStorage>;
+
+export declare function WysiwygLinterBadWords(words: string[]): typeof WysiwygLinterPlugin;
+
+declare interface WysiwygLinterFixer {
+    message: WysiwygLinterFixMessage;
+    handler: WysiwygLinterFixFn;
+}
+
+declare type WysiwygLinterFixFn = (view: EditorView, issue: WysiwygLinterResult) => any;
+
+declare type WysiwygLinterFixMessage = string | (() => VNodeChild);
+
+export declare class WysiwygLinterHeadingLevel extends WysiwygLinterPlugin {
+    fixHeader(level: number): ({ state, dispatch }: EditorView, issue: WysiwygLinterResult) => void;
+    scan(): this;
+}
 
-export declare const WysiwygTextColorTool: WysiwygEditorToolFactory;
+export declare interface WysiwygLinterOptions {
+    plugins: Array<typeof WysiwygLinterPlugin>;
+}
+
+export declare class WysiwygLinterPlugin {
+    protected doc: Node_3;
+    private results;
+    constructor(doc: Node_3);
+    record(result: RawLinterResult): void;
+    scan(): this;
+    getResults(): WysiwygLinterResult[];
+}
+
+export declare class WysiwygLinterPunctuation extends WysiwygLinterPlugin {
+    regex: RegExp;
+    fix(replacement: any): ({ state, dispatch }: EditorView, issue: WysiwygLinterResult) => void;
+    scan(): this;
+}
+
+declare interface WysiwygLinterResult {
+    id: string;
+    icon: boolean;
+    level: WysiwygLinterResultLevel;
+    message: WysiwygLinterFixMessage;
+    from: number;
+    to: number;
+    fix: WysiwygLinterFixer[];
+}
+
+declare type WysiwygLinterResultLevel = 'warning' | 'error';
+
+declare interface WysiwygLinterStorage {
+    issues: WysiwygLinterResult[];
+}
+
+export declare const WysiwygOrderedListTool: WysiwygEditorToolFactory<OrderedListOptions>;
 
 
 export * from "@fastkit/vue-kit";