Refactor #3922 - For Editor

api-generator/components/editor.js

@@ -34,6 +34,12 @@ const EditorProps = [
         type: 'object',
         default: 'null',
         description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Uses to pass attributes to DOM elements inside the component.'
     }
 ];
 

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;

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;
 }
 
 /**

components/lib/editor/Editor.vue

@@ -1,53 +1,54 @@
 <template>
-    <div class="p-editor-container">
-        <div ref="toolbarElement" class="p-editor-toolbar">
+    <div class="p-editor-container" v-bind="ptm('root')">
+        <div ref="toolbarElement" class="p-editor-toolbar" v-bind="ptm('toolbar')">
             <slot name="toolbar">
-                <span class="ql-formats">
-                    <select class="ql-header" defaultValue="0">
-                        <option value="1">Heading</option>
-                        <option value="2">Subheading</option>
-                        <option value="0">Normal</option>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-header" defaultValue="0" v-bind="ptm('select')">
+                        <option value="1" v-bind="ptm('option')">Heading</option>
+                        <option value="2" v-bind="ptm('option')">Subheading</option>
+                        <option value="0" v-bind="ptm('option')">Normal</option>
                     </select>
-                    <select class="ql-font">
-                        <option></option>
-                        <option value="serif"></option>
-                        <option value="monospace"></option>
+                    <select class="ql-font" v-bind="ptm('select')">
+                        <option v-bind="ptm('option')"></option>
+                        <option value="serif" v-bind="ptm('option')"></option>
+                        <option value="monospace" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-bold" type="button"></button>
-                    <button class="ql-italic" type="button"></button>
-                    <button class="ql-underline" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-bold" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-italic" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-underline" type="button" v-bind="ptm('button')"></button>
                 </span>
-                <span :key="reRenderColorKey" class="ql-formats">
-                    <select class="ql-color"></select>
-                    <select class="ql-background"></select>
+                <span :key="reRenderColorKey" class="ql-formats" v-bind="ptm('formats')">
+                    <select class="ql-color" v-bind="ptm('select')"></select>
+                    <select class="ql-background" v-bind="ptm('select')"></select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-list" value="ordered" type="button"></button>
-                    <button class="ql-list" value="bullet" type="button"></button>
-                    <select class="ql-align">
-                        <option defaultValue></option>
-                        <option value="center"></option>
-                        <option value="right"></option>
-                        <option value="justify"></option>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-list" value="ordered" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-list" value="bullet" type="button" v-bind="ptm('button')"></button>
+                    <select class="ql-align" v-bind="ptm('select')">
+                        <option defaultValue v-bind="ptm('option')"></option>
+                        <option value="center" v-bind="ptm('option')"></option>
+                        <option value="right" v-bind="ptm('option')"></option>
+                        <option value="justify" v-bind="ptm('option')"></option>
                     </select>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-link" type="button"></button>
-                    <button class="ql-image" type="button"></button>
-                    <button class="ql-code-block" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-link" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-image" type="button" v-bind="ptm('button')"></button>
+                    <button class="ql-code-block" type="button" v-bind="ptm('button')"></button>
                 </span>
-                <span class="ql-formats">
-                    <button class="ql-clean" type="button"></button>
+                <span class="ql-formats" v-bind="ptm('formats')">
+                    <button class="ql-clean" type="button" v-bind="ptm('button')"></button>
                 </span>
             </slot>
         </div>
-        <div ref="editorElement" class="p-editor-content" :style="editorStyle"></div>
+        <div ref="editorElement" class="p-editor-content" :style="editorStyle" v-bind="ptm('content')"></div>
     </div>
 </template>
 
 <script>
+import BaseComponent from 'primevue/basecomponent';
 import { DomHandler } from 'primevue/utils';
 
 const QuillJS = (function () {
@@ -60,6 +61,7 @@ const QuillJS = (function () {
 
 export default {
     name: 'Editor',
+    extends: BaseComponent,
     emits: ['update:modelValue', 'text-change', 'selection-change', 'load'],
     props: {
         modelValue: String,