grapes-vue-lite 0.1.0 → 0.1.2

package/README.md

@@ -50,7 +50,22 @@ import { GrapesVueEditor, type EditorContext, type EditorOptions } from "grapes-
 import "grapes-vue-lite/style.css";
 
 const options: EditorOptions = {
+  locale: "en",
+  theme: {
+    name: "light",
+    themes: {
+      brand: {
+        colorPrimary: "#0f766e",
+        colorSurface: "#ffffff",
+      },
+    },
+  },
   selectors: [{ name: "primary-button", label: "Primary button" }],
+  messages: {
+    "zh-CN": {
+      "app.title": "页面编辑器",
+    },
+  },
   storage: {
     localKey: "host-app-builder",
   },
@@ -87,14 +102,36 @@ function handleChange(projectJson: string) {
 
 The package treats `vue` as a peer dependency, so the host application owns the Vue runtime version.
 
+The editor fills its parent container by default. When embedding it in a dialog, drawer, tab pane, or any constrained area, set the host container height explicitly:
+
+```vue
+<template>
+  <div class="builder-host">
+    <GrapesVueEditor :options="options" />
+  </div>
+</template>
+
+<style scoped>
+.builder-host {
+  height: 520px;
+  min-height: 0;
+}
+</style>
+```
+
+For full-screen usage, set the host container to `100dvh`. The library stylesheet avoids forcing `body`, `html`, or `#app` height so it does not override the host application's page layout.
+
 ## Current Editor Modules
 
 - `Blocks`: block registry and categories.
-- `Components`: component type registry, node creation, and style constraints.
+- `Components`: component type registry, node creation, style constraints, and programmatic component tree insertion through the editor context.
 - `Traits`: common and component-specific attributes.
 - `Styles`: style sectors and style properties.
 - `Selectors`: project-level class registry and class assignment.
 - `CssRules`: class selector style rules with state, component-first scope, and device overrides.
+- `Parser`: HTML fragment import that maps supported tags into editable component nodes.
+- `I18n`: English and Simplified Chinese UI messages with English as the default locale.
+- `Theme`: light/dark editor UI themes and host-provided design tokens.
 - `Assets`: image asset registry and image assignment.
 - `Storage`: local and custom storage adapters.
 - `Commands`: command registry and shortcuts.
@@ -114,6 +151,7 @@ The editor supports both node-level styles and class selector rules.
 
 Toolbar export options:
 
+- `Import HTML`: paste supported HTML and replace the current page contents with editable nodes.
 - `View HTML`: single HTML document with CSS embedded in `<style>`.
 - `View Linked HTML`: HTML document that references `grapes-vue-lite-styles.css`.
 - `View CSS`: current page CSS.
@@ -134,6 +172,32 @@ Toolbar export options:
 
 Deleting a project class removes it from the registry, all page nodes, and its CSS rule.
 
+## Programmatic Component Workflow
+
+Plugins and host applications can create component nodes directly and insert them without wrapping every operation as a block:
+
+```ts
+const hero = editor.Components.createNode("section", {
+  name: "API Hero",
+  droppable: true,
+  style: { padding: "64px", background: "#ffffff" },
+});
+
+const title = editor.Components.createNode("heading", {
+  text: "Created by a plugin",
+});
+
+editor.addNodeToRoot(hero);
+editor.addNodeToNode(title, hero.id);
+```
+
+Available component tree helpers:
+
+- `addNodeToRoot(node)`: append a component to the active page root.
+- `addNodeToNode(node, targetNodeId)`: append a component to a droppable target.
+- `insertNodeNearNode(node, targetNodeId, "before" | "after")`: insert a component as a sibling.
+- `deleteNode(id)`: remove a component and return whether deletion happened.
+
 ## Tests
 
 `test/exporter-smoke-test.ts` directly imports the exporter module and verifies: