Add a preview button to the markdown editor

zapek · Aug 27, 2024 · b7c1eed · b7c1eed
1 parent 687b702
commit b7c1eed
Show file tree

Hide file tree

Showing 4 changed files with 67 additions and 4 deletions.
diff --git a/ui/src/main/java/io/xeres/ui/controller/forum/ForumEditorWindowController.java b/ui/src/main/java/io/xeres/ui/controller/forum/ForumEditorWindowController.java
@@ -25,6 +25,7 @@
 import io.xeres.ui.client.LocationClient;
 import io.xeres.ui.controller.WindowController;
 import io.xeres.ui.custom.EditorView;
+import io.xeres.ui.support.markdown.MarkdownService;
 import io.xeres.ui.support.util.UiUtils;
 import javafx.application.Platform;
 import javafx.fxml.FXML;
@@ -57,12 +58,14 @@ public class ForumEditorWindowController implements WindowController
 
 	private final ForumClient forumClient;
 	private final LocationClient locationClient;
+	private final MarkdownService markdownService;
 	private final ResourceBundle bundle;
 
-	public ForumEditorWindowController(ForumClient forumClient, LocationClient locationClient, ResourceBundle bundle)
+	public ForumEditorWindowController(ForumClient forumClient, LocationClient locationClient, MarkdownService markdownService, ResourceBundle bundle)
 	{
 		this.forumClient = forumClient;
 		this.locationClient = locationClient;
+		this.markdownService = markdownService;
 		this.bundle = bundle;
 	}
 
@@ -73,6 +76,7 @@ public void initialize()
 
 		editorView.lengthProperty.addListener((observable, oldValue, newValue) -> checkSendable((Integer) newValue));
 		editorView.setInputContextMenu(locationClient);
+		editorView.setMarkdownService(markdownService);
 		title.setOnKeyTyped(event -> checkSendable(editorView.lengthProperty.getValue()));
 
 		send.setOnAction(event -> postMessage());

diff --git a/ui/src/main/java/io/xeres/ui/custom/EditorView.java b/ui/src/main/java/io/xeres/ui/custom/EditorView.java
@@ -21,6 +21,8 @@
 
 import io.xeres.common.i18n.I18nUtils;
 import io.xeres.ui.client.LocationClient;
+import io.xeres.ui.support.contentline.Content;
+import io.xeres.ui.support.markdown.MarkdownService;
 import io.xeres.ui.support.util.ImageUtils;
 import io.xeres.ui.support.util.TextInputControlUtils;
 import io.xeres.ui.support.util.UiUtils;
@@ -31,11 +33,13 @@
 import javafx.scene.image.ImageView;
 import javafx.scene.input.*;
 import javafx.scene.layout.VBox;
+import javafx.scene.text.TextFlow;
 import javafx.stage.Window;
 import org.kordamp.ikonli.fontawesome5.FontAwesomeSolid;
 import org.kordamp.ikonli.javafx.FontIcon;
 
 import java.io.IOException;
+import java.util.EnumSet;
 import java.util.ResourceBundle;
 import java.util.regex.Pattern;
 
@@ -91,11 +95,22 @@ public class EditorView extends VBox
 	@FXML
 	private MenuItem header6;
 
+	@FXML
+	private ToggleButton preview;
+
 	@FXML
 	private TextArea editor;
 
+	@FXML
+	private ScrollPane previewPane;
+
+	@FXML
+	private TextFlow previewContent;
+
 	private int typingCount;
 
+	private MarkdownService markdownService;
+
 	private final ResourceBundle bundle;
 
 	public final ReadOnlyIntegerWrapper lengthProperty = new ReadOnlyIntegerWrapper();
@@ -135,9 +150,39 @@ public void initialize()
 
 		editor.addEventHandler(KeyEvent.KEY_PRESSED, this::handleInputKeys);
 
+		preview.setOnAction(event -> {
+			if (preview.isSelected())
+			{
+				editor.setVisible(false);
+				var contents = markdownService.parse(editor.getText(), EnumSet.noneOf(MarkdownService.ParsingMode.class), null);
+				previewContent.getChildren().addAll(contents.stream()
+						.map(Content::getNode).toList());
+				previewPane.setVisible(true);
+			}
+			else
+			{
+				editor.setVisible(true);
+				previewPane.setVisible(false);
+				previewContent.getChildren().clear();
+			}
+		});
+
 		lengthProperty.bind(editor.lengthProperty());
 	}
 
+	/**
+	 * Sets the markdown service. If it is set, then the EditorView automatically gets a preview button.
+	 *
+	 * @param markdownService the markdown service
+	 */
+	public void setMarkdownService(MarkdownService markdownService)
+	{
+		this.markdownService = markdownService;
+
+		preview.setManaged(true);
+		preview.setVisible(true);
+	}
+
 	public String getText()
 	{
 		return editor.getText();

diff --git a/ui/src/main/java/io/xeres/ui/support/window/WindowManager.java b/ui/src/main/java/io/xeres/ui/support/window/WindowManager.java
@@ -224,7 +224,7 @@ public void openForumEditor(PostRequest postRequest)
 		Platform.runLater(() ->
 				getOpenedWindow(ForumEditorWindowController.class, postRequest.toString()).ifPresentOrElse(Window::requestFocus,
 						() -> {
-							var forumEditor = new ForumEditorWindowController(forumClient, locationClient, bundle);
+							var forumEditor = new ForumEditorWindowController(forumClient, locationClient, markdownService, bundle);
 
 							UiWindow.builder("/view/forum/forumeditorview.fxml", forumEditor)
 									.setLocalId(postRequest.toString())

diff --git a/ui/src/main/resources/view/custom/editorview.fxml b/ui/src/main/resources/view/custom/editorview.fxml
@@ -21,7 +21,8 @@
 
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
-<?import javafx.scene.layout.VBox?>
+<?import javafx.scene.layout.*?>
+<?import javafx.scene.text.TextFlow?>
 <?import org.kordamp.ikonli.javafx.*?>
 <fx:root prefHeight="480" prefWidth="640" type="VBox" xmlns="http://javafx.com/javafx/19" xmlns:fx="http://javafx.com/fxml/1">
     <ToolBar>
@@ -94,6 +95,19 @@
                 <Tooltip showDuration="1m" text="%editor.action.header"/>
             </tooltip>
         </MenuButton>
+        <ToggleButton fx:id="preview" focusTraversable="false" styleClass="button-icon" visible="false" managed="false">
+            <graphic>
+                <FontIcon iconLiteral="fas-eye"/>
+            </graphic>
+        </ToggleButton>
     </ToolBar>
-    <TextArea fx:id="editor" wrapText="true" VBox.vgrow="SOMETIMES"/>
+    <StackPane>
+        <TextArea fx:id="editor" wrapText="true" VBox.vgrow="SOMETIMES"/>
+        <ScrollPane fx:id="previewPane" fitToWidth="true" VBox.vgrow="ALWAYS" visible="false">
+            <padding>
+                <Insets top="10.0" left="14.0" bottom="10.0" right="14.0"/>
+            </padding>
+            <TextFlow fx:id="previewContent" tabSize="4" styleClass="forum-content"/>
+        </ScrollPane>
+    </StackPane>
 </fx:root>