@octane-xplat/richtext 0.0.1 → 0.10.0

package/src/RichTextEditor.android.tsrx

@@ -0,0 +1,282 @@
+/** @jsxImportSource @nativescript-community/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'
+import type {
+	RichTextEditorHandle,
+	RichTextEditorProps,
+	RichTextFormat,
+} from './types'
+
+/** `org.wordpress.aztec` arrives through the leaf's aar — there are no
+ *  generated typings for it, so every touch goes through `as any` at one
+ *  boundary instead of `declare const org` per call site. */
+const aztec = (globalThis as any).org?.wordpress?.aztec
+const androidText = (globalThis as any).android?.text
+const androidView = (globalThis as any).android?.view
+
+const FORMATS: Record<Exclude<RichTextFormat, 'link'>, () => any> = {
+	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,
+}
+
+const AZTEC_OF: [RichTextFormat, () => any][] = Object.entries(FORMATS) as any
+
+const formatOf = (format: RichTextFormat) =>
+	format === 'link' ? aztec.AztecTextFormat.FORMAT_LINK : FORMATS[format]()
+
+class AztecEditor extends View {
+	createNativeView() {
+		return new aztec.AztecText(this._context)
+	}
+}
+
+declare module '@nativescript-community/octane/intrinsics' {
+	interface NativeScriptElements {
+		xplatrichtext: Attributes<typeof AztecEditor>
+	}
+}
+
+registerElement('xplatrichtext', AztecEditor)
+
+export const supported = true
+
+/** Active formats at the selection, mapped back to facade spellings. */
+const activeFormats = (editor: any): RichTextFormat[] => {
+	const styles = editor.getAppliedStyles(
+		editor.getSelectionStart(),
+		editor.getSelectionEnd(),
+	)
+
+	const count = styles?.size?.() ?? 0
+	const active = new Set<any>()
+	for (let i = 0; i < count; i++) active.add(styles.get(i))
+
+	const out: RichTextFormat[] = []
+	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
+}
+
+/** WordPress Aztec surface on Android — a true Spannable-backed editor, not
+ *  a WebView. Content in/out is HTML (`fromHtml`/`toPlainHtml`); JSON
+ *  interchange lives one layer up in @octane-xplat/tiptap. */
+export function RichTextEditor(props: RichTextEditorProps) @{
+	const host = useRef<any>(null)
+	const lastEmitted = useRef<string | undefined>(undefined)
+	const applyingValue = useRef(false)
+	const keyListener = useRef<any>(null)
+	const emitTimer = useRef<any>(null)
+
+	// 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
+	}, [])
+
+	const editor = () => host.current?.android
+
+	const setEditable = (next: boolean) => {
+		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: any) => {
+		try {
+			const imm = e.getContext().getSystemService(
+				(globalThis as any).android.content.Context.INPUT_METHOD_SERVICE,
+			)
+
+			imm?.showSoftInput(e, androidView.inputmethod.InputMethodManager.SHOW_IMPLICIT)
+		} catch {}
+	}
+
+	const emitChange = () => {
+		const e = editor()
+		if (!e || 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: any): RichTextEditorHandle => ({
+		getHTML: () => e.toPlainHtml(false),
+		setHTML: (html: string) => {
+			applyingValue.current = true
+			try {
+				e.fromHtml(html, true)
+				lastEmitted.current = html
+			} finally {
+				applyingValue.current = false
+			}
+		},
+		apply: (format: RichTextFormat) => {
+			if (format === 'link') return
+			e.toggleFormatting(formatOf(format))
+			emitChange()
+		},
+		linkTo: (url: string, anchor?: string) => {
+			e.link(url, anchor ?? url, false)
+			emitChange()
+		},
+		removeLink: () => {
+			e.removeLink()
+			emitChange()
+		},
+		isActive: (format: RichTextFormat) => {
+			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: number, end: number) =>
+					props.onSelectionChange?.({
+						start,
+						end,
+						active: activeFormats(e),
+					}),
+			}),
+		)
+
+		e.addTextChangedListener(
+			new androidText.TextWatcher({
+				beforeTextChanged: () => {},
+				onTextChanged: () => {},
+				afterTextChanged: () => emitChange(),
+			}),
+		)
+
+		e.setOnFocusChangeListener(
+			new androidView.View.OnFocusChangeListener({
+				onFocusChange: (_v: any, focused: boolean) =>
+					focused ? props.onFocus?.() : props.onBlur?.(),
+			}),
+		)
+
+		if (props.placeholder !== undefined) e.setHint(props.placeholder)
+		setEditable(props.editable !== false)
+
+		if (props.value !== undefined) {
+			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?.()
+	}, [])
+
+	// `value` lands like a controlled prop, minus the loop: text the editor
+	// emitted through onChange is never pushed back; any other change is an
+	// external reset (and resets Aztec's undo stack, like PM setContent).
+	useEffect(() => {
+		const e = editor()
+		if (!e || props.value === undefined) return
+		if (props.value === lastEmitted.current) return
+		applyingValue.current = true
+		try {
+			e.fromHtml(props.value, true)
+		} finally {
+			applyingValue.current = false
+		}
+	}, [props.value])
+
+	useEffect(() => {
+		setEditable(props.editable !== false)
+	}, [props.editable])
+
+	useEffect(() => {
+		const e = editor()
+		if (e && props.placeholder !== undefined) e.setHint(props.placeholder)
+	}, [props.placeholder])
+
+	<xplatrichtext
+		ref={bindHost}
+		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}
+	/>;
+}

