Preview tab

src/java/LogrPortal/src/java/gov/anl/aps/logr/portal/controllers/ItemDomainLogbookController.java

@@ -103,6 +103,7 @@ public class ItemDomainLogbookController extends ItemController<ItemDomainLogboo
     private EntityType currentEntityType = null;
     private boolean fullListMode = false;
     private Log lastLog;
+    private String logEntryPreviewHtml = null;
 
     private List<SearchResult> logResults;
     private List<EntityType> logbookEntityTypes;
@@ -1269,6 +1270,31 @@ public Item getParentItem(ItemDomainLogbook child) {
         return null;
     }
 
+    public String getLogEntryPreviewHtml() {
+        return logEntryPreviewHtml;
+    }
+
+    // Kept on the controller so previews of unsaved text do not poison Log's cached html.
+    public void reloadLogEntryMarkdownPreview() {
+        logEntryPreviewHtml = "";
+
+        if (getCurrent() == null) {
+            return;
+        }
+
+        Log newLogEdit = getNewLogEdit();
+        if (newLogEdit == null) {
+            return;
+        }
+
+        String text = newLogEdit.getText();
+        if (text == null || text.isEmpty()) {
+            return;
+        }
+
+        logEntryPreviewHtml = MarkdownParser.parseMarkdownAsHTML(text);
+    }
+
     public String renderExampleMarkdown() {
         return MarkdownParser.getMarkdownExampleHtml();
     }

src/java/LogrPortal/web/resources/css/logbook.css

@@ -43,10 +43,93 @@ html, body {
 }
 
 .logEntryDialogEntryValue {
+    box-sizing: border-box;
     width: 600px;
     height: 400px;
 }
 
