@blokkli/editor 2.0.0-alpha.2 → 2.0.0-alpha.21

package/dist/runtime/types/index.d.ts

@@ -8,7 +8,9 @@ import type { KeyboardProvider } from '../helpers/keyboardProvider.js';
 import type { UiProvider } from '../helpers/uiProvider.js';
 import type { AnimationProvider } from '../helpers/animationProvider.js';
 import type { StateProvider } from '../helpers/stateProvider.js';
+import type { DirectiveProvider } from '../helpers/providers/directive.js';
 import type { TextProvider } from '../helpers/textProvider.js';
+import type { PluginProvider } from '../helpers/pluginProvider.js';
 import type { eventBus } from './../helpers/eventBus.js';
 import type { BlockOptionDefinition } from './blokkOptions.js';
 import type { BlokkliAdapter, AdapterContext, MutationResponseLike } from './../adapter/index.js';
@@ -18,7 +20,7 @@ import type { BlokkliIcon } from '#blokkli-build/icons';
 import type { SettingsGroup, Viewport } from '#blokkli/constants';
 import type { BlockBundleWithNested, FieldListItemTyped, GlobalOptionsKey, ValidChunkNames, ValidFieldListTypes, ValidGlobalConfigKeys, BundleProps } from '#blokkli-build/generated-types';
 import type { ThemeProvider } from '#blokkli/helpers/themeProvider';
-import type { GlobalOptionsType } from '#blokkli-build/definitions';
+import type { BlokkliFragmentName, GlobalOptionsType } from '#blokkli-build/definitions';
 import type { CommandsProvider } from '#blokkli/helpers/commandsProvider';
 import type { TourProvider } from '#blokkli/helpers/tourProvider';
 import type { DropAreaProvider } from '#blokkli/helpers/dropAreaProvider';
@@ -26,7 +28,11 @@ import type { RGB } from './theme.js';
 import type { DebugProvider } from '#blokkli/helpers/debugProvider';
 import type getVideoId from 'get-video-id';
 import type { DefinitionProvider } from '../helpers/definitionProvider.js';
-export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string, successMessage?: string) => Promise<boolean>;
+import type { IndicatorsProvider } from '#blokkli/helpers/indicatorsProvider';
+import type { BlocksProvider } from '#blokkli/helpers/providers/blocks';
+import type { FieldsProvider } from '#blokkli/helpers/providers/fields';
+import type { ElementProvider } from '#blokkli/helpers/providers/element';
+export type MutateWithLoadingStateFunction = (promise: () => Promise<MutationResponseLike<any>> | undefined, errorMessage?: string | false, successMessage?: string) => Promise<boolean>;
 type GetType<T> = T extends {
     options: infer O;
 } ? T extends {
@@ -89,6 +95,15 @@ export type DefineBlokkliContext<T extends BlockDefinitionOptionsInput = BlockDe
      */
     provider: ComputedRef<BlokkliProviderEntityContext | null>;
 };
