@aster-editor/angular 0.0.0-stage → 0.4.1

package/fesm2022/aster-editor-angular.mjs

@@ -0,0 +1,624 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, InjectionToken, afterNextRender, computed, effect, forwardRef, inject, input, makeEnvironmentProviders, output, signal, untracked, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR } from "@angular/forms";
+import { createAster } from "@aster-editor/ui";
+const ASTER_CONFIG = new InjectionToken("ASTER_CONFIG");
+function provideAster(config) {
+	return makeEnvironmentProviders([{
+		provide: ASTER_CONFIG,
+		useValue: config
+	}]);
+}
+const ASTER_UPLOAD_HANDLER = new InjectionToken("ASTER_UPLOAD_HANDLER");
+function setOrRemoveAttribute(element, name, value) {
+	if (value === void 0 || value === "") element.removeAttribute(name);
+	else element.setAttribute(name, value);
+}
+function sameNames(a, b) {
+	return a.length === b.length && a.every((name, index) => name === b[index]);
+}
+var AsterEditorComponent = class AsterEditorComponent {
+	toolbar = input(void 0, ...ngDevMode ? [{ debugName: "toolbar" }] : /* istanbul ignore next */ []);
+	theme = input(void 0, ...ngDevMode ? [{ debugName: "theme" }] : /* istanbul ignore next */ []);
+	locale = input(void 0, ...ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []);
+	placeholder = input(void 0, ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	readonly = input(void 0, ...ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []);
+	config = input({}, ...ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []);
+	wordPaste = input(true, ...ngDevMode ? [{ debugName: "wordPaste" }] : /* istanbul ignore next */ []);
+	ariaLabel = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []);
+	ariaLabelledBy = input(void 0, ...ngDevMode ? [{ debugName: "ariaLabelledBy" }] : /* istanbul ignore next */ []);
+	variables = input(void 0, ...ngDevMode ? [{ debugName: "variables" }] : /* istanbul ignore next */ []);
+	variableValues = input(void 0, ...ngDevMode ? [{ debugName: "variableValues" }] : /* istanbul ignore next */ []);
+	variableResolver = input(void 0, ...ngDevMode ? [{ debugName: "variableResolver" }] : /* istanbul ignore next */ []);
+	allowUnknownVariables = input(void 0, ...ngDevMode ? [{ debugName: "allowUnknownVariables" }] : /* istanbul ignore next */ []);
+	variableSuggestion = input(void 0, ...ngDevMode ? [{ debugName: "variableSuggestion" }] : /* istanbul ignore next */ []);
+	ready = output();
+	changed = output();
+	focused = output();
+	blurred = output();
+	variablesChanged = output();
+	editorState = signal(null, ...ngDevMode ? [{ debugName: "editorState" }] : /* istanbul ignore next */ []);
+	editor = this.editorState.asReadonly();
+	variableNamesState = signal([], {
+		...ngDevMode ? { debugName: "variableNamesState" } : /* istanbul ignore next */ {},
+		equal: sameNames
+	});
+	variableNames = this.variableNamesState.asReadonly();
+	host = viewChild.required("host", ...ngDevMode ? [{ debugName: "host" }] : /* istanbul ignore next */ []);
+	globalConfig = inject(ASTER_CONFIG, { optional: true });
+	uploadHandler = inject(ASTER_UPLOAD_HANDLER, { optional: true });
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	mergedConfig = computed(() => ({
+		...this.globalConfig ?? {},
+		...this.config()
+	}), ...ngDevMode ? [{ debugName: "mergedConfig" }] : /* istanbul ignore next */ []);
+	resolvedToolbar = computed(() => this.toolbar() ?? this.mergedConfig().toolbar ?? "standard", ...ngDevMode ? [{ debugName: "resolvedToolbar" }] : /* istanbul ignore next */ []);
+	resolvedTheme = computed(() => this.theme() ?? this.mergedConfig().theme ?? "light", ...ngDevMode ? [{ debugName: "resolvedTheme" }] : /* istanbul ignore next */ []);
+	resolvedLocale = computed(() => this.locale() ?? this.mergedConfig().locale ?? "fr", ...ngDevMode ? [{ debugName: "resolvedLocale" }] : /* istanbul ignore next */ []);
+	resolvedPlaceholder = computed(() => this.placeholder() ?? this.mergedConfig().placeholder, ...ngDevMode ? [{ debugName: "resolvedPlaceholder" }] : /* istanbul ignore next */ []);
+	resolvedReadOnly = computed(() => (this.readonly() ?? this.mergedConfig().readOnly ?? false) || this.formDisabled(), ...ngDevMode ? [{ debugName: "resolvedReadOnly" }] : /* istanbul ignore next */ []);
+	resolvedVariableSource = computed(() => {
+		const source = {
+			...this.mergedConfig().variables,
+			...this.variables() !== void 0 ? { variables: this.variables() } : {},
+			...this.variableValues() !== void 0 ? { values: this.variableValues() } : {},
+			...this.variableResolver() !== void 0 ? { resolve: this.variableResolver() } : {},
+			...this.allowUnknownVariables() !== void 0 ? { allowUnknown: this.allowUnknownVariables() } : {}
+		};
+		return Object.keys(source).length > 0 ? source : void 0;
+	}, ...ngDevMode ? [{ debugName: "resolvedVariableSource" }] : /* istanbul ignore next */ []);
+	resolvedVariableSuggestion = computed(() => this.variableSuggestion() ?? this.mergedConfig().variableSuggestion, ...ngDevMode ? [{ debugName: "resolvedVariableSuggestion" }] : /* istanbul ignore next */ []);
+	instance = null;
+	mountedToolbar = null;
+	subscriptions = [];
+	pendingValue = null;
+	wordTransformer = null;
+	wordLoading = null;
+	onChange = null;
+	onTouched = null;
+	lazyWordTransformer = (html, context) => this.wordTransformer && untracked(() => this.wordPaste()) ? this.wordTransformer(html, context) : html;
+	constructor() {
+		afterNextRender(() => this.mount());
+		inject(DestroyRef).onDestroy(() => this.unmount());
+		effect(() => {
+			const theme = this.resolvedTheme();
+			untracked(() => this.instance?.setTheme(theme));
+		});
+		effect(() => {
+			const locale = this.resolvedLocale();
+			untracked(() => {
+				const editor = this.instance?.editor;
+				if (editor && editor.i18n.getLocale() !== locale) editor.i18n.setLocale(locale);
+			});
+		});
+		effect(() => {
+			const readOnly = this.resolvedReadOnly();
+			untracked(() => this.instance?.editor.setReadOnly(readOnly));
+		});
+		effect(() => {
+			const placeholder = this.resolvedPlaceholder();
+			untracked(() => {
+				if (this.instance) this.applyPlaceholder(this.instance.editor, placeholder);
+			});
+		});
+		effect(() => {
+			const label = this.ariaLabel();
+			const labelledBy = this.ariaLabelledBy();
+			untracked(() => {
+				if (this.instance) this.applyAriaAttributes(this.instance.editor, label, labelledBy);
+			});
+		});
+		effect(() => {
+			const toolbar = this.resolvedToolbar();
+			untracked(() => {
+				if (this.instance && this.mountedToolbar !== toolbar) this.remount();
+			});
+		});
+		effect(() => {
+			if (this.wordPaste()) untracked(() => {
+				if (this.instance) this.loadWordPaste();
+			});
+		});
+		effect(() => {
+			const declared = this.variables();
+			untracked(() => {
+				if (declared && this.instance) this.instance.editor.variables.define(declared);
+			});
+		});
+		effect(() => {
+			const values = this.variableValues();
+			untracked(() => {
+				if (values && this.instance) this.instance.editor.variables.setValues(values);
+			});
+		});
+	}
+	async importDocx(file) {
+		this.requireEditor("importDocx");
+		const upload = untracked(() => this.resolvedOptions().upload);
+		const { importDocx } = await import("@aster-editor/word");
+		const result = await importDocx(file, upload ? { upload } : {});
+		const editor = this.instance?.editor;
+		if (editor && !editor.isDestroyed()) {
+			editor.setHTML(result.html, true);
+			this.declareImportedVariables(editor, result.variables);
+		}
+		return result;
+	}
+	async exportDocx(options = {}) {
+		const editor = this.requireEditor("exportDocx");
+		const { exportDocx } = await import("@aster-editor/word");
+		const variables = {
+			...options.variables,
+			values: options.variables?.values ?? editor.variables.getValues()
+		};
+		return exportDocx(editor.getHTML(), {
+			...options,
+			variables
+		});
+	}
+	getHTML(options) {
+		return this.instance?.editor.getHTML(options) ?? this.pendingValue ?? "";
+	}
+	resolveVariables() {
+		return this.requireEditor("resolveVariables").variables.resolve();
+	}
+	writeValue(value) {
+		const html = value ?? "";
+		const editor = this.instance?.editor;
+		if (!editor) {
+			this.pendingValue = html;
+			return;
+		}
+		if (editor.getHTML() === html) return;
+		editor.setHTML(html, false);
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.formDisabled.set(isDisabled);
+		this.instance?.editor.setReadOnly(untracked(() => this.resolvedReadOnly()));
+	}
+	mount(content, variables) {
+		if (this.instance) return;
+		const options = untracked(() => this.resolvedOptions(content, variables));
+		const instance = createAster(this.host().nativeElement, options);
+		const editor = instance.editor;
+		this.instance = instance;
+		this.mountedToolbar = options.toolbar ?? "standard";
+		this.pendingValue = null;
+		this.subscriptions = [
+			editor.on("ready", ({ editor: ready }) => this.ready.emit(ready)),
+			editor.on("change", ({ editor: changed }) => {
+				const html = changed.getHTML();
+				this.onChange?.(html);
+				this.changed.emit(html);
+				this.refreshVariableNames(changed);
+			}),
+			editor.on("variablesChange", ({ editor: source, values }) => {
+				this.refreshVariableNames(source);
+				this.variablesChanged.emit(values);
+			}),
+			editor.on("focus", () => this.focused.emit()),
+			editor.on("blur", ({ event }) => {
+				const related = event.relatedTarget;
+				if (related instanceof Node && instance.element.contains(related)) return;
+				this.onTouched?.();
+				this.blurred.emit();
+			})
+		];
+		untracked(() => this.applyAriaAttributes(editor, this.ariaLabel(), this.ariaLabelledBy()));
+		if (untracked(() => this.wordPaste())) this.loadWordPaste();
+		this.refreshVariableNames(editor);
+		this.editorState.set(editor);
+	}
+	unmount() {
+		for (const unsubscribe of this.subscriptions) unsubscribe();
+		this.subscriptions = [];
+		this.instance?.destroy();
+		this.instance = null;
+		this.mountedToolbar = null;
+		this.editorState.set(null);
+		this.variableNamesState.set([]);
+	}
+	remount() {
+		const current = this.instance;
+		if (!current) return;
+		const html = current.editor.getHTML();
+		const focused = current.editor.isFocused();
+		const variables = {
+			declared: current.editor.variables.list(),
+			values: current.editor.variables.getValues()
+		};
+		this.unmount();
+		this.mount(html, variables);
+		if (focused) this.instance?.editor.focus("end");
+	}
+	resolvedOptions(content, variables) {
+		const merged = this.mergedConfig();
+		const initial = content ?? this.pendingValue ?? merged.content;
+		const source = this.resolvedVariableSource();
+		const variableSource = variables ? {
+			...source,
+			variables: [...source?.variables ?? [], ...variables.declared],
+			values: {
+				...source?.values,
+				...variables.values
+			}
+		} : source;
+		return {
+			...merged,
+			content: initial,
+			autofocus: content === void 0 ? merged.autofocus : false,
+			toolbar: this.resolvedToolbar(),
+			theme: this.resolvedTheme(),
+			locale: this.resolvedLocale(),
+			placeholder: this.resolvedPlaceholder(),
+			readOnly: this.resolvedReadOnly(),
+			pasteTransformers: [this.lazyWordTransformer, ...merged.pasteTransformers ?? []],
+			upload: merged.upload ?? this.uploadHandler ?? void 0,
+			variables: variableSource,
+			variableSuggestion: this.resolvedVariableSuggestion()
+		};
+	}
+	requireEditor(method) {
+		const editor = this.instance?.editor;
+		if (!editor) throw new Error(`[aster-editor/angular] ${method}: editor is not mounted yet`);
+		return editor;
+	}
+	refreshVariableNames(editor) {
+		this.variableNamesState.set(editor.variables.getNames());
+	}
+	declareImportedVariables(editor, found) {
+		if (found.length === 0) return;
+		editor.variables.define(found);
+		const known = untracked(() => this.variableValues());
+		if (!known) return;
+		const overrides = {};
+		for (const variable of found) {
+			const value = known[variable.name];
+			if (variable.value !== void 0 && value !== void 0 && value !== variable.value) overrides[variable.name] = value;
+		}
+		if (Object.keys(overrides).length > 0) editor.variables.setValues(overrides);
+	}
+	loadWordPaste() {
+		if (this.wordTransformer || this.wordLoading) return;
+		this.wordLoading = import("@aster-editor/word").then((word) => {
+			this.wordTransformer = word.wordPasteTransformer();
+		}).catch((error) => {
+			this.wordLoading = null;
+			console.warn("[aster-editor/angular] @aster-editor/word unavailable, paste kept raw", error);
+		});
+	}
+	applyAriaAttributes(editor, label, labelledBy) {
+		setOrRemoveAttribute(editor.contentElement, "aria-label", label);
+		setOrRemoveAttribute(editor.contentElement, "aria-labelledby", labelledBy);
+	}
+	applyPlaceholder(editor, placeholder) {
+		const tiptap = editor.tiptap;
+		const extension = tiptap.extensionManager.extensions.find((candidate) => candidate.name === "placeholder");
+		if (extension?.type !== "extension") return;
+		const factory = extension.config.addProseMirrorPlugins;
+		if (!factory) return;
+		const options = {
+			...extension.options,
+			placeholder: () => placeholder ?? editor.i18n.t("editor.placeholder")
+		};
+		const plugins = factory.call({
+			name: extension.name,
+			options,
+			storage: extension.storage,
+			editor: tiptap,
+			type: null,
+			parent: void 0
+		});
+		for (const plugin of plugins) {
+			tiptap.unregisterPlugin(plugin.spec.key ?? extension.name);
+			tiptap.registerPlugin(plugin);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.2",
+		ngImport: i0,
+		type: AsterEditorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.2",
+		type: AsterEditorComponent,
+		isStandalone: true,
+		selector: "aster-editor",
+		inputs: {
+			toolbar: {
+				classPropertyName: "toolbar",
+				publicName: "toolbar",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			theme: {
+				classPropertyName: "theme",
+				publicName: "theme",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			locale: {
+				classPropertyName: "locale",
+				publicName: "locale",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			readonly: {
+				classPropertyName: "readonly",
+				publicName: "readonly",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			config: {
+				classPropertyName: "config",
+				publicName: "config",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			wordPaste: {
+				classPropertyName: "wordPaste",
+				publicName: "wordPaste",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "ariaLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledBy: {
+				classPropertyName: "ariaLabelledBy",
+				publicName: "ariaLabelledBy",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variables: {
+				classPropertyName: "variables",
+				publicName: "variables",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variableValues: {
+				classPropertyName: "variableValues",
+				publicName: "variableValues",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variableResolver: {
+				classPropertyName: "variableResolver",
+				publicName: "variableResolver",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			allowUnknownVariables: {
+				classPropertyName: "allowUnknownVariables",
+				publicName: "allowUnknownVariables",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			variableSuggestion: {
+				classPropertyName: "variableSuggestion",
+				publicName: "variableSuggestion",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: {
+			ready: "ready",
+			changed: "changed",
+			focused: "focused",
+			blurred: "blurred",
+			variablesChanged: "variablesChanged"
+		},
+		providers: [{
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => AsterEditorComponent),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "host",
+			first: true,
+			predicate: ["host"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: "<div #host class=\"aster-editor__host\"></div>",
+		isInline: true,
+		styles: [":host{display:block}\n"],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.2",
+	ngImport: i0,
+	type: AsterEditorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "aster-editor",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			template: "<div #host class=\"aster-editor__host\"></div>",
+			providers: [{
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => AsterEditorComponent),
+				multi: true
+			}],
+			styles: [":host{display:block}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		toolbar: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "toolbar",
+				required: false
+			}]
+		}],
+		theme: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "theme",
+				required: false
+			}]
+		}],
+		locale: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "locale",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		readonly: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "readonly",
+				required: false
+			}]
+		}],
+		config: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "config",
+				required: false
+			}]
+		}],
+		wordPaste: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "wordPaste",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabel",
+				required: false
+			}]
+		}],
+		ariaLabelledBy: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "ariaLabelledBy",
+				required: false
+			}]
+		}],
+		variables: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variables",
+				required: false
+			}]
+		}],
+		variableValues: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variableValues",
+				required: false
+			}]
+		}],
+		variableResolver: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variableResolver",
+				required: false
+			}]
+		}],
+		allowUnknownVariables: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowUnknownVariables",
+				required: false
+			}]
+		}],
+		variableSuggestion: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variableSuggestion",
+				required: false
+			}]
+		}],
+		ready: [{
+			type: i0.Output,
+			args: ["ready"]
+		}],
+		changed: [{
+			type: i0.Output,
+			args: ["changed"]
+		}],
+		focused: [{
+			type: i0.Output,
+			args: ["focused"]
+		}],
+		blurred: [{
+			type: i0.Output,
+			args: ["blurred"]
+		}],
+		variablesChanged: [{
+			type: i0.Output,
+			args: ["variablesChanged"]
+		}],
+		host: [{
+			type: i0.ViewChild,
+			args: ["host", { isSignal: true }]
+		}]
+	}
+});
+export { ASTER_CONFIG, ASTER_UPLOAD_HANDLER, AsterEditorComponent, provideAster };
+
+//# sourceMappingURL=aster-editor-angular.mjs.map