chore: commit save point

.eslintrc.js

+module.exports = {
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": "eslint:recommended",
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "rules": {
+    }
+}

.gitignore

@@ -10,12 +10,8 @@ _index.html
 *.swp
 *.swo
 
-
-
-
-
-##################### IDE / Tools ##
-
+##################### IDE / Tools ###
+  
 
 # @see https://github.com/github/gitignore/
 

.npmignore

+webpack.config.js
+*.iml
+Makefile
+.babelrc
+.eslintrc.js
+.vimspector.json
+*.tgz
+index.html
+/scripts/
+
+#GITIGNORE-START
+
+
+.DS_Store
+private/
+node_modules/
+.eslintrc
+*.log
+_index.html
+.idea
+
+*~
+*.swp
+*.swo
+
+##################### IDE / Tools ###
+  
+
+# @see https://github.com/github/gitignore/
+
+# PHPUnit
+.phpunit.result.cache
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
+.cache
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# Logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Cloud9 IDE - http://c9.io
+.c9revisions
+.c9
+
+##Exclipse
+.metadata
+#bin/
+tmp/
+*.tmp
+*.bak
+*.swp
+*~.nib
+#local.properties
+.settings/
+.loadpath
+.recommenders
+
+# External tool builders
+.externalToolBuilders/
+
+# Locally stored "Eclipse launch configurations"
+*.launch
+
+# PyDev specific (Python IDE for Eclipse)
+*.pydevproject
+
+# CDT-specific (C/C++ Development Tooling)
+.cproject
+
+# CDT- autotools
+.autotools
+
+# Java annotation processor (APT)
+.factorypath
+
+# PDT-specific (PHP Development Tools)
+.buildpath
+
+# sbteclipse plugin
+.target
+
+# Tern plugin
+.tern-project
+
+# TeXlipse plugin
+.texlipse
+
+# STS (Spring Tool Suite)
+.springBeans
+
+# Code Recommenders
+.recommenders/
+
+# Annotation Processing
+.apt_generated/
+.apt_generated_test/
+
+# Scala IDE specific (Scala & Java development for Eclipse)
+.cache-main
+.scala_dependencies
+.worksheet
+
+# Uncomment this line if you wish to ignore the project description file.
+# Typically, this file would be tracked if it contains build/dependency configurations:
+#.project
+
+##Kate
+# Swap Files #
+.*.kate-swp
+.swp.*
+
+## KDEDevelop
+*.kdev4
+.kdev4/
+
+## LibreOffice
+# LibreOffice locks
+.~lock.*#
+
+
+### LINUX
+*~
+
+# temporary files which can be created if a process still has a handle open of a deleted file
+.fuse_hidden*
+
+# KDE directory preferences
+.directory
+
+# Linux trash folder which might appear on any partition or disk
+.Trash-*
+
+# .nfs files are created when an open file is removed but is still being accessed
+.nfs*
+
+## Patches
+*.orig
+*.rej
+
+# Private key
+*.ppk
+
+## Sublime
+# Cache files for Sublime Text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# Workspace files are user-specific
+*.sublime-workspace
+
+# Project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using Sublime Text
+# *.sublime-project
+
+# SFTP configuration file
+sftp-config.json
+sftp-config-alt*.json
+
+# Package control specific files
+Package Control.last-run
+Package Control.ca-list
+Package Control.ca-bundle
+Package Control.system-ca-bundle
+Package Control.cache/
+Package Control.ca-certs/
+Package Control.merged-ca-bundle
+Package Control.user-ca-bundle
+oscrypto-ca-bundle.crt
+bh_unicode_properties.cache
+
+# Sublime-github package stores a github token in this file
+# https://packagecontrol.io/packages/sublime-github
+GitHub.sublime-settings
+
+## VIM
+# Swap
+[._]*.s[a-v][a-z]
+!*.svg  # comment out if you don't need vector files
+[._]*.sw[a-p]
+[._]s[a-rt-v][a-z]
+[._]ss[a-gi-z]
+[._]sw[a-p]
+
+# Session
+Session.vim
+Sessionx.vim
+
+# Temporary
+.netrwhist
+# Auto-generated tag files
+tags
+# Persistent undo
+[._]*.un~
+
+# Windows thumbnail cache files
+Thumbs.db
+Thumbs.db:encryptable
+ehthumbs.db
+ehthumbs_vista.db
+
+# Dump file
+*.stackdump
+
+# Folder config file
+[Dd]esktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msix
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+# gitignore template for AWS Serverless Application Model project
+# website: https://docs.aws.amazon.com/serverless-application-model
+
+# Ignore build folder
+.aws-sam/
+
+# Netbeans
+**/nbproject/private/
+**/nbproject/Makefile-*.mk
+**/nbproject/Package-*.bash
+build/
+nbbuild/
+nbdist/
+.nb-gradle/
+
+
+
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+## GOLANG
+go.work
+

.vimspector.json

+{
+  "configurations": {
+    "chrome": {
+      "adapter": "chrome",
+      "configuration": {
+        "request": "launch",
+        "url": "http://localhost:8080/",
+        "webRoot": "${workspaceRoot}/"
+      }
+    }
+ }
+}

Makefile

