@revenexx/editor 0.1.0 → 0.1.1

package/README.md

@@ -1,58 +1,132 @@
-# blökkli page builder for Nuxt
+# @revenexx/editor
 
-**[Live Demo](https://blokk.li)**
+The visual page editor for **revenexx Revenue Cloud themes** — a hard fork of
+[blökkli](https://github.com/blokkli/editor) ([live demo](https://blokk.li)),
+adapted to the revenexx UI and platform. How the fork is maintained, synced with
+upstream and released is documented in [FORK.md](./FORK.md).
 
-blökkli is an interactive page editor that integrates with any backend and
-offers various features to edit content quick and easy.
+The editor gives buyers of a theme true WYSIWYG page building: drag & drop
+blocks, inline text editing, undo/redo history, comments, a reusable-block
+library, templates, multi-language content and a publish workflow. The editor
+**does not store data** — every mutation goes through an _adapter_ to a backend.
+In the Revenue Cloud that backend is the **pages platform app** (`apps/pages`),
+and the reference integration is **`@revenexx/cover-theme`**.
 
-![Screenshot of the blökkli editor](./playground/public/editor-screenshot.png)
+## Using it in a revenexx theme
 
-## Features
+### 1. Install
 
-- Smooth drag and drop editing
-- True WYSIWYG
-- Dynamic options for block apperance
-- Inline text editing (plain or rich text)
-- Multilanguage (both UI and content)
-- Nested blocks (for sections, grids, accordions, etc.)
-- Restrictions (allowed block types, cardinality, max instances)
-- Clipboard integration (paste text, images, links or copy blocks)
-- Comments
-- and many more
+```bash
+npm install @revenexx/editor
+```
 
-## Comparison to other editors
+### 2. Register the module
 
-The main difference to other WYSIWYG editors is that blökkli does not manage the
-data - it's just the editor. It provides a single interface (called adapter) to
-integrate any backend or data structure. Actually performing the mutations (like
-add, delete, move, setting options) is left to the adapter. In most cases an
-adapter method performs API calls, but it could as well all be done in the
-browser. In fact, the demo page / playground implements a reference adapter that
-stores mutations in local storage and keeps data in JSON files.
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  modules: ['@revenexx/editor'],
 
-## Integration with Nuxt
+  blokkli: {
+    itemEntityType: 'block',
+    defaultLanguage: 'de',
+    // Where your block components live:
+    pattern: ['app/components/blokkli/**/*.vue'],
+    // Your edit adapter (see step 4):
+    editAdapterPath: 'app/blokkli.editAdapter.ts',
+  },
+})
+```
 
-One of the main goals of blökkli is to offer a seamless integration with your
-new or existing Nuxt app. Creating new block components is straightforward.
-Options to change the appearance of a block are directly defined in the
-component, so is configuration that defines the behaviour of the block when
-rendered in the editor.
+> The config key stays `blokkli` and all in-app imports go through the generated
+> `#blokkli/*` aliases — only the package name is revenexx-specific.
 
-During normal rendering of blocks (not in the editor), the provided blökkli
-components and composables have a minimal overhead, to not have a negative
-impact on performance.
+### 3. Write blocks
 
-## Backends
+A block is a Vue component using the `defineBlokkli()` macro. Props are the
+editable fields; options control appearance and show up in the editor toolbar.
 
