diff --git a/public/ckeditor/plugins/autogrow/plugin.js b/public/ckeditor/plugins/autogrow/plugin.js new file mode 100644 index 0000000..0ac09bf --- /dev/null +++ b/public/ckeditor/plugins/autogrow/plugin.js @@ -0,0 +1,234 @@ +/** + * @license Copyright (c) 2003-2025, CKSource Holding sp. z o.o. All rights reserved. + * CKEditor 4 LTS ("Long Term Support") is available under the terms of the Extended Support Model. + */ + +/** + * @fileOverview The Auto Grow plugin. + */ + +'use strict'; + +( function() { + CKEDITOR.plugins.add( 'autogrow', { + init: function( editor ) { + // This feature is available only for themed ui instance. + if ( editor.elementMode == CKEDITOR.ELEMENT_MODE_INLINE ) + return; + + editor.on( 'instanceReady', function() { + // Simply set auto height with div wysiwyg. + if ( editor.editable().isInline() ) + editor.ui.space( 'contents' ).setStyle( 'height', 'auto' ); + // For classic (`iframe`-based) wysiwyg we need to resize the editor. + else + initIframeAutogrow( editor ); + } ); + } + } ); + + function initIframeAutogrow( editor ) { + var lastHeight, + doc, + markerContainer, + scrollable, + marker, + configBottomSpace = editor.config.autoGrow_bottomSpace || 0, + configMinHeight = editor.config.autoGrow_minHeight !== undefined ? editor.config.autoGrow_minHeight : 200, + configMaxHeight = editor.config.autoGrow_maxHeight || Infinity, + maxHeightIsUnlimited = !editor.config.autoGrow_maxHeight; + + editor.addCommand( 'autogrow', { + exec: resizeEditor, + modes: { wysiwyg: 1 }, + readOnly: 1, + canUndo: false, + editorFocus: false + } ); + + var eventsList = { contentDom: 1, key: 1, selectionChange: 1, insertElement: 1, mode: 1 }; + for ( var eventName in eventsList ) { + editor.on( eventName, function( evt ) { + // Some time is required for insertHtml, and it gives other events better performance as well. + if ( evt.editor.mode == 'wysiwyg' ) { + setTimeout( function() { + if ( isNotResizable() ) { + lastHeight = null; + return; + } + + resizeEditor(); + + // Second pass to make correction upon the first resize, e.g. scrollbar. + // If height is unlimited vertical scrollbar was removed in the first + // resizeEditor() call, so we don't need the second pass. + if ( !maxHeightIsUnlimited ) + resizeEditor(); + }, 100 ); + } + } ); + } + + // Coordinate with the "maximize" plugin. (https://dev.ckeditor.com/ticket/9311) + editor.on( 'afterCommandExec', function( evt ) { + if ( evt.data.name == 'maximize' && evt.editor.mode == 'wysiwyg' ) { + if ( evt.data.command.state == CKEDITOR.TRISTATE_ON ) + scrollable.removeStyle( 'overflow-y' ); + else + resizeEditor(); + } + } ); + + editor.on( 'contentDom', refreshCache ); + + refreshCache(); + + if ( editor.config.autoGrow_onStartup && editor.editable().isVisible() ) { + editor.execCommand( 'autogrow' ); + } + + function refreshCache() { + doc = editor.document; + markerContainer = doc[ CKEDITOR.env.ie ? 'getBody' : 'getDocumentElement' ](); + + // Quirks mode overflows body, standards overflows document element. + scrollable = CKEDITOR.env.quirks ? doc.getBody() : doc.getDocumentElement(); + + // Reset scrollable body height and min-height css values. + // While set by outside code it may break resizing. (https://dev.ckeditor.com/ticket/14620) + var body = CKEDITOR.env.quirks ? scrollable : scrollable.findOne( 'body' ); + if ( body ) { + body.setStyle( 'height', 'auto' ); + body.setStyle( 'min-height', CKEDITOR.env.safari ? '0%' : 'auto' ); // Safari does not support 'min-height: auto'. + } + + marker = CKEDITOR.dom.element.createFromHtml( + '' + + ( CKEDITOR.env.webkit ? ' ' : '' ) + + '', + doc ); + } + + function isNotResizable() { + var maximizeCommand = editor.getCommand( 'maximize' ); + + return ( + !editor.window || + // Disable autogrow when the editor is maximized. (https://dev.ckeditor.com/ticket/6339) + maximizeCommand && maximizeCommand.state == CKEDITOR.TRISTATE_ON + ); + } + + // Actual content height, figured out by appending check the last element's document position. + function contentHeight() { + // Append a temporary marker element. + markerContainer.append( marker ); + var height = marker.getDocumentPosition( doc ).y + marker.$.offsetHeight; + marker.remove(); + + return height; + } + + function resizeEditor() { + // Hide scroll because we won't need it at all. + // Thanks to that we'll need only one resizeEditor() call per change. + if ( maxHeightIsUnlimited ) + scrollable.setStyle( 'overflow-y', 'hidden' ); + + var currentHeight = editor.window.getViewPaneSize().height, + newHeight = contentHeight(); + + // Additional space specified by user. + newHeight += configBottomSpace; + newHeight = Math.max( newHeight, configMinHeight ); + newHeight = Math.min( newHeight, configMaxHeight ); + + // https://dev.ckeditor.com/ticket/10196 Do not resize editor if new height is equal + // to the one set by previous resizeEditor() call. + if ( newHeight != currentHeight && lastHeight != newHeight ) { + newHeight = editor.fire( 'autoGrow', { currentHeight: currentHeight, newHeight: newHeight } ).newHeight; + + // Set width parameter as null, to update only the height of the editor. (#4891) + editor.resize( null, newHeight, true ); + lastHeight = newHeight; + } + + if ( !maxHeightIsUnlimited ) { + if ( newHeight < configMaxHeight && scrollable.$.scrollHeight > scrollable.$.clientHeight ) + scrollable.setStyle( 'overflow-y', 'hidden' ); + else + scrollable.removeStyle( 'overflow-y' ); + } + } + } +} )(); + +/** + * The minimum height that the editor can assume when adjusting to content by using the Auto Grow + * feature. This option accepts a value in pixels, without the unit (for example: `300`). + * + * Read more in the {@glink features/autogrow documentation} + * and see the {@glink examples/autogrow example}. + * + * config.autoGrow_minHeight = 300; + * + * @since 3.4.0 + * @cfg {Number} [autoGrow_minHeight=200] + * @member CKEDITOR.config + */ + +/** + * The maximum height that the editor can assume when adjusting to content by using the Auto Grow + * feature. This option accepts a value in pixels, without the unit (for example: `600`). + * Zero (`0`) means that the maximum height is not limited and the editor will expand infinitely. + * + * Read more in the {@glink features/autogrow documentation} + * and see the {@glink examples/autogrow example}. + * + * config.autoGrow_maxHeight = 400; + * + * @since 3.4.0 + * @cfg {Number} [autoGrow_maxHeight=0] + * @member CKEDITOR.config + */ + +/** + * Whether automatic editor height adjustment brought by the Auto Grow feature should happen on + * editor creation. + * + * Read more in the {@glink features/autogrow documentation} + * and see the {@glink examples/autogrow example}. + * + * config.autoGrow_onStartup = true; + * + * @since 3.6.2 + * @cfg {Boolean} [autoGrow_onStartup=false] + * @member CKEDITOR.config + */ + +/** + * Extra vertical space to be added between the content and the editor bottom bar when adjusting + * editor height to content by using the Auto Grow feature. This option accepts a value in pixels, + * without the unit (for example: `50`). + * + * Read more in the {@glink features/autogrow documentation} + * and see the {@glink examples/autogrow example}. + * + * config.autoGrow_bottomSpace = 50; + * + * @since 3.6.2 + * @cfg {Number} [autoGrow_bottomSpace=0] + * @member CKEDITOR.config + */ + +/** + * Fired when the Auto Grow plugin is about to change the size of the editor. + * + * @event autogrow + * @member CKEDITOR.editor + * @param {CKEDITOR.editor} editor This editor instance. + * @param data + * @param {Number} data.currentHeight The current editor height (before resizing). + * @param {Number} data.newHeight The new editor height (after resizing). It can be changed + * to achieve a different height value to be used instead. + */ diff --git a/public/ckeditor/plugins/autogrow/samples/autogrow.html b/public/ckeditor/plugins/autogrow/samples/autogrow.html new file mode 100644 index 0000000..9e285da --- /dev/null +++ b/public/ckeditor/plugins/autogrow/samples/autogrow.html @@ -0,0 +1,124 @@ + + + + + + AutoGrow Plugin — CKEditor Sample + + + + + + + + +

+ CKEditor Samples » Using AutoGrow Plugin +

+
+ This sample is not maintained anymore. Check out its brand new version in CKEditor Examples. +
+
+

+ This sample shows how to configure CKEditor instances to use the + AutoGrow (autogrow) plugin that lets the editor window expand + and shrink depending on the amount and size of content entered in the editing area. +

+

+ In its default implementation the AutoGrow feature can expand the + CKEditor window infinitely in order to avoid introducing scrollbars to the editing area. +

+

+ It is also possible to set a maximum height for the editor window. Once CKEditor + editing area reaches the value in pixels specified in the + autoGrow_maxHeight + configuration setting, scrollbars will be added and the editor window will no longer expand. +

+

+ To add a CKEditor instance using the autogrow plugin and its + autoGrow_maxHeight attribute, insert the following JavaScript call to your code: +

+
+CKEDITOR.replace( 'textarea_id', {
+	extraPlugins: 'autogrow',
+	autoGrow_maxHeight: 800,
+
+	// Remove the Resize plugin as it does not make sense to use it in conjunction with the AutoGrow plugin.
+	removePlugins: 'resize'
+});
+

+ Note that textarea_id in the code above is the id attribute of + the <textarea> element to be replaced with CKEditor. The maximum height should + be given in pixels. +

+
+
+

+ + + +

+

+ + + +

+

+ +

+
+ + + diff --git a/src/components/CKEditor.jsx b/src/components/CKEditor.jsx index 5ff211a..fa92af0 100644 --- a/src/components/CKEditor.jsx +++ b/src/components/CKEditor.jsx @@ -72,7 +72,7 @@ const App = ({ initData = '' }) => { // removeButtons: 'Source', height: '460px', type: 'inline', - // extraPlugins: 'autogrow', + extraPlugins: 'autogrow', // autoGrow_minHeight: 480, // autoGrow_maxHeight: 1000, // defaultLanguage: 'zh-cn', diff --git a/src/views/NewEmail1.jsx b/src/views/NewEmail1.jsx index 42f9ce7..643a216 100644 --- a/src/views/NewEmail1.jsx +++ b/src/views/NewEmail1.jsx @@ -59,7 +59,7 @@ const parseHTMLText = (html) => { } const generateQuoteContent = (mailData, isRichText = true) => { - const html = `

From: ${(mailData.info?.MAI_From || '') + const html = `

From: ${(mailData.info?.MAI_From || '') .replace(//g, '>')}

Sent: ${ mailData.info?.MAI_SendDate || ''