@octane-xplat/richtext 0.9.0 → 0.10.0

package/dist/native/RichTextEditor.android.js

@@ -1,7 +1,7 @@
-import { defineUniversalComponent, hookSlots, registerElement, universalPlan, universalValue, useCallback, useEffect, useRef } from "@nativescript-community/octane";
+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(10);
+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);
@@ -12,6 +12,7 @@ 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",
@@ -87,9 +88,10 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 	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$5);
+	}, [], _h$6);
 	const editor = () => host.current?.android;
 	const setEditable = (next) => {
 		const e = editor();
@@ -191,9 +193,8 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 			showKeyboard(e);
 		}
 		if (props.android) Object.assign(e, props.android);
-		props.bind?.(handle(e));
 		props.onReady?.();
-	}, [], _h$6);
+	}, [], _h$7);
 	useEffect(() => {
 		const e = editor();
 		if (!e || props.value === void 0) return;
@@ -204,14 +205,14 @@ var RichTextEditor = defineUniversalComponent("nativescript", function RichTextE
 		} finally {
 			applyingValue.current = false;
 		}
-	}, [props.value], _h$7);
+	}, [props.value], _h$8);
 	useEffect(() => {
 		setEditable(props.editable !== false);
-	}, [props.editable], _h$8);
+	}, [props.editable], _h$9);
 	useEffect(() => {
 		const e = editor();
 		if (e && props.placeholder !== void 0) e.setHint(props.placeholder);
-	}, [props.placeholder], _h$9);
+	}, [props.placeholder], _h$10);
 	return universalValue(__octaneUniversalPlan0, [
 		bindHost,
 		props.id,

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "f6769804-c57f-408a-9066-2cfebe36da4e",
+  "buildId": "ca3e4cfe-2095-45b7-8420-77a24704b7b4",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

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

@@ -1,6 +1,6 @@
 {
   "version": 1,
-  "buildId": "bd95f265-682a-446a-a284-1f3419b2fb06",
+  "buildId": "87e27032-9a72-48e8-857d-c8a8216a9331",
   "mode": "production",
   "capabilities": {
     "independentHydration": false

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@octane-xplat/richtext",
-  "version": "0.9.0",
-  "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",
@@ -29,7 +29,7 @@
   "exports": {
     ".": {
       "macos": {
-        "types": "./types/index.d.ts",
+        "types": "./types/index.macos.d.ts",
         "default": "./src/index.macos.ts"
       },
       "web": {
@@ -42,6 +42,14 @@
       },
       "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": {
@@ -50,7 +58,10 @@
   "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"
@@ -77,7 +88,17 @@
       "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"
+    "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/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}
+		/>
+	)
+}

package/src/RichTextEditor.android.tsrx

@@ -1,5 +1,5 @@
 /** @jsxImportSource @nativescript-community/octane */
-import { useCallback, useEffect, useRef } from 'octane'
+import { useImperativeHandle, useCallback, useEffect, useRef } from 'octane'
 import { View } from '@nativescript/core'
 import { registerElement } from '@nativescript-community/octane'
 import type { Attributes } from '@nativescript-community/octane/intrinsics'
@@ -96,6 +96,8 @@ export function RichTextEditor(props: RichTextEditorProps) @{
 
 	// Stable identity — an inline closure re-fires ref(null)/ref(v) per
 	// render, which would bounce host.current around the effects below.
+	useImperativeHandle(props.ref, () => handle(editor()), []);
+
 	const bindHost = useCallback((v: any) => {
 		host.current = v
 	}, [])
@@ -233,7 +235,6 @@ export function RichTextEditor(props: RichTextEditorProps) @{
 		}
 
 		if (props.android) Object.assign(e, props.android)
-		props.bind?.(handle(e))
 		props.onReady?.()
 	}, [])
 

package/src/RichTextEditor.windows.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RichTextEditorProps } from './types'
+
+export const supported = false
+
+/** Windows bring-up is deferred — renders the placeholder so a shared
+ *  screen still mounts. */
+export function RichTextEditor(props: RichTextEditorProps) @{
+	<label
+		id={props.id}
+		className={props.className}
+		style={props.style}
+		text="Rich text editing is not supported on Windows yet."
+	/>;
+}

package/src/browser-transport.web.ts

@@ -0,0 +1,119 @@
+const formats = [
+	'bold',
+	'italic',
+	'underline',
+	'strikethrough',
+	'code',
+	'blockquote',
+	'bulletList',
+	'orderedList',
+	'taskList',
+	'codeBlock',
+	'horizontalRule',
+	'highlight',
+	'subscript',
+	'superscript',
+	'paragraph',
+	'heading1',
+	'heading2',
+	'heading3',
+	'heading4',
+	'heading5',
+	'heading6',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'link',
+]
+
+/** Internal document transport. Engine handles never cross the WebKit boundary. */
+export function installEditorDocument(render: (props: any) => void) {
+	let handle: any = null
+	const pending: { method: string; args: any[] }[] = []
+	let selection = { start: 0, end: 0, active: [] as string[] }
+	const post = (event: string, extra: object = {}) => {
+		const packet = {
+			event,
+			html: handle?.getHTML() ?? '',
+			json: handle?.getJSON?.() ?? null,
+			focused: handle?.isFocused() ?? false,
+			selection,
+			...extra,
+		}
+
+		;(window as any).webkit.messageHandlers.editor.postMessage(JSON.stringify(packet))
+	}
+
+	const snapshot = (event: string) => {
+		setTimeout(() => {
+			if (!handle) {
+				return
+			}
+
+			selection = { ...selection, active: formats.filter((f) => handle.isActive(f)) }
+			post(event)
+		}, 0)
+	}
+
+	const command = (packet: { method: string; args: any[] }) => {
+		if (packet.method === 'props') {
+			render({ ...packet.args[0], ...callbacks })
+			if (handle) {
+				snapshot('snapshot')
+			}
+		} else if (!handle) {
+			pending.push(packet)
+		} else if (
+			[
+				'setHTML',
+				'setJSON',
+				'apply',
+				'linkTo',
+				'removeLink',
+				'undo',
+				'redo',
+				'focus',
+				'blur',
+			].includes(packet.method)
+		) {
+			handle[packet.method]?.(...packet.args)
+			snapshot('snapshot')
+		}
+	}
+
+	const callbacks = {
+		ref(next: any) {
+			if (!next || next === handle) {
+				return
+			}
+
+			handle = next
+			snapshot('ready')
+			for (const packet of pending.splice(0)) {
+				command(packet)
+			}
+		},
+		onChange: () => snapshot('change'),
+		onSelectionChange(next: typeof selection) {
+			selection = next
+			snapshot('selection')
+		},
+		onFocus: () => snapshot('focus'),
+		onBlur: () => snapshot('blur'),
+	}
+
+	;(window as any).__xplatEditorReceive = (serialized: string) => {
+		try {
+			command(JSON.parse(serialized))
+		} catch (error) {
+			post('error', { message: String(error) })
+		}
+	}
+
+	window.addEventListener('error', (event) => post('error', { message: event.message }))
+	window.addEventListener('unhandledrejection', (event) =>
+		post('error', { message: String(event.reason) }),
+	)
+
+	post('boot')
+}

package/src/host-session.macos.ts

@@ -0,0 +1,133 @@
+import type { RichTextEditorHandle, RichTextEditorProps, RichTextFormat } from './types'
+
+export interface EditorPacket {
+	event: string
+	html?: string
+	json?: any
+	selection?: { start: number; end: number; active: RichTextFormat[] }
+	focused?: boolean
+	message?: string
+}
+
+/** Internal transport adapter: synchronous getters read the last WebKit snapshot. */
+export function createEditorSession(
+	send: (packet: string) => void,
+	native: any,
+	readProps: () => RichTextEditorProps & {
+		onJSONChange?: (doc: any) => void
+		onJSONReady?: (ok: boolean) => void
+	},
+) {
+	let disposed = false
+	let ready = false
+	let html = ''
+	let json: any = null
+	let active: RichTextFormat[] = []
+	let focused = false
+	let pending: string[] = []
+	const command = (method: string, ...args: any[]) => {
+		if (disposed) {
+			return
+		}
+
+		const packet = JSON.stringify({ method, args })
+		if (ready) {
+			send(packet)
+		} else {
+			pending.push(packet)
+		}
+	}
+
+	const handle: RichTextEditorHandle & { getJSON(): any; setJSON(doc: any): void } = {
+		getHTML: () => html,
+		setHTML: (value) => command('setHTML', value),
+		getJSON: () => json,
+		setJSON: (doc) => command('setJSON', doc),
+		apply: (format) => command('apply', format),
+		linkTo: (url, anchor) => command('linkTo', url, anchor),
+		removeLink: () => command('removeLink'),
+		isActive: (format) => active.includes(format),
+		undo: () => command('undo'),
+		redo: () => command('redo'),
+		focus: () => command('focus'),
+		blur: () => command('blur'),
+		isFocused: () => focused,
+		native,
+	}
+
+	return {
+		handle,
+		update(props: object) {
+			command('props', props)
+		},
+		receive(serialized: string) {
+			if (disposed) {
+				return
+			}
+
+			const packet: EditorPacket = JSON.parse(serialized)
+			const props = readProps()
+			if (packet.html !== undefined) {
+				html = packet.html
+			}
+
+			if ('json' in packet) {
+				json = packet.json
+			}
+
+			if (packet.selection) {
+				active = packet.selection.active
+			}
+
+			if (packet.focused !== undefined) {
+				focused = packet.focused
+			}
+
+			switch (packet.event) {
+				case 'boot':
+					ready = true
+					for (const packet of pending) {
+						send(packet)
+					}
+
+					pending = []
+					break
+				case 'ready':
+					props.onJSONReady?.(true)
+					props.onReady?.()
+					break
+				case 'change':
+					props.onChange?.(html)
+					if (json) {
+						props.onJSONChange?.(json)
+					}
+
+					break
+				case 'selection':
+					if (packet.selection) {
+						props.onSelectionChange?.(packet.selection)
+					}
+
+					break
+				case 'focus':
+					props.onFocus?.()
+					break
+				case 'blur':
+					props.onBlur?.()
+					break
+				case 'error':
+					console.error('[macos-editor] ' + packet.message)
+					break
+			}
+		},
+		dispose() {
+			if (disposed) {
+				return
+			}
+
+			disposed = true
+			pending = []
+			native.dispose()
+		},
+	}
+}