B4J Question [ABMaterial] - ABMEditor - HTML TEXT

Harris · Jan 31, 2022

WARNING: Text was last set as RAW HTML, so the result of .Text can be unpredictable
This statement ( unpredictable ) is very true... depending on findings below.

This is in use with ABMEditor.

B4X:

' Right code - works fine - SIZE_CUSTOM
Dim agnitemslbl1 As ABMLabel
        agnitemslbl1.Initialize(page,"ablbl1"&i,"",ABM.SIZE_CUSTOM,False,"")
        agnitemslbl1.Text = ""

'  wrong code - creates a duplicate of label text problem - SIZE_PARAGRAPH
        Dim agnitemslbl1 As ABMLabel
       agnitemslbl1.Initialize(page,"ablbl1"&i,"",ABM.SIZE_PARAGRAPH,False,"")
        agnitemslbl1.Text = ""

I only get the above WARNING when the Log () is presented when coming from a phone or a tablet.
When running the same on a desktop, this warning is not presented...

Also, if I use the "wrong code" on a phone or tablet (Android), each item is duplicated. On a desktop - it is not. ( @alwaysbusy stated that SIZE_CUSTOM is a simple <div> )

I have followed the recommendations from all posts regarding ABMEditor and can (eventually) make it work to expectations, but I am left bewildered of the hoops required to get the desired results.

This is what is stored in my DB to populate the ABMLabel to format correctly...

B4X:

<div>A discussion was held about the <u>permanent expulsion</u> of Peter Brown and Robert Palmer and whether they should be allowed back. – <b><u>this was deemed a non-issue</u></b>.<br></div>

The above stored data can get much more complicated than that...

Thanks for any info and enlightenment...

alwaysbusy · Jan 31, 2022

I just checked in my code where I use it too, and this works:

B4X:

lbl1.Initialize(Page, Name & "recA" & i, "", ABM.SIZE_H6, False, "")
lbl1.TextAsRAWHTML = $"<i style="color: #${DBMTypes.GetIconColor(mIconTable, TypeID)};width:24px;text-align:center" class="${DBMTypes.GetIcon(mIconTable, TypeID)}"></i><b>"$ & txt1 & "</b>"

The thing is, once you use TextAsRAWHTML on a label, you shouldn't use .Text anymore

As for ABMEditor, you can also use this custom component as an alternative I wrote (for ABM 4.95) and use GetHTML/SetHTML:

B4X:

'Class module
Sub Class_Globals
    Public ABMComp As ABMCustomComponent
    Public myID As String
    Private EvName As String
    Private fPrint As Boolean
End Sub
 
'Initializes the object. You can add parameters to this method if needed.
Public Sub Initialize(InternalPage As ABMPage, ID As String, EventName As String, ForPrint As Boolean, HeightCSS As String)
    EvName = EventName.ToLowerCase
    fPrint = ForPrint
    ABMComp.Initialize("ABMComp", Me, InternalPage, ID, HeightCSS)    
    ABMComp.RawBuild = True
End Sub
 
Sub ABMComp_Build(InternalPage As ABMPage, internalID As String) As String
    Dim varID As String = internalID.Replace("-", "_")
    myID = varID
    Return $"<div id='${varID}-parent' class="only-print"><div id='${varID}'></div></div>"$
End Sub
 
