//TH-Header
//*****************************************************************************************
// Copyright (c)  2023 Antwise Solutions
// All rights reserved.
//
// $FileName    : SyncFusion\AppSrc\csfWebRichTextEditor.pkg
// $ProjectName : SyncFusion Library
// $Authors     : Wil van Antwerpen
// $Created     : 2023-07-18
//
// Contents:
// This is a web framework wrapper class for the Rich text editor control.
// Documentation for the API is here:
// https://helpej2.syncfusion.com/documentation/api/rich-text-editor
// and tips & tricks here:
// https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/getting-started
// Syncfusion demo's:
// https://ej2.syncfusion.com/javascript/demos/#/material/rich-text-editor/rich-text-editor.html
//
//*****************************************************************************************
//TH-RevisionStart
// ********************
// MODIFICATION SUMMARY
// ********************
// ####### DD/MM/YYYY  WHO COMMENT
//TH-RevisionEnd
Use csfWebBaseForm.pkg

{ HelpTopic=cWebEdit }
{ DesignerJSClass=df.WebEdit }
Class csfWebRichTextEditor Is a csfWebBaseForm
    
    Procedure Construct_Object
        Forward Send Construct_Object
        
        //
        // Specifies the maximum number of characters allowed in the Rich Text Editor component.
        // Defaults to -1
        { WebProperty=Client }
        Property Integer piMaxLength                  C_WebDefault
        
        //
        // Returns the maximum number of characters in the Rich Text Editor.
        // Defaults to -1 (read only!)
        { WebProperty=Client }
        Property Integer piCharCount                  C_WebDefault
        
        //
        // Can be used to (web)get/(web)set the html value in the editor
        //
        { WebProperty=Client }
        Property String  psValue                      ""
        
        // specifies the value whether the source code is displayed with encoded format.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbEnableHtmlEncode           False
        
        // Defines whether to allow the cross-scripting site or not.
        // Defaults to True
        { WebProperty=Client }
        Property Boolean pbEnableHtmlSanitizer        True
        
        // Enables or disables the resizing option in the editor.
        // If enabled, the Rich Text Editor can be resized by dragging the resize icon in the bottom right corner.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbEnableResize               False
        
        //
        // Allows the tab key action in the Rich Text Editor content.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbEnableTabKey               False

        //
        //
        { WebProperty=Client }
        Property Boolean pbEnabled                    True
        
        //
        // The user interactions on the component are disabled, when set to true.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbReadOnly                   False
        
        //
        // Sets Boolean value to enable or disable the display of the character counter.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbShowCharCount              False
        
        //
        // Specify the value whether tooltip will be displayed for the Rich Text Editor toolbar.
        // Defaults to False
        { WebProperty=Client }
        Property Boolean pbShowTooltip                False
        
        //
        // Specifies tag to be inserted when enter key is pressed.
        //
        // P - When the enter key is pressed a p tag will be inserted and the default value of
        //     the Rich Text Editor will be <p><br></p>.
        // DIV - When the enter key is pressed a div tag will be inserted instead of the default P tag
        //     and the default value of the Rich Text Editor will be <div><br></div>.
        // BR - When the enter key is pressed a br tag will be inserted instead of the default P tag and
        //     the default value of the Rich Text Editor will be <br>.
        //
        // Default = "P"
        { EnumList="P, DIV, BR" }
        { InitialValue="P" }
        { WebProperty=Client }
        Property String psEnterKey                    "P"
        
        //
        // Specifies the extensions of the image types allowed to insert on bowering and
        // passing the extensions with comma separators. For example, pass allowedTypes as .jpg and .png.
        //
        // Default = ".jpeg, .jpg, .png"
        { WebProperty=Client }
        Property String psImageAllowedTypes           ".jpeg, .jpg, .png"
        
        //
        // Sets the default display for an image when it is inserted in to the RichTextEditor.
        // Possible options are: "inline" and "block"
        //
        // Default = "inline"
        { WebProperty=Client }
        Property String psImageDisplay                "inline"
        
        //
        // Specifies the format to store the image in the Rich Text Editor (Base64 or Blob).
        //
        // Default = "Blob"
        { EnumList="Blob, Base64" }
        { InitialValue="Blob" }
        { WebProperty=Client }
        Property String psImageSaveFormat             "Base64"
        
        //
        // Specifies the service URL of save action that will receive the uploaded files and
        // save them in the server.
        //
        // Default = ""
        { WebProperty=Client }
        Property String psImageSaveUrl                ""
        
        //
        // Specifies the path of the location to store the images and refer it to display the images.
        // Default = ""
        { WebProperty=Client }
        Property String psImagePath                   ""
        
        // Specifies tags to be inserted when shift+enter key is pressed.
        //
        //   BR - When the shift + enter key is pressed a br tag will be inserted which is the default behavior.
        //   P - When the shift + enter key is pressed a p tag will be inserted instead of the default br tag.
        //   DIV - When the shift + enter key is pressed a div tag will be inserted instead of the default br tag.
        //
        // Default = "BR"
        { EnumList="P, DIV, BR" }
        { InitialValue="BR" }
        { WebProperty=Client }
        Property String psShiftEnterKey               'BR'

        
        // Specifies whether to render toolbar in RichTextEditor.
        // Defaults to true
        { WebProperty=Client } 
        Property Boolean pbToolbarEnable              True
        
        // Specifies whether to enable/disable floating toolbar.
        // Defaults to true
        { WebProperty=Client } 
        Property Boolean pbToolbarEnableFloating      True

        // determine Toolbar Items 
        //  Provide a string with valid toolbar Item names, separated by comma , and do not enclose item names between single-quotes. 
        //  See also: https://ej2.syncfusion.com/javascript/documentation/rich-text-editor/toolbar
        // Example: 
        //   Set psToolbarItems to "Bold, Italic, Underline, StrikeThrough,FontColor, BackgroundColor, LowerCase, UpperCase, |, Formats, Alignments, Outdent, Indent, |, CreateLink, |, ClearFormat, SourceCode, |, Undo, Redo"  
        { WebProperty=Client } 
        Property String psToolbarItems ""
        
        // Specifies the Toolbar display types. The possible types are:
        // Expand: Toolbar items placed within the available space and rest of the items are placed to the extended menu section.
        // MultiRow: Toolbar which placed at top of Rich Text Editor editing area.
        // Scrollable: All the toolbar items are displayed in a single line with horizontal scrolling enabled.
        { EnumList="Expand, MultiRow, Scrollable" }
        { InitialValue="MultiRow" }
        { WebProperty=Client } 
        Property String psToolbarType "MultiRow"
        
        
        // *** Events enable/disable part 
        
        
        // enable/disable onActionComplete event
        // The event itself is currently not implemented!
        { WebProperty=Client }
        Property Boolean pbServerOnActionComplete     False
        
        // enable/disable onBeforeImageDrop event
        // The event itself is currently not implemented!
        { WebProperty=Client }
        Property Boolean pbServerOnBeforeImageDrop    False
        
        // enable/disable onBeforeImageUpload event
        // The event itself is currently not implemented!
        { WebProperty=Client }
        Property Boolean pbServerOnBeforeImageUpload    False
        
        // enable/disable onChange event
        { WebProperty=Client }
        Property Boolean pbServerOnTextChange         False
        
        // enable/disable onCreated event
        { WebProperty=Client }
        Property Boolean pbServerOnCreated            False
        
        // enable/disable OnImageRemoving event
        { WebProperty=Client }
        Property Boolean pbServerOnImageRemoving      False
        
        // enable/disable OnImageSelected event
        { WebProperty=Client }
        Property Boolean pbServerOnImageSelected      False
        
        // enable/disable OnImageUploadFailed event
        { WebProperty=Client }
        Property Boolean pbServerOnImageUploadFailed  False
        
        // enable/disable OnImageUploadSuccess event
        { WebProperty=Client }
        Property Boolean pbServerOnImageUploadSuccess False
        
        // enable/disable OnImageUploading event
        { WebProperty=Client }
        Property Boolean pbServerOnImageUploading     False
        
        // enable/disable pbServerOnQuickToolbarClose event
        // The event itself is currently not implemented!
        { WebProperty=Client }
        Property Boolean pbServerOnQuickToolbarClose  False
        
        // enable/disable pbServerOnQuickToolbarOpen event
        // The event itself is currently not implemented!
        { WebProperty=Client }
        Property Boolean pbServerOnQuickToolbarOpen   False
        
        
        Set psJSClass To "sf.WebRichTextEditor"
        Set piColumnSpan to 0                       // Schedule will span the whole width by default (0 does this)
        Set piHeight To 550
    End_Procedure

    Procedure unloadEditor
        String[] sData
        Send ClientAction "unloadEditor"
    End_Procedure

    // Hook that can be used to load data or to do any post configure 
    // actions.
    Procedure onPostConfigureEditor
    End_Procedure
    
    { Visibility=Private }
    Procedure doPostConfigureEditor
         Send onPostConfigureEditor
    End_Procedure
    
    Procedure RefindDDOData
        Handle hoDDO
        Integer iFile iField
        Boolean bActive bAppSynching bHasRecord
        
        Get Active_State to bActive
        Get AppSynching to bAppSynching
    
        If (bActive and not(bAppSynching)) Begin
            Get Server to hoDDO
            Get Data_File to iFile
            Get Data_Field to iField
            If ((hoDDO<>0) and (iFile<>0) and (iField<>0)) Begin
                Get HasRecord of hoDDO to bHasRecord
                If (bHasRecord) Begin
                    // Not sure if we can trust the DD buffer at this moment in time, do a refind to
                    // take away any doubt.
                    Send Refind_Records of hoDDO
                    // and request_assign so that the framework puts the psValue in our control.
                    Send Request_Assign of hoDDO
                End
                Else Begin
                    Set psValue to ""
                End
            End
        End
    End_Procedure
    
    Procedure doRenderEditor
        Send OnRender
        Send ClientAction "renderEditor"
        //
        // If the control was databound then the refresh method might have tried to webset the psValue before the
        // control was rendered. Let's do that again, now the control actually exists.
        //
        Send RefindDDOData
    End_Procedure
    
    Procedure InsertText String sText
        String[] aParams
        tWebValueTree tVT
        
        Move sText To aParams[0]
        Send ClientAction "insertText" aParams tVT
    End_Procedure
    
    Procedure InsertHtml String sHtml
        String[] aParams
        tWebValueTree tVT
        
        Move sHtml To aParams[0]
        Send ClientAction "insertHtml" aParams tVT
    End_Procedure
    
    
    { Visibility=Private }
    Procedure ConfigureRichTextEditor
        String[] asParams
        tWebValueTree tVT
        
        Send ClientAction "configureRichTextEditor" asParams tVT
        Send doPostConfigureEditor
        Send doRenderEditor
    End_Procedure
    
    // Augment to make sure ConfigureRichTextEditor is allowed when the control is disabled as well.
    { Visibility=Private }
    Procedure AllowServerAction Boolean  ByRef bAllow String sMethodName Handle hoMessage Boolean bIsFunction
        If (hoMessage = RefProc(ConfigureRichTextEditor)) Begin
            Get IsControlAccessible False True to bAllow
        End
        Else Begin
            Forward Send AllowServerAction (&bAllow) sMethodName hoMessage bIsFunction
        End
    End_Procedure
    
    
    //
    // Executes before we ask the rte to render itself.
    //
    Procedure OnRender
    End_Procedure
    
    // Triggers when the component in the browser is created. (needs to be enabled)
    { MethodType=Event }
    Procedure OnCreated
    End_Procedure
    
    // Triggers only when Rich Text Editor is blurred and changes are done to the content
    // since last blur.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnChange Boolean bIsInteracted
    End_Procedure
    
    //
    // Event triggers when the selected image is cleared from the insert image dialog.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnImageRemoving
    End_Procedure
    
    //
    // Event triggers when the image is selected or dragged into the insert image dialog.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnImageSelected
    End_Procedure
    
    //
    // Event triggers when there is an error in the image upload.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnImageUploadFailed
    End_Procedure
    
    //
    // Event triggers when the image is successfully uploaded to the server side.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnImageUploadSuccess
    End_Procedure
    
    //
    // Event triggers when the selected image begins to upload in the insert image dialog.
    // (needs to be enabled)
    { MethodType=Event }
    Procedure OnImageUploading
    End_Procedure
    
    Procedure End_Construct_Object
        WebPublishProcedure ConfigureRichTextEditor
        WebPublishProcedure OnCreated
        WebPublishProcedure OnChange
        WebPublishProcedure OnImageRemoving
        WebPublishProcedure OnImageSelected
        WebPublishProcedure OnImageUploadFailed
        WebPublishProcedure OnImageUploadSuccess
        WebPublishProcedure OnImageUploading
        Forward Send End_Construct_Object
    End_Procedure


End_Class