-Currently blökkli ships with an adapter to integrate it with the paragraphs
-module of Drupal. The
-[Paragraphs blökkli](https://www.drupal.org/project/paragraphs_blokkli) module
-implements all features available in the editor. It provides a new edit state
-entity that stores the applied mutations and implements a GraphQL schema
-extension to integrate the adapter.
+```vue
+<!-- app/components/blokkli/hero/index.vue -->
+<script setup lang="ts">
+const props = defineProps<{
+  headline: string
+  subheadline?: string
+}>()
+
+const { options } = defineBlokkli({
+  bundle: 'hero',
+  options: {
+    alignment: {
+      type: 'radios',
+      label: 'Alignment',
+      default: 'left',
+      options: { left: 'Left', center: 'Center' },
+    },
+  },
+  editor: {
+    // Props a freshly added block starts with:
+    mockProps: () => ({ headline: 'Headline' }),
+  },
+})
+</script>
+
+<template>
+  <section :class="options.alignment === 'center' && 'text-center'">
+    <!-- v-blokkli-editable enables inline editing for this field -->
+    <h1 v-blokkli-editable:headline>{{ headline }}</h1>
+    <p v-if="subheadline" v-blokkli-editable:subheadline>{{ subheadline }}</p>
+  </section>
+</template>
+```
+
+Nested blocks (sections, grids, accordions) render their children with
+`<BlokkliField name="items" :list="..." />`.
+
+### 4. The edit adapter
+
+The adapter translates editor actions (add, move, delete, options, publish,
+comments, …) into backend calls. **Don't write one from scratch** — copy the
+reference implementation:
+
+- **Adapter:** `cover/packages/cover-theme/app/blokkli.editAdapter.ts` — full
+  feature surface against the pages app
+- **Backend contract:** `apps/pages/README.md` has the complete adapter-method →
+  endpoint mapping (mutation log with undo/redo, ownership, revisions, comments,
+  library, templates, translations, notifications)
+- **BFF proxy:** the browser never calls the pages app directly; a Nitro route
+  (`/api/blokkli/app/[...path]`) forwards calls with tenant context
+
+### 5. The `/admin/` pattern
+
+Live storefront routes never ship editor code. The editor mounts on a dedicated
+route the cockpit embeds in an iframe:
+
+```
+/admin/edit?page={id}&langcode={lang}     ← editor surface (BlokkliProvider)
+/preview/{token}                          ← read-only share preview
+/{slug}                                   ← live rendering, zero editor weight
+```
+
+The cockpit hands a short-lived, user-scoped token to the iframe via
+`postMessage` (`{ type: 'blokkli:edit-token', token }`) or the `#token=`
+fragment; the theme attaches it to every adapter call. See
+`cover-theme/app/pages/admin/edit.vue` + `useEditToken.ts`.
+
+## Development (this repo)
+
+```bash
+npm install
+npm run dev:prepare        # generate the .nuxt alias environment (required once)
+npm run dev -- --port 3001 # playground with the revenexx theme
+npm test                   # vitest
+npm run typecheck          # see /typecheck for targeted commands
+```
+
+Releasing & upstream syncs: see [FORK.md](./FORK.md).
 
 ## Acknowledgments
 
-blökkli was developed by [dulnan](https://github.com/dulnan) at
-[Liip](https://www.liip.ch/). The development was supported by the canton of
-Basel-Stadt in Switzerland as part of the relaunch project for WebBS.
+blökkli was created by [dulnan](https://github.com/dulnan) at
+[Liip](https://www.liip.ch/) (MIT). This fork tracks upstream closely — we pull
+new releases regularly and replay the revenexx customizations on top.

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/editor",
   "configKey": "blokkli",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "compatibility": {
     "nuxt": ">=3.15.0"
   },

package/dist/module.mjs

@@ -19,7 +19,7 @@ import 'typescript';
 import 'oxc-walker';
 
 const name = "@revenexx/editor";
-const version = "0.1.0";
+const version = "0.1.1";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];

package/dist/modules/agent/runtime/app/types/index.d.ts

@@ -409,11 +409,11 @@ declare const toolConversationItemSchema: z.ZodObject<{
  * the components that render it.
  */
 export declare const serverToolNameSchema: z.ZodEnum<{
+    plan_completed: "plan_completed";
     load_skills: "load_skills";
     load_tools: "load_tools";
     create_plan: "create_plan";
     complete_plan_step: "complete_plan_step";
-    plan_completed: "plan_completed";
 }>;
 export type ServerToolName = z.infer<typeof serverToolNameSchema>;
 /**
@@ -424,11 +424,11 @@ declare const serverToolConversationItemSchema: z.ZodObject<{
     timestamp: z.ZodNumber;
     type: z.ZodLiteral<"server_tool">;
     tool: z.ZodEnum<{
+        plan_completed: "plan_completed";
         load_skills: "load_skills";
         load_tools: "load_tools";
         create_plan: "create_plan";
         complete_plan_step: "complete_plan_step";
-        plan_completed: "plan_completed";
     }>;
     label: z.ZodString;
 }, z.core.$strip>;
@@ -503,11 +503,11 @@ export declare const conversationItemSchema: z.ZodDiscriminatedUnion<[z.ZodObjec
     timestamp: z.ZodNumber;
     type: z.ZodLiteral<"server_tool">;
     tool: z.ZodEnum<{
+        plan_completed: "plan_completed";
         load_skills: "load_skills";
         load_tools: "load_tools";
         create_plan: "create_plan";
         complete_plan_step: "complete_plan_step";
-        plan_completed: "plan_completed";
     }>;
     label: z.ZodString;
 }, z.core.$strip>, z.ZodObject<{

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

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     bundle: string;
     description: string;
     noPreview: boolean;
-    maxHeight: number;
     items: FieldListItem[] | FieldListItem;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
     bundle: string;
     description: string;
     noPreview: boolean;
-    maxHeight: number;
     items: FieldListItem[] | FieldListItem;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    maxHeight: number;
     backgroundClass: string;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -4,8 +4,8 @@ type __VLS_Props = {
     maxHeight?: number;
 };
 declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
-    maxHeight: number;
     backgroundClass: string;
+    maxHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    lead: string;
-    submitLabel: string;
     canSubmit: boolean;
+    submitLabel: string;
+    lead: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

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

@@ -41,9 +41,9 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<{
     zIndex: "default" | "high";
     icon: BlokkliIcon;
     width: number | string;
-    lead: string;
-    submitLabel: string;
     canSubmit: boolean;
+    submitLabel: string;
+    lead: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     tabs?: (props: {}) => any;
 } & {

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.d.vue.ts

@@ -34,10 +34,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
-    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/runtime/editor/components/DiffApproval/Toolbar/index.vue.d.ts

@@ -34,10 +34,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onCancel?: (() => any) | undefined;
     onApply?: (() => any) | undefined;
-    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
-    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
     onPrev?: (() => any) | undefined;
     onNext?: (() => any) | undefined;
+    "onUpdate:selected"?: ((key: string, value: boolean) => any) | undefined;
+    "onUpdate:reasons"?: ((key: string, value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

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

@@ -28,8 +28,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
     onSubmit?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
-    maxHeight: number;
     minHeight: number;
+    maxHeight: number;
     onBeforePaste: (data: ClipboardData) => boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/editor/components/RichText/Editor/index.d.vue.ts

@@ -25,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         isEmpty: boolean;
     }) => any) | undefined;
 }>, {
-    autofocus: boolean;
     initialValue: string;
+    autofocus: boolean;
     getUsers: () => Promise<MentionItem[]>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/editor/components/RichText/Editor/index.vue.d.ts

@@ -25,7 +25,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
         isEmpty: boolean;
     }) => any) | undefined;
 }>, {
-    autofocus: boolean;
     initialValue: string;
+    autofocus: boolean;
     getUsers: () => Promise<MentionItem[]>;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

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

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    itemHeight: number;
     visibleItems: number;
+    itemHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -30,8 +30,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:text"?: ((value: string) => any) | undefined;
 }>, {
     placeholder: string;
-    itemHeight: number;
     visibleItems: number;
+    itemHeight: number;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    placement: Placement | "inline";
     margin: boolean;
+    placement: Placement | "inline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

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

@@ -14,8 +14,8 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
     description: string | null;
-    placement: Placement | "inline";
     margin: boolean;
+    placement: Placement | "inline";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;