@blokkli/editor 2.0.0-alpha.52 → 2.0.0-alpha.53

package/dist/runtime/editor/components/index.d.ts

@@ -1,49 +1,59 @@
-import AddListItem from './AddListItem/index.vue.js';
-import ArtboardTooltip from './ArtboardTooltip/index.vue.js';
-import AutoHeight from './AutoHeight/index.vue.js';
-import Banner from './Banner/index.vue.js';
-import BlockPreviewItem from './BlockPreviewItem/index.vue.js';
-import BlockPreviewRenderer from './BlockPreviewRenderer/index.vue.js';
-import BlokkliTransition from './Transition/index.vue.js';
-import BundleSelector from './BundleSelector/index.vue.js';
-import ConfigForm from './PluginConfigForm/index.vue.js';
-import DialogModal from './Dialog/index.vue.js';
-import DiffApproval from './DiffApproval/index.vue.js';
-import DiffDisplay from './DiffViewer/DiffDisplay/index.vue.js';
-import DiffValue from './DiffViewer/DiffValue.vue.js';
-import DiffViewerState from './DiffViewer/State.vue.js';
-import Dropdown from './Dropdown/index.vue.js';
-import DropdownItem from './DropdownItem/index.vue.js';
-import ErrorBoundary from './BlokkliErrorBoundary.vue.js';
-import FlexTextarea from './FlexTextarea/index.vue.js';
-import FormCheckboxes from './Form/Checkboxes/index.vue.js';
-import FormDatepicker from './Form/Datepicker/index.vue.js';
-import FormGroup from './Form/Group/index.vue.js';
-import FormItem from './Form/Item/index.vue.js';
-import FormOverlay from './FormOverlay/index.vue.js';
-import FormRadio from './Form/Radio/index.vue.js';
-import FormRadioTabs from './Form/RadioTabs/index.vue.js';
-import FormSelect from './Form/Select/index.vue.js';
-import FormText from './Form/Text/index.vue.js';
-import FormTextarea from './Form/Textarea/index.vue.js';
-import FormToggle from './Form/Toggle/index.vue.js';
-import Highlight from './Highlight/index.vue.js';
-import Icon from './Icon/index.vue.js';
-import InfoBox from './InfoBox/index.vue.js';
-import ItemIcon from './ItemIcon/index.vue.js';
-import ItemIconBox from './ItemIconBox/index.vue.js';
-import Loading from './Loading/index.vue.js';
-import NestedEditorOverlay from './NestedEditorOverlay/index.vue.js';
-import Pagination from './Pagination/index.vue.js';
-import Popup from './Popup/index.vue.js';
-import RelativeTime from './RelativeTime/index.vue.js';
-import Resizable from './Resizable/index.vue.js';
-import ScaleToFit from './ScaleToFit/index.vue.js';
-import ScheduleDate from './ScheduleDate/index.vue.js';
-import ScrollBoundary from './ScrollBoundary/index.vue.js';
-import ShortcutIndicator from './ShortcutIndicator/index.vue.js';
-import Sortli from './Sortli/index.vue.js';
-import StatusIcon from './StatusIcon/index.vue.js';
-import TransitionHeight from './Transition/Height.vue.js';
-import ViewportBlockingRect from './ViewportBlockingRect/index.vue.js';
-export { AddListItem, ArtboardTooltip, AutoHeight, Banner, BlockPreviewItem, BlockPreviewRenderer, BlokkliTransition, BundleSelector, ConfigForm, DialogModal, DiffApproval, DiffDisplay, DiffValue, DiffViewerState, Dropdown, DropdownItem, ErrorBoundary, FlexTextarea, FormCheckboxes, FormDatepicker, FormGroup, FormItem, FormOverlay, FormRadio, FormRadioTabs, FormSelect, FormText, FormTextarea, FormToggle, Highlight, Icon, InfoBox, ItemIcon, ItemIconBox, Loading, NestedEditorOverlay, Pagination, Popup, RelativeTime, Resizable, ScaleToFit, ScheduleDate, ScrollBoundary, ShortcutIndicator, Sortli, StatusIcon, TransitionHeight, ViewportBlockingRect, };
+export { default as AddListItem } from './AddListItem/index.vue.js';
+export { default as ArtboardTooltip } from './ArtboardTooltip/index.vue.js';
+export { default as AutoHeight } from './AutoHeight/index.vue.js';
+export { default as Banner } from './Banner/index.vue.js';
+export { default as BannerInner } from './Banner/Inner.vue.js';
+export { default as BetaIndicator } from './BetaIndicator/index.vue.js';
+export { default as BlockPreviewItem } from './BlockPreviewItem/index.vue.js';
+export { default as BlockPreviewRenderer } from './BlockPreviewRenderer/index.vue.js';
+export { default as BlokkliTransition } from './Transition/index.vue.js';
+export { default as BundleSelector } from './BundleSelector/index.vue.js';
+export { default as ConfigForm } from './PluginConfigForm/index.vue.js';
+export { default as ConfigFormInline } from './PluginConfigFormInline/index.vue.js';
+export { default as DialogModal } from './Dialog/index.vue.js';
+export { default as DiffApproval } from './DiffApproval/index.vue.js';
+export { default as DiffDisplay } from './DiffViewer/DiffDisplay/index.vue.js';
+export { default as DiffValue } from './DiffViewer/DiffValue.vue.js';
+export { default as DiffViewerState } from './DiffViewer/State.vue.js';
+export { default as Dropdown } from './Dropdown/index.vue.js';
+export { default as DropdownItem } from './DropdownItem/index.vue.js';
+export { default as ErrorBoundary } from './BlokkliErrorBoundary.vue.js';
+export { default as FileDropHandler } from './FileDropHandler/index.vue.js';
+export { default as FlexTextarea } from './FlexTextarea/index.vue.js';
+export { default as FormCheckboxes } from './Form/Checkboxes/index.vue.js';
+export { default as FormDatepicker } from './Form/Datepicker/index.vue.js';
+export { default as FormGroup } from './Form/Group/index.vue.js';
+export { default as FormItem } from './Form/Item/index.vue.js';
+export { default as FormOverlay } from './FormOverlay/index.vue.js';
+export { default as FormRadio } from './Form/Radio/index.vue.js';
+export { default as FormRadioTabs } from './Form/RadioTabs/index.vue.js';
+export { default as FormSelect } from './Form/Select/index.vue.js';
+export { default as FormText } from './Form/Text/index.vue.js';
+export { default as FormTextarea } from './Form/Textarea/index.vue.js';
+export { default as FormToggle } from './Form/Toggle/index.vue.js';
+export { default as Highlight } from './Highlight/index.vue.js';
+export { default as Icon } from './Icon/index.vue.js';
+export { default as InfoBox } from './InfoBox/index.vue.js';
+export { default as ItemIcon } from './ItemIcon/index.vue.js';
+export { default as ItemIconBox } from './ItemIconBox/index.vue.js';
+export { default as Loading } from './Loading/index.vue.js';
+export { default as NestedEditorOverlay } from './NestedEditorOverlay/index.vue.js';
+export { default as Pagination } from './Pagination/index.vue.js';
+export { default as Popup } from './Popup/index.vue.js';
+export { default as RelativeTime } from './RelativeTime/index.vue.js';
+export { default as Resizable } from './Resizable/index.vue.js';
+export { default as ScaleToFit } from './ScaleToFit/index.vue.js';
+export { default as ScheduleDate } from './ScheduleDate/index.vue.js';
+export { default as ScrollBoundary } from './ScrollBoundary/index.vue.js';
+export { default as SearchOverlay } from './SearchOverlay/index.vue.js';
+export { default as ShortcutIndicator } from './ShortcutIndicator/index.vue.js';
+export { default as Sortli } from './Sortli/index.vue.js';
+export { default as StatusIcon } from './StatusIcon/index.vue.js';
+export { default as StatusIndicator } from './StatusIndicator/index.vue.js';
+export { default as Tabs } from './Tabs/index.vue.js';
+export { default as TransitionHeight } from './Transition/Height.vue.js';
+export { default as ViewportBlockingRect } from './ViewportBlockingRect/index.vue.js';
+export { default as Tooltip } from './Tooltip/index.vue.js';
+export { default as TooltipContext } from './Tooltip/Context.vue.js';
+export { default as TooltipStatus } from './Tooltip/Status.vue.js';
+export { default as NotEditStateInfo } from './NotEditStateInfo/index.vue.js';

