mechanica 1.0.0 → 1.0.2

package/dist/editor.js

@@ -1,5 +1,5 @@
 import { watch, defineComponent, computed, inject, openBlock, createElementBlock, Fragment, renderList, createElementVNode, toDisplayString, getCurrentScope, onScopeDispose, toRef as toRef$1, readonly, customRef, ref, toValue, nextTick, getCurrentInstance, onMounted, createBlock, Teleport, createVNode, Transition, withCtx, unref, mergeProps, withModifiers, renderSlot, createCommentVNode, resolveDynamicComponent, normalizeClass, shallowRef, isRef, createTextVNode, reactive, shallowReactive, normalizeStyle, normalizeProps, guardReactiveProps, TransitionGroup, useSlots, createSlots, withDirectives, vModelText, vModelDynamic, createStaticVNode, mergeModels, useModel, resolveComponent, provide, createApp } from "vue";
-import { blocksList as blocksList$1 } from "virtual:builder-blocks";
+import { blocksList as blocksList$1, addUpdateListener } from "virtual:builder-blocks";
 import { registerAlias, unfoldSchema } from "compact-json-schema";
 const findParent = (el, callback) => {
   if (callback(el)) return el;
@@ -2321,7 +2321,7 @@ const ChevronRightIcon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _s
 const useControlComponent = (_activeBlockId) => {
   let lastRoot = document.body;
   const hoverBlockId = shallowRef(null);
-  const activeBlockId = shallowRef(_activeBlockId ?? null);
+  const activeBlockId = shallowRef(null);
   const hoverBlockElement = shallowRef(null);
   const activeBlockElement = shallowRef(null);
   let lastStateKey = "";
@@ -2387,26 +2387,41 @@ const useControlComponent = (_activeBlockId) => {
     if (activeBlockId2 === ((_a = activeBlockElement.value) == null ? void 0 : _a.getAttribute("data-block-id"))) {
       return;
     }
-    activeBlockElement.value = lastRoot.querySelector(`[data-block-id="${activeBlockId2}"]`) ?? null;
+    updateActiveElement();
   }, { immediate: true });
+  const updateActiveElement = () => {
+    const blockId = activeBlockId.value;
+    if (!blockId) return;
+    activeBlockElement.value = lastRoot.querySelector(`[data-block-id="${blockId}"]`) ?? null;
+  };
   return {
     update,
     hoverBlockElement,
     activeBlockElement,
     activeBlockId,
-    hoverBlockId
+    hoverBlockId,
+    updateActiveElement
   };
 };
 registerAlias("image", { type: "object", format: "image", properties: { src: "string", previewSrc: "string?" } });
 registerAlias("file", { type: "object", format: "file", properties: { src: "string" } });
-const blocksList = blocksList$1.map((file) => ({
+const blocksList = shallowRef(blocksList$1.map((file) => ({
   ...file.blockSchema,
   id: file.blockSchema.id ?? file.__name,
   order: file.blockSchema.order,
   name: file.blockSchema.name ?? getBlockName(file.__name) ?? "Unnamed block",
   props: file.blockSchema.props ? unfoldSchema(file.blockSchema.props) : {}
-}));
-const blocksMap = new Map(blocksList.map((item) => [item.id, item]));
+})));
+const blocksMap = computed(() => new Map(blocksList.value.map((item) => [item.id, item])));
+addUpdateListener((module) => {
+  blocksList.value = module.blocksList.map((file) => ({
+    ...file.blockSchema,
+    id: file.blockSchema.id ?? file.__name,
+    order: file.blockSchema.order,
+    name: file.blockSchema.name ?? getBlockName(file.__name) ?? "Unnamed block",
+    props: file.blockSchema.props ? unfoldSchema(file.blockSchema.props) : {}
+  }));
+});
 const processState = (state) => {
   walkTree(state.content, (block) => {
     if (block.id) {
@@ -2416,7 +2431,7 @@ const processState = (state) => {
       block.data = {};
     }
     block.data["data-block-id"] = block.id;
-    const schema = blocksMap.get(block.blockId);
+    const schema = blocksMap.value.get(block.blockId);
     if (!schema) return;
     walkSchema(block.data, schema.props, (value, schema2, key, parent, isRequired) => {
       if (key && isRequired && !schema2.nullable && (value === null || value === void 0)) {
@@ -2431,7 +2446,7 @@ const saveState = (newState) => {
   walkTree(state.content, (block) => {
     if (!block.data) return;
     delete block.data["data-block-id"];
-    const schema = blocksMap.get(block.blockId);
+    const schema = blocksMap.value.get(block.blockId);
     if (!schema) return;
     walkSchema(block.data, schema.props, (value, schema2, key, parent) => {
       if (schema2.type === "object" && schema2.format === "image" && value.src === defaultImageSrc && key && parent) {
@@ -2479,7 +2494,6 @@ const _hoisted_1 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "EditorApp",
   setup(__props) {
-    var _a, _b;
     const controlsOpened = ref(true);
     const dragMode = ref(false);
     provide("dragMode", dragMode);
@@ -2490,10 +2504,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
       contentBlocks.value.push(createContentBlock(e.block));
     });
-    const control = useControlComponent((_a = import.meta.hot) == null ? void 0 : _a.data.activeBlockId);
+    const control = useControlComponent();
     watch(contentBlocks, () => {
       control.update(window.document.body);
     }, { deep: true, flush: "post" });
+    watch(blocksList, () => {
+      control.update(window.document.body);
+      control.updateActiveElement();
+    }, { flush: "post" });
     onMounted(() => {
       control.update(window.document.body);
     });
@@ -2503,18 +2521,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const currentBlock = computed(() => {
       if (!currentContentBlock.value) return null;
-      return blocksMap.get(currentContentBlock.value.blockId);
+      return blocksMap.value.get(currentContentBlock.value.blockId);
     });
-    const currentTab = ref(((_b = import.meta.hot) == null ? void 0 : _b.data.currentTab) ?? "blocks");
+    const currentTab = ref("blocks");
     const tabs = computed(() => {
-      var _a2;
+      var _a;
       const arr = [
         { id: "blocks", title: "Блоки" }
       ];
       if (currentContentBlock.value) {
         arr.push({
           id: "blockEdit",
-          title: ((_a2 = currentBlock.value) == null ? void 0 : _a2.name) ?? "Unknown Block"
+          title: ((_a = currentBlock.value) == null ? void 0 : _a.name) ?? "Unknown Block"
         });
       }
       return arr;
@@ -2528,24 +2546,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         }
       }
     });
-    watch(currentTab, (currentTab2) => {
-      Object.assign(import.meta.hot.data, { currentTab: currentTab2 });
-    });
-    watch(control.activeBlockId, (activeBlockId) => {
-      Object.assign(import.meta.hot.data, { activeBlockId });
-    });
     useKeyDownLayer("Escape", () => !!control.activeBlockId.value, () => control.activeBlockId.value = null);
     watchDebounced(window.state, (newState, oldState) => {
-      var _a2, _b2;
-      if (((_a2 = newState == null ? void 0 : newState.dev) == null ? void 0 : _a2.currentPage) !== ((_b2 = oldState == null ? void 0 : oldState.dev) == null ? void 0 : _b2.currentPage)) {
+      var _a, _b;
+      if (((_a = newState == null ? void 0 : newState.dev) == null ? void 0 : _a.currentPage) !== ((_b = oldState == null ? void 0 : oldState.dev) == null ? void 0 : _b.currentPage)) {
         return;
       }
-      const state = saveState(newState);
-      fetch("/@mechanica/save", {
-        method: "POST",
-        body: JSON.stringify(state),
-        headers: { "content-type": "application-json" }
-      });
+      saveState(newState);
     }, { debounce: 500 });
     provide("fileUploader", async (file) => {
       const resp = await fetch("/@mechanica/upload", {