Skip to content

v3.0.0

Choose a tag to compare

View all tags
@IvanVasquez IvanVasquez released this 07 May 03:49
· 21 commits to main since this release
v3.0.0
3944d7f
This commit was created on GitHub.com and signed with GitHub’s verified signature.
GPG key ID: B5690EEEBB952194
Verified
Learn about vigilant mode.

I'm happy to release and announce a new major version of this library, a full refresh of the was made, by rewriting it with TypeScript and using Tailwind for the styling.

New helpful features have been added and some unused features (unsaved changes) were replaced by listeners for better customization.

What's Changed

  • Library code reimplemented with TypeScript to improve on type error checking
  • UI redesigned with Tailwind instead of plain CSS code
  • FontAwesome icons now included with the library
  • Moved from using NPM to Yarn
  • Migrated to Vite instead of Webpack (dropped support for old browsers)

New features

  • TypeScript index.d.ts file exported with the bundled package for easier library usage
  • Elements now use key property instead of array index (now you can move elements from one position to another)
  • Portrait and landscape page mode
  • Added top banner at the page with page size, orientation and zoom level
  • Move elements using arrow keys
  • Move elements "faster" pressing shift and arrow keys
  • UI themes created by defining a Tailwind primary color (4 themes included)
  • Localization files for English, Spanish, French, Italian, German, and Simplified Chinese
  • Removed abbreviator $.jEditor to use JavaScript ES modules import jEditor from "@medic-plus/js-document-editor
  • Elements can be selected from the side panel, with details section showing when selected
  • jEditor object now is not global and all references are inside the editor inside a single variable const myEditor = new jEditor(options, data)
  • Property data extracted from options and sent as a second parameter
  • Reworked position buttons to use one of this two center (horizontal and vertical) and cardinal (NW, N, NE, E, C, W, SW, S and SE)
  • Background functionality has been extended so you can pass the size, repeat , and position along the url parameter
  • Now paper sizes have a orientation property allowing to set a default orientation when changed (if forceOrientation is enabled)
  • Added a PDF generation example with the help of html2canvas and jsPDF libraries

New editor options:

  • fontSize: Default font size value for elements that doesn't have a value defined
  • arrowStep: Amount of pixels to move element by an arrow key press
  • arrowShiftStep: Amount of pixels to move element by pressing shift and an arrow key
  • dragStep: Amount of pixels to move element when dragging with the mouse (grid snap)
  • zoomThreshold: Value for the default zoom reset button (show more or less page)
  • detailProperties, alignButtons and positionButtons: Changed detail view to use a customized panel for each element
  • positionButtonsClassName: CSS class for position buttons (use grid-col-2 for center buttons and grid-col-3 for cardinal buttons)
  • toastDuration: Default toast duration in miliseconds
  • orientation: Page orientation defined as portrait or landscape
  • forceOrientation: Sets the paper size orientation instead of the previous one
  • Listener functions: onChange, onEditorChange, onSidebarChange and onElementChange

New editor functions:

  • setLocale(locale): Now you can change the locale (string for included locales or Locale object for custom one) and re-render the page with a single function (you can also change the option and re-render manually)
  • getDefaultLocales(): Returns the list of supported locales
  • setTheme(theme): Sets the jEditor [data-theme="my-theme"]
  • getDefaultThemes(): Returns the list of supported style themes
  • hasData(key): Validates if an element has values on editor data
  • getElementData(key): Get element values
  • pushData(data): Add an element to the current values
  • pullData(key): Get and remove a single element values from the editor

Breaking Changes

Options

The following options have been renamed or changed:

  • container: It's required with no default value
  • data: Moved as a second parameter for jEditor class defined as EditorData[]
  • elements: Type defined as EditorElement[]
  • zoom and zoomIncrement: Base changed from 0-1 to 0-100 (default zoom 100, default increment 10)
  • sizeUnit: Renamed to units
  • sizeDecimals: Renamed to decimals
  • rendered: Renamed to editorMode
  • paperSizes: Type defined as PaperSize[], default value increased to 7 sizes (letter, half-letter, legal, tabloid, A3, A4 and A5)
  • paperSize: Changed from string type to PaperSize
  • settings: Renamed to toolbarActions as type ToolbarAction[]
  • extraFunctions: Renamed to customToolbarActions as type CustomToolbarAction[]
  • locale: Typed as Locale with 18 properties (by default included locale/en and locale/es)
  • helper: Replaced by detailProperties as type UIElement[] (set array as [] to disable functionality)

These options have been removed:

  • elementFunctions: Replaced by alignButtons, positionButtons and detailProperties
  • saveButton: Replaced by customToolbarActions and event listeners
  • elementAction: Removed element property
  • events: Removed to use jEditor object functions

Functions

The following functions have been renamed, changed or removed:

  • setOptions(options): Now it replaces the whole options value, for old behavior use mergeOptions(options)
  • setData(options): Now it replaces the whole data array, for old behavior use mergeData(data)
  • renderObjects(): Renamed to renderElements(), for whole editor use render()
  • setPaper(paperSize): Renamed to setPaperSize(papserSize, orientation)
  • setBackround(url): Removed, now change background property and run a render() or getEditor().render()
  • clearBackround(): Removed, now change background to undefined and render the editor
  • unsaved(): Removed, now you can use event listeners to achieve the same (check live demo)
  • getObject(element): Changed to getElementData(key) to get data

Events

This functions have been removed to use internal functions inside sidebar and editor components, some of them were moved to another location:

  • addElement(event): Now use getSidebar().showElementListItem(key)
  • removeElement(event): Now use getSidebar().hideElementListItem(key)
  • modifyElement(event): Now use getSidebar().showDetails(key) or getSidebar().clickElementListItem(key)
  • cancelModifyElement(event): Not implemented but same behavior from getSidebar().showDetails("")
  • zoomIn(): Now use getEditor().zoomIn()
  • zoomOut(): Now use getEditor().zoomOut()
  • zoomReset(): Now use getEditor().resetZoom()
  • changePaper(): Use getNextPageSize(options) from utils and then setPaperSize(papserSize, orientation)
  • setPaper(event, paperSize): Now use setPaperSize(papserSize, orientation)
  • renderObjects(): Now use renderElements()
  • toast(text, css, timer): Now use showToast(message, className, timeout)
  • unsaved(): Removed
  • saveData(): Removed
  • setPageBackround(url): Now use background option

Full Changelog: v2.2.5...v3.0.0

Contributors

IvanVasquez
Assets 2
Loading