package/dist/runtime/editor/components/index.js

@@ -1,98 +1,59 @@
-import AddListItem from "./AddListItem/index.vue";
-import ArtboardTooltip from "./ArtboardTooltip/index.vue";
-import AutoHeight from "./AutoHeight/index.vue";
-import Banner from "./Banner/index.vue";
-import BlockPreviewItem from "./BlockPreviewItem/index.vue";
-import BlockPreviewRenderer from "./BlockPreviewRenderer/index.vue";
-import BlokkliTransition from "./Transition/index.vue";
-import BundleSelector from "./BundleSelector/index.vue";
-import ConfigForm from "./PluginConfigForm/index.vue";
-import DialogModal from "./Dialog/index.vue";
-import DiffApproval from "./DiffApproval/index.vue";
-import DiffDisplay from "./DiffViewer/DiffDisplay/index.vue";
-import DiffValue from "./DiffViewer/DiffValue.vue";
-import DiffViewerState from "./DiffViewer/State.vue";
-import Dropdown from "./Dropdown/index.vue";
-import DropdownItem from "./DropdownItem/index.vue";
-import ErrorBoundary from "./BlokkliErrorBoundary.vue";
-import FlexTextarea from "./FlexTextarea/index.vue";
-import FormCheckboxes from "./Form/Checkboxes/index.vue";
-import FormDatepicker from "./Form/Datepicker/index.vue";
-import FormGroup from "./Form/Group/index.vue";
-import FormItem from "./Form/Item/index.vue";
-import FormOverlay from "./FormOverlay/index.vue";
-import FormRadio from "./Form/Radio/index.vue";
-import FormRadioTabs from "./Form/RadioTabs/index.vue";
-import FormSelect from "./Form/Select/index.vue";
-import FormText from "./Form/Text/index.vue";
-import FormTextarea from "./Form/Textarea/index.vue";
-import FormToggle from "./Form/Toggle/index.vue";
-import Highlight from "./Highlight/index.vue";
-import Icon from "./Icon/index.vue";
-import InfoBox from "./InfoBox/index.vue";
-import ItemIcon from "./ItemIcon/index.vue";
-import ItemIconBox from "./ItemIconBox/index.vue";
-import Loading from "./Loading/index.vue";
-import NestedEditorOverlay from "./NestedEditorOverlay/index.vue";
-import Pagination from "./Pagination/index.vue";
-import Popup from "./Popup/index.vue";
-import RelativeTime from "./RelativeTime/index.vue";
-import Resizable from "./Resizable/index.vue";
-import ScaleToFit from "./ScaleToFit/index.vue";
-import ScheduleDate from "./ScheduleDate/index.vue";
-import ScrollBoundary from "./ScrollBoundary/index.vue";
-import ShortcutIndicator from "./ShortcutIndicator/index.vue";
-import Sortli from "./Sortli/index.vue";
-import StatusIcon from "./StatusIcon/index.vue";
-import TransitionHeight from "./Transition/Height.vue";
-import ViewportBlockingRect from "./ViewportBlockingRect/index.vue";
-export {
-  AddListItem,
-  ArtboardTooltip,
-  AutoHeight,
-  Banner,
-  BlockPreviewItem,
-  BlockPreviewRenderer,
-  BlokkliTransition,
-  BundleSelector,
-  ConfigForm,
-  DialogModal,
-  DiffApproval,
-  DiffDisplay,
-  DiffValue,
-  DiffViewerState,
-  Dropdown,
-  DropdownItem,
-  ErrorBoundary,
-  FlexTextarea,
-  FormCheckboxes,
-  FormDatepicker,
-  FormGroup,
-  FormItem,
-  FormOverlay,
-  FormRadio,
-  FormRadioTabs,
-  FormSelect,
-  FormText,
-  FormTextarea,
-  FormToggle,
-  Highlight,
-  Icon,
-  InfoBox,
-  ItemIcon,
-  ItemIconBox,
-  Loading,
-  NestedEditorOverlay,
-  Pagination,
-  Popup,
-  RelativeTime,
-  Resizable,
-  ScaleToFit,
-  ScheduleDate,
-  ScrollBoundary,
-  ShortcutIndicator,
-  Sortli,
-  StatusIcon,
-  TransitionHeight,
-  ViewportBlockingRect
-};
+export { default as AddListItem } from "./AddListItem/index.vue";
+export { default as ArtboardTooltip } from "./ArtboardTooltip/index.vue";
+export { default as AutoHeight } from "./AutoHeight/index.vue";
+export { default as Banner } from "./Banner/index.vue";
+export { default as BannerInner } from "./Banner/Inner.vue";
+export { default as BetaIndicator } from "./BetaIndicator/index.vue";
+export { default as BlockPreviewItem } from "./BlockPreviewItem/index.vue";
+export { default as BlockPreviewRenderer } from "./BlockPreviewRenderer/index.vue";
+export { default as BlokkliTransition } from "./Transition/index.vue";
+export { default as BundleSelector } from "./BundleSelector/index.vue";
+export { default as ConfigForm } from "./PluginConfigForm/index.vue";
+export { default as ConfigFormInline } from "./PluginConfigFormInline/index.vue";
+export { default as DialogModal } from "./Dialog/index.vue";
+export { default as DiffApproval } from "./DiffApproval/index.vue";
+export { default as DiffDisplay } from "./DiffViewer/DiffDisplay/index.vue";
+export { default as DiffValue } from "./DiffViewer/DiffValue.vue";
+export { default as DiffViewerState } from "./DiffViewer/State.vue";
+export { default as Dropdown } from "./Dropdown/index.vue";
+export { default as DropdownItem } from "./DropdownItem/index.vue";
+export { default as ErrorBoundary } from "./BlokkliErrorBoundary.vue";
+export { default as FileDropHandler } from "./FileDropHandler/index.vue";
+export { default as FlexTextarea } from "./FlexTextarea/index.vue";
+export { default as FormCheckboxes } from "./Form/Checkboxes/index.vue";
+export { default as FormDatepicker } from "./Form/Datepicker/index.vue";
+export { default as FormGroup } from "./Form/Group/index.vue";
+export { default as FormItem } from "./Form/Item/index.vue";
+export { default as FormOverlay } from "./FormOverlay/index.vue";
+export { default as FormRadio } from "./Form/Radio/index.vue";
+export { default as FormRadioTabs } from "./Form/RadioTabs/index.vue";
+export { default as FormSelect } from "./Form/Select/index.vue";
+export { default as FormText } from "./Form/Text/index.vue";
+export { default as FormTextarea } from "./Form/Textarea/index.vue";
+export { default as FormToggle } from "./Form/Toggle/index.vue";
+export { default as Highlight } from "./Highlight/index.vue";
+export { default as Icon } from "./Icon/index.vue";
+export { default as InfoBox } from "./InfoBox/index.vue";
+export { default as ItemIcon } from "./ItemIcon/index.vue";
+export { default as ItemIconBox } from "./ItemIconBox/index.vue";
+export { default as Loading } from "./Loading/index.vue";
+export { default as NestedEditorOverlay } from "./NestedEditorOverlay/index.vue";
+export { default as Pagination } from "./Pagination/index.vue";
+export { default as Popup } from "./Popup/index.vue";
+export { default as RelativeTime } from "./RelativeTime/index.vue";
+export { default as Resizable } from "./Resizable/index.vue";
+export { default as ScaleToFit } from "./ScaleToFit/index.vue";
+export { default as ScheduleDate } from "./ScheduleDate/index.vue";
+export { default as ScrollBoundary } from "./ScrollBoundary/index.vue";
+export { default as SearchOverlay } from "./SearchOverlay/index.vue";
+export { default as ShortcutIndicator } from "./ShortcutIndicator/index.vue";
+export { default as Sortli } from "./Sortli/index.vue";
+export { default as StatusIcon } from "./StatusIcon/index.vue";
+export { default as StatusIndicator } from "./StatusIndicator/index.vue";
+export { default as Tabs } from "./Tabs/index.vue";
+export { default as TransitionHeight } from "./Transition/Height.vue";
+export { default as ViewportBlockingRect } from "./ViewportBlockingRect/index.vue";
+export { default as Tooltip } from "./Tooltip/index.vue";
+export { default as TooltipContext } from "./Tooltip/Context.vue";
+export { default as TooltipStatus } from "./Tooltip/Status.vue";
+export { default as NotEditStateInfo } from "./NotEditStateInfo/index.vue";