+/* Lock both tabs to the textarea size so the dialog does not resize on tab change. */
+.logEntryEditTabView,
+.logEntryEditTabView .ui-tabs-panels,
+.logEntryEditTabView .ui-tabs-panel {
+    box-sizing: border-box;
+    width: 620px;
+}
+
+.logEntryEditTabView .ui-tabs-panel {
+    height: 410px;
+    padding: 5px 10px;
+    overflow: hidden;
+}
+
+/* Match the transparent dialog background. */
+.logEntryEditTabView,
+.logEntryEditTabView .ui-tabs-panels,
+.logEntryEditTabView .ui-tabs-panel,
+.logEntryEditTabView .ui-tabs-nav,
+.logEntryEditTabView .ui-tabs-nav .ui-state-default {
+    background: transparent !important;
+    border: none !important;
+}
+
+.logEntryEditTabView .ui-tabs-nav .ui-tabs-selected {
+    background: rgba(255, 255, 255, 0.6) !important;
+}
+
+.logEntryEditTabView .ui-tabs-nav {
+    text-align: left;
+    padding-left: 5px;
+}
+
+/* Insulate the preview from dialog styles so it renders like the main log view. */
+.logEntryPreviewContainer {
+    box-sizing: border-box;
+    width: 600px;
+    height: 400px;
+    overflow-y: auto;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    font-weight: normal;
+    font-style: normal;
+    font-size: 12px;
+    font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
+    line-height: normal;
+    color: #000000;
+    background-color: white !important;
+    border: 1px solid #cfcfcf;
+    border-radius: 5px;
+}
+
+.logEntryPreviewContainer .logEntryMarkdownPreview {
+    display: block;
+    background: transparent;
+}
+
+/* Buttons live in the dialog content, not a footer facet. */
+.logEntryDialogFooter {
+    display: block;
+    padding: 1.5rem 1.5rem 0 1.5rem;
+}
+
+/* Maximized: let the editor and preview grow with the dialog. */
+.logEntryDialog.ui-dialog-maximized .ui-panelgrid,
+.logEntryDialog.ui-dialog-maximized .logEntryEditTabView,
+.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panels,
+.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panel {
+    width: 100%;
+}
+
+.logEntryDialog.ui-dialog-maximized .logEntryEditTabView .ui-tabs-panel {
+    height: calc(100vh - 300px);
+}
+
+.logEntryDialog.ui-dialog-maximized .logEntryDialogEntryValue,
+.logEntryDialog.ui-dialog-maximized .logEntryPreviewContainer {
+    width: 100%;
+    height: 100%;
+}
+
 .logTimestamp {
     background: lightslategrey; 
     border-top-left-radius: 3px;
@@ -226,4 +309,4 @@ div.logbookSection {
 
 .reactionButton > .ui-button-text {
     font-size: large !important;
-}
+}

src/java/LogrPortal/web/resources/javascript/logDocumentView.js

@@ -7,10 +7,13 @@ document.addEventListener('paste', pasteLogTextArea);
 
 const linkRegex = new RegExp("^(https:\/\/www\.|http:\/\/www\.|https:\/\/|http:\/\/)[a-zA-Z0-9]{2,}(\.[a-zA-Z0-9]{2,})(\.[a-zA-Z0-9]{2,})?");
 
+// Id suffix match: the textarea sits inside a tab view (a naming container).
+const logEntryValueSelector = 'textarea[id$=":logbookLogEntryValue"]';
+
 function pasteLogTextArea(event) {
     // Ignore non text area 
     let srcElement = event.srcElement;
-    if (srcElement.id !== 'logbookViewForm:logbookLogEntryValue') {
+    if (!srcElement.matches || !srcElement.matches(logEntryValueSelector)) {
         return;
     }
 
@@ -53,7 +56,7 @@ function pasteLatestFileReference() {
 }
 
 function addCustomDataToLogEntryValue(newData) {
-    let textArea = document.getElementById('logbookViewForm:logbookLogEntryValue');
+    let textArea = document.querySelector(logEntryValueSelector);
 
     let exitingValue = $(textArea).val();
     let curPos = textArea.selectionStart;

src/java/LogrPortal/web/views/itemDomainLogbook/private/addLogbookEntryDialog.xhtml

@@ -13,8 +13,9 @@ See LICENSE file.
     <p:dialog id="#{entityTypeName}LogbookLogAddDialog"
               widgetVar="#{entityTypeName}LogbookLogAddDialogWidget" 
               header="Add Log Entry" 
-              styleClass="viewTransparentBackgroundDialog"
+              styleClass="viewTransparentBackgroundDialog logEntryDialog"
               closable="false"
+              maximizable="true"
               modal="true">
 
         <p:outputPanel id="#{entityTypeName}LogbookLogAddDialogContents">
@@ -36,7 +37,7 @@ See LICENSE file.
                     </p:column>
 
                     <p:column>
-                        <h:outputLabel for="logbookLogEntryValue" value="Log Entry" styleClass="entityDataEmphasizedLabel"/>
+                        <h:outputLabel value="Log Entry" styleClass="entityDataEmphasizedLabel"/>
                     </p:column>
                 </p:row>
 
@@ -50,10 +51,41 @@ See LICENSE file.
                     </p:column>
 
                     <p:column colspan="#{saveConflict ? 1 : 2}">
-                        <h:inputTextarea styleClass="logEntryDialogEntryValue"
-                                         id="logbookLogEntryValue"
-                                         value="#{logObject.text}"
-                                         onblur="logbookLogEntryValueBlur()"/>
+                        <p:tabView id="logEntryEditTabView"
+                                   widgetVar="logEntryEditTabViewWidget"
+                                   styleClass="logEntryEditTabView"
+                                   dynamic="true">
+
+                            <p:ajax event="tabChange"
+                                    process="@this logbookLogEntryValue"
+                                    oncomplete="reloadLogEntryMarkdownPreview()"/>
+
+                            <p:tab title="Edit">
+                                <h:inputTextarea styleClass="logEntryDialogEntryValue"
+                                                 id="logbookLogEntryValue"
+                                                 value="#{logObject.text}"
+                                                 onblur="logbookLogEntryValueBlur()"/>
+
+                                <p:remoteCommand name="logbookLogEntryValueBlur"
+                                                 process="logbookLogEntryValue"
+                                                 update="logbookLogEntryValue"/>
+                            </p:tab>
+
+                            <p:tab title="Preview" id="logEntryMarkdownPreviewTab">
+                                <div class="logEntryPreviewContainer">
+                                    <p:outputPanel id="logEntryMarkdownPreview"
+                                                   styleClass="logEntry logEntryMarkdownPreview">
+                                        <h:outputText escape="false"
+                                                      value="#{itemDomainLogbookController.logEntryPreviewHtml}"/>
+                                    </p:outputPanel>
+                                </div>
+
+                                <p:remoteCommand name="reloadLogEntryMarkdownPreview"
+                                                 action="#{itemDomainLogbookController.reloadLogEntryMarkdownPreview()}"
+                                                 update="logEntryMarkdownPreview"
+                                                 oncomplete="addCodeBlockCopyButtons()"/>
+                            </p:tab>
+                        </p:tabView>
                     </p:column>
                 </p:row>
 
@@ -106,13 +138,7 @@ See LICENSE file.
                 <h:outputText id="lastFileReference" value="#{logAttachmentUploadBean.lastFileReference}" /> 
             </p:outputPanel>
 
-            <p:remoteCommand name="logbookLogEntryValueBlur" 
-                             update="logbookLogEntryValue"/> 
-
-        </p:outputPanel>
-
-        <f:facet name="footer" class="dialog">
-            <p:outputPanel rendered="#{logObject != null}">
+            <p:outputPanel styleClass="logEntryDialogFooter" rendered="#{logObject != null}">
                 <p:commandButton value="Save" alt="Save" 
                                  id="#{entityTypeName}SaveLogbookLogButton"
                                  onclick="PF('loadingDialog').show()"
@@ -130,7 +156,8 @@ See LICENSE file.
                 <p:remoteCommand name="failSaveLogEntry"
                                  oncomplete="PF('#{entityTypeName}LogbookLogAddDialogWidget').initPosition();  PF('loadingDialog').hide();"/>
             </p:outputPanel>
-        </f:facet>
+
+        </p:outputPanel>
 
     </p:dialog>
 

src/java/LogrPortal/web/views/itemDomainLogbook/view.xhtml

@@ -181,7 +181,7 @@ See LICENSE file.
         <ui:include src="private/addLogbookEntryDialog.xhtml" />   
         <ui:include src="private/markdownExampleDialog.xhtml" />        
 
-        <h:outputScript library="javascript" name="logDocumentView.js?v=1"  />
+        <h:outputScript library="javascript" name="logDocumentView.js?v=2"  />
         <h:outputScript library="javascript" name="codeBlockCopyButton.js"  />
 
         <p:remoteCommand autoRun="true"