@blokkli/editor 2.0.0-alpha.56 → 2.0.0-alpha.58

package/dist/runtime/editor/components/DiffViewer/State.vue

@@ -249,22 +249,6 @@ function scrollToBlock(uuid) {
 </script>
 
 <style>
-/* Diff display in the artboard (page content), outside the .bk editor scope. */
-[data-bk-diff-active] del {
-    color: rgb(var(--bk-theme-red-normal) / 0.5);
-    text-decoration-line: line-through;
-    text-decoration-color: rgb(var(--bk-theme-red-normal) / 1);
-}
-[data-bk-diff-active] ins {
-    border-radius: 4px;
-    border-width: 1px;
-    border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
-    --bk-tw-bg-opacity: 1;
-    background-color: rgb(var(--bk-theme-lime-light) / var(--bk-tw-bg-opacity, 1));
-    --bk-tw-text-opacity: 1;
-    color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
-    text-decoration-line: none;
-}
 .bk.bk-diff-sidebar-pane {
     position: absolute;
     top: 0px;
@@ -274,30 +258,30 @@ function scrollToBlock(uuid) {
     overflow: auto;
     overscroll-behavior: contain;
 }
-.bk.bk-diff-view {
+  .bk.bk-diff-view {
     user-select: text;
     container-type: inline-size;
 }
-.bk.bk-diff-view .bk-blokkli-item-label {
+  .bk.bk-diff-view .bk-blokkli-item-label {
     flex: 1 1 0%;
     font-weight: 600;
 }
-.bk.bk-diff-view .bk-blokkli-item-label span {
+  .bk.bk-diff-view .bk-blokkli-item-label span {
     line-height: 1;
 }
-.bk.bk-diff-view .bk-blokkli-item-label[disabled] {
+  .bk.bk-diff-view .bk-blokkli-item-label[disabled] {
     pointer-events: none;
 }
-.bk .bk-diff-mode-selector {
+  .bk .bk-diff-mode-selector {
     border-bottom-width: 1px;
     --bk-tw-border-opacity: 1;
     border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
     padding: 20px;
 }
-.bk .bk-diff-table {
+  .bk .bk-diff-table {
     width: 100%;
 }
-.bk .bk-diff-item {
+  .bk .bk-diff-item {
     width: 100%;
     border-top-width: 1px;
     --bk-tw-border-opacity: 1;
@@ -305,50 +289,50 @@ function scrollToBlock(uuid) {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-mono-900) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-item:hover {
+  .bk .bk-diff-item:hover {
     --bk-tw-bg-opacity: 1;
     background-color: rgb(var(--bk-theme-mono-100) / var(--bk-tw-bg-opacity, 1));
 }
-.bk .bk-diff-item.bk-is-muted .bk-diff-item-diffs,
+  .bk .bk-diff-item.bk-is-muted .bk-diff-item-diffs,
       .bk .bk-diff-item.bk-is-muted .bk-diff-status {
     opacity: 0.5;
 }
-.bk .bk-diff-item.bk-is-muted .bk-blokkli-item-label span {
+  .bk .bk-diff-item.bk-is-muted .bk-blokkli-item-label span {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-mono-400) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-item-diffs {
+  .bk .bk-diff-item-diffs {
   }
-.bk .bk-diff-item-header {
+  .bk .bk-diff-item-header {
     display: flex;
     width: 100%;
     align-items: center;
     padding: 20px;
 }
-.bk .bk-diff-item-header.bk-is-selected .bk-blokkli-item-label-icon {
+  .bk .bk-diff-item-header.bk-is-selected .bk-blokkli-item-label-icon {
     border-color: rgb(var(--bk-theme-orange-dark) / 0.3);
     --bk-tw-bg-opacity: 1;
     background-color: rgb(var(--bk-theme-orange-normal) / var(--bk-tw-bg-opacity, 1));
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-orange-dark) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-prop-row {
+  .bk .bk-diff-prop-row {
     padding-left: 20px;
     padding-right: 20px;
     margin-bottom: 20px;
 }
-.bk .bk-diff-prop-row h3 {
+  .bk .bk-diff-prop-row h3 {
     margin-bottom: 5px;
     font-size: 14px;
     line-height: 20px;
     font-weight: 600;
 }
-.bk .bk-diff-monospace {
+  .bk .bk-diff-monospace {
     font-family: monospace;
     font-size: 14px;
     line-height: 20px;
 }
-.bk .bk-diff-markup-style p,
+  .bk .bk-diff-markup-style p,
     .bk .bk-diff-markup-style ul,
     .bk .bk-diff-markup-style ol,
     .bk .bk-diff-markup-style h1,
@@ -360,7 +344,7 @@ function scrollToBlock(uuid) {
     margin-top: 20px;
     margin-bottom: 20px;
 }
-.bk .bk-diff-markup-style p:first-child,
+  .bk .bk-diff-markup-style p:first-child,
     .bk .bk-diff-markup-style ul:first-child,
     .bk .bk-diff-markup-style ol:first-child,
     .bk .bk-diff-markup-style h1:first-child,
@@ -371,7 +355,7 @@ function scrollToBlock(uuid) {
     .bk .bk-diff-markup-style h6:first-child {
     margin-top: 0px;
 }
-.bk .bk-diff-markup-style p:last-child,
+  .bk .bk-diff-markup-style p:last-child,
     .bk .bk-diff-markup-style ul:last-child,
     .bk .bk-diff-markup-style ol:last-child,
     .bk .bk-diff-markup-style h1:last-child,
@@ -382,7 +366,7 @@ function scrollToBlock(uuid) {
     .bk .bk-diff-markup-style h6:last-child {
     margin-bottom: 0px;
 }
-.bk .bk-diff-markup-style h1,
+  .bk .bk-diff-markup-style h1,
     .bk .bk-diff-markup-style h2,
     .bk .bk-diff-markup-style h3,
     .bk .bk-diff-markup-style h4,
@@ -390,65 +374,65 @@ function scrollToBlock(uuid) {
     .bk .bk-diff-markup-style h6 {
     line-height: 1.25;
 }
-.bk .bk-diff-markup-style p,
+  .bk .bk-diff-markup-style p,
     .bk .bk-diff-markup-style ul,
     .bk .bk-diff-markup-style ol {
     line-height: 1.5;
 }
-.bk .bk-diff-markup-style h2 {
+  .bk .bk-diff-markup-style h2 {
     font-size: 1.7em;
     font-weight: 700;
 }
-.bk .bk-diff-markup-style h3 {
+  .bk .bk-diff-markup-style h3 {
     font-size: 1.5em;
     font-weight: 700;
 }
-.bk .bk-diff-markup-style h4 {
+  .bk .bk-diff-markup-style h4 {
     font-size: 1.3em;
     font-weight: 700;
 }
-.bk .bk-diff-markup-style ul {
+  .bk .bk-diff-markup-style ul {
     margin-left: 18px;
     list-style-type: disc;
 }
-.bk .bk-diff-markup-style ol {
+  .bk .bk-diff-markup-style ol {
     margin-left: 30px;
     list-style-type: decimal;
 }
-.bk .bk-diff-markup-style a {
+  .bk .bk-diff-markup-style a {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-accent-700) / var(--bk-tw-text-opacity, 1));
     text-decoration-line: underline;
 }
-.bk .bk-diff-markup-style blockquote {
+  .bk .bk-diff-markup-style blockquote {
     border-left-width: 6px;
     --bk-tw-border-opacity: 1;
     border-left-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
     padding-left: 20px;
 }
-.bk .bk-diff-markup-style pre {
+  .bk .bk-diff-markup-style pre {
     width: 100%;
     max-width: 100%;
     white-space: break-spaces;
     overflow-wrap: break-word;
       word-break: break-all;
 }
-.bk .bk-diff-value {
+  .bk .bk-diff-value {
     display: inline;
     word-break: break-word;
 }
-.bk .bk-diff-value .bk-is-clipped del {
+  .bk .bk-diff-value .bk-is-clipped del {
     overflow: hidden;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
 }
-.bk .bk-diff-value del {
+  .bk .bk-diff-value del {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
     text-decoration-line: line-through;
 }
-.bk .bk-diff-value del:has(img) {
+  .bk .bk-diff-value del:has(img) {
     display: block;
     max-width: 300px;
     overflow: hidden;
@@ -458,10 +442,10 @@ function scrollToBlock(uuid) {
     --bk-tw-border-opacity: 1;
     border-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-border-opacity, 1));
 }
-.bk .bk-diff-value del:has(img) img {
+  .bk .bk-diff-value del:has(img) img {
           opacity: 0.7;
         }
-.bk .bk-diff-value ins {
+  .bk .bk-diff-value ins {
     border-radius: 4px;
     border-width: 1px;
     border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
@@ -471,7 +455,7 @@ function scrollToBlock(uuid) {
     color: rgb(var(--bk-theme-lime-dark) / var(--bk-tw-text-opacity, 1));
     text-decoration-line: none;
 }
-.bk .bk-diff-value ins:has(img) {
+  .bk .bk-diff-value ins:has(img) {
     border-width: 2px;
     --bk-tw-border-opacity: 1;
     border-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-border-opacity, 1));
@@ -479,19 +463,19 @@ function scrollToBlock(uuid) {
     max-width: 300px;
     overflow: hidden;
 }
-.bk .bk-diff-value del:has(img) + ins:has(img) {
+  .bk .bk-diff-value del:has(img) + ins:has(img) {
     margin-top: 15px;
 }
-.bk .bk-diff-prop-side-by-side {
+  .bk .bk-diff-prop-side-by-side {
     display: grid;
     gap: 10px;
 }
-@container (min-width: 700px) {
-.bk .bk-diff-prop-side-by-side {
+  @container (min-width: 700px) {
+  .bk .bk-diff-prop-side-by-side {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
     }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-before,
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-before,
     .bk .bk-diff-prop-side-by-side .bk-diff-prop-after {
     border-radius: 4px;
     border-width: 1px;
@@ -499,21 +483,21 @@ function scrollToBlock(uuid) {
     border-color: rgb(var(--bk-theme-mono-300) / var(--bk-tw-border-opacity, 1));
     padding: 10px;
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-before {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-before {
     background-color: rgb(var(--bk-theme-red-light) / 0.2);
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-before .bk-diff-prop-label {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-before .bk-diff-prop-label {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-after {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-after {
     background-color: rgb(var(--bk-theme-lime-light) / 0.2);
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-after .bk-diff-prop-label {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-after .bk-diff-prop-label {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-label {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-label {
     margin-bottom: 5px;
     font-size: 12px;
     line-height: 16px;
@@ -523,10 +507,10 @@ function scrollToBlock(uuid) {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-prop-side-by-side .bk-diff-prop-content {
+  .bk .bk-diff-prop-side-by-side .bk-diff-prop-content {
       word-break: break-word;
     }
-.bk .bk-diff-prop-after-only .bk-diff-prop-content {
+  .bk .bk-diff-prop-after-only .bk-diff-prop-content {
     border-radius: 4px;
     border-width: 1px;
     border-color: rgb(var(--bk-theme-lime-normal) / 0.3);
@@ -534,7 +518,7 @@ function scrollToBlock(uuid) {
     padding: 10px;
       word-break: break-word;
 }
-.bk .bk-diff-status-label {
+  .bk .bk-diff-status-label {
     display: inline-block;
     --bk-tw-translate-y: -3px;
     transform: translate(var(--bk-tw-translate-x), var(--bk-tw-translate-y)) rotate(var(--bk-tw-rotate)) skewX(var(--bk-tw-skew-x)) skewY(var(--bk-tw-skew-y)) scaleX(var(--bk-tw-scale-x)) scaleY(var(--bk-tw-scale-y));
@@ -553,13 +537,13 @@ function scrollToBlock(uuid) {
     --bk-tw-text-opacity: 1;
     color: rgb(var(--bk-theme-mono-500) / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-status-label.bk-is-added {
+  .bk .bk-diff-status-label.bk-is-added {
     --bk-tw-bg-opacity: 1;
     background-color: rgb(var(--bk-theme-lime-normal) / var(--bk-tw-bg-opacity, 1));
     --bk-tw-text-opacity: 1;
     color: rgb(255 255 255 / var(--bk-tw-text-opacity, 1));
 }
-.bk .bk-diff-status-label.bk-is-removed {
+  .bk .bk-diff-status-label.bk-is-removed {
     --bk-tw-bg-opacity: 1;
     background-color: rgb(var(--bk-theme-red-normal) / var(--bk-tw-bg-opacity, 1));
     --bk-tw-text-opacity: 1;

package/dist/runtime/editor/components/EditProvider.vue

@@ -453,7 +453,7 @@ onUnmounted(() => {
 <style>
 .bk.bk-viewport {
   position: relative;
-  grid-area: viewport;
+  grid-area: viewport
 }
 
 .bk-vars.bk-main-layout {
@@ -466,15 +466,35 @@ onUnmounted(() => {
   height: 100vh;
   width: 100vw;
 
+  --bk-toolbar-height: 40px;
+
   grid-template-areas:
-    'toolbar toolbar      toolbar       toolbar     toolbar       right'
-    'left    mode         mode          mode        sidebar-right right'
-    'left    sidebar-left viewport      scrollbar-y sidebar-right right'
-    'left    sidebar-left banner        scrollbar-y sidebar-right right'
-    'left breadcrumbs breadcrumbs   breadcrumbs sidebar-right right';
-  grid-template-columns: auto auto 1fr 16px auto 50px;
-  grid-template-rows: 50px auto 1fr auto auto;
+    'toolbar toolbar      toolbar       toolbar     '
+    'left    right        right         right       '
+    'left    mode         mode          mode        '
+    'left    sidebar-left viewport      scrollbar-y '
+    'left    sidebar-left banner        scrollbar-y '
+    'left    breadcrumbs  breadcrumbs   breadcrumbs ';
+  grid-template-columns: auto auto 1fr 16px;
+  grid-template-rows: var(--bk-toolbar-height) auto auto 1fr auto auto
+}
+
+@media (min-width: 768px) {
+
+.bk-vars.bk-main-layout {
+    --bk-toolbar-height: 50px;
+
+    grid-template-areas:
+      'toolbar toolbar      toolbar       toolbar     toolbar       right'
+      'left    mode         mode          mode        sidebar-right right'
+      'left    sidebar-left viewport      scrollbar-y sidebar-right right'
+      'left    sidebar-left banner        scrollbar-y sidebar-right right'
+      'left    breadcrumbs  breadcrumbs   breadcrumbs sidebar-right right';
+
+    grid-template-columns: auto auto 1fr 16px auto minmax(0, 50px);
+    grid-template-rows: var(--bk-toolbar-height) auto 1fr auto auto
 }
+  }
 
 .bk.bk-canvas-overlay {
   position: fixed;
@@ -482,11 +502,11 @@ onUnmounted(() => {
   left: 0px;
   z-index: calc(var(--bk-z-index-base) + 10000) /* "canvas-overlay" */;
   width: 100%;
-  height: 100%;
+  height: 100%
 }
 
 html.bk-isolate-provider [data-provider-uuid]:not([data-blokkli-provider-active='true']) {
-  display: none !important;
+  display: none !important
 }
 
 html.bk-html-root:not(.bk-use-animations) *,

package/dist/runtime/editor/components/PreviewProvider.vue

@@ -23,7 +23,10 @@ import {
 import broadcastProvider from "#blokkli/editor/providers/broadcast";
 import { getFieldKey } from "#blokkli/helpers";
 import { intersects } from "#blokkli/editor/helpers/geometry";
-import { eventBus, frameEventBus } from "#blokkli/editor/events";
+import {
+  eventBus,
+  frameEventBus
+} from "#blokkli/editor/events";
 import definitionProvider from "#blokkli/editor/providers/definition";
 import { addElementClasses } from "#blokkli/editor/composables";
 const props = defineProps({
@@ -59,11 +62,11 @@ const mutatedEntity = computed(
 const { data, refresh, error } = await useAsyncData(
   () => adapter.loadState().then((v) => adapter.mapState(v))
 );
-function updateMutatedFields(fields) {
+function onUpdatePreviewState(e) {
   const existingKeys = Object.keys(mutatedFieldsMap);
   const newKeys = /* @__PURE__ */ new Set();
-  for (let i = 0; i < fields.length; i++) {
-    const field = fields[i];
+  for (let i = 0; i < e.fields.length; i++) {
+    const field = e.fields[i];
     const key = getFieldKey(field.entityUuid, field.name);
     mutatedFieldsMap[key] = field;
     newKeys.add(key);
@@ -74,11 +77,14 @@ function updateMutatedFields(fields) {
       mutatedFieldsMap[key] = void 0;
     }
   }
+  mutatedEntityFromState.value = e.mutatedEntity;
 }
 const updateState = () => {
   const fields = data.value?.mutatedState?.fields || [];
-  updateMutatedFields(fields);
-  mutatedEntityFromState.value = data.value?.mutatedEntity;
+  onUpdatePreviewState({
+    fields,
+    mutatedEntity: data.value?.mutatedEntity || {}
+  });
   const options = mutatedOptions.value || data.value?.mutatedState?.mutatedOptions || {};
   const optionKeys = Object.keys(options);
   for (let i = 0; i < optionKeys.length; i++) {
@@ -167,7 +173,7 @@ addElementClasses(document.body, "bk-body-preview");
 addElementClasses(document.documentElement, "bk-html-preview");
 onMounted(() => {
   if (isInIframe()) {
-    frameEventBus.on("mutatedFields", updateMutatedFields);
+    frameEventBus.on("updatePreviewState", onUpdatePreviewState);
     frameEventBus.on("focus", onFocusItem);
     frameEventBus.on("updateOption", onUpdateOption);
     window.addEventListener("message", onMessage);
@@ -185,7 +191,7 @@ onBeforeUnmount(() => {
   window.removeEventListener("wheel", onWheel);
   window.removeEventListener("message", onMessage);
   document.documentElement.removeEventListener("mousedown", onMouseDown);
-  frameEventBus.off("mutatedFields", updateMutatedFields);
+  frameEventBus.off("updatePreviewState", onUpdatePreviewState);
   frameEventBus.off("focus", onFocusItem);
   frameEventBus.off("updateOption", onUpdateOption);
 });