@revenexx/editor 0.1.0 → 0.1.2

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.2",
   "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.2";
 
 function validateOption(optionKey, option, icons) {
   const errors = [];

package/dist/modules/agent/runtime/shared/types.d.ts

@@ -207,6 +207,7 @@ export type PageContext = {
  * Both Anthropic and OpenAI SDKs map to these via HTTP status codes.
  */
 export declare const agentErrorTypeSchema: z.ZodEnum<{
+    unknown: "unknown";
     authentication: "authentication";
     rate_limit: "rate_limit";
     overloaded: "overloaded";
@@ -214,7 +215,6 @@ export declare const agentErrorTypeSchema: z.ZodEnum<{
     bad_request: "bad_request";
     connection: "connection";
     unauthorized: "unauthorized";
-    unknown: "unknown";
 }>;
 export type AgentErrorType = z.infer<typeof agentErrorTypeSchema>;
 /**
@@ -355,8 +355,8 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
                 name: z.ZodString;
                 label: z.ZodString;
                 type: z.ZodEnum<{
-                    reference: "reference";
                     link: "link";
+                    reference: "reference";
                 }>;
                 allowed: z.ZodArray<z.ZodObject<{
                     type: z.ZodString;
@@ -395,8 +395,8 @@ export declare const clientMessageSchema: z.ZodDiscriminatedUnion<[z.ZodObject<{
             name: z.ZodString;
             label: z.ZodString;
             type: z.ZodEnum<{
-                reference: "reference";
                 link: "link";
+                reference: "reference";
             }>;
             allowed: z.ZodArray<z.ZodObject<{
                 type: z.ZodString;

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;