From aaae9162beda28369411831d84693bbe8e6f4440 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?= Date: Fri, 5 May 2023 13:15:25 +0300 Subject: [PATCH] Refactor #3922 - For Editor --- api-generator/components/editor.js | 6 +++ components/lib/config/PrimeVue.d.ts | 2 + components/lib/editor/Editor.d.ts | 67 ++++++++++++++++++++++++++++ components/lib/editor/Editor.vue | 68 +++++++++++++++-------------- 4 files changed, 110 insertions(+), 33 deletions(-) diff --git a/api-generator/components/editor.js b/api-generator/components/editor.js index f443c2556..e55b2f419 100644 --- a/api-generator/components/editor.js +++ b/api-generator/components/editor.js @@ -34,6 +34,12 @@ const EditorProps = [ type: 'object', default: 'null', description: 'Modules configuration, see here for available options.' + }, + { + name: 'pt', + type: 'any', + default: 'null', + description: 'Uses to pass attributes to DOM elements inside the component.' } ]; diff --git a/components/lib/config/PrimeVue.d.ts b/components/lib/config/PrimeVue.d.ts index 401a76928..96ec2502d 100644 --- a/components/lib/config/PrimeVue.d.ts +++ b/components/lib/config/PrimeVue.d.ts @@ -23,6 +23,7 @@ import { DeferredContentPassThroughOptions } from '../deferredcontent'; import { DialogPassThroughOptions } from '../dialog'; import { DividerPassThroughOptions } from '../divider'; import { DockPassThroughOptions } from '../dock'; +import { EditorPassThroughOptions } from '../editor'; import { FieldsetPassThroughOptions } from '../fieldset'; import { FileUploadPassThroughOptions } from '../fileupload'; import { GalleriaPassThroughOptions } from '../galleria'; @@ -97,6 +98,7 @@ interface PrimeVuePTOptions { dialog?: DialogPassThroughOptions; dock?: DockPassThroughOptions; dynamicdialog?: DialogPassThroughOptions; + editor?: EditorPassThroughOptions; fieldset?: FieldsetPassThroughOptions; fileupload?: FileUploadPassThroughOptions; galleria?: GalleriaPassThroughOptions; diff --git a/components/lib/editor/Editor.d.ts b/components/lib/editor/Editor.d.ts index 7aee7c2c8..4b04f3693 100755 --- a/components/lib/editor/Editor.d.ts +++ b/components/lib/editor/Editor.d.ts @@ -9,6 +9,15 @@ */ import { VNode } from 'vue'; import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; +export declare type EditorPassThroughOptionType = EditorPassThroughAttributes | ((options: EditorPassThroughMethodOptions) => EditorPassThroughAttributes) | null | undefined; + +/** + * Custom passthrough(pt) option method. + */ +export interface EditorPassThroughMethodOptions { + props: EditorProps; + state: EditorState; +} /** * Custom text change event. @@ -77,6 +86,59 @@ export interface EditorLoadEvent { instance: any; } +/** + * Custom passthrough(pt) options. + * @see {@link EditorProps.pt} + */ +export interface EditorPassThroughOptions { + /** + * Uses to pass attributes to the root's DOM element. + */ + root?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the toolbar's DOM element. + */ + toolbar?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the formats's DOM element. + */ + formats?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the select's DOM element. + */ + select?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the option's DOM element. + */ + option?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the button's DOM element. + */ + button?: EditorPassThroughOptionType; + /** + * Uses to pass attributes to the content's DOM element. + */ + content?: EditorPassThroughOptionType; +} + +/** + * Custom passthrough attributes for each DOM elements + */ +export interface EditorPassThroughAttributes { + [key: string]: any; +} + +/** + * Defines current inline state in Editor component. + */ +export interface EditorState { + /** + * Current rerendered color key as a number. + * @defaultValue 0 + */ + reRenderColorKey: number; +} + /** * Defines valid properties in Editor component. */ @@ -106,6 +168,11 @@ export interface EditorProps { * Modules configuration, see [here](https://quilljs.com/docs/modules/) for available options. */ modules?: any; + /** + * Uses to pass attributes to DOM elements inside the component. + * @type {EditorPassThroughOptions} + */ + pt?: EditorPassThroughOptions; } /** diff --git a/components/lib/editor/Editor.vue b/components/lib/editor/Editor.vue index 18e81e8a6..b41e2bfe6 100755 --- a/components/lib/editor/Editor.vue +++ b/components/lib/editor/Editor.vue @@ -1,53 +1,54 @@