+export type DefineProviderContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends ValidGlobalConfigKeys | undefined = undefined> = {
+    /**
+     * The reactive runtime options.
+     *
+     * This includes both the locally defined options and the inherited global
+     * options.
+     */
+    options: ComputedRef<(T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object)>;
+};
 type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined = undefined, B extends BundleKey | string = string> = {
     options: (T extends BlockDefinitionOptionsInput ? WithOptions<T> : object) & (G extends ValidGlobalConfigKeys ? GlobalOptionsKeyTypes<G> : object);
     parentType: BlockBundleWithNested | undefined;
@@ -99,7 +114,7 @@ type DetermineVisibleOptionsContext<T extends BlockDefinitionOptionsInput = Bloc
 type ExtractGlobalOptions<G extends GlobalOptionsKey[]> = G[number] extends GlobalOptionsKey ? G[number] : never;
 type CombineKeysAndGlobalOptions<T extends BlockDefinitionOptionsInput, G extends GlobalOptionsKey[] | undefined> = keyof T | ExtractGlobalOptions<NonNullable<G>>;
 export type BlokkliDefinitionAddBehaviour = 'no-form' | 'form' | `editable:${string}`;
-export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string> = {
+export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined, Bundle extends BundleKey | string = string, PropsType = Bundle extends BundleKey ? BundleProps[Bundle] : Record<string, any>> = {
     /**
      * Determine which options should be visible in the editor based on the
      * given context.
@@ -234,7 +249,7 @@ export type BlokkliDefinitionInputEditor<Options extends BlockDefinitionOptionsI
      * You can also return HTML as the value. The feature uses an HTML differ to
      * render the diff.
      */
-    mapDiffProps?: (props?: any) => Record<string, string>;
+    mapDiffProps?: (props?: PropsType) => Record<string, string>;
 };
 export type BlockDefinitionRenderForParent = {
     parentBundle: BlockBundleWithNested;
@@ -283,6 +298,37 @@ export type BlockDefinitionInput<Options extends BlockDefinitionOptionsInput = B
      * Settings for the behaviour in the editor.
      */
     editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions, Bundle>;
+    /**
+     * Map which component prop maps to which field name.
+     *
+     * For example, if the field is named "field_paragraphs_header" and the prop
+     * is named "headerParagraphs", you would define it as such:
+     *
+     * @example
+     * ```vue
+     * <template>
+     *   <div>
+     *     <BlokkliField :list="headerParagraphs" name="field_paragraphs_header" />
+     *   </div>
+     * <template>
+     *
+     * <script lang="ts" setup>
+     * import type { ParagraphTwoColumnsFragment } from '#graphql-operations'
+     *
+     * defineProps<{
+     *   headerParagraphs: ParagraphTwoColumnsFragment['headerParagraphs']
+     * }>()
+     *
+     * defineBlokkli({
+     *   bundle: 'section',
+     *   propsFieldMapping: {
+     *     headerParagraphs: 'field_paragraphs_header',
+     *   }
+     * })
+     * </script>
+     * ```
+     */
+    propsFieldMapping?: Bundle extends BundleKey ? Partial<Record<keyof BundleProps[Bundle], string>> : never;
 };
 export type RuntimeBlockDefinitionInput = {
     bundle: string;
@@ -299,8 +345,9 @@ export type InjectedBlokkliItem = {
 export type FieldListItem = {
     uuid: string;
     bundle: string;
-    isNew?: boolean;
+    isVisible: boolean;
     options?: Record<string, any>;
+    editContext?: BlockEditContext;
     props?: Record<string, any>;
 };
 export type MutatedField = {
@@ -339,6 +386,7 @@ export type BlokkliProviderEntityContext = {
     bundle: string;
     language?: string;
 };
+export type EditPermission = 'view' | 'edit' | 'review';
 export type EditEntity = {
     label?: string;
     status?: boolean;
@@ -365,6 +413,50 @@ export interface ConversionItem {
     sourceBundle: string;
     targetBundle: string;
 }
+export type PluginConfigInputText = {
+    type: 'text';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    minLength?: number;
+    maxLength?: number;
+    placeholder?: string;
+    pattern?: string;
+    multiline?: boolean;
+    rows?: number;
+};
+export type PluginConfigInputSeed = {
+    type: 'seed';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+};
+export type PluginConfigInputCheckbox = {
+    type: 'checkbox';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    checkboxLabel?: string;
+    defaultValue: boolean;
+};
+export type PluginConfigInputOptions = {
+    type: 'options';
+    name: string;
+    label: string;
+    description?: string;
+    required: boolean;
+    defaultValue?: string;
+    variant: 'select' | 'radio';
+    options: {
+        value: string;
+        label: string;
+    }[];
+};
+export type PluginConfigInput = PluginConfigInputText | PluginConfigInputSeed | PluginConfigInputCheckbox | PluginConfigInputOptions;
 export interface TransformPlugin {
     /**
      * The ID of the plugin.
@@ -381,7 +473,7 @@ export interface TransformPlugin {
     /**
      * The array of bundles that the transform might create.
      */
-    targetBundles: string[];
+    targetBundles?: string[];
     /**
      * The minimum number of items required.
      */
@@ -390,6 +482,38 @@ export interface TransformPlugin {
      * The maximum number of items.
      */
     max: number;
+    configInputs?: PluginConfigInput[];
+    description?: string;
+    /**
+     * Whether the transform plugin supports previewing the changes first.
+     *
+     * If true, the plugin is expected to to defer producing any side effects
+     * to when it's executed in non-preview mode.
+     */
+    preview?: boolean;
+}
+export type PluginConfigInputItem = {
+    name: string;
+    value: string;
+};
+export interface HostTransformPlugin {
+    /**
+     * The ID of the plugin.
+     */
+    id: string;
+    /**
+     * The label of the transform plugin which is shown in the editor.
+     */
+    label: string;
+    configInputs?: PluginConfigInput[];
+    description?: string;
+    /**
+     * Whether the transform plugin supports previewing the changes first.
+     *
+     * If true, the plugin is expected to to defer producing any side effects
+     * to when it's executed in non-preview mode.
+     */
+    preview?: boolean;
 }
 export interface LibraryItem {
     uuid: string;
@@ -434,9 +558,11 @@ export interface MappedState {
     ownerName: string;
     mutatedState?: {
         mutatedOptions?: any;
+        mutatedHostOptions?: Record<string, string>;
         fields?: MutatedField[];
         violations?: Validation[];
     };
+    publishOptions: PublishOptions;
     entity: EditEntity;
     mutatedEntity?: any;
     translationState: TranslationState;
@@ -448,8 +574,10 @@ export interface BlockBundleDefinition {
     description?: string;
     allowReusable?: boolean;
     isTranslatable?: boolean;
+    hasPublishOn?: boolean;
+    hasUnpublishOn?: boolean;
 }
-export type EditMode = 'readonly' | 'editing' | 'translating';
+export type EditMode = 'readonly' | 'editing' | 'translating' | 'review';
 export type MutatedOptions = {
     [uuid: string]: {
         [key: string]: string;
@@ -564,36 +692,12 @@ export type DraggableStyle = {
 };
 export interface DraggableExistingStructureBlock {
     itemType: 'existing_structure';
-    uuid: string;
-    itemBundle: string;
+    block: RenderedFieldListItem;
     element: () => HTMLElement;
 }
 export interface DraggableExistingBlock {
     itemType: 'existing';
-    element: () => HTMLElement;
-    entityType: string;
-    hostType: string;
-    hostBundle: string;
-    hostUuid: string;
-    hostFieldName: string;
-    hostFieldListType: ValidFieldListTypes;
-    itemBundle: string;
-    isNew: boolean;
-    uuid: string;
-    isNested: boolean;
-    /**
-     * The bundle if this item is reusable.
-     */
-    reusableBundle?: string;
-    /**
-     * The UUID of the library item this block belongs to.
-     */
-    libraryItemUuid?: string;
-    /**
-     * The title to use when displaying the block in lists during editing.
-     */
-    editTitle?: string;
-    parentBlockBundle: BlockBundleWithNested | undefined;
+    block: RenderedFieldListItem;
 }
 export interface DraggableNewItem {
     itemType: 'new';
@@ -687,6 +791,10 @@ export type UpdateBlockOptionEvent = {
     key: string;
     value: string;
 };
+export type UpdateHostOptionEvent = {
+    key: string;
+    value: string;
+};
 export type EditBlockEvent = {
     uuid: string;
     bundle: string;
@@ -712,6 +820,7 @@ export type Message = {
     type: 'success' | 'error';
     message: string;
     additional?: string | Error | unknown;
+    replace?: boolean;
 };
 export type Size = {
     width: number;
@@ -723,11 +832,15 @@ export type Coord = {
 };
 export type Rectangle = Size & Coord;
 export type CanvasDrawEvent = {
+    gl: WebGLRenderingContext;
     mouseX: number;
     mouseY: number;
+    mouseArtboard: Coord;
     artboardOffset: Coord;
     artboardScale: number;
+    artboardSize: Size;
     time: number;
+    selectedUuids: string[];
 };
 export type MakeReusableEvent = {
     label: string;
@@ -758,6 +871,11 @@ export type ScrollIntoViewEvent = {
     uuid: string;
     center?: boolean;
     immediate?: boolean;
+} | {
+    element: HTMLElement;
+    center?: boolean;
+    immediate?: boolean;
+    highlight?: boolean;
 };
 export type PluginMountEvent = {
     type: 'ItemDropdown';
@@ -806,10 +924,11 @@ export type BlokkliFieldElement = {
     allowedFragments: string[];
     cardinality: number;
     element: HTMLElement;
-    dropAlignment?: 'vertical' | 'horizontal';
+    dropAlignment: FieldDropAlignment | null;
 };
+export type FieldDropAlignment = 'vertical' | 'horizontal';
 export type ActionPlacedEvent = {
-    action: DraggableActionItem;
+    id: string;
     preceedingUuid?: string;
     host: DraggableHostData;
     field: BlokkliFieldElement;
@@ -870,15 +989,27 @@ export type LibraryEditItemEvent = {
     uuid: string;
     label?: string;
 };
+export type AnimationFrameBeforeEvent = {
+    time: number;
+    mouseX: number;
+    mouseY: number;
+};
+type MultiSelectStartEvent = {
+    x: number;
+    y: number;
+};
 export type EventbusEvents = {
     select: string | string[];
     'select:unselect': undefined;
+    'select:force': string | string[];
+    'select:host': undefined;
+    'select:host:unselect': undefined;
+    'multi-select:start': MultiSelectStartEvent;
     'item:edit': EditBlockEvent;
     batchTranslate: undefined;
     'dragging:start': DraggableStartEvent;
     'dragging:drop': DropTargetEvent;
     'dragging:end': undefined;
-    setActiveFieldKey: string;
     'add:block:new': AddNewBlockEvent;
     updateMutatedFields: UpdateMutatedFieldsEvent;
     animationFrame: AnimationFrameEvent;
@@ -893,17 +1024,20 @@ export type EventbusEvents = {
     'select:toggle': string;
     'select:shiftToggle': string;
     'select:end': string[] | undefined;
-    'select:previous': undefined;
-    'select:next': undefined;
     'item:dropped': undefined;
     'block:append': BlockAppendEvent;
-    'item:doubleClick': DraggableExistingBlock;
+    'item:doubleClick': RenderedFieldListItem;
     scrollIntoView: ScrollIntoViewEvent;
-    'animationFrame:before': number;
+    'animationFrame:before': AnimationFrameBeforeEvent;
+    'animationFrame:after': undefined;
     'canvas:draw': CanvasDrawEvent;
     'state:reloaded': undefined;
     addContentSearchItem: AddContentSearchItemEvent;
     'option:update': UpdateBlockOptionEvent;
+    /**
+     * Emitted after finishing changing options.
+     */
+    'option:finish-change': undefined;
     'plugin:mount': PluginMountEvent;
     'plugin:unmount': PluginUnmountEvent;
     'editable:focus': EditableFieldFocusEvent;
@@ -914,6 +1048,7 @@ export type EventbusEvents = {
     'sidebar:close': undefined;
     'sidebar:open': string;
     'action:placed': ActionPlacedEvent;
+    'action:selected': undefined;
     'animator:add': AnimatorAddEvent;
     'ui:resized': undefined;
     'add-list:change': undefined;
@@ -925,10 +1060,27 @@ export type EventbusEvents = {
      * Emitted when publishing failed.
      */
     'publish:failed': undefined;
+    /**
+     * Show the publish dialog.
+     */
+    'publish:show-dialog': undefined;
     /**
      * Edit a library item.
      */
     'library:edit-item': LibraryEditItemEvent;
+    /**
+     * Emitted when a view option is being toggled.
+     */
+    'view-option:toggle': {
+        id: string;
+    };
+    /**
+     * An analyze node target was clicked.
+     */
+    'analyze:click-node': {
+        id: string;
+        target: HTMLElement;
+    };
 };
 export type Eventbus = Emitter<EventbusEvents>;
 export type ItemEditContext = {
@@ -936,6 +1088,7 @@ export type ItemEditContext = {
     mutatedOptions: MutatedOptions;
     dom?: DomProvider;
     definitions: DefinitionProvider;
+    useBlockRegistration?: (dom: DomProvider, uuid: string) => void;
 };
 export interface BlokkliApp {
     /**
@@ -951,7 +1104,9 @@ export interface BlokkliApp {
     storage: StorageProvider;
     types: BlockDefinitionProvider;
     selection: SelectionProvider;
+    blocks: BlocksProvider;
     keyboard: KeyboardProvider;
+    element: ElementProvider;
     ui: UiProvider;
     animation: AnimationProvider;
     definitions: DefinitionProvider;
@@ -965,6 +1120,10 @@ export interface BlokkliApp {
     tour: TourProvider;
     dropAreas: DropAreaProvider;
     debug: DebugProvider;
+    indicators: IndicatorsProvider;
+    plugins: PluginProvider;
+    directive: DirectiveProvider;
+    fields: FieldsProvider;
 }
 export type PasteExistingBlocksEvent = {
     uuids: string[];
@@ -1095,7 +1254,7 @@ export type DropArea = {
     label: string;
     icon?: BlokkliIcon;
     element: HTMLElement;
-    onDrop: () => Promise<any>;
+    onDrop: () => Promise<any> | any;
 };
 export type ContextMenuRule = {
     type: 'rule';
@@ -1144,6 +1303,26 @@ export type FragmentDefinitionInput<Options extends BlockDefinitionOptionsInput
      */
     editor?: BlokkliDefinitionInputEditor<Options, GlobalOptions>;
 };
+export type ProviderDefinitionInput<Options extends BlockDefinitionOptionsInput = BlockDefinitionOptionsInput, GlobalOptions extends GlobalOptionsKey[] | undefined = undefined> = {
+    /**
+     * The entity type.
+     */
+    entityType: string;
+    /**
+     * The bundle.
+     */
+    bundle: string;
+    /**
+     * Define options available for this block.
+     */
+    options?: Options;
+    /**
+     * Global options to use.
+     *
+     * These options will be merged with the component-specific options.
+     */
+    globalOptions?: GlobalOptions;
+};
 export type TourItem = {
     id: string;
     title: string;
@@ -1173,7 +1352,10 @@ export type PublishOptions = {
     canPublish: boolean;
     isRevisionable: boolean;
     hasRevisionLogMessage: boolean;
-    lastChanged?: string | null;
+    lastChanged: string | null;
+    canSchedule: boolean;
+    publishOn: string | null;
+    revisionLogMessage: string | null;
 };
 export type GetEditStatesItem = {
     hostEntityType: string;
@@ -1181,5 +1363,59 @@ export type GetEditStatesItem = {
     entity: EditEntity;
     currentUserIsOwner: boolean;
 };
+export type BlockIndicator = {
+    id: string;
+    uuid: string;
+    element: HTMLElement;
+    position: 'left' | 'right';
+};
+export type AddActionColor = 'rose' | 'lime' | 'accent';
+export type AddAction = {
+    id: string;
+    icon: BlokkliIcon;
+    color: AddActionColor;
+    itemBundle?: string;
+    title: string;
+    description?: string;
+    enabled?: boolean;
+};
+export type BlockEditContext = {
+    isPublished: boolean;
+    isNew: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type RenderedFieldListItem = {
+    uuid: string;
+    bundle: string;
+    isNew: boolean;
+    isPublished: boolean;
+    host: DraggableHostData & {
+        bundle: string;
+    };
+    fieldListType: ValidFieldListTypes;
+    parentBlockBundle: BlockBundleWithNested | null;
+    library: {
+        label: string;
+        libraryItemUuid: string;
+        reusableBundle: string;
+    } | null;
+    isNested: boolean;
+    publishOn?: string | null;
+    unpublishOn?: string | null;
+};
+export type BlokkliDirectiveType = 'editable' | 'droppable';
+export type RegisteredField = {
+    element: HTMLElement;
+    entity: EntityContext;
+    fieldName: string;
+    fieldListType: ValidFieldListTypes;
+    allowedFragments: BlokkliFragmentName[];
+    isNested: boolean;
+    nestingLevel: number;
+    dropAlignment: FieldDropAlignment | null;
+};
+export type RegisterFieldData = Pick<RegisteredField, 'fieldListType' | 'allowedFragments' | 'isNested' | 'nestingLevel' | 'dropAlignment'>;
+export type VueClassProp = string | Record<string, boolean> | VueClassProp[];
 declare const _default: {};
 export default _default;

package/dist/runtime/types/theme.d.ts

@@ -25,7 +25,8 @@ export type ThemeContextColorGroup =
 /**
  * The lime color used for reusable blocks / library and status indicators.
  */
- | 'lime';
+ | 'lime' | 'orange';
+export type ThemeColorName = ThemeColorGroup | ThemeContextColorGroup;
 export type ThemeColorShade = '50' | '100' | '200' | '300' | '400' | '500' | '600' | '700' | '800' | '900' | '950';
 export type ThemeContextColorShade = 'light' | 'normal' | 'dark';
 export type ThemeColors = Record<ThemeColorShade, RGB>;

package/dist/shared/{editor.gz_ac6uT.d.mts → editor.CKsrTpc1.d.mts}

@@ -25,7 +25,7 @@ type ModuleFileTemplate = {
 };
 type ModuleTemplate = ModuleCodeTemplate | ModuleFileTemplate;
 
-type CollectedBlockType = 'main' | 'context' | 'fragment';
+type CollectedBlockType = 'main' | 'context' | 'fragment' | 'provider';
 declare class CollectedBlockFile extends CollectedFile {
     folder: string;
     iconPath: string | null;