Refactor #3922 - For Editor

pull/3938/head
Tuğçe Küçükoğlu 2023-05-05 13:15:25 +03:00
parent be019a10dd
commit aaae9162be
4 changed files with 110 additions and 33 deletions

View File

@ -34,6 +34,12 @@ const EditorProps = [
type: 'object', type: 'object',
default: 'null', default: 'null',
description: 'Modules configuration, see <a href="http://quilljs.com/docs/modules/">here</a> for available options.' 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.'
} }
]; ];

View File

@ -23,6 +23,7 @@ import { DeferredContentPassThroughOptions } from '../deferredcontent';
import { DialogPassThroughOptions } from '../dialog'; import { DialogPassThroughOptions } from '../dialog';
import { DividerPassThroughOptions } from '../divider'; import { DividerPassThroughOptions } from '../divider';
import { DockPassThroughOptions } from '../dock'; import { DockPassThroughOptions } from '../dock';
import { EditorPassThroughOptions } from '../editor';
import { FieldsetPassThroughOptions } from '../fieldset'; import { FieldsetPassThroughOptions } from '../fieldset';
import { FileUploadPassThroughOptions } from '../fileupload'; import { FileUploadPassThroughOptions } from '../fileupload';
import { GalleriaPassThroughOptions } from '../galleria'; import { GalleriaPassThroughOptions } from '../galleria';
@ -97,6 +98,7 @@ interface PrimeVuePTOptions {
dialog?: DialogPassThroughOptions; dialog?: DialogPassThroughOptions;
dock?: DockPassThroughOptions; dock?: DockPassThroughOptions;
dynamicdialog?: DialogPassThroughOptions; dynamicdialog?: DialogPassThroughOptions;
editor?: EditorPassThroughOptions;
fieldset?: FieldsetPassThroughOptions; fieldset?: FieldsetPassThroughOptions;
fileupload?: FileUploadPassThroughOptions; fileupload?: FileUploadPassThroughOptions;
galleria?: GalleriaPassThroughOptions; galleria?: GalleriaPassThroughOptions;

View File

@ -9,6 +9,15 @@
*/ */
import { VNode } from 'vue'; import { VNode } from 'vue';
import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers'; 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. * Custom text change event.
@ -77,6 +86,59 @@ export interface EditorLoadEvent {
instance: any; 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. * 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 configuration, see [here](https://quilljs.com/docs/modules/) for available options.
*/ */
modules?: any; modules?: any;
/**
* Uses to pass attributes to DOM elements inside the component.
* @type {EditorPassThroughOptions}
*/
pt?: EditorPassThroughOptions;
} }
/** /**

View File

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