@octane-xplat/richtext 0.0.1 → 0.10.0

package/dist/native/RichTextEditor.android.js

@@ -0,0 +1,235 @@
+import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useCallback, useEffect, useImperativeHandle, useRef } from "@nativescript-community/octane";
+import { View } from "@nativescript/core";
+//#region src/RichTextEditor.android.tsrx
+var _hs$ = /* @__PURE__ */ hookSlots(11);
+var _h$0 = /* @__PURE__ */ Symbol(_hs$);
+var _h$1 = /* @__PURE__ */ Symbol(_hs$ + 1);
+var _h$2 = /* @__PURE__ */ Symbol(_hs$ + 2);
+var _h$3 = /* @__PURE__ */ Symbol(_hs$ + 3);
+var _h$4 = /* @__PURE__ */ Symbol(_hs$ + 4);
+var _h$5 = /* @__PURE__ */ Symbol(_hs$ + 5);
+var _h$6 = /* @__PURE__ */ Symbol(_hs$ + 6);
+var _h$7 = /* @__PURE__ */ Symbol(_hs$ + 7);
+var _h$8 = /* @__PURE__ */ Symbol(_hs$ + 8);
+var _h$9 = /* @__PURE__ */ Symbol(_hs$ + 9);
+var _h$10 = /* @__PURE__ */ Symbol(_hs$ + 10);
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "xplatrichtext",
+	"bindings": [
+		["ref", 0],
+		["id", 1],
+		["className", 2],
+		["style", 3],
+		["row", 4],
+		["col", 5],
+		["rowSpan", 6],
+		["colSpan", 7],
+		["dock", 8],
+		["left", 9],
+		["top", 10],
+		["flexGrow", 11],
+		["flexShrink", 12],
+		["alignSelf", 13],
+		["order", 14]
+	]
+});
+var aztec = globalThis.org?.wordpress?.aztec;
+var androidText = globalThis.android?.text;
+var androidView = globalThis.android?.view;
+var FORMATS = {
+	bold: () => aztec.AztecTextFormat.FORMAT_BOLD,
+	italic: () => aztec.AztecTextFormat.FORMAT_ITALIC,
+	underline: () => aztec.AztecTextFormat.FORMAT_UNDERLINE,
+	strikethrough: () => aztec.AztecTextFormat.FORMAT_STRIKETHROUGH,
+	code: () => aztec.AztecTextFormat.FORMAT_CODE,
+	blockquote: () => aztec.AztecTextFormat.FORMAT_QUOTE,
+	bulletList: () => aztec.AztecTextFormat.FORMAT_UNORDERED_LIST,
+	orderedList: () => aztec.AztecTextFormat.FORMAT_ORDERED_LIST,
+	taskList: () => aztec.AztecTextFormat.FORMAT_TASK_LIST,
+	codeBlock: () => aztec.AztecTextFormat.FORMAT_PREFORMAT,
+	horizontalRule: () => aztec.AztecTextFormat.FORMAT_HORIZONTAL_RULE,
+	highlight: () => aztec.AztecTextFormat.FORMAT_MARK,
+	subscript: () => aztec.AztecTextFormat.FORMAT_SUBSCRIPT,
+	superscript: () => aztec.AztecTextFormat.FORMAT_SUPERSCRIPT,
+	paragraph: () => aztec.AztecTextFormat.FORMAT_PARAGRAPH,
+	heading1: () => aztec.AztecTextFormat.FORMAT_HEADING_1,
+	heading2: () => aztec.AztecTextFormat.FORMAT_HEADING_2,
+	heading3: () => aztec.AztecTextFormat.FORMAT_HEADING_3,
+	heading4: () => aztec.AztecTextFormat.FORMAT_HEADING_4,
+	heading5: () => aztec.AztecTextFormat.FORMAT_HEADING_5,
+	heading6: () => aztec.AztecTextFormat.FORMAT_HEADING_6,
+	alignLeft: () => aztec.AztecTextFormat.FORMAT_ALIGN_LEFT,
+	alignCenter: () => aztec.AztecTextFormat.FORMAT_ALIGN_CENTER,
+	alignRight: () => aztec.AztecTextFormat.FORMAT_ALIGN_RIGHT
+};
+var AZTEC_OF = Object.entries(FORMATS);
+var formatOf = (format) => format === "link" ? aztec.AztecTextFormat.FORMAT_LINK : FORMATS[format]();
+var AztecEditor = class extends View {
+	createNativeView() {
+		return new aztec.AztecText(this._context);
+	}
+};
+registerElement("xplatrichtext", AztecEditor);
+var supported = true;
+var activeFormats = (editor) => {
+	const styles = editor.getAppliedStyles(editor.getSelectionStart(), editor.getSelectionEnd());
+	const count = styles?.size?.() ?? 0;
+	const active = /* @__PURE__ */ new Set();
+	for (let i = 0; i < count; i++) active.add(styles.get(i));
+	const out = [];
+	for (const [name, get] of AZTEC_OF) if (active.has(get())) out.push(name);
+	if (active.has(aztec.AztecTextFormat.FORMAT_LINK)) out.push("link");
+	return out;
+};
+var RichTextEditor = defineUniversalComponent("nativescript", function RichTextEditor(props) {
+	const host = useRef(null, _h$0);
+	const lastEmitted = useRef(void 0, _h$1);
+	const applyingValue = useRef(false, _h$2);
+	const keyListener = useRef(null, _h$3);
+	const emitTimer = useRef(null, _h$4);
+	useImperativeHandle(props.ref, () => handle(editor()), [], _h$5);
+	const bindHost = useCallback((v) => {
+		host.current = v;
+	}, [], _h$6);
+	const editor = () => host.current?.android;
+	const setEditable = (next) => {
+		const e = editor();
+		if (!e) return;
+		if (keyListener.current == null) keyListener.current = e.getKeyListener();
+		if (next) {
+			e.setKeyListener(keyListener.current);
+			e.setFocusable(true);
+			e.setCursorVisible(true);
+		} else {
+			e.setKeyListener(null);
+			e.setFocusable(false);
+			e.setCursorVisible(false);
+		}
+	};
+	const showKeyboard = (e) => {
+		try {
+			e.getContext().getSystemService(globalThis.android.content.Context.INPUT_METHOD_SERVICE)?.showSoftInput(e, androidView.inputmethod.InputMethodManager.SHOW_IMPLICIT);
+		} catch {}
+	};
+	const emitChange = () => {
+		if (!editor() || applyingValue.current) return;
+		clearTimeout(emitTimer.current);
+		emitTimer.current = setTimeout(() => {
+			const current = editor();
+			if (!current || applyingValue.current) return;
+			const html = current.toPlainHtml(false);
+			lastEmitted.current = html;
+			props.onChange?.(html);
+		}, 150);
+	};
+	const handle = (e) => ({
+		getHTML: () => e.toPlainHtml(false),
+		setHTML: (html) => {
+			applyingValue.current = true;
+			try {
+				e.fromHtml(html, true);
+				lastEmitted.current = html;
+			} finally {
+				applyingValue.current = false;
+			}
+		},
+		apply: (format) => {
+			if (format === "link") return;
+			e.toggleFormatting(formatOf(format));
+			emitChange();
+		},
+		linkTo: (url, anchor) => {
+			e.link(url, anchor ?? url, false);
+			emitChange();
+		},
+		removeLink: () => {
+			e.removeLink();
+			emitChange();
+		},
+		isActive: (format) => {
+			const applied = e.getAppliedStyles(e.getSelectionStart(), e.getSelectionEnd());
+			const count = applied?.size?.() ?? 0;
+			const target = formatOf(format);
+			for (let i = 0; i < count; i++) if (applied.get(i) === target) return true;
+			return false;
+		},
+		undo: () => e.undo(),
+		redo: () => e.redo(),
+		focus: () => {
+			e.requestFocus();
+			showKeyboard(e);
+		},
+		blur: () => e.clearFocus(),
+		isFocused: () => e.isFocused(),
+		native: e
+	});
+	useEffect(() => {
+		const e = editor();
+		if (!e || !aztec) return;
+		e.setOnSelectionChangedListener(new aztec.AztecText.OnSelectionChangedListener({ onSelectionChanged: (start, end) => props.onSelectionChange?.({
+			start,
+			end,
+			active: activeFormats(e)
+		}) }));
+		e.addTextChangedListener(new androidText.TextWatcher({
+			beforeTextChanged: () => {},
+			onTextChanged: () => {},
+			afterTextChanged: () => emitChange()
+		}));
+		e.setOnFocusChangeListener(new androidView.View.OnFocusChangeListener({ onFocusChange: (_v, focused) => focused ? props.onFocus?.() : props.onBlur?.() }));
+		if (props.placeholder !== void 0) e.setHint(props.placeholder);
+		setEditable(props.editable !== false);
+		if (props.value !== void 0) {
+			applyingValue.current = true;
+			try {
+				e.fromHtml(props.value, true);
+			} finally {
+				applyingValue.current = false;
+			}
+		}
+		if (props.autofocus) {
+			e.requestFocus();
+			showKeyboard(e);
+		}
+		if (props.android) Object.assign(e, props.android);
+		props.onReady?.();
+	}, [], _h$7);
+	useEffect(() => {
+		const e = editor();
+		if (!e || props.value === void 0) return;
+		if (props.value === lastEmitted.current) return;
+		applyingValue.current = true;
+		try {
+			e.fromHtml(props.value, true);
+		} finally {
+			applyingValue.current = false;
+		}
+	}, [props.value], _h$8);
+	useEffect(() => {
+		setEditable(props.editable !== false);
+	}, [props.editable], _h$9);
+	useEffect(() => {
+		const e = editor();
+		if (e && props.placeholder !== void 0) e.setHint(props.placeholder);
+	}, [props.placeholder], _h$10);
+	return universalValue(__octaneUniversalPlan0, [
+		bindHost,
+		props.id,
+		props.className,
+		props.style,
+		props.row,
+		props.col,
+		props.rowSpan,
+		props.colSpan,
+		props.dock,
+		props.left,
+		props.top,
+		props.flexGrow,
+		props.flexShrink,
+		props.alignSelf,
+		props.order
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { RichTextEditor, supported };

package/dist/native/RichTextEditor.ios.js

@@ -0,0 +1,22 @@
+import { defineUniversalComponent, universalPlan, universalValue } from "@nativescript-community/octane";
+//#region src/RichTextEditor.ios.tsrx
+var __octaneUniversalPlan0 = universalPlan("nativescript", {
+	"kind": "host",
+	"type": "label",
+	"props": { "text": "Rich text editing is not supported on iOS yet." },
+	"bindings": [
+		["id", 0],
+		["className", 1],
+		["style", 2]
+	]
+});
+var supported = false;
+var RichTextEditor = defineUniversalComponent("nativescript", function RichTextEditor(props) {
+	return universalValue(__octaneUniversalPlan0, [
+		props.id,
+		props.className,
+		props.style
+	]);
+}, { "module": "@nativescript-community/octane" });
+//#endregion
+export { RichTextEditor, supported };

package/dist/native/index.js

@@ -0,0 +1,2 @@
+import { RichTextEditor, supported } from "./RichTextEditor";
+export { RichTextEditor, supported };

package/dist/native/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "ca3e4cfe-2095-45b7-8420-77a24704b7b4",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/dist/web/index.js

@@ -0,0 +1,9 @@
+//#region src/index.web.ts
+var supported = false;
+/** Web routes through @octane-xplat/tiptap — this leaf only exists for the
+*  native (Aztec) surface. */
+function RichTextEditor(_props) {
+	return null;
+}
+//#endregion
+export { RichTextEditor, supported };

package/dist/web/octane-client-build.json

@@ -0,0 +1,8 @@
+{
+  "version": 1,
+  "buildId": "87e27032-9a72-48e8-857d-c8a8216a9331",
+  "mode": "production",
+  "capabilities": {
+    "independentHydration": false
+  }
+}

package/package.json

@@ -1,19 +1,104 @@
 {
   "name": "@octane-xplat/richtext",
-  "version": "0.0.1",
-  "description": "Native rich-text editing leaf for Octane xplat — WordPress Aztec on Android (iOS stubbed, deferred)",
+  "version": "0.10.0",
+  "description": "Native rich-text editing leaf for Octane xplat — Android Aztec and AppKit WKWebView StarterKit",
+  "keywords": [
+    "android",
+    "aztec",
+    "cross-platform",
+    "editor",
+    "octane",
+    "rich-text",
+    "richtext",
+    "xplat"
+  ],
+  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/richtext",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/octane-xplat/octane-xplat.git",
+    "url": "https://github.com/octane-xplat/octane-xplat",
     "directory": "packages/richtext"
   },
-  "homepage": "https://github.com/octane-xplat/octane-xplat/tree/main/packages/richtext",
-  "main": "./index.js",
-  "types": "./index.d.ts",
   "files": [
-    "README.md",
-    "index.js",
-    "index.d.ts"
-  ]
-}
+    "dist",
+    "types",
+    "src",
+    "platforms"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "macos": {
+        "types": "./types/index.macos.d.ts",
+        "default": "./src/index.macos.ts"
+      },
+      "web": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/web/index.js"
+      },
+      "native": {
+        "types": "./types/index.d.ts",
+        "default": "./dist/native/index.js"
+      },
+      "types": "./types/index.d.ts",
+      "default": "./dist/native/index.js"
+    },
+    "./macos-host": {
+      "types": "./types/macos-host.d.ts",
+      "default": "./src/NativeEditor.macos.tsx"
+    },
+    "./browser-transport": {
+      "types": "./types/browser-transport.d.ts",
+      "default": "./src/browser-transport.web.ts"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@nativescript-community/octane": "0.2.4",
+    "@nativescript/core": "9.1.2",
+    "@octane-xplat/macos-renderer": "0.10.0",
+    "@octanejs/vite-plugin": "0.1.61",
+    "@tiptap/core": "3.28.0",
+    "@tiptap/starter-kit": "3.28.0",
+    "octane": "0.6.3",
+    "typescript": "5.9.3",
+    "vite": "8.3.0"
+  },
+  "peerDependencies": {
+    "@nativescript-community/octane": ">=0.2.1 <1",
+    "@nativescript/core": ">=9.1.0 <10",
+    "octane": ">=0.6.3 <1"
+  },
+  "peerDependenciesMeta": {
+    "@nativescript-community/octane": {
+      "optional": true
+    },
+    "@nativescript/core": {
+      "optional": true
+    },
+    "octane": {
+      "optional": true
+    }
+  },
+  "nativescript": {
+    "platforms": {
+      "android": "9.1.0",
+      "ios": "9.1.0"
+    }
+  },
+  "xplat": {
+    "macos": {
+      "frameworks": [
+        "WebKit"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "vite build && vite build --mode native && tsc -p tsconfig.types.json && node ../../scripts/check-native-dist.mjs && node build-browser.mjs",
+    "test": "node --test test/*.test.mjs",
+    "test:macos": "node test/verify-wk.mjs",
+    "test:packed": "node test/packed-consumer.mjs"
+  }
+}

package/platforms/android/include.gradle

@@ -0,0 +1,7 @@
+repositories {
+	maven { url "https://a8c-libs.s3.amazonaws.com/android" }
+}
+
+dependencies {
+	implementation "org.wordpress:aztec:v2.1.7"
+}

package/platforms/macos/include/XplatEditorHost.h

@@ -0,0 +1 @@
+#import <AppKit/AppKit.h>

package/platforms/macos/src/XplatEditorHost.swift

@@ -0,0 +1,63 @@
+import AppKit
+import WebKit
+
+// One isolated, local document per editor. No general app/service bridge.
+private final class EditorChannel: NSObject, WKScriptMessageHandler, WKNavigationDelegate {
+    var dispatch: ((String) -> Void)?
+    func userContentController(_: WKUserContentController, didReceive message: WKScriptMessage) {
+        guard message.frameInfo.isMainFrame, let body = message.body as? String else { return }
+        dispatch?(body)
+    }
+    func webView(_: WKWebView, decidePolicyFor action: WKNavigationAction,
+                 decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
+        decisionHandler(action.request.url?.absoluteString == "about:blank" ? .allow : .cancel)
+    }
+}
+
+@objc(XplatEditorHost)
+public final class XplatEditorHost: NSObject {
+    private let webView: WKWebView
+    private let channel = EditorChannel()
+    private var disposed = false
+    @objc public override init() {
+        let config = WKWebViewConfiguration()
+        config.websiteDataStore = .nonPersistent()
+        webView = WKWebView(frame: .zero, configuration: config)
+        super.init()
+        config.userContentController.add(channel, name: "editor")
+        webView.navigationDelegate = channel
+        webView.autoresizingMask = [.width, .height]
+    }
+    @objc public func attach(to parent: NSView) {
+        webView.frame = parent.bounds
+        parent.addSubview(webView)
+    }
+    @objc public func installDispatcher(_ dispatch: @escaping (String) -> Void) {
+        channel.dispatch = dispatch
+    }
+    @objc public func load(_ html: String) {
+        guard !disposed else { return }
+        webView.loadHTMLString(html, baseURL: nil)
+    }
+    @objc public func deliver(_ packet: String) {
+        guard !disposed,
+              let data = try? JSONSerialization.data(withJSONObject: [packet]),
+              let literal = String(data: data, encoding: .utf8) else { return }
+        webView.evaluateJavaScript("window.__xplatEditorReceive?.(\(literal)[0])") { [weak self] _, error in
+            if let error {
+                let body = ["event": "error", "message": error.localizedDescription]
+                if let data = try? JSONSerialization.data(withJSONObject: body),
+                   let text = String(data: data, encoding: .utf8) { self?.channel.dispatch?(text) }
+            }
+        }
+    }
+    @objc public func dispose() {
+        guard !disposed else { return }
+        disposed = true
+        channel.dispatch = nil
+        webView.stopLoading()
+        webView.configuration.userContentController.removeScriptMessageHandler(forName: "editor")
+        webView.navigationDelegate = nil
+        webView.removeFromSuperview()
+    }
+}

package/src/BrowserEditor.web.ts

@@ -0,0 +1,107 @@
+import { Editor } from '@tiptap/core'
+import StarterKit from '@tiptap/starter-kit'
+import { installEditorDocument } from './browser-transport.web'
+
+let editor: Editor | undefined
+let current: any
+let lastHTML: string | undefined
+let lastJSON: string | undefined
+let lastHTMLInput: string | undefined
+const command: Record<string, (chain: any) => any> = {
+	bold: (c) => c.toggleBold(),
+	italic: (c) => c.toggleItalic(),
+	underline: (c) => c.toggleUnderline(),
+	strikethrough: (c) => c.toggleStrike(),
+	code: (c) => c.toggleCode(),
+	blockquote: (c) => c.toggleBlockquote(),
+	bulletList: (c) => c.toggleBulletList(),
+	orderedList: (c) => c.toggleOrderedList(),
+	codeBlock: (c) => c.toggleCodeBlock(),
+	horizontalRule: (c) => c.setHorizontalRule(),
+	paragraph: (c) => c.setParagraph(),
+}
+
+for (let level = 1; level <= 6; level++) {
+	command['heading' + level] = (c) => c.toggleHeading({ level })
+}
+
+installEditorDocument((props) => {
+	current = props
+	if (!editor) {
+		const element = document.createElement('div')
+		document.body.append(element)
+		editor = new Editor({
+			element,
+			extensions: [StarterKit],
+			content: props.value ?? '',
+			editable: props.editable !== false,
+			autofocus: props.autofocus ?? false,
+			onUpdate: ({ editor: e }) => {
+				lastHTML = e.getHTML()
+				current.onChange?.(lastHTML)
+			},
+			onSelectionUpdate: ({ editor: e }) =>
+				current.onSelectionChange?.({
+					start: e.state.selection.from,
+					end: e.state.selection.to,
+					active: [],
+				}),
+			onFocus: () => current.onFocus?.(),
+			onBlur: () => current.onBlur?.(),
+		})
+
+		lastHTMLInput = JSON.stringify([props.json !== undefined, props.value])
+		const e = editor
+		props.ref({
+			getHTML: () => e.getHTML(),
+			setHTML: (html: string) => e.commands.setContent(html),
+			getJSON: () => e.getJSON(),
+			setJSON: (doc: any) => e.commands.setContent(doc),
+			apply: (format: string) => {
+				command[format]?.(e.chain().focus()).run()
+			},
+			linkTo: (url: string, anchor?: string) =>
+				anchor
+					? e
+							.chain()
+							.focus()
+							.insertContent({
+								type: 'text',
+								text: anchor,
+								marks: [{ type: 'link', attrs: { href: url } }],
+							})
+							.run()
+					: e.chain().focus().extendMarkRange('link').setLink({ href: url }).run(),
+			removeLink: () => e.chain().focus().unsetLink().run(),
+			isActive: (format: string) =>
+				format.startsWith('heading')
+					? e.isActive('heading', { level: Number(format.slice(7)) })
+					: e.isActive(format === 'strikethrough' ? 'strike' : format),
+			undo: () => e.commands.undo(),
+			redo: () => e.commands.redo(),
+			focus: () => e.commands.focus(),
+			blur: () => e.commands.blur(),
+			isFocused: () => e.isFocused,
+		})
+	}
+
+	if (props.json !== undefined) {
+		const stamp = JSON.stringify(props.json)
+		if (stamp !== lastJSON && stamp !== JSON.stringify(editor.getJSON())) {
+			editor.commands.setContent(props.json)
+		}
+
+		lastJSON = stamp
+	} else {
+		const stamp = JSON.stringify([false, props.value])
+		if (stamp !== lastHTMLInput && props.value !== undefined && props.value !== lastHTML) {
+			editor.commands.setContent(props.value)
+		}
+
+		lastHTMLInput = stamp
+	}
+
+	editor.setEditable(props.editable !== false)
+	editor.view.dom.dataset.placeholder = props.placeholder ?? ''
+	editor.view.dom.setAttribute('aria-label', props.placeholder ?? 'Rich text editor')
+})

package/src/Editor.macos.tsx

@@ -0,0 +1,9 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import type { RichTextEditorProps } from './types'
+import browser from '../dist/macos/browser.js'
+import { NativeEditor } from './NativeEditor.macos'
+
+/** AppKit mounts the local editor engine in WKWebView. */
+export function RichTextEditor(props: RichTextEditorProps) {
+	return <NativeEditor {...props} browser={browser} />
+}

package/src/NativeEditor.macos.tsx

@@ -0,0 +1,81 @@
+/** @jsxImportSource @octane-xplat/macos-renderer */
+import { useCallback, useEffect, useImperativeHandle, useRef, useState } from 'octane'
+import type { RichTextEditorProps } from './types'
+import { createEditorSession } from './host-session.macos'
+
+declare const XplatEditorHost: { alloc(): { init(): any } }
+
+type HostProps = RichTextEditorProps & {
+	browser: string
+	json?: any
+	onJSONReady?: (ready: boolean) => void
+	onJSONChange?: (doc: any) => void
+}
+
+/** Internal shared AppKit/WKWebView surface, owned by the editor leaf. */
+export function NativeEditor(props: HostProps) {
+	const latest = useRef(props)
+	latest.current = props
+	const session = useRef<ReturnType<typeof createEditorSession> | null>(null)
+	const [handle, setHandle] = useState<any>(null)
+	useImperativeHandle(props.ref, () => handle, [handle])
+	const attach = useCallback((parent: any) => {
+		session.current?.dispose()
+		session.current = null
+		if (!parent) {
+			setHandle(null)
+			return
+		}
+
+		const native = XplatEditorHost.alloc().init()
+		const next = createEditorSession(
+			(packet) => native.deliver(packet),
+			native,
+			() => latest.current,
+		)
+
+		session.current = next
+		native.installDispatcher((packet: string) => next.receive(packet))
+		native.attachTo(parent)
+		native.load(props.browser)
+		setHandle(next.handle)
+	}, [])
+
+	useEffect(() => {
+		session.current?.update({
+			value: props.value,
+			json: props.json,
+			placeholder: props.placeholder,
+			editable: props.editable,
+			autofocus: props.autofocus,
+		})
+	}, [handle, props.value, props.json, props.placeholder, props.editable, props.autofocus])
+
+	useEffect(
+		() => () => {
+			session.current?.dispose()
+			session.current = null
+		},
+		[],
+	)
+
+	return (
+		<flexboxlayout
+			id={props.id}
+			className={props.className}
+			style={props.style}
+			row={props.row}
+			col={props.col}
+			rowSpan={props.rowSpan}
+			colSpan={props.colSpan}
+			dock={props.dock}
+			left={props.left}
+			top={props.top}
+			flexGrow={props.flexGrow}
+			flexShrink={props.flexShrink}
+			alignSelf={props.alignSelf}
+			order={props.order}
+			ref={attach}
+		/>
+	)
+}