Version/0.2 rebased

docs/docs/CustomActions.mdx

@@ -0,0 +1,17 @@
+---
+sidebar_position: 5
+---
+
+# Custom actions
+
+For more specific use case you can add custom buttons.
+
+```js
+// Register a new button
+editor.registerButton({
+  position: 'header', // 'footer' or 'header'
+  icon: '<svg .../></svg>',
+  action: () => alert('Hello world'),
+  title: 'Title'
+})
+```

docs/docs/Fields/CustomField.md

@@ -76,4 +76,18 @@ export const Number = defineField({
 })
 ```
 
-You can check how [it is used internally](https://github.com/boxraiser/visual-editor/tree/main/visual-editor/src/fields)
+You can check how [it is used internally](https://github.com/ciklik/visual-editor/tree/main/visual-editor/src/fields)
+
+## UIKit
+
+The library exposes an object `UI` with some components used internally. You can use these components to keep a coherent design. 
+
+```jsx
+import { Field, defineField, React, UI } from '@boxraiser/visual-editor'
+
+const Component = ({ value, onChange, options }) => {
+  return <div>
+      <UI.Input value={value} onChange={(e) => onChange(e.target.value)} />
+  </div>
+}
+```

docs/docs/Preview/preview-responsive.mdx

@@ -0,0 +1,23 @@
+---
+sidebar_position: 3
+---
+
+# Responsive
+
+You can customize the breakpoints used for the preview when initializing the VisualEditor.
+
+```js
+const editor = new VisualEditor({
+    // ...
+    devices: [
+        { name: 'Mobile', width: 390, height: '100%', icon: 'mobile' },
+        { name: 'Tablet', width: 1180, height: 820, icon: 'tablet' },
+        { name: 'Desktop', width: '100%', height: '100%', icon: 'desktop' }
+    ]
+})
+```
+
+If the preview size exceeds the viewport, the iframe will be scaled automatically to fit the screen.
+
+- `width` and `height` can be a number of `"100%"`
+- `icon` can be `tablet`, `mobile` or `desktop`

docs/docs/changelog.mdx

@@ -4,6 +4,17 @@ sidebar_position: 10
 
 # Changelog
 
+## 0.2 - 2024/02/01
+
+- Feat: export UI components
+- Feat: registerButton() method for adding custom button
+- Feat: Add control in the preview
+- Feat: New responsive controls
+- Feat: Add a new `templates` event (cancelable)
+- Feat: Add a new `components` event (cancelable)
+- Chore: Remove `detail` in the change event
+- Fix: key missing on templates listing
+
 ## 0.1.0 - 2023/03/16
 
 - Feat: Add a new `postMessagePreview` option for VisualEditor

docs/docs/events.mdx

@@ -0,0 +1,14 @@
+---
+sidebar_position: 7
+---
+
+# Events
+
+If you need to create custom behaviour you can listen for some events on the editor
+
+| **Event** | **Description** | **Cancellable** | **Methods** |
+|-----------|-----------------|-------------|-------------|
+| `change` | Fires when the value of the editor is changed by the user | No |  |
+| `templates`  | Fires when the user click on the template button | Yes |  |
+| `components`  | Fires when the user click on the add component button | Yes |  |
+| `removeitem`  | Fires when a bloc is removed | Yes | **detail.confirm** : `() => void`, triggers the intended action (usefull if event was prevented) |

docs/docs/intro.mdx

@@ -24,7 +24,7 @@ let editor = new VisualEditor()
 Then register your page components using the `registerComponent` method that expect 2 parameters
 
 - A unique identifier for the block (string)
-- An option object (see [EditorComponentDefinition](https://github.com/boxraiser/visual-editor/blob/main/visual-editor/src/types.ts#L38) for more information)
+- An option object (see [EditorComponentDefinition](https://github.com/ciklik/visual-editor/blob/main/visual-editor/src/types.ts#L38) for more information)
 
 ```js
 import { HTMLText, Repeater, Text, Row, Select } from '@boxraiser/visual-editor'

docs/docs/translation.mdx

@@ -14,4 +14,4 @@ const editor = new VisualEditor({
 })
 ```
 
-You can see all the available keys in the [source code](https://github.com/boxraiser/visual-editor/blob/main/visual-editor/src/langs/en.ts).
+You can see all the available keys in the [source code](https://github.com/ciklik/visual-editor/blob/main/visual-editor/src/langs/en.ts).

docs/docusaurus.config.js

@@ -8,12 +8,12 @@ const darkCodeTheme = themes.dracula;
 const config = {
   title: "Visual Editor",
   tagline: "Edit your page block by block",
-  url: "https://boxraiser.github.io",
+  url: "https://ciklik.github.io",
   baseUrl: "/visual-editor/",
   onBrokenLinks: "warn",
   onBrokenMarkdownLinks: "warn",
   favicon: "img/favicon.ico",
-  organizationName: "BoxRaiser", // Usually your GitHub org/user name.
+  organizationName: "Ciklik", // Usually your GitHub org/user name.
   projectName: "visual-editor", // Usually your repo name.
   presets: [
     [
@@ -23,7 +23,7 @@ const config = {
         docs: {
           sidebarPath: require.resolve("./sidebars.js"),
           // Please change this to your repo.
-          editUrl: "https://github.com/boxraiser/visual-editor/tree/main/docs/",
+          editUrl: "https://github.com/ciklik/visual-editor/tree/main/docs/",
         },
         blog: false,
         theme: {
@@ -50,7 +50,7 @@ const config = {
             label: "Pricing",
           },
           {
-            href: "https://github.com/boxraiser/visual-editor",
+            href: "https://github.com/ciklik/visual-editor",
             label: "GitHub",
             position: "right",
           },
@@ -73,12 +73,12 @@ const config = {
             items: [
               {
                 label: "Github",
-                href: "https://github.com/boxraiser/visual-editor",
+                href: "https://github.com/ciklik/visual-editor",
               },
             ],
           },
         ],
-        copyright: `Copyright © ${new Date().getFullYear()} <a href="https://www.boxraiser.com" target="_blank">Boxraiser</a>. Built with Docusaurus.`,
+        copyright: `Copyright © ${new Date().getFullYear()} <a href="https://www.ciklik.com" target="_blank">Boxraiser</a>. Built with Docusaurus.`,
       },
       prism: {
         theme: lightCodeTheme,

docs/src/pages/pricing.jsx

@@ -31,7 +31,7 @@ export default function Pricing() {
             </div>
             <div className={styles.price__action}>
               <a
-                href="https://www.boxraiser.com/notre-histoire/#first_name"
+                href="https://www.ciklik.com/notre-histoire/#first_name"
                 className="button button--primary button--lg"
                 target="_blank"
               >