package/src/RichTextEditor.ios.tsrx

@@ -0,0 +1,15 @@
+/** @jsxImportSource @nativescript-community/octane */
+import type { RichTextEditorProps } from './types'
+
+export const supported = false
+
+/** iOS bring-up is deferred — the Swift facade over Aztec-iOS lands in a
+ *  follow-up. 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 iOS yet."
+	/>;
+}

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()
+		},
+	}
+}

package/src/index.macos.ts

@@ -0,0 +1,4 @@
+export { RichTextEditor } from './Editor.macos'
+/** The AppKit/WKWebView backend is implemented. */
+export const supported = true
+export type * from './types'

package/src/index.ts

@@ -0,0 +1,5 @@
+// Keep this relative import extensionless so the NativeScript resolver picks
+// the Android (Aztec) or iOS (stub until the Swift facade lands) component
+// for the current build target.
+export { RichTextEditor, supported } from './RichTextEditor'
+export type * from './types'

package/src/index.web.ts

@@ -0,0 +1,11 @@
+import type { RichTextEditorProps } from './types'
+
+export const supported = false
+
+/** Web routes through @octane-xplat/tiptap — this leaf only exists for the
+ *  native (Aztec) surface. */
+export function RichTextEditor(_props: RichTextEditorProps): null {
+	return null
+}
+
+export type * from './types'

package/src/types.ts

@@ -0,0 +1,100 @@
+import type { Octane } from 'octane/jsx-runtime'
+
+/** Android uses WordPress Aztec; AppKit uses StarterKit in WKWebView.
+ * iOS is stubbed. Web/Windows use the tiptap facade instead of this leaf. */
+export type RichTextFormat =
+	| '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'
+
+export interface RichTextEditorHandle {
+	/** Serialized document HTML (Aztec's "plain" HTML — no contenteditable
+	 *  markup). */
+	/** AppKit: returns the latest WebKit snapshot; commands are asynchronous. */
+	getHTML(): string
+	/** Replace the document. Android resets Aztec history; AppKit uses engine history. */
+	setHTML(html: string): void
+	/** Toggle a format at the current selection. `link` needs
+	 *  `linkTo(url, anchor)` instead. */
+	apply(format: RichTextFormat): void
+	/** Insert or re-target a link over the current selection. */
+	linkTo(url: string, anchor?: string): void
+	removeLink(): void
+	/** Formats active at the selection — powers toolbar highlight state. */
+	isActive(format: RichTextFormat): boolean
+	/** Android: Aztec's history batches keyboard input only — format
+	 *  toggles and programmatic edits do not register. */
+	undo(): void
+	redo(): void
+	focus(): void
+	blur(): void
+	isFocused(): boolean
+	/** The platform surface — `AztecText` on Android. */
+	/** AppKit: the XplatEditorHost transport, not the browser engine instance. */
+	native: any
+}
+
+export interface RichTextSelectionChange {
+	start: number
+	end: number
+	/** Formats active at the caret/range, in facade spellings. */
+	active: RichTextFormat[]
+}
+
+export interface RichTextEditorProps {
+	id?: string
+	className?: string
+	style?: any
+	/** Initial document HTML. Re-applied only when the string changes
+	 *  externally — text the editor emitted back through `onChange` is never
+	 *  re-pushed, so typing doesn't reparse the document. */
+	value?: string
+	placeholder?: string
+	editable?: boolean
+	autofocus?: boolean
+	onReady?: () => void
+	onChange?: (html: string) => void
+	onSelectionChange?: (event: RichTextSelectionChange) => void
+	onFocus?: () => void
+	onBlur?: () => void
+	/** Imperative handle — fires once when the native editor exists. */
+	ref?: Octane.Ref<RichTextEditorHandle>
+	/** Per-platform escape bag — properties are assigned onto the native
+	 *  `AztecText` after the leaf's own props. */
+	android?: Record<string, any>
+	ios?: Record<string, any>
+	// NativeScript layout-child attributes the driver reads on this element.
+	row?: number | string
+	col?: number | string
+	rowSpan?: number
+	colSpan?: number
+	dock?: 'left' | 'top' | 'right' | 'bottom'
+	left?: number
+	top?: number
+	flexGrow?: number
+	flexShrink?: number
+	alignSelf?: 'auto' | 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'
+	order?: number
+}

package/types/browser-transport.d.ts

@@ -0,0 +1,2 @@
+/** Internal WebKit document transport installer. */
+export declare function installEditorDocument(render: (props: any) => void): void

package/types/index.d.ts

@@ -0,0 +1,6 @@
+import type { UniversalComponent } from 'octane/universal'
+import type { RichTextEditorProps } from './types'
+
+export declare const RichTextEditor: UniversalComponent<RichTextEditorProps>
+export declare const supported: boolean
+export type * from './types'