From a01e766e54876729fe01e18dc548013c60dd7250 Mon Sep 17 00:00:00 2001
From: Ben Merckx <ben@codeurs.be>
Date: Wed, 11 Oct 2023 12:23:16 +0200
Subject: [PATCH] Interim

---
 package.json                                 |  5 +++++
 src/dashboard/view/explorer/ExplorerItem.tsx |  1 +
 src/input.ts                                 |  1 +
 src/input/metadata/MetadataField.browser.tsx |  2 --
 src/input/metadata/MetadataField.tsx         |  6 +++---
 src/input/view.ts                            |  1 +
 src/input/view/View.browser.tsx              | 17 +++++++++++++++++
 src/input/view/View.ts                       | 12 ++++++++++++
 8 files changed, 40 insertions(+), 5 deletions(-)
 create mode 100644 src/input/view.ts
 create mode 100644 src/input/view/View.browser.tsx
 create mode 100644 src/input/view/View.ts

diff --git a/package.json b/package.json
index c28eec09e..3cf027130 100644
--- a/package.json
+++ b/package.json
@@ -203,6 +203,11 @@
       "browser": "./dist/input/text/TextField.browser.js",
       "default": "./dist/input/text/TextField.js"
     },
+    "./input/view/View": {
+      "worker": "./dist/input/view/View.js",
+      "browser": "./dist/input/view/View.browser.js",
+      "default": "./dist/input/view/View.js"
+    },
     "./picker/entry/EntryPicker": {
       "worker": "./dist/picker/entry/EntryPicker.js",
       "browser": "./dist/picker/entry/EntryPicker.browser.js",
diff --git a/src/dashboard/view/explorer/ExplorerItem.tsx b/src/dashboard/view/explorer/ExplorerItem.tsx
index a3c7b0d38..70825b3fc 100644
--- a/src/dashboard/view/explorer/ExplorerItem.tsx
+++ b/src/dashboard/view/explorer/ExplorerItem.tsx
@@ -77,6 +77,7 @@ export function ExplorerItem({
                 type="checkbox"
                 checked={isSelected}
                 onChange={() => {
+                  console.log('on select')
                   explorer.onSelect(entry)
                 }}
                 className={styles.root.checkbox()}
diff --git a/src/input.ts b/src/input.ts
index 5d2561b30..180aa21a1 100644
--- a/src/input.ts
+++ b/src/input.ts
@@ -14,6 +14,7 @@ export {richText} from 'alinea/input/richtext'
 export {select} from 'alinea/input/select'
 export {tab, tabs} from 'alinea/input/tabs'
 export {text} from 'alinea/input/text'
+export {view} from 'alinea/input/view'
 
 import {link} from 'alinea/input/link'
 export const entry = link.entry
diff --git a/src/input/metadata/MetadataField.browser.tsx b/src/input/metadata/MetadataField.browser.tsx
index c76b78de6..87bbe45f3 100644
--- a/src/input/metadata/MetadataField.browser.tsx
+++ b/src/input/metadata/MetadataField.browser.tsx
@@ -19,10 +19,8 @@ function MetadataInput({state, field}: MetadataInputProps) {
   const {label, options} = field[Field.Data]
   const parentState = state.parent()
   if (!parentState) throw new Error('Metadata field needs parent state')
-  console.log(parentState)
   const [titleSource = ''] = useInput<InputState.Scalar<string>>(
     parentState.child('title')
   )
-  console.log(titleSource)
   return <InputForm state={state} type={options.fields} border={false} />
 }
diff --git a/src/input/metadata/MetadataField.tsx b/src/input/metadata/MetadataField.tsx
index 1811b648f..8478deb01 100644
--- a/src/input/metadata/MetadataField.tsx
+++ b/src/input/metadata/MetadataField.tsx
@@ -31,11 +31,11 @@ export class MetadataField extends Field.Record<
 export function metadata(options: MetadataOptions = {}) {
   const fields = type('Fields', {
     title: text('Title', {width: 0.5}),
+    image: link.image('Image', {width: 0.5}),
     description: text('Description', {multiline: true}),
-    image: link.image('Image'),
     ...tabs(
       tab('Search engines', {
-        'search:title': text('Title'),
+        'search:title': text('Title', {width: 0.5}),
         'search:description': text('Description', {multiline: true}),
         [Meta]: {
           icon: IcRoundSearch
@@ -43,7 +43,7 @@ export function metadata(options: MetadataOptions = {}) {
       }),
 
       tab('Social media', {
-        'og:title': text('Title'),
+        'og:title': text('Title', {width: 0.5}),
         'og:description': text('Description', {multiline: true}),
         [Meta]: {
           icon: IcBaselineWifiTethering
diff --git a/src/input/view.ts b/src/input/view.ts
new file mode 100644
index 000000000..159136eca
--- /dev/null
+++ b/src/input/view.ts
@@ -0,0 +1 @@
+export * from 'alinea/input/view/View'
diff --git a/src/input/view/View.browser.tsx b/src/input/view/View.browser.tsx
new file mode 100644
index 000000000..eaca3c720
--- /dev/null
+++ b/src/input/view/View.browser.tsx
@@ -0,0 +1,17 @@
+import {Section} from 'alinea/core'
+import {InputState} from 'alinea/editor'
+import {ViewSection, view as createView} from './View.js'
+
+export * from './View.js'
+
+export const view = Section.provideView(View, createView)
+
+interface ViewProps {
+  state: InputState<any>
+  section: Section
+}
+
+function View({state, section}: ViewProps) {
+  const {children} = section[Section.Data] as ViewSection
+  return children
+}
diff --git a/src/input/view/View.ts b/src/input/view/View.ts
new file mode 100644
index 000000000..9813e41d0
--- /dev/null
+++ b/src/input/view/View.ts
@@ -0,0 +1,12 @@
+import {Field, SectionData, SectionDefinition, section} from 'alinea/core'
+import {ReactNode} from 'react'
+
+export class ViewSection implements SectionData {
+  definition: SectionDefinition = {}
+  fields: Record<string, Field> = {}
+  constructor(public children: ReactNode) {}
+}
+
+export function view(children: ReactNode) {
+  return section(new ViewSection(children))
+}