package/dist/runtime/editor/composables/defineHighlight.d.ts

@@ -0,0 +1,2 @@
+import type { HighlightItem } from '../providers/plugin.js';
+export declare function defineHighlight(cb: () => HighlightItem | HighlightItem[] | undefined): void;

package/dist/runtime/editor/composables/defineHighlight.js

@@ -0,0 +1,10 @@
+import { onBeforeUnmount, onMounted, useBlokkli } from "#imports";
+export function defineHighlight(cb) {
+  const { plugins } = useBlokkli();
+  onMounted(() => {
+    plugins.add("highlight", cb);
+  });
+  onBeforeUnmount(() => {
+    plugins.remove("highlight", cb);
+  });
+}

package/dist/runtime/editor/composables/index.d.ts

@@ -4,6 +4,7 @@ export { defineCommands } from './defineCommands.js';
 export { defineDropAreas } from './defineDropAreas.js';
 export { defineDropHandler } from './defineDropHandler.js';
 export { defineElementStyle } from './defineElementStyle.js';
+export { defineHighlight } from './defineHighlight.js';
 export { defineItemDropdownAction } from './defineItemDropdownAction.js';
 export { defineMenuButton } from './defineMenuButton.js';
 export { defineRenderer } from './defineRenderer.js';

package/dist/runtime/editor/composables/index.js

@@ -4,6 +4,7 @@ export { defineCommands } from "./defineCommands.js";
 export { defineDropAreas } from "./defineDropAreas.js";
 export { defineDropHandler } from "./defineDropHandler.js";
 export { defineElementStyle } from "./defineElementStyle.js";
+export { defineHighlight } from "./defineHighlight.js";
 export { defineItemDropdownAction } from "./defineItemDropdownAction.js";
 export { defineMenuButton } from "./defineMenuButton.js";
 export { defineRenderer } from "./defineRenderer.js";

package/dist/runtime/editor/composables/useBlockRegistration.js

@@ -24,6 +24,14 @@ export function useBlockRegistration(dom, uuid) {
     if (rootElement2 instanceof HTMLElement) {
       return rootElement2;
     }
+    const children = instance?.subTree?.children;
+    if (Array.isArray(children)) {
+      for (const child of children) {
+        if (child !== null && typeof child === "object" && "el" in child && child.el instanceof HTMLElement) {
+          return child.el;
+        }
+      }
+    }
     return null;
   }
   function setRootElement() {

package/dist/runtime/editor/composables/useStickyToolbar.d.ts

@@ -13,6 +13,7 @@ type UseStickyToolbarOptions = {
     getAnchorCoordinates?: () => Coord | null;
     getCaretWidth?: () => number;
     allowHorizontalOverflow?: boolean;
+    isFullscreen?: () => boolean;
 };
 type UseStickyToolbar = {
     shouldRender: ComputedRef<boolean>;

package/dist/runtime/editor/composables/useStickyToolbar.js

@@ -222,6 +222,7 @@ export function useStickyToolbar(el, options) {
     }
     return "left";
   }
+  let wasFullscreen = false;
   onBlokkliEvent("canvas:draw", (ctx) => {
     if (!el.value) {
       return;
@@ -231,6 +232,21 @@ export function useStickyToolbar(el, options) {
       shouldRender.value = true;
       return;
     }
+    const fullscreen = !!options?.isFullscreen?.();
+    if (fullscreen) {
+      const vp = ui.visibleViewport.value;
+      el.value.style.transform = `translate3d(${vp.x}px, ${vp.y}px, 0)`;
+      el.value.style.width = `${vp.width}px`;
+      el.value.style.height = `${vp.height}px`;
+      shouldRender.value = true;
+      wasFullscreen = true;
+      return;
+    }
+    if (wasFullscreen) {
+      el.value.style.width = "";
+      el.value.style.height = "";
+      wasFullscreen = false;
+    }
     if (options && options.shouldUpdate && !options.shouldUpdate()) {
       return;
     }