+#############################################################################################
+#############################################################################################
+##
+## PROJECT-DEFINITIONS
+##
+#############################################################################################
+#############################################################################################
+
+COPYRIGHT_TEXT  := © schukai GmbH, Released under the BSD 3-Clause License.
+
+#############################################################################################
+#############################################################################################
+##
+## more general block with standard definitions
+##
+#############################################################################################
+#############################################################################################
+
+# get Makefile directory name: http://stackoverflow.com/a/5982798/376773
+THIS_MAKEFILE_PATH:=$(word $(words $(MAKEFILE_LIST)),$(MAKEFILE_LIST))
+THIS_DIR:=$(shell cd $(dir $(THIS_MAKEFILE_PATH));pwd)/
+THIS_MAKEFILE:=$(THIS_DIR)$(THIS_MAKEFILE_PATH)
+
+# colors
+BLACK        := $(shell tput -Txterm setaf 0)
+RED          := $(shell tput -Txterm setaf 1)
+GREEN        := $(shell tput -Txterm setaf 2)
+YELLOW       := $(shell tput -Txterm setaf 3)
+LIGHTPURPLE  := $(shell tput -Txterm setaf 4)
+PURPLE       := $(shell tput -Txterm setaf 5)
+BLUE         := $(shell tput -Txterm setaf 6)
+WHITE        := $(shell tput -Txterm setaf 7)
+RESET        := $(shell tput -Txterm sgr0)
+
+INFO    := $(GREEN)
+COMMENT := $(YELLOW)
+
+# Output control and standard outputs
+MARKER           := $(BLUE)[+]$(RESET)
+ERRORMARKER      := $(RED)[-]$(RESET)
+## Deactivate the QUIET mode by overwriting the value with space
+
+ifndef DEBUG
+    QUIET = @
+else
+    QUIET = 
+endif
+
+ifndef DONTOPENBROWSER
+    OPENBROWSER = true
+else
+    OPENBROWSER = false
+endif
+
+ECHO             := @echo
+ECHOMARKER       := @echo "$(MARKER) $0"
+ECHOERRORMARKER  := @echo "$(ERRORMARKER) $0"
+
+# Use bash instead of sh
+## Sets the shell used
+SHELL            =  bash
+
+# path and binaries
+AWK              := awk
+CP               := cp
+CD               := cd
+KILL             := /bin/kill
+M4               := m4
+MV               := mv
+RM               := rm -f
+MKDIR            := mkdir -p
+SED              := sed
+FIND             := find
+SORT             := sort
+TOUCH            := touch
+WGET             := wget
+CHMOD            := chmod
+RSYNC            := rsync
+DOCKER           := docker
+NPX              := npx
+AWS              := aws
+XARGS            := xargs
+GREP             := grep
+NPM              := npm
+make             := make
+GIT              := git
+NPX              := npx
+NODE             := node
+CAT              := cat
+ECHO             := echo
+
+# Executable Programs the Installed be have to
+EXECUTABLES = $(AWK) $(CP) $(KILL) $(M4) $(MV) rm mkdir $(SED) $(SORT) $(TOUCH) $(WGET) $(CHMOD) $(NPX) $(FIND) $(XARGS) $(GREP) $(NPM) $(GIT) $(NPX) $(ECHO) $(CAT); 
+K := $(foreach exec,$(EXECUTABLES),\
+        $(if $(shell which $(exec)),some string,$(error "Missing $(exec) in PATH; please install")))
+
+#############################################################################################
+#############################################################################################
+##
+## DEFAULT-TARGETS
+##
+#############################################################################################
+#############################################################################################
+
+# @see .PHONY https://www.gnu.org/software/make/manual/html_node/Phony-Targets.html#Phony-Targets
+
+.DEFAULT_GOAL := help
+
+.PHONY: print
+print:
+	$(ECHO) "THIS_MAKEFILE:      $(THIS_MAKEFILE)"
+	$(ECHO) "THIS_MAKEFILE_PATH: $(THIS_MAKEFILE_PATH)"
+	$(ECHO) "THIS_DIR:           $(THIS_DIR)"
+
+# Add a comment to the public targets so that it appears
+# in this help Use two # characters for a help comment
+.PHONY: help
+help:
+	@printf "${COMMENT}Usage:${RESET}\n"
+	@printf " make [target] [arg=\"val\"...]\n\n"
+	@printf "${COMMENT}Available targets:${RESET}\n"
+	@awk '/^[a-zA-Z\-_0-9\.@]+:/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpCommand = substr($$1, 0, index($$1, ":")); \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf " ${INFO}%-22s${RESET} %s\n", helpCommand, helpMessage; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)
+	@printf "\n${COMMENT}Available arguments:${RESET}\n"
+	@printf "\n ${INFO}DONTOPENBROWSER${RESET}        disable open chrome"
+	@printf "\n ${INFO}NEXTVERSION${RESET}            see target release => 0 – major, 1 – minor (default), 2 – patch\n"
+	@awk '/^(([a-zA-Z\-_0-9\.@]+)\s=)/ { \
+		helpMessage = match(lastLine, /^## (.*)/); \
+		if (helpMessage) { \
+			helpMessage = substr(lastLine, RSTART + 3, RLENGTH); \
+			printf " ${INFO}%-22s${RESET} %s (Default: %s)\n", $$1, helpMessage, $$3; \
+		} \
+	} \
+	{ lastLine = $$0 }' $(MAKEFILE_LIST)
+	@printf "\n"
+
+.PHONY: variables
+## Print all Variables
+variables:
+	@$(foreach v, $(.VARIABLES), $(if $(filter file,$(origin $(v))), $(info $(INFO)$(v)$(RESET)=$($(v))$(RESET))))
+
+#############################################################################################
+#############################################################################################
+##
+## DIRECTORIES
+##
+#############################################################################################
+#############################################################################################
+
+SCRIPT_PATH          :=   $(THIS_DIR)scripts/
+
+
+PACKAGE_DIR                                := $(THIS_DIR)
+PACKAGE_DIST_DIR                           := $(THIS_DIR)dist/
+PACKAGE_DIST_FILE                          := $(PACKAGE_DIST_DIR)@schukai/grapesjs-blocks-bootstrap5.min.js
+PACKAGE_SOURCE_DIR                         := $(THIS_DIR)source/
+PACKAGE_SOURCE_FILES                       := $(shell find $(PACKAGE_SOURCE_DIR) -name '*.js')
+PACKAGE_RELATIVE_SOURCE_FILES              := $(shell find $(PACKAGE_SOURCE_DIR) -name '*.js' -exec realpath --relative-to $(THIS_DIR) {} \;   )
+PACKAGE_VERSION                            := $(shell jq -r ".version" $(PACKAGE_DIR)package.json)
+
+#############################################################################################
+#############################################################################################
+##
+## GIT-TARGETS
+##
+#############################################################################################
+#############################################################################################
+
+
+## Git Commit Message for git-push
+MESSAGE := current status
+
+.PHONY: git-branch
+## create new branch (use TAG-Variable)
+git-branch:
+
+ifeq (, $(shell command -v uuidgen))
+	$(error "No uuidgen in PATH, consider doing apt-get install uuidgen")
+endif
+
+	$(QUIET) export BRANCH="$(shell uuidgen --random)" ; \
+	$(GIT) checkout -b $${BRANCH} && \
+	RESULT=$$($(GIT) push origin $$BRANCH 2>&1) && \
+    RESULT2=$$($(GIT) branch --set-upstream-to=origin/$$BRANCH $$BRANCH) && \
+	GITLABURL=$$(echo "$$RESULT" | tr '\n' '\#' | grep -o 'remote\:\s*https:\/\/gitlab\.schukai\.com[^ ]*' | cut -d " " -f2-9 | sed -e 's/^[ \t]*//') && \
+	if $(OPENBROWSER) ; then google-chrome --profile-directory="Default" $$GITLABURL ; fi
+
+
+.PHONY: git-to-master
+## git checkout master, fetch and merge
+git-to-master:
+	$(GIT) checkout master && $(GIT) fetch -pP && $(GIT) merge
+
+
+.PHONY: git-push-to-server
+## git push changes to server
+git-push-to-server:
+	$(GIT) add -A
+	$(GIT) commit -m"$(MESSAGE)"
+	$(GIT) push
+
+.PHONY: git-push
+## git create branch and push changes to server
+git-push: git-branch git-push-to-server
+
+.PHONY: git-tag
+## git create version tag
+git-tag:
+	$(GIT) tag -a "$(PACKAGE_VERSION)" -m "release $(PACKAGE_VERSION)"
+
+#############################################################################################
+#############################################################################################
+##
+## NODE-DEFINITIONS
+##
+#############################################################################################
+#############################################################################################
+
+NODE_MODULES_DIR := $(THIS_DIR)node_modules/
+NODE_MODULES_BIN_DIR := $(NODE_MODULES_DIR).bin/
+
+WEBPACK       := $(NODE_MODULES_BIN_DIR)webpack
+BABEL         := $(NODE_MODULES_BIN_DIR)babel
+UGLIFYJS      := $(NODE_MODULES_BIN_DIR)uglifyjs
+
+$(NODE_MODULES_DIR): $(THIS_DIR)package.json
+	$(QUIET) $(NPM) install 
+	$(QUIET) $(RM) node_modules/.modified
+	$(QUIET) $(TOUCH) -m node_modules/.modified	
+
+#############################################################################################
+#############################################################################################
+##
+## DEFAULT-DEFINITIONS
+##
+#############################################################################################
+#############################################################################################
+
+
+.PHONY: clean
+## clean 
+clean:
+	$(QUIET) $(RM) --recursive $(THIS_DIR)dist/
+
+$(PACKAGE_DIST_FILE): $(PACKAGE_SOURCE_FILES)
+	$(QUIET) $(NPM) run build
+
+.PHONY: build
+## create all packages
+build: $(NODE_MODULES_DIR) $(PACKAGE_DIST_FILE)
+
+.PHONY: dev
+## start dev server
+dev: $(NODE_MODULES_DIR)
+	$(QUIET) $(NPM) run start
+
+FILEMARKER:=\#GITIGNORE-START
+
+$(PACKAGE_DIR).npmignore: $(PACKAGE_DIR).gitignore
+	$(QUIET) $(SED) -i -n '/$(FILEMARKER)/q;p'  $(PACKAGE_DIR).npmignore  
+	$(QUIET) $(ECHO) "$(FILEMARKER)" >> $(PACKAGE_DIR).npmignore  
+	$(QUIET) $(ECHO) "" >> $(PACKAGE_DIR).npmignore  
+	$(QUIET) $(ECHO) "" >> $(PACKAGE_DIR).npmignore  
+	$(QUIET) $(CAT) $(PACKAGE_DIR).gitignore >> $(PACKAGE_DIR).npmignore  
+
+.PHONY: release
+## release repos with new version (use NEXTVERSION)
+release:
+	$(ECHOMARKER) "release"
+	$(QUIET) $(SCRIPT_PATH)increase-version.sh "$(PACKAGE_DIR)package.json" "$(PACKAGE_VERSION)" "$(NEXTVERSION)"  
+	$(QUIET) $(MAKE) clean
+	$(QUIET) $(MAKE) build
+	$(QUIET) $(MAKE) npm-publish
+	$(QUIET) touch $(THIS_DIR)package.json
+
+.PHONY: npm-publish
+## publish library to npm
+npm-publish: build $(PACKAGE_DIR).npmignore
+	$(ECHOMARKER) "publish"
+	$(QUIET) $(CD) $(THIS_DIR) ; \
+		$(NPM) publish --access public ; \
+		$(CD) -
+
+
+
+

README.md

@@ -6,175 +6,177 @@ this is a fork from [github.com/kaoz70/grapesjs-blocks-bootstrap4](https://githu
 
 * Plugin name: `grapesjs-blocks-bootstrap4`
 * Components (see Options for list of Blocks)
-  * Layout
-    * `container`
-    * `row`
-    * `column`
-    * `column_break`
-    * `media_object`
-    * `media_body`
-  * Components
-    * `alert`
-    * `tabs`
-    * `badge`
-    * `card`
-    * `card_container`
-    * `collapse`
-    * `dropdown`
-    * `dropdown_menu`
-  * Typography
-    * `text`
-    * `header`
-    * `paragraph`
-  * Media
-    * `image`
-    * `video`
-  * Forms
-    * `form`
-    * `button`
-    * `button_group`
-    * `button_toolbar`
-    * `input`
-    * `input_group`
-    * `form_group_input`
-    * `textarea`
-    * `checkbox`
-    * `radio`
-
-
-
-
+    * Layout
+        * `container`
+        * `row`
+        * `column`
+        * `column_break`
+        * `media_object`
+        * `media_body`
+    * Components
+        * `alert`
+        * `tabs`
+        * `badge`
+        * `card`
+        * `card_container`
+        * `collapse`
+        * `dropdown`
+        * `dropdown_menu`
+    * Typography
+        * `text`
+        * `header`
+        * `paragraph`
+    * Media
+        * `image`
+        * `video`
+    * Forms
+        * `form`
+        * `button`
+        * `button_group`
+        * `button_toolbar`
+        * `input`
+        * `input_group`
+        * `form_group_input`
+        * `textarea`
+        * `checkbox`
+        * `radio`
 
 ## Options
 
 ```js
 {
-  blocks: {
-    
-  },
-  blockCategories: {
-    
-  },
-  labels: {
-    
-  },
-  formPredefinedActions: null,
-  optionsStringSeparator: '::'
+    blocks: {
+
+    }
+,
+    blockCategories: {
+
+    }
+,
+    labels: {
+
+    }
+,
+    formPredefinedActions: null,
+        optionsStringSeparator
+:
+    '::'
 }
 ```
 
 ### Blocks
 
-|Option|Description|Default|
-|-|-|-
-|`default`|Rebuild default component with utility settings|true|
-|`text`|Rebuild text component to re-inherit from default|true|
-|`link`|Rebuild link component to re-inherit from default and give toggle setting|true|
-|`image`|Rebuild image component to re-inherit from default|true|
-|`video`|Rebuild video component to re-inherit from default|true|
-|`container`|Container (fixed/fluid)|true|
-|`row`|Row|true|
-|`column`|Columns of all sizes|true|
-|`column_break`|Column-break (`div.w-100`)|true|
-|`media_object`|Media object|true|
-|`alert`||true|
-|`tabs`||true|
-|`badge`||true|
-|`card`|Card with settings for images, image overlay, header, body, & footer components|true|
-|`card_container`|Layouts: group, deck, columns|true|
-|`collapse`|Collapse component that can be toggled via link component|true|
-|`dropdown`|Dropdown|true|
-|`header`|H1-H6|true|
-|`paragraph`|P tag with "lead" setting|true|
-|`form`||true|
-|`button`||true|
-|`button_group`||true|
-|`button_toolbar`||true|
-|`input`||true|
-|`input_group`||true|
-|`form_group_input`||true|
-|`textarea`||true|
-|`checkbox`||true|
-|`radio`||true|
+| Option             | Description                                                                     | Default |
+| -------------------- | --------------------------------------------------------------------------------- | --------- |
+| `default`          | Rebuild default component with utility settings                                 | true    |
+| `text`             | Rebuild text component to re-inherit from default                               | true    |
+| `link`             | Rebuild link component to re-inherit from default and give toggle setting       | true    |
+| `image`            | Rebuild image component to re-inherit from default                              | true    |
+| `video`            | Rebuild video component to re-inherit from default                              | true    |
+| `container`        | Container (fixed/fluid)                                                         | true    |
+| `row`              | Row                                                                             | true    |
+| `column`           | Columns of all sizes                                                            | true    |
+| `column_break`     | Column-break (`div.w-100`)                                                      | true    |
+| `media_object`     | Media object                                                                    | true    |
+| `alert`            |                                                                                 | true    |
+| `tabs`             |                                                                                 | true    |
+| `badge`            |                                                                                 | true    |
+| `card`             | Card with settings for images, image overlay, header, body, & footer components | true    |
+| `card_container`   | Layouts: group, deck, columns                                                   | true    |
+| `collapse`         | Collapse component that can be toggled via link component                       | true    |
+| `dropdown`         | Dropdown                                                                        | true    |
+| `header`           | H1-H6                                                                           | true    |
+| `paragraph`        | P tag with "lead" setting                                                       | true    |
+| `form`             |                                                                                 | true    |
+| `button`           |                                                                                 | true    |
+| `button_group`     |                                                                                 | true    |
+| `button_toolbar`   |                                                                                 | true    |
+| `input`            |                                                                                 | true    |
+| `input_group`      |                                                                                 | true    |
+| `form_group_input` |                                                                                 | true    |
+| `textarea`         |                                                                                 | true    |
+| `checkbox`         |                                                                                 | true    |
+| `radio`            |                                                                                 | true    |
 
 ### Block Categories
 
-These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false exclude entire groups of blocks (as well as the associated components).
-
-|Option|Description|Default|
-|-|-|-
-|`layout`|Container, row, col, col-break, media object|true|
-|`components`|_Bootstrap_'s Components--alert, button, card, etc.|true|
-|`typography`|Text, header, paragraph, etc.|true|
-|`basic`|Link, image, etc.|true|
-|`forms`|Form, input, textarea, etc.|true|
+These are the different categories of blocks as they are grouped in the Blocks sidebar panel. Set a value to false
+exclude entire groups of blocks (as well as the associated components).
 
+| Option       | Description                                         | Default |
+| -------------- | ----------------------------------------------------- | --------- |
+| `layout`     | Container, row, col, col-break, media object        | true    |
+| `components` | _Bootstrap_'s Components--alert, button, card, etc. | true    |
+| `typography` | Text, header, paragraph, etc.                       | true    |
+| `basic`      | Link, image, etc.                                   | true    |
+| `forms`      | Form, input, textarea, etc.                         | true    |
 
 ### Labels
 
 Same keys as Blocks, but value is the label for the block.
 
-|Option|Description|Default|
-|-|-|-
-|`text`||'Text'|
-|`header`||'Header'|
+| Option   | Description | Default  |
+| ---------- | ------------- | ---------- |
+| `text`   |             | 'Text'   |
+| `header` |             | 'Header' |
 
 etc.
 
 ### Other
 
-|Option|Description|Default|
-|-|-|-
-|`gridDevices`|Add devices based on BS grid breakpoints|true|
-|`gridDevicesPanel`|Build a panel in the top-left corner with device buttons (use with editor `showDevices`=`false`)|false|
-|`formPredefinedActions`|Pass a list of predefined form actions to generate a select menu: [{name: 'Contact', value: '/contact'}, ...], if no list is passed an input box to add the action is shown|null|
-|`optionsStringSeparator`|Pass a string to identify the separator of values and labels of the select options: optionValue::optionLabel. This setting WILL BE overridden by the gjs-preset-webpage plugin if enabled|'::'|
-
+| Option                   | Description                                                                                                                                                                               | Default |
+| -------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- |
+| `gridDevices`            | Add devices based on BS grid breakpoints                                                                                                                                                 | true    |
+| `gridDevicesPanel`       | Build a panel in the top-left corner with device buttons (use with editor`showDevices`=`false`)                                                                                           | false   |
+| `formPredefinedActions`  | Pass a list of predefined form actions to generate a select menu: [{name: 'Contact', value: '/contact'}, ...], if no list is passed an input box to add the action is shown               | null    |
+| `optionsStringSeparator` | Pass a string to identify the separator of values and labels of the select options: optionValue::optionLabel. This setting WILL BE overridden by the gjs-preset-webpage plugin if enabled | '::'    |
 
 ## Download
 
 * NPM
-  * `npm i @minerva/grapesjs-blocks-bootstrap5`
+    * `npm i @schukai/grapesjs-blocks-bootstrap5`
 * GIT
-  * `git clone https://gitlab.schukai.com/oss/minerva/grapesjs-blocks-bootstrap.git`
+    * `git clone https://gitlab.schukai.com/oss/minerva/grapesjs-blocks-bootstrap.git`
 
 ## Usage
 
 ```html
-<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet"/>
+
+<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
 <script src="https://unpkg.com/grapesjs"></script>
-<script src="path/to/grapesjs-blocks-bootstrap5.min.js"></script>
+<script src="@schukai/grapesjs-blocks-bootstrap5.min.js"></script>
 
 <div id="gjs"></div>
 
 <script type="text/javascript">
-  var editor = grapesjs.init({
-      container : '#gjs',
-      ...
-      plugins: ['grapesjs-blocks-bootstrap5'],
-      pluginsOpts: {
-        'grapesjs-blocks-bootstrap5': {
-          blocks: {
-            // ...
-          },
-          blockCategories: {
-            // ...
-          },
-          labels: {
-            // ...
-          },
-          // ...
+    var editor = grapesjs.init({
+        container: '#gjs',
+        plugins:
+                ['grapesjs-blocks-bootstrap5'],
+        pluginsOpts: {
+            'grapesjs-blocks-bootstrap5':
+                    {
+                        blocks: {
+                            // ...
+                        },
+                        blockCategories: {
+                            // ...
+                        },
+                        labels: {
+                            // ...
+                        },
+                        // ...
+                    }
+        },
+        canvas: {
+            styles: [
+                'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css'
+            ],
+            scripts: [
+                'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js'
+            ],
         }
-      },
-      canvas: {
-        styles: [
-          'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
-        ],
-        scripts: [
-          'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'
-        ],
-      }
-  });
+    });
 </script>
 ```
 
@@ -193,7 +195,8 @@ Install dependencies
 $ npm i
 ```
 
-The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to package.json)
+The plugin relies on GrapesJS via `peerDependencies` so you have to install it manually (without adding it to
+package.json)
 
 ```sh
 $ npm i grapesjs --no-save
@@ -205,10 +208,6 @@ Start the dev server
 $ npm start
 ```
 
-
-
-
-
 ## License
 
 BSD 3-Clause

dist/@minerva/grapesjs-blocks-bootstrap5.min.js.LICENSE.txt

-/*! @minerva/grapesjs-blocks-bootstrap5 - 0.1.6 */

dist/@schukai/grapesjs-blocks-bootstrap5.min.js.LICENSE.txt

+/*! @schukai/grapesjs-blocks-bootstrap5 - 1.0.2 */

index.html

@@ -5,7 +5,7 @@
     <title>GrapesJS Bootstrap v5 Blocks Plugin</title>
     <link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet">
     <script src="https://unpkg.com/grapesjs"></script>
-    <script src="dist/@minerva/grapesjs-blocks-bootstrap5.min.js"></script>
+    <script src="@schukai/grapesjs-blocks-bootstrap5.min.js"></script>
     <style>
         body,
         html {
@@ -17,7 +17,128 @@
 <body>
 
 <div id="gjs">
-    
+
+    <form class="row g-3 needs-validation" novalidate>
+        <div class="col-md-4">
+            <label for="validationCustom01" class="form-label">First name</label>
+            <input type="text" class="form-control" id="validationCustom01" value="Mark" required>
+            <div class="valid-feedback">
+                Looks good!
+            </div>
+        </div>
+        <div class="col-md-4">
+            <label for="validationCustom02" class="form-label">Last name</label>
+            <input type="text" class="form-control" id="validationCustom02" value="Otto" required>
+            <div class="valid-feedback">
+                Looks good!
+            </div>
+        </div>
+        <div class="col-md-4">
+            <label for="validationCustomUsername" class="form-label">Username</label>
+            <div class="input-group has-validation">
+                <span class="input-group-text" id="inputGroupPrepend">@</span>
+                <input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
+                <div class="invalid-feedback">
+                    Please choose a username.
+                </div>
+            </div>
+        </div>
+        <div class="col-md-6">
+            <label for="validationCustom03" class="form-label">City</label>
+            <input type="text" class="form-control" id="validationCustom03" required>
+            <div class="invalid-feedback">
+                Please provide a valid city.
+            </div>
+        </div>
+        <div class="col-md-3">
+            <label for="validationCustom04" class="form-label">State</label>
+            <select class="form-select" id="validationCustom04" required>
+                <option selected disabled value="">Choose...</option>
+                <option>...</option>
+            </select>
+            <div class="invalid-feedback">
+                Please select a valid state.
+            </div>
+        </div>
+        <div class="col-md-3">
+            <label for="validationCustom05" class="form-label">Zip</label>
+            <input type="text" class="form-control" id="validationCustom05" required>
+            <div class="invalid-feedback">
+                Please provide a valid zip.
+            </div>
+        </div>
+        <div class="col-12">
+            <div class="form-check">
+                <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
+                <label class="form-check-label" for="invalidCheck">
+                    Agree to terms and conditions
+                </label>
+                <div class="invalid-feedback">
+                    You must agree before submitting.
+                </div>
+            </div>
+        </div>
+        <div class="col-12">
+            <button class="btn btn-primary" type="submit">Submit form</button>
+        </div>
+    </form>
+    <hr>
+
+    <div class="container-sm">100% wide until small breakpoint</div>
+    <div class="container-md">100% wide until medium breakpoint</div>
+    <div class="container-lg">100% wide until large breakpoint</div>
+    <div class="container-xl">100% wide until extra large breakpoint</div>
+    <div class="container-xxl">100% wide until extra extra large breakpoint</div>
+
+    <div class="container-fluid">
+        Fluid containers
+    </div>
+
+    <hr>
+
+    <div class="container px-4">
+        <div class="row gx-5">
+            <div class="col">
+                <div class="p-3 border bg-light">Custom column padding</div>
+            </div>
+            <div class="col">
+                <div class="p-3 border bg-light">Custom column padding</div>
+            </div>
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="container">
+        <div class="row">
+            <div class="col">
+                Column
+            </div>
+            <div class="col">
+                Column
+            </div>
+            <div class="col">
+                Column
+            </div>
+        </div>
+        <div class="row">
+            <div class="col">
+                <p>
+                    Fatalis caesiums ducunt ad idoleum. Nunquam experientia cedrium. Lanistas sunt cliniass de secundus
+                    gluten. Nuclear flux at the ready room was the advice of courage, united to a neutral planet.
+                    Nunquam experientia cedrium. Lanistas sunt cliniass de secundus gluten. Nuclear flux at the ready
+                    room was the advice of courage, united to a neutral planet. Adelphiss sunt diatrias de castus
+                    domina.
+                </p>
+
+                <ul class="list-unstyled">
+                    <li>Calceus talis heuretes est.</li>
+                    <li>Calceus talis heuretes est.</li>
+                    <li>Calceus talis heuretes est.</li>
+                </ul>
+            </div>
+        </div>
+    </div>
 </div>
 
 
@@ -26,13 +147,13 @@
         height: '100%',
         showOffsets: 1,
         noticeOnUnload: 0,
-        storageManager: { autoload: 0 },
+        storageManager: {autoload: 0},
         container: '#gjs',
         fromElement: true,
         showDevices: false,
-        plugins: ['@minerva/grapesjs-blocks-bootstrap5'],
+        plugins: ['@schukai/grapesjs-blocks-bootstrap5'],
         pluginsOpts: {
-            '@minerva/grapesjs-blocks-bootstrap5': {
+            '@schukai/grapesjs-blocks-bootstrap5': {
                 blocks: {},
                 blockCategories: {},
                 labels: {},
@@ -45,10 +166,10 @@
         },
         canvas: {
             styles: [
-                'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css'
+                'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css'
             ],
             scripts: [
-                'https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js'
+                'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js'
             ],
         }
     });

package.json

 {
-  "name": "@minerva/grapesjs-blocks-bootstrap5",
-  "version": "0.1.6",
+  "name": "@schukai/grapesjs-blocks-bootstrap5",
+  "version": "1.0.2",
   "description": "GrapesJS Bootstrap v5 Blocks Plugin",
-  "main": "dist/grapesjs-blocks-bootstrap5.min.js",
+  "main": "dist/@schukai/grapesjs-blocks-bootstrap5.min.js",
   "scripts": {
-    "lint": "eslint src",
-    "v:patch": "npm version --no-git-tag-version patch",
-    "v:minor": "npm version --no-git-tag-version minor",
-    "build": "npm run v:patch && webpack --env production",
+    "lint": "eslint source",
+    "build": "webpack --env production",
     "build-dev": "npm run && webpack --env production",
-    "start": "webpack-cli serve --mode development --progress"
+    "start": "webpack-cli serve --mode development --progress",
+    "postinstall": "npm-install-peers"
   },
   "repository": {
     "type": "git",
@@ -26,20 +25,19 @@
     "grapesjs": "0.x"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.17",
-    "@babel/plugin-proposal-object-rest-spread": "^7.13.0",
-    "@babel/preset-env": "^7.13.5",
+    "@babel/core": "^7.18.2",
+    "@babel/plugin-proposal-object-rest-spread": "^7.18.0",
+    "@babel/preset-env": "^7.18.2",
     "@webpack-cli/init": "^1.1.3",
-    "babel-loader": "^8.2.2",
-    "eslint": "^7.20.0",
-    "html-webpack-plugin": "^5.2.0",
+    "babel-loader": "^8.2.5",
+    "eslint": "^8.16.0",
+    "html-webpack-plugin": "^5.5.0",
     "raw-loader": "^4.0.2",
-    "terser-webpack-plugin": "^5.1.1",
-    "webpack": "^5.24.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^3.11.2"
-  },
-  "dependencies": {
-    "npm": "^7.0.14"
+    "terser-webpack-plugin": "^5.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0",
+    "npm": "^8.11.0",
+    "npm-install-peers": "^1.2.2"
   }
 }

scripts/increase-version.sh

+#!/bin/bash
+
+### Increments the part of the string
+## $1: version itself
+## $2: number of part: 0 – major, 1 – minor, 2 – patch
+increment_version() {
+  local delimiter=.
+  local array=($(echo "$1" | tr $delimiter '\n'))
+  array[$2]=$((array[$2] + 1))
+  if [ $2 -lt 2 ]; then array[2]=0; fi
+  if [ $2 -lt 1 ]; then array[1]=0; fi
+  echo $(
+    local IFS=$delimiter
+    echo "${array[*]}"
+  )
+}
+
+JSON="${1}"
+VERSION="${2}"
+MODE="${3:-1}"
+
+jq '.version="'$(increment_version "${VERSION}" "${MODE}")'"' "${JSON}" > "${JSON}.new"
+rm "${JSON}"
+mv "${JSON}.new" "${JSON}"

source/components.js

+import Collapse, {CollapseBlock} from './components/Collapse';
+import Dropdown, {DropDownBlock} from './components/Dropdown';
+import TabsNavigation, {TabsBlock} from "./components/tabs/TabsNavigation";
+import TabsPanes from "./components/tabs/TabsPanes";
+import Tab from "./components/tabs/Tab";
+import TabPane from "./components/tabs/TabPane";
+import Form, {FormBlock} from "./components/Form";
+import Input, {InputBlock} from "./components/Input";
+import InputGroup, {InputGroupBlock} from "./components/InputGroup";
+import Textarea, {TextareaBlock} from "./components/Textarea";
+import Select, {SelectBlock} from "./components/Select";
+import Checkbox, {CheckboxBlock} from "./components/Checkbox";
+import Radio, {RadioBlock} from "./components/Radio";
+import Button, {ButtonBlock} from "./components/Button";
+import ButtonGroup, {ButtonGroupBlock} from "./components/ButtonGroup";
+import ButtonToolbar, {ButtonToolbarBlock} from "./components/ButtonToolbar";
+import Label, {LabelBlock} from "./components/Label";
+import Link, {LinkBlock} from "./components/Link";
+import FileInput, {FileInputBlock} from "./components/FileInput";
+import Image, {ImageBlock} from "./components/Image";
+import Video, {VideoBlock} from "./components/video/Video";
+import Embed from "./components/video/Embed";
+import Paragraph, {ParagraphBlock} from "./components/Paragraph";
+import Header, {HeaderBlock} from "./components/Header";
+import Card, {CardBlock} from "./components/Card";
+import Badge, {BadgeBlock} from "./components/Badge";
+import Alert, {AlertBlock} from "./components/Alert";
+import MediaObject, {MediaObjectBlock} from "./components/MediaObject";
+import ColumnBreak, {ColumnBreakBlock} from "./components/ColumnBreak";
+import Column, {ColumnBlock} from "./components/Column";
+import Row, {RowBlock} from "./components/Row";
+import Container, {ContainerBlock} from "./components/Container";
+import Text, {TextBlock} from "./components/Text";
+import List, {ListBlock} from './components/List.js';
+import ListItem, {ListItemBlock} from './components/ListItem.js';
+
+import Default from "./components/Default";
+
+
+export default (editor, config = {}) => {
+    const c = config;
+
+    const domc = editor.DomComponents;
+    const blocks = c.blocks;
+    const bm = editor.BlockManager;
+    const cats = c.blockCategories;
+
+    const traits = {
+        id: {
+            name: 'id',
+            label: c.labels.trait_id,
+        },
+        for: {
+            name: 'for',
+            label: c.labels.trait_for,
+        },
+        name: {
+            name: 'name',
+            label: c.labels.trait_name,
+        },
+        placeholder: {
+            name: 'placeholder',
+            label: c.labels.trait_placeholder,
+        },
+        value: {
+            name: 'value',
+            label: c.labels.trait_value,
+        },
+        required: {
+            type: 'checkbox',
+            name: 'required',
+            label: c.labels.trait_required,
+        },
+        checked: {
+            label: c.labels.trait_checked,
+            type: 'checkbox',
+            name: 'checked',
+            changeProp: 1
+        }
+    };
+
+    if (cats.media) {
+        if (blocks.image) {
+            ImageBlock(bm, c.labels.image);
+            Image(domc);
+        }
+
+        if (blocks.video) {
+            Embed(domc);
+            VideoBlock(bm, c.labels.video);
+            Video(domc);
+        }
+    }
+
+    // Rebuild the default component and add utility settings to it (border, bg, color, etc)
+    if (cats.basic) {
+        if (blocks.default) {
+            Default(domc);
+        }
+
+        // Rebuild the text component and add display utility setting
+        if (blocks.text) {
+            TextBlock(bm, c.labels.text);
+            Text(domc);
+        }
+
+        // Rebuild the link component with settings for collapse-control
+        if (blocks.link) {
+            LinkBlock(bm, c.labels.link);
+            Link(editor);
+        }
+
+        // Basic
+        if (blocks.list) {
+            ListBlock(bm, c.labels.list)
+            List(domc);
+
+            if (blocks.list_item) {
+                ListItemBlock(bm, c.labels.list_item)
+                ListItem(domc);
+            }
+        }
+
+    }
+
+    // LAYOUT
+    if (cats.layout) {
+        if (blocks.container) {
+            ContainerBlock(bm, c.labels.container);
+            Container(domc);
+        }
+        if (blocks.row) {
+            RowBlock(bm, c.labels.row);
+            Row(domc);
+        }
+        if (blocks.column) {
+            ColumnBlock(bm, c.labels.column);
+            Column(domc, editor);
+
+            ColumnBreakBlock(bm, c.labels.column_break);
+            ColumnBreak(domc);
+        }
+        // Media object
+        if (blocks.media_object) {
+            MediaObjectBlock(bm, c.labels.media_object);
+            MediaObject(domc);
+        }
+    }
+
+    // Bootstrap COMPONENTS
+    if (cats.components) {
+        // Alert
+        if (blocks.alert) {
+            AlertBlock(bm, c.labels.alert);
+            Alert(domc);
+        }
+
+        if (blocks.tabs) {
+            TabsBlock(bm, c);
+            TabsNavigation(domc, config);
+            Tab(domc, config);
+            TabsPanes(domc, config);
+            TabPane(domc, config);
+        }
+
+        // Badge
+        if (blocks.badge) {
+            BadgeBlock(bm, c.labels.badge);
+            Badge(domc);
+        }
+
+        // Card
+        if (blocks.card) {
+            CardBlock(bm, c);
+            Card(domc, editor);
+        }
+
+        // Collapse
+        if (blocks.collapse) {
+            CollapseBlock(bm, c.labels.collapse);
+            Collapse(editor);
+        }
+
+        // Dropdown
+        if (blocks.dropdown) {
+            DropDownBlock(bm, c.labels.dropdown);
+            Dropdown(editor);
+        }
+
+    }
+
+    // TYPOGRAPHY
+    if (cats.typography) {
+        if (blocks.header) {
+            HeaderBlock(bm, c.labels.header);
+            Header(domc);
+        }
+        if (blocks.paragraph) {
+            ParagraphBlock(bm, c.labels.paragraph);
+            Paragraph(domc);
+        }
+    }
+
+    if (cats.forms) {
+        if (blocks.form) {
+            FormBlock(bm, c.labels.form);
+            Form(domc, traits, config);
+        }
+
+        if (blocks.input) {
+            InputBlock(bm, c.labels.input);
+            Input(domc, traits, config);
+
+            FileInputBlock(bm, c.labels.file_input);
+            FileInput(domc, traits, config);
+        }
+
+        if (blocks.form_group_input) {
+            InputGroupBlock(bm, c.labels.form_group_input);
+            InputGroup(domc, traits, config);
+        }
+
+        if (blocks.textarea) {
+            TextareaBlock(bm, c.labels.textarea);
+            Textarea(domc, traits, config);
+        }
+
+        if (blocks.select) {
+            SelectBlock(bm, c.labels.select);
+            Select(editor, domc, traits, config);
+        }
+
+        if (blocks.checkbox) {
+            CheckboxBlock(bm, c.labels.checkbox);
+            Checkbox(domc, traits, config);
+        }
+
+        if (blocks.radio) {
+            RadioBlock(bm, c.labels.radio);
+            Radio(domc, traits, config);
+        }
+
+        if (blocks.label) {
+            LabelBlock(bm, c.labels.label);
+            Label(domc, traits, config);
+        }
+
+        if (blocks.button) {
+            ButtonBlock(bm, c.labels.button);
+            Button(domc);
+        }
+
+        if (blocks.button_group) {
+            ButtonGroupBlock(bm, c.labels.button_group);
+            ButtonGroup(domc);
+        }
+
+        if (blocks.button_toolbar) {
+            ButtonToolbarBlock(bm, c.labels.button_toolbar, c);
+            ButtonToolbar(domc);
+        }
+    }
+
+}