Greasy Fork

Update 1.4

Version 1.4 represents a major evolution from 1.3, shifting the focus from a Markdown-based editor to a full HTML editor. This update introduces new features, improves user interactivity, and offers much richer control over content formatting.

Key Changes

1. Migration from Markdown to HTML: The most significant change is the replacement of Markdown syntax with HTML syntax. While version 1.3 generated markups like **bold** and *italic*, version 1.4 now generates the corresponding HTML tags, such as <strong>bold</strong> and <em>italic</em>. This allows for more robust and web-compatible formatting.

2. Enhanced User Interface with Custom Dialog Boxes:

• Abandonment of Native prompts: The native browser prompts have been replaced by custom modal dialog boxes (showCustomPrompt), offering a more modern and integrated user experience.
• Multiple Inputs: The new interface allows for requesting multiple pieces of information at once. For example, when inserting an image, it is now possible to define the URL, title, width, and height in a single form.
• Custom Alerts: The showCustomAlert function was introduced to display messages and alerts more elegantly.

3. New Features and Editing Tools:

• "Details" Element: Added a new button to create expandable content blocks (<details>), ideal for "spoiler" sections or for hiding secondary information.
• Center Alignment: A new tool allows for centering text and other elements using the <center> tag.
• Horizontal Rule Styling: It is now possible to customize the color and size (thickness) of horizontal rules (<hr>) through a new option in the toolbar.

4. User Experience (UX) Improvements:

• Keyboard Shortcuts:
  • Tab: Now inserts three spaces for indentation, instead of shifting focus out of the editor.
  • Shift + Enter: Inserts a line break (<br>), making it easier to create spacing without starting a new paragraph.
• Information Modal: A new "information" button has been added, displaying a window with available keyboard shortcuts and other useful tips.
• Improvements in Media Insertion:
  • Images: The insertion dialog now includes optional fields for title, width, and height.
  • Videos: In addition to the URL, it is possible to specify the width and height of the video player.
  • Tables: Table creation has been improved, using the new dialog box to define the number of rows and columns.
  • URL Validation: The logic for extracting video URLs has been encapsulated in a try-catch block to prevent errors with invalid links.

Summary of Code Changes

• New Functions:

  • showCustomAlert(message): Displays a styled modal alert.
  • showCustomPrompt({ inputs, onConfirm }): Creates a modal form to collect user data.
  • showInfoModal(): Shows a modal with information about shortcuts and features.

• Updated Functions (createTextStyleEditor):

  • The internal logic of the toolbar has been completely reworked to generate HTML tags.
  • Headings: Instead of ##, they now generate <h1...6>.
  • Lists: Generate <ul> and <ol> with <li> items, with better support for multi-line selection.
  • Quotes: The formatting of quotes (<blockquote>) has been improved to handle multiple lines more effectively.
  • Links, Images, Videos, and Abbreviations: All these tools now use showCustomPrompt instead of the native prompt().
  • Color: Added a new tool to style horizontal rules (<hr>).
  • Keyboard Events: The textarea now listens for keydown events to implement the new shortcuts.

Fixing dependency issues

Significant visual improvements to the page