' Is useful to run some initalisation script.
Sub ABMComp_FirstRun(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_")
    Log(varID)
    Dim script As String
    If fPrint Then
        script = $"var editor = new ABMQuill().QuillInitForPrint('#${varID}', '${EvName}');"$
    Else
        script = $"var editor = new ABMQuill().QuillInitEdit('#${varID}', '${EvName}');"$
    End If        
 
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    ' flush not needed, it's done in the refresh method in the lib
End Sub

Sub SetHTML(InternalPage As ABMPage, html As String)
    html = html.Replace("'", "\'").Replace(Chr(13), Chr(10)).Replace(Chr(10), "<br>")
    
    'Log(html)
    
    Dim script As String = $"var editor = Quills['#${myID}'];
    editor.SetInitialHTML('${html}');    
    "$
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    InternalPage.ws.Flush
End Sub

Sub IsDirty(InternalPage As ABMPage) As Boolean
    Dim script As String = $"var editor = Quills['#${myID}']
    return editor.IsDirty;
    "$
    Dim fut As Future = InternalPage.ws.EvalWithResult(script, Array As Object(ABMComp.ID))
    Return fut.Value
End Sub

Sub GetText(InternalPage As ABMPage) As String
    Dim script As String = $"var editor = Quills['#${myID}']
    return editor.GetText();
    "$
    Dim fut As Future = InternalPage.ws.EvalWithResult(script, Array As Object(ABMComp.ID))
    Return fut.Value
End Sub

Sub GetContents(InternalPage As ABMPage) As String
    Dim script As String = $"var editor = Quills['#${myID}']
    return editor.GetContents();
    "$
    Dim fut As Future = InternalPage.ws.EvalWithResult(script, Array As Object(ABMComp.ID))
    Return fut.Value
End Sub

Sub SetContents(InternalPage As ABMPage, json As String)
    Dim script As String = $"var editor = Quills['#${myID}'];
    editor.SetContents(${json});    
    "$
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    InternalPage.ws.Flush
End Sub
 
Sub SetFocus(InternalPage As ABMPage)
    Dim script As String = $"var editor = Quills['#${myID}'];
    editor.SetFocus();    
    "$
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    InternalPage.ws.Flush
End Sub

Sub SetIsDirtyFalse(InternalPage As ABMPage)
    Dim script As String = $"var editor = Quills['#${myID}'];
    editor.SetIsDirtyFalse();    
    "$
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    InternalPage.ws.Flush
End Sub

Sub ClearHistory(InternalPage As ABMPage)
    Dim script As String = $"var editor = Quills['#${myID}'];
    editor.ClearHistory();    
    "$
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
    InternalPage.ws.Flush
End Sub
 
' runs when a refresh is called
Sub ABMComp_Refresh(InternalPage As ABMPage, internalID As String)
    Dim varID As String = internalID.Replace("-", "_") 'ignore
    Dim script As String
    
    InternalPage.ws.Eval(script, Array As Object(ABMComp.ID))
End Sub
 
' do the stuff needed when the object is removed
Sub ABMComp_CleanUp(InternalPage As ABMPage, internalID As String)
 
End Sub

Usage:

B4X:

Dim editCommentLong As CompQuillEditor
Dim HeightCSS As String = $"#contpagecard0301_editcommentlong {height:calc(100vh - 430px);}"$

' In the page initialize
page.AddExtraCSSFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css")
page.AddExtraCSSFile("custom/quill.snow.1.4.css")
page.AddExtraJavaScriptFile("https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js")
page.AddExtraJavaScriptFile("custom/quill.min.js")
page.AddExtraJavaScriptFile("custom/quill-blot-formatter.min.js")
page.AddExtraJavaScriptFile("custom/quill-better-table.js")
page.AddExtraJavaScriptFile("custom/quill-abm.1.5.js")

' in Page_Connect
editCommentLong.Initialize(page, "editCommentLong","editCommentLong", False, HeightCSS)

cont.Cell(RowIndex,1).AddComponent(editCommentLong.ABMComp)

B4X:

If tmpCard.crdCommentLong = "" Or tmpCard.crdCommentLong = "null" Then
        editCommentLong.SetHTML(page,"")
Else
        If tmpCard.crdCommentLong.StartsWith("<") Then 'is HTML
            editCommentLong.SetHTML(page,tmpCard.crdCommentLong)
        Else
            editCommentLong.SetContents(page,tmpCard.crdCommentLong)
        End If        
End If
editCommentLong.SetIsDirtyFalse(page)
If ClearUndoHistory Then
        editCommentLong.ClearHistory(page)
End If

Alwaysbusy

Harris · Jan 31, 2022

alwaysbusy said:
As for ABMEditor, you can also use this custom component as an alternative I wrote (for ABM 4.95) and use GetHTML/SetHTML:

So I guess I will need to upgrade to 4.95 to try / use this (custom/quill. - CSS and JS files) ? I am still on 4.51
Got a pic of it in action?

Thanks @alwaysbusy

Harris

alwaysbusy · Feb 1, 2022

Harris said:
I will need to upgrade to 4.95

I'm not 100% sure it is needed. You can probably just copy the JavaScript/css files mentioned in the snippet (not the other ones!) from the 4.95 www folder to your 4.51 www folder and then use this snippet too.

Alwaysbusy

Harris · Feb 9, 2022

Following your example above using Quill, I have some issues... (but of course). I like the new editor format and features...
First -
' ABMComp.RawBuild = True - does not exist as property in 4.51 (if really required)
' Second - what is the event name suffix? agenddesc_loaded does not work... yet I called it to complete the process... It does show the logs...

Using this code:

B4X:

Sub agenddesc_loaded(Target As String)

page.Pause

    Dim msgbox As ABMModalSheet = page.ModalSheet("agendinp")
    'Dim ed As CompQuillEditor  = msgbox.Content.Component("agenddesc")
    Dim ph As Int = edtnum

    Log(" ***************  LOADED **************: "&Target&" btn tag: "&ph)
    Dim SQL As SQL = DBM.GetSQL
    Dim ret As List = DBM.SQLSelect( SQL,"SELECT * FROM cagendaitems WHERE mastid = " & ActiveCaseId&" AND itemid = "&ph&" AND comp_id = "&Maincomp_id,Null)
    DBM.CloseSQL(SQL)
    
    Dim str As String = ""
    If ret.Size > 0 Then
         Dim mp As Map = ret.Get(0)
       str = mp.Get("descrip")
    End If

Log(" what is str: "&str)
    
    If str = "" Or str = "null" Then
        editCommentLong.SetHTML(page,"")
    Else
        If str.StartsWith("<") Then 'is HTML
            Log(" html")
            editCommentLong.SetHTML(page,str)
        Else
            editCommentLong.SetContents(page,str)
            Log(" Other stuff")

        End If
    End If
    editCommentLong.SetIsDirtyFalse(page)
'    If editCommentLong.ClearUndoHistory Then
        editCommentLong.ClearHistory(page)
'    End If
    Log(" what are ids : "&editCommentLong.myID&"   - internal id: "&editCommentLong.ABMComp.ID)
    editCommentLong.ABMComp_Refresh(page, editCommentLong.myID)

page.Resume

End Sub

I tried all options above but nothing would show the text...

It is all happening in a ModalSheet.

It should show : "Agenda approved with additions." - but it does not (empty - yet log shows the text that should show) ... (I pasted this in (the pic above) for example)...

Thanks

alwaysbusy · Feb 9, 2022

Harris said:
ABMComp.RawBuild = True

This command is crucial. It overrides the default ABM Build and does inject HTML directly. (which is probably used to set the HTML text "Agenda approved with additions." So you will need v4.95 to be usable if that command does not exist.

Harris said:
Second - what is the event name suffix? agenddesc_loaded does not work... yet I called it to complete the process... It does show the logs...

I'm not quite following you here. Can you elaborate?

Harris · Feb 9, 2022

Ok, let me try with 4.95 , then I will get back to this....

Harris · Feb 13, 2022

OK, with 4.95 - got it working... almost. (Remember to Ctrl-F5 to load the latest compile...)

I have been studying your quill-abm.1.5.js (I can break this with little attempt to do so)
Also been studying the docs and examples at quilljs.com

For example:

The quill site shows my html text with new lines entered...

The editor container will scroll with new input, keeping the toolbar fixed On Top (desired).

However, in my Modalsheet, this is not the case. Tried to modify your quill-abm.1.5.js to accomplish this - to no avail. (cause I JS stupid...).

Here, the toolbar shows within the cell assigned.

However, if text expands past the window (cell) height, the toolbar scrolls up and out of sight. The desired affect is to have toolbar fixed on top so one can format text that is way down the scrollable (text content - container) window.

While editing this post, if I am careful, I can keep this forum's toolbar in view, and set text formatting way down here...

Being accustomed to the standard ABMEditor, it is nice to see (and figure out) that one does not have to jump thru hoops to make the Quill editor behave as expected. I guess that's why you chose and migrated to this....

Someday, in another lifetime perhaps, I will get all this...

BTW, the only change I had to make upgrading from 4.51 to 4.95 was:
gm1.AddMarkerEx("mk1"&i , l1, l2,locid &", "&city , str, "../images/truck3.png",True, polylist )
Add a polygon list parameter. Don't know how to use it yet, but sure it will be helpful, since I had to code this prior - to manage markers...

You da man, mang....

alwaysbusy · Feb 13, 2022

Can you share the code? I checked the app were we did use this editor and it looks like this (notice the scrollbar is under the toolbar, not next to it like in your case).

Alwaysbusy

Harris · Feb 14, 2022

Yours works as desired....

This is in a ModalSheet. I think your example might be on the page - but hard to tell...
I haven't tried it directly on the page yet - but will do next.

I have tried adding a container to the modalsheet and SetFixedHeight( 200 , False) - and other attempts.
Nothing I do will allow the quill content container to expose it's scroll bar and behave like expected....
It will always scroll with the ModalSheet scrollbar (or container scroll bar).

Perhaps, show me your code for this example page above. Maybe I can figure it out from what you do...

Here is building the ModalSheet....
Acting with the editor (getting and setting text) is posted above... (however, not the issue - works...)

Thanks

B4X:

Sub BuildAgendInput() As ABMModalSheet
    Dim msg As ABMModalSheet
    msg.Initialize(page, "agendinp",  True,    False, "")
    msg.IsDismissible = False

    msg.Content.AddRowsM(5, True, 0,  0, "").AddCells12(1, "")
    msg.Content.AddRowsM(1, True, 20, 0 , "").AddCells12(1, "")
    
    msg.Content.BuildGrid
    
    ' add paragraph   
    msg.Content.CellR(0,1).AddComponent(ABMShared.BuildParagraphBQWithZDepth(page,"par1xz","Modify Agenda Item") )
    
    Dim asub As ABMLabel
    asub.Initialize(page,"agendsub",  "Subject",ABM.SIZE_H5,False,"")
    msg.Content.CellR(1,1).AddComponent(asub)
    
    editCommentLong.Initialize(page, "agenddesc", "agenddesc",  False, "100px") ' HeightCSS)


    Dim cont As ABMContainer
    cont.Initialize(page,"edcont","")
    cont.AddRow(1, False ,"","")
    cont.BuildGrid
    cont.Cell( 1,1).AddComponent( editCommentLong.ABMComp)
    cont.Cell( 1,1).SetFixedHeight(200, True)
    
    msg.Content.CellR(1,1).AddComponent(cont)
'    msg.Content.Cell(3 ,1).SetFixedHeight( 200 ,  False)

'    Dim adesc As ABMEditor
'    adesc.Initialize(page,"agenddesc", ABM.INPUT_TEXT,"Description or Comments",True,"")
 '    adesc.Tag = 0
'    adesc.FixedMinHeight = "400px"
'    adesc.Initialize(page,"agenddesc", True, True,"")
'    msg.Content.CellR(1,1).AddComponent(adesc)

    Dim asubat As ABMLabel
    asubat.Initialize(page,"asubat", "Attachments:",ABM.SIZE_H6,False,"")
    msg.Content.CellR(1,1).AddComponent(asubat)

    Dim albltask As ABMLabel
    albltask.Initialize(page,"albltask", "Tasks Outstanding:",ABM.SIZE_H6,False,"")
    msg.Content.Cell(6,1).AddComponent(albltask)
        
    Dim aout As ABMLabel
    aout.Initialize(page, "aout", "",ABM.SIZE_PARAGRAPH, True,"")
'    aout.Enabled = False
    msg.Content.Cell(6,1).AddComponent(aout)

    
    msg.Footer.AddRowsM(1,True,0,0, "").AddCellsOS(4, 0 ,0,0,3,3,3,"") '.AddCellsOS(1,0 ,0,0,3,3,3, "")
    msg.Footer.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    ' create the buttons for the footer


    Dim msgattachlnk As ABMButton
    msgattachlnk.InitializeFlat(page, "agendattachlink", "", "", "Link Attach", "transparent")
    msg.Footer.Cell(1,1).AddComponent(msgattachlnk)


    Dim msgattach As ABMButton
    msgattach.InitializeFlat(page, "agendattach", "", "", " File Attach", "transparent")
    msg.Footer.Cell(1,2).AddComponent(msgattach)


    Dim msgyes As ABMButton
    msgyes.InitializeFlat(page, "agendsave", "", "", "Save", "transparent")
    msg.Footer.Cell(1,3).AddComponent(msgyes)
    
    Dim msgno As ABMButton
    msgno.InitializeFlat(page, "agendcancel", "", "", "Cancel", "transparent")
    msg.Footer.Cell(1,4).AddComponent(msgno)
    
    Return msg
End Sub

B4X:

Harris · Feb 15, 2022

Well, tried it directly on my page and on my page in a container...
Neither expose the editor scrollbar below the toolbar...
Using latest Chrome browser... DANG!

Ok, now I will build a "simple test page" and see what happens...

Thanks

Harris · Feb 16, 2022

Success Finally....
(like a dog with a bone)....

Private HeightCSS As String = $"#contpagecard0301_editcommentlong {height:calc(100vh - 430px);}"$
editCommentLong.Initialize(page, "agenddesc1", "agenddesc1", False, HeightCSS)

Seems the HeightCSS above has no effect on setting the height of the content editor.... (regardless of any value placed in it)

However, in the Quill.snow.1.4.css file (code below), I changed the .ql-container: height property in the second declaration from: 100% to 300px....

This work-around does function - but the content section of the editor will always be set to 300px (or whatever final value I decide to set).

Thanks

B4X:

/*!
 * Quill Editor v2.0.0-dev.3
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
     min-height: 150px;
    /* height: 350px;*/
' this section is over-ridden by a second declaration below....

  }
  .ql-editor {
    /* min-height: 350px;*/
    /* height: calc(100vh - 150px); */
      height: 200px;
' this section has no effect no matter what is declared here    
  }
  .ql-st-container.forPrint > .ql-container {
     border: 1px solid transparent;
  }
  .ql-st-container.forPrint > .ql-toolbar {
     display: none;
  }
  .ql-st-container.forPrint > .ql-container > .ql-editor {
      min-height: 10px;
      height: 100%;
  }


'  original height of .ql-container - 100%
   .ql-container{box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;height: 100%;
'  changed to height: 300px
   .ql-container{box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;height: 300px;

B4J Question [ABMaterial] - ABMEditor - HTML TEXT

Harris

Expert

alwaysbusy

Expert

Harris

Expert

alwaysbusy

Expert

Harris

Expert

alwaysbusy

Expert

Harris

Expert

Harris

Expert

alwaysbusy

Expert

Harris

Expert

Harris

Expert

Harris

Expert

Similar Threads

B4J Question [ABMaterial] - ABMEditor - HTML TEXT

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency