@innovastudio/contentbuilder 1.5.158 → 1.5.160

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@innovastudio/contentbuilder",
   "type": "module",
-  "version": "1.5.158",
+  "version": "1.5.160",
   "description": "",
   "main": "public/contentbuilder/contentbuilder.esm.js",
   "types": "index.d.ts",
@@ -59,6 +59,7 @@
     "webpack-dev-server": "^4.2.1"
   },
   "dependencies": {
+    "@innovastudio/contentbuilder-runtime": "^1.0.13",
     "@monaco-editor/loader": "^1.3.2",
     "blueimp-load-image": "^5.16.0",
     "cropperjs": "^1.5.12",

package/public/contentbuilder/contentbuilder.css

@@ -2360,7 +2360,7 @@ button:focus-visible {
 .is-ui .is-modal .is-modal-content {
   background: #fff;
   border: 1px solid #e3e3e3;
-  box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.08);
+  box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
   border-radius: 11px;
   overflow: hidden;
 }
@@ -2376,7 +2376,7 @@ button:focus-visible {
 .is-ui .is-modal:not(.is-modal-content) > div:not(.is-modal-overlay) {
   background: #fff;
   border: 1px solid #e3e3e3;
-  box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.08);
+  box-shadow: 6px 14px 20px 0px rgba(95, 95, 95, 0.11);
   position: relative;
   width: 100%;
   padding: 25px 25px;
@@ -2625,6 +2625,47 @@ button:focus-visible {
 .is-ui .is-modal.pagesize .input-height {
   width: 65px;
 }
+#_cbhtml .is-modal.pluginsettings,
+.is-ui .is-modal.pluginsettings {
+  z-index: 10002;
+  position: fixed;
+  overflow: hidden;
+  width: 420px;
+  height: 600px;
+  top: 50%;
+  left: calc(50% - 200px);
+  right: 30%;
+  margin-top: -300px;
+  box-sizing: content-box;
+  flex-direction: row;
+  align-items: flex-start;
+}
+#_cbhtml .is-modal.pluginsettings .is-modal-bar,
+.is-ui .is-modal.pluginsettings .is-modal-bar {
+  line-height: 30px;
+  height: 30px;
+  background-color: #fafafa;
+}
+#_cbhtml .is-modal.pluginsettings .is-modal-bar .is-modal-close,
+.is-ui .is-modal.pluginsettings .is-modal-bar .is-modal-close {
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  font-size: 10px;
+}
+#_cbhtml .is-modal.pluginsettings.active,
+.is-ui .is-modal.pluginsettings.active {
+  display: flex;
+}
+#_cbhtml .is-modal.pluginsettings > div:not(.is-draggable),
+.is-ui .is-modal.pluginsettings > div:not(.is-draggable) {
+  width: 100%;
+  margin-top: 30px;
+}
+#_cbhtml .is-modal.pluginsettings .is-modal-overlay,
+.is-ui .is-modal.pluginsettings .is-modal-overlay {
+  display: none !important;
+}
 #_cbhtml .is-modal.edittable,
 .is-ui .is-modal.edittable {
   z-index: 10002;
@@ -3541,42 +3582,47 @@ button:focus-visible {
 .is-ui .is-modal [class^=image-larger] {
   flex: none;
 }
-#_cbhtml .is-tool#divImageTool, #_cbhtml .is-tool.is-video-tool, #_cbhtml .is-tool.is-audio-tool, #_cbhtml .is-tool.is-iframe-tool,
+#_cbhtml .is-tool#divImageTool, #_cbhtml .is-tool.is-video-tool, #_cbhtml .is-tool.is-audio-tool, #_cbhtml .is-tool.is-plugin-tool, #_cbhtml .is-tool.is-iframe-tool,
 .is-ui .is-tool#divImageTool,
 .is-ui .is-tool.is-video-tool,
 .is-ui .is-tool.is-audio-tool,
+.is-ui .is-tool.is-plugin-tool,
 .is-ui .is-tool.is-iframe-tool {
   background: rgba(255, 255, 255, 0.97) !important;
   border: transparent 1px solid;
   box-shadow: -1px 5px 8px 0px rgba(0, 0, 0, 0.08);
   border-radius: 20px;
 }
-#_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
+#_cbhtml .is-tool#divImageTool > div, #_cbhtml .is-tool#divImageTool > button, #_cbhtml .is-tool.is-video-tool > div, #_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > div, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-plugin-tool > div, #_cbhtml .is-tool.is-plugin-tool > button, #_cbhtml .is-tool.is-iframe-tool > div, #_cbhtml .is-tool.is-iframe-tool > button,
 .is-ui .is-tool#divImageTool > div,
 .is-ui .is-tool#divImageTool > button,
 .is-ui .is-tool.is-video-tool > div,
 .is-ui .is-tool.is-video-tool > button,
 .is-ui .is-tool.is-audio-tool > div,
 .is-ui .is-tool.is-audio-tool > button,
+.is-ui .is-tool.is-plugin-tool > div,
+.is-ui .is-tool.is-plugin-tool > button,
 .is-ui .is-tool.is-iframe-tool > div,
 .is-ui .is-tool.is-iframe-tool > button {
   width: 35px;
   height: 35px;
   background: transparent;
 }
-#_cbhtml .is-tool#divImageTool svg, #_cbhtml .is-tool.is-video-tool svg, #_cbhtml .is-tool.is-audio-tool svg, #_cbhtml .is-tool.is-iframe-tool svg,
+#_cbhtml .is-tool#divImageTool svg, #_cbhtml .is-tool.is-video-tool svg, #_cbhtml .is-tool.is-audio-tool svg, #_cbhtml .is-tool.is-plugin-tool svg, #_cbhtml .is-tool.is-iframe-tool svg,
 .is-ui .is-tool#divImageTool svg,
 .is-ui .is-tool.is-video-tool svg,
 .is-ui .is-tool.is-audio-tool svg,
+.is-ui .is-tool.is-plugin-tool svg,
 .is-ui .is-tool.is-iframe-tool svg {
   width: 17px;
   height: 17px;
   fill: #111 !important;
   color: #111 !important;
 }
-#_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-iframe-tool > button,
+#_cbhtml .is-tool.is-video-tool > button, #_cbhtml .is-tool.is-audio-tool > button, #_cbhtml .is-tool.is-plugin-tool > button, #_cbhtml .is-tool.is-iframe-tool > button,
 .is-ui .is-tool.is-video-tool > button,
 .is-ui .is-tool.is-audio-tool > button,
+.is-ui .is-tool.is-plugin-tool > button,
 .is-ui .is-tool.is-iframe-tool > button {
   width: 35px !important;
   height: 35px !important;
@@ -8469,3 +8515,100 @@ iframe.wait-autoplay {
 .is-ui .hover\:border-current:hover {
   border-color: currentColor !important;
 }
+
+/* New Plugin Features */
+#_cbhtml .is-accordion {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+#_cbhtml .is-accordion > div {
+  border: 1px solid #dddddd;
+  border-radius: 8px;
+}
+#_cbhtml .is-accordion > div > div:first-child {
+  /* header */
+  background: #f9f9f9;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px 12px;
+  font-weight: 500;
+  cursor: pointer;
+}
+#_cbhtml .is-outline {
+  border: 1px solid #ddd;
+}
+#_cbhtml .is-tips {
+  margin-top: 16px;
+  padding: 12px;
+  background: #eff6ff;
+  font-size: 12px;
+  color: #1e40af;
+  border-left: 3px solid #3b82f6;
+  border-radius: 4px;
+}
+#_cbhtml .is-modal.pluginsettings select {
+  width: 100%;
+  height: 43px;
+}
+#_cbhtml .is-modal.pluginsettings input[type=text], #_cbhtml .is-modal.pluginsettings input[type=number] {
+  font-size: 13px;
+}
+#_cbhtml .is-modal.pluginsettings textarea {
+  width: 100%;
+  line-height: 1.4;
+  font-family: inherit;
+  font-size: 14px;
+  padding: 10px 13px;
+}
+#_cbhtml .is-modal.pluginsettings button {
+  background-color: #efefef;
+  width: 100%;
+  height: 43px;
+  margin: 0px;
+}
+#_cbhtml .is-modal.pluginsettings button svg {
+  width: 17px;
+  height: 17px;
+}
+#_cbhtml .is-modal.pluginsettings button:not(.is-btn-color):hover {
+  background-color: #ededed;
+}
+#_cbhtml .is-modal.pluginsettings label {
+  font-size: 13px;
+  display: block;
+  font-weight: 500;
+}
+#_cbhtml .is-modal.pluginsettings label.checkbox {
+  cursor: pointer;
+  display: flex;
+  gap: 3px;
+  align-items: center;
+}
+#_cbhtml .is-modal.pluginsettings div[contenteditable=true]:focus-visible {
+  outline: #3e93f7 2px solid;
+}
+
+.dark #_cbhtml .is-accordion > div {
+  border: 1px solid #6e6e6e;
+}
+.dark #_cbhtml .is-accordion > div > div:first-child {
+  /* header */
+  background: transparent;
+}
+.dark #_cbhtml .is-outline {
+  border: 1px solid #767676;
+}
+.dark #_cbhtml .is-tips {
+  background: #424242;
+  color: inherit;
+}
+.dark #_cbhtml .is-modal.pluginsettings .is-modal-controls {
+  scrollbar-width: thin;
+  scrollbar-color: #696969 #a1a1a1;
+}
+.dark #_cbhtml .is-modal.pluginsettings button:not(.is-btn-color):hover {
+  background-color: rgba(0, 0, 0, 0.07);
+}